babel-plugin-transform-jsx-to-html - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1-beta.0

package.json

 {
   "name": "babel-plugin-transform-jsx-to-html",
-  "version": "0.2.0",
+  "version": "0.2.1-beta.0",
   "description": "Transform JSX to HTML.",
   "license": "BSD-3-Clause",
-  "main": "lib/index.js",
+  "main": "src/index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/alibaba/rax.git"
+    "url": "git+https://github.com/raxjs/rax-scripts.git"
   },
   "bugs": {
-    "url": "https://github.com/alibaba/rax/issues"
+    "url": "https://github.com/raxjs/rax-scripts/issues"
   },
-  "homepage": "https://github.com/alibaba/rax#readme",
+  "homepage": "https://github.com/raxjs/rax-scripts#readme",
   "engines": {
@@ -16,0 +16,0 @@ "npm": ">=3.0.0"

README.md

@@ -55,3 +55,3 @@ # babel-plugin-transform-jsx-to-html
 
-These pre transpiled html can be used in server renderer, like [rax-server-renderer](https://github.com/alibaba/rax/tree/master/packages/rax-server-renderer)
+These pre transpiled html can be used in server renderer, like [rax-server-renderer](https://github.com/raxjs/rax-scripts/tree/master/packages/rax-server-renderer)
 
@@ -58,0 +58,0 @@ ### more examples

src/__tests__/index.js

@@ -8,5 +8,5 @@ const jsxToHtmlPlugin = require('../index');
     presets: [
-      ['@babel/preset-env', {
-        'loose': true,
-        'modules': false
+      [require.resolve('@babel/preset-env'), {
+        loose: true,
+        modules: false
       }],
@@ -19,5 +19,8 @@ require.resolve('@babel/preset-react'),
       }],
-      ['@babel/plugin-transform-react-jsx', {
+      [require.resolve('@babel/plugin-transform-react-jsx'), {
         pragma: 'createElement'
       }],
+      [require.resolve('@babel/plugin-transform-modules-commonjs'), {
+        strictMode: false
+      }]
     ],
@@ -78,5 +81,7 @@ }).code;
 }, [{
-  __html: "<div>a</div>"
+  __html: "<div>a</div>",
+  __isEndWithTextNode: false
 }], [{
-  __html: "<div>b</div>"
+  __html: "<div>b</div>",
+  __isEndWithTextNode: false
 }]);`);
@@ -131,3 +136,4 @@ });
 `)).toBe(`var slot = [{
-  __html: "<div>slot</div>"
+  __html: "<div>slot</div>",
+  __isEndWithTextNode: false
 }];
@@ -176,2 +182,25 @@ [{
   });
+
+  it('mark html when start with text node  ', () => {
+    expect(getTransfromCode(`
+<div className="container">{props.name}, hello!</div>
+`)).toBe(`[{
+  __html: "<div class=\\"container\\">"
+}, props.name, {
+  __html: ", hello!</div>",
+  __isStartWithTextNode: true,
+  __isEndWithTextNode: false
+}];`);
+  });
+
+  it('mark html when end with text node  ', () => {
+    expect(getTransfromCode(`
+<div className="container">hello{props.name}</div>
+`)).toBe(`[{
+  __html: "<div class=\\"container\\">hello",
+  __isEndWithTextNode: true
+}, props.name, {
+  __html: "</div>"
+}];`);
+  });
 });

src/index.js

@@ -92,3 +92,3 @@ const esutils = require('esutils');
     } else {
-      pushResult(child, result);
+      pushResult(child, result, true);
     }
@@ -99,5 +99,6 @@ }
 // push value to result and merge sibling string
-function pushResult(value, result) {
+function pushResult(value, result, isChild) {
+  const isTextNode = t.isStringLiteral(value) && isChild;
+
   const len = result.length;
-
   if (len) {
@@ -109,5 +110,5 @@ const lastIdx = len - 1;
       if (isStringObject(value)) {
-        updateStringObject(lastChild, value.properties[0].value.value);
+        updateStringObject(lastChild, value.properties[0].value.value, isTextNode);
       } else if (t.isStringLiteral(value)) {
-        updateStringObject(lastChild, value.value);
+        updateStringObject(lastChild, value.value, isTextNode);
       } else {
@@ -117,3 +118,3 @@ result.push(value);
     } else if (t.isStringLiteral(value)) {
-      result.push(buildObject(KEY_FOR_HTML, value));
+      result.push(buildObject(KEY_FOR_HTML, value, isTextNode));
     } else {
@@ -123,3 +124,3 @@ result.push(value);
   } else if (t.isStringLiteral(value)) {
-    result.push(buildObject(KEY_FOR_HTML, value));
+    result.push(buildObject(KEY_FOR_HTML, value, isTextNode));
   } else {
@@ -137,9 +138,28 @@ result.push(value);
 
-function updateStringObject(obj, value) {
+function updateStringObject(obj, value, isTextNode) {
   obj.properties[0].value.value = obj.properties[0].value.value + value;
+
+  const textIdentifier = obj.properties.find((prop) => {
+    return prop && prop.key && prop.key.name === '__isEndWithTextNode';
+  });
+
+  // If merger a text node, should update the state of __isEndWithTextNode
+  if (textIdentifier) {
+    textIdentifier.value.value = isTextNode ? true : false;
+  } else if (isTextNode) {
+    obj.properties.push(t.objectProperty(t.identifier('__isEndWithTextNode'), t.booleanLiteral(true)));
+  }
 }
 
-function buildObject(name, value) {
+function buildObject(name, value, isTextNode) {
   let obj = t.objectProperty(t.identifier(name), value);
-  return t.objectExpression([obj]);
+  const properties = [obj];
+
+  // Add text node identifier for server renderer to add split between sidbling text node
+  if (isTextNode) {
+    properties.push(t.objectProperty(t.identifier('__isStartWithTextNode'), t.booleanLiteral(true)));
+    properties.push(t.objectProperty(t.identifier('__isEndWithTextNode'), t.booleanLiteral(true)));
+  }
+
+  return t.objectExpression(properties);
 }
@@ -146,0 +166,0 @@

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-66.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

14222

decreased by-46.61%

Number of package files

4

decreased by-33.33%

Lines of code

415

decreased by-45.89%

No dependency changes