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

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

17837

increased by9.35%

Lines of code

98

increased by42.03%

Number of lines in readme file

245

increased by5.6%

Worsened metrics

Number of package files

9

decreased by-10%

No dependency changes