Merge branch 'master' into mrazator/delta-based-sync

scripts/autorelease.js

@@ -1,5 +1,6 @@
-const fs = require("fs");
 const { exec, execSync } = require("child_process");
+const fs = require("fs");
+
 const core = require("@actions/core");
 
 const excalidrawDir = `${__dirname}/../packages/excalidraw`;

scripts/buildBase.js

@@ -0,0 +1,52 @@
+const path = require("path");
+
+const { build } = require("esbuild");
+
+// contains all dependencies bundled inside
+const getConfig = (outdir) => ({
+  outdir,
+  bundle: true,
+  format: "esm",
+  entryPoints: ["src/index.ts"],
+  entryNames: "[name]",
+  assetNames: "[dir]/[name]",
+  alias: {
+    "@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
+    "@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
+    "@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
+    "@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
+    "@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
+  },
+});
+
+function buildDev(config) {
+  return build({
+    ...config,
+    sourcemap: true,
+    define: {
+      "import.meta.env": JSON.stringify({ DEV: true }),
+    },
+  });
+}
+
+function buildProd(config) {
+  return build({
+    ...config,
+    minify: true,
+    define: {
+      "import.meta.env": JSON.stringify({ PROD: true }),
+    },
+  });
+}
+
+const createESMRawBuild = async () => {
+  // development unminified build with source maps
+  await buildDev(getConfig("dist/dev"));
+
+  // production minified build without sourcemaps
+  await buildProd(getConfig("dist/prod"));
+};
+
+(async () => {
+  await createESMRawBuild();
+})();

scripts/buildExample.mjs

@@ -1,36 +0,0 @@
-import * as esbuild from "esbuild";
-import { sassPlugin } from "esbuild-sass-plugin";
-import { execSync } from "child_process";
-
-const createDevBuild = async () => {
-  return await esbuild.build({
-    entryPoints: ["../../examples/excalidraw/with-script-in-browser/index.tsx"],
-    outfile:
-      "../../examples/excalidraw/with-script-in-browser/public/bundle.js",
-    define: {
-      "import.meta.env": "{}",
-    },
-    bundle: true,
-    format: "esm",
-    plugins: [sassPlugin()],
-    loader: {
-      ".woff2": "dataurl",
-      ".html": "copy",
-    },
-  });
-};
-
-const startServer = async (ctx) => {
-  await ctx.serve({
-    servedir: "example/public",
-    port: 5001,
-  });
-};
-execSync(
-  `rm -rf ../../examples/excalidraw/with-script-in-browser/public/dist && yarn build:esm && cp -r dist ../../examples/excalidraw/with-script-in-browser/public`,
-);
-
-const ctx = await createDevBuild();
-
-// await startServer(ctx);
-// console.info("Hosted at port http://localhost:5001!!");

scripts/buildMath.js

@@ -1,108 +0,0 @@
-const fs = require("fs");
-const { build } = require("esbuild");
-
-const browserConfig = {
-  entryPoints: ["index.ts"],
-  bundle: true,
-  format: "esm",
-};
-
-// 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",
-};
-
-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();

scripts/buildPackage.js

@@ -1,165 +1,83 @@
+const path = require("path");
+
 const { build } = require("esbuild");
 const { sassPlugin } = require("esbuild-sass-plugin");
-const { externalGlobalPlugin } = require("esbuild-plugin-external-global");
 
-// Will be used later for treeshaking
-//const fs = require("fs");
-// const path = require("path");
+const { parseEnvVariables } = require("../packages/excalidraw/env.cjs");
 
-// 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")
-//     ) {
-//       continue;
-//     }
+const ENV_VARS = {
+  development: {
+    ...parseEnvVariables(`${__dirname}/../.env.development`),
+    DEV: true,
+  },
+  production: {
+    ...parseEnvVariables(`${__dirname}/../.env.production`),
+    PROD: true,
+  },
+};
 
