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
2025-05-03 10:00:07 -04:00 · 2024-01-01 20:18:44 +05:30 · 2024-01-01 20:18:44 +05:30 · a8064ba3ee
commit a8064ba3ee
parent e6c3c06c2e
88 changed files with 511 additions and 1335 deletions
--- a/packages/excalidraw/components/App.tsx
+++ b/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,
--- a/packages/excalidraw/components/Avatar.scss
+++ b/packages/excalidraw/components/Avatar.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .Avatar {
--- a/packages/excalidraw/components/Card.scss
+++ b/packages/excalidraw/components/Card.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .Card {
--- a/packages/excalidraw/components/CheckboxItem.scss
+++ b/packages/excalidraw/components/CheckboxItem.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .Checkbox {
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.scss
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";

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

 .excalidraw {
  .confirm-dialog {
--- a/packages/excalidraw/components/ContextMenu.scss
+++ b/packages/excalidraw/components/ContextMenu.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .context-menu {
--- a/packages/excalidraw/components/Dialog.scss
+++ b/packages/excalidraw/components/Dialog.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .Dialog {
--- a/packages/excalidraw/components/ExportDialog.scss
+++ b/packages/excalidraw/components/ExportDialog.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .ExportDialog__preview {
--- a/packages/excalidraw/components/FilledButton.scss
+++ b/packages/excalidraw/components/FilledButton.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .ExcButton {
--- a/packages/excalidraw/components/FixedSideContainer.scss
+++ b/packages/excalidraw/components/FixedSideContainer.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .FixedSideContainer {
--- a/packages/excalidraw/components/HelpDialog.scss
+++ b/packages/excalidraw/components/HelpDialog.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .HelpDialog {
--- a/packages/excalidraw/components/HintViewer.scss
+++ b/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;
--- a/packages/excalidraw/components/IconPicker.scss
+++ b/packages/excalidraw/components/IconPicker.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .picker-container {
--- a/packages/excalidraw/components/ImageExportDialog.scss
+++ b/packages/excalidraw/components/ImageExportDialog.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  --ImageExportModal-preview-border: #d6d6d6;
--- a/packages/excalidraw/components/LayerUI.scss
+++ b/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 {
--- a/packages/excalidraw/components/LibraryUnit.scss
+++ b/packages/excalidraw/components/LibraryUnit.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .library-unit {
--- a/packages/excalidraw/components/Modal.scss
+++ b/packages/excalidraw/components/Modal.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

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

 .excalidraw {
  .OverwriteConfirm {
--- a/packages/excalidraw/components/PasteChartDialog.scss
+++ b/packages/excalidraw/components/PasteChartDialog.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .PasteChartDialog {
--- a/packages/excalidraw/components/PublishLibrary.scss
+++ b/packages/excalidraw/components/PublishLibrary.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .publish-library {
--- a/packages/excalidraw/components/RadioGroup.scss
+++ b/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);
--- a/packages/excalidraw/components/ShareableLinkDialog.scss
+++ b/packages/excalidraw/components/ShareableLinkDialog.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .ShareableLinkDialog {
--- a/packages/excalidraw/components/Sidebar/Sidebar.scss
+++ b/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 {
--- a/packages/excalidraw/components/Sidebar/SidebarTrigger.scss
+++ b/packages/excalidraw/components/Sidebar/SidebarTrigger.scss
@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";

 .excalidraw {
  .sidebar-trigger {
--- a/packages/excalidraw/components/Stats.scss
+++ b/packages/excalidraw/components/Stats.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .Stats {
--- a/packages/excalidraw/components/Switch.scss
+++ b/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);
--- a/packages/excalidraw/components/TTDDialog/TTDDialog.scss
+++ b/packages/excalidraw/components/TTDDialog/TTDDialog.scss
@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";

 $verticalBreakpoint: 861px;

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

    useEffect(() => {
--- a/packages/excalidraw/components/TextField.scss
+++ b/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);
--- a/packages/excalidraw/components/TextInput.scss
+++ b/packages/excalidraw/components/TextInput.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .TextInput {
--- a/packages/excalidraw/components/Toast.scss
+++ b/packages/excalidraw/components/Toast.scss
@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";

 .excalidraw {
  .Toast {
--- a/packages/excalidraw/components/ToolIcon.scss
+++ b/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 {
--- a/packages/excalidraw/components/Toolbar.scss
+++ b/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 {
--- a/packages/excalidraw/components/Tooltip.scss
+++ b/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 {
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";

 .excalidraw {
  .dropdown-menu {
--- a/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.scss
+++ b/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.scss
@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/variables.module.scss";

 .excalidraw {
  .collab-button {