1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-12 02:03:59 +02:00
Files
slate/docs/walkthroughs/08-using-the-bundled-source.md
Joe Anderson fb87646e86 Experimental chunking optimisation and other performance improvements (#5871)
* Chunking optimization

* Fix comments

* Remove redundant `insertionsMinusRemovals` variable

* Fix typo

* Unblock Netlify builds

* Add placeholder

* Upgrade Playwright (fixes crash when debugging)

* Fix `autoFocus` not working

* Fix huge document test

* Fix the previous issue without changing `useSlateSelector`

* Retry `test:integration`

* Re-implement `useSlateWithV`

* Retry `test:integration`

* Update docs

* Update JS examples to match TS examples

* Upload Playwright's `test-results` directory in CI to access traces

* Change trace mode to `retain-on-first-failure`

* Fix: `Locator.fill(text)` is flaky on Editable

* Add changesets

* Increase minimum `slate-dom` version

* Update changeset

* Update 09-performance.md

* Deprecate the `useSlateWithV` hook

* Fix errors and improve clarity in 09-performance.md

* Minimum `slate-dom` version is now 0.116

* Update `yarn.lock`
2025-06-06 16:42:11 -07:00

1.9 KiB

Using the Bundled Source

For most folks, you'll want to install Slate via npm, in which case you can follow the regular Installing Slate guide.

But, if you'd rather install Slate by simply adding a <script> tag to your application, this guide will help you. To make the "bundled" use case simpler, each version of Slate ships with a bundled source file called slate.js.

To get a copy of slate.js, download the version of Slate you want from npm:

npm install slate@latest

And then look in the node_modules folder for the bundled slate.js file:

node_modules/
  slate/
    dist/
      slate.js
      slate.min.js

A minified version called slate.min.js is also included for convenience.

Before you can add slate.js to your page, you need to bring your own copy of react, react-dom and react-dom-server, like so:

<script src="./vendor/react.js"></script>
<script src="./vendor/react-dom.js"></script>
<script src="./vendor/react-dom-server.js"></script>

This ensures that Slate isn't bundling its own copy of React, which would greatly increase the file size of your application.

Then you can add slate.js after those includes:

<script src="./vendor/slate.js"></script>

To make things easier, for quick prototyping, you can also use the unpkg.com delivery network that makes working with bundled npm modules easier. In that case, your includes would look like:

<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom-server.browser.production.min.js"></script>
<script src="https://unpkg.com/slate/dist/slate.js"></script>
<script src="https://unpkg.com/slate-react/dist/slate-react.js"></script>

That's it, you're ready to go!