extras
/
excalidraw
mirror of https://github.com/excalidraw/excalidraw.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Aakansha Doshi 2024-01-01 20:18:44 +05:30 committed by GitHub
parent e6c3c06c2e
commit a8064ba3ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
88 changed files with 511 additions and 1335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/lint.yml vendored
View File

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

2
.github/workflows/size-limit.yml vendored
View File

@ -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

2
.github/workflows/test-coverage-pr.yml vendored
View File

@ -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"

2
.github/workflows/test.yml vendored
View File

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

3
.gitignore vendored
View File

@ -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

2
excalidraw-app/collab/RoomDialog.scss
View File

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

2
excalidraw-app/index.html
View File

@ -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>
{

4
excalidraw-app/package.json
View File

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

1
package.json
View File

@ -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",

4
packages/excalidraw/.gitignore vendored
View File

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

1
packages/excalidraw/components/App.tsx
View File

@ -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,

2
packages/excalidraw/components/Avatar.scss
View File

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

2
packages/excalidraw/components/Card.scss
View File

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

2
packages/excalidraw/components/CheckboxItem.scss
View File

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

2
packages/excalidraw/components/ColorPicker/ColorPicker.scss
View File

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

2
packages/excalidraw/components/ConfirmDialog.scss
View File

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

2
packages/excalidraw/components/ContextMenu.scss
View File

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

2
packages/excalidraw/components/Dialog.scss
View File

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

2
packages/excalidraw/components/ExportDialog.scss
View File

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

2
packages/excalidraw/components/FilledButton.scss
View File

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

2
packages/excalidraw/components/FixedSideContainer.scss
View File

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

2
packages/excalidraw/components/HelpDialog.scss
View File

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

2
packages/excalidraw/components/HintViewer.scss
View File

@ -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;

2
packages/excalidraw/components/IconPicker.scss
View File

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

2
packages/excalidraw/components/ImageExportDialog.scss
View File

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

2
packages/excalidraw/components/LayerUI.scss
View File

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

2
packages/excalidraw/components/LibraryUnit.scss
View File

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

2
packages/excalidraw/components/Modal.scss
View File

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

2
packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.scss
View File

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

2
packages/excalidraw/components/PasteChartDialog.scss
View File

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

2
packages/excalidraw/components/PublishLibrary.scss
View File

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

2
packages/excalidraw/components/RadioGroup.scss
View File

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

2
packages/excalidraw/components/ShareableLinkDialog.scss
View File

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

2
packages/excalidraw/components/Sidebar/Sidebar.scss
View File

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

2
packages/excalidraw/components/Sidebar/SidebarTrigger.scss
View File

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

2
packages/excalidraw/components/Stats.scss
View File

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

2
packages/excalidraw/components/Switch.scss
View File

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

2
packages/excalidraw/components/TTDDialog/TTDDialog.scss
View File

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

4
packages/excalidraw/components/TTDDialog/TTDDialog.tsx
View File

@ -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(() => {

2
packages/excalidraw/components/TextField.scss
View File

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

2
packages/excalidraw/components/TextInput.scss
View File

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

2
packages/excalidraw/components/Toast.scss
View File

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

2
packages/excalidraw/components/ToolIcon.scss
View File

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

2
packages/excalidraw/components/Toolbar.scss
View File

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

2
packages/excalidraw/components/Tooltip.scss
View File

@ -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 {

2
packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
View File

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

2
packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.scss
View File

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

2
packages/excalidraw/css/styles.scss
View File

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

6
packages/excalidraw/data/blob.ts
View File

@ -19,9 +19,7 @@ const parseFileContents = async (blob: Blob | File) => {
if (blob.type === MIME_TYPES.png) {
try {
return await (
await import(/* webpackChunkName: "image" */ "./image")
).decodePngMetadata(blob);
return await (await import("./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,
});

2
packages/excalidraw/data/index.ts
View File

@ -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"),

2
packages/excalidraw/element/Hyperlink.scss
View File

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

7
packages/excalidraw/entry.js
View File

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

0
packages/excalidraw/env.js → packages/excalidraw/env.cjs
View File

9
packages/excalidraw/example/App.tsx
View File

@ -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);

5
packages/excalidraw/example/CustomFooter.tsx
View File

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

2
packages/excalidraw/example/MobileFooter.tsx
View File

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

7
packages/excalidraw/example/index.tsx
View File

@ -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);

4
packages/excalidraw/example/initialData.tsx
View File

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

11
packages/excalidraw/example/public/index.html
View File

@ -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 src="./bundle.js"></script>
<script type="module">
import * as ExcalidrawLib from "/dist/browser/dev/index.js";
window.ExcalidrawLib = ExcalidrawLib;
</script>
<script type="module" src="bundle.js"></script>
</body>
</html>

6
packages/excalidraw/example/sidebar/ExampleSidebar.tsx
View File

@ -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 (
<>

4
packages/excalidraw/i18n.ts
View File

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

4
packages/excalidraw/index.tsx
View File

@ -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,

12
packages/excalidraw/main.js
View File

@ -1,11 +1,5 @@
if (process.env.IS_PREACT === "true") {
if (process.env.NODE_ENV === "production") {
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");
if (process.env.NODE_ENV !== "development") {
import("./dist/dev/index.js");
} else {
module.exports = require("./dist/excalidraw.development.js");
import("./dist/prod/index.js");
}

50
packages/excalidraw/package.json
View File

@ -1,11 +1,23 @@
{
"name": "@excalidraw/excalidraw",
"version": "0.17.1",
"main": "main.js",
"types": "types/excalidraw/index.d.ts",
"main": "./dist/prod/index.js",
"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/*",
"types/*"
"dist/*"
],
"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",
"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"
"typescript": "4.9.4"
},
"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",
"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:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
"gen:types": "rm -rf types && tsc",
"build:esm": "rm -rf dist && node ../../scripts/buildPackage.js && yarn gen:types",
"pack": "yarn build:umd && yarn pack",
"start": "webpack serve --config webpack.dev-server.config.js",
"build:example": "EXAMPLE=true webpack --config webpack.dev-server.config.js && yarn gen:types",
"start": "node ../../scripts/buildExample.mjs && vite",
"build:example": "node ../../scripts/buildExample.mjs",
"size": "yarn build:umd && size-limit"
}
}

8
packages/excalidraw/publicPath.js
View File

@ -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/`;
}

2
packages/excalidraw/scene/export.ts
View File

@ -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.

1
packages/excalidraw/tests/flip.test.tsx
View File

@ -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);

2
packages/excalidraw/tests/shortcuts.test.tsx
View File

@ -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";

15
packages/excalidraw/tsconfig.json Normal file
View File

@ -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"
}
}

15
packages/excalidraw/vite.config.mts Normal file
View File

@ -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",
});

28
packages/excalidraw/webpack.dev-server.config.js
View File

@ -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);

108
packages/excalidraw/webpack.dev.config.js
View File

@ -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",
},
},
};

32
packages/excalidraw/webpack.preact.config.js
View File

@ -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;

131
packages/excalidraw/webpack.prod.config.js
View File

@ -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",
},
},
};

0
public/Assistant-Bold.woff2 → public/fonts/Assistant-Bold.woff2
View File

0
public/Assistant-Medium.woff2 → public/fonts/Assistant-Medium.woff2
View File

0
public/Assistant-Regular.woff2 → public/fonts/Assistant-Regular.woff2
View File

0
public/Assistant-SemiBold.woff2 → public/fonts/Assistant-SemiBold.woff2
View File

0
public/Cascadia.ttf → public/fonts/Cascadia.ttf
View File

0
public/Cascadia.woff2 → public/fonts/Cascadia.woff2
View File

0
public/FG_Virgil.ttf → public/fonts/FG_Virgil.ttf
View File

0
public/FG_Virgil.woff2 → public/fonts/FG_Virgil.woff2
View File

0
public/Virgil.woff2 → public/fonts/Virgil.woff2
View File

0
public/fonts.css → public/fonts/fonts.css
View File

8
scripts/autorelease.js
View File

@ -16,8 +16,7 @@ const publish = () => {
try {
execSync(`yarn --frozen-lockfile`);
execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
execSync(`yarn run build:umd`, { cwd: excalidrawDir });
execSync(`yarn run build:esm`, { 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");

35
scripts/buildExample.mjs Normal file
View File

@ -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!!");

135
scripts/buildPackage.js Normal file
View File

@ -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();

1094
yarn.lock
View File

File diff suppressed because it is too large Load Diff