refactor: use pack-up for bundling

.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) => {
+      locales.map((locale) => {
-        try {
+        return import(`./translations/${locale}.json`)
-          // eslint-disable-next-line import/no-dynamic-require, global-require
+          .then(({ default: data }) => {
-          const data = require(`./translations/${locale}.json`);
+            return {
-          return {
+              data: prefixPluginTranslations(data, pluginId),
-            data: prefixPluginTranslations(data, pluginId),
+              locale,
-            locale,
+            };
-          };
+          })
-        } catch {
+          .catch(() => {
-          return {
+            return {
-            data: {},
+              data: {},
-            locale,
+              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\"",
+    "develop": "strapi-plugin watch:link",
-    "build": "yalc push --publish",
+    "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",
+    "dist",
-    "server",
+    "bin"
-    "bin",
-    "strapi-admin.js",
-    "strapi-server.js"
   ],
   "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');
+import ConfigType from './config/type';
-const defaultTypes = require('./config/types');
+import defaultTypes from './config/types';
-const { logMessage } = require('./utils');
+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');
+import fs from 'fs';
-const { Command } = require('commander');
+import { Command } from 'commander';
-const Table = require('cli-table');
+import Table from 'cli-table';
-const chalk = require('chalk');
+import chalk from 'chalk';
-const inquirer = require('inquirer');
+import inquirer from 'inquirer';
-const { isEmpty } = require('lodash');
+import { isEmpty } from 'lodash';
-const { createStrapi, compileStrapi } = require('@strapi/strapi');
+import { createStrapi, compileStrapi } from '@strapi/strapi';
-const gitDiff = require('git-diff');
+import gitDiff from 'git-diff';
 
-const warnings = require('./warnings');
+import warnings from './warnings';
-const packageJSON = require('../package.json');
+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');
+import { isEmpty } from 'lodash';
-const { logMessage, sanitizeConfig, dynamicSort, noLimit, getCombinedUid, getCombinedUidWhereFilter, getUidParamsFromName } = require('../utils');
+import { logMessage, sanitizeConfig, dynamicSort, noLimit, getCombinedUid, getCombinedUidWhereFilter, getUidParamsFromName } from '../utils';
-const { difference, same } = require('../utils/getArrayDiff');
+import { difference, same } from '../utils/getArrayDiff';
-const queryFallBack = require('../utils/queryFallBack');
+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;

server/controllers/config.js

@@ -1,13 +1,13 @@
 'use strict';
 
-const fs = require('fs');
+import fs from 'fs';
-const { isEmpty } = require('lodash');
+import { isEmpty } from 'lodash';
 
 /**
  * Main controllers for config import/export.
  */
 
-module.exports = {
+export default {
   /**
    * Export all config, from db to filesystem.
    *

server/controllers/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const config = require('./config');
+import config from './config';
 
-module.exports = {
+export default {
   config: config,
 };

server/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+import register from './register';
+import bootstrap from './bootstrap';
+import services from './services';
+import routes from './routes';
+import config from './config';
+import controllers from './controllers';
+
+export default {
+  register,
+  bootstrap,
+  routes,
+  config,
+  controllers,
+  services,
+};

server/register.js

@@ -1,6 +1,6 @@
 'use strict';
 
-module.exports = async ({ strapi }) => {
+export default async ({ strapi }) => {
   // Instantiate the pluginTypes array.
   if (!strapi.plugin('config-sync').pluginTypes) {
     strapi.plugin('config-sync').pluginTypes = [];

server/routes/admin.js

@@ -1,6 +1,6 @@
 'use strict';
 
-module.exports = {
+export default {
   type: 'admin',
   routes: [
     {

server/routes/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const adminRoutes = require('./admin');
+import adminRoutes from './admin';
 
-module.exports = {
+export default {
   admin: adminRoutes,
 };

server/services/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const main = require('./main');
+import main from './main';
 
-module.exports = {
+export default {
   main,
 };

server/services/main.js

@@ -1,17 +1,17 @@
 'use strict';
 
-const { isEmpty } = require('lodash');
+import { isEmpty } from 'lodash';
-const fs = require('fs');
+import fs from 'fs';
-const util = require('util');
+import util from 'util';
-const childProcess = require("child_process");
+import childProcess from "child_process";
-const difference = require('../utils/getObjectDiff');
+import difference from '../utils/getObjectDiff';
-const { logMessage } = require('../utils');
+import { logMessage } from '../utils';
 
 /**
  * Main services for config import/export.
  */
 
-module.exports = () => ({
+export default () => ({
   /**
    * Write a single config file.
    *

server/utils/getArrayDiff.js

@@ -1,4 +1,4 @@
-const difference = (arrayOne, arrayTwo, compareKeys) => {
+export const difference = (arrayOne, arrayTwo, compareKeys) => {
   return arrayOne.filter(({
     [compareKeys[0]]: id1,
     [compareKeys[1]]: id2,
@@ -10,7 +10,7 @@ const difference = (arrayOne, arrayTwo, compareKeys) => {
   });
 };
 
-const same = (arrayOne, arrayTwo, compareKeys) => {
+export const same = (arrayOne, arrayTwo, compareKeys) => {
   return arrayOne.filter(({
     [compareKeys[0]]: id1,
     [compareKeys[1]]: id2,
@@ -25,8 +25,3 @@ const same = (arrayOne, arrayTwo, compareKeys) => {
       && JSON.stringify(restOne) === JSON.stringify(restTwo));
   });
 };
-
-module.exports = {
-  difference,
-  same,
-};

server/utils/getObjectDiff.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { transform, isEqual, isArray, isObject } = require('lodash');
+import { transform, isEqual, isArray, isObject } from 'lodash';
 
 /**
  * Find difference between two objects
@@ -27,4 +27,4 @@ const difference = (origObj, newObj) => {
   return Object.assign(newObjChange, origObjChange);
 };
 
-module.exports = difference;
+export default difference;

server/utils/index.js

@@ -4,19 +4,19 @@ const COMBINED_UID_JOINSTR = '.combine-uid.';
 
 const escapeUid = (uid) => typeof uid === "string" ? uid.replace(/\.combine-uid\./g, '.combine-uid-escape.') : uid;
 const unEscapeUid = (uid) => typeof uid === "string" ? uid.replace(/\.combine-uid-escape\./g, '.combine-uid.') : uid;
-const getCombinedUid = (uidKeys, params) => uidKeys.map((uidKey) => escapeUid(params[uidKey])).join(COMBINED_UID_JOINSTR);
+export const getCombinedUid = (uidKeys, params) => uidKeys.map((uidKey) => escapeUid(params[uidKey])).join(COMBINED_UID_JOINSTR);
-const getCombinedUidWhereFilter = (uidKeys, params) => uidKeys.reduce(((akku, uidKey) => ({ ...akku, [uidKey]: params[uidKey] })), {});
+export const getCombinedUidWhereFilter = (uidKeys, params) => uidKeys.reduce(((akku, uidKey) => ({ ...akku, [uidKey]: params[uidKey] })), {});
-const getUidParamsFromName = (uidKeys, configName) => configName.split(COMBINED_UID_JOINSTR).map(unEscapeUid).reduce((akku, param, i) => ({ ...akku, [uidKeys[i]]: param }), {});
+export const getUidParamsFromName = (uidKeys, configName) => configName.split(COMBINED_UID_JOINSTR).map(unEscapeUid).reduce((akku, param, i) => ({ ...akku, [uidKeys[i]]: param }), {});
 
-const getCoreStore = () => {
+export const getCoreStore = () => {
   return strapi.store({ type: 'plugin', name: 'config-sync' });
 };
 
-const getService = (name) => {
+export const getService = (name) => {
   return strapi.plugin('config-sync').service(name);
 };
 
-const logMessage = (msg = '') => `[strapi-plugin-config-sync]: ${msg}`;
+export const logMessage = (msg = '') => `[strapi-plugin-config-sync]: ${msg}`;
 
 const sortByKeys = (unordered) => {
   return Object.keys(unordered).sort().reduce((obj, key) => {
@@ -27,7 +27,7 @@ const sortByKeys = (unordered) => {
   );
 };
 
-const dynamicSort = (property) => {
+export const dynamicSort = (property) => {
   let sortOrder = 1;
 
   if (property[0] === "-") {
@@ -46,7 +46,7 @@ const dynamicSort = (property) => {
   };
 };
 
-const sanitizeConfig = ({
+export const sanitizeConfig = ({
   config,
   relation,
   relationSortFields,
@@ -104,7 +104,7 @@ const sanitizeConfig = ({
   return config;
 };
 
-const noLimit = async (query, parameters, limit = 100) => {
+export const noLimit = async (query, parameters, limit = 100) => {
   let entries = [];
   const amountOfEntries = await query.count(parameters);
 
@@ -121,16 +121,3 @@ const noLimit = async (query, parameters, limit = 100) => {
 
   return entries;
 };
-
-module.exports = {
-  getCombinedUid,
-  getCombinedUidWhereFilter,
-  getUidParamsFromName,
-  getService,
-  getCoreStore,
-  logMessage,
-  sanitizeConfig,
-  sortByKeys,
-  dynamicSort,
-  noLimit,
-};

server/utils/queryFallBack.js

@@ -33,4 +33,4 @@ const queryFallBack = {
   },
 };
 
-module.exports = queryFallBack;
+export default queryFallBack;

server/warnings.js

@@ -1,6 +1,6 @@
 'use strict';
 
-module.exports = {
+export default {
   delete: {
     'user-role.public': "You've just deleted a default role from the users-permissions plugin.",
     'user-role.authenticated': "You've just deleted a default role from the users-permissions plugin.",

strapi-admin.js

@@ -1,3 +0,0 @@
-import admin from './admin/src';
-
-export default admin;

strapi-server.js

@@ -1,19 +0,0 @@
-'use strict';
-
-const register = require('./server/register');
-const bootstrap = require('./server/bootstrap');
-const services = require('./server/services');
-const routes = require('./server/routes');
-const config = require('./server/config');
-const controllers = require('./server/controllers');
-
-module.exports = () => {
-  return {
-    register,
-    bootstrap,
-    routes,
-    config,
-    controllers,
-    services,
-  };
-};