v4 (#65)

* feat: replace AdminJS.bundle with ComponentLoader

* chore: change to ECMAScript modules

BREAKING CHANGE: The package won't support CJS anymore.
BREAKING CHANGE: You now have to provide your ComponentLoader instance to the feature

---------

Co-authored-by: Jarosław Wasiak <[email protected]>
Co-authored-by: Rafal Dziegielewski <[email protected]>

.eslintrc.js → .eslintrc.cjs

@@ -10,8 +10,10 @@ module.exports = {
   ],
   ignorePatterns: [
     '*/build/**/*',
+    '*/dist/**/*',
     '*.json',
     '*.txt',
+    '*.mp4',
     'yarn.lock',
     '*.yaml',
     '*.md',
@@ -22,7 +24,7 @@ module.exports = {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 11,
+    ecmaVersion: 20,
     sourceType: 'module',
   },
   plugins: [
@@ -50,6 +52,8 @@ module.exports = {
       'react/prop-types': 'off',
       'react/jsx-props-no-spreading': 'off',
       'import/no-extraneous-dependencies': 'off',
+      'react/function-component-definition': 'off',
+      'react/require-default-props': 'off',
     },
   }, {
     files: ['./src/**/*.spec.ts', '**/*/spec/**/*.ts'],

.github/workflows/push.yml

@@ -12,10 +12,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Setup
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: '10.x'
-      - uses: actions/cache@v1
+          node-version: '18.x'
+      - uses: actions/cache@v2
         id: yarn-cache
         with:
           path: node_modules
@@ -37,20 +37,3 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: yarn release
-
-  notify:
-    name: Notify
-    runs-on: ubuntu-latest
-    if: failure()
-    needs:
-      - test
-    steps:
-      - uses: technote-space/workflow-conclusion-action@v1
-      - uses: 8398a7/action-slack@v3
-        with:
-          status: ${{ env.WORKFLOW_CONCLUSION }}
-          fields: repo,message,commit,author,action,eventName,ref,workflow
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}
-        if: always()

.gitignore

@@ -162,3 +162,5 @@ build
 
 example-app/cypress/videos
 example-app/public
+example-app/yarn-error.log*
+.nova

.releaserc

@@ -19,7 +19,7 @@
       "semantic-release-slack-bot",
       {
         "notifyOnSuccess": true,
-        "notifyOnFail": true
+        "notifyOnFail": false
       }
     ]
   ]

example-app/cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+import pluginConfig from './cypress/plugins/index.js'
+
+export default defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      pluginConfig(on, config)
+    },
+    baseUrl: 'http://localhost:3000/admin',
+  },
+})

example-app/cypress/plugins/index.js

@@ -16,7 +16,9 @@
  * @type {Cypress.PluginConfig}
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-module.exports = (on, config) => {
+const pluginConfig = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 }
+
+export default pluginConfig

example-app/ormconfig.js

@@ -1,16 +1,18 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path')
+import path from 'path'
+import { fileURLToPath } from 'node:url'
 
+const dirname = fileURLToPath(new URL('.', import.meta.url))
 const rootDir = 'build/src'
 
