docsify-demo-box-react - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

docs/README.md

@@ -5,3 +5,3 @@ # [docsify-demo-box-react](https://github.com/njleonzhang/docsify-demo-box-react/)
 
-This plugin is for React. For Vue, please use [docsify-demo-box](https://github.com/njleonzhang/docsify-demo-box)
+This plugin is for React. For Vue, please use [docsify-demo-box-vue](https://njleonzhang.github.io/docsify-demo-box-vue)
 
@@ -11,3 +11,3 @@ ## Usage
 1. import react and this plugin to docsify `index.html`
-```
+```html
 <script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
@@ -35,3 +35,3 @@ <script src="https://cdn.bootcss.com/react/15.6.1/react-dom.js"></script>
 
-parameter of `DemoBoxPlugin.create`:
+parameter of `create`:
 * jsResources: javascript script will be added in `jsfiddle` html filed
@@ -48,5 +48,7 @@ * cssResources: css link will be added in `jsfiddle` css filed
 
-```
+```jsx
 <desc>
-Hello world
+Hello `world`
+* a
+* b
 </desc>
@@ -82,3 +84,5 @@ <script>
 <desc>
-Hello world
+Hello `world`
+* a
+* b
 </desc>
@@ -98,6 +102,7 @@ <script>
           <div className='wrapper' ref={el => this.el = el}>
-            <div>
-            <p>author: {this.globalVariable}</p>
-            <button style={{color: this.state.color}} className='test' onClick={e => {alert('author: ' + this.globalVariable); this.setState({color: 'red'})}}>test</button>
-            </div>
+            <label className="test-label">
+                <input />
+                <p className="test">author: {this.globalVariable}</p>
+                <button style={{color: this.state.color}} className='test-button' onClick={e => {alert('author: ' + this.globalVariable); this.setState({color: 'red'})}}>test</button>
+            </label>
           </div>
@@ -115,9 +120,13 @@ </div>
 
+> notice: You must write the component as a class and export it as default, like `export default class Application extends React.Component`, because this plugin use the key word `export default class` to parse the code.
+
+> `desc` tag can be used to add description for the sample. `Markdown` syntax is supported
+
 ## Advanced options, AKA comments
 
-### Don't embed the global `bootcode`
+### Don't embed the global bootcode
 
 In this sample, you may have found that `globalVariable` is defined in `index.html`.
 
-```
+```js
   var bootCode = 'var globalVariable = "leon"' // bootCode is for jsfiddle
@@ -128,5 +137,5 @@ var globalVariable = "leon"   // this define is rendering for preview
 Now if you want to change the value of `globalVariable`, you need to change both values for preview and `jsfiddle`.
-It's easy for preview just override the define, but for `jsfiddle` you need this comments `/*no-boot-code*/`.
+It's easy for preview, just override the define. but for `jsfiddle`, you need this comments `/*no-boot-code*/`.
 
-```
+```jsx
 /*react*/
@@ -164,3 +173,3 @@ /*no-boot-code*/
 ### special js link
-In this smaple, default js resource is defined as `react` and `react-dom` in `index.html`
+In this sample, default js resource is defined as `react` and `react-dom` in `index.html`
 
@@ -185,3 +194,3 @@ ```
 
-```
+```jsx
 /*react*/
@@ -188,0 +197,0 @@ /*jsResource https://unpkg.com/vue */

package.json

 {
   "name": "docsify-demo-box-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "write React jsx demo in docsify with instant preview and jsfiddle integration",
@@ -5,0 +5,0 @@ "author": "njleonzhang <[e-mail]>",

README.md

@@ -1,4 +0,4 @@
-# docsify-demo-box-plugin
+# docsify-demo-box-react
 
-> write React jsx demo in [docsify](https://docsify.js.org/#/) with instant preview and jsfiddle integration
+> write React jsx demo in [docsify](https://docsify.js.org/#/) with instant preview and `jsfiddle` integration
 
@@ -10,3 +10,4 @@
 
+[Doc](https://njleonzhang.github.io/docsify-demo-box-react/)
 
-[Doc](https://njleonzhang.github.io/docsify-demo-box-react/)
+This plugin is for React. For Vue, please use [docsify-demo-box-vue](https://njleonzhang.github.io/docsify-demo-box-vue)

src/plugin/index.js

 import {generateComponent} from '../components/'
 import ReactDOM from  'react-dom'
 
-function renderComponent(Component, id) {
-  setTimeout(function () {
-    ReactDOM.render(Component(), document.getElementById(id + ''))
-  })
-}
-
 export let create = function(jsResources, cssResources, bootCode) {
   return function(hook, vm) {
     let id = 0
+
+    class Components {
+      constructor() {
+        this.componentCache = {}
+      }
+
+      cache(Component, id) {
+        let href = window.location.href
+        let componentObj = {
+          id,
+          Component
+        }
+
+        if (this.componentCache[href]) {
+          this.componentCache[href].push(componentObj)
+        } else {
+          this.componentCache[href] = [componentObj]
+        }
+      }
+
+      renderFromCache() {
+        let href = window.location.href
+        let componentObjs = this.componentCache[href]
+        if (componentObjs) {
+          componentObjs.forEach(componentObj => {
+            ReactDOM.render(componentObj.Component(), document.getElementById(componentObj.id + ''))
+          })
+        }
+      }
+    }
+
+    let components = new Components()
+
+    function renderComponent(Component, id) {
+      components.cache(Component, id)
+
+      setTimeout(function () {
+        ReactDOM.render(Component(), document.getElementById(id + ''))
+      })
+    }
+
+    // for debug
+    window.__components = components
+
     window.$docsify.markdown = {
@@ -29,3 +67,10 @@ renderer: {
     }
+
+    hook.mounted(function() {
+      // Called after initial completion. Only trigger once, no arguments.
+      vm.router.onchange(_ => {
+        components.renderFromCache()
+      })
+    })
   }
 }

No alert changes

Improved metrics

Number of lines in readme file

13

increased by8.33%

Number of low supply chain risk alerts

82

decreased by-44.97%

Number of medium supply chain risk alerts

8

decreased by-27.27%

Worsened metrics

Total package byte prevSize

3156205

decreased by-19.61%

Number of package files

36

decreased by-2.7%

Lines of code

22530

decreased by-48.1%

No dependency changes