Hydration (#33)

* Add hydration event support

* run hydration for event if component have event listener

* bump

* prep for release

Author: ryansolid

README.md

@@ -3,7 +3,6 @@
 [![Build Status](https://img.shields.io/travis/com/ryansolid/babel-plugin-jsx-dom-expressions.svg?style=flat)](https://travis-ci.com/ryansolid/babel-plugin-jsx-dom-expressions)
 [![Coverage Status](https://img.shields.io/coveralls/github/ryansolid/babel-plugin-jsx-dom-expressions.svg?style=flat)](https://coveralls.io/github/ryansolid/babel-plugin-jsx-dom-expressions?branch=master)
 [![NPM Version](https://img.shields.io/npm/v/babel-plugin-jsx-dom-expressions.svg?style=flat)](https://www.npmjs.com/package/babel-plugin-jsx-dom-expressions)
-![](https://img.shields.io/bundlephobia/minzip/babel-plugin-jsx-dom-expressions.svg?style=flat)
 ![](https://img.shields.io/david/ryansolid/babel-plugin-jsx-dom-expressions.svg?style=flat)
 ![](https://img.shields.io/npm/dt/babel-plugin-jsx-dom-expressions.svg?style=flat)
 [![Gitter](https://img.shields.io/gitter/room/dom-expressions/community)](https://gitter.im/dom-expressions/community)

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "babel-plugin-jsx-dom-expressions",
   "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection",
-  "version": "0.14.15",
+  "version": "0.15.0",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -18,16 +18,16 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@babel/core": "7.7.7",
+    "@babel/core": "7.8.0",
     "babel-plugin-tester": "^8.0.1",
     "coveralls": "3.0.9",
     "dom-expressions": "*",
     "jest": "^24.9.0",
-    "rollup": "^1.27.14",
+    "rollup": "^1.29.0",
     "rollup-plugin-node-resolve": "^5.2.0"
   },
   "dependencies": {
-    "@babel/helper-module-imports": "^7.7.4",
-    "@babel/plugin-syntax-jsx": "^7.7.4"
+    "@babel/helper-module-imports": "^7.8.0",
+    "@babel/plugin-syntax-jsx": "^7.8.0"
   }
 }

package.json

@@ -410,7 +410,11 @@ export default babel => {
         if (child.id) {
           registerTemplate(path, child);
           if (
-            !(child.exprs.length || child.dynamics.length) &&
+            !(
+              child.exprs.length ||
+              child.dynamics.length ||
+              child.postExprs.length
+            ) &&
             child.decl.declarations.length === 1
           )
             return child.decl.declarations[0].init;
@@ -421,7 +425,8 @@ export default babel => {
                 t.blockStatement([
                   child.decl,
                   ...child.exprs.concat(
-                    wrapDynamics(path, child.dynamics) || []
+                    wrapDynamics(path, child.dynamics) || [],
+                    child.postExprs || []
                   ),
                   t.returnStatement(child.id)
                 ])
@@ -648,13 +653,15 @@ export default babel => {
     return { exprs, template: "", component: true };
   }
 
-  function transformAttributes(path, jsx, results) {
+  function transformAttributes(path, jsx, opts, results) {
     let elem = results.id,
+      hasHydratableEvent = false,
       children;
-    const hasChildren = jsx.children.length > 0;
     const spread = t.identifier("_$spread"),
       tagName = getTagName(jsx),
-      isSVG = SVGElements.has(tagName);
+      isSVG = SVGElements.has(tagName),
+      hasChildren = jsx.children.length > 0;
+
     jsx.openingElement.attributes.forEach(attribute => {
       if (t.isJSXSpreadAttribute(attribute)) {
         registerImportMethod(path, "spread");
@@ -673,6 +680,8 @@ export default babel => {
             ])
           )
         );
+        //TODO: generate runtime hydratable event check
+        hasHydratableEvent = true;
         return;
       }
 
@@ -713,6 +722,10 @@ export default babel => {
             key !== key.toLowerCase() &&
             !NonComposedEvents.has(ev)
           ) {
+            // can only hydrate delegated events
+            hasHydratableEvent = opts.hydratableEvents
+              ? opts.hydratableEvents.includes(ev)
+              : true;
             const events =
               path.scope.getProgramParent().data.events ||
               (path.scope.getProgramParent().data.events = new Set());
@@ -804,6 +817,8 @@ export default babel => {
     if (!hasChildren && children) {
       jsx.children.push(children);
     }
+
+    results.hasHydratableEvent = results.hasHydratableEvent || hasHydratableEvent;
   }
 
   function transformChildren(path, jsx, opts, results) {
@@ -832,6 +847,7 @@ export default babel => {
         results.decl.push(...child.decl);
         results.exprs.push(...child.exprs);
         results.dynamics.push(...child.dynamics);
+        results.hasHydratableEvent = results.hasHydratableEvent || child.hasHydratableEvent;
         tempPath = child.id.name;
         i++;
       } else if (child.exprs.length) {
@@ -924,7 +940,11 @@ export default babel => {
           if (child.id) {
             registerTemplate(path, child);
             if (
-              !(child.exprs.length || child.dynamics.length) &&
+              !(
+                child.exprs.length ||
+                child.dynamics.length ||
+                child.postExprs.length
+              ) &&
               child.decl.declarations.length === 1
             )
               return child.decl.declarations[0].init;
@@ -935,7 +955,8 @@ export default babel => {
                   t.blockStatement([
                     child.decl,
                     ...child.exprs.concat(
-                      wrapDynamics(path, child.dynamics) || []
+                      wrapDynamics(path, child.dynamics) || [],
+                      child.postExprs || []
                     ),
                     t.returnStatement(child.id)
                   ])
@@ -961,11 +982,12 @@ export default babel => {
         decl: [],
         exprs: [],
         dynamics: [],
+        postExprs: [],
         isSVG: wrapSVG
       };
       if (wrapSVG) results.template = "<svg>" + results.template;
       if (!info.skipId) results.id = path.scope.generateUidIdentifier("el$");
-      transformAttributes(path, jsx, results);
+      transformAttributes(path, jsx, opts, results);
       if (
         contextToCustomElements &&
         (tagName === "slot" || tagName.indexOf("-") > -1)
@@ -986,6 +1008,19 @@ export default babel => {
         transformChildren(path, jsx, opts, results);
         results.template += `</${tagName}>`;
       }
+      if (info.topLevel && generate === "hydrate" && results.hasHydratableEvent) {
+        registerImportMethod(path, "runHydrationEvents");
+        results.postExprs.push(
+          t.expressionStatement(
+            t.callExpression(t.identifier("_$runHydrationEvents"), [
+              t.callExpression(
+                t.memberExpression(results.id, t.identifier("getAttribute")),
+                [t.stringLiteral("_hk")]
+              )
+            ])
+          )
+        );
+      }
       if (wrapSVG) results.template += "</svg>";
       return results;
     } else if (t.isJSXFragment(jsx)) {
@@ -1056,7 +1091,11 @@ export default babel => {
         if (result.id) {
           registerTemplate(path, result);
           if (
-            !(result.exprs.length || result.dynamics.length) &&
+            !(
+              result.exprs.length ||
+              result.dynamics.length ||
+              result.postExprs.length
+            ) &&
             result.decl.declarations.length === 1
           )
             path.replaceWith(result.decl.declarations[0].init);
@@ -1065,6 +1104,7 @@ export default babel => {
               [result.decl].concat(
                 result.exprs,
                 wrapDynamics(path, result.dynamics) || [],
+                result.postExprs || [],
                 t.returnStatement(result.id)
               )
             );

src/index.js

@@ -1,5 +1,6 @@
 import { template as _$template } from "r-dom";
 import { createComponent as _$createComponent } from "r-dom";
+import { runHydrationEvents as _$runHydrationEvents } from "r-dom";
 import { spread as _$spread } from "r-dom";
 import { wrap as _$wrap } from "r-dom";
 import { getNextElement as _$getNextElement } from "r-dom";
@@ -49,6 +50,8 @@ const template3 = (function() {
 
   _$spread(_el$5, props, true, false);
 
+  _$runHydrationEvents(_el$4.getAttribute("_hk"));
+
   return _el$4;
 })();
 

test/__hydrate_fixtures__/SVG/output.js

@@ -1,6 +1,7 @@
 import { template as _$template } from "r-dom";
 import { wrap as _$wrap } from "r-dom";
 import { getNextElement as _$getNextElement } from "r-dom";
+import { runHydrationEvents as _$runHydrationEvents } from "r-dom";
 import { classList as _$classList } from "r-dom";
 import { spread as _$spread } from "r-dom";
 
@@ -43,6 +44,8 @@ const template = (function() {
     return _p$;
   });
 
+  _$runHydrationEvents(_el$.getAttribute("_hk"));
+
   return _el$;
 })();
 

test/__hydrate_fixtures__/attributeExpressions/output.js

@@ -1,6 +1,7 @@
 import { template as _$template } from "r-dom";
 import { delegateEvents as _$delegateEvents } from "r-dom";
 import { getNextElement as _$getNextElement } from "r-dom";
+import { runHydrationEvents as _$runHydrationEvents } from "r-dom";
 
 const _tmpl$ = _$template(
   `<div id="main"><button>Click Bound</button><button>Click Delegated</button><button>Click Listener</button></div>`
@@ -20,6 +21,8 @@ const template = (function() {
 
   _el$4.addEventListener("CAPS-ev", () => console.log("custom"));
 
+  _$runHydrationEvents(_el$.getAttribute("_hk"));
+
   return _el$;
 })();
 

test/__hydrate_fixtures__/eventExpressions/output.js

@@ -1,6 +1,6 @@
 const template = (
   <div id="main">
-    <style>{"div { color: red; }"}</style>
+    <style>{`div { color: red; }`}</style>
     <h1>Welcome</h1>
     <label for={"entry"}>Edit:</label>
     <input id="entry" type="text" />