Add entry point for embed excalidraw and build the bundle with webpack(#1)

.gitignore

@@ -13,3 +13,4 @@ yarn-debug.log*
 yarn-error.log*
 yarn.lock
 .idea
+dist

package.json

@@ -1,4 +1,12 @@
 {
+  "name": "excalidraw",
+  "version": "0.0.0",
+  "main": "dist/excalidraw.min.js",
+  "files": [
+    "dist/excalidraw.min.js",
+    "dist/excalidraw.min.css",
+    "dist/socketIoClient.min.js"
+  ],
   "browserslist": {
     "production": [
       ">0.2%",
@@ -18,46 +26,63 @@
       "last 1 safari version"
     ]
   },
+  "peerDependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
   "dependencies": {
+    "browser-nativefs": "0.10.1",
+    "i18next-browser-languagedetector": "5.0.0",
+    "lodash.throttle": "4.1.1",
+    "nanoid": "2.1.11",
+    "open-color": "1.7.0",
+    "points-on-curve": "0.2.0",
+    "pwacompat": "2.0.15",
+    "roughjs": "4.3.1",
+    "socket.io-client": "2.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.9.0",
+    "@babel/plugin-transform-arrow-functions": "7.8.3",
+    "@babel/plugin-transform-async-to-generator": "7.8.3",
+    "@babel/plugin-transform-typescript": "7.9.4",
+    "@babel/preset-env": "7.9.5",
+    "@babel/preset-react": "7.9.4",
+    "@babel/preset-typescript": "7.9.0",
     "@sentry/browser": "5.20.1",
     "@sentry/integrations": "5.20.1",
     "@testing-library/jest-dom": "5.11.1",
     "@testing-library/react": "10.4.7",
     "@types/jest": "26.0.7",
+    "@types/lodash.throttle": "4.1.6",
     "@types/nanoid": "2.1.0",
     "@types/react": "16.9.43",
     "@types/react-dom": "16.9.8",
     "@types/socket.io-client": "1.4.33",
-    "browser-nativefs": "0.10.1",
-    "i18next-browser-languagedetector": "5.0.0",
-    "lodash.throttle": "4.1.1",
-    "nanoid": "2.1.11",
-    "node-sass": "4.14.1",
-    "open-color": "1.7.0",
-    "points-on-curve": "0.2.0",
-    "pwacompat": "2.0.15",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-scripts": "3.4.1",
-    "roughjs": "4.3.1",
-    "socket.io-client": "2.3.0",
-    "typescript": "3.9.7"
-  },
-  "devDependencies": {
-    "@types/lodash.throttle": "4.1.6",
     "asar": "3.0.3",
+    "babel-loader": "8.1.0",
+    "babel-plugin-transform-class-properties": "6.24.1",
+    "css-loader": "3.5.2",
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-plugin-prettier": "3.1.4",
     "husky": "4.2.5",
     "jest-canvas-mock": "2.2.0",
     "lint-staged": "10.2.11",
+    "mini-css-extract-plugin": "0.8.0",
+    "node-sass": "4.14.1",
     "pepjs": "0.5.2",
     "prettier": "2.0.5",
-    "rewire": "5.0.0"
+    "react": "16.13.1",
-  },
+    "react-dom": "16.13.1",
-  "engines": {
+    "react-scripts": "3.4.1",
-    "node": ">=12.0.0"
+    "rewire": "5.0.0",
+    "sass-loader": "8.0.2",
+    "terser-webpack-plugin": "2.3.5",
+    "ts-loader": "7.0.0",
+    "typescript": "3.9.7",
+    "webpack": "4.42.0",
+    "webpack-cli": "3.3.11"
   },
   "homepage": ".",
   "husky": {
@@ -70,11 +95,8 @@
       "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-nativefs)/)"
     ]
   },
-  "name": "excalidraw",
-  "private": true,
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "REACT_APP_INCLUDE_GTAG=false REACT_APP_DISABLE_SENTRY=true react-scripts build",
     "build:app": "REACT_APP_INCLUDE_GTAG=true REACT_APP_GIT_SHA=$NOW_GITHUB_COMMIT_SHA react-scripts build",
     "build:zip": "node ./scripts/build-version.js",
     "build": "npm run build:app && npm run build:zip",
@@ -91,7 +113,8 @@
     "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
     "test:other": "npm run prettier -- --list-different",
     "test:typecheck": "tsc",
+    "test": "npm run test:app",
     "test:update": "npm run test:app -- --updateSnapshot --watchAll=false",
-    "test": "npm run test:app"
+    "build:umd": "NODE_ENV=production webpack --config webpack.prod.config.js"
   }
 }

src/excalidraw_wrapper.js.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from "react";
+
+import App from "./components/App";
+
+import "./css/styles.scss";
+
+type Props = {};
+
+const Excalidraw = (props: Props) => {
+  useEffect(() => {
+    const handleTouchMove = (event: TouchEvent) => {
+      // @ts-ignore
+      if (event.scale !== 1) {
+        event.preventDefault();
+      }
+    };
+
+    document.addEventListener("touchmove", handleTouchMove, { passive: false });
+
+    return () => {
+      // @ts-ignore
+      document.removeEventListener("touchMove", handleTouchMove);
+    };
+  }, []);
+
+  return <App />;
+};
+export default Excalidraw;

tsconfig.prod.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "react"
+  }
+}

webpack.prod.config.js

@@ -0,0 +1,88 @@
+const path = require("path");
+const webpack = require("webpack");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+
+module.exports = {
+  mode: "production",
+  entry: {
+    "excalidraw.min": "./src/excalidraw_wrapper.js",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    library: "Excalidraw",
+    libraryTarget: "umd",
+    filename: "[name].js",
+  },
+  resolve: {
+    extensions: [".js", ".ts", ".tsx", ".css", ".scss"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        exclude: /node_modules/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: "css-loader", options: { url: false } },
+          "sass-loader",
+        ],
+      },
+      {
+        test: /\.(ts|tsx|js|jsx|mjs)$/,
+        exclude: /node_modules\/(?!(roughjs|socket.io-client|browser-nativefs)\/).*/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+              configFile: "tsconfig.prod.json",
+            },
+          },
+          {
+            loader: "babel-loader",
+            options: {
+              presets: [
+                "@babel/preset-env",
+                "@babel/preset-react",
+                "@babel/preset-typescript",
+              ],
+              plugins: [
+                "@babel/plugin-proposal-object-rest-spread",
+                "@babel/plugin-transform-arrow-functions",
+                "transform-class-properties",
+                "@babel/plugin-transform-async-to-generator",
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        test: /\.js($|\?)/i,
+      }),
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 2,
+      }),
+    ],
+  },
+  plugins: [new MiniCssExtractPlugin({ filename: "[name].css" })],
+  externals: {
+    react: {
+      root: "React",
+      commonjs2: "react",
+      commonjs: "react",
+      amd: "react",
+    },
+    "react-dom": {
+      root: "ReactDOM",
+      commonjs2: "react-dom",
+      commonjs: "react-dom",
+      amd: "react-dom",
+    },
+  },
+};