v5 (#18)

* chore: rewrite package to esmodules (#16) BREAKING CHANGE: The package won't support CJS anymore. * chore: use componentLoader instead of AdminJS.bundle BREAKING CHANGE: Configuration changed due to AdminJS.bundle being removed, use componentLoader instead
SoftwareBrothers · Apr 18, 2023 · 58454db · 58454db
1 parent 9d01941
commit 58454db
Show file tree

Hide file tree

Showing 25 changed files with 5,061 additions and 6,079 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
@@ -8,7 +8,7 @@ module.exports = {
     'plugin:react/recommended',
   ],
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 20,
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
@@ -17,8 +17,8 @@ module.exports = {
   rules: {
     'prettier/prettier': 'error',
     'react/prop-types': 'off',
-    'semi': ['error', 'always'],
-    'quotes': ['error', 'single'],
+    semi: ['error', 'always'],
+    quotes: ['error', 'single'],
   },
   ignorePatterns: ['node_modules', 'lib'],
 };
diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
@@ -10,7 +10,7 @@ jobs:
       - name: Setup
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         with:

diff --git a/.gitignore b/.gitignore
@@ -122,3 +122,4 @@ dist
 /lib
 /types
 example/.adminjs
+.nova
diff --git a/commitlint.config.js → commitlint.config.cjs b/commitlint.config.js → commitlint.config.cjs
diff --git a/jest.config.js b/jest.config.js
diff --git a/jest.json b/jest.json
@@ -0,0 +1,26 @@
+{
+  "moduleFileExtensions": ["js", "json", "ts", "tsx"],
+  "rootDir": "./test",
+  "testEnvironment": "node",
+  "testRegex": ".test.ts$",
+  "extensionsToTreatAsEsm": [".ts"],
+  "transformIgnorePatterns": ["node_modules"],
+  "transform": {
+    "^.+\\.(t|j)sx?$": [
+      "ts-jest",
+      { 
+        "useESM": true,
+        "tsconfig": "./tsconfig.test.json",
+        "isolatedModules": true
+      }
+    ]
+  },
+  "moduleNameMapper": {
+    "^(\\.{1,2}/.*)\\.js$": "$1"
+  },
+  "testTimeout": 10000,
+  "preset": "ts-jest/presets/default-esm",
+  "verbose": true,
+  "silent": true,
+  "forceExit": true
+}
diff --git a/package.json b/package.json
@@ -1,8 +1,13 @@
 {
   "name": "@adminjs/logger",
   "version": "4.0.1",
-  "main": "lib/index.js",
-  "types": "types/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "types": "./types/index.d.ts"
+    }
+  },
   "private": false,
   "repository": "[email protected]:SoftwareBrothers/adminjs-logger.git",
   "license": "MIT",
@@ -11,8 +16,8 @@
     "clean": "rimraf lib types",
     "build": "tsc",
     "dev": "tsc --watch",
-    "test": "jest",
-    "lint": "eslint -c '.eslintrc.js' './src/**/*'",
+    "test": "NODE_OPTIONS=--experimental-vm-modules dotenv -e .env -- jest --config ./jest.json --runInBand --detectOpenHandles",
+    "lint": "eslint -c '.eslintrc.cjs' './src/**/*'",
     "check:all": "yarn lint && yarn build && yarn test"
   },
   "husky": {
@@ -21,35 +26,34 @@
     }
   },
   "peerDependencies": {
-    "@adminjs/design-system": "^3.0.4",
-    "adminjs": "^6.4.1"
+    "adminjs": "^7.0.0"
   },
   "devDependencies": {
-    "@adminjs/design-system": "^3.0.4",
-    "@commitlint/cli": "^8.3.5",
-    "@commitlint/config-conventional": "^8.3.4",
-    "@semantic-release/git": "^9.0.0",
-    "@types/jest": "^26.0.14",
-    "@types/lodash": "^4.14.186",
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
-    "adminjs": "^6.4.1",
-    "eslint": "^8.11.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.29.4",
+    "@commitlint/cli": "^17.4.4",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@semantic-release/git": "^10.0.1",
+    "@types/jest": "^29.5.0",
+    "@types/lodash": "^4.14.191",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "adminjs": "^7.0.0",
+    "dotenv-cli": "^7.1.0",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
     "husky": "^4.3.0",
-    "jest": "^26.5.3",
-    "prettier": "^2.0.5",
-    "rimraf": "^3.0.2",
-    "semantic-release": "^17.0.7",
-    "semantic-release-slack-bot": "^1.6.2",
-    "ts-jest": "^26.4.1",
+    "jest": "^29.5.0",
+    "prettier": "^2.8.6",
+    "rimraf": "^4.4.0",
+    "semantic-release": "^20.1.3",
+    "semantic-release-slack-bot": "^4.0.0",
+    "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.5"
   },
   "dependencies": {
-    "lodash": "^4.17.20"
+    "lodash": "^4.17.21"
   }
 }
