refactor: use pack-up for bundling

Author: boazpoolman

.gitignore

@@ -9,3 +9,8 @@ files
 .DS_Store
 npm-debug.log
 .idea
+
+# Production build
+build
+dist
+bundle

admin/src/index.js

@@ -49,21 +49,21 @@ export default {
   bootstrap(app) {},
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
-      locales.map(async (locale) => {
-        try {
-          // eslint-disable-next-line import/no-dynamic-require, global-require
-          const data = require(`./translations/${locale}.json`);
-          return {
-            data: prefixPluginTranslations(data, pluginId),
-            locale,
-          };
-        } catch {
-          return {
-            data: {},
-            locale,
-          };
-        }
-      }),
+      locales.map((locale) => {
+        return import(`./translations/${locale}.json`)
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
     );
 
     return Promise.resolve(importedTrads);

bin/config-sync

@@ -2,4 +2,4 @@
 
 'use strict';
 
-require('../server/cli');
+require('../dist/cli');

package.json

@@ -13,9 +13,25 @@
   "bin": {
     "config-sync": "./bin/config-sync"
   },
+  "exports": {
+    "./strapi-admin": {
+      "source": "./admin/src/index.js",
+      "import": "./dist/admin/index.mjs",
+      "require": "./dist/admin/index.js",
+      "default": "./dist/admin/index.js"
+    },
+    "./strapi-server": {
+      "source": "./server/index.js",
+      "import": "./dist/server/index.mjs",
+      "require": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "develop": "nodemon -e js,jsx --ignore playground --exec \"yalc publish && yalc push\"",
-    "build": "yalc push --publish",
+    "develop": "strapi-plugin watch:link",
+    "watch": "pack-up watch",
+    "build": "pack-up build && yalc push --publish",
     "eslint": "eslint --max-warnings=0 './**/*.{js,jsx}'",
     "eslint:fix": "eslint --fix './**/*.{js,jsx}'",
     "test:unit": "jest --verbose",
@@ -52,18 +68,20 @@
     }
   ],
   "files": [
-    "admin",
-    "server",
-    "bin",
-    "strapi-admin.js",
-    "strapi-server.js"
+    "dist",
+    "bin"
   ],
   "peerDependencies": {
-    "@strapi/strapi": "^5.0.0"
+    "@strapi/strapi": "^5.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^5.2.0",
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "@strapi/design-system": "2.0.0-rc.11",
     "@strapi/icons": "2.0.0-rc.11",
+    "@strapi/sdk-plugin": "^5.2.7",
     "@strapi/strapi": "5.0.4",
     "@strapi/utils": "5.0.4",
     "babel-eslint": "9.0.0",

packup.config.ts

@@ -0,0 +1,27 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from '@strapi/pack-up';
+
+export default defineConfig({
+  bundles: [
+    {
+      source: './admin/src/index.js',
+      import: './dist/admin/index.mjs',
+      require: './dist/admin/index.js',
+      runtime: 'web',
+    },
+    {
+      source: './server/index.js',
+      import: './dist/server/index.mjs',
+      require: './dist/server/index.js',
+      runtime: 'node',
+    },
+    {
+      source: './server/cli.js',
+      import: './dist/cli/index.mjs',
+      require: './dist/cli/index.js',
+      runtime: 'node',
+    },
+  ],
+  dist: './dist',
+  exports: {},
+});

server/bootstrap.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const fs = require('fs');
+import fs from 'fs';
 
-const ConfigType = require('./config/type');
-const defaultTypes = require('./config/types');
-const { logMessage } = require('./utils');
+import ConfigType from './config/type';
+import defaultTypes from './config/types';
+import { logMessage } from './utils';
 
 /**
  * An asynchronous bootstrap function that runs before
@@ -16,7 +16,7 @@ const { logMessage } = require('./utils');
  * See more details here: https://strapi.io/documentation/v3.x/concepts/configurations.html#bootstrap
  */
 
-module.exports = async () => {
+export default async () => {
   // Register config types.
   const registerTypes = () => {
     const types = {};

server/cli.js

@@ -1,16 +1,16 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
-const { Command } = require('commander');
-const Table = require('cli-table');
-const chalk = require('chalk');
-const inquirer = require('inquirer');
-const { isEmpty } = require('lodash');
-const { createStrapi, compileStrapi } = require('@strapi/strapi');
-const gitDiff = require('git-diff');
-
-const warnings = require('./warnings');
-const packageJSON = require('../package.json');
+import fs from 'fs';
+import { Command } from 'commander';
+import Table from 'cli-table';
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import { isEmpty } from 'lodash';
+import { createStrapi, compileStrapi } from '@strapi/strapi';
+import gitDiff from 'git-diff';
+
+import warnings from './warnings';
+import packageJSON from '../package.json';
 
 const program = new Command();
 

server/config.js

@@ -1,6 +1,6 @@
 'use strict';
 
-module.exports = {
+export default {
   default: {
     syncDir: "config/sync/",
     minify: false,

server/config/type.js

@@ -1,7 +1,7 @@
-const { isEmpty } = require('lodash');
-const { logMessage, sanitizeConfig, dynamicSort, noLimit, getCombinedUid, getCombinedUidWhereFilter, getUidParamsFromName } = require('../utils');
-const { difference, same } = require('../utils/getArrayDiff');
-const queryFallBack = require('../utils/queryFallBack');
+import { isEmpty } from 'lodash';
+import { logMessage, sanitizeConfig, dynamicSort, noLimit, getCombinedUid, getCombinedUidWhereFilter, getUidParamsFromName } from '../utils';
+import { difference, same } from '../utils/getArrayDiff';
+import queryFallBack from '../utils/queryFallBack';
 
 const ConfigType = class ConfigType {
   constructor({ queryString, configName, uid, jsonFields, relations, components }) {
@@ -270,4 +270,4 @@ const ConfigType = class ConfigType {
   }
 };
 
-module.exports = ConfigType;
+export default ConfigType;

server/config/types.js

@@ -49,4 +49,4 @@ const types = (strapi) => {
   return typesArray;
 };
 
-module.exports = types;
+export default types;