diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index a001e242..f134afbb 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -37,6 +37,18 @@ Please add the latest change on the top under the correct section. - [`useDevice`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/utils#usedevice) hook's return value was changed to differentiate between `editor` and `viewport` breakpoints. [#7243](https://github.com/excalidraw/excalidraw/pull/7243) +### Build + +- Support Preact [#7255](https://github.com/excalidraw/excalidraw/pull/7255). The host needs to set `process.env.IS_PREACT` to `true` + +When using vite, you will have to make sure the variable process.env.IS_PREACT is available at runtime since Vite removes it by default, so you can update the vite config to ensure its available + +```json +define: { + "process.env.IS_PREACT": process.env.IS_PREACT, +} +``` + ## 0.16.1 (2023-09-21) ## Excalidraw Library diff --git a/src/packages/excalidraw/main.js b/src/packages/excalidraw/main.js index b1668faf..853bb70f 100644 --- a/src/packages/excalidraw/main.js +++ b/src/packages/excalidraw/main.js @@ -1,4 +1,10 @@ -if (process.env.NODE_ENV === "production") { +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"); } else { module.exports = require("./dist/excalidraw.development.js"); diff --git a/src/packages/excalidraw/package.json b/src/packages/excalidraw/package.json index 2e52e156..7ca23c2c 100644 --- a/src/packages/excalidraw/package.json +++ b/src/packages/excalidraw/package.json @@ -78,7 +78,7 @@ "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/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 && yarn gen:types", + "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 && NODE_ENV=development webpack --config webpack.preact.config.js && 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", "pack": "yarn build:umd && yarn pack", "start": "webpack serve --config webpack.dev-server.config.js", diff --git a/src/packages/excalidraw/webpack.preact.config.js b/src/packages/excalidraw/webpack.preact.config.js new file mode 100644 index 00000000..c0516a76 --- /dev/null +++ b/src/packages/excalidraw/webpack.preact.config.js @@ -0,0 +1,33 @@ +const { merge } = require("webpack-merge"); + +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 = { + 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 = merge(config, preactWebpackConfig);