reshape-preact-components - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

lib/browser.esm.js

@@ -1,1 +0,1 @@
-function toVnode(t,n,e){var r=t[n.name]||n.name,o={};for(var a in n.attrs)o[a]=n.attrs[a].map(function(t){return t.content}).join("");if(e&&(o._state=e),"string"==typeof n.content)return h(r,o,n.content);if(Array.isArray(n.content)){var c=n.content.map(function(n){return"tag"===n.type?toVnode(t,n):"text"===n.type?n.content:void 0});return h(r,o,c)}return h(r,o)}function browserEncode(t){return window.btoa(JSON.stringify(t))}function browserDecode(t){return JSON.parse(window.atob(t))}function hydrateInitialState(t,n){return toVnode(n,browserDecode_1(t))}import{h}from"preact";var browserEncode_1=browserEncode,browserDecode_1=browserDecode;export{hydrateInitialState,browserEncode_1 as encode,browserDecode_1 as decode};
+function toVnode(e,n,r){var t=e[n.name]||n.name,o={};for(var c in n.attrs)o[c]=n.attrs[c].map(function(e){return e.content}).join("");if(r&&(o._state=r),"string"==typeof n.content)return h(t,o,n.content);if(Array.isArray(n.content)){var i=n.content.map(function(n){return"tag"===n.type?toVnode(e,n):"text"===n.type?n.content:void 0});return h(t,o,i)}return h(t,o)}function browserEncode(e){return window.btoa(prepareUnicodeEncode(JSON.stringify(e)))}function browserDecode(e){return JSON.parse(prepareUnicodeDecode(window.atob(e)))}function prepareUnicodeEncode(e){return encodeURIComponent(e).replace(/%([0-9A-F]{2})/g,function(e,n){return String.fromCharCode("0x"+n)})}function prepareUnicodeDecode(e){return decodeURIComponent(e.split("").map(function(e){return"%"+("00"+e.charCodeAt(0).toString(16)).slice(-2)}).join(""))}function hydrateInitialState(e,n){return toVnode(n,browserDecode_1(e))}import{h}from"preact";var browserEncode_1=browserEncode,browserDecode_1=browserDecode;export{hydrateInitialState,browserEncode_1 as encode,browserDecode_1 as decode};

lib/browser.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("preact")):"function"==typeof define&&define.amd?define(["exports","preact"],e):e(t.reshapePreact=t.reshapePreact||{},t.preact)}(this,function(t,e){"use strict";function n(t,r,o){var i=t[r.name]||r.name,a={};for(var c in r.attrs)a[c]=r.attrs[c].map(function(t){return t.content}).join("");if(o&&(a._state=o),"string"==typeof r.content)return e.h(i,a,r.content);if(Array.isArray(r.content)){var u=r.content.map(function(e){return"tag"===e.type?n(t,e):"text"===e.type?e.content:void 0});return e.h(i,a,u)}return e.h(i,a)}function r(t){return window.btoa(JSON.stringify(t))}function o(t){return JSON.parse(window.atob(t))}function i(t,e){return n(e,c(t))}var a=r,c=o;t.hydrateInitialState=i,t.encode=a,t.decode=c,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("preact")):"function"==typeof define&&define.amd?define(["exports","preact"],e):e(t.reshapePreact=t.reshapePreact||{},t.preact)}(this,function(t,e){"use strict";function n(t,r,o){var i=t[r.name]||r.name,c={};for(var a in r.attrs)c[a]=r.attrs[a].map(function(t){return t.content}).join("");if(o&&(c._state=o),"string"==typeof r.content)return e.h(i,c,r.content);if(Array.isArray(r.content)){var u=r.content.map(function(e){return"tag"===e.type?n(t,e):"text"===e.type?e.content:void 0});return e.h(i,c,u)}return e.h(i,c)}function r(t){return window.btoa(i(JSON.stringify(t)))}function o(t){return JSON.parse(c(window.atob(t)))}function i(t){return encodeURIComponent(t).replace(/%([0-9A-F]{2})/g,function(t,e){return String.fromCharCode("0x"+e)})}function c(t){return decodeURIComponent(t.split("").map(function(t){return"%"+("00"+t.charCodeAt(0).toString(16)).slice(-2)}).join(""))}function a(t,e){return n(e,f(t))}var u=r,f=o;t.hydrateInitialState=a,t.encode=u,t.decode=f,Object.defineProperty(t,"__esModule",{value:!0})});

lib/index.js

 const util = require('reshape-plugin-util')
-const {render} = require('preact-render-to-string')
-const {h} = require('preact')
+const { render } = require('preact-render-to-string')
+const { h } = require('preact')
 const toVdom = require('./reshape-ast-to-vdom')
 const parse = require('reshape-parser')
-const {encode, decode} = require('./serialize')
+const { encode, decode } = require('./serialize')
 