-//     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 browserConfig = {
-  entryPoints: ["index.tsx"],
+// excludes all external dependencies and bundles only the source code
+const getConfig = (outdir) => ({
+  outdir,
   bundle: true,
-  format: "esm",
-  plugins: [
-    sassPlugin(),
-    externalGlobalPlugin({
-      react: "React",
-      "react-dom": "ReactDOM",
-    }),
-  ],
   splitting: true,
-  loader: {
-    ".woff2": "file",
-  },
-};
-const createESMBrowserBuild = async () => {
-  // Development unminified build with source maps
-  await build({
-    ...browserConfig,
-    outdir: "dist/browser/dev",
-    sourcemap: true,
-    chunkNames: "excalidraw-assets-dev/[name]-[hash]",
-    assetNames: "excalidraw-assets-dev/[name]-[hash]",
-    define: {
-      "import.meta.env": JSON.stringify({ DEV: true }),
-    },
-  });
-
-  // production minified build without sourcemaps
-  await build({
-    ...browserConfig,
-    outdir: "dist/browser/prod",
-    minify: true,
-    chunkNames: "excalidraw-assets/[name]-[hash]",
-    assetNames: "excalidraw-assets/[name]-[hash]",
-    define: {
-      "import.meta.env": JSON.stringify({ PROD: true }),
-    },
-  });
-};
-
-// const BASE_PATH = `${path.resolve(`${__dirname}/..`)}`;
-// const filesinExcalidrawPackage = [
-//   ...getFiles(`${BASE_PATH}/packages/excalidraw`),
-//   `${BASE_PATH}/packages/utils/export.ts`,
-//   `${BASE_PATH}/packages/utils/bbox.ts`,
-//   ...getFiles(`${BASE_PATH}/public/fonts`),
-// ];
-
-// const filesToTransform = filesinExcalidrawPackage.filter((file) => {
-//   return !(
-//     file.includes("/__tests__/") ||
-//     file.includes(".test.") ||
-//     file.includes("/tests/") ||
-//     file.includes("example")
-//   );
-// });
-
-const rawConfigCommon = {
-  bundle: true,
   format: "esm",
+  packages: "external",
   plugins: [sassPlugin()],
-  assetNames: "[dir]/[name]-[hash]",
+  target: "es2020",
+  assetNames: "[dir]/[name]",
+  chunkNames: "[dir]/[name]-[hash]",
+  alias: {
+    "@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
+    "@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
+    "@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
+    "@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
+    "@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
+  },
   loader: {
-    ".json": "copy",
     ".woff2": "file",
   },
-  packages: "external",
-  // chunks are always external, so they are not bundled within and get build separately
-  external: ["*.chunk"],
-};
+});
 
