Implement esm modules for creator-js package (#6674)

Author: dk981234

packages/survey-creator-js/package.json

@@ -30,12 +30,16 @@
     "visual-regression-tests:file": "testcafe --app \"http-server\" ../../visualRegressionTests/tests/designer/pg-editors.ts --screenshots ../../ --reporter minimal --selector-timeout 1500 --config-file .testcaferc.dev.js",
     "release": "standard-version --message \"Release: %s [azurepipelines skip]\"",
     "remove-package-lock": "rimraf package-lock.json",
-    "build": "webpack --env buildType=dev && webpack --env buildType=prod",
-    "watch:dev": "webpack --env buildType=dev --watch",
+    "build": "webpack --env buildType=dev && webpack --env buildType=prod && rollup -c",
+    "watch:dev": "webpack --env buildType=dev --watch && rollup -c -w",
     "watch:prod": "webpack --env buildType=prod --watch",
     "lint": "eslint ./src"
   },
   "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@types/ace": "0.0.44",
     "@types/jest": "^26.0.24",
     "@types/jquery": "3.3.29",
@@ -51,6 +55,8 @@
     "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.9.0",
     "rimraf": "2.5.4",
+    "rollup": "^4.34.8",
+    "rollup-plugin-license": "^3.6.0",
     "sass": "^1.62.1",
     "sass-loader": "^8.0.2",
     "standard-version": "^9.5.0",
@@ -65,7 +71,7 @@
   },
   "dependencies": {
     "survey-core": "../../../survey-library/packages/survey-core/build",
-    "survey-js-ui": "../../../survey-library/packages/survey-js-ui/build",
-    "survey-creator-core": "../survey-creator-core/build"
+    "survey-creator-core": "../survey-creator-core/build",
+    "survey-js-ui": "../../../survey-library/packages/survey-js-ui/build"
   }
-}
+}

packages/survey-creator-js/rollup.config.js

@@ -0,0 +1,77 @@
+const typescript = require("@rollup/plugin-typescript");
+const nodeResolve = require("@rollup/plugin-node-resolve");
+const replace = require("@rollup/plugin-replace");
+const alias = require("@rollup/plugin-alias");
+const bannerPlugin = require("rollup-plugin-license");
+const path = require("path");
+const VERSION = require("./package.json").version;
+
+const banner = [
+  "SurveyJS Creator UI v" + VERSION,
+  "(c) 2015-" + new Date().getFullYear() + " Devsoft Baltic OÜ - http://surveyjs.io/",
+  "Github: https://github.com/surveyjs/survey-creator",
+  "License: https://surveyjs.io/Licenses#SurveyCreator"
+].join("\n");
+
+const input = { "survey-creator-js": path.resolve(__dirname, "./entries/index.ts") };
+module.exports = (options) => {
+  options = options ?? {};
+  if(!options.tsconfig) {
+    options.tsconfig = path.resolve(__dirname, "./tsconfig.fesm.json");
+  }
+  if(!options.dir) {
+    options.dir = path.resolve(__dirname, "./build/fesm");
+  }
+  return {
+    input,
+    context: "this",
+
+    plugins: [
+      alias({
+        entries: {
+          "survey-react-ui": "survey-js-ui",
+          "react": "survey-js-ui",
+          "react-dom/test-utils": "survey-js-ui",
+          "react-dom": "survey-js-ui",
+          "react/jsx-runtime": "survey-js-ui"
+        }
+      }),
+      nodeResolve(),
+      typescript({
+        filterRoot: false,
+        inlineSources: true,
+        sourceMap: true, tsconfig: options.tsconfig,
+        compilerOptions: {
+          declaration: false,
+          declarationDir: null
+        }
+      }),
+      replace({
+        preventAssignment: false,
+        values: {
+          "process.env.RELEASE_DATE": JSON.stringify(new Date().toISOString().slice(0, 10)),
+          "process.env.VERSION": JSON.stringify(VERSION),
+        }
+      }),
+      bannerPlugin({
+        banner: {
+          content: banner,
+          commentStyle: "ignored",
+        }
+      })
+    ],
+    external: [
+      "survey-core",
+      "survey-creator-core",
+      "survey-js-ui"
+    ],
+    output: [
+      {
+        dir: options.dir,
+        format: "esm",
+        exports: "named",
+        sourcemap: true,
+      },
+    ],
+  };
+};

packages/survey-creator-js/tsconfig.fesm.json

@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "target": "ES6"
+    }
+}

packages/survey-creator-js/webpack.config.js

@@ -37,6 +37,7 @@ const buildPlatformJson = {
     "**/*"
   ],
   main: packageJson.name + ".js",
+  module: "fesm/survey-creator-js.js",
   repository: {
     type: "git",
     url: "https://github.com/surveyjs/survey-creator.git"
@@ -125,7 +126,7 @@ module.exports = function (options) {
         },
         {
           test: /\.html$/,
-          exclude: [/node_modules/, require.resolve('./index.html')],
+          exclude: [/node_modules/, require.resolve("./index.html")],
           loader: "html-loader"
         },
         {
@@ -142,8 +143,8 @@ module.exports = function (options) {
       filename: "[name]" + (isProductionBuild ? ".min" : "") + ".js",
       library: {
         root: options.libraryName || "SurveyCreator",
-        amd: '[dashedname]',
-        commonjs: '[dashedname]',
+        amd: "[dashedname]",
+        commonjs: "[dashedname]",
       },
       libraryTarget: "umd",
       globalObject: "this",
@@ -223,7 +224,7 @@ module.exports = function (options) {
     ]);
     config.devServer = {
       static: {
-        directory: path.join(__dirname, '.'),
+        directory: path.join(__dirname, "."),
       },
       //host: "0.0.0.0",
       compress: false,