fix: error when use AdminBro.bundle form an another package

src/admin-bro.spec.ts

@@ -50,25 +50,25 @@ describe('AdminBro', function () {
 
   describe('.bundle', function () {
     afterEach(function () {
-      AdminBro.UserComponents = {}
+      global.UserComponents = {}
     })
     context('file exists', function () {
       beforeEach(function () {
         this.result = AdminBro.bundle('../spec/fixtures/example-component')
       })
 
       it('adds given file to a UserComponents object', function () {
-        expect(Object.keys(AdminBro.UserComponents)).to.have.lengthOf(1)
+        expect(Object.keys(global.UserComponents || {})).to.have.lengthOf(1)
       })
 
       it('returns uniq id', function () {
-        expect(AdminBro.UserComponents[this.result]).not.to.be.undefined
+        expect(global.UserComponents && global.UserComponents[this.result]).not.to.be.undefined
         expect(this.result).to.be.a('string')
       })
 
       it('converts relative path to absolute path', function () {
         expect(
-          AdminBro.UserComponents[this.result],
+          global.UserComponents && global.UserComponents[this.result],
         ).to.equal(path.join(__dirname, '../spec/fixtures/example-component'))
       })
     })

src/admin-bro.ts

@@ -53,8 +53,6 @@ type ActionsMap = {
   list: Action<ListActionResponse>;
 }
 
-type UserComponentsMap = {[key: string]: string}
-
 export type Adapter = { Database: typeof BaseDatabase; Resource: typeof BaseResource }
 
 /**
@@ -157,11 +155,6 @@ class AdminBro {
    */
   public static VERSION: string
 
-  /**
-   * List of all bundled components
-   */
-  public static UserComponents: UserComponentsMap
-
   /**
    * @param   {AdminBroOptions} options      Options passed to AdminBro
    */
@@ -357,13 +350,20 @@ class AdminBro {
       throw new ConfigurationError(`Given file "${src}", doesn't exist.`, 'AdminBro.html')
     }
 
-    AdminBro.UserComponents[componentId] = path.format({ root, dir, name })
+    // We have to put this to the global scope because of the NPM resolution. If we put this to
+    // let say `AdminBro.UserComponents` (static member) it wont work in a case where user uses
+    // AdminBro.bundle from a different packages (i.e. from the extension) because there, there
+    // is an another AdminBro version (npm installs different versions for each package). Also
+    // putting admin to peerDependencies wont solve this issue, because in the development mode
+    // we have to install admin-bro it as a devDependency, because we want to run test or have
+    // proper types.
+    global.UserComponents = global.UserComponents || {}
+    global.UserComponents[componentId] = path.format({ root, dir, name })
 
     return componentId
   }
 }
 
-AdminBro.UserComponents = {}
 AdminBro.registeredAdapters = []
 AdminBro.VERSION = VERSION
 

src/backend/bundler/generate-user-component-entry.ts

@@ -16,7 +16,7 @@ import slash from 'slash'
  */
 const generateUserComponentEntry = (admin, entryPath: string): string => {
   const { env = {} } = admin.options
-  const { UserComponents } = admin.constructor
+  const { UserComponents } = global
 
   const absoluteEntryPath = path.resolve(entryPath)
 
@@ -25,8 +25,11 @@ const generateUserComponentEntry = (admin, entryPath: string): string => {
   const envPart = Object.keys(env).map(envKey => (
     `AdminBro.env.${envKey} = ${JSON.stringify(env[envKey])}\n`
   )).join('')
-  const componentsPart = Object.keys(UserComponents).map((componentId) => {
-    const componentUrl = path.relative(absoluteEntryPath, UserComponents[componentId])
+  const componentsPart = Object.keys(UserComponents || {}).map((componentId) => {
+    const componentUrl = path.relative(
+      absoluteEntryPath,
+      (UserComponents as UserComponentsMap)[componentId],
+    )
     return [
       `import ${componentId} from '${slash(componentUrl)}'`,
       `AdminBro.UserComponents.${componentId} = ${componentId}`,