chore: replace AdminJS.bundle with ComponentLoader (#15)

BREAKING CHANGE: The package now requires you to provide your ComponentLoader instance.

---------

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

.gitignore

@@ -162,4 +162,4 @@ build
 
 example-app/cypress/videos
 
-.nova
+.nova

package.json

@@ -13,6 +13,7 @@
   "license": "MIT",
   "scripts": {
     "release": "semantic-release",
+    "prepare": "husky install",
     "build": "tsc",
     "test": "mocha --loader=ts-node/esm ./src/**/*.spec.ts",
     "lint": "eslint './src/**/*'",
@@ -28,16 +29,16 @@
     "adminjs": ">=6.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.4.4",
+    "@commitlint/cli": "^17.5.1",
     "@commitlint/config-conventional": "^17.4.4",
     "@semantic-release/git": "^10.0.1",
     "@types/chai": "^4.3.4",
     "@types/mocha": "^10.0.1",
     "@types/sinon": "^10.0.13",
     "@types/sinon-chai": "^3.2.9",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
-    "adminjs": "^7.0.0-beta-v7.2",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
+    "adminjs": "^7.0.0-beta-v7.3",
     "argon2": "^0.30.3",
     "chai": "^4.3.7",
     "eslint": "^8.36.0",
@@ -46,13 +47,13 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^4.2.5",
     "mocha": "^10.2.0",
+    "husky": "^8.0.3",
     "semantic-release": "^20.1.3",
     "semantic-release-slack-bot": "^4.0.0",
-    "sinon": "^15.0.2",
+    "sinon": "^15.0.3",
     "sinon-chai": "^3.7.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.2"
   }
 }

src/bundle-component.ts

@@ -0,0 +1,18 @@
+import path from 'path'
+import * as url from 'url'
+
+import type { ComponentLoader } from 'adminjs'
+
+// eslint-disable-next-line no-underscore-dangle
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const bundleComponent = (
+  loader: ComponentLoader,
+  componentName: string,
+) => {
+  const componentPath = path.join(__dirname, `./components/${componentName}`)
+  return loader.add(componentName, componentPath)
+}
+
+export default bundleComponent

src/passwords.feature.spec.ts

@@ -1,4 +1,5 @@
-import AdminJS, { ActionContext, ActionRequest, ActionResponse, After, Before } from 'adminjs'
+import AdminJS, { ActionContext, ActionRequest, ActionResponse, After, Before, ComponentLoader } from 'adminjs'
+
 import { expect } from 'chai'
 import sinon, { SinonStub } from 'sinon'
 
@@ -10,6 +11,7 @@ describe('passwordsFeature', () => {
   let context: ActionContext
   let response: ActionResponse
   let hash: SinonStub<[string], Promise<string>>
+  const componentLoader = new ComponentLoader()
 
   beforeEach(() => {
     properties = {
@@ -37,12 +39,18 @@ describe('passwordsFeature', () => {
   })
 
   it('returns password feature', async () => {
-    expect(typeof passwordsFeature({ hash })).to.have.eq('function')
+    expect(typeof passwordsFeature({ componentLoader, hash })).to.have.eq('function')
+  })
+
+  it('throws an error when componentLoader function is not defined', () => {
+    expect(() => {
+      passwordsFeature({} as any)
+    }).to.throw()
   })
 
   it('throws an error when hashing function is not defined', () => {
     expect(() => {
-      passwordsFeature()
+      passwordsFeature({ componentLoader } as any)
     }).to.throw()
   })
 
@@ -55,7 +63,7 @@ describe('passwordsFeature', () => {
     }
 
     beforeEach(() => {
-      encryptPassword = getBeforeHook({ properties, hash })
+      encryptPassword = getBeforeHook({ componentLoader, properties, hash })
     })
 
     it('does nothing when method is get', async () => {
@@ -102,7 +110,7 @@ describe('passwordsFeature', () => {
     }
 
     beforeEach(() => {
-      movePasswordErrors = getAfterHook({ properties, hash })
+      movePasswordErrors = getAfterHook({ componentLoader, properties, hash })
     })
 
     it('does nothing when payload doesn\'t have errors', async () => {

src/passwords.feature.ts

@@ -1,4 +1,5 @@
-import AdminJS, { ActionResponse, After, Before, buildFeature, FeatureType } from 'adminjs'
+import { ActionResponse, After, Before, buildFeature, ComponentLoader, FeatureType } from 'adminjs'
+import bundleComponent from './bundle-component.js'
 
 /**
  * Hashing function used to convert the password
@@ -21,6 +22,10 @@ export type HashingFunction = (
  * @memberof module:@adminjs/passwords
  */
 export type PasswordsOptions = {
+  /**
+   * Your ComponentLoader instance. It is required for the feature to add it's components.
+   */
+  componentLoader: ComponentLoader;
   /**
    * Names of the properties used by the feature
    */
@@ -47,17 +52,17 @@ export type Custom = {
   [T in keyof NonNullable<PasswordsOptions['properties']>]: NonNullable<T>
 }
 
-const editComponent = AdminJS.bundle('./components/edit', 'PasswordFeatureEdit' as any)
-
-export const passwordsFeature = (options?: PasswordsOptions): FeatureType => {
-  const passwordProperty = options?.properties?.password || 'password'
-  const encryptedPasswordProperty = options?.properties?.encryptedPassword || 'encryptedPassword'
-  const { hash } = options || {}
+const passwordsFeature = (options: PasswordsOptions): FeatureType => {
+  const passwordProperty = options.properties?.password || 'password'
+  const encryptedPasswordProperty = options.properties?.encryptedPassword || 'encryptedPassword'
+  const { componentLoader, hash } = options
 
   if (!hash) {
     throw new Error('You have to pass "hash" option in "PasswordOptions" of "passwordsFeature"')
   }
 
+  const editComponent = bundleComponent(componentLoader, 'PasswordEditComponent')
+
   const encryptPassword: Before = async (request) => {
     const { method } = request
     const { [passwordProperty]: newPassword, ...rest } = request.payload || {}