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

Comparing version 0.33.3 to 0.33.5

dist/cjs/index.d.ts

@@ -1,5 +0,4 @@
-import { ComponentPlugin, ComponentDefaultPluginParams, ComponentUIDL, ElementsLookup } from '@teleporthq/teleport-types';
+import { ComponentPlugin, ComponentDefaultPluginParams, ComponentUIDL } from '@teleporthq/teleport-types';
 interface HtmlPluginConfig {
     componentChunkName: string;
-    nodesLookup: ElementsLookup;
     wrapComponent?: boolean;
@@ -6,0 +5,0 @@ }

dist/cjs/index.js

@@ -57,3 +57,3 @@ "use strict";
 var createHTMLBasePlugin = function (config) {
-    var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? constants_1.DEFAULT_COMPONENT_CHUNK_NAME : _b, _c = _a.wrapComponent, wrapComponent = _c === void 0 ? false : _c, _d = _a.nodesLookup, nodesLookup = _d === void 0 ? {} : _d;
+    var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? constants_1.DEFAULT_COMPONENT_CHUNK_NAME : _b, _c = _a.wrapComponent, wrapComponent = _c === void 0 ? false : _c;
     var externals = {};
@@ -67,24 +67,42 @@ var plugins = [];
     var htmlComponentPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, _a, chunks, dependencies, options, _b, propDefinitions, _c, stateDefinitions, outputOptions, templatesLookUp, compBase, bodyContent;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
+        var uidl, _a, chunks, dependencies, options, _b, propDefinitions, _c, stateDefinitions, outputOptions, nodesLookup, compBase, subComponents, templateOptions, _i, _d, propKey, prop, bodyContent;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
                     uidl = structure.uidl, _a = structure.chunks, chunks = _a === void 0 ? [] : _a, dependencies = structure.dependencies, options = structure.options;
                     _b = uidl.propDefinitions, propDefinitions = _b === void 0 ? {} : _b, _c = uidl.stateDefinitions, stateDefinitions = _c === void 0 ? {} : _c, outputOptions = uidl.outputOptions;
-                    templatesLookUp = __assign({}, nodesLookup);
+                    nodesLookup = {};
                     compBase = wrapComponent
                         ? teleport_plugin_common_1.HASTBuilders.createHTMLNode('body')
                         : teleport_plugin_common_1.HASTBuilders.createHTMLNode('div');
-                    return [4 /*yield*/, (0, node_handlers_1.generateHtmlSynatx)(uidl.node, templatesLookUp, propDefinitions, stateDefinitions, {
-                            externals: Object.values(externals).reduce(function (acc, comp) {
-                                teleport_shared_1.UIDLUtils.setFriendlyOutputOptions(comp);
-                                comp.name = teleport_shared_1.StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent';
-                                comp.name = teleport_shared_1.UIDLUtils.getComponentClassName(comp);
-                                acc[comp.name] = comp;
-                                return acc;
-                            }, {}),
-                            plugins: plugins,
-                        }, { chunks: chunks, dependencies: dependencies, options: options, outputOptions: outputOptions })];
+                    subComponents = {
+                        externals: Object.values(externals).reduce(function (acc, comp) {
+                            teleport_shared_1.UIDLUtils.setFriendlyOutputOptions(comp);
+                            comp.name = teleport_shared_1.StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent';
+                            comp.name = teleport_shared_1.UIDLUtils.getComponentClassName(comp);
+                            acc[comp.name] = comp;
+                            return acc;
+                        }, {}),
+                        plugins: plugins,
+                    };
+                    templateOptions = { chunks: chunks, dependencies: dependencies, options: options, outputOptions: outputOptions };
+                    _i = 0, _d = Object.keys(propDefinitions);
+                    _e.label = 1;
                 case 1:
-                    bodyContent = _d.sent();
+                    if (!(_i < _d.length)) return [3 /*break*/, 4];
+                    propKey = _d[_i];
+                    prop = propDefinitions[propKey];
+                    if (!(prop.type === 'element' &&
+                        prop.defaultValue !== undefined &&
+                        typeof prop.defaultValue === 'object')) return [3 /*break*/, 3];
+                    return [4 /*yield*/, (0, node_handlers_1.generateHtmlSyntax)(prop.defaultValue, nodesLookup, propDefinitions, stateDefinitions, subComponents, templateOptions)];
+                case 2:
+                    _e.sent();
+                    _e.label = 3;
+                case 3:
+                    _i++;
+                    return [3 /*break*/, 1];
+                case 4: return [4 /*yield*/, (0, node_handlers_1.generateHtmlSyntax)(uidl.node, nodesLookup, propDefinitions, stateDefinitions, subComponents, templateOptions)];
+                case 5:
+                    bodyContent = _e.sent();
                     teleport_plugin_common_1.HASTUtils.addChildNode(compBase, bodyContent);
@@ -98,3 +116,3 @@ chunks.push({
                         meta: {
-                            nodesLookup: templatesLookUp,
+                            nodesLookup: nodesLookup,
                         },
@@ -101,0 +119,0 @@ });

dist/cjs/node-handlers.d.ts

 import { UIDLNode, HastNode, UIDLPropDefinition, UIDLStateDefinition, HastText, ComponentUIDL, ChunkDefinition, UIDLDependency, GeneratorOptions, ComponentPlugin, UIDLComponentOutputOptions } from '@teleporthq/teleport-types';
-type NodeToHTML<NodeType, ReturnType> = (node: NodeType, templatesLookUp: Record<string, unknown>, propDefinitions: Record<string, UIDLPropDefinition>, stateDefinitions: Record<string, UIDLStateDefinition>, subComponentOptions: {
+type NodeToHTML<NodeType, ReturnType> = (node: NodeType, nodesLookup: Record<string, HastNode | HastText>, propDefinitions: Record<string, UIDLPropDefinition>, stateDefinitions: Record<string, UIDLStateDefinition>, subComponentOptions: {
     externals: Record<string, ComponentUIDL>;
@@ -11,4 +11,4 @@ plugins: ComponentPlugin[];
 }) => ReturnType;
-export declare const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastText>>;
+export declare const generateHtmlSyntax: NodeToHTML<UIDLNode, Promise<HastNode | HastText>>;
 export {};
 //# sourceMappingURL=node-handlers.d.ts.map

dist/cjs/node-handlers.js

@@ -59,3 +59,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateHtmlSynatx = void 0;
+exports.generateHtmlSyntax = void 0;
 var teleport_types_1 = require("@teleporthq/teleport-types");
@@ -78,3 +78,3 @@ var path_1 = require("path");
 };
-var generateHtmlSynatx = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+var generateHtmlSyntax = function (node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, elementNode, dynamicNode;
@@ -97,7 +97,7 @@ return __generator(this, function (_b) {
             case 3: return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createHTMLNode(node.type)];
-            case 4: return [4 /*yield*/, generateElementNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 4: return [4 /*yield*/, generateElementNode(node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
             case 5:
                 elementNode = _b.sent();
                 return [2 /*return*/, elementNode];
-            case 6: return [4 /*yield*/, generateDynamicNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 6: return [4 /*yield*/, generateDynamicNode(node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
             case 7:
@@ -110,11 +110,9 @@ dynamicNode = _b.sent();
 }); };
-exports.generateHtmlSynatx = generateHtmlSynatx;
-var generateElementNode = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementType, children, _b, attrs, _c, style, _d, referencedStyles, dependency, key, elementNode, dependencies, compTag, _i, children_1, child, childTag;
-    return __generator(this, function (_e) {
-        switch (_e.label) {
+exports.generateHtmlSyntax = generateHtmlSyntax;
+var generateElementNode = function (node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, elementType, children, _b, attrs, _c, style, _d, referencedStyles, dependency, key, dependencies, _i, _e, attrKey, attr, compTag, elementNode, _f, children_1, child, childTag;
+    return __generator(this, function (_g) {
+        switch (_g.label) {
             case 0:
                 _a = node.content, elementType = _a.elementType, children = _a.children, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.referencedStyles, referencedStyles = _d === void 0 ? {} : _d, dependency = _a.dependency, key = _a.key;
-                elementNode = teleport_plugin_common_1.HASTBuilders.createHTMLNode(elementType);
-                templatesLookUp[key] = elementNode;
                 dependencies = structure.dependencies;
@@ -124,20 +122,32 @@ if (dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) !== 'local') {
                 }
-                if (!(dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local')) return [3 /*break*/, 2];
-                return [4 /*yield*/, generateComponentContent(node, propDefinitions, stateDefinitions, templatesLookUp, subComponentOptions, structure)];
+                if (!(dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local')) return [3 /*break*/, 6];
+                _i = 0, _e = Object.keys(attrs);
+                _g.label = 1;
             case 1:
-                compTag = _e.sent();
-                return [2 /*return*/, compTag];
+                if (!(_i < _e.length)) return [3 /*break*/, 4];
+                attrKey = _e[_i];
+                attr = attrs[attrKey];
+                if (!(attr.type === 'element')) return [3 /*break*/, 3];
+                return [4 /*yield*/, generateElementNode(attr, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
             case 2:
-                if (!children) return [3 /*break*/, 6];
-                _i = 0, children_1 = children;
-                _e.label = 3;
+                _g.sent();
+                _g.label = 3;
             case 3:
-                if (!(_i < children_1.length)) return [3 /*break*/, 6];
-                child = children_1[_i];
-                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(child, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure)];
-            case 4:
-                childTag = _e.sent();
-                if (!childTag) {
-                    return [2 /*return*/];
-                }
+                _i++;
+                return [3 /*break*/, 1];
+            case 4: return [4 /*yield*/, generateComponentContent(node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 5:
+                compTag = _g.sent();
+                return [2 /*return*/, compTag];
+            case 6:
+                elementNode = teleport_plugin_common_1.HASTBuilders.createHTMLNode(elementType);
+                if (!children) return [3 /*break*/, 10];
+                _f = 0, children_1 = children;
+                _g.label = 7;
+            case 7:
+                if (!(_f < children_1.length)) return [3 /*break*/, 10];
+                child = children_1[_f];
+                return [4 /*yield*/, (0, exports.generateHtmlSyntax)(child, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 8:
+                childTag = _g.sent();
                 if (typeof childTag === 'string') {
@@ -149,7 +159,7 @@ teleport_plugin_common_1.HASTUtils.addTextNode(elementNode, childTag);
                 }
-                _e.label = 5;
-            case 5:
-                _i++;
-                return [3 /*break*/, 3];
-            case 6:
+                _g.label = 9;
+            case 9:
+                _f++;
+                return [3 /*break*/, 7];
+            case 10:
                 if (Object.keys(referencedStyles).length > 0) {
@@ -168,2 +178,3 @@ Object.keys(referencedStyles).forEach(function (styleRef) {
                 handleAttributes(elementType, elementNode, attrs, propDefinitions, stateDefinitions, structure.options.projectRouteDefinition, structure.outputOptions);
+                nodesLookup[key] = elementNode;
                 return [2 /*return*/, elementNode];
@@ -173,7 +184,7 @@ }
 }); };
-var generateComponentContent = function (node, propDefinitions, stateDefinitions, templateLookup, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var externals, plugins, _a, elementType, _b, attrs, key, _c, children, dependencies, _d, chunks, options, compName, comp, compHasSlots, combinedProps, propsForInstance, _i, _e, propKey, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, initialStructure, result, chunk, styleChunk;
-    var _f, _g, _h, _j;
-    return __generator(this, function (_k) {
-        switch (_k.label) {
+var generateComponentContent = function (node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var externals, plugins, _a, elementType, _b, attrs, key, _c, children, dependencies, _d, chunks, options, compName, component, componentClone, compHasSlots, combinedProps, propsForInstance, _i, _e, propKey, combinedStates, statesForInstance, componentWrapper, isExistingNode, componentInstanceToGenerate, compTag, cssPlugin, initialStructure, result, chunk, styleChunk;
+    var _f, _g, _h;
+    return __generator(this, function (_j) {
+        switch (_j.label) {
             case 0:
@@ -184,10 +195,11 @@ externals = subComponentOptions.externals, plugins = subComponentOptions.plugins;
                 compName = elementType === 'Component' ? 'AppComponent' : elementType;
-                comp = teleport_shared_1.UIDLUtils.cloneObject(externals[compName] || {});
+                component = externals[compName];
+                if (component === undefined) {
+                    throw new teleport_types_1.HTMLComponentGeneratorError("".concat(compName, " is missing from externals object"));
+                }
+                componentClone = teleport_shared_1.UIDLUtils.cloneObject(component);
                 compHasSlots = false;
-                if (!comp || !(comp === null || comp === void 0 ? void 0 : comp.node)) {
-                    throw new teleport_types_1.HTMLComponentGeneratorError("".concat(elementType, " is not found from the externals. \n\n        Received ").concat(JSON.stringify(Object.keys(externals), null, 2)));
-                }
                 if (children.length) {
                     compHasSlots = true;
-                    teleport_shared_1.UIDLUtils.traverseNodes(comp.node, function (childNode, parentNode) {
+                    teleport_shared_1.UIDLUtils.traverseNodes(componentClone.node, function (childNode, parentNode) {
                         var _a, _b;
@@ -220,3 +232,3 @@ if (childNode.type === 'slot' && parentNode.type === 'element') {
                 }
-                combinedProps = __assign(__assign({}, propDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.propDefinitions) || {}));
+                combinedProps = __assign(__assign({}, propDefinitions), ((componentClone === null || componentClone === void 0 ? void 0 : componentClone.propDefinitions) || {}));
                 propsForInstance = {};
@@ -228,5 +240,4 @@ for (_i = 0, _e = Object.keys(combinedProps); _i < _e.length; _i++) {
                         propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: attrs[propKey] });
-                        continue;
                     }
-                    if (attrs[propKey]) {
+                    else if (attrs[propKey]) {
                         propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: ((_g = attrs[propKey]) === null || _g === void 0 ? void 0 : _g.content) || ((_h = combinedProps[propKey]) === null || _h === void 0 ? void 0 : _h.defaultValue) });
@@ -238,3 +249,3 @@ }
                 }
-                combinedStates = __assign(__assign({}, stateDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.stateDefinitions) || {}));
+                combinedStates = __assign(__assign({}, stateDefinitions), ((componentClone === null || componentClone === void 0 ? void 0 : componentClone.stateDefinitions) || {}));
                 statesForInstance = Object.keys(combinedStates).reduce(function (acc, propKey) {
@@ -250,10 +261,24 @@ var _a, _b;
                 }, {});
-                elementNode = teleport_plugin_common_1.HASTBuilders.createHTMLNode(teleport_shared_1.StringUtils.camelCaseToDashCase(elementType));
-                templateLookup[key] = elementNode;
-                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(__assign(__assign({}, comp.node), { content: __assign(__assign({}, comp.node.content), { style: __assign(__assign({}, (((_j = comp.node.content) === null || _j === void 0 ? void 0 : _j.style) || {})), { display: {
-                                    type: 'static',
-                                    content: 'contents',
-                                } }) }) }), templateLookup, propsForInstance, statesForInstance, subComponentOptions, structure)];
+                componentWrapper = teleport_shared_1.StringUtils.camelCaseToDashCase("".concat(compName, "-wrapper"));
+                isExistingNode = nodesLookup[componentWrapper];
+                if (isExistingNode !== undefined) {
+                    componentWrapper = "".concat(componentWrapper, "-").concat(teleport_shared_1.StringUtils.generateRandomString());
+                }
+                componentInstanceToGenerate = {
+                    type: 'element',
+                    content: {
+                        elementType: componentWrapper,
+                        key: componentWrapper,
+                        children: [componentClone.node],
+                        style: {
+                            display: {
+                                type: 'static',
+                                content: 'contents',
+                            },
+                        },
+                    },
+                };
+                return [4 /*yield*/, (0, exports.generateHtmlSyntax)(componentInstanceToGenerate, nodesLookup, propsForInstance, statesForInstance, subComponentOptions, structure)];
             case 1:
-                compTag = (_k.sent());
+                compTag = _j.sent();
                 cssPlugin = (0, teleport_plugin_css_1.createCSSPlugin)({
@@ -264,7 +289,7 @@ templateStyle: 'html',
                     forceScoping: true,
-                    chunkName: comp.name,
+                    chunkName: componentClone.name,
                     staticPropReferences: true,
                 });
                 initialStructure = {
-                    uidl: __assign(__assign({}, comp), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
+                    uidl: __assign(__assign({}, componentClone), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
                     chunks: [
@@ -278,3 +303,3 @@ {
                             meta: {
-                                nodesLookup: templateLookup,
+                                nodesLookup: nodesLookup,
                             },
@@ -298,3 +323,3 @@ },
             case 2:
-                result = _k.sent();
+                result = _j.sent();
                 if (compHasSlots) {
@@ -308,3 +333,3 @@ result.chunks.forEach(function (chunk) {
                 else {
-                    chunk = chunks.find(function (item) { return item.name === comp.name; });
+                    chunk = chunks.find(function (item) { return item.name === componentClone.name; });
                     if (!chunk) {
@@ -318,2 +343,3 @@ styleChunk = result.chunks.find(function (item) { return item.fileType === teleport_types_1.FileType.CSS; });
                 }
+                nodesLookup[key] = compTag;
                 return [2 /*return*/, compTag];
@@ -323,3 +349,3 @@ }
 }); };
-var generateDynamicNode = function (node, templateLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+var generateDynamicNode = function (node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
     var usedReferenceValue, slotNode, spanTagWrapper, commentNode, spanTag;
@@ -331,3 +357,3 @@ return __generator(this, function (_a) {
                 if (!(usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue)) return [3 /*break*/, 2];
-                return [4 /*yield*/, generateElementNode(usedReferenceValue.defaultValue, templateLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+                return [4 /*yield*/, generateElementNode(usedReferenceValue.defaultValue, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
             case 1:
@@ -334,0 +360,0 @@ slotNode = _a.sent();

dist/esm/index.d.ts

@@ -1,5 +0,4 @@
-import { ComponentPlugin, ComponentDefaultPluginParams, ComponentUIDL, ElementsLookup } from '@teleporthq/teleport-types';
+import { ComponentPlugin, ComponentDefaultPluginParams, ComponentUIDL } from '@teleporthq/teleport-types';
 interface HtmlPluginConfig {
     componentChunkName: string;
-    nodesLookup: ElementsLookup;
     wrapComponent?: boolean;
@@ -6,0 +5,0 @@ }

dist/esm/index.js

@@ -51,6 +51,6 @@ var __assign = (this && this.__assign) || function () {
 import { DEFAULT_COMPONENT_CHUNK_NAME } from './constants';
-import { generateHtmlSynatx } from './node-handlers';
+import { generateHtmlSyntax } from './node-handlers';
 import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared';
 export var createHTMLBasePlugin = function (config) {
-    var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? DEFAULT_COMPONENT_CHUNK_NAME : _b, _c = _a.wrapComponent, wrapComponent = _c === void 0 ? false : _c, _d = _a.nodesLookup, nodesLookup = _d === void 0 ? {} : _d;
+    var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? DEFAULT_COMPONENT_CHUNK_NAME : _b, _c = _a.wrapComponent, wrapComponent = _c === void 0 ? false : _c;
     var externals = {};
@@ -64,24 +64,42 @@ var plugins = [];
     var htmlComponentPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, _a, chunks, dependencies, options, _b, propDefinitions, _c, stateDefinitions, outputOptions, templatesLookUp, compBase, bodyContent;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
+        var uidl, _a, chunks, dependencies, options, _b, propDefinitions, _c, stateDefinitions, outputOptions, nodesLookup, compBase, subComponents, templateOptions, _i, _d, propKey, prop, bodyContent;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
                     uidl = structure.uidl, _a = structure.chunks, chunks = _a === void 0 ? [] : _a, dependencies = structure.dependencies, options = structure.options;
                     _b = uidl.propDefinitions, propDefinitions = _b === void 0 ? {} : _b, _c = uidl.stateDefinitions, stateDefinitions = _c === void 0 ? {} : _c, outputOptions = uidl.outputOptions;
-                    templatesLookUp = __assign({}, nodesLookup);
+                    nodesLookup = {};
                     compBase = wrapComponent
                         ? HASTBuilders.createHTMLNode('body')
                         : HASTBuilders.createHTMLNode('div');
-                    return [4 /*yield*/, generateHtmlSynatx(uidl.node, templatesLookUp, propDefinitions, stateDefinitions, {
-                            externals: Object.values(externals).reduce(function (acc, comp) {
-                                UIDLUtils.setFriendlyOutputOptions(comp);
-                                comp.name = StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent';
-                                comp.name = UIDLUtils.getComponentClassName(comp);
-                                acc[comp.name] = comp;
-                                return acc;
-                            }, {}),
-                            plugins: plugins,
-                        }, { chunks: chunks, dependencies: dependencies, options: options, outputOptions: outputOptions })];
+                    subComponents = {
+                        externals: Object.values(externals).reduce(function (acc, comp) {
+                            UIDLUtils.setFriendlyOutputOptions(comp);
+                            comp.name = StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent';
+                            comp.name = UIDLUtils.getComponentClassName(comp);
+                            acc[comp.name] = comp;
+                            return acc;
+                        }, {}),
+                        plugins: plugins,
+                    };
+                    templateOptions = { chunks: chunks, dependencies: dependencies, options: options, outputOptions: outputOptions };
+                    _i = 0, _d = Object.keys(propDefinitions);
+                    _e.label = 1;
                 case 1:
-                    bodyContent = _d.sent();
+                    if (!(_i < _d.length)) return [3 /*break*/, 4];
+                    propKey = _d[_i];
+                    prop = propDefinitions[propKey];
+                    if (!(prop.type === 'element' &&
+                        prop.defaultValue !== undefined &&
+                        typeof prop.defaultValue === 'object')) return [3 /*break*/, 3];
+                    return [4 /*yield*/, generateHtmlSyntax(prop.defaultValue, nodesLookup, propDefinitions, stateDefinitions, subComponents, templateOptions)];
+                case 2:
+                    _e.sent();
+                    _e.label = 3;
+                case 3:
+                    _i++;
+                    return [3 /*break*/, 1];
+                case 4: return [4 /*yield*/, generateHtmlSyntax(uidl.node, nodesLookup, propDefinitions, stateDefinitions, subComponents, templateOptions)];
+                case 5:
+                    bodyContent = _e.sent();
                     HASTUtils.addChildNode(compBase, bodyContent);
@@ -95,3 +113,3 @@ chunks.push({
                         meta: {
-                            nodesLookup: templatesLookUp,
+                            nodesLookup: nodesLookup,
                         },
@@ -98,0 +116,0 @@ });

dist/esm/node-handlers.d.ts

 import { UIDLNode, HastNode, UIDLPropDefinition, UIDLStateDefinition, HastText, ComponentUIDL, ChunkDefinition, UIDLDependency, GeneratorOptions, ComponentPlugin, UIDLComponentOutputOptions } from '@teleporthq/teleport-types';
-type NodeToHTML<NodeType, ReturnType> = (node: NodeType, templatesLookUp: Record<string, unknown>, propDefinitions: Record<string, UIDLPropDefinition>, stateDefinitions: Record<string, UIDLStateDefinition>, subComponentOptions: {
+type NodeToHTML<NodeType, ReturnType> = (node: NodeType, nodesLookup: Record<string, HastNode | HastText>, propDefinitions: Record<string, UIDLPropDefinition>, stateDefinitions: Record<string, UIDLStateDefinition>, subComponentOptions: {
     externals: Record<string, ComponentUIDL>;
@@ -11,4 +11,4 @@ plugins: ComponentPlugin[];
 }) => ReturnType;
-export declare const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastText>>;
+export declare const generateHtmlSyntax: NodeToHTML<UIDLNode, Promise<HastNode | HastText>>;
 export {};
 //# sourceMappingURL=node-handlers.d.ts.map

dist/esm/node-handlers.js

@@ -74,3 +74,3 @@ var __assign = (this && this.__assign) || function () {
 };
-export var generateHtmlSynatx = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+export var generateHtmlSyntax = function (node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, elementNode, dynamicNode;
@@ -93,7 +93,7 @@ return __generator(this, function (_b) {
             case 3: return [2 /*return*/, HASTBuilders.createHTMLNode(node.type)];
-            case 4: return [4 /*yield*/, generateElementNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 4: return [4 /*yield*/, generateElementNode(node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
             case 5:
                 elementNode = _b.sent();
                 return [2 /*return*/, elementNode];
-            case 6: return [4 /*yield*/, generateDynamicNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 6: return [4 /*yield*/, generateDynamicNode(node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
             case 7:
@@ -106,10 +106,8 @@ dynamicNode = _b.sent();
 }); };
-var generateElementNode = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementType, children, _b, attrs, _c, style, _d, referencedStyles, dependency, key, elementNode, dependencies, compTag, _i, children_1, child, childTag;
-    return __generator(this, function (_e) {
-        switch (_e.label) {
+var generateElementNode = function (node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, elementType, children, _b, attrs, _c, style, _d, referencedStyles, dependency, key, dependencies, _i, _e, attrKey, attr, compTag, elementNode, _f, children_1, child, childTag;
+    return __generator(this, function (_g) {
+        switch (_g.label) {
             case 0:
                 _a = node.content, elementType = _a.elementType, children = _a.children, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.referencedStyles, referencedStyles = _d === void 0 ? {} : _d, dependency = _a.dependency, key = _a.key;
-                elementNode = HASTBuilders.createHTMLNode(elementType);
-                templatesLookUp[key] = elementNode;
                 dependencies = structure.dependencies;
@@ -119,20 +117,32 @@ if (dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) !== 'local') {
                 }
-                if (!(dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local')) return [3 /*break*/, 2];
-                return [4 /*yield*/, generateComponentContent(node, propDefinitions, stateDefinitions, templatesLookUp, subComponentOptions, structure)];
+                if (!(dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local')) return [3 /*break*/, 6];
+                _i = 0, _e = Object.keys(attrs);
+                _g.label = 1;
             case 1:
-                compTag = _e.sent();
-                return [2 /*return*/, compTag];
+                if (!(_i < _e.length)) return [3 /*break*/, 4];
+                attrKey = _e[_i];
+                attr = attrs[attrKey];
+                if (!(attr.type === 'element')) return [3 /*break*/, 3];
+                return [4 /*yield*/, generateElementNode(attr, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
             case 2:
-                if (!children) return [3 /*break*/, 6];
-                _i = 0, children_1 = children;
-                _e.label = 3;
+                _g.sent();
+                _g.label = 3;
             case 3:
-                if (!(_i < children_1.length)) return [3 /*break*/, 6];
-                child = children_1[_i];
-                return [4 /*yield*/, generateHtmlSynatx(child, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure)];
-            case 4:
-                childTag = _e.sent();
-                if (!childTag) {
-                    return [2 /*return*/];
-                }
+                _i++;
+                return [3 /*break*/, 1];
+            case 4: return [4 /*yield*/, generateComponentContent(node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 5:
+                compTag = _g.sent();
+                return [2 /*return*/, compTag];
+            case 6:
+                elementNode = HASTBuilders.createHTMLNode(elementType);
+                if (!children) return [3 /*break*/, 10];
+                _f = 0, children_1 = children;
+                _g.label = 7;
+            case 7:
+                if (!(_f < children_1.length)) return [3 /*break*/, 10];
+                child = children_1[_f];
+                return [4 /*yield*/, generateHtmlSyntax(child, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 8:
+                childTag = _g.sent();
                 if (typeof childTag === 'string') {
@@ -144,7 +154,7 @@ HASTUtils.addTextNode(elementNode, childTag);
                 }
-                _e.label = 5;
-            case 5:
-                _i++;
-                return [3 /*break*/, 3];
-            case 6:
+                _g.label = 9;
+            case 9:
+                _f++;
+                return [3 /*break*/, 7];
+            case 10:
                 if (Object.keys(referencedStyles).length > 0) {
@@ -163,2 +173,3 @@ Object.keys(referencedStyles).forEach(function (styleRef) {
                 handleAttributes(elementType, elementNode, attrs, propDefinitions, stateDefinitions, structure.options.projectRouteDefinition, structure.outputOptions);
+                nodesLookup[key] = elementNode;
                 return [2 /*return*/, elementNode];
@@ -168,7 +179,7 @@ }
 }); };
-var generateComponentContent = function (node, propDefinitions, stateDefinitions, templateLookup, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var externals, plugins, _a, elementType, _b, attrs, key, _c, children, dependencies, _d, chunks, options, compName, comp, compHasSlots, combinedProps, propsForInstance, _i, _e, propKey, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, initialStructure, result, chunk, styleChunk;
-    var _f, _g, _h, _j;
-    return __generator(this, function (_k) {
-        switch (_k.label) {
+var generateComponentContent = function (node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var externals, plugins, _a, elementType, _b, attrs, key, _c, children, dependencies, _d, chunks, options, compName, component, componentClone, compHasSlots, combinedProps, propsForInstance, _i, _e, propKey, combinedStates, statesForInstance, componentWrapper, isExistingNode, componentInstanceToGenerate, compTag, cssPlugin, initialStructure, result, chunk, styleChunk;
+    var _f, _g, _h;
+    return __generator(this, function (_j) {
+        switch (_j.label) {
             case 0:
@@ -179,10 +190,11 @@ externals = subComponentOptions.externals, plugins = subComponentOptions.plugins;
                 compName = elementType === 'Component' ? 'AppComponent' : elementType;
-                comp = UIDLUtils.cloneObject(externals[compName] || {});
+                component = externals[compName];
+                if (component === undefined) {
+                    throw new HTMLComponentGeneratorError("".concat(compName, " is missing from externals object"));
+                }
+                componentClone = UIDLUtils.cloneObject(component);
                 compHasSlots = false;
-                if (!comp || !(comp === null || comp === void 0 ? void 0 : comp.node)) {
-                    throw new HTMLComponentGeneratorError("".concat(elementType, " is not found from the externals. \n\n        Received ").concat(JSON.stringify(Object.keys(externals), null, 2)));
-                }
                 if (children.length) {
                     compHasSlots = true;
-                    UIDLUtils.traverseNodes(comp.node, function (childNode, parentNode) {
+                    UIDLUtils.traverseNodes(componentClone.node, function (childNode, parentNode) {
                         var _a, _b;
@@ -215,3 +227,3 @@ if (childNode.type === 'slot' && parentNode.type === 'element') {
                 }
-                combinedProps = __assign(__assign({}, propDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.propDefinitions) || {}));
+                combinedProps = __assign(__assign({}, propDefinitions), ((componentClone === null || componentClone === void 0 ? void 0 : componentClone.propDefinitions) || {}));
                 propsForInstance = {};
@@ -223,5 +235,4 @@ for (_i = 0, _e = Object.keys(combinedProps); _i < _e.length; _i++) {
                         propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: attrs[propKey] });
-                        continue;
                     }
-                    if (attrs[propKey]) {
+                    else if (attrs[propKey]) {
                         propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: ((_g = attrs[propKey]) === null || _g === void 0 ? void 0 : _g.content) || ((_h = combinedProps[propKey]) === null || _h === void 0 ? void 0 : _h.defaultValue) });
@@ -233,3 +244,3 @@ }
                 }
-                combinedStates = __assign(__assign({}, stateDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.stateDefinitions) || {}));
+                combinedStates = __assign(__assign({}, stateDefinitions), ((componentClone === null || componentClone === void 0 ? void 0 : componentClone.stateDefinitions) || {}));
                 statesForInstance = Object.keys(combinedStates).reduce(function (acc, propKey) {
@@ -245,10 +256,24 @@ var _a, _b;
                 }, {});
-                elementNode = HASTBuilders.createHTMLNode(StringUtils.camelCaseToDashCase(elementType));
-                templateLookup[key] = elementNode;
-                return [4 /*yield*/, generateHtmlSynatx(__assign(__assign({}, comp.node), { content: __assign(__assign({}, comp.node.content), { style: __assign(__assign({}, (((_j = comp.node.content) === null || _j === void 0 ? void 0 : _j.style) || {})), { display: {
-                                    type: 'static',
-                                    content: 'contents',
-                                } }) }) }), templateLookup, propsForInstance, statesForInstance, subComponentOptions, structure)];
+                componentWrapper = StringUtils.camelCaseToDashCase("".concat(compName, "-wrapper"));
+                isExistingNode = nodesLookup[componentWrapper];
+                if (isExistingNode !== undefined) {
+                    componentWrapper = "".concat(componentWrapper, "-").concat(StringUtils.generateRandomString());
+                }
+                componentInstanceToGenerate = {
+                    type: 'element',
+                    content: {
+                        elementType: componentWrapper,
+                        key: componentWrapper,
+                        children: [componentClone.node],
+                        style: {
+                            display: {
+                                type: 'static',
+                                content: 'contents',
+                            },
+                        },
+                    },
+                };
+                return [4 /*yield*/, generateHtmlSyntax(componentInstanceToGenerate, nodesLookup, propsForInstance, statesForInstance, subComponentOptions, structure)];
             case 1:
-                compTag = (_k.sent());
+                compTag = _j.sent();
                 cssPlugin = createCSSPlugin({
@@ -259,7 +284,7 @@ templateStyle: 'html',
                     forceScoping: true,
-                    chunkName: comp.name,
+                    chunkName: componentClone.name,
                     staticPropReferences: true,
                 });
                 initialStructure = {
-                    uidl: __assign(__assign({}, comp), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
+                    uidl: __assign(__assign({}, componentClone), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
                     chunks: [
@@ -273,3 +298,3 @@ {
                             meta: {
-                                nodesLookup: templateLookup,
+                                nodesLookup: nodesLookup,
                             },
@@ -293,3 +318,3 @@ },
             case 2:
-                result = _k.sent();
+                result = _j.sent();
                 if (compHasSlots) {
@@ -303,3 +328,3 @@ result.chunks.forEach(function (chunk) {
                 else {
-                    chunk = chunks.find(function (item) { return item.name === comp.name; });
+                    chunk = chunks.find(function (item) { return item.name === componentClone.name; });
                     if (!chunk) {
@@ -313,2 +338,3 @@ styleChunk = result.chunks.find(function (item) { return item.fileType === FileType.CSS; });
                 }
+                nodesLookup[key] = compTag;
                 return [2 /*return*/, compTag];
@@ -318,3 +344,3 @@ }
 }); };
-var generateDynamicNode = function (node, templateLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+var generateDynamicNode = function (node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
     var usedReferenceValue, slotNode, spanTagWrapper, commentNode, spanTag;
@@ -326,3 +352,3 @@ return __generator(this, function (_a) {
                 if (!(usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue)) return [3 /*break*/, 2];
-                return [4 /*yield*/, generateElementNode(usedReferenceValue.defaultValue, templateLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+                return [4 /*yield*/, generateElementNode(usedReferenceValue.defaultValue, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
             case 1:
@@ -329,0 +355,0 @@ slotNode = _a.sent();

package.json

 {
   "name": "@teleporthq/teleport-plugin-html-base-component",
-  "version": "0.33.3",
+  "version": "0.33.5",
   "description": "A plugin for handling the skeleton/baseline of a base html component",
@@ -28,3 +28,3 @@ "author": "teleportHQ",
     "@teleporthq/teleport-plugin-common": "^0.33.3",
-    "@teleporthq/teleport-plugin-css": "^0.33.3",
+    "@teleporthq/teleport-plugin-css": "^0.33.5",
     "@teleporthq/teleport-shared": "^0.33.0",
@@ -34,3 +34,3 @@ "@teleporthq/teleport-types": "^0.33.0",
   },
-  "gitHead": "54218e148225ecc586de1c5a9da7e09a54531dd0"
+  "gitHead": "7c9ac6f3bb140a11f858db00911ff88b160cbf37"
 }

src/index.ts

@@ -8,7 +8,8 @@ import {
   ComponentUIDL,
-  ElementsLookup,
+  HastText,
+  UIDLElementNode,
 } from '@teleporthq/teleport-types'
 import { HASTBuilders, HASTUtils } from '@teleporthq/teleport-plugin-common'
 import { DEFAULT_COMPONENT_CHUNK_NAME } from './constants'
-import { generateHtmlSynatx } from './node-handlers'
+import { generateHtmlSyntax } from './node-handlers'
 import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
@@ -18,3 +19,2 @@
   componentChunkName: string
-  nodesLookup: ElementsLookup
   wrapComponent?: boolean
@@ -31,7 +31,3 @@ }
 export const createHTMLBasePlugin: HtmlPluginFactory<HtmlPluginConfig> = (config) => {
-  const {
-    componentChunkName = DEFAULT_COMPONENT_CHUNK_NAME,
-    wrapComponent = false,
-    nodesLookup = {},
-  } = config || {}
+  const { componentChunkName = DEFAULT_COMPONENT_CHUNK_NAME, wrapComponent = false } = config || {}
   let externals: Record<string, ComponentUIDL> = {}
@@ -55,3 +51,3 @@ let plugins: ComponentPlugin[] = []
 
-    const templatesLookUp: Record<string, unknown> = { ...nodesLookup }
+    const nodesLookup: Record<string, HastNode | HastText> = {}
     const compBase = wrapComponent
@@ -61,21 +57,46 @@ ? HASTBuilders.createHTMLNode('body')
 
-    const bodyContent = await generateHtmlSynatx(
+    const subComponents = {
+      externals: Object.values(externals).reduce(
+        (acc: Record<string, ComponentUIDL>, comp: ComponentUIDL) => {
+          UIDLUtils.setFriendlyOutputOptions(comp)
+          comp.name = StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent'
+          comp.name = UIDLUtils.getComponentClassName(comp)
+          acc[comp.name] = comp
+          return acc
+        },
+        {}
+      ),
+      plugins,
+    }
+    const templateOptions = { chunks, dependencies, options, outputOptions }
+
+    /*
+      We need to generate jsx structure of every node that is defined in the UIDL.
+      If we use these nodes in the later stage of the code-generation depends on the usage of these nodes.
+    */
+    for (const propKey of Object.keys(propDefinitions)) {
+      const prop = propDefinitions[propKey]
+      if (
+        prop.type === 'element' &&
+        prop.defaultValue !== undefined &&
+        typeof prop.defaultValue === 'object'
+      ) {
+        await generateHtmlSyntax(
+          prop.defaultValue as UIDLElementNode,
+          nodesLookup,
+          propDefinitions,
+          stateDefinitions,
+          subComponents,
+          templateOptions
+        )
+      }
+    }
+
+    const bodyContent = await generateHtmlSyntax(
       uidl.node,
-      templatesLookUp,
+      nodesLookup,
       propDefinitions,
       stateDefinitions,
-      {
-        externals: Object.values(externals).reduce(
-          (acc: Record<string, ComponentUIDL>, comp: ComponentUIDL) => {
-            UIDLUtils.setFriendlyOutputOptions(comp)
-            comp.name = StringUtils.removeIllegalCharacters(comp.name) || 'AppComponent'
-            comp.name = UIDLUtils.getComponentClassName(comp)
-            acc[comp.name] = comp
-            return acc
-          },
-          {}
-        ),
-        plugins,
-      },
-      { chunks, dependencies, options, outputOptions }
+      subComponents,
+      templateOptions
     )
@@ -92,3 +113,3 @@
       meta: {
-        nodesLookup: templatesLookUp,
+        nodesLookup,
       },
@@ -95,0 +116,0 @@ })

src/node-handlers.ts

@@ -44,3 +44,3 @@ import {
   node: NodeType,
-  templatesLookUp: Record<string, unknown>,
+  nodesLookup: Record<string, HastNode | HastText>,
   propDefinitions: Record<string, UIDLPropDefinition>,
@@ -60,5 +60,5 @@ stateDefinitions: Record<string, UIDLStateDefinition>,
 
-export const generateHtmlSynatx: NodeToHTML<UIDLNode, Promise<HastNode | HastText>> = async (
+export const generateHtmlSyntax: NodeToHTML<UIDLNode, Promise<HastNode | HastText>> = async (
   node,
-  templatesLookUp,
+  nodesLookup,
   propDefinitions,
@@ -83,3 +83,3 @@ stateDefinitions,
         node,
-        templatesLookUp,
+        nodesLookup,
         propDefinitions,
@@ -95,3 +95,3 @@ stateDefinitions,
         node,
-        templatesLookUp,
+        nodesLookup,
         propDefinitions,
@@ -118,3 +118,3 @@ stateDefinitions,
   node,
-  templatesLookUp,
+  nodesLookup,
   propDefinitions,
@@ -134,6 +134,2 @@ stateDefinitions,
   } = node.content
-
-  const elementNode = HASTBuilders.createHTMLNode(elementType)
-  templatesLookUp[key] = elementNode
-
   const { dependencies } = structure
@@ -145,18 +141,35 @@ if (dependency && (dependency as UIDLDependency)?.type !== 'local') {
   if (dependency && (dependency as UIDLDependency)?.type === 'local') {
+    for (const attrKey of Object.keys(attrs)) {
+      const attr = attrs[attrKey]
+      if (attr.type === 'element') {
+        await generateElementNode(
+          attr,
+          nodesLookup,
+          propDefinitions,
+          stateDefinitions,
+          subComponentOptions,
+          structure
+        )
+      }
+    }
+
     const compTag = await generateComponentContent(
       node,
+      nodesLookup,
       propDefinitions,
       stateDefinitions,
-      templatesLookUp,
       subComponentOptions,
       structure
     )
+
     return compTag
   }
 
+  const elementNode = HASTBuilders.createHTMLNode(elementType)
+
   if (children) {
     for (const child of children) {
-      const childTag = await generateHtmlSynatx(
+      const childTag = await generateHtmlSyntax(
         child,
-        templatesLookUp,
+        nodesLookup,
         propDefinitions,
@@ -168,6 +181,2 @@ stateDefinitions,
 
-      if (!childTag) {
-        return
-      }
-
       if (typeof childTag === 'string') {
@@ -205,2 +214,3 @@ HASTUtils.addTextNode(elementNode, childTag)
 
+  nodesLookup[key] = elementNode
   return elementNode
@@ -211,5 +221,5 @@ }
   node: UIDLElementNode,
+  nodesLookup: Record<string, HastNode | HastText>,
   propDefinitions: Record<string, UIDLPropDefinition>,
   stateDefinitions: Record<string, UIDLStateDefinition>,
-  templateLookup: Record<string, unknown>,
   subComponentOptions: {
@@ -231,13 +241,13 @@ externals: Record<string, ComponentUIDL>
   const compName = elementType === 'Component' ? 'AppComponent' : elementType
-  const comp = UIDLUtils.cloneObject(externals[compName] || {}) as ComponentUIDL
+  const component = externals[compName]
+  if (component === undefined) {
+    throw new HTMLComponentGeneratorError(`${compName} is missing from externals object`)
+  }
+
+  const componentClone = UIDLUtils.cloneObject(component) as ComponentUIDL
   let compHasSlots: boolean = false
 
-  if (!comp || !comp?.node) {
-    throw new HTMLComponentGeneratorError(`${elementType} is not found from the externals. \n
-        Received ${JSON.stringify(Object.keys(externals), null, 2)}`)
-  }
-
   if (children.length) {
     compHasSlots = true
-    UIDLUtils.traverseNodes(comp.node, (childNode, parentNode) => {
+    UIDLUtils.traverseNodes(componentClone.node, (childNode, parentNode) => {
       if (childNode.type === 'slot' && parentNode.type === 'element') {
@@ -271,4 +281,5 @@ const nonSlotNodes = parentNode.content?.children?.filter((n) => n.type !== 'slot')
 
-  const combinedProps = { ...propDefinitions, ...(comp?.propDefinitions || {}) }
+  const combinedProps = { ...propDefinitions, ...(componentClone?.propDefinitions || {}) }
   const propsForInstance: Record<string, UIDLPropDefinition> = {}
+
   for (const propKey of Object.keys(combinedProps)) {
@@ -281,6 +292,3 @@ // If the attribute is a named-slot, then we can directly pass the value instead of just the content
       }
-      continue
-    }
-
-    if (attrs[propKey]) {
+    } else if (attrs[propKey]) {
       propsForInstance[propKey] = {
@@ -295,3 +303,3 @@ ...combinedProps[propKey],
 
-  const combinedStates = { ...stateDefinitions, ...(comp?.stateDefinitions || {}) }
+  const combinedStates = { ...stateDefinitions, ...(componentClone?.stateDefinitions || {}) }
   const statesForInstance = Object.keys(combinedStates).reduce(
@@ -313,20 +321,26 @@ (acc: Record<string, UIDLStateDefinition>, propKey) => {
 
-  const elementNode = HASTBuilders.createHTMLNode(StringUtils.camelCaseToDashCase(elementType))
-  templateLookup[key] = elementNode
+  let componentWrapper = StringUtils.camelCaseToDashCase(`${compName}-wrapper`)
+  const isExistingNode = nodesLookup[componentWrapper]
+  if (isExistingNode !== undefined) {
+    componentWrapper = `${componentWrapper}-${StringUtils.generateRandomString()}`
+  }
 
-  const compTag = (await generateHtmlSynatx(
-    {
-      ...comp.node,
-      content: {
-        ...comp.node.content,
-        style: {
-          ...(comp.node.content?.style || {}),
-          display: {
-            type: 'static',
-            content: 'contents',
-          },
+  const componentInstanceToGenerate: UIDLElementNode = {
+    type: 'element',
+    content: {
+      elementType: componentWrapper,
+      key: componentWrapper,
+      children: [componentClone.node],
+      style: {
+        display: {
+          type: 'static',
+          content: 'contents',
         },
       },
     },
-    templateLookup,
+  }
+
+  const compTag = await generateHtmlSyntax(
+    componentInstanceToGenerate,
+    nodesLookup,
     propsForInstance,
@@ -336,3 +350,3 @@ statesForInstance,
     structure
-  )) as unknown as HastNode
+  )
 
@@ -344,3 +358,3 @@ const cssPlugin = createCSSPlugin({
     forceScoping: true,
-    chunkName: comp.name,
+    chunkName: componentClone.name,
     staticPropReferences: true,
@@ -351,3 +365,3 @@ })
     uidl: {
-      ...comp,
+      ...componentClone,
       propDefinitions: propsForInstance,
@@ -364,3 +378,3 @@ stateDefinitions: statesForInstance,
         meta: {
-          nodesLookup: templateLookup,
+          nodesLookup,
         },
@@ -388,3 +402,3 @@ },
   } else {
-    const chunk = chunks.find((item) => item.name === comp.name)
+    const chunk = chunks.find((item) => item.name === componentClone.name)
     if (!chunk) {
@@ -401,2 +415,3 @@ const styleChunk = result.chunks.find(
 
+  nodesLookup[key] = compTag
   return compTag
@@ -407,3 +422,3 @@ }
   node,
-  templateLookup,
+  nodesLookup,
   propDefinitions,
@@ -422,3 +437,3 @@ stateDefinitions,
       usedReferenceValue.defaultValue as UIDLElementNode,
-      templateLookup,
+      nodesLookup,
       propDefinitions,
@@ -425,0 +440,0 @@ stateDefinitions,

No alert changes

Improved metrics

Total package byte prevSize

190451

increased by3.36%

Lines of code

1944

increased by6.52%

Dependency changes

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