chore: Update @excalidraw/extensions configs.

src/packages/extensions/.size-limit.json

@@ -0,0 +1,16 @@
+[
+  {
+    "path": "dist/excalidraw-extensions.production.min.js",
+    "limit": "5 MB"
+  },
+  {
+    "path": "dist/excalidraw-extensions-assets/locales",
+    "name": "dist/excalidraw-extensions-assets/locales",
+    "limit": "1.2 MB"
+  },
+  {
+    "path": "dist/excalidraw-extensions-assets/vendor-*.js",
+    "name": "dist/excalidraw-extensions-assets/vendor*.js",
+    "limit": "2.2 MB"
+  }
+]

src/packages/extensions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/extensions",
-  "version": "0.12.0",
+  "version": "0.15.2",
   "main": "index.ts",
   "files": [
     "dist/*"
@@ -38,8 +38,8 @@
     ]
   },
   "peerDependencies": {
-    "react": "^18.2.0",
+    "react": "^17.0.2 || ^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^17.0.2 || ^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "7.18.9",
@@ -50,19 +50,23 @@
     "@babel/preset-env": "7.18.6",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
+    "@size-limit/preset-big-lib": "8.2.6",
     "autoprefixer": "10.4.7",
     "babel-loader": "8.2.5",
     "babel-plugin-transform-class-properties": "6.24.1",
     "cross-env": "7.0.3",
     "css-loader": "6.7.1",
     "dotenv": "16.0.1",
+    "import-meta-loader": "1.1.0",
     "mini-css-extract-plugin": "2.6.1",
     "postcss-loader": "7.0.1",
     "sass-loader": "13.0.2",
+    "size-limit": "8.2.4",
+    "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.3",
     "ts-loader": "9.3.1",
-    "typescript": "4.7.4",
+    "typescript": "4.9.4",
-    "webpack": "5.73.0",
+    "webpack": "5.76.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.9.3",
@@ -78,7 +82,8 @@
     "start": "webpack serve --config webpack.dev-server.config.js",
     "install:deps": "yarn install --frozen-lockfile && yarn --cwd ../../../",
     "build:deps": "yarn --cwd ../excalidraw cross-env NODE_ENV=development webpack --config webpack.dev.config.js",
-    "build:example": "EXAMPLE=true webpack --config webpack.dev-server.config.js && yarn gen:types"
+    "build:example": "EXAMPLE=true webpack --config webpack.dev-server.config.js && yarn gen:types",
+    "size": "yarn build:umd && size-limit"
   },
   "dependencies": {
     "mathjax-full": "3.2.2"

src/packages/extensions/webpack.dev.config.js

@@ -1,18 +1,101 @@
-global.__childdir = __dirname;
 const path = require("path");
-const { merge } = require("webpack-merge");
+const webpack = require("webpack");
-const commonConfig = require("../common.webpack.dev.config");
+const autoprefixer = require("autoprefixer");
+const { parseEnvVariables } = require("./env");
 
 const outputDir = process.env.EXAMPLE === "true" ? "example/public" : "dist";
-const config = {
+module.exports = {
+  mode: "development",
+  devtool: false,
   entry: {
     "excalidraw-extensions.development": "./index.ts",
   },
   output: {
     path: path.resolve(__dirname, outputDir),
     library: "ExcalidrawExtensionsLib",
+    libraryTarget: "umd",
+    filename: "[name].js",
     chunkFilename: "excalidraw-extensions-assets-dev/[name]-[contenthash].js",
     assetModuleFilename: "excalidraw-extensions-assets-dev/[name][ext]",
+
+    publicPath: "",
+  },
+  resolve: {
+    extensions: [".js", ".ts", ".tsx", ".css", ".scss"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        exclude: /node_modules/,
+        use: [
+          "style-loader",
+          { loader: "css-loader" },
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                plugins: [autoprefixer()],
+              },
+            },
+          },
+          "sass-loader",
+        ],
+      },
+      {
+        test: /\.(ts|tsx|js|jsx|mjs)$/,
+        exclude:
+          /node_modules\/(?!(browser-fs-access|canvas-roundrect-polyfill))/,
+        use: [
+          {
+            loader: "import-meta-loader",
+          },
+          {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+              configFile: path.resolve(__dirname, "../tsconfig.dev.json"),
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        type: "asset/resource",
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      chunks: "async",
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+        },
+      },
+    },
+  },
+  plugins: [
+    new webpack.EvalSourceMapDevToolPlugin({ exclude: /vendor/ }),
+    new webpack.DefinePlugin({
+      "process.env": parseEnvVariables(
+        path.resolve(__dirname, "../../../.env.development"),
+      ),
+    }),
+  ],
+  externals: {
+    react: {
+      root: "React",
+      commonjs2: "react",
+      commonjs: "react",
+      amd: "react",
+    },
+    "react-dom": {
+      root: "ReactDOM",
+      commonjs2: "react-dom",
+      commonjs: "react-dom",
+      amd: "react-dom",
+    },
   },
 };
