chore: Drop `@excalidraw/extensions` and move the MathJax subtype into

`src/excalidraw-app/subtypes` to leave `@excalidraw/excalidraw` untouched.

`@excalidraw/extensions` mostly contained boilerplate and obscured the
main new features here: `ExcalidrawElement` subtypes and MathJax support.
danieljgeiger-mathjax-4.0-beta-test
Daniel J. Geiger 2 years ago
parent e8a6053251
commit 23eb08088e

@ -138,7 +138,6 @@
<% } %>
<script>
window.EXCALIDRAW_ASSET_PATH = "/";
window.EXCALIDRAW_EXTENSIONS_ASSET_PATH = "/";
// setting this so that libraries installation reuses this window tab.
window.name = "_excalidraw";
</script>

@ -20,7 +20,6 @@
},
"dependencies": {
"@braintree/sanitize-url": "6.0.2",
"@excalidraw/extensions": "link:src/packages/extensions",
"@excalidraw/random-username": "1.0.0",
"@radix-ui/react-popover": "1.0.3",
"@radix-ui/react-tabs": "1.0.2",
@ -41,6 +40,7 @@
"image-blob-reduce": "3.0.1",
"jotai": "1.13.1",
"lodash.throttle": "4.1.1",
"mathjax-full": "3.2.2",
"nanoid": "3.3.3",
"open-color": "1.9.1",
"pako": "1.0.11",
@ -114,7 +114,7 @@
"fix": "yarn fix:other && yarn fix:code",
"locales-coverage": "node scripts/build-locales-coverage.js",
"locales-coverage:description": "node scripts/locales-coverage-description.js",
"postinstall": "patch-package --patch-dir src/packages/extensions/patches",
"postinstall": "patch-package",
"prepare": "husky install",
"prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
"start": "vite",

@ -5,7 +5,7 @@ import { trackEvent } from "../analytics";
import { getDefaultAppState } from "../appState";
import { ErrorDialog } from "../components/ErrorDialog";
import { TopErrorBoundary } from "../components/TopErrorBoundary";
import { useExtensions } from "@excalidraw/extensions";
import { useSubtypes } from "./subtypes";
import {
APP_NAME,
EVENT,
@ -297,7 +297,7 @@ const ExcalidrawWrapper = () => {
const [excalidrawAPI, excalidrawRefCallback] =
useCallbackRefState<ExcalidrawImperativeAPI>();
useExtensions(excalidrawAPI);
useSubtypes(excalidrawAPI);
const [collabAPI] = useAtom(collabAPIAtom);
const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);

@ -0,0 +1,42 @@
import { ExcalidrawImperativeAPI } from "../../types";
import {
MathJaxSubtype,
setMathJaxSubtypeEnabled,
useMathJaxSubtype,
} from "./mathjax";
const validSubtypes: readonly string[] = [MathJaxSubtype];
const subtypesUsed: string[] = [];
// The main invocation hook for use in the UI
export const useSubtypes = (
api: ExcalidrawImperativeAPI | null,
subtypes?: string[],
) => {
selectSubtypesToEnable(subtypes);
useMathJaxSubtype(api);
// Put calls like `useThisSubtype(api);` here
};
// This MUST be called before the `useSubtype` calls.
const selectSubtypesToEnable = (subtypes?: string[]) => {
const subtypeList: string[] = [];
if (subtypes === undefined) {
subtypeList.push(...validSubtypes);
} else {
subtypes.forEach(
(val) => validSubtypes.includes(val) && subtypeList.push(val),
);
}
while (subtypesUsed.length > 0) {
subtypesUsed.pop();
}
subtypesUsed.push(...subtypeList);
enableSelectedSubtypes();
};
const enableSelectedSubtypes = () => {
setMathJaxSubtypeEnabled(subtypesUsed.includes(MathJaxSubtype));
// Put lines here like
// `setThisSubtypeEnabled(subtypesUsed.includes(ThisSubtype));`
};

@ -1,5 +1,5 @@
import { Theme } from "../../../../element/types";
import { createIcon, iconFillColor } from "../../../../components/icons";
import { Theme } from "../../../element/types";
import { createIcon, iconFillColor } from "../../../components/icons";
// We inline font-awesome icons in order to save on js size rather than including the font awesome react library
export const mathSubtypeIcon = ({ theme }: { theme: Theme }) =>

@ -1,7 +1,7 @@
// Some imports
import fallbackMathJaxLangData from "./locales/en.json";
import { FONT_FAMILY, SVG_NS } from "../../../../constants";
import { getFontString, getFontFamilyString, isRTL } from "../../../../utils";
import { FONT_FAMILY, SVG_NS } from "../../../constants";
import { getFontString, getFontFamilyString, isRTL } from "../../../utils";
import {
getBoundTextElement,
getBoundTextMaxWidth,
@ -10,44 +10,41 @@ import {
getTextWidth,
measureText,
wrapText,
} from "../../../../element/textElement";
} from "../../../element/textElement";
import {
hasBoundTextElement,
isTextElement,
} from "../../../../element/typeChecks";
} from "../../../element/typeChecks";
import {
ExcalidrawElement,
ExcalidrawTextElement,
NonDeleted,
} from "../../../../element/types";
import { newElementWith } from "../../../../element/mutateElement";
import { getElementAbsoluteCoords } from "../../../../element/bounds";
import Scene from "../../../../scene/Scene";
} from "../../../element/types";
import { newElementWith } from "../../../element/mutateElement";
import { getElementAbsoluteCoords } from "../../../element/bounds";
import Scene from "../../../scene/Scene";
// Imports for actions
import { t, registerAuxLangData } from "../../../../i18n";
import { Action } from "../../../../actions/types";
import { AppState } from "../../../../types";
import { t, registerAuxLangData } from "../../../i18n";
import { Action } from "../../../actions/types";
import { AppState } from "../../../types";
import {
changeProperty,
getFormValue,
} from "../../../../actions/actionProperties";
import { getSelectedElements } from "../../../../scene";
import {
getNonDeletedElements,
redrawTextBoundingBox,
} from "../../../../element";
import { ButtonIconSelect } from "../../../../components/ButtonIconSelect";
} from "../../../actions/actionProperties";
import { getSelectedElements } from "../../../scene";
import { getNonDeletedElements, redrawTextBoundingBox } from "../../../element";
import { ButtonIconSelect } from "../../../components/ButtonIconSelect";
// Subtype imports
import {
SubtypeLoadedCb,
SubtypeMethods,
SubtypePrepFn,
} from "../../../../subtypes";
} from "../../../subtypes";
import { mathSubtypeIcon } from "./icon";
import { getMathSubtypeRecord } from "./types";
import { SubtypeButton } from "../../../../components/Subtypes";
import { SubtypeButton } from "../../../components/Subtypes";
const mathSubtype = getMathSubtypeRecord().subtype;
const FONT_FAMILY_MATH = FONT_FAMILY.Helvetica;