-module.exports = {
+export default {
   type: 'postgres',
   host: process.env.POSTGRES_HOST || 'localhost',
   port: +(process.env.POSTGRES_PORT || 5432),
   username: process.env.POSTGRES_USER || 'postgres',
   password: process.env.POSTGRES_PASSWORD || 'secret',
   database: process.env.POSTGRES_DATABASE || 'postgres',
-  entities: [`${__dirname}/./**/*.entity.js`],
+  entities: [`${dirname}/./**/*.entity.js`],
   migrations: [path.join(rootDir, '/migration/**/*.js')],
   subscribers: [path.join(rootDir, '/subscriber/**/*.js')],
   synchronize: true,

example-app/package.json

@@ -2,35 +2,37 @@
   "name": "example-app",
   "version": "1.0.0",
   "main": "index.js",
+  "type": "module",
   "license": "MIT",
   "scripts": {
     "build": "tsc",
-    "start": "yarn build && node build/index.js",
-    "clean": "rm -rf build && mkdir build",
-    "dev": "yarn clean && concurrently \"wait-on build/src/index.js && nodemon --ext '.js' --watch ../build --watch ./build --ignore 'cypress/**/*.js' node build/src/index.js\" \"yarn build --watch\"",
+    "start": "yarn build && node dist/example-app/src/index.js",
+    "clean": "rm -rf dist && mkdir dist",
+    "dev": "yarn clean && concurrently \"wait-on dist/src/index.js && nodemon --ext '.js' --watch ../build --watch ./dist --ignore 'cypress/**/*.js' node dist/example-app/src/index.js\" \"yarn build --watch\"",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run"
   },
   "devDependencies": {
-    "@types/express": "^4.17.7",
-    "concurrently": "^5.2.0",
-    "cypress": "^4.11.0",
+    "@types/express": "^4.17.17",
+    "concurrently": "^8.0.1",
     "nodemon": "^2.0.4",
-    "ts-node": "^8.10.2",
-    "typescript": "^3.9.7",
-    "wait-on": "^5.2.0"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.0.2",
+    "wait-on": "^7.0.1"
   },
   "dependencies": {
-    "@adminjs/express": "^3.0.0",
-    "@adminjs/typeorm": "1.4.0",
-    "@adminjs/upload": "../",
+    "@adminjs/design-system": "^4.0.0-beta-v4.8",
+    "@adminjs/express": "^6.0.0-beta.3",
+    "@adminjs/typeorm": "5.0.0-beta.1",
     "@google-cloud/storage": "^5.3.0",
-    "adminjs": "^3.3.1",
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
+    "adminjs": "7.0.0-beta-v7.4",
+    "cypress": "^12.9.0",
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2",
     "express-formidable": "^1.2.0",
-    "express-session": "^1.17.1",
+    "express-session": "^1.17.3",
     "pg": "^8.3.0",
-    "typeorm": "^0.2.25"
-  }
+    "typeorm": "^0.3.12"
+  },
+  "relativeDependencies": {}
 }

example-app/src/admin/component-loader.ts

@@ -0,0 +1,5 @@
+import { ComponentLoader } from 'adminjs'
+
+const componentLoader = new ComponentLoader()
+
+export { componentLoader }

example-app/src/admin/resources/custom/custom.resource.ts

@@ -1,9 +1,10 @@
 /* eslint-disable no-console */
 /* eslint-disable class-methods-use-this */
-import uploadFeature, { BaseProvider } from '@adminjs/upload'
+import uploadFeature, { BaseProvider } from '../../../../../src/index.js'
+import { componentLoader } from '../../component-loader.js'
 