-const rawConfigIndex = {
-  ...rawConfigCommon,
-  entryPoints: ["index.tsx"],
-};
-
-const rawConfigChunks = {
-  ...rawConfigCommon,
-  // create a separate chunk for each
-  entryPoints: ["**/*.chunk.ts"],
-};
-
-function buildDev(chunkConfig) {
-  const config = {
-    ...chunkConfig,
+function buildDev(config) {
+  return build({
+    ...config,
     sourcemap: true,
     define: {
-      "import.meta.env": JSON.stringify({ DEV: true }),
+      "import.meta.env": JSON.stringify(ENV_VARS.development),
     },
-    outdir: "dist/dev",
-  };
-
-  return build(config);
+  });
 }
 
-function buildProd(chunkConfig) {
-  const config = {
-    ...chunkConfig,
+function buildProd(config) {
+  return build({
+    ...config,
     minify: true,
     define: {
-      "import.meta.env": JSON.stringify({ PROD: true }),
+      "import.meta.env": JSON.stringify(ENV_VARS.production),
     },
-    outdir: "dist/prod",
-  };
-
-  return build(config);
+  });
 }
 
 const createESMRawBuild = async () => {
+  const chunksConfig = {
+    entryPoints: ["index.tsx", "**/*.chunk.ts"],
+    entryNames: "[name]",
+  };
+
   // development unminified build with source maps
-  await buildDev(rawConfigIndex);
-  await buildDev(rawConfigChunks);
+  await buildDev({
+    ...getConfig("dist/dev"),
+    ...chunksConfig,
+  });
 
   // production minified buld without sourcemaps
-  await buildProd(rawConfigIndex);
-  await buildProd(rawConfigChunks);
+  await buildProd({
+    ...getConfig("dist/prod"),
+    ...chunksConfig,
+  });
 };
 
-// otherwise throws "ERROR: Could not resolve "./subset-worker.chunk"
 (async () => {
   await createESMRawBuild();
-  await createESMBrowserBuild();
 })();

scripts/buildUtils.js

@@ -1,130 +1,62 @@
-const fs = require("fs");
+const path = require("path");
+
 const { build } = require("esbuild");
 const { sassPlugin } = require("esbuild-sass-plugin");
+
 const { woff2ServerPlugin } = require("./woff2/woff2-esbuild-plugins");
 
-const browserConfig = {
-  entryPoints: ["index.ts"],
+// contains all dependencies bundled inside
+const getConfig = (outdir) => ({
+  outdir,
   bundle: true,
   format: "esm",
-  plugins: [sassPlugin()],
-  assetNames: "assets/[name]",
-  loader: {
-    ".woff2": "file",
+  entryPoints: ["src/index.ts"],
+  entryNames: "[name]",
+  assetNames: "[dir]/[name]",
+  alias: {
+    "@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
+    "@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
+    "@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
+    "@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
+    "@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
   },
-};
+});
 
-// 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",
+function buildDev(config) {
+  return build({
+    ...config,
     sourcemap: true,
-    metafile: true,
+    plugins: [sassPlugin(), woff2ServerPlugin()],
     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",
+function buildProd(config) {
+  return build({
+    ...config,
     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",
-};
-
-// 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,
-    plugins: [sassPlugin(), woff2ServerPlugin({ outdir: "dist/dev/assets" })],
-    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,
     plugins: [
       sassPlugin(),
-      woff2ServerPlugin({ outdir: "dist/prod/assets", generateTtf: true }),
+      woff2ServerPlugin({
+        outdir: `${config.outdir}/assets`,
+      }),
     ],
     define: {
       "import.meta.env": JSON.stringify({ PROD: true }),
     },
   });
-  fs.writeFileSync("meta-raw-prod.json", JSON.stringify(rawProd.metafile));
+}
+
+const createESMRawBuild = async () => {
+  // development unminified build with source maps
+  await buildDev(getConfig("dist/dev"));
+
+  // production minified build without sourcemaps
+  await buildProd(getConfig("dist/prod"));
 };
 
-createESMRawBuild();
-createESMBrowserBuild();
+(async () => {
+  await createESMRawBuild();
+})();

scripts/prerelease.js

@@ -1,9 +1,10 @@
 const fs = require("fs");
 const util = require("util");
+
 const exec = util.promisify(require("child_process").exec);
 const updateChangelog = require("./updateChangelog");
 
-const excalidrawDir = `${__dirname}/../packages/excalidraw/packages/excalidraw`;
+const excalidrawDir = `${__dirname}/../packages/excalidraw/`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
 
 const updatePackageVersion = (nextVersion) => {

scripts/woff2/woff2-esbuild-plugins.js

@@ -1,9 +1,10 @@
+const { execSync } = require("child_process");
 const fs = require("fs");
 const path = require("path");
-const { execSync } = require("child_process");
-const which = require("which");
-const wawoff = require("wawoff2");
+
 const { Font } = require("fonteditor-core");
+const wawoff = require("wawoff2");
+const which = require("which");
 
 /**
  * Custom esbuild plugin to:
@@ -20,8 +21,6 @@ module.exports.woff2ServerPlugin = (options = {}) => {
   return {
     name: "woff2ServerPlugin",
     setup(build) {
-      const { outdir, generateTtf } = options;
-      const outputDir = path.resolve(outdir);
       const fonts = new Map();
 
       build.onResolve({ filter: /\.woff2$/ }, (args) => {
@@ -94,9 +93,12 @@ module.exports.woff2ServerPlugin = (options = {}) => {
       );
 
       build.onEnd(async () => {
-        if (!generateTtf) {
+        const { outdir } = options;
+
+        if (!outdir) {
           return;
         }
+        const outputDir = path.resolve(outdir);
 
         const isFontToolsInstalled = await which("fonttools", {
           nothrow: true,
@@ -123,6 +125,17 @@ module.exports.woff2ServerPlugin = (options = {}) => {
           "./assets/NotoEmoji-Regular-2048.ttf",
         );
 
+        const liberationPath = path.resolve(
+          __dirname,
+          "./assets/LiberationSans-Regular.ttf",
+        );
+
+        // need to use the same em size as built-in fonts, otherwise pyftmerge throws (modified manually with font forge)
+        const liberationPath_2048 = path.resolve(
+          __dirname,
+          "./assets/LiberationSans-Regular-2048.ttf",
+        );
+
         const xiaolaiFont = Font.create(fs.readFileSync(xiaolaiPath), {
           type: "ttf",
         });
@@ -130,6 +143,10 @@ module.exports.woff2ServerPlugin = (options = {}) => {
           type: "ttf",
         });
 
+        const liberationFont = Font.create(fs.readFileSync(liberationPath), {
+          type: "ttf",
+        });
+
         const sortedFonts = Array.from(fonts.entries()).sort(
           ([family1], [family2]) => (family1 > family2 ? 1 : -1),
         );
@@ -141,13 +158,6 @@ module.exports.woff2ServerPlugin = (options = {}) => {
             continue;
           }
 
-          const fallbackFontsPaths = [];
-          const shouldIncludeXiaolaiFallback = family.includes("Excalifont");
-
-          if (shouldIncludeXiaolaiFallback) {
-            fallbackFontsPaths.push(xiaolaiPath);
-          }
-
           const baseFont = Regular[0];
           const tempPaths = Regular.map((_, index) =>
             path.resolve(outputDir, `temp_${family}_${index}.ttf`),
@@ -165,10 +175,18 @@ module.exports.woff2ServerPlugin = (options = {}) => {
 
           const mergedFontPath = path.resolve(outputDir, `${family}.ttf`);
 
+          const fallbackFontsPaths = [];
+          const shouldIncludeXiaolaiFallback = family.includes("Excalifont");
+
+          if (shouldIncludeXiaolaiFallback) {
+            fallbackFontsPaths.push(xiaolaiPath);
+          }
+
+          // add liberation as fallback to all fonts, so that unknown characters are rendered similarly to how browser renders them (Helvetica, Arial, etc.)
           if (baseFont.data.head.unitsPerEm === 2048) {
-            fallbackFontsPaths.push(emojiPath_2048);
+            fallbackFontsPaths.push(emojiPath_2048, liberationPath_2048);
           } else {
-            fallbackFontsPaths.push(emojiPath);
+            fallbackFontsPaths.push(emojiPath, liberationPath);
           }
 
           // drop Vertical related metrics, otherwise it does not allow us to merge the fonts
@@ -196,10 +214,12 @@ module.exports.woff2ServerPlugin = (options = {}) => {
             const base = baseFont.data.name[field];
             const xiaolai = xiaolaiFont.data.name[field];
             const emoji = emojiFont.data.name[field];
+            const liberation = liberationFont.data.name[field];
+            // liberation font
 
             return shouldIncludeXiaolaiFallback
-              ? `${base} & ${xiaolai} & ${emoji}`
-              : `${base} & ${emoji}`;
+              ? `${base} & ${xiaolai} & ${emoji} & ${liberation}`
+              : `${base} & ${emoji} & ${liberation}`;
           };
 
           mergedFont.set({