SoftwareBrothers · dziraf · Mar 30, 2023 · Mar 27, 2023 · Mar 27, 2023 · Mar 28, 2023
diff --git a/src/components/RecordDifference.tsx b/src/components/RecordDifference.tsx
@@ -1,14 +1,14 @@
-import React, { FC } from 'react';
-import { BasePropertyProps, flat } from 'adminjs';
 import {
   FormGroup,
   Label,
   Table as AdminTable,
-  TableCell,
   TableBody,
+  TableCell,
   TableHead,
   TableRow,
 } from '@adminjs/design-system';
+import { BasePropertyProps, flat } from 'adminjs';
+import React, { FC } from 'react';
 import { styled } from 'styled-components';
 
 const Cell = styled(TableCell)`
@@ -44,9 +44,11 @@ const RecordDifference: FC<BasePropertyProps> = ({ record, property }) => {
       <Label>{property.label}</Label>
       <Table>
         <Head>
-          <Cell>Property name</Cell>
-          <Cell>Before</Cell>
-          <Cell>After</Cell>
+          <Row>
+            <Cell>Property name</Cell>
+            <Cell>Before</Cell>
+            <Cell>After</Cell>
+          </Row>
         </Head>
         <TableBody>
           {Object.entries(

diff --git a/src/components/bundle.ts b/src/components/bundle.ts
diff --git a/src/index.ts b/src/index.ts
@@ -6,7 +6,6 @@
 
 import loggerFeature from './logger.feature.js';
 
-export { bundleComponents } from './components/bundle.js';
 export * from './constants.js';
 export { createLoggerResource } from './logger.resource.js';
 export * from './types.js';

diff --git a/src/log.action.ts b/src/log.action.ts
@@ -11,7 +11,7 @@ import {
 
 import { ADMINJS_LOGGER_DEFAULT_RESOURCE_ID } from './constants.js';
 import { MISSING_USER_ID_ERROR } from './errors.js';
-import { CreateLogActionParams, LoggerFeatureOptions } from './types.js';
+import { CreateLogActionParams, LoggerActionOptions } from './types.js';
 import { difference } from './utils/difference.js';
 import { getLogPropertyName } from './utils/get-log-property-name.js';
 
@@ -145,7 +145,7 @@ const createPersistLogAction =
   (
     request: ActionRequest,
     context: ActionContext,
-    options: LoggerFeatureOptions
+    options: LoggerActionOptions
   ) =>
   async ({ recordId, record, initialRecord }: CreatePersistLogParams) => {
     const { currentAdmin, _admin, action } = context;
@@ -204,7 +204,7 @@ const createPersistLogAction =
       await Log.create(logParams);
     } catch (e) {
       /* The action should not fail nor display a message to the end-user
-                  but we must log the error in server's console for developers */
+      but we must log the error in server's console for developers */
       console.error(e);
     }
   };
diff --git a/src/logger.resource.ts b/src/logger.resource.ts
@@ -1,22 +1,26 @@
-import { ResourceWithOptions } from 'adminjs';
+import { ComponentLoader, ResourceWithOptions } from 'adminjs';
 
-import { bundleComponents } from './components/bundle.js';
+import { bundleComponent } from './utils/bundle-component.js';
 import { ADMINJS_LOGGER_DEFAULT_RESOURCE_ID } from './constants.js';
 import { LoggerFeatureOptions } from './types.js';
 import { getLogPropertyName } from './utils/get-log-property-name.js';
 
-const { RECORD_DIFFERENCE, RECORD_LINK } = bundleComponents();
-
 export const createLoggerResource = <T = unknown>({
+  componentLoader,
   resource,
   featureOptions,
 }: {
+  componentLoader: ComponentLoader;
   resource: T;
   featureOptions?: LoggerFeatureOptions;
 }): ResourceWithOptions => {
   const { resourceOptions = {}, propertiesMapping = {} } = featureOptions ?? {};
   const { resourceId, navigation, actions = {} } = resourceOptions;
-
+  const recordDifferenceComponent = bundleComponent(
+    componentLoader,
+    'RecordDifference'
+  );
+  const recordLinkComponent = bundleComponent(componentLoader, 'RecordLink');
   return {
     resource,
     options: {
@@ -55,7 +59,7 @@ export const createLoggerResource = <T = unknown>({
         },
         [getLogPropertyName('difference', propertiesMapping)]: {
           components: {
-            show: RECORD_DIFFERENCE,
+            show: recordDifferenceComponent,
           },
           custom: {
             propertiesMapping,
@@ -64,8 +68,8 @@ export const createLoggerResource = <T = unknown>({
         },
         [getLogPropertyName('recordId', propertiesMapping)]: {
           components: {
-            list: RECORD_LINK,
-            show: RECORD_LINK,
+            list: recordLinkComponent,
+            show: recordLinkComponent,
           },
           custom: {
             propertiesMapping,

diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,6 @@
 import {
   Action,
+  ComponentLoader,
   ListActionResponse,
   RecordActionResponse,
   ResourceOptions,
@@ -53,7 +54,7 @@ export type LoggerPropertiesMapping = {
 
 export type CreateLogActionParams = {
   onlyForPostMethod?: boolean;
-  options?: LoggerFeatureOptions;
+  options?: LoggerActionOptions;
 };
 
 /**
@@ -78,6 +79,10 @@ export type LoggerResourceOptions = {
  * @alias LoggerFeatureOptions
  */
 export type LoggerFeatureOptions = {
+  /**
+   * Your ComponentLoader instance. It is required for the feature to add it's components.
+   */
+  componentLoader: ComponentLoader;
   /**
    * For the feature to work you must define a model using an ORM of your choice.
    * In case you want to use different attribute names, you can use this
@@ -93,3 +98,5 @@ export type LoggerFeatureOptions = {
    */
   resourceOptions?: LoggerResourceOptions;
 };
+
+export type LoggerActionOptions = Omit<LoggerFeatureOptions, 'componentLoader'>;
diff --git a/src/utils/bundle-component.ts b/src/utils/bundle-component.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+
+import type { ComponentLoader } from 'adminjs';
+
+export const bundleComponent = (
+  loader: ComponentLoader,
+  componentName: string
+) => {
+  const componentPath = path.join(__dirname, `../components/${componentName}`);
+  return loader.add(componentName, componentPath);
+};
diff --git a/src/utils/with-logger.ts b/src/utils/with-logger.ts
@@ -5,7 +5,7 @@ import { CreateLogActionParams } from '../types.js';
 
 export const withLogger = (
   action: Partial<Action<ActionResponse>>,
-  { onlyForPostMethod, options = {} }: CreateLogActionParams
+  { onlyForPostMethod, options }: CreateLogActionParams
 ): Partial<Action<ActionResponse>> => ({
   ...action,
   before: (Array.isArray(action.before)

diff --git a/test/utils/with-logger.test.ts b/test/utils/with-logger.test.ts
@@ -8,7 +8,6 @@ describe('withLogger', () => {
       before: [stubFunction],
     };
     const mergedAction = withLogger(initialAction, {});
-
     expect(mergedAction.after).toContain(stubFunction);
     expect(mergedAction.after?.length).toEqual(2);
     expect(mergedAction.before).toContain(stubFunction);