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

Comparing version 0.1.0 to 0.2.0

lib/index.js

@@ -9,4 +9,6 @@ "use strict";
 var KEY_FOR_ATTRS = '__attrs';
+var TEMP_KEY_PREFIX = '__key_';
 
 module.exports = function () {
+  var keyIndex = 0;
   return {
@@ -21,2 +23,9 @@ visitor: {
           if (!t.react.isCompatTag(tagName)) {
+            // This plugin may transform a normal child to be an array, which cause key validation in createElement failed.
+            // So add a key for each child in non production env, to prevent key validation warning.
+            if (process.env.NODE_ENV !== 'production') {
+              var keyAttr = t.jsxAttribute(t.jsxIdentifier('key'), t.stringLiteral(TEMP_KEY_PREFIX + keyIndex++));
+              openingPath.node.attributes.unshift(keyAttr);
+            }
+
             return;
@@ -23,0 +32,0 @@ }

package.json

 {
   "name": "babel-plugin-transform-jsx-to-html",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Transform JSX to HTML.",
@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

src/__tests__/index.js

@@ -44,3 +44,5 @@ const jsxToHtmlPlugin = require('../index');
   __html: "<div>"
-}, createElement(View, null), {
+}, createElement(View, {
+  key: "__key_0"
+}), {
   __html: "</div>"
@@ -50,2 +52,18 @@ }];`);
 
+  it('tansform with component already have key', () => {
+    expect(getTransfromCode(`
+<div>
+  <View key="view_1" />
+</div>
+    `)).toBe(`var _createElement;
+
+[{
+  __html: "<div>"
+}, createElement(View, (_createElement = {
+  key: "__key_0"
+}, _createElement["key"] = "view_1", _createElement)), {
+  __html: "</div>"
+}];`);
+  });
+
   it('tansform component with children', () => {
@@ -57,3 +75,5 @@ expect(getTransfromCode(`
 </View>
-    `)).toBe(`createElement(View, null, [{
+    `)).toBe(`createElement(View, {
+  key: "__key_0"
+}, [{
   __html: "<div>a</div>"
@@ -155,2 +175,2 @@ }], [{
   });
-});
+});

src/index.js

@@ -6,4 +6,7 @@ const esutils = require('esutils');
 const KEY_FOR_ATTRS = '__attrs';
+const TEMP_KEY_PREFIX = '__key_';
 
 module.exports = function() {
+  let keyIndex = 0;
+
   return {
@@ -18,2 +21,9 @@ visitor: {
           if (!t.react.isCompatTag(tagName)) {
+            // This plugin may transform a normal child to be an array, which cause key validation in createElement failed.
+            // So add a key for each child in non production env, to prevent key validation warning.
+            if (process.env.NODE_ENV !== 'production') {
+              const keyAttr = t.jsxAttribute(t.jsxIdentifier('key'), t.stringLiteral(TEMP_KEY_PREFIX + keyIndex ++));
+              openingPath.node.attributes.unshift(keyAttr);
+            }
+
             return;
@@ -20,0 +30,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

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

26636

increased by46.85%

Number of package files

6

increased by20%

Lines of code

767

increased by43.36%

Worsened metrics

Number of low supply chain risk alerts

3

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes