feat: expose variable window.EXCALIDRAW_ASSET_PATH to allow host define the path for excalidraw assets (#3068)

* feat: expose variable window.EXCALIDRAW_ASSET_PATH to allow host define the path for excalidraw assets
No more __webpack_public_path__ needed explicitly in host and it will default to unpkg cdn if window.EXCALIDRAW_ASSET_PATH is not defined

* fix

* add public path

* add public path

* assign only when env not test

* read from package.json

* Append content hash to excalidraw-assets so cache bursting happens when version update

* update changelog and readme

* update

public/index.html

@@ -86,7 +86,9 @@
     />
 
     <link rel="stylesheet" href="fonts.css" type="text/css" />
-
+    <script>
+      window.EXCALIDRAW_ASSET_PATH = "/";
+    </script>
     <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
     <script
       async

src/global.d.ts

@@ -12,6 +12,7 @@ interface Document {
 interface Window {
   ClipboardItem: any;
   __EXCALIDRAW_SHA__: string | undefined;
+  EXCALIDRAW_ASSET_PATH: string | undefined;
   gtag: Function;
 }
 

src/index.tsx

@@ -4,7 +4,6 @@ import ExcalidrawApp from "./excalidraw-app";
 
 import "./excalidraw-app/pwa";
 import "./excalidraw-app/sentry";
-
 window.__EXCALIDRAW_SHA__ = process.env.REACT_APP_GIT_SHA;
 
 ReactDOM.render(<ExcalidrawApp />, document.getElementById("root"));

src/packages/excalidraw/CHANGELOG.md

@@ -12,20 +12,34 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->
 
-## [Unreleased]
+## 0.4.0
 
 ## Excalidraw API
 
 ### Features
 
+- Expose `window.EXCALIDRAW_ASSET_PATH` which host can use to load assets from a different URL. By default it will be loaded from `https://unpkg.com/@excalidraw/excalidraw{currentVersion}/dist/`.
+
+  Also now the assets will have a hash in filename so cache bursting can easily happen with version bump.
+
 - Add support for `scrollToCenter` in [initialData](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L18) so host can control whether to scroll to center on mount [#3070](https://github.com/excalidraw/excalidraw/pull/3070).
 
-- Export [`restore`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L182), [`restoreAppState`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L144) and [`restoreElements`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L128) to host
+- Export [`restore`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L182), [`restoreAppState`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L144) and [`restoreElements`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L128) to host [#3049](https://github.com/excalidraw/excalidraw/pull/3049)
 
 ### Fixes
 
 - Show user state only when [userState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L35) is passed on remote pointers during collaboration [#3050](https://github.com/excalidraw/excalidraw/pull/3050)
 
+## Excalidraw Library
+
+### Features
+
+- Adjust line-confirm-threshold based on zoom [#2884](https://github.com/excalidraw/excalidraw/pull/2884)
+
+### Fixes
+
+- Hide scrollbars on mobile [#3044](https://github.com/excalidraw/excalidraw/pull/3044)
+
 ## 0.3.1
 
 ## Excalidraw API

src/packages/excalidraw/README.md

@@ -20,13 +20,9 @@ After installation you will see a folder `excalidraw-assets` in `dist` directory
 
 Move the folder `excalidraw-assets` to the path where your assets are served.
 
-By default it will try to load the files from `{rootUrl}/excalidraw-assets/`
+By default it will try to load the files from `https://unpkg.com/@excalidraw/excalidraw/{currentVersion}/dist/`
 
-With **Webpack**, if you want to load the files from different path you can use <pre><a href="https://webpack.js.org/guides/public-path/#on-the-fly">`__webpack_public_path__`</a></pre>.
+If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` to the url from where you want to load the assets.
-
-With **create-react-app**, the assets can be served from `public/static/js/excalidraw-assets`since CRA tries to load the assets from `{rootUrl}/static/js` path by default.
-
-You can update the value of `PUBLIC_URL` if you want to serve it from a different URL.
 
 ### Demo
 

src/packages/excalidraw/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, forwardRef } from "react";
+import "./publicPath";
 
 import { InitializeApp } from "../../components/InitializeApp";
 import App from "../../components/App";

src/packages/excalidraw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "dist/excalidraw.min.js",
   "files": [
     "dist/*"

src/packages/excalidraw/publicPath.js

@@ -0,0 +1,9 @@
+import { ENV } from "../../constants";
+import pkg from "./package.json";
+if (process.env.NODE_ENV !== ENV.TEST) {
+  /* eslint-disable */
+  /* global __webpack_public_path__:writable */
+  __webpack_public_path__ =
+    window.EXCALIDRAW_ASSET_PATH ||
+    `https://unpkg.com/${pkg.name}@${pkg.version}/dist/`;
+}

src/packages/excalidraw/webpack.prod.config.js

@@ -13,7 +13,8 @@ module.exports = {
     library: "Excalidraw",
     libraryTarget: "umd",
     filename: "[name].js",
-    chunkFilename: "excalidraw-assets/[name].js",
+    chunkFilename: "excalidraw-assets/[name]-[contenthash].js",
+    publicPath: "",
   },
   resolve: {
     extensions: [".js", ".ts", ".tsx", ".css", ".scss"],