diff --git a/src/components/RecordDifference.tsx b/src/components/RecordDifference.tsx
@@ -1,15 +1,15 @@
-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 styled from 'styled-components';
+import { BasePropertyProps, flat } from 'adminjs';
+import React, { FC } from 'react';
+import { styled } from 'styled-components';
 
 const Cell = styled(TableCell)`
   width: 100%;
@@ -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/RecordLink.tsx b/src/components/RecordLink.tsx
@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
-import { BasePropertyProps, ViewHelpers } from 'adminjs';
 import { FormGroup, Link } from '@adminjs/design-system';
+import { BasePropertyProps, ViewHelpers } from 'adminjs';
+import React, { FC } from 'react';
 
-import { getLogPropertyName } from '../utils/get-log-property-name';
+import { getLogPropertyName } from '../utils/get-log-property-name.js';
 
 const viewHelpers = new ViewHelpers();
 const RecordLink: FC<BasePropertyProps> = ({ record, property }) => {

diff --git a/src/components/bundle.ts b/src/components/bundle.ts
diff --git a/src/index.ts b/src/index.ts
@@ -4,12 +4,11 @@
  * @section modules
  */
 
-import loggerFeature from './logger.feature';
+import loggerFeature from './logger.feature.js';
 
-export { createLoggerResource } from './logger.resource';
-export { withLogger } from './utils/with-logger';
-export { bundleComponents } from './components/bundle';
-export * from './types';
-export * from './constants';
+export * from './constants.js';
+export { createLoggerResource } from './logger.resource.js';
+export * from './types.js';
+export { withLogger } from './utils/with-logger.js';
 
 export default loggerFeature;
diff --git a/src/log.action.ts b/src/log.action.ts
@@ -9,11 +9,11 @@ import {
   flat,
 } from 'adminjs';
 
-import { ADMINJS_LOGGER_DEFAULT_RESOURCE_ID } from './constants';
-import { MISSING_USER_ID_ERROR } from './errors';
-import { CreateLogActionParams, LoggerFeatureOptions } from './types';
-import { difference } from './utils/difference';
-import { getLogPropertyName } from './utils/get-log-property-name';
+import { ADMINJS_LOGGER_DEFAULT_RESOURCE_ID } from './constants.js';
+import { MISSING_USER_ID_ERROR } from './errors.js';
+import { CreateLogActionParams, LoggerActionOptions } from './types.js';
+import { difference } from './utils/difference.js';
+import { getLogPropertyName } from './utils/get-log-property-name.js';
 
 export const rememberInitialRecord: Before = async (
   request: ActionRequest,
@@ -145,7 +145,7 @@ const createPersistLogAction =
   (
     request: ActionRequest,
     context: ActionContext,
-    options: LoggerFeatureOptions
+    options: LoggerActionOptions
   ) =>
   async ({ recordId, record, initialRecord }: CreatePersistLogParams) => {
     const { currentAdmin, _admin, action } = context;
@@ -176,10 +176,10 @@ const createPersistLogAction =
         record ?? (await ModifiedResource.findOne(String(recordId))) ?? null;
 
       const newParamsToCompare = ['delete', 'bulkDelete'].includes(action.name)
-        ? {}
-        : flat.flatten<object, object>(
+        ? ({} as Record<string, any>)
+        : (flat.flatten(
             JSON.parse(JSON.stringify(modifiedRecord?.params ?? {}))
-          );
+          ) as Record<string, any>);
       const logParams = {
         [getLogPropertyName('recordTitle', propertiesMapping)]: getRecordTitle(
           modifiedRecord,
@@ -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.feature.ts b/src/logger.feature.ts
@@ -1,7 +1,7 @@
 import { buildFeature, FeatureType } from 'adminjs';
 
-import { createLogAction, rememberInitialRecord } from './log.action';
-import { LoggerFeatureOptions } from './types';
+import { createLogAction, rememberInitialRecord } from './log.action.js';
+import { LoggerFeatureOptions } from './types.js';
 
 const loggerFeature = (options: LoggerFeatureOptions): FeatureType => {
   return buildFeature({

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';
-import { getLogPropertyName } from './utils/get-log-property-name';
-import { LoggerFeatureOptions } from './types';
-import { ADMINJS_LOGGER_DEFAULT_RESOURCE_ID } from './constants';
-
-const { RECORD_DIFFERENCE, RECORD_LINK } = bundleComponents();
+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';
 
 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,14 @@
+import path from 'path';
+import * as url from 'url';
+
+import type { ComponentLoader } from 'adminjs';
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+export const bundleComponent = (
+  loader: ComponentLoader,
+  componentName: string
+) => {
+  const componentPath = path.join(__dirname, `../components/${componentName}`);
+  return loader.add(componentName, componentPath);
+};
diff --git a/src/utils/difference.ts b/src/utils/difference.ts
@@ -1,4 +1,5 @@
-import { isEqual, transform } from 'lodash';
+import isEqual from 'lodash/isEqual.js';
+import transform from 'lodash/transform.js';
 
 export const difference = (
   object: Record<string, string>,