build: Welcome ESM and Bye Bye UMD (#7441)

* build: Welcome ESM and Bye Bye UMD

* remove package

* create unbundled esm build

* update script for example

* fix typo

* dummy commit

* update autorelease script to build esm

* revert dummy commit

* move react, react-dom and testing library to dev dependencies

* remove entry.js, publicPath and yarn install:deps script

* fix

* upgrade esbuild to fix glob import error for locales

* remove webpack chunk names as thats not needed anymore

* marking the code sideeffects free

* make the library tree-shakeable and move fonts to fonts directory

* allow side effects for css, scss files

* remove tree-shaking

* comment code for tree shaking

* move to vite for example

* bye bye webpack

* ignore ts

* separate build and output dir

* use esbuild for creating bundle for example

* update output dir

* lint

* create browser dev build with source maps and prod with minification

* add dev and prod builds for bundler

* lint

* update script

* remove await

* load prod build

* create minified build in dist

* prod and dev builds using export field

* remove import.meta

* dummy

* define import.meta prod and dev

* fix

* export types

* add types field

* typo

* lint

* Update scripts/buildPackage.js

* move types inside export

* newline

.github/workflows/lint.yml

@@ -16,7 +16,7 @@ jobs:
 
       - name: Install and lint
         run: |
-          yarn install:deps
+          yarn install
           yarn test:other
           yarn test:code
           yarn test:typecheck

.github/workflows/size-limit.yml

@@ -23,6 +23,6 @@ jobs:
       - uses: andresz1/size-limit-action@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          build_script: build:umd
+          build_script: build:esm
           skip_step: install
           directory: packages/excalidraw

.github/workflows/test-coverage-pr.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           node-version: "18.x"
       - name: "Install Deps"
-        run: yarn install:deps
+        run: yarn install
       - name: "Test Coverage"
         run: yarn test:coverage
       - name: "Report Coverage"

.github/workflows/test.yml

@@ -13,5 +13,5 @@ jobs:
           node-version: 18.x
       - name: Install and test
         run: |
-          yarn install:deps
+          yarn install
           yarn test:app

.gitignore

@@ -22,9 +22,6 @@ package-lock.json
 yarn-debug.log*
 yarn-error.log*
 packages/excalidraw/types
-packages/excalidraw/example/public/bundle.js
-packages/excalidraw/example/public/excalidraw-assets-dev
-packages/excalidraw/example/public/excalidraw.development.js
 coverage
 dev-dist
 html

excalidraw-app/collab/RoomDialog.scss

@@ -1,4 +1,4 @@
-@import "../../packages/excalidraw/css/variables.module";
+@import "../../packages/excalidraw/css/variables.module.scss";
 
 .excalidraw {
   .RoomDialog {

excalidraw-app/index.html

@@ -121,7 +121,7 @@
       crossorigin="anonymous"
     />
 
-    <link rel="stylesheet" href="/fonts.css" type="text/css" />
+    <link rel="stylesheet" href="/fonts/fonts.css" type="text/css" />
     <% if ("%VITE_APP_DEV_DISABLE_LIVE_RELOAD%"==="true" ) { %>
     <script>
       {

excalidraw-app/package.json

@@ -21,9 +21,7 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "dependencies": {
+  "dependencies": {},
-    "packages/excalidraw": "*"
-  },
   "homepage": ".",
   "name": "excalidraw-app",
   "prettier": "@excalidraw/prettier-config",

package.json

@@ -65,7 +65,6 @@
     "fix:code": "yarn test:code --fix",
     "fix:other": "yarn prettier --write",
     "fix": "yarn fix:other && yarn fix:code",
-    "install:deps": "yarn install --frozen-lockfile && yarn --frozen-lockfile --cwd ./excalidraw-app",
     "locales-coverage": "node scripts/build-locales-coverage.js",
     "locales-coverage:description": "node scripts/locales-coverage-description.js",
     "prepare": "husky install",

packages/excalidraw/.gitignore

@@ -1,4 +1,4 @@
 node_modules
-dist
-example
 types
+bundle.js
+bundle.css

packages/excalidraw/components/App.tsx

@@ -594,7 +594,6 @@ class App extends React.Component<AppProps, AppState> {
     };
 
     this.id = nanoid();
-
     this.library = new Library(this);
     this.actionManager = new ActionManager(
       this.syncActionResult,

packages/excalidraw/components/Avatar.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .Avatar {

packages/excalidraw/components/Card.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .Card {

packages/excalidraw/components/CheckboxItem.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .Checkbox {

packages/excalidraw/components/ColorPicker/ColorPicker.scss

@@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";
 
 .excalidraw {
   .focus-visible-none {

packages/excalidraw/components/ConfirmDialog.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .confirm-dialog {

packages/excalidraw/components/ContextMenu.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .context-menu {

packages/excalidraw/components/Dialog.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .Dialog {

packages/excalidraw/components/ExportDialog.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .ExportDialog__preview {

packages/excalidraw/components/FilledButton.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .ExcButton {

packages/excalidraw/components/FixedSideContainer.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .FixedSideContainer {

packages/excalidraw/components/HelpDialog.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .HelpDialog {

packages/excalidraw/components/HintViewer.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 // this is loosely based on the longest hint text
 $wide-viewport-width: 1000px;

packages/excalidraw/components/IconPicker.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .picker-container {

packages/excalidraw/components/ImageExportDialog.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   --ImageExportModal-preview-border: #d6d6d6;

packages/excalidraw/components/LayerUI.scss

@@ -1,5 +1,5 @@
 @import "open-color/open-color";
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .layer-ui__wrapper.animate {

packages/excalidraw/components/LibraryUnit.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .library-unit {

packages/excalidraw/components/Modal.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   &.excalidraw-modal-container {

packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.scss

@@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";
 
 .excalidraw {
   .OverwriteConfirm {

packages/excalidraw/components/PasteChartDialog.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .PasteChartDialog {

packages/excalidraw/components/PublishLibrary.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .publish-library {

packages/excalidraw/components/RadioGroup.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   --RadioGroup-background: var(--island-bg-color);

packages/excalidraw/components/ShareableLinkDialog.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .ShareableLinkDialog {

packages/excalidraw/components/Sidebar/Sidebar.scss

@@ -1,5 +1,5 @@
 @import "open-color/open-color";
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";
 
 .excalidraw {
   .sidebar {

packages/excalidraw/components/Sidebar/SidebarTrigger.scss

@@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";
 
 .excalidraw {
   .sidebar-trigger {

packages/excalidraw/components/Stats.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .Stats {

packages/excalidraw/components/Switch.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   --Switch-disabled-color: var(--color-border-outline);

packages/excalidraw/components/TTDDialog/TTDDialog.scss

@@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";
 
 $verticalBreakpoint: 861px;
 

packages/excalidraw/components/TTDDialog/TTDDialog.tsx

@@ -207,9 +207,7 @@ export const TTDDialogBase = withInternalFallback(
     const [mermaidToExcalidrawLib, setMermaidToExcalidrawLib] =
       useState<MermaidToExcalidrawLibProps>({
         loaded: false,
-        api: import(
+        api: import("@excalidraw/mermaid-to-excalidraw"),
-          /* webpackChunkName:"mermaid-to-excalidraw" */ "@excalidraw/mermaid-to-excalidraw"
-        ),
       });
 
     useEffect(() => {

packages/excalidraw/components/TextField.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   --ExcTextField--color: var(--color-on-surface);

packages/excalidraw/components/TextInput.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .TextInput {

packages/excalidraw/components/Toast.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .Toast {

packages/excalidraw/components/ToolIcon.scss

@@ -1,5 +1,5 @@
 @import "open-color/open-color.scss";
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .ToolIcon {

packages/excalidraw/components/Toolbar.scss

@@ -1,5 +1,5 @@
 @import "open-color/open-color.scss";
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   .App-toolbar {

packages/excalidraw/components/Tooltip.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 // container in body where the actual tooltip is appended to
 .excalidraw-tooltip {

packages/excalidraw/components/dropdownMenu/DropdownMenu.scss

@@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";
 
 .excalidraw {
   .dropdown-menu {

packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.scss

@@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";
 
 .excalidraw {
   .collab-button {

packages/excalidraw/css/styles.scss

@@ -1,4 +1,4 @@
-@import "./variables.module";
+@import "./variables.module.scss";
 @import "./theme";
 
 :root {

packages/excalidraw/data/blob.ts

@@ -19,9 +19,7 @@ const parseFileContents = async (blob: Blob | File) => {
 
   if (blob.type === MIME_TYPES.png) {
     try {
-      return await (
+      return await (await import("./image")).decodePngMetadata(blob);
-        await import(/* webpackChunkName: "image" */ "./image")
-      ).decodePngMetadata(blob);
     } catch (error: any) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -49,7 +47,7 @@ const parseFileContents = async (blob: Blob | File) => {
     if (blob.type === MIME_TYPES.svg) {
       try {
         return await (
-          await import(/* webpackChunkName: "image" */ "./image")
+          await import("./image")
         ).decodeSvgMetadata({
           svg: contents,
         });

packages/excalidraw/data/index.ts

@@ -144,7 +144,7 @@ export const exportCanvas = async (
     let blob = await canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = await (
-        await import(/* webpackChunkName: "image" */ "./image")
+        await import("./image")
       ).encodePngMetadata({
         blob,
         metadata: serializeAsJSON(elements, appState, files, "local"),

packages/excalidraw/element/Hyperlink.scss

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw-hyperlinkContainer {
   display: flex;

packages/excalidraw/entry.js

@@ -1,7 +0,0 @@
-import "./publicPath";
-import polyfill from "./polyfill";
-
-import "../../public/fonts.css";
-
-polyfill();
-export * from "./index";

packages/excalidraw/example/App.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useState, useRef, useCallback } from "react";
-
 import ExampleSidebar from "./sidebar/ExampleSidebar";
 
 import type * as TExcalidraw from "../index";
@@ -17,7 +15,7 @@ import { EVENT, ROUNDNESS } from "../constants";
 import { distance2d } from "../math";
 import { fileOpen } from "../data/filesystem";
 import { loadSceneOrLibraryFromBlob } from "../../utils";
-import {
+import type {
   AppState,
   BinaryFileData,
   ExcalidrawImperativeAPI,
@@ -26,7 +24,7 @@ import {
   LibraryItems,
   PointerDownState as ExcalidrawPointerDownState,
 } from "../types";
-import { NonDeletedExcalidrawElement, Theme } from "../element/types";
+import type { NonDeletedExcalidrawElement, Theme } from "../element/types";
 import { ImportedLibraryData } from "../data/types";
 import CustomFooter from "./CustomFooter";
 import MobileFooter from "./MobileFooter";
@@ -57,6 +55,8 @@ type PointerDownState = {
   };
 };
 
+const { useEffect, useState, useRef, useCallback } = window.React;
+
 // This is so that we use the bundled excalidraw.development.js file instead
 // of the actual source code
 const {
@@ -89,7 +89,6 @@ export interface AppProps {
   useCustom: (api: ExcalidrawImperativeAPI | null, customArgs?: any[]) => void;
   customArgs?: any[];
 }
-
 export default function App({ appTitle, useCustom, customArgs }: AppProps) {
   const appRef = useRef<any>(null);
   const [viewModeEnabled, setViewModeEnabled] = useState(false);

packages/excalidraw/example/CustomFooter.tsx

@@ -1,7 +1,6 @@
-import { ExcalidrawImperativeAPI } from "../types";
+import type { ExcalidrawImperativeAPI } from "../types";
-import { MIME_TYPES } from "../entry";
-import { Button } from "../components/Button";
 
+const { Button, MIME_TYPES } = window.ExcalidrawLib;
 const COMMENT_SVG = (
   <svg
     xmlns="http://www.w3.org/2000/svg"

packages/excalidraw/example/MobileFooter.tsx

@@ -1,4 +1,4 @@
-import { ExcalidrawImperativeAPI } from "../types";
+import type { ExcalidrawImperativeAPI } from "../types";
 import CustomFooter from "./CustomFooter";
 const { useDevice, Footer } = window.ExcalidrawLib;
 

packages/excalidraw/example/index.tsx

@@ -1,8 +1,9 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
 import App from "./App";
 
+const { StrictMode } = window.React;
+//@ts-ignore
+const { createRoot } = window.ReactDOM;
+
 const rootElement = document.getElementById("root")!;
 const root = createRoot(rootElement);
 

packages/excalidraw/example/initialData.tsx

@@ -1,5 +1,5 @@
-import { ExcalidrawElementSkeleton } from "../data/transform";
+import type { ExcalidrawElementSkeleton } from "../data/transform";
-import { FileId } from "../element/types";
+import type { FileId } from "../element/types";
 
 const elements: ExcalidrawElementSkeleton[] = [
   {

packages/excalidraw/example/public/index.html

@@ -12,6 +12,8 @@
     <script>
       window.name = "codesandbox";
     </script>
+    <link rel="stylesheet" href="/dist/browser/dev/index.css" />
+    <link rel="stylesheet" href="bundle.css" />
   </head>
 
   <body>
@@ -19,11 +21,12 @@
     <div id="root"></div>
     <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
-
     <!-- This is so that we use the bundled excalidraw.development.js file instead
     of the actual source code -->
-    <script src="./excalidraw.development.js"></script>
+    <script type="module">
-
+      import * as ExcalidrawLib from "/dist/browser/dev/index.js";
-    <script src="./bundle.js"></script>
+      window.ExcalidrawLib = ExcalidrawLib;
+    </script>
+    <script type="module" src="bundle.js"></script>
   </body>
 </html>

packages/excalidraw/example/sidebar/ExampleSidebar.tsx

@@ -1,7 +1,9 @@
-import React, { useState } from "react";
 import "./ExampleSidebar.scss";
+
+const React = window.React;
+
 export default function Sidebar({ children }: { children: React.ReactNode }) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = React.useState(false);
 
   return (
     <>

packages/excalidraw/i18n.ts

@@ -96,9 +96,7 @@ export const setLanguage = async (lang: Language) => {
     currentLangData = {};
   } else {
     try {
-      currentLangData = await import(
+      currentLangData = await import(`./locales/${currentLang.code}.json`);
-        /* webpackChunkName: "locales/[request]" */ `./locales/${currentLang.code}.json`
-      );
     } catch (error: any) {
       console.error(`Failed to load language ${lang.code}:`, error.message);
       currentLangData = fallbackLangData;

packages/excalidraw/index.tsx

@@ -5,6 +5,8 @@ import { isShallowEqual } from "./utils";
 
 import "./css/app.scss";
 import "./css/styles.scss";
+import "../../public/fonts/fonts.css";
+import polyfill from "./polyfill";
 
 import { AppProps, ExcalidrawProps } from "./types";
 import { defaultLang } from "./i18n";
@@ -16,6 +18,8 @@ import MainMenu from "./components/main-menu/MainMenu";
 import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";
 import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollaborationTrigger";
 
+polyfill();
+
 const ExcalidrawBase = (props: ExcalidrawProps) => {
   const {
     onChange,

packages/excalidraw/main.js

@@ -1,11 +1,5 @@
-if (process.env.IS_PREACT === "true") {
+if (process.env.NODE_ENV !== "development") {
-  if (process.env.NODE_ENV === "production") {
+  import("./dist/dev/index.js");
-    module.exports = require("./dist/excalidraw-with-preact.production.min.js");
-  } else {
-    module.exports = require("./dist/excalidraw-with-preact.development.js");
-  }
-} else if (process.env.NODE_ENV === "production") {
-  module.exports = require("./dist/excalidraw.production.min.js");
 } else {
-  module.exports = require("./dist/excalidraw.development.js");
+  import("./dist/prod/index.js");
 }

packages/excalidraw/package.json

@@ -1,11 +1,23 @@
 {
   "name": "@excalidraw/excalidraw",
   "version": "0.17.1",
-  "main": "main.js",
+  "main": "./dist/prod/index.js",
-  "types": "types/excalidraw/index.d.ts",
+  "type": "module",
+  "module": "./dist/prod/index.js",
+  "exports": {
+    ".": {
+      "development": "./dist/dev/index.js",
+      "default": "./dist/prod/index.js",
+      "types": "./dist/excalidraw/index.d.ts"
+    },
+    "./index.css": {
+      "development": "./dist/dev/index.css",
+      "default": "./dist/prod/index.css"
+    }
+  },
+  "types": "./dist/excalidraw/index.d.ts",
   "files": [
-    "dist/*",
+    "dist/*"
-    "types/*"
   ],
   "publishConfig": {
     "access": "public"
@@ -50,15 +62,11 @@
     "@excalidraw/random-username": "1.1.0",
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-tabs": "1.0.2",
-    "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.5",
     "@tldraw/vec": "1.7.1",
     "browser-fs-access": "0.29.1",
     "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
-    "eslint-plugin-react": "7.32.2",
-    "fake-indexeddb": "3.1.7",
     "image-blob-reduce": "3.0.1",
     "jotai": "1.13.1",
     "lodash.throttle": "4.1.1",
@@ -95,30 +103,32 @@
     "cross-env": "7.0.3",
     "css-loader": "6.7.1",
     "dotenv": "16.0.1",
+    "esbuild": "0.19.10",
+    "esbuild-plugin-external-global": "1.0.1",
+    "esbuild-sass-plugin": "2.16.0",
+    "eslint-plugin-react": "7.32.2",
+    "fake-indexeddb": "3.1.7",
     "import-meta-loader": "1.1.0",
     "mini-css-extract-plugin": "2.6.1",
     "postcss-loader": "7.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "sass-loader": "13.0.2",
     "size-limit": "9.0.0",
     "style-loader": "3.3.3",
-    "terser-webpack-plugin": "5.3.3",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.5",
     "ts-loader": "9.3.1",
-    "typescript": "4.9.4",
+    "typescript": "4.9.4"
-    "webpack": "5.76.0",
-    "webpack-bundle-analyzer": "4.5.0",
-    "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.9.3",
-    "webpack-merge": "5.8.0"
   },
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
   "homepage": "https://github.com/excalidraw/excalidraw/tree/master/packages/excalidraw",
   "scripts": {
-    "gen:types": "tsc --project tsconfig-types.json",
+    "gen:types": "rm -rf types && tsc",
-    "build:umd": "rm -rf dist && cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && cross-env NODE_ENV=development webpack --config webpack.preact.config.js && cross-env NODE_ENV=production webpack --config webpack.preact.config.js && yarn gen:types",
+    "build:esm": "rm -rf dist && node ../../scripts/buildPackage.js && yarn gen:types",
-    "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
     "pack": "yarn build:umd && yarn pack",
-    "start": "webpack serve --config webpack.dev-server.config.js",
+    "start": "node ../../scripts/buildExample.mjs && vite",
-    "build:example": "EXAMPLE=true webpack --config webpack.dev-server.config.js && yarn gen:types",
+    "build:example": "node ../../scripts/buildExample.mjs",
     "size": "yarn build:umd && size-limit"
   }
 }

packages/excalidraw/publicPath.js

@@ -1,8 +0,0 @@
-import { ENV } from "./constants";
-if (process.env.NODE_ENV !== ENV.TEST) {
-  /* eslint-disable */
-  /* global __webpack_public_path__:writable */
-  __webpack_public_path__ =
-    window.EXCALIDRAW_ASSET_PATH ||
-    `https://unpkg.com/${process.env.VITE_PKG_NAME}@${process.env.VITE_PKG_VERSION}/dist/`;
-}

packages/excalidraw/scene/export.ts

@@ -327,7 +327,7 @@ export const exportToSvg = async (
   if (exportEmbedScene) {
     try {
       metadata = await (
-        await import(/* webpackChunkName: "image" */ "../data/image")
+        await import("../data/image")
       ).encodeSvgMetadata({
         // when embedding scene, we want to embed the origionally supplied
         // elements which don't contain the temp frame labels.

packages/excalidraw/tests/flip.test.tsx

@@ -198,7 +198,6 @@ const checkElementsBoundingBox = async (
 
   const [x12, y12, x22, y22] = getElementAbsoluteCoords(element2);
 
-  debugger;
   await waitFor(() => {
     // Check if width and height did not change
     expect(x2 - x1).toBeCloseTo(x22 - x12, -1);

packages/excalidraw/tests/shortcuts.test.tsx

@@ -1,5 +1,5 @@
 import { KEYS } from "../keys";
-import { Excalidraw } from "../entry";
+import { Excalidraw } from "../index";
 import { API } from "./helpers/api";
 import { Keyboard } from "./helpers/ui";
 import { fireEvent, render, waitFor } from "./test-utils";

packages/excalidraw/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "exclude": ["**/*.test.*", "tests", "types", "example", "dist"],
+  "compilerOptions": {
+    "target": "ESNext",
+    "strict": true,
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "declaration": true,
+    "allowSyntheticDefaultImports": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "jsx": "react-jsx"
+  }
+}

packages/excalidraw/vite.config.mts

@@ -0,0 +1,15 @@
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+
+// To load .env.local variables
+const envVars = loadEnv("", `../../`);
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: "example/public",
+  server: {
+    port: 3001,
+    // open the browser
+    open: true,
+  },
+  publicDir: "public",
+});

packages/excalidraw/webpack.dev-server.config.js

@@ -1,28 +0,0 @@
-const path = require("path");
-const { merge } = require("webpack-merge");
-
-const devConfig = require("./webpack.dev.config");
-
-const devServerConfig = {
-  entry: {
-    bundle: "./example/index.tsx",
-  },
-  // Server Configuration options
-  devServer: {
-    port: 3001,
-    host: "localhost",
-    hot: true,
-    compress: true,
-    static: {
-      directory: path.join(__dirname, "./example/public"),
-    },
-    client: {
-      progress: true,
-      logging: "info",
-      overlay: true, //Shows a full-screen overlay in the browser when there are compiler errors or warnings.
-    },
-    open: ["./"],
-  },
-};
-
-module.exports = merge(devServerConfig, devConfig);

packages/excalidraw/webpack.dev.config.js

@@ -1,108 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-const autoprefixer = require("autoprefixer");
-const { parseEnvVariables } = require("./env");
-const outputDir = process.env.EXAMPLE === "true" ? "example/public" : "dist";
-
-module.exports = {
-  mode: "development",
-  devtool: false,
-  entry: {
-    "excalidraw.development": "./entry.js",
-  },
-  output: {
-    path: path.resolve(__dirname, outputDir),
-    library: "ExcalidrawLib",
-    libraryTarget: "umd",
-    filename: "[name].js",
-    chunkFilename: "excalidraw-assets-dev/[name]-[contenthash].js",
-    assetModuleFilename: "excalidraw-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",
-        ],
-      },
-      // So that type module works with webpack
-      // https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
-      {
-        test: /\.m?js/,
-        resolve: {
-          fullySpecified: false,
-        },
-      },
-      {
-        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",
-    },
-  },
-};

packages/excalidraw/webpack.preact.config.js

@@ -1,32 +0,0 @@
-const prodConfig = require("./webpack.prod.config");
-const devConfig = require("./webpack.dev.config");
-
-const isProd = process.env.NODE_ENV === "production";
-
-const config = isProd ? prodConfig : devConfig;
-const outputFile = isProd
-  ? "excalidraw-with-preact.production.min"
-  : "excalidraw-with-preact.development";
-
-const preactWebpackConfig = {
-  ...config,
-  entry: {
-    [outputFile]: "./entry.js",
-  },
-  externals: {
-    ...config.externals,
-    "react-dom/client": {
-      root: "ReactDOMClient",
-      commonjs2: "react-dom/client",
-      commonjs: "react-dom/client",
-      amd: "react-dom/client",
-    },
-    "react/jsx-runtime": {
-      root: "ReactJSXRuntime",
-      commonjs2: "react/jsx-runtime",
-      commonjs: "react/jsx-runtime",
-      amd: "react/jsx-runtime",
-    },
-  },
-};
-module.exports = preactWebpackConfig;

packages/excalidraw/webpack.prod.config.js

@@ -1,131 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-const autoprefixer = require("autoprefixer");
-const { parseEnvVariables } = require("./env");
-const TerserPlugin = require("terser-webpack-plugin");
-const BundleAnalyzerPlugin =
-  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
-
-module.exports = {
-  mode: "production",
-  entry: {
-    "excalidraw.production.min": "./entry.js",
-  },
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    library: "ExcalidrawLib",
-    libraryTarget: "umd",
-    filename: "[name].js",
-    chunkFilename: "excalidraw-assets/[name]-[contenthash].js",
-    assetModuleFilename: "excalidraw-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",
-        ],
-      },
-      // So that type module works with webpack
-      // https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
-      {
-        test: /\.m?js/,
-        resolve: {
-          fullySpecified: false,
-        },
-      },
-      {
-        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",
-    },
-  },
-};

scripts/autorelease.js

@@ -16,8 +16,7 @@ const publish = () => {
 
   try {
     execSync(`yarn  --frozen-lockfile`);
-    execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
+    execSync(`yarn run build:esm`, { cwd: excalidrawDir });
-    execSync(`yarn run build:umd`, { cwd: excalidrawDir });
     execSync(`yarn --cwd ${excalidrawDir} publish --tag ${tag}`);
     console.info(`Published ${pkg.name}@${tag}🎉`);
     core.setOutput(
@@ -41,7 +40,10 @@ exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
   const changedFiles = stdout.trim().split("\n");
 
   const excalidrawPackageFiles = changedFiles.filter((file) => {
-    return file.indexOf("packages/excalidraw") >= 0;
+    return (
+      file.indexOf("packages/excalidraw") >= 0 ||
+      file.indexOf("buildPackage.js") > 0
+    );
   });
   if (!excalidrawPackageFiles.length) {
     console.info("Skipping release as no valid diff found");

scripts/buildExample.mjs

@@ -0,0 +1,35 @@
+import * as esbuild from "esbuild";
+import { sassPlugin } from "esbuild-sass-plugin";
+import { execSync } from "child_process";
+
+const createDevBuild = async () => {
+  return await esbuild.build({
+    entryPoints: ["example/index.tsx"],
+    outfile: "example/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 example/public/dist && yarn build:esm && cp -r dist example/public`,
+);
+
+const ctx = await createDevBuild();
+
+// await startServer(ctx);
+// console.info("Hosted at port http://localhost:5001!!");

scripts/buildPackage.js

@@ -0,0 +1,135 @@
+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");
+
+// 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;
+//     }
+
+//     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"],
+  bundle: true,
+  format: "esm",
+  plugins: [
+    sassPlugin(),
+    externalGlobalPlugin({
+      react: "React",
+      "react-dom": "ReactDOM",
+    }),
+  ],
+  splitting: true,
+  loader: {
+    ".woff2": "copy",
+    ".ttf": "copy",
+  },
+};
+const createESMBrowserBuild = async () => {
+  // Development unminified build with source maps
+  await build({
+    ...browserConfig,
+    outdir: "dist/browser/dev",
+    sourcemap: true,
+    chunkNames: "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]",
+    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 rawConfig = {
+  entryPoints: ["index.tsx"],
+  bundle: true,
+  format: "esm",
+  plugins: [sassPlugin()],
+
+  loader: {
+    ".woff2": "copy",
+    ".ttf": "copy",
+    ".json": "copy",
+  },
+  packages: "external",
+};
+
+const createESMRawBuild = async () => {
+  // Development unminified build with source maps
+  await build({
+    ...rawConfig,
+    sourcemap: true,
+    outdir: "dist/dev",
+    define: {
+      "import.meta.env": JSON.stringify({ DEV: true }),
+    },
+  });
+
+  // production minified build without sourcemaps
+  await build({
+    ...rawConfig,
+    minify: true,
+    outdir: "dist/prod",
+    define: {
+      "import.meta.env": JSON.stringify({ PROD: true }),
+    },
+  });
+};
+
+createESMRawBuild();
+createESMBrowserBuild();