Move css import to admin and build ctm

2025-11-01 18:33:55 +00:00 · 2019-04-18 19:54:21 +02:00 · 2019-04-18 19:54:21 +02:00 · 5dd8106aa0
commit 5dd8106aa0
parent 8fb7608226
21 changed files with 309 additions and 169 deletions
--- a/packages/strapi-admin/admin/src/app.js
+++ b/packages/strapi-admin/admin/src/app.js
@ -7,6 +7,21 @@

 import '@babel/polyfill';
 import 'sanitize.css/sanitize.css';
+
+// Third party css library needed
+// Currently unable to bundle them.
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/liquibyte.css';
+import 'codemirror/theme/xq-dark.css';
+import 'codemirror/theme/3024-day.css';
+import 'codemirror/theme/3024-night.css';
+import 'codemirror/theme/blackboard.css';
+import 'codemirror/theme/monokai.css';
+import 'codemirror/theme/cobalt.css';
+
+import 'react-select/dist/react-select.css';
+import 'react-datetime/css/react-datetime.css';
+
 import './styles/main.scss';

 import React from 'react';
--- a/packages/strapi-admin/admin/src/plugins.js
+++ b/packages/strapi-admin/admin/src/plugins.js
@ -17,26 +17,28 @@ window.strapi = Object.assign(window.strapi || {}, {
 });

 module.exports = {
+  'content-manager': require('../../../strapi-plugin-content-manager/admin/dist/strapi-plugin-content-manager.esm.js')
+    .default,
  // 'content-manager': require('../../../strapi-plugin-content-manager/admin/src')
  //   .default,
  'content-type-builder': require('../../../strapi-plugin-content-type-builder/admin/dist/strapi-plugin-content-type-builder.esm.js')
    .default,
-  // 'content-type-builder': require('../../../strapi-plugin-content-type-builder/admin/src')
-  //   .default,
-  // require('../../../strapi-plugin')
-  // .default,
-  email: require('../../../strapi-plugin-email/admin/dist/strapi-plugin-email.esm.js')
-    .default,
-  'users-permissions': require('../../../strapi-plugin-users-permissions/admin/dist/strapi-users-permissions.esm.js')
-    .default,
-  // // 'settings-manager':
-  // //   // 'settings-manager': require('../../../strapi-plugin-settings-manager/admin/src')
-  // //   //   .default,
-  // // require('../../../strapi-plugin-settings-manager/admin/dist/strapi-plugin-settings-manager.esm')
+  // // 'content-type-builder': require('../../../strapi-plugin-content-type-builder/admin/src')
  // //   .default,
-  // // upload: require('../../../strapi-plugin-upload/admin/src').default,
+  // // require('../../../strapi-plugin')
+  // // .default,
+  // email: require('../../../strapi-plugin-email/admin/dist/strapi-plugin-email.esm.js')
+  //   .default,
+  // 'users-permissions': require('../../../strapi-plugin-users-permissions/admin/dist/strapi-users-permissions.esm.js')
+  //   .default,
+  // // // 'settings-manager':
+  // // //   // 'settings-manager': require('../../../strapi-plugin-settings-manager/admin/src')
+  // // //   //   .default,
+  // // // require('../../../strapi-plugin-settings-manager/admin/dist/strapi-plugin-settings-manager.esm')
+  // // //   .default,
+  // // // upload: require('../../../strapi-plugin-upload/admin/src').default,
  upload: require('../../../strapi-plugin-upload/admin/dist/strapi-plugin-upload.esm.js')
    .default,
-  // 'users-permissions': require('../../../strapi-plugin-users-permissions/admin/src')
-  //   .default,
+  'users-permissions': require('../../../strapi-plugin-users-permissions/admin/src')
+    .default,
 };
--- a/packages/strapi-admin/package.json
+++ b/packages/strapi-admin/package.json
@ -28,6 +28,7 @@
    "@babel/polyfill": "^7.4.3",
    "@babel/runtime": "^7.4.3",
    "classnames": "^2.2.6",
+    "codemirror": "^5.45.0",
    "crypto": "^1.0.1",
    "history": "^4.9.0",
    "hoist-non-react-statics": "^3.3.0",
@ -38,6 +39,7 @@
    "prop-types": "^15.7.2",
    "react": "^16.5.2",
    "react-copy-to-clipboard": "^5.0.1",
+    "react-datetime": "^2.16.3",
    "react-dnd": "^7.4.5",
    "react-dnd-html5-backend": "^7.4.4",
    "react-dom": "^16.5.2",
@ -48,6 +50,7 @@
    "react-redux": "^5.1.1",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
