FESM module build for creator core spike

packages/survey-creator-core/package.json

@@ -8,16 +8,16 @@
     "url": "https://github.com/surveyjs/survey-creator.git"
   },
   "scripts": {
-    "build": "webpack --env buildType=dev && webpack --env buildType=prod",
-    "build:i18n": "webpack --config ./webpack.i18n.js --env buildType=dev && webpack --config ./webpack.i18n.js --env buildType=prod",
-    "build:themes": "node creator-themes-import.js && webpack --config ./webpack.themes.config.js --env buildType=dev && webpack --config ./webpack.themes.config.js --env buildType=prod",
+    "build": "webpack --env buildType=dev && webpack --env buildType=prod && npm run build:fesm",
+    "build:fesm": "webpack --config ./webpack.fesm.js --env buildType=prod",
+    "build:i18n": "webpack --config ./webpack.i18n.js --env buildType=dev && webpack --config ./webpack.i18n.js --env buildType=prod && webpack --config ./webpack.i18n.fesm.js --env buildType=prod",
+    "build:themes": "node creator-themes-import.js && webpack --config ./webpack.themes.config.js --env buildType=dev && webpack --config ./webpack.themes.config.js --env buildType=prod && webpack --config ./webpack.themes.fesm.config.js --env buildType=prod",
     "test": "jest",
     "test:cov": "jest --coverage",
     "test:dev": "jest --watch",
     "test:postcss": "postcss build/survey-creator-core.css --silent  -u postcss-calc -u autoprefixer -u postcss-fail-on-warn -o survey-creator-core.postcss.css && rimraf survey-creator-core.postcss.css",
     "doc_gen": "node doc_generator/editor_docgenerator.js src/entries/index.ts",
-    "watch": "webpack --env buildType=dev --watch",
-    "watch:dev": "webpack --env buildType=dev --watch",
+    "watch:dev": "concurrently \"webpack --env buildType=dev --watch\" \"webpack --config ./webpack.fesm.js --env buildType=prod --watch\" ",
     "watch:prod": "webpack --env buildType=prod --watch",
     "release": "standard-version --message \"Release: %s [azurepipelines skip]\"",
     "remove-package-lock": "rimraf package-lock.json",
@@ -34,6 +34,7 @@
     "@types/qunit": "2.0.31",
     "ace-builds": "1.2.2",
     "autoprefixer": "^10.4.17",
+    "concurrently": "^5.2.0",
     "copy-webpack-plugin": "^6.3.1",
     "css-loader": "^7.1.2",
     "html-loader": "^5.0.0",

packages/survey-creator-core/src/property-grid/search-manager.ts

@@ -11,7 +11,6 @@ export class SearchManagerPropertyGrid extends SearchManager {
   public get propertyGridNoResultsFound(): string { return getLocString("ed.propertyGridNoResultsFound"); }
 
   @property() survey: SurveyModel;
-  @property() isVisible: boolean;
   @property({ defaultValue: [] }) allMatches: Array<Question>;
 
   private lastCollapsedElement: IElement;

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

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

packages/survey-creator-core/tsconfig.json

@@ -16,6 +16,7 @@
         "./src/themes/index.ts"
       ],
     },
+    "types": []
   },
   "include": [
     "./src/entries/index.ts"

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

@@ -39,6 +39,7 @@ var buildPlatformJson = {
     "**/*"
   ],
   main: packageJson.name + ".js",
+  module: "fesm/" + packageJson.name + ".js",
   repository: {
     type: "git",
     url: "https://github.com/surveyjs/survey-creator.git",
@@ -56,6 +57,36 @@ var buildPlatformJson = {
       "optional": true
     },
   },
+  "exports": {
+    ".": {
+      "types": "./typings/entries/index.d.ts",
+      "import": "./fesm/survey-creator-core.js",
+      "require": "./survey-creator-core.js"
+    },
+    "./*.css": "./*.css",
+    "./survey-creator-core.i18n": {
+      "import": "./fesm/survey-creator-core.i18n.js",
+      "require": "./survey-creator-core.i18n.js"
+    },
+    "./i18n": {
+      "import": "./fesm/i18n/index.js",
+      "require": "./i18n/index.js"
+    },
+    "./i18n/*": {
+      "import": "./fesm/i18n/*.js",
+      "require": "./i18n/*.js"
+    },
+    "./themes": {
+      "types": "./themes/index.d.ts",
+      "import": "./fesm/themes/index.js",
+      "require": "./themes/index.js"
+    },
+    "./themes/*": {
+      "types": "./themes/*.d.ts",
+      "import": "./fesm/themes/*.js",
+      "require": "./themes/*.js"
+    }
+  },
   devDependencies: {},
 };
 