-import { CreateResourceResult } from '../create-resource-result.type'
-import { Custom } from '../../../custom/custom.entity'
+import { CreateResourceResult } from '../create-resource-result.type.js'
+import { Custom } from '../../../custom/custom.entity.js'
 
 class MyProvider extends BaseProvider {
   constructor() {
@@ -31,6 +32,7 @@ const createPhotoResource = (): CreateResourceResult<typeof Custom> => ({
     properties: { file: { isVisible: { list: true, show: true, edit: true, filter: false } } },
   },
   features: [uploadFeature({
+    componentLoader,
     provider: new MyProvider(),
     properties: { file: 'file', key: 'filePath', bucket: 'bucket', filePath: 'path' },
     validation: { mimeTypes: ['image/png'] },

example-app/src/admin/resources/multi/multi.resource.ts

@@ -1,7 +1,7 @@
-import uploadFeature from '@adminjs/upload'
-
-import { CreateResourceResult } from '../create-resource-result.type'
-import { Multi } from '../../../multi/multi.entity'
+import uploadFeature from '../../../../../src/index.js'
+import { componentLoader } from '../../component-loader.js'
+import { CreateResourceResult } from '../create-resource-result.type.js'
+import { Multi } from '../../../multi/multi.entity.js'
 
 const photoProperties = (options = {}) => ({
   bucket: {
@@ -28,6 +28,7 @@ const photoProperties = (options = {}) => ({
 
 const uploadFeatureFor = (name?: string, multiple = false) => (
   uploadFeature({
+    componentLoader,
     provider: {
       gcp: {
         bucket: process.env.GOOGLE_BUCKET as string,

example-app/src/admin/resources/photo/photo.resource.ts

@@ -1,15 +1,16 @@
-import uploadFeature from '@adminjs/upload'
-
-import { CreateResourceResult } from '../create-resource-result.type'
-import { Photo } from '../../../photo/photo.entity'
+import uploadFeature from '../../../../../src/index.js'
+import { componentLoader } from '../../component-loader.js'
+import { CreateResourceResult } from '../create-resource-result.type.js'
+import { Photo } from '../../../photo/photo.entity.js'
 
 const createPhotoResource = (): CreateResourceResult<typeof Photo> => ({
   resource: Photo,
   options: {
     listProperties: ['id', 's3Key', 'bucket', 'path'],
   },
   features: [uploadFeature({
-    provider: { local: { bucket: 'public' } },
+    componentLoader,
+    provider: { local: { bucket: 'public', opts: {} } },
     properties: { file: 'file', key: 's3Key', bucket: 'bucket', mimeType: 'mime' },
     validation: { mimeTypes: ['image/png'] },
   })],

example-app/src/admin/resources/post/post.resource.ts

@@ -1,17 +1,19 @@
-import uploadFeature from '@adminjs/upload'
-
-import { CreateResourceResult } from '../create-resource-result.type'
-import { Post } from '../../../post/post.entity'
+import uploadFeature from '../../../../../src/index.js'
+import { componentLoader } from '../../component-loader.js'
+import { CreateResourceResult } from '../create-resource-result.type.js'
+import { Post } from '../../../post/post.entity.js'
 
 const createPostResource = (): CreateResourceResult<typeof Post> => ({
   resource: Post,
   options: {
     listProperties: ['id', 'bucketKey', 'bucket', 'path'],
   },
   features: [uploadFeature({
+    componentLoader,
     provider: {
       gcp: {
-        bucket: process.env.GCP_STORAGE_BUCKET,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        bucket: process.env.GCP_STORAGE_BUCKET!,
         expires: 0,
       },
     },

example-app/src/admin/resources/user/user.resource.ts

@@ -1,14 +1,16 @@
-import uploadFeature from '@adminjs/upload'
-import { CreateResourceResult } from '../create-resource-result.type'
-import credentials from '../../../credentials'
-import { User } from '../../../user/user.entity'
+import uploadFeature from '../../../../../src/index.js'
+import { componentLoader } from '../../component-loader.js'
+import { CreateResourceResult } from '../create-resource-result.type.js'
+import credentials from '../../../credentials.js'
+import { User } from '../../../user/user.entity.js'
 
 const createUserResource = (): CreateResourceResult<typeof User> => ({
   resource: User,
   options: {
     listProperties: ['id', 'avatar', 'email', 'test'],
   },
   features: [uploadFeature({
+    componentLoader,
     provider: { aws: credentials },
     properties: {
       filename: 'name',

example-app/src/custom/custom.entity.ts

@@ -13,17 +13,17 @@ import {
 @Entity({ name: 'custom' })
 export class Custom extends BaseEntity {
   @PrimaryGeneratedColumn()
-  public id: number;
+  public id: number
 
   @Column({ nullable: true })
-  public filePath: string;
+  public filePath: string
 
   @Column({ nullable: true })
-  public bucket: string;
+  public bucket: string
 
   @CreateDateColumn()
-  public createdAt: Date;
+  public createdAt: Date
 
   @UpdateDateColumn()
-  public updatedAt: Date;
+  public updatedAt: Date
 }

example-app/src/index.ts

@@ -1,20 +1,24 @@
 /* eslint-disable import/first */
 import path from 'path'
+import * as url from 'url'
 import { config } from 'dotenv'
 
-config({ path: path.join(__dirname, '../../.env') })
+const dirname = url.fileURLToPath(new URL('.', import.meta.url))
+
+config({ path: path.join(dirname, '../../.env') })
 
 import express from 'express'
 import AdminJS from 'adminjs'
-import { buildRouter } from '@adminjs/express'
+import AdminJSExpress from '@adminjs/express'
 import { Database, Resource } from '@adminjs/typeorm'
 import { createConnection } from 'typeorm'
+import { componentLoader } from './admin/component-loader.js'
 
-import createPhotoResource from './admin/resources/photo/photo.resource'
-import createUserResource from './admin/resources/user/user.resource'
-import createCustomResource from './admin/resources/custom/custom.resource'
-import createPostResource from './admin/resources/post/post.resource'
-import createMultiResource from './admin/resources/multi/multi.resource'
+import createPhotoResource from './admin/resources/photo/photo.resource.js'
+import createUserResource from './admin/resources/user/user.resource.js'
+import createCustomResource from './admin/resources/custom/custom.resource.js'
+import createPostResource from './admin/resources/post/post.resource.js'
+import createMultiResource from './admin/resources/multi/multi.resource.js'
 
 const PORT = 3000
 
@@ -24,6 +28,7 @@ const run = async () => {
   const app = express()
   app.use('/public', express.static('public'))
   const admin = new AdminJS({
+    componentLoader,
     resources: [
       createPhotoResource(),
       createUserResource(),
@@ -47,7 +52,7 @@ const run = async () => {
 
   admin.watch()
 
-  const router = buildRouter(admin)
+  const router = AdminJSExpress.buildRouter(admin)
 
   app.use(admin.options.rootPath, router)