babel-plugin-jsx-dom-expressions 0.35.2 → 0.35.4

package/README.md

@@ -39,7 +39,7 @@ Compiles to:
 
 ```jsx
 import { insert as _$insert } from "dom";
-import { wrap as _$wrap } from "dom";
+import { effect as _$effect } from "dom";
 
 const _tmpl$ = document.createElement("template");
 _tmpl$.innerHTML = `<tr><td class="col-md-1"></td><td class="col-md-4"><a></a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>`;
@@ -53,7 +53,7 @@ const view = ({ item }) => {
       _el$4 = _el$3.firstChild,
       _el$5 = _el$3.nextSibling,
       _el$6 = _el$5.firstChild;
-    _$wrap(() => (_el$.className = itemId === selected() ? "danger" : ""));
+    _$effect(() => (_el$.className = itemId === selected() ? "danger" : ""));
     _$insert(_el$2, itemId);
     _el$4.onclick = e => select(item, e);
     _$insert(_el$4, () => item.label);
@@ -73,34 +73,77 @@ The use of cloneNode improves repeat insert performance and precompilation reduc
 
 ## Plugin Options
 
-### moduleName (required)
+### moduleName
+
+- Type: `string`
+- Required: Yes
 
 The name of the runtime module to import the methods from.
 
 ### generate
 
+- Type: `'dom' | 'ssr'`
+- Default: `'dom'`
+
 The output mode of the compiler. Can be "dom"(default), "ssr". "dom" is standard output. "ssr" is for server side rendering of strings.
 
 ### hydratable
 
+- Type: `boolean`
+- Default: `false`
+
 Indicate whether the output should contain hydratable markers.
 
 ### delegateEvents
 
+- Type: `boolean`
+- Default: `true`
+
 Boolean to indicate whether to enable automatic event delegation on camelCase.
 
 ### wrapConditionals
 
+- Type: `boolean`
+- Default: `true`
+
 Boolean indicates whether smart conditional detection should be used. This optimizes simple boolean expressions and ternaries in JSX.
 
 ### contextToCustomElements
 
+- Type: `boolean`
+- Default: `false`
+
 Boolean indicates whether to set current render context on Custom Elements and slots. Useful for seemless Context API with Web Components.
 
 ### builtIns
 
+- Type: `boolean`
+- Default: `string[]`
+
 Array of Component exports from module, that aren't included by default with the library. This plugin will automatically import them if it comes across them in the JSX.
 
+### effectWrapper
+
+- Type: `string`
+- Default: `effect`
+  
+This plugin leverages a heuristic for reactive wrapping and lazy evaluation of JSX expressions. This option indicates the reactive wrapper function name (`effect`), defaults to `effect`.
+
+### staticMarker
+
+- Type: `string`
+- Default: `@once`
+
+Comment decorator string indicates the static expression, used to tell the compiler not to wrap them by `effect` function, defaults to `@once`.
+
+### memoWrapper
+
+- Type: `string`
+- Default: `memo`
+
+Memos let you efficiently use a derived value in many reactive computations. This option indicates the memo function name, defaults to `memo`.
+
+
 ## Special Binding
 
 ### ref

package/index.js

@@ -1476,7 +1476,7 @@ function processSpreads$1(path, attributes, { elem, isSVG, hasChildren, wrapCond
         runningObject.push(
           t__namespace.objectProperty(
             t__namespace.stringLiteral(key),
-            isContainer ? node.value.expression : node.value || Properties.has(key) ? t__namespace.booleanLiteral(true) : t__namespace.stringLiteral("")
+            isContainer ? node.value.expression : node.value || (Properties.has(key) ? t__namespace.booleanLiteral(true) : t__namespace.stringLiteral(""))
           )
         );
       }
@@ -2196,10 +2196,10 @@ function createElement(path, { topLevel, hydratable }) {
         if (v.length) memo.push(t__namespace.stringLiteral(v));
       } else {
         const child = transformNode(path);
-        if (markers && child.exprs.length) memo.push(t__namespace.stringLiteral("<!--#-->"));
+        if (markers && child.exprs.length && !child.spreadElement) memo.push(t__namespace.stringLiteral("<!--#-->"));
         if (child.exprs.length && !child.spreadElement) child.exprs[0] = escapeExpression(path, child.exprs[0]);
         memo.push(getCreateTemplate(config, path, child)(path, child, true));
-        if (markers && child.exprs.length) memo.push(t__namespace.stringLiteral("<!--/-->"));
+        if (markers && child.exprs.length && !child.spreadElement) memo.push(t__namespace.stringLiteral("<!--/-->"));
       }
       return memo;
     }, []);
@@ -2890,9 +2890,9 @@ function transformComponent(path) {
   if (childResult && childResult[0]) {
     if (childResult[1]) {
       const body =
-        t__namespace.isCallExpression(childResult[0]) && t__namespace.isFunction(childResult[0].callee)
-          ? childResult[0].callee.body
-          : childResult[0].body;
+        t__namespace.isCallExpression(childResult[0]) && t__namespace.isFunction(childResult[0].arguments[0])
+          ? childResult[0].arguments[0].body
+          : childResult[0].body ? childResult[0].body : childResult[0];
       runningObject.push(
         t__namespace.objectMethod(
           "get",

package/package.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.35.2",
+  "version": "0.35.4",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -27,5 +27,5 @@
   "peerDependencies": {
     "@babel/core": "^7.0.0"
   },
-  "gitHead": "e0300cedae86061bcbde47e80a8007fdf28facd4"
+  "gitHead": "dcc322b7f4bf7d651196b99504b2d17bb80f1973"
 }