-module.exports = merge(commonConfig, config);

src/packages/extensions/webpack.prod.config.js

@@ -1,17 +1,124 @@
-global.__childdir = __dirname;
 const path = require("path");
-const { merge } = require("webpack-merge");
+const TerserPlugin = require("terser-webpack-plugin");
-const commonConfig = require("../common.webpack.prod.config");
+const BundleAnalyzerPlugin =
+  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const autoprefixer = require("autoprefixer");
+const webpack = require("webpack");
+const { parseEnvVariables } = require("./env");
 
-const config = {
+module.exports = {
+  mode: "production",
   entry: {
     "excalidraw-extensions.production.min": "./index.ts",
   },
   output: {
     path: path.resolve(__dirname, "dist"),
     library: "ExcalidrawExtensionsLib",
+    libraryTarget: "umd",
+    filename: "[name].js",
     chunkFilename: "excalidraw-extensions-assets/[name]-[contenthash].js",
     assetModuleFilename: "excalidraw-extensions-assets/[name][ext]",
+    publicPath: "",
+  },
+  resolve: {
+    extensions: [".js", ".ts", ".tsx", ".css", ".scss"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        exclude: /node_modules/,
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                plugins: [autoprefixer()],
+              },
+            },
+          },
+          "sass-loader",
+        ],
+      },
+      {
+        test: /\.(ts|tsx|js|jsx|mjs)$/,
+        exclude:
+          /node_modules\/(?!(browser-fs-access|canvas-roundrect-polyfill))/,
+
+        use: [
+          {
+            loader: "import-meta-loader",
+          },
+          {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+              configFile: path.resolve(__dirname, "../tsconfig.prod.json"),
+            },
+          },
+          {
+            loader: "babel-loader",
+            options: {
+              presets: [
+                "@babel/preset-env",
+                ["@babel/preset-react", { runtime: "automatic" }],
+                "@babel/preset-typescript",
+              ],
+              plugins: [
+                "transform-class-properties",
+                "@babel/plugin-transform-runtime",
+              ],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        type: "asset/resource",
+      },
+    ],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        test: /\.js($|\?)/i,
+      }),
+    ],
+    splitChunks: {
+      chunks: "async",
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+        },
+      },
+    },
+  },
+  plugins: [
+    ...(process.env.ANALYZER === "true" ? [new BundleAnalyzerPlugin()] : []),
+    new webpack.DefinePlugin({
+      "process.env": parseEnvVariables(
+        path.resolve(__dirname, "../../../.env.production"),
+      ),
+    }),
+  ],
+  externals: {
+    react: {
+      root: "React",
+      commonjs2: "react",
+      commonjs: "react",
+      amd: "react",
+    },
+    "react-dom": {
+      root: "ReactDOM",
+      commonjs2: "react-dom",
+      commonjs: "react-dom",
+      amd: "react-dom",
+    },
   },
 };
-module.exports = merge(commonConfig, config);