sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build(webpack): remove publicPath so __webpack_public_path__ can be used to host assets (#2835)

Browse Source 
* build(webpack): remove publicPath so __webpack_public_path__ can be use to host assets

* update readme and changelog

* fix

* revert version so its released in v3
This commit is contained in:
Aakansha Doshi 2021-02-10 21:49:16 +05:30 committed by GitHub
parent f162512988
commit 0b2e4dd60b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/packages/excalidraw/CHANGELOG.md
View File

@ -23,6 +23,10 @@ Please add the latest change on the top under the correct section.
- Add `viewModeEnabled` prop which enabled the view mode [#2840](https://github.com/excalidraw/excalidraw/pull/2840). When this prop is used, the view mode will not show up in context menu is so it is fully controlled by host. - Add `viewModeEnabled` prop which enabled the view mode [#2840](https://github.com/excalidraw/excalidraw/pull/2840). When this prop is used, the view mode will not show up in context menu is so it is fully controlled by host.
- Expose `getAppState` on `excalidrawRef` [#2834](https://github.com/excalidraw/excalidraw/pull/2834). - Expose `getAppState` on `excalidrawRef` [#2834](https://github.com/excalidraw/excalidraw/pull/2834).
### Build
- Remove publicPath so host can use `__webpack_public_path__` to host the assets[#2835](https://github.com/excalidraw/excalidraw/pull/2835)
## Excalidraw Library ## Excalidraw Library
### Features ### Features

61
src/packages/excalidraw/README.md
View File

@ -18,7 +18,15 @@ yarn add react react-dom @excalidraw/excalidraw
After installation you will see a folder `excalidraw-assets` in `dist` directory which contains the assets needed for this app. After installation you will see a folder `excalidraw-assets` in `dist` directory which contains the assets needed for this app.
Move the folder `excalidraw-assets` to the path where your assets are served. In the example its served from `public/excalidraw-assets` 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/`
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>.
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 ### Demo
@ -26,6 +34,8 @@ Move the folder `excalidraw-assets` to the path where your assets are served. In
### Usage ### Usage
1. If you are using a Web bundler (for instance, Webpack), you can import it as an ES6 module as shown below
```js ```js
import React, { useEffect, useState, createRef } from "react"; import React, { useEffect, useState, createRef } from "react";
import Excalidraw from "@excalidraw/excalidraw"; import Excalidraw from "@excalidraw/excalidraw";
@ -119,6 +129,55 @@ export default function App() {
[![Edit excalidraw](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-ehlz3?fontsize=14&hidenavigation=1&theme=dark) [![Edit excalidraw](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-ehlz3?fontsize=14&hidenavigation=1&theme=dark)
2. To use it in a browser directly:
You will need to make sure `react`, `react-dom` is available as shown below.
```html
<!DOCTYPE html>
<html>
<head>
<title>Excalidraw in browser</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react@16.14.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script
type="text/javascript"
src="https://unpkg.com/@excalidraw/excalidraw@0.2.2/dist/excalidraw.min.js"
></script>
</head>
<body>
<div class="container">
<h4>Excalidraw Embed Example</h4>
<div id="app"></div>
</div>
<script type="text/javascript" src="src/index.js"></script>
</body>
</html>
```
```js
import "./styles.css";
const excalidrawWrapper = document.getElementById("app");
const props = {
onChange: (data, appState) => {
console.log(data, appState);
},
};
/*eslint-disable */
ReactDOM.render(
React.createElement(Excalidraw.default, props),
excalidrawWrapper,
);
```
[![Edit excalidraw-in-browser](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-in-browser-tlqom?fontsize=14&hidenavigation=1&theme=dark)
### Props ### Props
| Name | Type | Default | Description | | Name | Type | Default | Description |

1
src/packages/excalidraw/webpack.prod.config.js
View File

@ -13,7 +13,6 @@ module.exports = {
library: "Excalidraw", library: "Excalidraw",
libraryTarget: "umd", libraryTarget: "umd",
filename: "[name].js", filename: "[name].js",
publicPath: "/",
chunkFilename: "excalidraw-assets/[name].js", chunkFilename: "excalidraw-assets/[name].js",
}, },
resolve: { resolve: {