Configure library and demo for production builds

demo/package.json

@@ -5,8 +5,9 @@
     "scripts": {
         "test": "jest --no-cache",
         "test-cov": "jest --no-cache --coverage",
-        "build-dev": "webpack",
-        "start": "webpack serve"
+        "build-dev": "webpack --config webpack.dev.js",
+        "build": "webpack --config webpack.prod.js",
+        "start": "webpack serve --config webpack.dev.js"
     },
     "repository": {
         "type": "git",
@@ -36,7 +37,8 @@
         "style-loader": "^3.3.3",
         "typescript": "^5.3.3",
         "webpack": "^5.89.0",
-        "webpack-cli": "^5.1.4"
+        "webpack-cli": "^5.1.4",
+        "webpack-merge": "^5.10.0"
     },
     "dependencies": {
         "@emotion/styled": "^11.11.0",

demo/webpack.common.js

@@ -0,0 +1,50 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+    entry: path.resolve(__dirname, "src/index.tsx"),
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        filename: "index.bundle.js",
+    },
+    module: {
+        rules: [
+            {
+                test: /\.([jt]sx?)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [
+                            "@babel/preset-env",
+                            "@babel/preset-typescript",
+                            "@babel/preset-react",
+                        ],
+                    },
+                },
+            },
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"],
+            },
+            { test: /\.json$/, type: "json" },
+        ],
+    },
+    externals: {
+        fs: "fs",
+    },
+    externalsType: "window",
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: "MemoryViz Demo",
+            filename: "./index.html",
+            template: "./src/html/index.html",
+        }),
+    ],
+    resolve: {
+        extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".css"],
+        alias: {
+            "memory-viz": path.resolve(__dirname, "../memory-viz/src"),
+        },
+    },
+};

demo/webpack.dev.js

@@ -0,0 +1,17 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "development",
+    devtool: "inline-source-map",
+    devServer: {
+        static: {
+            directory: path.join(__dirname, "dist"),
+        },
+        compress: true,
+        port: 9000,
+        client: {
+            overlay: false,
+        },
+    },
+});

demo/webpack.prod.js

@@ -0,0 +1,7 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "production",
+    devtool: "source-map",
+});

docs/docs/99-api/index.md

@@ -1,6 +1,6 @@
 ---
 id: "index"
-title: "MemoryViz"
+title: "memory-viz"
 sidebar_label: "Readme"
 sidebar_position: 0
 custom_edit_url: null

docs/docs/99-api/modules.md

@@ -1,6 +1,6 @@
 ---
 id: "modules"
-title: "MemoryViz"
+title: "memory-viz"
 sidebar_label: "Exports"
 sidebar_position: 0.5
 custom_edit_url: null
@@ -32,4 +32,4 @@ the produced canvas
 
 #### Defined in
 
-user_functions.ts:29
+[user_functions.ts:29](https://github.com/david-yz-liu/memory-viz/blob/4d72b15/memory-viz/src/user_functions.ts#L29)

memory-viz/package.json

@@ -6,9 +6,9 @@
     "scripts": {
         "test": "jest --no-cache",
         "test-cov": "jest --no-cache --coverage",
-        "watch": "webpack --watch",
-        "build-dev": "tsc && webpack",
-        "build": "tsc && webpack --mode production"
+        "watch": "webpack --watch --config webpack.dev.js",
+        "build-dev": "tsc && webpack --config webpack.dev.js",
+        "build": "tsc && webpack --config webpack.prod.js"
     },
     "keywords": [
         "education",
@@ -40,6 +40,7 @@
         "ts-node": "^10.9.2",
         "typescript": "^5.3.3",
         "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.1"
+        "webpack-cli": "^5.0.1",
+        "webpack-merge": "^5.10.0"
     }
 }

memory-viz/webpack.common.js

@@ -0,0 +1,40 @@
+const path = require("path");
+
+module.exports = {
+    // target: "web",
+    entry: path.resolve(__dirname, "src/index.ts"),
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        filename: "memory_viz.bundle.js",
+        library: {
+            name: "MemoryViz",
+            type: "umd",
+            export: "default",
+        },
+        globalObject: "this",
+        clean: true,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.([jt]s)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [
+                            "@babel/preset-env",
+                            "@babel/preset-typescript",
+                        ],
+                    },
+                },
+            },
+        ],
+    },
+    externals: {
+        fs: "fs",
+    },
+    resolve: {
+        extensions: [".ts", ".js"],
+    },
+};

memory-viz/webpack.dev.js

@@ -0,0 +1,10 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "development",
+    devtool: "inline-source-map",
+    devServer: {
+        static: "./dist",
+    },
+});

memory-viz/webpack.prod.js

@@ -0,0 +1,7 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "production",
+    devtool: "source-map",
+});