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

Comparing version 0.36.5 to 0.36.6

dist/cjs/node-handlers.js

@@ -191,3 +191,3 @@ "use strict";
 var generateComponentContent = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var externals, plugins, _a, elementType, _b, attrs, _c, children, dependencies, _d, chunks, options, componentName, component, componentClone, lookupTableForCurrentPage, combinedProps, combinedStates, statesForInstance, propsForInstance, _i, _e, propKey, prop, propFromCurrentComponent, componentWrapper, isExistingNode, componentInstanceToGenerate, compTag, cssPlugin, initialStructure, result;
+    var externals, plugins, _a, elementType, _b, attrs, _c, children, dependencies, _d, chunks, options, componentName, component, componentClone, lookupTableForCurrentPage, combinedProps, combinedStates, statesForInstance, propsForInstance, _i, _e, propKey, attribute, propFromCurrentComponent, componentWrapper, isExistingNode, componentInstanceToGenerate, compTag, cssPlugin, initialStructure, result;
     var _f, _g;
@@ -248,6 +248,10 @@ return __generator(this, function (_h) {
                 statesForInstance = Object.keys(combinedStates).reduce(function (acc, propKey) {
-                    var _a, _b;
-                    if (attrs[propKey]) {
-                        acc[propKey] = __assign(__assign({}, combinedStates[propKey]), { defaultValue: ((_a = attrs[propKey]) === null || _a === void 0 ? void 0 : _a.content) || ((_b = combinedStates[propKey]) === null || _b === void 0 ? void 0 : _b.defaultValue) });
+                    var _a;
+                    var attr = attrs[propKey];
+                    if (attr.type === 'object') {
+                        throw new Error("Object attributes are not supported in html exports");
                     }
+                    if (attr) {
+                        acc[propKey] = __assign(__assign({}, combinedStates[propKey]), { defaultValue: (attr === null || attr === void 0 ? void 0 : attr.content) || ((_a = combinedStates[propKey]) === null || _a === void 0 ? void 0 : _a.defaultValue) });
+                    }
                     else {
@@ -262,6 +266,6 @@ acc[propKey] = combinedStates[propKey];
             case 1:
-                if (!(_i < _e.length)) return [3 /*break*/, 9];
+                if (!(_i < _e.length)) return [3 /*break*/, 7];
                 propKey = _e[_i];
-                prop = attrs[propKey];
-                if (!((prop === null || prop === void 0 ? void 0 : prop.type) === 'element')) return [3 /*break*/, 3];
+                attribute = attrs[propKey];
+                if (!((attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'element')) return [3 /*break*/, 3];
                 propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: attrs[propKey] });
@@ -271,39 +275,43 @@ return [4 /*yield*/, (0, exports.generateHtmlSyntax)(attrs[propKey], component.name, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
                 _h.sent();
-                return [3 /*break*/, 8];
+                _h.label = 3;
             case 3:
-                if (!((prop === null || prop === void 0 ? void 0 : prop.type) === 'dynamic')) return [3 /*break*/, 4];
-                // When we are using a component instance in a component and the attribute
-                // that is passed to the component is of dynamic reference.
-                // If means, the component is redirecting the prop that is received to the prop of the component that it is consuming.
-                // In this case, we need to pass the value of the prop that is received to the prop of the component that it is consuming.
-                // And similary we do the same for the states.
-                switch (prop.content.referenceType) {
-                    case 'prop':
-                        propsForInstance[propKey] = combinedProps[propKey];
-                        break;
-                    case 'state':
-                        propsForInstance[propKey] = combinedStates[propKey];
-                        break;
-                    default:
-                        throw new Error("ReferenceType ".concat(prop.content.referenceType, " is not supported in HTML Export."));
+                if ((attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'dynamic') {
+                    // When we are using a component instance in a component and the attribute
+                    // that is passed to the component is of dynamic reference.
+                    // If means, the component is redirecting the prop that is received to the prop of the component that it is consuming.
+                    // In this case, we need to pass the value of the prop that is received to the prop of the component that it is consuming.
+                    // And similary we do the same for the states.
+                    switch (attribute.content.referenceType) {
+                        case 'prop':
+                            propsForInstance[propKey] = combinedProps[propKey];
+                            break;
+                        case 'state':
+                            propsForInstance[propKey] = combinedStates[propKey];
+                            break;
+                        default:
+                            throw new Error("ReferenceType ".concat(attribute.content.referenceType, " is not supported in HTML Export."));
+                    }
                 }
-                return [3 /*break*/, 8];
-            case 4:
-                if (!prop) return [3 /*break*/, 5];
-                propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: ((_f = attrs[propKey]) === null || _f === void 0 ? void 0 : _f.content) || ((_g = combinedProps[propKey]) === null || _g === void 0 ? void 0 : _g.defaultValue) });
-                return [3 /*break*/, 8];
-            case 5:
+                if ((attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'object') {
+                    propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: (attribute === null || attribute === void 0 ? void 0 : attribute.content) || ((_f = combinedProps[propKey]) === null || _f === void 0 ? void 0 : _f.defaultValue) });
+                }
+                if ((attribute === null || attribute === void 0 ? void 0 : attribute.type) !== 'dynamic' &&
+                    (attribute === null || attribute === void 0 ? void 0 : attribute.type) !== 'element' &&
+                    (attribute === null || attribute === void 0 ? void 0 : attribute.type) !== 'object') {
+                    propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: (attribute === null || attribute === void 0 ? void 0 : attribute.content) || ((_g = combinedProps[propKey]) === null || _g === void 0 ? void 0 : _g.defaultValue) });
+                }
+                if (!(attribute === undefined)) return [3 /*break*/, 6];
                 propFromCurrentComponent = combinedProps[propKey];
-                if (!(propFromCurrentComponent.type === 'element' && propFromCurrentComponent.defaultValue)) return [3 /*break*/, 7];
+                if (!(propFromCurrentComponent.type === 'element' && propFromCurrentComponent.defaultValue)) return [3 /*break*/, 5];
                 return [4 /*yield*/, (0, exports.generateHtmlSyntax)(propFromCurrentComponent.defaultValue, component.name, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
-            case 6:
+            case 4:
                 _h.sent();
-                _h.label = 7;
-            case 7:
+                _h.label = 5;
+            case 5:
                 propsForInstance[propKey] = propFromCurrentComponent;
-                _h.label = 8;
-            case 8:
+                _h.label = 6;
+            case 6:
                 _i++;
                 return [3 /*break*/, 1];
-            case 9:
+            case 7:
                 componentWrapper = teleport_shared_1.StringUtils.camelCaseToDashCase("".concat(componentName, "-wrapper"));
@@ -329,3 +337,3 @@ isExistingNode = nodesLookup[componentWrapper];
                 return [4 /*yield*/, (0, exports.generateHtmlSyntax)(componentInstanceToGenerate, component.name, nodesLookup, propsForInstance, statesForInstance, subComponentOptions, structure)];
-            case 10:
+            case 8:
                 compTag = _h.sent();
@@ -367,3 +375,3 @@ cssPlugin = (0, teleport_plugin_css_1.createCSSPlugin)({
                     }); }, Promise.resolve(initialStructure))];
-            case 11:
+            case 9:
                 result = _h.sent();
@@ -383,5 +391,13 @@ result.chunks.forEach(function (chunk) {
 _compName, nodesLookup, propDefinitions, stateDefinitions) { return __awaiter(void 0, void 0, void 0, function () {
-    var usedReferenceValue, elementNode, spanTagWrapper, commentNode, spanTagWrapper, commentNode, spanTag;
+    var usedReferenceValue, pathKeys, value, elementNode, spanTagWrapper, commentNode, spanTagWrapper, commentNode, spanTag;
     return __generator(this, function (_a) {
         usedReferenceValue = getValueFromReference(node.content.id, node.content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
+        if (usedReferenceValue.type === 'object' && usedReferenceValue.defaultValue) {
+            pathKeys = node.content.id.split(/\.|\[(['"]?)(.+?)\1\]/).filter(Boolean);
+            pathKeys.shift();
+            value = teleport_shared_1.GenericUtils.getValueFromPath(pathKeys.join('.'), usedReferenceValue.defaultValue);
+            if (value) {
+                return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createTextNode(String(value))];
+            }
+        }
         if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue) {
@@ -490,2 +506,3 @@ elementNode = usedReferenceValue.defaultValue;
             case 'expr':
+            case 'object':
                 break;
@@ -492,0 +509,0 @@ default: {

dist/esm/node-handlers.js

@@ -60,3 +60,3 @@ var __assign = (this && this.__assign) || function () {
 import { HASTBuilders, HASTUtils } from '@teleporthq/teleport-plugin-common';
-import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared';
+import { GenericUtils, StringUtils, UIDLUtils } from '@teleporthq/teleport-shared';
 import { staticNode } from '@teleporthq/teleport-uidl-builders';
@@ -188,3 +188,3 @@ import { createCSSPlugin } from '@teleporthq/teleport-plugin-css';
 var generateComponentContent = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var externals, plugins, _a, elementType, _b, attrs, _c, children, dependencies, _d, chunks, options, componentName, component, componentClone, lookupTableForCurrentPage, combinedProps, combinedStates, statesForInstance, propsForInstance, _i, _e, propKey, prop, propFromCurrentComponent, componentWrapper, isExistingNode, componentInstanceToGenerate, compTag, cssPlugin, initialStructure, result;
+    var externals, plugins, _a, elementType, _b, attrs, _c, children, dependencies, _d, chunks, options, componentName, component, componentClone, lookupTableForCurrentPage, combinedProps, combinedStates, statesForInstance, propsForInstance, _i, _e, propKey, attribute, propFromCurrentComponent, componentWrapper, isExistingNode, componentInstanceToGenerate, compTag, cssPlugin, initialStructure, result;
     var _f, _g;
@@ -245,6 +245,10 @@ return __generator(this, function (_h) {
                 statesForInstance = Object.keys(combinedStates).reduce(function (acc, propKey) {
-                    var _a, _b;
-                    if (attrs[propKey]) {
-                        acc[propKey] = __assign(__assign({}, combinedStates[propKey]), { defaultValue: ((_a = attrs[propKey]) === null || _a === void 0 ? void 0 : _a.content) || ((_b = combinedStates[propKey]) === null || _b === void 0 ? void 0 : _b.defaultValue) });
+                    var _a;
+                    var attr = attrs[propKey];
+                    if (attr.type === 'object') {
+                        throw new Error("Object attributes are not supported in html exports");
                     }
+                    if (attr) {
+                        acc[propKey] = __assign(__assign({}, combinedStates[propKey]), { defaultValue: (attr === null || attr === void 0 ? void 0 : attr.content) || ((_a = combinedStates[propKey]) === null || _a === void 0 ? void 0 : _a.defaultValue) });
+                    }
                     else {
@@ -259,6 +263,6 @@ acc[propKey] = combinedStates[propKey];
             case 1:
-                if (!(_i < _e.length)) return [3 /*break*/, 9];
+                if (!(_i < _e.length)) return [3 /*break*/, 7];
                 propKey = _e[_i];
-                prop = attrs[propKey];
-                if (!((prop === null || prop === void 0 ? void 0 : prop.type) === 'element')) return [3 /*break*/, 3];
+                attribute = attrs[propKey];
+                if (!((attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'element')) return [3 /*break*/, 3];
                 propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: attrs[propKey] });
@@ -268,39 +272,43 @@ return [4 /*yield*/, generateHtmlSyntax(attrs[propKey], component.name, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
                 _h.sent();
-                return [3 /*break*/, 8];
+                _h.label = 3;
             case 3:
-                if (!((prop === null || prop === void 0 ? void 0 : prop.type) === 'dynamic')) return [3 /*break*/, 4];
-                // When we are using a component instance in a component and the attribute
-                // that is passed to the component is of dynamic reference.
-                // If means, the component is redirecting the prop that is received to the prop of the component that it is consuming.
-                // In this case, we need to pass the value of the prop that is received to the prop of the component that it is consuming.
-                // And similary we do the same for the states.
-                switch (prop.content.referenceType) {
-                    case 'prop':
-                        propsForInstance[propKey] = combinedProps[propKey];
-                        break;
-                    case 'state':
-                        propsForInstance[propKey] = combinedStates[propKey];
-                        break;
-                    default:
-                        throw new Error("ReferenceType ".concat(prop.content.referenceType, " is not supported in HTML Export."));
+                if ((attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'dynamic') {
+                    // When we are using a component instance in a component and the attribute
+                    // that is passed to the component is of dynamic reference.
+                    // If means, the component is redirecting the prop that is received to the prop of the component that it is consuming.
+                    // In this case, we need to pass the value of the prop that is received to the prop of the component that it is consuming.
+                    // And similary we do the same for the states.
+                    switch (attribute.content.referenceType) {
+                        case 'prop':
+                            propsForInstance[propKey] = combinedProps[propKey];
+                            break;
+                        case 'state':
+                            propsForInstance[propKey] = combinedStates[propKey];
+                            break;
+                        default:
+                            throw new Error("ReferenceType ".concat(attribute.content.referenceType, " is not supported in HTML Export."));
+                    }
                 }
-                return [3 /*break*/, 8];
-            case 4:
-                if (!prop) return [3 /*break*/, 5];
-                propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: ((_f = attrs[propKey]) === null || _f === void 0 ? void 0 : _f.content) || ((_g = combinedProps[propKey]) === null || _g === void 0 ? void 0 : _g.defaultValue) });
-                return [3 /*break*/, 8];
-            case 5:
+                if ((attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'object') {
+                    propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: (attribute === null || attribute === void 0 ? void 0 : attribute.content) || ((_f = combinedProps[propKey]) === null || _f === void 0 ? void 0 : _f.defaultValue) });
+                }
+                if ((attribute === null || attribute === void 0 ? void 0 : attribute.type) !== 'dynamic' &&
+                    (attribute === null || attribute === void 0 ? void 0 : attribute.type) !== 'element' &&
+                    (attribute === null || attribute === void 0 ? void 0 : attribute.type) !== 'object') {
+                    propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: (attribute === null || attribute === void 0 ? void 0 : attribute.content) || ((_g = combinedProps[propKey]) === null || _g === void 0 ? void 0 : _g.defaultValue) });
+                }
+                if (!(attribute === undefined)) return [3 /*break*/, 6];
                 propFromCurrentComponent = combinedProps[propKey];
-                if (!(propFromCurrentComponent.type === 'element' && propFromCurrentComponent.defaultValue)) return [3 /*break*/, 7];
+                if (!(propFromCurrentComponent.type === 'element' && propFromCurrentComponent.defaultValue)) return [3 /*break*/, 5];
                 return [4 /*yield*/, generateHtmlSyntax(propFromCurrentComponent.defaultValue, component.name, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
-            case 6:
+            case 4:
                 _h.sent();
-                _h.label = 7;
-            case 7:
+                _h.label = 5;
+            case 5:
                 propsForInstance[propKey] = propFromCurrentComponent;
-                _h.label = 8;
-            case 8:
+                _h.label = 6;
+            case 6:
                 _i++;
                 return [3 /*break*/, 1];
-            case 9:
+            case 7:
                 componentWrapper = StringUtils.camelCaseToDashCase("".concat(componentName, "-wrapper"));
@@ -326,3 +334,3 @@ isExistingNode = nodesLookup[componentWrapper];
                 return [4 /*yield*/, generateHtmlSyntax(componentInstanceToGenerate, component.name, nodesLookup, propsForInstance, statesForInstance, subComponentOptions, structure)];
-            case 10:
+            case 8:
                 compTag = _h.sent();
@@ -364,3 +372,3 @@ cssPlugin = createCSSPlugin({
                     }); }, Promise.resolve(initialStructure))];
-            case 11:
+            case 9:
                 result = _h.sent();
@@ -380,5 +388,13 @@ result.chunks.forEach(function (chunk) {
 _compName, nodesLookup, propDefinitions, stateDefinitions) { return __awaiter(void 0, void 0, void 0, function () {
-    var usedReferenceValue, elementNode, spanTagWrapper, commentNode, spanTagWrapper, commentNode, spanTag;
+    var usedReferenceValue, pathKeys, value, elementNode, spanTagWrapper, commentNode, spanTagWrapper, commentNode, spanTag;
     return __generator(this, function (_a) {
         usedReferenceValue = getValueFromReference(node.content.id, node.content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
+        if (usedReferenceValue.type === 'object' && usedReferenceValue.defaultValue) {
+            pathKeys = node.content.id.split(/\.|\[(['"]?)(.+?)\1\]/).filter(Boolean);
+            pathKeys.shift();
+            value = GenericUtils.getValueFromPath(pathKeys.join('.'), usedReferenceValue.defaultValue);
+            if (value) {
+                return [2 /*return*/, HASTBuilders.createTextNode(String(value))];
+            }
+        }
         if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue) {
@@ -487,2 +503,3 @@ elementNode = usedReferenceValue.defaultValue;
             case 'expr':
+            case 'object':
                 break;
@@ -489,0 +506,0 @@ default: {

package.json

 {
   "name": "@teleporthq/teleport-plugin-html-base-component",
-  "version": "0.36.5",
+  "version": "0.36.6",
   "description": "A plugin for handling the skeleton/baseline of a base html component",
@@ -27,9 +27,9 @@ "author": "teleportHQ",
   "dependencies": {
-    "@teleporthq/teleport-plugin-common": "^0.36.5",
-    "@teleporthq/teleport-plugin-css": "^0.36.5",
-    "@teleporthq/teleport-shared": "^0.36.0",
-    "@teleporthq/teleport-types": "^0.36.0",
-    "@teleporthq/teleport-uidl-builders": "^0.36.0"
+    "@teleporthq/teleport-plugin-common": "^0.36.6",
+    "@teleporthq/teleport-plugin-css": "^0.36.6",
+    "@teleporthq/teleport-shared": "^0.36.6",
+    "@teleporthq/teleport-types": "^0.36.6",
+    "@teleporthq/teleport-uidl-builders": "^0.36.6"
   },
-  "gitHead": "a5912f5237c719a853721dd7db19b58effa10d9c"
+  "gitHead": "64a55c39dba17f13dc58805a7a28f74cd96dd03a"
 }

src/node-handlers.ts

@@ -28,3 +28,3 @@ import {
 import { HASTBuilders, HASTUtils } from '@teleporthq/teleport-plugin-common'
-import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
+import { GenericUtils, StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
 import { staticNode } from '@teleporthq/teleport-uidl-builders'
@@ -343,6 +343,11 @@ import { createCSSPlugin } from '@teleporthq/teleport-plugin-css'
     (acc: Record<string, UIDLStateDefinition>, propKey) => {
-      if (attrs[propKey]) {
+      const attr = attrs[propKey]
+      if (attr.type === 'object') {
+        throw new Error(`Object attributes are not supported in html exports`)
+      }
+
+      if (attr) {
         acc[propKey] = {
           ...combinedStates[propKey],
-          defaultValue: attrs[propKey]?.content || combinedStates[propKey]?.defaultValue,
+          defaultValue: attr?.content || combinedStates[propKey]?.defaultValue,
         }
@@ -363,4 +368,5 @@ } else {
   for (const propKey of Object.keys(combinedProps)) {
-    const prop = attrs[propKey]
-    if (prop?.type === 'element') {
+    const attribute = attrs[propKey]
+
+    if (attribute?.type === 'element') {
       propsForInstance[propKey] = {
@@ -379,3 +385,5 @@ ...combinedProps[propKey],
       )
-    } else if (prop?.type === 'dynamic') {
+    }
+
+    if (attribute?.type === 'dynamic') {
       // When we are using a component instance in a component and the attribute
@@ -386,3 +394,3 @@ // that is passed to the component is of dynamic reference.
       // And similary we do the same for the states.
-      switch (prop.content.referenceType) {
+      switch (attribute.content.referenceType) {
         case 'prop':
@@ -396,11 +404,26 @@ propsForInstance[propKey] = combinedProps[propKey]
           throw new Error(
-            `ReferenceType ${prop.content.referenceType} is not supported in HTML Export.`
+            `ReferenceType ${attribute.content.referenceType} is not supported in HTML Export.`
           )
       }
-    } else if (prop) {
+    }
+
+    if (attribute?.type === 'object') {
       propsForInstance[propKey] = {
         ...combinedProps[propKey],
-        defaultValue: attrs[propKey]?.content || combinedProps[propKey]?.defaultValue,
+        defaultValue: (attribute?.content as object) || combinedProps[propKey]?.defaultValue,
       }
-    } else {
+    }
+
+    if (
+      attribute?.type !== 'dynamic' &&
+      attribute?.type !== 'element' &&
+      attribute?.type !== 'object'
+    ) {
+      propsForInstance[propKey] = {
+        ...combinedProps[propKey],
+        defaultValue: attribute?.content || combinedProps[propKey]?.defaultValue,
+      }
+    }
+
+    if (attribute === undefined) {
       const propFromCurrentComponent = combinedProps[propKey]
@@ -515,2 +538,19 @@ if (propFromCurrentComponent.type === 'element' && propFromCurrentComponent.defaultValue) {
 
+  if (usedReferenceValue.type === 'object' && usedReferenceValue.defaultValue) {
+    // Let's say users are biding the prop to a node using something like this "fields.Title"
+    // But the fields in the object is the value where the object is defined either in propDefinitions
+    // or on the attrs. So, we just need to parsed the rest of the object path and get the value from the object.
+    const pathKeys: string[] = node.content.id.split(/\.|\[(['"]?)(.+?)\1\]/).filter(Boolean)
+    pathKeys.shift()
+
+    const value = GenericUtils.getValueFromPath(
+      pathKeys.join('.'),
+      usedReferenceValue.defaultValue as Record<string, UIDLPropDefinition>
+    )
+
+    if (value) {
+      return HASTBuilders.createTextNode(String(value))
+    }
+  }
+
   if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue) {
@@ -661,2 +701,3 @@ const elementNode = usedReferenceValue.defaultValue as UIDLElementNode
       case 'expr':
+      case 'object':
         break
@@ -663,0 +704,0 @@

No alert changes

Improved metrics

Total package byte prevSize

214397

increased by2.97%

Lines of code

2216

increased by3.07%

Dependency changes

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

• Updated@teleporthq/teleport-plugin-css@^0.36.6

• Updated@teleporthq/teleport-shared@^0.36.6

• Updated@teleporthq/teleport-types@^0.36.6

• Updated@teleporthq/teleport-uidl-builders@^0.36.6