build: create ESM build for utils package 🥳 (#7500)

* build: create ESM build for utils package

* add deps, exports and import.meta

.gitignore

@@ -25,4 +25,5 @@ packages/excalidraw/types
 coverage
 dev-dist
 html
-examples/**/bundle.*
+examples/**/bundle.*
+meta*.json

packages/utils/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@excalidraw/utils",
   "version": "0.1.2",
-  "main": "dist/excalidraw-utils.min.js",
+  "main": "./dist/prod/index.js",
+  "type": "module",
+  "module": "./dist/prod/index.js",
+  "exports": {
+    ".": {
+      "development": "./dist/dev/index.js",
+      "default": "./dist/prod/index.js"
+    }
+  },
   "files": [
     "dist/*"
   ],
@@ -33,6 +41,18 @@
       "last 1 safari version"
     ]
   },
+  "dependencies": {
+    "@braintree/sanitize-url": "6.0.2",
+    "@excalidraw/laser-pointer": "1.3.1",
+    "browser-fs-access": "0.29.1",
+    "open-color": "1.9.1",
+    "pako": "1.0.11",
+    "perfect-freehand": "1.2.0",
+    "png-chunk-text": "1.0.0",
+    "png-chunks-encode": "1.0.0",
+    "png-chunks-extract": "1.0.0",
+    "roughjs": "4.6.4"
+  },
   "devDependencies": {
     "@babel/core": "7.18.9",
     "@babel/plugin-transform-arrow-functions": "7.18.6",
@@ -56,6 +76,7 @@
   "repository": "https://github.com/excalidraw/excalidraw",
   "scripts": {
     "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
+    "build:esm": "rm -rf dist && node ../../scripts/buildUtils.js",
     "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
     "pack": "yarn build:umd && yarn pack"
   }

scripts/buildUtils.js

@@ -0,0 +1,123 @@
+const { build } = require("esbuild");
+const { sassPlugin } = require("esbuild-sass-plugin");
+
+const fs = require("fs");
+
+const browserConfig = {
+  entryPoints: ["index.ts"],
+  bundle: true,
+  format: "esm",
+  plugins: [sassPlugin()],
+};
+
+// Will be used later for treeshaking
+
+// function getFiles(dir, files = []) {
+//   const fileList = fs.readdirSync(dir);
+//   for (const file of fileList) {
+//     const name = `${dir}/${file}`;
+//     if (
+//       name.includes("node_modules") ||
+//       name.includes("config") ||
+//       name.includes("package.json") ||
+//       name.includes("main.js") ||
+//       name.includes("index-node.ts") ||
+//       name.endsWith(".d.ts") ||
+//       name.endsWith(".md")
+//     ) {
+//       continue;
+//     }
+
+//     if (fs.statSync(name).isDirectory()) {
+//       getFiles(name, files);
+//     } else if (
+//       name.match(/\.(sa|sc|c)ss$/) ||
+//       name.match(/\.(woff|woff2|eot|ttf|otf)$/) ||
+//       name.match(/locales\/[^/]+\.json$/)
+//     ) {
+//       continue;
+//     } else {
+//       files.push(name);
+//     }
+//   }
+//   return files;
+// }
+const createESMBrowserBuild = async () => {
+  // Development unminified build with source maps
+  const browserDev = await build({
+    ...browserConfig,
+    outdir: "dist/browser/dev",
+    sourcemap: true,
+    metafile: true,
+    define: {
+      "import.meta.env": JSON.stringify({ DEV: true }),
+    },
+  });
+  fs.writeFileSync(
+    "meta-browser-dev.json",
+    JSON.stringify(browserDev.metafile),
+  );
+
+  // production minified build without sourcemaps
+  const browserProd = await build({
+    ...browserConfig,
+    outdir: "dist/browser/prod",
+    minify: true,
+    metafile: true,
+    define: {
+      "import.meta.env": JSON.stringify({ PROD: true }),
+    },
+  });
+  fs.writeFileSync(
+    "meta-browser-prod.json",
+    JSON.stringify(browserProd.metafile),
+  );
+};
+
+const rawConfig = {
+  entryPoints: ["index.ts"],
+  bundle: true,
+  format: "esm",
+  packages: "external",
+  plugins: [sassPlugin()],
+};
+
+// const BASE_PATH = `${path.resolve(`${__dirname}/..`)}`;
+// const filesinExcalidrawPackage = getFiles(`${BASE_PATH}/packages/utils`);
+
+// const filesToTransform = filesinExcalidrawPackage.filter((file) => {
+//   return !(
+//     file.includes("/__tests__/") ||
+//     file.includes(".test.") ||
+//     file.includes("/tests/") ||
+//     file.includes("example")
+//   );
+// });
+const createESMRawBuild = async () => {
+  // Development unminified build with source maps
+  const rawDev = await build({
+    ...rawConfig,
+    outdir: "dist/dev",
+    sourcemap: true,
+    metafile: true,
+    define: {
+      "import.meta.env": JSON.stringify({ DEV: true }),
+    },
+  });
+  fs.writeFileSync("meta-raw-dev.json", JSON.stringify(rawDev.metafile));
+
+  // production minified build without sourcemaps
+  const rawProd = await build({
+    ...rawConfig,
+    outdir: "dist/prod",
+    minify: true,
+    metafile: true,
+    define: {
+      "import.meta.env": JSON.stringify({ PROD: true }),
+    },
+  });
+  fs.writeFileSync("meta-raw-prod.json", JSON.stringify(rawProd.metafile));
+};
+
+createESMRawBuild();
+createESMBrowserBuild();