1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-02-24 01:02:31 +01:00
slate/docs/walkthroughs/xx-using-the-bundled-source.md

52 lines
1.9 KiB
Markdown
Raw Normal View History

# 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](01-installing-slate.md) 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:
```text
Switch to using Rollup for bundling (#1568) * Implement first working rollup config for main slate pkg * Convert slate-base64-serializer to rollup * Convert slate-dev-logger to rollup * Convert slate-html-serializer to rollup * Convert slate-hyperscript to rollup * Convert slate-plain-serializer to rollup * Convert slate-prop-types to rollup * Convert (mostly) slate-react to rollup * Convert slate-simulator to rollup * Misc cleanup and configuration tweaks/fixes * Convert slate-schema-violations to rollup * Successful rollup build for top-level examples * Add plugin to replace process.env.NODE_ENV * Only rebuild modules and dev examples in watch mode * Enable sourcemaps for development builds * Force debug to use browser version, remove builtins plugin * Remove is-image from example It relies on node `path` and wouldn't work well in-browser anyway * Use browser version of react-dom/server * Move stray require to import * Configure examples to watch child package output * Fix tests * Remove unneeded preferBuiltins from resolve config * Use more precise files array to ensure sourcemaps aren't included * Use lodash instead of lodash.throttle It's pulled in anyway since slate-react needs slate, so using the minipackage actually causes code duplication * Improve naming/fix UMD builds, update UMD doc * Add rollup configs to linting, add a missing dep to package.json * Use longform rollup CLI flags * Add rollup-plugin-auto-external to reduce external module configuration * Combine rollup config into a unioned helper * Centralize to a single rollup configuration * Update dist structure and package field naming for PR feedback * Add comments and address PR feedback on rollup config * i.e. -> e.g. * Add some spacing to the configuration to improve readability * Add a bit more spacing * Remove umd from example Slate unpkg link
2018-02-02 18:46:36 -05:00
npm install slate@latest
```
And then look in the `node_modules` folder for the bundled `slate.js` file:
```text
node_modules/
slate/
dist/
slate.js
slate.min.js
```
A minified version called `slate.min.js` is also included for convenience.
Next (#3093) * remove some key usage from core, refactor Operations.apply * undeprecate some methods * convert more key usage to paths * update deprecations * convert selection commands to use all paths * refactor word boundary selection logic * convert many at-range commands to use paths * convert wrapBlock and wrapInline to not use keys * cleanup * remove chainability from editor * simplify commands, queries and middleware * convert deleteAtRange * remove key usage from schema, deprecate *ByKey methods * migrate *ByKey tests, remove index from *ByPath signatures * rename at-current-range tests * deprecate mode key usage, migrate more tests away from keys * deprecate range and point methods which rely on keys to work * refactor insertBlock, without fixing warnings * add pathRef/pointRef, fix insertBlock/Inline deprecations, work on insertFragment * refactor insertFragment * get rich-text example rendering * fix lint * refactor query files, fix more tests * remove unused queries, refactor others * deprecate splitDescendantsByPath * merge master * add typescript, convert slate, slate-hyperscript, slate-plain-serializer * add Point, Path, Range, Annotation tests * add Annotation, Change, Element, Fragment, Mark, Range, Selection, Value interfaces tests * add Operation and Text tests * add Node tests * get operations and normalization tests working for slate * get *AtPath command tests passing * rename *AtPath command tests * rename * get *AtPoint tests working * rename * rename * add value queries tests * add element, mark and path queries tests * convert most on-selection tests * convert on-selection commands * rename * get addMarks and delete commands working * rename * rename * rename * refactor value.positions(), work on delete tests * progress on delete tests * more delete work * finish delete tests * start converting to at-based commands * restructure query tests * restructure operations tests * more work converting to multi-purpose commands * lots of progress on converting to at-based commands * add unwrapNodes * remove setValue * more progress * refactor node commands to use consistent matching logic * cleanup, get non-fragment commands passing * remove annotations and isAtomic * rename surround/pluck to cover/uncover * add location concept, change at-path to from-path for iterables * refactor batches * add location-based queries * refactor hanging logic * more location query work * renaming * use getMatch more * add split to wrap/unwrap * flip levels/ancestors ordering * switch splitNodes to use levels * change split to always:false by default * fix tests * add more queries tests * fixing more delete logic * add more splitNodes tests * get rest of delete tests passing * fix location-based logic in some commands * cleanup * get previous packages tests passing again * add slate-history package * start slate-schema work * start of react working * rendering fixes * get rich and plain text examples working * get image example working with hooks and dropping * refactor onDrop to be internal * inline more event handlers * refactor lots of event-related logic * change rendering to use render props * delete unused stuff * cleanup dom utils * remove unused deps * remove unnecessary packages, add placeholder * remove slate-react-placeholder package * remove unused dep * remove unnecessary tests, fix readonly example * convert checklists example * switch to next from webpack * get link example working * convert more examples * preserve keys, memoized leafs/texts, fix node lookup * fix to always useLayoutEffect for ordering * fix annotations to be maps, memoize elements * remove Change interface * remove String interface * rename Node.entries to Node.nodes * remove unnecessary value queries * default to selection when iterating, cleanup * remove unused files * update scroll into view logic * fix undoing, remove constructor types * dont sync selection while composing * add workflows * remove unused deps * convert mentions example * tweaks * convert remaining examples * rename h to jsx, update schema * fix schema tests * fix slate-schema logic and tests * really fix slate-schema and forced-layout example * get start of insertFragment tests working * remove Fragment interface * remove debugger * get all non-skipped tests passing * cleanup deps * run prettier * configure eslint for typescript * more eslint fixes... * more passing * update some docs * fix examples * port windows undo hotkey change * fix deps, add basic firefox support * add event overriding, update walkthroughs * add commands, remove classes, cleanup examples * cleanup rollup config * update tests * rename queries tests * update other tests * update walkthroughs * cleanup interface exports * cleanup, change mark transforms to require location * undo mark transform change * more * fix tests * fix example * update walkthroughs * update docs * update docs * remove annotations * remove value, move selection and children to editor * add migrating doc * fix lint * fix tests * fix DOM types aliasing * add next export * update deps, fix prod build * fix prod build * update scripts * update docs and changelogs * update workflow and pull request template
2019-11-27 20:54:42 -05:00
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:
```markup
<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:
```markup
<script src="./vendor/slate.js"></script>
```
To make things easier, for quick prototyping, you can also use the [`unpkg.com`](https://unpkg.com/#/) delivery network that makes working with bundled npm modules easier. In that case, your includes would look like:
```markup
Switch to using Rollup for bundling (#1568) * Implement first working rollup config for main slate pkg * Convert slate-base64-serializer to rollup * Convert slate-dev-logger to rollup * Convert slate-html-serializer to rollup * Convert slate-hyperscript to rollup * Convert slate-plain-serializer to rollup * Convert slate-prop-types to rollup * Convert (mostly) slate-react to rollup * Convert slate-simulator to rollup * Misc cleanup and configuration tweaks/fixes * Convert slate-schema-violations to rollup * Successful rollup build for top-level examples * Add plugin to replace process.env.NODE_ENV * Only rebuild modules and dev examples in watch mode * Enable sourcemaps for development builds * Force debug to use browser version, remove builtins plugin * Remove is-image from example It relies on node `path` and wouldn't work well in-browser anyway * Use browser version of react-dom/server * Move stray require to import * Configure examples to watch child package output * Fix tests * Remove unneeded preferBuiltins from resolve config * Use more precise files array to ensure sourcemaps aren't included * Use lodash instead of lodash.throttle It's pulled in anyway since slate-react needs slate, so using the minipackage actually causes code duplication * Improve naming/fix UMD builds, update UMD doc * Add rollup configs to linting, add a missing dep to package.json * Use longform rollup CLI flags * Add rollup-plugin-auto-external to reduce external module configuration * Combine rollup config into a unioned helper * Centralize to a single rollup configuration * Update dist structure and package field naming for PR feedback * Add comments and address PR feedback on rollup config * i.e. -> e.g. * Add some spacing to the configuration to improve readability * Add a bit more spacing * Remove umd from example Slate unpkg link
2018-02-02 18:46:36 -05:00
<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!