+    "react-select": "^1.3.0",
    "react-transition-group": "^2.9.0",
    "reactstrap": "^5.0.0",
    "redux": "^4.0.1",
--- a/packages/strapi-plugin-content-manager/.babelrc
+++ b/packages/strapi-plugin-content-manager/.babelrc
@ -0,0 +1,19 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "loose": true,
+        "targets": {
+          "browsers": ["since 2017"]
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-dynamic-import"
+  ]
+}
--- a/packages/strapi-plugin-content-manager/admin/src/components/InputJSON/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/InputJSON/index.js
@ -1,26 +1,17 @@
 /**
- * 
+ *
 * InputJSON
- * 
+ *
 */

-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cm from 'codemirror';
-import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/lint/javascript-lint';
 import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/addon/selection/mark-selection';
-import 'codemirror/theme/liquibyte.css';
-import 'codemirror/theme/xq-dark.css';
-import 'codemirror/theme/3024-day.css';
-import 'codemirror/theme/3024-night.css';
-import 'codemirror/theme/blackboard.css';
-import 'codemirror/theme/monokai.css';
-import 'codemirror/theme/cobalt.css';

 import { isEmpty, isObject, trimStart } from 'lodash';
 import jsonlint from './jsonlint';
@ -30,7 +21,15 @@ const WAIT = 600;
 const stringify = JSON.stringify;
 const parse = JSON.parse;
 const DEFAULT_THEME = 'monokai';
-const THEMES = ['blackboard', 'cobalt', 'monokai', '3024-day', '3024-night', 'liquibyte', 'xq-dark'];
+const THEMES = [
+  'blackboard',
+  'cobalt',
+  'monokai',
+  '3024-day',
+  '3024-night',
+  'liquibyte',
+  'xq-dark',
+];

 class InputJSON extends React.Component {
  constructor(props) {
@ -60,7 +59,11 @@ class InputJSON extends React.Component {
  }

  componentDidUpdate(prevProps) {
-    if (isEmpty(prevProps.value) && !isEmpty(this.props.value) && !this.state.hasInitValue) {
+    if (
+      isEmpty(prevProps.value) &&
+      !isEmpty(this.props.value) &&
+      !this.state.hasInitValue
+    ) {
      this.setInitValue();
    }
  }
@ -74,30 +77,24 @@ class InputJSON extends React.Component {
        this.setState({ hasInitValue: true });

        return this.codeMirror.setValue(stringify(value, null, 2));
-      } catch(err) {
-
+      } catch (err) {
        return this.setState({ error: true });
      }
    }
-  }
+  };

  setSize = () => this.codeMirror.setSize('100%', 'auto');

-  setTheme = (theme) => this.codeMirror.setOption('theme', theme);
+  setTheme = theme => this.codeMirror.setOption('theme', theme);

-  getContentAtLine = (line) => this.codeMirror.getLine(line);
+  getContentAtLine = line => this.codeMirror.getLine(line);