@ -0,0 +1,27 @@
import { useEffect } from "react";
import { ExcalidrawImperativeAPI } from "../../../types";
import { addSubtypeMethods } from "../../../subtypes";
import { getMathSubtypeRecord } from "./types";
import { prepareMathSubtype } from "./implementation";
export const MathJaxSubtype = "mathjax";
// The main hook to use the MathJax subtype
export const useMathJaxSubtype = (api: ExcalidrawImperativeAPI | null) => {
const enabled = mathJaxEnabled;
useEffect(() => {
if (enabled && api) {
const prep = api.addSubtype(getMathSubtypeRecord(), prepareMathSubtype);
if (prep) {
addSubtypeMethods(getMathSubtypeRecord().subtype, prep.methods);
}
}
}, [enabled, api]);
};
// Determine whether or not to do anything in `useMathJaxSubtype`
let mathJaxEnabled = false;
export const setMathJaxSubtypeEnabled = (enabled: boolean) => {
mathJaxEnabled = enabled;
};

@ -1,5 +1,5 @@
import { getShortcutKey } from "../../../../utils";
import { SubtypeRecord } from "../../../../subtypes";
import { getShortcutKey } from "../../../utils";
import { SubtypeRecord } from "../../../subtypes";
// Exports
export const getMathSubtypeRecord = () => mathSubtype;

1
src/global.d.ts vendored

