mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-04-20 05:11:53 +02:00
fix bundled file, add bundled installation guide
This commit is contained in:
Ian Storm Taylor
parent
ba14708792
commit
030beab8cd
@ -50,18 +50,12 @@ Which will also compile the source files. Then run the tests with:
|
||||
npm test
|
||||
```
|
||||
|
||||
And to run the linter:
|
||||
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
If you need to debug something, you can add a `debugger` line to the source, and then run `npm test debug`. Or, if you only want to run a specific test or tests, you can run `npm test -- --fgrep "match this string"` flag which will filter the tests being run.
|
||||
|
||||
To keep the source rebuilding on every file change, you need to run an additional watching command:
|
||||
|
||||
```
|
||||
npm run dist:watch
|
||||
npm run watch
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ You'll also need to be sure to install Slate's peer dependencies for React:
|
||||
npm install react react-dom
|
||||
```
|
||||
|
||||
_Note, if you'd rather use a pre-bundled version of Slate, you can `npm install slate` and retrieve the bundled `dist/slate.js` file! It comes with React pre-bundled as well, so you can use it as a single file._
|
||||
_Note, if you'd rather use a pre-bundled version of Slate, you can `npm install slate` and retrieve the bundled `dist/slate.js` file! Check out the [Using the Bundled Source](./using-the-bundled-source.md) guide for more information._
|
||||
|
||||
Once you've install it, you'll need to import it.
|
||||
|
||||
|
||||
56
docs/guides/using-the-bundled-source.md
Normal file
56
docs/guides/using-the-bundled-source.md
Normal file
@ -0,0 +1,56 @@
|
||||
|
||||
# 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](./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:
|
||||
|
||||
```
|
||||
npm install slate @0.11.12
|
||||
```
|
||||
|
||||
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 `immutable`, `react` and `react-dom`, like so:
|
||||
|
||||
```html
|
||||
<script src="./vendor/react.js"></script>
|
||||
<script src="./vendor/react-dom.js"></script>
|
||||
<script src="./vendor/immutable.js"></script>
|
||||
```
|
||||
|
||||
This ensures that Slate isn't bundling its own copy of Immutable and React, which would greatly increase the file size of your application.
|
||||
|
||||
Then you can add `slate.js` after those includes:
|
||||
|
||||
```html
|
||||
<script src="./vendor/slate.js"></script>
|
||||
```
|
||||
|
||||
To make things easier, for quick prototyping, you can also use the [`npmcdn.com`](https://npmcdn.com/#/) delivery network that makes working with bundled npm modules easier. In that case, your includes would look like:
|
||||
|
||||
```html
|
||||
<script src="https://npmcdn.com/react/dist/react.js"></script>
|
||||
<script src="https://npmcdn.com/react-dom/dist/react-dom.js"></script>
|
||||
<script src="https://npmcdn.com/immutable/dist/immutable.js"></script>
|
||||
<script src="https://npmcdn.com/slate/dist/slate.js"></script>
|
||||
```
|
||||
|
||||
That's it, you're ready to go!
|
||||
|
||||
<br/>
|
||||
<p align="center"><strong>Next:</strong><br/><a href="./adding-event-handlers.md">Adding Event Handlers</a></p>
|
||||
<br/>
|
||||
|
||||
@ -40,13 +40,10 @@ npm start
|
||||
|
||||
Now you can open up `http://localhost:8080` in your browser and you'll see the examples site.
|
||||
|
||||
If you want to edit the source while running the examples and have those changes immediately reflected, you need to run two additional watching commands in your terminal:
|
||||
If you want to edit the source while running the examples and have those changes immediately reflected, you can use the `watch` command instead, which will watch the source files for changes while running the server:
|
||||
|
||||
```
|
||||
npm run dist:watch
|
||||
```
|
||||
```
|
||||
npm run examples:watch
|
||||
npm run watch
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import Inline from '../models/inline'
|
||||
import Mark from '../models/mark'
|
||||
import Raw from './raw'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/server'
|
||||
import ReactDOMServer from 'react-dom/server'
|
||||
import State from '../models/state'
|
||||
import Text from '../models/text'
|
||||
import cheerio from 'cheerio'
|
||||
@ -221,7 +221,7 @@ class Html {
|
||||
serialize = (state) => {
|
||||
const { document } = state
|
||||
const elements = document.nodes.map(this.serializeNode)
|
||||
const html = ReactDOM.renderToStaticMarkup(<body>{elements}</body>)
|
||||
const html = ReactDOMServer.renderToStaticMarkup(<body>{elements}</body>)
|
||||
const inner = html.slice(6, -7)
|
||||
return inner
|
||||
}
|
||||
|
||||
46
package.json
46
package.json
@ -10,14 +10,12 @@
|
||||
"debug": "^2.2.0",
|
||||
"detect-browser": "^1.3.3",
|
||||
"direction": "^0.1.5",
|
||||
"element-scroll-to": "^1.1.0",
|
||||
"esrever": "^0.2.0",
|
||||
"get-window": "^1.1.1",
|
||||
"immutable": "^3.8.1",
|
||||
"is-empty": "^1.0.0",
|
||||
"immutable": "^3.8.1",
|
||||
"keycode": "^2.1.2",
|
||||
"lodash": "^4.13.1",
|
||||
"react-portal": "^2.2.0",
|
||||
"type-of": "^2.0.1",
|
||||
"ua-parser-js": "^0.7.10",
|
||||
"uid": "0.0.2"
|
||||
@ -35,6 +33,7 @@
|
||||
"babel-preset-stage-0": "^6.5.0",
|
||||
"babelify": "^7.3.0",
|
||||
"browserify": "^13.0.1",
|
||||
"browserify-global-shim": "^1.0.3",
|
||||
"browserify-shim": "^3.8.12",
|
||||
"disc": "^1.3.2",
|
||||
"envify": "^3.4.1",
|
||||
@ -47,12 +46,14 @@
|
||||
"is-image": "^1.0.1",
|
||||
"is-url": "^1.2.2",
|
||||
"mocha": "^2.5.3",
|
||||
"npm-run-all": "^2.3.0",
|
||||
"prismjs": "^1.5.1",
|
||||
"react": "^15.2.0",
|
||||
"react-addons-perf": "^15.2.1",
|
||||
"react-dom": "^15.1.0",
|
||||
"react-frame-aware-selection-plugin": "0.0.1",
|
||||
"react-frame-component": "^0.6.2",
|
||||
"react-portal": "^2.2.0",
|
||||
"react-router": "^2.5.1",
|
||||
"read-metadata": "^1.0.0",
|
||||
"selection-position": "^1.0.0",
|
||||
@ -68,31 +69,32 @@
|
||||
},
|
||||
"scripts": {
|
||||
"clean": "rm -rf ./dist ./node_modules ./examples/build.js",
|
||||
"disc": "npm run dist && npm run disc:build && npm run disc:open",
|
||||
"disc:build": "mkdir -p ./tmp && browserify ./dist/index.js --full-paths --outfile ./tmp/build.js",
|
||||
"disc": "npm-run-all dist disc:build disc:open",
|
||||
"disc:build": "mkdir -p ./tmp && browserify ./dist/index.js --full-paths > ./tmp/build.js",
|
||||
"disc:open": "discify ./tmp/build.js --open",
|
||||
"dist": "npm run dist:npm && npm run dist:bundle",
|
||||
"dist:bundle": "npm run dist:bundle:max && npm run dist:bundle:min",
|
||||
"dist:bundle:max": "NODE_ENV=production browserify ./dist/index.js --transform envify --transform browserify-shim --standalone Slate --outfile ./dist/slate.js",
|
||||
"dist:bundle:min": "NODE_ENV=production browserify ./dist/index.js --transform envify --transform uglifyify --transform browserify-shim --standalone Slate | uglifyjs --output ./dist/slate.min.js",
|
||||
"dist": "npm-run-all dist:npm dist:max dist:min",
|
||||
"dist:max": "browserify ./lib/index.js --transform babelify --transform [ browserify-global-shim --global ] > ./dist/slate.js",
|
||||
"dist:min": "NODE_ENV=production browserify ./lib/index.js --transform babelify --transform envify --transform [ browserify-global-shim --global ] --transform uglifyify --standalone Slate | uglifyjs > ./dist/slate.min.js",
|
||||
"dist:npm": "babel --out-dir ./dist ./lib",
|
||||
"dist:watch": "babel --watch --out-dir ./dist ./lib",
|
||||
"examples": "npm run examples:dev && npm run examples:prod",
|
||||
"examples:dev": "browserify --debug --transform babelify ./examples/index.js --outfile ./examples/build.dev.js",
|
||||
"examples:open": "open http://localhost:8080/dev.html",
|
||||
"examples:prod": "NODE_ENV=production browserify --transform babelify ./examples/index.js --outfile ./examples/build.prod.js",
|
||||
"examples:start": "http-server ./examples",
|
||||
"examples:watch": "watchify --debug --transform babelify ./examples/index.js --outfile ./examples/build.dev.js",
|
||||
"examples": "npm-run-all examples:dev examples:prod",
|
||||
"examples:dev": "browserify --debug --transform babelify ./examples/index.js > ./examples/build.dev.js",
|
||||
"examples:prod": "NODE_ENV=production browserify --transform babelify ./examples/index.js > ./examples/build.prod.js",
|
||||
"gh-pages": "npm run dist && npm run examples && gh-pages --dist ./examples",
|
||||
"lint": "eslint --ignore-pattern 'build.dev.js' --ignore-pattern 'build.prod.js' '{examples,lib}/**/*.js'",
|
||||
"open": "open http://localhost:8080/dev.html",
|
||||
"prepublish": "npm run dist",
|
||||
"start": "npm run examples:start",
|
||||
"test": "npm run dist && npm run lint && npm run test:server",
|
||||
"test:server": "mocha --compilers js:babel-core/register --reporter spec ./test/server.js"
|
||||
"start": "http-server ./examples",
|
||||
"test": "npm-run-all lint dist:npm test:server",
|
||||
"test:server": "mocha --compilers js:babel-core/register --reporter spec ./test/server.js",
|
||||
"watch": "npm-run-all --parallel --print-label watch:dist watch:examples start",
|
||||
"watch:dist": "babel --watch --out-dir ./dist ./lib",
|
||||
"watch:examples": "watchify --debug --transform babelify ./examples/index.js > ./examples/build.dev.js"
|
||||
},
|
||||
"browserify-shim": {
|
||||
"react": "global:React",
|
||||
"react-dom": "global:ReactDOM"
|
||||
"browserify-global-shim": {
|
||||
"immutable": "Immutable",
|
||||
"react": "React",
|
||||
"react-dom": "ReactDOM",
|
||||
"react-dom/server": "ReactDOMServer"
|
||||
},
|
||||
"keywords": [
|
||||
"canvas",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user