-  getEditorOption = (opt) => this.codeMirror.getOption(opt);
+  getEditorOption = opt => this.codeMirror.getOption(opt);

  getValue = () => this.codeMirror.getValue();

  markSelection = ({ message }) => {
-    let line = parseInt(
-      message
-        .split(':')[0]
-        .split('line ')[1],
-      10,
-    ) - 1;
+    let line = parseInt(message.split(':')[0].split('line ')[1], 10) - 1;

    let content = this.getContentAtLine(line);

@ -107,16 +104,21 @@ class InputJSON extends React.Component {
    }
    const chEnd = content.length;
    const chStart = chEnd - trimStart(content, ' ').length;
-    const markedText = this.codeMirror.markText({ line, ch: chStart }, { line, ch: chEnd }, { className: styles.colored });
+    const markedText = this.codeMirror.markText(
+      { line, ch: chStart },
+      { line, ch: chEnd },
+      { className: styles.colored },
+    );
    this.setState({ markedText });
-  }
+  };

  timer = null;

  handleBlur = ({ target }) => {
    const { name, onBlur } = this.props;
-  
-    if (target === undefined) { // codemirror catches multiple events
+
+    if (target === undefined) {
+      // codemirror catches multiple events
      onBlur({
        target: {
          name,
@ -124,9 +126,8 @@ class InputJSON extends React.Component {
          value: this.getValue(),
        },
      });
-
    }
-  }
+  };

  handleChange = () => {
    const { hasInitValue } = this.state;
@ -135,7 +136,7 @@ class InputJSON extends React.Component {

    try {
      value = parse(value);
-    } catch(err) {
+    } catch (err) {
      // Silent
    }

@ -157,18 +158,21 @@ class InputJSON extends React.Component {
      this.state.markedText.clear();
      this.setState({ markedText: null, error: null });
    }
-    
-    clearTimeout(this.timer);
-    this.timer = setTimeout(() => this.testJSON(this.codeMirror.getValue()), WAIT);
-  }

-  testJSON = (value) => {
+    clearTimeout(this.timer);
+    this.timer = setTimeout(
+      () => this.testJSON(this.codeMirror.getValue()),
+      WAIT,
+    );
+  };
+
+  testJSON = value => {
    try {
      jsonlint.parse(value);
-    } catch(err) {
+    } catch (err) {
      this.markSelection(err);
    }
-  }
+  };

  render() {
    if (this.state.error) {
@ -177,9 +181,22 @@ class InputJSON extends React.Component {

    return (
      <div className={styles.jsonWrapper}>
-        <textarea ref={this.editor} autoComplete='off' id={this.props.name} defaultValue="" />
-        <select className={styles.select} onChange={({ target }) => this.setTheme(target.value)} defaultValue={DEFAULT_THEME}>
-          {THEMES.sort().map(theme => <option key={theme} value={theme}>{theme}</option>)}
+        <textarea
+          ref={this.editor}
+          autoComplete="off"
+          id={this.props.name}
+          defaultValue=""
+        />
+        <select
+          className={styles.select}
+          onChange={({ target }) => this.setTheme(target.value)}
+          defaultValue={DEFAULT_THEME}
+        >
+          {THEMES.sort().map(theme => (
+            <option key={theme} value={theme}>
+              {theme}
+            </option>
+          ))}
        </select>
      </div>
    );
@ -201,4 +218,4 @@ InputJSON.propTypes = {
  value: PropTypes.object,
 };

-export default InputJSON;
+export default InputJSON;
--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js
@ -22,8 +22,6 @@ import {
 // Utils.
 import { request, templateObject } from 'strapi-helper-plugin';

-// CSS.
-import 'react-select/dist/react-select.css';
 // Component.
 import SortableList from './SortableList';
 // CSS.
--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectOne/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectOne/index.js
@ -8,7 +8,7 @@ import React from 'react';
 import Select from 'react-select';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import 'react-select/dist/react-select.css';
+
 import {
  cloneDeep,
  map,
--- a/packages/strapi-plugin-content-manager/admin/src/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/index.js
@ -1,42 +1,13 @@
 import React from 'react';
-import { reduce } from 'lodash';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
-
 import App from './containers/App';
+import Initializer from './containers/Initializer';
+import lifecycles from './lifecycles';
+import trads from './translations';

 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;

-const formatMessages = messages =>
-  reduce(
-    messages,
-    (result, value, key) => {
-      result[`${pluginId}.${key}`] = value;
-
-      return result;
-    },
-    {},
-  );
-const requireTranslations = language => {
-  try {
-    return require(`./translations/${language}.json`); // eslint-disable-line global-require
-  } catch (error) {
-    console.error(
-      `Unable to load "${language}" translation for the plugin ${pluginId}. Please make sure "${language}.json" file exists in "pluginPath/admin/src/translations" folder.`,
-    );
-    return;
-  }
-};
-
-const translationMessages = reduce(
-  strapi.languages,
-  (result, language) => {
-    result[language] = formatMessages(requireTranslations(language));
-    return result;
-  },
-  {},
-);
-
 function Comp(props) {
  return <App {...props} />;
 }
@ -47,16 +18,17 @@ const plugin = {
  description: pluginDescription,
  icon: pluginPkg.strapi.icon,
  id: pluginId,
-  initializer: require('./initializer'),
-  injectedComponents: require('./injectedComponents').default,
+  initializer: Initializer,
+  injectedComponents: [],
+  isReady: false,
  layout: null,
-  lifecycles: require('./lifecycles'),
+  lifecycles,
  leftMenuLinks: [],
  leftMenuSections: [],
  mainComponent: Comp,
  name: pluginPkg.strapi.name,
  preventComponentRendering: false,
-  translationMessages,
+  trads,
 };

 export default plugin;
--- a/packages/strapi-plugin-content-manager/admin/src/initializer.js
+++ b/packages/strapi-plugin-content-manager/admin/src/initializer.js
@ -1,17 +0,0 @@
-/**
- *
- * Initializers
- *
- * ------------
- *
- * Execute logic to make your plugin ready to be displayed
- * The app will wait until all the plugins are ready before rendering
- * the admin.
- *
- * These components will be mounted only once when the app is loaded.
- *
- */
-
-const Initializer = require('./containers/Initializer');
-
-module.exports = Initializer.default;
--- a/packages/strapi-plugin-content-manager/admin/src/injectedComponents.js
+++ b/packages/strapi-plugin-content-manager/admin/src/injectedComponents.js
@ -1 +0,0 @@
-export default [];
--- a/packages/strapi-plugin-content-manager/admin/src/lifecycles.js
+++ b/packages/strapi-plugin-content-manager/admin/src/lifecycles.js
@ -8,10 +8,14 @@
 *
 */

-module.exports = function lifecycles() {
+import didGetSecuredData from './lifecycles/didGetSecuredData';
+
+function lifecycles() {
  // Set hooks for the AdminPage container.
  // Note: we don't need to specify the first argument because we already know what "willSecure" refers to.
  this.setHooks({
-    didGetSecuredData: require('./lifecycles/didGetSecuredData.js').default,
+    didGetSecuredData,
  });
-};
+}
+
+export default lifecycles;
--- a/packages/strapi-plugin-content-manager/admin/src/pluginId.js
+++ b/packages/strapi-plugin-content-manager/admin/src/pluginId.js
@ -1,7 +1,5 @@
-const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-);
+import pluginPkg from '../../package.json';

-module.exports = pluginId;
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
+
+export default pluginId;
--- a/packages/strapi-plugin-content-manager/admin/src/translations/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/translations/index.js
@ -0,0 +1,37 @@
+import ar from './ar.json';
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import it from './it.json';
+import ja from './ja.json';
+import ko from './ko.json';
+import nl from './nl.json';
+import pl from './pl.json';
+import ptBR from './pt-BR.json';
+import pt from './pt.json';
+import ru from './ru.json';
+import tr from './tr.json';
+import zhHans from './zh-hans.json';
+import zh from './zh.json';
+
+const trads = {
+  ar,
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pl,
+  'pt-BR': ptBR,
+  pt,
+  ru,
+  tr,
+  'zh-Hans': zhHans,
+  zh,
+};
+
+export default trads;
--- a/packages/strapi-plugin-content-manager/package.json
+++ b/packages/strapi-plugin-content-manager/package.json
@ -12,9 +12,8 @@
    "preanalyze": "npm run analyze:clean",
    "analyze": "node ./node_modules/strapi-helper-plugin/lib/internals/scripts/analyze.js",
    "prebuild": "npm run build:clean",
-    "build:dev": "cross-env NODE_ENV=development ./node_modules/strapi-helper-plugin/node_modules/.bin/webpack --config node_modules/strapi-helper-plugin/lib/internals/webpack/webpack.prod.babel.js --color -p --progress",
-    "build": "cross-env NODE_ENV=production ./node_modules/strapi-helper-plugin/node_modules/.bin/webpack --config node_modules/strapi-helper-plugin/lib/internals/webpack/webpack.prod.babel.js --color -p --progress",
-    "build:clean": "cross-env ./node_modules/strapi-helper-plugin/node_modules/.bin/rimraf admin/build",
+    "build": "rollup -c",
+    "build:clean": "rimraf admin/dist",
    "start": "node ./node_modules/strapi-helper-plugin/node_modules/.bin/cross-env NODE_ENV=development PLUGIN=true node ./node_modules/strapi-helper-plugin/lib/server",
    "generate": "node ./node_modules/strapi-helper-plugin/node_modules/plop --plopfile ./node_modules/strapi-helper-plugin/lib/internals/generators/index.js",
    "prettier": "node ./node_modules/strapi-helper-plugin/node_modules/.bin/prettier --single-quote --trailing-comma es5 --write \"{admin,__{tests,mocks}__}/**/*.js\"",
@ -22,16 +21,59 @@
    "prepublishOnly": "IS_MONOREPO=true npm run build"
  },
  "devDependencies": {
-    "codemirror": "^5.39.0",
-    "draft-js": "^0.10.5",
-    "react-select": "^1.2.1",
-    "showdown": "^1.8.6",
-    "strapi-helper-plugin": "3.0.0-alpha.25.2"
+    "@babel/core": "^7.4.3",
+    "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "autoprefixer": "^9.5.1",
+    "node-sass": "^4.11.0",
+    "postcss-smart-import": "^0.7.6",
+    "precss": "^4.0.0",
+    "rimraf": "^2.6.3",
+    "rollup": "^1.10.0",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-image": "^1.0.2",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^4.2.3",
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-rebase": "^3.1.1",
+    "rollup-plugin-sizes": "^0.5.1",
+    "rollup-plugin-svg": "^1.0.1",
+    "rollup-plugin-terser": "^4.0.4",
+    "rollup-plugin-url": "^2.2.1"
  },
  "dependencies": {
+    "draft-js": "^0.10.5",
    "pluralize": "^7.0.0",
+    "redux-saga": "^0.16.0",
+    "showdown": "^1.9.0",
    "strapi-utils": "3.0.0-alpha.25.2"
  },
+  "peerDependencies": {
+    "classnames": "^2.2.6",
+    "codemirror": "^5.45.0",
+    "immutable": "^3.8.2",
+    "invariant": "^2.2.1",
+    "lodash": "^4.17.11",
+    "react": "^16.0.0",
+    "reactstrap": "^5.0.0",
+    "react-dom": "^16.0.0",
+    "react-intl": "^2.8.0",
+    "react-redux": "^7.0.2",
+    "redux": "^4.0.1",
+    "redux-immutable": "^4.0.0",
+    "redux-saga": "^0.16.0",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0",
+    "react-select": "^1.3.0",
+    "react-transition-group": "^2.5.0",
+    "reselect": "^3.0.1",
+    "strapi-helper-plugin": "^3.0.0-alpha.25.2"
+  },
  "author": {
    "name": "Strapi team",
    "email": "hi@strapi.io",
@ -53,4 +95,4 @@
    "npm": ">= 6.0.0"
  },
  "license": "MIT"
-}
+}
--- a/packages/strapi-plugin-content-manager/rollup.config.js
+++ b/packages/strapi-plugin-content-manager/rollup.config.js
@ -0,0 +1,63 @@
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import svg from 'rollup-plugin-svg';
+import postcss from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+import rebasePlugin from 'rollup-plugin-rebase';
+
+import url from 'rollup-plugin-url';
+import json from 'rollup-plugin-json';
+import pkg from './package.json';
+
+export default {
+  input: './admin/src/index.js',
+  output: [
+    {
+      exports: 'named',
+      file: `admin/dist/${pkg.name}.cjs.js`,
+      format: 'cjs',
+      sourceMap: true,
+      name: pkg.name,
+      compact: true,
+    },
+    {
+      exports: 'named',
+      sourceMap: true,
+      file: `admin/dist/${pkg.name}.esm.js`,
+      format: 'es',
+      name: pkg.name,
+      compact: true,
+    },
+  ],
+
+  plugins: [
+    postcss({
+      modules: true,
+      minimize: true,
+    }),
+    url({
+      limit: 10 * 1024, // inline files < 10k, copy files > 10k
+      emitFiles: true, // defaults to true
+    }),
+    rebasePlugin({}),
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    commonjs(),
+    resolve(),
+    json({
+      exclude: 'node_modules/**',
+      compact: true, // Default: false
+    }),
+
+    svg(),
+    require('rollup-plugin-sizes')(),
+    // terser(),
+  ],
+
+  external: [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
+};
--- a/packages/strapi-plugin-content-type-builder/admin/src/pluginId.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/pluginId.js
@ -1,7 +1,5 @@
-const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-);
+import pluginPkg from '../../package.json';

-module.exports = pluginId;
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
+
+export default pluginId;
--- a/packages/strapi-plugin-documentation/admin/src/pluginId.js
+++ b/packages/strapi-plugin-documentation/admin/src/pluginId.js
@ -1,7 +1,5 @@
-const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-);
+import pluginPkg from '../../package.json';

-module.exports = pluginId;
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
+
+export default pluginId;
--- a/packages/strapi-plugin-email/admin/src/pluginId.js
+++ b/packages/strapi-plugin-email/admin/src/pluginId.js
@ -1,7 +1,5 @@
-const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-);
+import pluginPkg from '../../package.json';

-module.exports = pluginId;
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
+
+export default pluginId;
--- a/packages/strapi-plugin-settings-manager/admin/src/pluginId.js
+++ b/packages/strapi-plugin-settings-manager/admin/src/pluginId.js
@ -1,7 +1,5 @@
-const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-);
+import pluginPkg from '../../package.json';

-module.exports = pluginId;
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
+
+export default pluginId;
--- a/packages/strapi-plugin-upload/admin/src/pluginId.js
+++ b/packages/strapi-plugin-upload/admin/src/pluginId.js
@ -1,7 +1,5 @@
-const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-);
+import pluginPkg from '../../package.json';

-module.exports = pluginId;
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
+
+export default pluginId;
--- a/packages/strapi-plugin-users-permissions/admin/src/pluginId.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/pluginId.js
@ -1,7 +1,5 @@
-const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-);
+import pluginPkg from '../../package.json';

-module.exports = pluginId;
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
+
+export default pluginId;