node-bigpipe - npm Package Compare versions

Comparing version 1.0.9 to 1.2.8

back-end/Bigpipe.js

@@ -104,2 +104,7 @@ /**
 
+    // it's the same with render()
+    html(...args){
+        this.res.write(this.wrap(...args))
+    }
+
     
@@ -106,0 +111,0 @@ fire(...args){

demo/DemoController.js

@@ -6,3 +6,3 @@ /**
 
-function tagPipe(bp){
+function tagPagelet(bigpipe){
     return new Promise((resolve, reject)=>{
@@ -24,3 +24,3 @@ let rdata = {
             // here the '#tag' match the element id/class used in FE js selector
-            bp.fire('tag', pipeData)
+            bigpipe.fire('tag', pipeData)
             resolve()
@@ -32,3 +32,3 @@ }, 3000)
 
-function articlePipe(bp){
+function articlePagelet(bigpipe){
     return new Promise((resolve, reject)=>{
@@ -44,5 +44,5 @@ let rdata = {
          */
-        bp.res.render('view/article', rdata, (err, html)=>{
+        bigpipe.res.render('view/article', rdata, (err, html)=>{
 
-            bp.render('.wrap > .content', html)
+            bigpipe.render('.wrap > .content', html)
             resolve()
@@ -57,12 +57,13 @@ })
     pindex (req, res, next, page=1){
-        let bp = new Bigpipe('karatBP', req, res)
+        let bigpipe = new Bigpipe('karatBP', req, res)
 
         /**
-         * bp.start会默认将 _bigpipe_id，也就是此处的'karatBP' 参数渲染到模板中。因此前端home模板可以根据这个参数，自动new Bigpipe('{{_bigpipe_id}}'),这样浏览器端可以自动生成对应的bigpipe对象，在浏览器端window对象会自动添加一个变量名为_bigpipe_id也就是 karatBP 的属性，可以全局访问
+         * `bigpipe.start` will inject the _bigpipe_id into the template `data`, So Frontend js can get the `id` by `new Bigpipe('{{_bigpipe_id}}')`
+         * And in Frontend js, it will create a object named by `_bigpipe_id`. for Example, here will create the window.karatBP in browser js.
          */
         
-        bp.start('view/home')
+        bigpipe.start('view/home')
         .pipe([
-            articlePipe,
-            tagPipe,
+            tagPagelet,
+            articlePagelet,
             
@@ -69,0 +70,0 @@ // other ...

package.json

 {
   "name": "node-bigpipe",
-  "version": "1.0.9",
+  "version": "1.2.8",
   "description": "bigpipe for nodejs,express,sails,thinkjs,node-web,modular bigpipe for Node",
@@ -5,0 +5,0 @@ "main": "back-end/Bigpipe.es5.js",

README.md

@@ -32,14 +32,30 @@ # [![node-bigpipe](https://raw.githubusercontent.com/xunuoi/node-bigpipe/master/meta/logo.png)](https://github.com/xunuoi/node-bigpipe) node-bigpipe
 
+**Note:**
+<br>
+If you use `nginx/apache`, please check the server `buffer` config .
+If the response size is small, the nginx won't send pagelet, it will save in its buffer for final response. But you can **close nginx buffer/gzip** to show the bigpipe effect obviously like this:
 
+```bash
+location / {
+    gzip  off;
+    fastcgi_buffer_size 0k;
+    proxy_buffering off;
 
+    ...
+}
+```
+
+
+
+
 ### Backend API
-- `bigpipe.start(viewPath, [data])`: Start render
-- `bigpipe.pipe(promiseList)`：transport the pipe
-- `bigpipe.end([onEndFn])`： Stop and finish the pipe
-- `bigpipe.render(selector, htmlData)`： Similar with `$(selector).html(htmlData)`, set the dom html content 
+- `bigpipe.start(viewPath, [data])`: Start render, `viewPath` can be a basic html template
+- `bigpipe.pipe(promiseList)`：begin to transport the pipe into reponse
+- `bigpipe.end([onEndFn])`： finish the pipe
+- `bigpipe.render(selector, htmlData)`： Similar with `$(selector).html(htmlData)` in browser, set the dom html content 
 - `bigpipe.append(selector, htmlData)`： Similar with `$(selector).append(htmlData)`, append the dom element content
-- `bigpipe.fire(eventName, data)`: Trigger the event which subscribed in Front End. The event should is used to deal with the data transported by bigpipe. You can use `on` api to subscribe the event.
+- `bigpipe.fire(eventName, data)`: Trigger the event which subscribed in Front End. The event should is used to process the data transported by bigpipe. You can use `on` api to subscribe the event in Frontend js.
 
-### Browser API
-- `bigpipe.on(eventName).then(data=>{ // deal with data ...  })`: Subscribe the eventName and you can use `then` to add `callback` fn
+### Frontend js(Browser) API
+- `bigpipe.on(eventName).then(data=>{ // deal with data ...  })`: Subscribe the eventName, you can use callback function in `then` API to process data.
 - `bigpie.fire/render/append` Set the dom content, Same with mentioned above in Backend API.
@@ -50,8 +66,10 @@
 
-- Create a pipe and return a Promise
+- Create a pagelet and return a Promise
 
-The implementation will be put into the tagPipe, bp
+The implementation will be put into the tagPagelet, bp
 
 ```Javascript
-function tagPipe(bp){
+// Here the `bigpipe` parameter is injected by `start` API automatically.
+function tagPagelet(bigpipe){
+
     return new Promise((resolve, reject)=>{
@@ -68,3 +86,3 @@ let rdata = {
                 'html': html,
-                'message': 'for tag pipe html'
+                'message': 'for tag pipe html',
                 'css': ['a.css'],
@@ -74,3 +92,4 @@ 'js': ['b.js'],
             // Here the `tag` event names will subscribed by Frontend js code.
-            bp.fire('tag', pipeData)
+            // Here you can use `render`, `append`, `fire`, it depends on your Backend code
+            bigpipe.fire('tag', pipeData)
             resolve()
@@ -88,14 +107,13 @@ }, 3000)
     index (req, res, next, page=1){
-        let bp = new Bigpipe('karatBP', req, res)
+        let bigpipe = new Bigpipe('karatBP', req, res)
 
         /**
-         * bp.start will put the _bigpipe_id into the template `data`。
-         * So Front End can get the id just by `new Bigpipe('{{_bigpipe_id}}')`
-         * The Object is global in browser
+         * `bigpipe.start` will inject the _bigpipe_id into the template `data`, So Frontend js can get the `id` by `new Bigpipe('{{_bigpipe_id}}')`
+         * And in Frontend js, it will export a object named by `_bigpipe_id`. for Example, here will create the window.karatBP object in browser js.
          */
         
-        bp.start('view/home')
+        bigpipe.start('view/home')
         .pipe([
-            articlePipe,
-            tagPipe,
+            articlePagelet,
+            tagPagelet,
             
@@ -130,4 +148,6 @@ // other ...
 
-// this is a bigpipe, you should return a promise in the bigpipe-function.
-function tagPipe(bp){
+var Bigpipe = require('node-bigpipe').Bigpipe
+
+// this is a pagelet for pipe, you should return a promise in the pagelet-function.
+function tagPagelet(bigpipe){
     return new Promise((resolve, reject)=>{
@@ -149,3 +169,3 @@ let rdata = {
             // here the `tag` match the event in frontend. You can use the bigpipe by `on('tag')` in Frontend js code.
-            bp.fire('tag', pipeData)
+            bigpipe.fire('tag', pipeData)
             resolve()
@@ -157,4 +177,4 @@ }, 3000)
 
-// another bigpipe
-function articlePipe(bp){
+// another pagelet
+function articlePagelet(bigpipe){
     return new Promise((resolve, reject)=>{
@@ -165,6 +185,8 @@ let rdata = {
 
-        bp.res.render('view/article', rdata, (err, html)=>{
+        bigpipe.res.render('view/article', rdata, (err, html)=>{
 
-            bp.render('.wrap > .content', html)
+            // Here you can use `render`, `append`, `fire`
+            bigpipe.render('.wrap > .content', html)
             resolve()
+
         })
@@ -180,10 +202,10 @@ })
     index (req, res, next, page=1){
-        let bp = new Bigpipe('karatBP', req, res)
+        let bigpipe = new Bigpipe('karatBP', req, res)
 
-        bp.start('view/home')
+        bigpipe.start('view/home')
         .pipe([
-            articlePipe,
-            tagPipe,
+            articlePagelet,
+            tagPagelet,
             
-            // other pipe...
+            // other pagelet...
         ])
@@ -205,10 +227,9 @@ .end()
 // The `karatBP` is the bigpipe-id, it should match the Backend definition. Or you can use '{{_bigpipe_id}}' directly.
-new Bigpipe('karatBP')
+var karatBP = new Bigpipe('karatBP')
 
 // You can subscribe the events which match the backend API `fire`, like fire('tag', data), then you can `on('tag')` in FE js.
 karatBP.on('tag')
-.then(function (data) {
-    var pipeData = JSON.parse(data)
-    console.log(pipeData.message)
-    $('#tag').html(pipeData.html)
+.then(function (pageletData) {
+    console.log(pageletData)
+    $('#tag').html(pageletData.html)
 })
@@ -224,3 +245,3 @@
 * Put an additional param `this` into `new Bigpipe()`, like `new Bigpipe('xxxBP', http.req, http.res, this)`
-* Other API is the SAME
+* Other APIs keep SAME with above usage
 * More About ThinkJS: [https://thinkjs.org](https://thinkjs.org)
@@ -237,15 +258,15 @@
     // Put an additional param: `this`
-    let bp = new Bigpipe('thinkBP', http.req, http.res, this)
+    let bigpipe = new Bigpipe('thinkBP', http.req, http.res, this)
 
     // `start` method use default ThinkJS template path: index.html
-    
-    // other API usage is the same
-    bp.start() // or bp.sart('xxx')
+    // Or bigpipe.sart('xxx') to specific some html template file
+    bigpipe.start()
     .pipe([
-        tagPipe,
-        testPipe
+        tagPagelet,
+        articlePagelet
         
-        // other ...
+        // other pagelet...
     ])
     .end()
+    // Other APIs keep same with above usage.
  
@@ -252,0 +273,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

157176

increased by0.72%

Lines of code

677

increased by0.59%

Number of lines in readme file

269

increased by8.47%

No dependency changes