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
@ -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 }) =>
|
||||
@ -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,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
Loading…
Reference in New Issue