@teleporthq/teleport-plugin-react-base-component - npm Package Compare versions

Comparing version 0.10.2 to 0.10.4

__tests__/index.ts

 import { createReactComponentPlugin } from '../src/index'
 import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
-import { ComponentStructure, ChunkType } from '@teleporthq/teleport-types'
+import { ComponentStructure, ChunkType, FileType } from '@teleporthq/teleport-types'
 
@@ -69,2 +69,18 @@ describe('plugin-react-base-component', () => {
   })
+
+  it('add DOM injection node to the jsx', async () => {
+    const structure: ComponentStructure = {
+      chunks: [],
+      options: {},
+      uidl: component('<h1>Heading</h2>', elementNode('raw')),
+      dependencies: {},
+    }
+    const result = await plugin(structure)
+
+    expect(result.chunks.length).toBe(2)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
+    expect(result.chunks[0].fileType).toBe(FileType.JS)
+    expect(result.chunks[0].name).toBe('component-chunk')
+    expect(result.chunks[0].content).toBeDefined()
+  })
 })

dist/cjs/index.js

 "use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
         function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
@@ -37,3 +38,2 @@ });
 };
-var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -47,3 +47,3 @@ var utils_1 = require("./utils");
     var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? constants_1.DEFAULT_COMPONENT_CHUNK_NAME : _b, _c = _a.exportChunkName, exportChunkName = _c === void 0 ? constants_1.DEFAULT_EXPORT_CHUNK_NAME : _c, _d = _a.importChunkName, importChunkName = _d === void 0 ? constants_1.DEFAULT_IMPORT_CHUNK_NAME : _d;
-    var reactComponentPlugin = function (structure) { return __awaiter(_this, void 0, void 0, function () {
+    var reactComponentPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
         var uidl, dependencies, _a, stateDefinitions, _b, propDefinitions, nodesLookup, jsxParams, jsxOptions, jsxTagStructure, componentName, pureComponent;
@@ -73,2 +73,3 @@ return __generator(this, function (_c) {
                 slotHandling: 'props',
+                domHTMLInjection: function (content) { return utils_1.createDOMInjectionNode(content); },
             };
@@ -75,0 +76,0 @@ jsxTagStructure = teleport_plugin_common_1.createJSXSyntax(uidl.node, jsxParams, jsxOptions);

dist/cjs/utils.d.ts

 import * as types from '@babel/types';
 import { UIDLStateDefinition } from '@teleporthq/teleport-types';
 export declare const createPureComponent: (name: string, stateDefinitions: Record<string, UIDLStateDefinition>, jsxTagTree: types.JSXElement, t?: typeof types) => types.VariableDeclaration;
+export declare const createDOMInjectionNode: (content: string, t?: typeof types) => types.JSXElement;

dist/cjs/utils.js

 "use strict";
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 var __importStar = (this && this.__importStar) || function (mod) {
@@ -28,3 +35,3 @@ if (mod && mod.__esModule) return mod;
     });
-    return t.blockStatement(stateHooks.concat([returnStatement]) || []);
+    return t.blockStatement(__spreadArrays(stateHooks, [returnStatement]) || []);
 };
@@ -44,2 +51,8 @@ /**
 };
+exports.createDOMInjectionNode = function (content, t) {
+    if (t === void 0) { t = types; }
+    return t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier('span'), [
+        t.jsxAttribute(t.jsxIdentifier('dangerouslySetInnerHTML'), t.jsxExpressionContainer(t.objectExpression([t.objectProperty(t.identifier('__html'), t.stringLiteral(content))]))),
+    ], true), null, [], true);
+};
 //# sourceMappingURL=utils.js.map

dist/esm/index.js

@@ -1,2 +0,2 @@
-import { createPureComponent } from './utils';
+import { createPureComponent, createDOMInjectionNode } from './utils';
 import { UIDLUtils } from '@teleporthq/teleport-shared';
@@ -34,2 +34,3 @@ import { createJSXSyntax, ASTBuilders, } from '@teleporthq/teleport-plugin-common';
             slotHandling: 'props',
+            domHTMLInjection: (content) => createDOMInjectionNode(content),
         };
@@ -36,0 +37,0 @@ const jsxTagStructure = createJSXSyntax(uidl.node, jsxParams, jsxOptions);

dist/esm/utils.d.ts

 import * as types from '@babel/types';
 import { UIDLStateDefinition } from '@teleporthq/teleport-types';
 export declare const createPureComponent: (name: string, stateDefinitions: Record<string, UIDLStateDefinition>, jsxTagTree: types.JSXElement, t?: typeof types) => types.VariableDeclaration;
+export declare const createDOMInjectionNode: (content: string, t?: typeof types) => types.JSXElement;

dist/esm/utils.js

@@ -29,2 +29,7 @@ import * as types from '@babel/types';
 };
+export const createDOMInjectionNode = (content, t = types) => {
+    return t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier('span'), [
+        t.jsxAttribute(t.jsxIdentifier('dangerouslySetInnerHTML'), t.jsxExpressionContainer(t.objectExpression([t.objectProperty(t.identifier('__html'), t.stringLiteral(content))]))),
+    ], true), null, [], true);
+};
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "@teleporthq/teleport-plugin-react-base-component",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "A plugin for handling the skeleton/baseline of a React component",
@@ -30,7 +30,7 @@ "author": "teleportHQ",
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-plugin-common": "^0.10.2",
-    "@teleporthq/teleport-shared": "^0.10.1",
-    "@teleporthq/teleport-types": "^0.10.1"
+    "@teleporthq/teleport-plugin-common": "^0.10.4",
+    "@teleporthq/teleport-shared": "^0.10.4",
+    "@teleporthq/teleport-types": "^0.10.4"
   },
-  "gitHead": "91d75226d1fada0ef0ab2b61a7974475ba214fb1"
+  "gitHead": "b5f838aac54b6af2c6bed73e4044ead5b747ecf4"
 }

src/index.ts

@@ -1,2 +0,2 @@
-import { createPureComponent } from './utils'
+import { createPureComponent, createDOMInjectionNode } from './utils'
 import { UIDLUtils } from '@teleporthq/teleport-shared'
@@ -67,2 +67,3 @@ import {
       slotHandling: 'props',
+      domHTMLInjection: (content: string) => createDOMInjectionNode(content),
     }
@@ -69,0 +70,0 @@

src/utils.ts

@@ -56,1 +56,21 @@ import * as types from '@babel/types'
 }
+
+export const createDOMInjectionNode = (content: string, t = types) => {
+  return t.jsxElement(
+    t.jsxOpeningElement(
+      t.jsxIdentifier('span'),
+      [
+        t.jsxAttribute(
+          t.jsxIdentifier('dangerouslySetInnerHTML'),
+          t.jsxExpressionContainer(
+            t.objectExpression([t.objectProperty(t.identifier('__html'), t.stringLiteral(content))])
+          )
+        ),
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  )
+}

No alert changes

Improved metrics

Lines of code

584

increased by10.61%

Worsened metrics

Total package byte prevSize

278055

decreased by-11.84%

Dependency changes

• Updated@teleporthq/teleport-plugin-common@^0.10.4

• Updated@teleporthq/teleport-shared@^0.10.4

• Updated@teleporthq/teleport-types@^0.10.4