@@ -204,8 +235,8 @@ module.exports = function (options) {
       },
     },
     plugins: [
-      new DashedNamePlugin(),
       new webpack.ProgressPlugin(percentage_handler(options)),
+      new DashedNamePlugin(),
       new webpack.DefinePlugin({
         "process.env.ENVIRONMENT": JSON.stringify(options.buildType),
         "process.env.VERSION": JSON.stringify(packageJson.version),

packages/survey-creator-core/webpack.fesm.js

@@ -0,0 +1,55 @@
+"use strict";
+const webpackCommonConfigCreator = require("./webpack.config");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+
+const { merge } = require("webpack-merge");
+const packageJson = require("./package.json");
+
+function getConfig(options) {
+  const buildPath = __dirname + "/build/fesm/";
+  const isProductionBuild = options.buildType === "prod";
+
+  const config = {
+    mode: "production",
+    devtool: "source-map",
+    entry: {
+      [packageJson.name]: path.resolve(__dirname, "./src/entries/index.ts"),
+    },
+    output: {
+      filename: "[name]" + ".js",
+      path: buildPath,
+      library: {
+        type: "module"
+      }
+    },
+    experiments: {
+      outputModule: true,
+    },
+    optimization: {
+      minimize: false
+    },
+    externalsType: "module",
+    externals: {
+      "survey-core": "survey-core",
+      "survey-core/themes": "survey-core/themes",
+      "survey-creator-core/themes": "survey-creator-core/themes"
+    }
+  };
+
+  return config;
+}
+
+module.exports = function (options) {
+  options.tsConfigFile = "tsconfig.fesm.json";
+  const config = webpackCommonConfigCreator(options);
+  config.entry = {};
+  config.output = {};
+  config.plugins.shift();
+  config.plugins[3] = new MiniCssExtractPlugin({
+    filename: "../[name].fontless.min.css",
+  }),
+  config.externals = {};
+  delete config.mode;
+  return merge(config, getConfig(options));
+};

packages/survey-creator-core/webpack.i18n.fesm.js

@@ -0,0 +1,42 @@
+"use strict";
+const webpackCommonConfigCreator = require("./webpack.i18n");
+const path = require("path");
+
+const { merge } = require("webpack-merge");
+const packageJson = require("./package.json");
+
+function getConfig(options) {
+  const buildPath = __dirname + "/build/fesm/";
+  const config = {
+    mode: "production",
+    devtool: "source-map",
+    output: {
+      filename: "[name]" + ".js",
+      path: buildPath,
+      library: {
+        type: "module"
+      }
+    },
+    experiments: {
+      outputModule: true,
+    },
+    optimization: {
+      minimize: false
+    },
+    externalsType: "module",
+    externals: {
+      "survey-creator-core": "survey-creator-core",
+    }
+  };
+
+  return config;
+}
+
+module.exports = function (options) {
+  const config = webpackCommonConfigCreator(options);
+  config.output = {};
+  config.plugins.shift();
+  config.externals = {};
+  delete config.mode;
+  return merge(config, getConfig(options));
+};

packages/survey-creator-core/webpack.i18n.js

@@ -30,18 +30,10 @@ function patchEntries() {
   fs.readdirSync(path.resolve(__dirname, "./src/localization")).forEach(file => {
     var extension = path.extname(file);
     if (extension.toLowerCase() === ".ts") {
-      config.entry[path.basename(file, extension)] = (path.resolve(__dirname, "./src/localization") + "/" + file);
+      config.entry[`i18n/${path.basename(file, extension)}`] = (path.resolve(__dirname, "./src/localization") + "/" + file);
     }
   });
-  config.entry.index = path.resolve(__dirname, "./src/entries/i18n.ts");
-}
-
-function patchFilename(options) {
-  config.output = {};
-  const isProductionBuild = options.buildType === "prod";
-  config.output.filename = (pathData) => {
-    return (pathData.chunk.name == "survey-creator-core.i18n" ? "[name]" : "i18n/[name]") + (isProductionBuild ? ".min" : "") + ".js";
-  };
+  config.entry["i18n/index"] = path.resolve(__dirname, "./src/entries/i18n.ts");
 }
 
 module.exports = function (options) {
@@ -50,9 +42,8 @@ module.exports = function (options) {
   options.tsConfigFile = "tsconfig.i18n.json";
   options.isCore = false;
   patchEntries();
-  patchFilename(options);
   const mainConfig = webpackCommonConfigCreator(options);
-  delete mainConfig.entry[packageJson.name];
+  mainConfig.entry = {};
   mainConfig.plugins.shift();
   return merge(mainConfig, config);
 };

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

@@ -7,13 +7,13 @@ var path = require("path");
 
 const config = {
   output: {
-    path: __dirname + "/build/themes"
+    path: __dirname + "/build"
   },
   entry: {
-    "sc2020": path.resolve(__dirname, "./src/themes/sc2020.ts"),
-    "default-dark": path.resolve(__dirname, "./src/themes/default-dark.ts"),
-    "default-contrast": path.resolve(__dirname, "./src/themes/default-contrast.ts"),
-    "index": path.resolve(__dirname, "./src/themes/index.ts"),
+    "themes/sc2020": path.resolve(__dirname, "./src/themes/sc2020.ts"),
+    "themes/default-dark": path.resolve(__dirname, "./src/themes/default-dark.ts"),
+    "themes/default-contrast": path.resolve(__dirname, "./src/themes/default-contrast.ts"),
+    "themes/index": path.resolve(__dirname, "./src/themes/index.ts"),
   },
   plugins: [new FixStyleOnlyEntriesPlugin()],
 };

packages/survey-creator-core/webpack.themes.fesm.config.js

@@ -0,0 +1,35 @@
+"use strict";
+const webpackCommonConfigCreator = require("./webpack.themes.config");
+const { merge } = require("webpack-merge");
+
+function getConfig(options) {
+  const buildPath = __dirname + "/build/fesm/";
+  const config = {
+    mode: "production",
+    devtool: "source-map",
+    output: {
+      filename: "[name]" + ".js",
+      path: buildPath,
+      library: {
+        type: "module"
+      }
+    },
+    experiments: {
+      outputModule: true,
+    },
+    optimization: {
+      minimize: false
+    },
+  };
+
+  return config;
+}
+
+module.exports = function (options) {
+  const config = webpackCommonConfigCreator(options);
+  config.output = {};
+  config.plugins.shift();
+  config.externals = {};
+  delete config.mode;
+  return merge(config, getConfig(options));
+};

packages/survey-creator-vue/example/vite.config.ts

@@ -9,24 +9,10 @@ export default defineConfig(({ command }) => {
     plugins: [
       vue(),
     ],
-    server: {
-      watch: {
-        ignored: ["survey-creator-vue", "survey-vue3-ui"].map((m) => `!**/node_modules/${m}/**`)
-      }
-    },
-    build: {
-      commonjsOptions: { exclude: ["survey-core", "survey-creator-core"] },
-    },
-    optimizeDeps: {
-      exclude: ["survey-creator-vue", "survey-vue3-ui"],
-      include: ["survey-creator-core", "survey-core", "survey-creator-core/survey-creator-core.i18n", "survey-core/survey.i18n"]
-    },
     resolve: {
-      preserveSymlinks: command == "serve" ? false : true,
+      dedupe: ["survey-creator-core", "survey-core", "vue"],
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
-        "survey-core": fileURLToPath(new URL('./node_modules/survey-core', import.meta.url)),
-        "survey-creator-core": fileURLToPath(new URL('./node_modules/survey-creator-core', import.meta.url)),
       }
     }
 }

packages/survey-creator-vue/vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig(({ mode }) => {
     plugins: [vue()],
 
     build: {
-      // Output compiled files to /dist.
+      emptyOutDir: false,
       sourcemap: mode == "development",
       outDir: "./build",
       lib: {
@@ -62,12 +62,9 @@ export default defineConfig(({ mode }) => {
       },
     },
     resolve: {
-      preserveSymlinks: true,
+      dedupe: ["survey-core", "vue"],
       alias: {
         "@": fileURLToPath(new URL("./src", import.meta.url)),
-        "survey-core": fileURLToPath(
-          new URL("./node_modules/survey-core", import.meta.url)
-        ),
       },
     },
   };