-module.exports = (components) => {
-  return (tree) => {
-    return util.modifyNodes(tree, (node) => {
-      return Object.keys(components).indexOf(node.name) > -1
-    }, (node) => {
-      // encode/compress the original html structure
-      // this can be rehydrated later to reduce client/server duplication
-      const originalHtml = encode(node)
-      return parse(render(toVdom(components, node, originalHtml)))
-    })
+module.exports = components => {
+  return tree => {
+    return util.modifyNodes(
+      tree,
+      node => {
+        return Object.keys(components).indexOf(node.name) > -1
+      },
+      node => {
+        // encode/compress the original html structure
+        // this can be rehydrated later to reduce client/server duplication
+        const originalHtml = encode(node)
+        return parse(render(toVdom(components, node, originalHtml)))
+      }
+    )
   }
@@ -19,0 +23,0 @@ }

lib/reshape-ast-to-vdom.js

@@ -5,3 +5,3 @@ 'use strict';
 
-function toVnode (components, node, originalHtml) {
+function toVnode(components, node, originalHtml) {
   // get element name or component name if registered
@@ -12,6 +12,8 @@ const name = components[node.name] || node.name;
   for (let k in node.attrs) {
-    props[k] = node.attrs[k].map((n) => n.content).join('');
+    props[k] = node.attrs[k].map(n => n.content).join('');
   }
   // if there is a compressed original source, add it as _state prop
-  if (originalHtml) { props._state = originalHtml; }
+  if (originalHtml) {
+    props._state = originalHtml;
+  }
   // content is either a string, a subtree, or there isn't any
@@ -21,3 +23,3 @@ if (typeof node.content === 'string') {
   } else if (Array.isArray(node.content)) {
-    const subtree = node.content.map((n) => {
+    const subtree = node.content.map(n => {
       if (n.type === 'tag') return toVnode(components, n)
@@ -24,0 +26,0 @@ if (n.type === 'text') return n.content

lib/serialize.js

@@ -1,19 +0,41 @@
-function encode (data) {
-  return Buffer.from(JSON.stringify(data)).toString('base64')
+function encode(data) {
+  return Buffer.from(prepareUnicodeEncode(JSON.stringify(data))).toString(
+    'base64'
+  )
 }
 module.exports.encode = encode
 
-function browserEncode (data) {
-  return window.btoa(JSON.stringify(data))
+function browserEncode(data) {
+  return window.btoa(prepareUnicodeEncode(JSON.stringify(data)))
 }
 module.exports.browserEncode = browserEncode
 
-function decode (data) {
-  return JSON.parse(Buffer.from(data, 'base64'))
+function decode(data) {
+  return JSON.parse(prepareUnicodeDecode(String(Buffer.from(data, 'base64'))))
 }
 module.exports.decode = decode
 
-function browserDecode (data) {
-  return JSON.parse(window.atob(data))
+function browserDecode(data) {
+  return JSON.parse(prepareUnicodeDecode(window.atob(data)))
 }
 module.exports.browserDecode = browserDecode
+
+// ref: https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#The_Unicode_Problem
+// encode result to b64
+function prepareUnicodeEncode(str) {
+  return encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
+    return String.fromCharCode(`0x${p1}`)
+  })
+}
+
+// pass in already b64 decoded
+function prepareUnicodeDecode(str) {
+  return decodeURIComponent(
+    str
+      .split('')
+      .map(function(c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+      })
+      .join('')
+  )
+}

package.json

 {
   "name": "reshape-preact-components",
   "description": "server render preact components and use them like custom elements",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "author": "reshape",
@@ -6,0 +6,0 @@ "ava": {

README.md

@@ -139,3 +139,3 @@ # Reshape Preact Components
 const sortableEl = document.querySelector('.sortable')
-console.log(sortable.dataset.state)
+console.log(sortableEl.dataset.state)
 ```
@@ -148,3 +148,3 @@
 const SortableList = require('./sortable-list')
-const {hydrateInitialState} = require('reshape-preact-components/browser')
+const {hydrateInitialState} = require('reshape-preact-components/lib/browser')
 
@@ -159,5 +159,5 @@ const sortableEl = document.querySelector('.sortable')
 
-Note that for client side code, we require from `reshape-preact-components/browser`. Although full es-module compatibility would allow a selective import that avoided additional dependencies, at the moment both node stable and many build systems are *not* yet es-module compatible, so it's safer to import from a separate namespace to ensure there is no extra bloat for the client-side code.
+Note that for client side code, we require from `reshape-preact-components/lib/browser`. Although full es-module compatibility would allow a selective import that avoided additional dependencies, at the moment both node stable and many build systems are *not* yet es-module compatible, so it's safer to import from a separate namespace to ensure there is no extra bloat for the client-side code.
 
-> *Note:* If you're using webpack2, you can require `reshape-preact-components/browser.esm` to get a version that uses es modules
+> *Note:* If you're using webpack2, you can require `reshape-preact-components/lib/browser.esm` to get a version that uses es modules
 
@@ -169,3 +169,3 @@ In the console log, you'll see that we have a full preact vdom ready to go, using the right components everywhere you needed them. Now the last step is just to render it!
 const SortableList = require('./sortable-list')
-const {hydrateInitialState} = require('reshape-preact-components/browser')
+const {hydrateInitialState} = require('reshape-preact-components/lib/browser')
 
@@ -210,3 +210,3 @@ const sortableEl = document.querySelector('.sortable')
   reshape: htmlStandards({
-    locals: { encode: render.encode, data: { foo: 'bar' } },
+    locals: { encode: renderComponents.encode, data: { foo: 'bar' } },
     appendPlugins: [renderComponents({ 'my-component': MyComponent })]
@@ -225,3 +225,3 @@ })
 const {h} = require('preact')
-const {decode} = require('reshape-preact-components/browser')
+const {decode} = require('reshape-preact-components')
 
@@ -234,2 +234,15 @@ module.exports = ({ data }) => {
 
+If your component is only rendered server-side, you should use `decode` exported in the main package, as seen below:
+
+```js
+// my-component.js
+const {h} = require('preact')
+const {decode} = require('reshape-preact-components')
+
+module.exports = ({ data }) => {
+  const _data = decode(data)
+  return (<p>JSON.stringify(_data)</p>)
+}
+```
+
 ### License & Contributing
@@ -236,0 +249,0 @@

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17837

9.35%

Lines of code

98

42.03%

Number of lines in readme file

245

5.6%

Worsened metrics

Number of package files

9

-10%

Number of low quality alerts

4

33.33%

No dependency changes