Add support for module

package.json

@@ -7,6 +7,18 @@
   "homepage": "http://grapesjs.com",
   "main": "dist/grapes.min.js",
   "types": "dist/index.d.ts",
+  "module": "dist/grapes.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/grapes.mjs",
+      "require": "./dist/grapes.min.js"
+    },
+    "./*": "./*"
+  },
+  "files": [
+    "dist",
+    "locale"
+  ],
   "sideEffects": [
     "*.vue",
     "*.css",
@@ -107,8 +119,10 @@
     "lint": "eslint . --ext .ts,.js && npm run lint:ts",
     "check": "npm run lint && npm run test",
     "lint:ts": "tsc --noEmit",
-    "build": "npm run check && run-s build:* && npm run ts:check",
+    "build": "npm run check && npm run build-all && npm run ts:check",
+    "build-all": "run-s build:*",
     "build:js": "grapesjs-cli build --targets=\"> 1%, ie 11, safari 8, not dead\" --statsOutput=\"stats.json\" --localePath=\"src/i18n/locale\"",
+    "build:mjs": "BUILD_MODULE=true grapesjs-cli build --dts='skip' --patch=0 --targets=\"> 1%, ie 11, safari 8, not dead\"",
     "build:css": "sass src/styles/scss/main.scss dist/css/grapes.min.css --no-source-map --style=compressed --load-path=node_modules",
     "ts:build": "grapesjs-cli build --dts='only' --patch=0",
     "ts:check": "tsc --noEmit --esModuleInterop dist/index.d.ts",

src/plugin_manager/index.ts

@@ -19,7 +19,9 @@ const getPluginById = (pluginId: string, plugins: PluginManager) => {
 };
 
 export const getPlugin = (plugin: string | Plugin<any>, plugins: PluginManager) => {
-  return isString(plugin) ? getPluginById(plugin, plugins) : plugin;
+  return isString(plugin)
+    ? getPluginById(plugin, plugins)
+    : (plugin as unknown as { default: Plugin<any> })?.default || plugin;
 };
 
 export const logPluginWarn = (editor: Editor, plugin: string) => {

webpack.config.js

@@ -1,35 +1,50 @@
 const path = require('path');
 const rootDir = path.resolve(__dirname);
 
-module.exports = ({ config, pkg, webpack }) => ({
-  ...config,
-  output: {
-    ...config.output,
-    filename: 'grapes.min.js',
-    // This will assign all exports to the global object
-    library: undefined,
-  },
-  devServer: {
-    ...config.devServer,
-    static: [rootDir],
-    headers: { 'Access-Control-Allow-Origin': '*' },
-    allowedHosts: 'all',
-  },
-  resolve: {
-    ...config.resolve,
-    modules: [
-      ...(config.resolve && config.resolve.modules),
-      'src'
-    ],
-    alias: {
-      ...(config.resolve && config.resolve.alias),
-      jquery: 'utils/cash-dom',
-      backbone: `${rootDir}/node_modules/backbone`,
-      underscore: `${rootDir}/node_modules/underscore`,
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({ __GJS_VERSION__: `'${pkg.version}'` }),
-    ...config.plugins,
-  ]
-});
+module.exports = ({ config, pkg, webpack }) => {
+  const { BUILD_MODULE } = process.env;
+
+  return {
+    ...config,
+    output: {
+      ...config.output,
+      filename: BUILD_MODULE ? 'grapes.mjs' : 'grapes.min.js',
+      ...(BUILD_MODULE ? {
+        libraryTarget: 'module',
+        library: { type: 'module' },
+      } : {
+        libraryExport: 'default'
+      })
+    },
+    optimization: {
+      ...config.optimization,
+      minimize: !BUILD_MODULE,
+    },
+    devServer: {
+      ...config.devServer,
+      static: [rootDir],
+      headers: { 'Access-Control-Allow-Origin': '*' },
+      allowedHosts: 'all',
+    },
+    experiments: {
+      outputModule: !!BUILD_MODULE,
+    },
+    resolve: {
+      ...config.resolve,
+      modules: [
+        ...(config.resolve && config.resolve.modules),
+        'src'
+      ],
+      alias: {
+        ...(config.resolve && config.resolve.alias),
+        jquery: 'utils/cash-dom',
+        backbone: `${rootDir}/node_modules/backbone`,
+        underscore: `${rootDir}/node_modules/underscore`,
+      }
+    },
+    plugins: [
+      new webpack.DefinePlugin({ __GJS_VERSION__: `'${pkg.version}'` }),
+      ...config.plugins,
+    ]
+  }
+};