@ -14,7 +14,6 @@ interface Document {
interface Window {
ClipboardItem: any;
__EXCALIDRAW_SHA__: string | undefined;
EXCALIDRAW_EXTENSIONS_ASSET_PATH: string | undefined;
EXCALIDRAW_ASSET_PATH: string | undefined;
EXCALIDRAW_EXPORT_SOURCE: string;
EXCALIDRAW_THROTTLE_RENDER: boolean | undefined;

@ -33,6 +33,7 @@ JSX.Element | null: The JSX component representing the custom rendering, or null
### Features
- Add a `subtype` attribute to `ExcalidrawElement` to allow self-contained extensions of any `ExcalidrawElement` type. Implement MathJax support on stem.excalidraw.com as a `math` subtype of `ExcalidrawTextElement`. Both standard Latex input and simplified AsciiMath input are supported. [#6037](https://github.com/excalidraw/excalidraw/pull/6037).
- Added [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateEmbeddable) to customize embeddable src url validation. [#6691](https://github.com/excalidraw/excalidraw/pull/6691)
- Add support for `opts.fitToViewport` and `opts.viewportZoomFactor` in the [`ExcalidrawAPI.scrollToContent`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/ref#scrolltocontent) API. [#6581](https://github.com/excalidraw/excalidraw/pull/6581).
- Properly sanitize element `link` urls. [#6728](https://github.com/excalidraw/excalidraw/pull/6728).
@ -496,12 +497,6 @@ For more details refer to the [docs](https://docs.excalidraw.com)
#### Features
- Render math notation using the MathJax library. Both standard Latex input and simplified AsciiMath input are supported.
Also added plugin-like subtypes for `ExcalidrawElement`. These allow easily supporting custom extensions of `ExcalidrawElement`s such as for MathJax, Markdown, or inline code.
Also created an `@excalidraw/extensions` package. This package holds the MathJax extension to make it completely decoupled from `@excalidraw/excalidraw`. The MathJax extension is implemented as a `math` subtype of `ExcalidrawTextElement`. [#2993](https://github.com/excalidraw/excalidraw/pull/2993).
- `restoreElements()` now takes an optional parameter to indicate whether we should also recalculate text element dimensions. Defaults to `true`, but since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration [#5432](https://github.com/excalidraw/excalidraw/pull/5432).
- Support rendering custom sidebar using [`renderSidebar`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#renderSidebar) prop ([#5663](https://github.com/excalidraw/excalidraw/pull/5663)).
- Add [`toggleMenu`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#toggleMenu) prop to toggle specific menu open/close state ([#5663](https://github.com/excalidraw/excalidraw/pull/5663)).

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

@ -1,2 +0,0 @@
node_modules
dist

@ -1,16 +0,0 @@
[
{
"path": "dist/excalidraw-extensions.production.min.js",
"limit": "5 MB"
},
{
"path": "dist/excalidraw-extensions-assets/locales",
"name": "dist/excalidraw-extensions-assets/locales",
"limit": "1.2 MB"
},
{
"path": "dist/excalidraw-extensions-assets/vendor-*.js",
"name": "dist/excalidraw-extensions-assets/vendor*.js",
"limit": "2.2 MB"
}
]

@ -1,24 +0,0 @@
# Changelog
<!--
Guidelines for changelog:
The change should be grouped under one of the following sections and must contain a PR link.
- Features: For new features.
- Fixes: For bug fixes.
- Chore: Changes for non src files example package.json.
- Refactor: For any refactoring.
Please add the latest change at the top under the correct section.
-->
## Unreleased
### Excalidraw Extensions
#### Features
- Render math notation using the MathJax library. Both standard Latex input and simplified AsciiMath input are supported. MathJax support is implemented as a `math` subtype of `ExcalidrawTextElement`.
Also added plugin-like subtypes for `ExcalidrawElement`. These allow easily supporting custom extensions of `ExcalidrawElement`s such as for MathJax, Markdown, or inline code. [#5311](https://github.com/excalidraw/excalidraw/pull/5311).
- Provided a stub example extension (`./empty/index.ts`).

@ -1,45 +0,0 @@
#### Note
⚠️ ⚠️ ⚠️ You are viewing the docs for the **next** release, in case you want to check the docs for the stable release, you can view it [here](https://www.npmjs.com/package/@excalidraw/extensions).
### Extensions
Excalidraw extensions to be used in Excalidraw.
### Installation
You can use npm
```
npm install react react-dom @excalidraw/extensions
```
or via yarn
```
yarn add react react-dom @excalidraw/extensions
```
After installation you will see a folder `excalidraw-extensions-assets` and `excalidraw-extensions-assets-dev` in `dist` directory which contains the assets needed for this app in prod and dev mode respectively.
Move the folder `excalidraw-extensions-assets` and `excalidraw-extensions-assets-dev` to the path where your assets are served.
By default it will try to load the files from `https://unpkg.com/@excalidraw/extensions/dist/`
If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_EXTENSIONS_ASSET_PATH` depending on environment (for example if you have different URL's for dev and prod) to the url from where you want to load the assets.
#### Note
**If you don't want to wait for the next stable release and try out the unreleased changes you can use `@excalidraw/extensions@next`.**
### Need help?
Check out the existing [Q&A](https://github.com/excalidraw/excalidraw/discussions?discussions_q=label%3Apackage%3Aextensions). If you have any queries or need help, ask us [here](https://github.com/excalidraw/excalidraw/discussions?discussions_q=label%3Apackage%3Aextensions).
### Development
#### Install the dependencies
```bash
yarn
```

@ -1,3 +0,0 @@
import "./publicPath";
export * from "./ts/node-main";

@ -1,18 +0,0 @@
const dotenv = require("dotenv");
const { readFileSync } = require("fs");
const pkg = require("./package.json");
const parseEnvVariables = (filepath) => {
const envVars = Object.entries(dotenv.parse(readFileSync(filepath))).reduce(
(env, [key, value]) => {
env[key] = JSON.stringify(value);
return env;
},
{},
);
envVars.VITE_PKG_NAME = JSON.stringify(pkg.name);
envVars.VITE_PKG_VERSION = JSON.stringify(pkg.version);
envVars.VITE_IS_EXCALIDRAW_EXTENSIONS_NPM_PACKAGE = JSON.stringify(true);
return envVars;
};
module.exports = { parseEnvVariables };

@ -1,23 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "../../excalidraw/example/App";
declare global {
interface Window {
ExcalidrawExtensionsLib: any;
}
}
const { useExtensions } = window.ExcalidrawExtensionsLib;
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App
appTitle={"Excalidraw Extensions Example"}
useCustom={useExtensions}
customArgs={["mathjax"]}
/>
</React.StrictMode>,
rootElement,
);

@ -1 +0,0 @@
../../../excalidraw/dist/excalidraw-assets-dev/

@ -1 +0,0 @@
../../../excalidraw/dist/excalidraw.development.js

@ -1 +0,0 @@
../../../excalidraw/example/public/images/

@ -1,32 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<title>React App</title>
<script>
window.EXCALIDRAW_ASSET_PATH = "/";
window.EXCALIDRAW_EXTENSIONS_ASSET_PATH = "/";
window.name = "codesandbox";
</script>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/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="./excalidraw-extensions.development.js"></script>
<script src="./bundle.js"></script>
</body>
</html>

@ -1 +0,0 @@
export * from "./ts/node-main";

@ -1,94 +0,0 @@
{
"name": "@excalidraw/extensions",
"version": "0.15.2",
"main": "index.ts",
"files": [
"dist/*"
],
"publishConfig": {
"access": "public"
},
"description": "Excalidraw extensions",
"repository": "https://github.com/excalidraw/excalidraw",
"license": "MIT",
"keywords": [
"excalidraw",
"excalidraw-embed",
"react",
"npm",
"npm excalidraw"
],
"browserslist": {
"production": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all",
"not safari < 12",
"not kaios <= 2.5",
"not edge < 79",
"not chrome < 70",
"not and_uc < 13",
"not samsung < 10"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"peerDependencies": {
"react": "^17.0.2 || ^18.2.0",
"react-dom": "^17.0.2 || ^18.2.0"
},
"devDependencies": {
"@babel/core": "7.18.9",
"@babel/plugin-transform-arrow-functions": "7.18.6",
"@babel/plugin-transform-async-to-generator": "7.18.6",
"@babel/plugin-transform-runtime": "7.18.9",
"@babel/plugin-transform-typescript": "7.18.8",
"@babel/preset-env": "7.18.6",
"@babel/preset-react": "7.18.6",
"@babel/preset-typescript": "7.18.6",
"@size-limit/preset-big-lib": "8.2.6",
"autoprefixer": "10.4.7",
"babel-loader": "8.2.5",
"babel-plugin-transform-class-properties": "6.24.1",
"cross-env": "7.0.3",
"css-loader": "6.7.1",
"dotenv": "16.0.1",
"import-meta-loader": "1.1.0",
"mini-css-extract-plugin": "2.6.1",
"postcss-loader": "7.0.1",
"sass-loader": "13.0.2",
"size-limit": "8.2.4",
"style-loader": "3.3.3",
"terser-webpack-plugin": "5.3.3",
"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"
},
"bugs": "https://github.com/excalidraw/excalidraw/issues",
"homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/extensions",
"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 && 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",
"postinstall": "patch-package",
"start": "webpack serve --config webpack.dev-server.config.js",
"install:deps": "yarn install --frozen-lockfile && yarn --cwd ../../../",
"build:deps": "yarn --cwd ../excalidraw cross-env NODE_ENV=development webpack --config webpack.dev.config.js",
"build:example": "EXAMPLE=true webpack --config webpack.dev-server.config.js && yarn gen:types",
"size": "yarn build:umd && size-limit"
},
"dependencies": {
"mathjax-full": "3.2.2",
"patch-package": "8.0.0",
"postinstall-postinstall": "2.1.0"
}
}

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

@ -1,26 +0,0 @@
import { useEffect } from "react";
import { ExcalidrawImperativeAPI } from "../../../../types";
// Extension authors: provide a extension name here like "myextension"
export const EmptyExtension = "empty";
// Extension authors: provide a hook like `useMyExtension` in `myextension/index`
export const useEmptyExtension = (api: ExcalidrawImperativeAPI | null) => {
const enabled = emptyExtensionLoadable;
useEffect(() => {
if (enabled) {
}
}, [enabled, api]);
};
// Extension authors: Use a variable like `myExtensionLoadable` to determine
// whether or not to do anything in each of `useMyExtension` and `testMyExtension`.
let emptyExtensionLoadable = false;
export const getEmptyExtensionLoadable = () => {
return emptyExtensionLoadable;
};
export const setEmptyExtensionLoadable = (loadable: boolean) => {
emptyExtensionLoadable = loadable;
};

@ -1,32 +0,0 @@
import { useEffect } from "react";
import { ExcalidrawImperativeAPI } from "../../../../types";
import { addSubtypeMethods } from "../../../../subtypes";
import { getMathSubtypeRecord } from "./types";
import { prepareMathSubtype } from "./implementation";
export const MathJaxExtension = "mathjax";
// Extension authors: provide a hook like `useMyExtension` in `myextension/index`
export const useMathJaxExtension = (api: ExcalidrawImperativeAPI | null) => {
const enabled = mathJaxExtensionLoadable;
useEffect(() => {
if (enabled && api) {
const prep = api.addSubtype(getMathSubtypeRecord(), prepareMathSubtype);
if (prep) {
addSubtypeMethods(getMathSubtypeRecord().subtype, prep.methods);
}
}
}, [enabled, api]);
};
// Extension authors: Use a variable like `myExtensionLoadable` to determine
// whether or not to do anything in each of `useMyExtension` and `testMyExtension`.
let mathJaxExtensionLoadable = false;
export const getMathJaxExtensionLoadable = () => {
return mathJaxExtensionLoadable;
};
export const setMathJaxExtensionLoadable = (loadable: boolean) => {
mathJaxExtensionLoadable = loadable;
};

@ -1,59 +0,0 @@
import { ExcalidrawImperativeAPI } from "../../../types";
import {
EmptyExtension,
setEmptyExtensionLoadable,
useEmptyExtension,
} from "./empty";
import {
MathJaxExtension,
setMathJaxExtensionLoadable,
useMathJaxExtension,
} from "./mathjax";
// Extension authors: do imports like follows:
// ```
// import {
// MyExtension,
// setMyExtensionLoadable,
// useMyExtension,
// } from "./myExtension";
// ```
// Extension authors: include `MyExtension` in `validExtensions`
const validExtensions: readonly string[] = [EmptyExtension, MathJaxExtension];
const extensionsUsed: string[] = [];
// The main invocation hook for use in the UI
export const useExtensions = (
api: ExcalidrawImperativeAPI | null,
extensions?: string[],
) => {
selectExtensionsToLoad(extensions);
useEmptyExtension(api);
useMathJaxExtension(api);
// Extension authors: add a line here like `useMyExtension();`
};
// This MUST be called before the `useExtension`/`testExtension` calls.
const selectExtensionsToLoad = (extensions?: string[]) => {
const extensionList: string[] = [];
if (extensions === undefined) {
extensionList.push(...validExtensions);
} else {
extensions.forEach(
(val) => validExtensions.includes(val) && extensionList.push(val),
);
}
while (extensionsUsed.length > 0) {
extensionsUsed.pop();
}
extensionsUsed.push(...extensionList);
setLoadableExtensions();
};
const setLoadableExtensions = () => {
setEmptyExtensionLoadable(extensionsUsed.includes(EmptyExtension));
setMathJaxExtensionLoadable(extensionsUsed.includes(MathJaxExtension));
// Extension authors: add a line here like
// `setMyExtensionLoadable(extensionsUsed.includes(MyExtension));`
};

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

@ -1,101 +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-extensions.development": "./entry.js",
},
output: {
path: path.resolve(__dirname, outputDir),
library: "ExcalidrawExtensionsLib",
libraryTarget: "umd",
filename: "[name].js",
chunkFilename: "excalidraw-extensions-assets-dev/[name]-[contenthash].js",
assetModuleFilename: "excalidraw-extensions-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",
],
},
{
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",
},
},
};

@ -1,124 +0,0 @@
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const autoprefixer = require("autoprefixer");
const webpack = require("webpack");
const { parseEnvVariables } = require("./env");
module.exports = {
mode: "production",
entry: {
"excalidraw-extensions.production.min": "./entry.js",
},
output: {
path: path.resolve(__dirname, "dist"),
library: "ExcalidrawExtensionsLib",
libraryTarget: "umd",
filename: "[name].js",
chunkFilename: "excalidraw-extensions-assets/[name]-[contenthash].js",
assetModuleFilename: "excalidraw-extensions-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",
],
},
{
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",
},
},
};

File diff suppressed because it is too large Load Diff

@ -8,7 +8,6 @@ import {
describe("exportToSvg", () => {
window.EXCALIDRAW_ASSET_PATH = "/";
window.EXCALIDRAW_EXTENSIONS_ASSET_PATH = "/";
const ELEMENT_HEIGHT = 100;
const ELEMENT_WIDTH = 100;
const ELEMENTS = [

1
src/vite-env.d.ts vendored

@ -46,7 +46,6 @@ interface ImportMetaEnv {
VITE_PKG_NAME: string;
VITE_PKG_VERSION: string;
VITE_IS_EXCALIDRAW_NPM_PACKAGE: string;
VITE_IS_EXCALIDRAW_EXTENSIONS_NPM_PACKAGE: string;
VITE_WORKER_ID: string;
MODE: string;

@ -1,5 +1,5 @@
{
"include": ["src/packages/excalidraw", "src/packages/extensions", "src/global.d.ts", "src/css.d.ts"],
"include": ["src/packages/excalidraw", "src/global.d.ts", "src/css.d.ts"],
"compilerOptions": {
"types": ["vite/client", "vite-plugin-svgr/client"],
"allowJs": true,

@ -1522,10 +1522,6 @@
resolved "https://registry.yarnpkg.com/@excalidraw/eslint-config/-/eslint-config-1.0.3.tgz#2122ef7413ae77874ae9848ce0f1c6b3f0d8bbbd"
integrity sha512-GemHNF5Z6ga0BWBSX7GJaNBUchLu6RwTcAB84eX1MeckRNhNasAsPCdelDlFalz27iS4RuYEQh0bPE8SRxJgbQ==
"@excalidraw/extensions@link:src/packages/extensions":
version "0.0.0"
uid ""
"@excalidraw/prettier-config@1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@excalidraw/prettier-config/-/prettier-config-1.0.2.tgz#b7c061c99cee2f78b9ca470ea1fbd602683bba65"

Loading…
Cancel
Save