Merge pull request #1 from SoftwareBrothers/feat/adminjs-bundler

feat: create AdminJS utility tool

.eslintrc.js

@@ -3,7 +3,6 @@ module.exports = {
   plugins: ['@typescript-eslint/eslint-plugin'],
   extends: [
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
     'plugin:react/recommended',
   ],
   parserOptions: {
@@ -14,8 +13,8 @@ module.exports = {
     },
   },
   rules: {
-    'prettier/prettier': 'error',
     'react/prop-types': 'off',
+    semi: 'error',
   },
   ignorePatterns: ['node_modules', 'lib'],
   settings: {

.github/workflows/push.yml

@@ -31,8 +31,6 @@ jobs:
         run: yarn lint
       - name: Build
         run: yarn build
-      - name: Test
-        run: yarn test
   publish:
     name: Publish
     needs: test
@@ -43,7 +41,7 @@ jobs:
       - name: Setup
         uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '14.x'
       - uses: actions/cache@v1
         id: yarn-cache
         with:
@@ -56,9 +54,9 @@ jobs:
         run: yarn install
       - name: Build
         run: yarn build
-      # - name: Release
-      #   env:
-      #     NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      #     SLACK_WEBHOOK: ${{ secrets.ADMIN_SLACK_WEBHOOK }}
-      #   run: yarn release
+      - name: Release
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SLACK_WEBHOOK: ${{ secrets.ADMIN_SLACK_WEBHOOK }}
+        run: yarn release

.npmignore

@@ -2,4 +2,6 @@ node_modules
 .github
 commitlint.config.js
 .idea
-test
+test
+example
+.adminjs

.releaserc

@@ -1,13 +1,6 @@
 {
   "branches": [
-    "+([0-9])?(.{+([0-9]),x}).x",
-    "master",
-    "next",
-    "next-major",
-    {
-      "name": "beta",
-      "prerelease": true
-    }
+    "main"
   ],
   "plugins": [
     "@semantic-release/commit-analyzer",

README.md

@@ -1,6 +1,11 @@
-# Feature for AdminJS
+# Bundler for AdminJS
 
-This is a feature template.
+This is a bundler utility tool for AdminJS.
+Normally, AdminJS builts custom components on server's startup which can slow it down or cause high memory usage.
+
+This tool allows you to pre-bundle AdminJS browser files before deploying or during your CI/CD process.
+
+**IMPORTANT:** To prevent AdminJS from attempting to generate a new bundle on server startup, you must set `ADMIN_JS_SKIP_BUNDLE="true"` environment variable! `"true"` needs to be a `string`, it cannot be a `boolean`.
 
 ## AdminJS
 
@@ -12,6 +17,7 @@ Or visit [AdminJS](https://github.com/SoftwareBrothers/adminjs) github page.
 
 ## Usage
 
+Please see "example" directory in this package's repository.
 
 ## License
 

example/.gitignore

@@ -153,3 +153,4 @@ temp/
 # Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
 
 .adminjs
+src/public

example/bin/bundle-admin.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { bundle } from '../../src';
+import { uploadFile } from './deploy-s3';
+
+(async () => {
+  const files = await bundle({
+    customComponentsInitializationFilePath: 'src/components/index.ts',
+    destinationDir: 'src/public',
+  });
+
+  console.log(files);
+  // do something with built files here
+  // example - upload to S3:
+  // await Promise.all(files.map(uploadFile));
+})();

example/bin/deploy-s3.ts

@@ -0,0 +1,42 @@
+import { promises as fs } from 'fs';
+import { join } from 'path';
+import AWS from 'aws-sdk';
+import { BundleFile } from "../../src";
+
+type UploadOptions = {
+  keyPrefix: string;
+  bucket: string;
+};
+
+const aws = new AWS.S3({
+  region: process.env.AWS_DEFAULT_REGION,
+  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+  signatureVersion: 'v4',
+});
+
+export const uploadFile = async (
+  { destinationPath: filePath, name }: BundleFile,
+  { keyPrefix, bucket }: UploadOptions,
+): Promise<void> => {
+  const file = await fs.readFile(filePath);
+  const s3Path = join(keyPrefix, name);
+
+  console.log(`Uploading ${filePath} to ${s3Path}`);
+
+  return new Promise((resolve, reject) => {
+    aws.upload(
+      {
+        Bucket: bucket,
+        Key: s3Path,
+        Body: file,
+        ACL: 'public-read',
+      },
+      (err, data) => {
+        if (err) reject(err);
+        console.log(`Succesfully uploaded ${name} to ${data.Location}`);
+        resolve();
+      },
+    );
+  });
+};

example/package.json

@@ -1,22 +1,15 @@
 {
-  "name": "adminjs-example",
+  "name": "@adminjs/bundler-example",
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "dev": "nodemon",
-    "lint": "eslint src --ext ts"
+    "bundle": "ts-node bin/bundle-admin.ts"
   },
   "dependencies": {
-    "@adminjs/design-system": "^2.1.0",
-    "@adminjs/express": "^4.0.1",
     "adminjs": "^5.6.0",
-    "express": "^4.17.1",
-    "express-formidable": "^1.2.0",
-    "nodemon": "^2.0.6",
+    "aws-sdk": "^2.1073.0",
     "ts-node": "^9.0.0"
   },
-  "devDependencies": {
-    "@types/express": "^4.17.8"
-  }
+  "devDependencies": {}
 }

example/src/components/index.ts

@@ -0,0 +1,6 @@
+import AdminJS from 'adminjs';
+
+const BASE = './';
+const bundle = (path, componentName) => AdminJS.bundle(`${BASE}/${path}`, componentName);
+
+export const SOME_CUSTOM_COMPONENT = bundle('some-custom-component', 'SomeCustomComponent');

example/src/components/some-custom-component.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+
+const SomeCustomComponent: React.FC<any> = (_props: any) => {
+  return <p>An example component</p>;
+};
+
+export default SomeCustomComponent;

example/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "outDir": "./built",
-    "target": "ES2016",
+    "outDir": "./dist",
+    "target": "ES2018",
     "module": "CommonJS",
     "esModuleInterop": true,
     "strictNullChecks": true,
@@ -12,7 +12,8 @@
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "jsx": "react"
   },
   "include": ["./src/**/*", "./spec/**/*"]
 }