diff --git a/package.json b/package.json index ed908dd28..c2ea961dd 100644 --- a/package.json +++ b/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", diff --git a/src/plugin_manager/index.ts b/src/plugin_manager/index.ts index bfafbe2c5..a5e505726 100644 --- a/src/plugin_manager/index.ts +++ b/src/plugin_manager/index.ts @@ -19,7 +19,9 @@ const getPluginById = (pluginId: string, plugins: PluginManager) => { }; export const getPlugin = (plugin: string | Plugin, plugins: PluginManager) => { - return isString(plugin) ? getPluginById(plugin, plugins) : plugin; + return isString(plugin) + ? getPluginById(plugin, plugins) + : (plugin as unknown as { default: Plugin })?.default || plugin; }; export const logPluginWarn = (editor: Editor, plugin: string) => { diff --git a/webpack.config.js b/webpack.config.js index 374035b3f..4556e7571 100644 --- a/webpack.config.js +++ b/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, + ] + } +};