Skip to content

Commit 9ab27ae

Browse files
committed
add How it works section
1 parent 80030c0 commit 9ab27ae

File tree

1 file changed

+18
-3
lines changed

1 file changed

+18
-3
lines changed

Readme.md

+18-3
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,32 @@ See Configuration section below for the list of available options.
4444
Examples are written in Markdown where any code blocks will be rendered as a react components. By default any `readme.md` in the component folder is treated as an examples file but you can change it with the `getExampleFilename` option.
4545

4646
React component example:
47-
47+
4848
```jsx
4949
<Button size="large">Push Me</Button>
5050
```
51-
51+
5252
Any [Markdown](http://daringfireball.net/projects/markdown/):
53-
53+
5454
* Foo;
5555
* bar;
5656
* baz.
5757

58+
## How it works
59+
60+
SourceJS plugins are loaded together with main applications, adding additional initialization steps or changing rendering flow using middleware integration. With this plugin, in development mode, SourceJS in enhanced with webpack middleware, that builds all the React examples on demand and listens to file changes for hot-reloading.
61+
62+
Running app with `NODE_ENV=production`, webpack will be triggered only once to build a static, minified version, which is done also on app start.
63+
64+
Rendering flow with this plugins looks like this:
65+
66+
* On app start `webpack-dev-middleware` and `webpack-hot-middleware` are loaded from `core/index.js`
67+
* Then happens initial build of `bundle.js` which packs all the components and development tools into one package
68+
* Using custom loaders, webpack gathers info about all component from `readme.md` files, and saves defined code examples
69+
* On Spec page request, common `bundle.js` is loaded onto every page, loading only examples of defined spec
70+
* To determine which component to load from common bundle, all examples are grouped by Spec name, and special middleware (`code/middleware/index.js`) during rendering flow replaces code examples from `readme.md` with special hooks, that are then used as roots to React components
71+
* Using SourceJS as a platform together with this integration plugin you get benefits both from SourceJS ecosystem, and custom client-side rendreding handled by react/webpack and hot module replacement tool
72+
5873
## Configuration
5974

6075
Use SourceJS `options.js` for deep plugin configuration.

0 commit comments

Comments
 (0)