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

Comparing version 0.22.1 to 0.22.2

dist/cjs/node-handlers.js

@@ -76,3 +76,3 @@ "use strict";
 var generatElementNode = function (node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementType, children, _b, attrs, _c, style, _d, referencedStyles, dependency, key, elementNode, dependencies, chunks, options, comp_1, combinedProps_1, propsForInstance, combinedStates_1, statesForInstance, lookupTemplate, compTag, cssPlugin, result, chunk, styleChunk, _i, children_1, child, childTag;
+    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) {
@@ -84,32 +84,93 @@ switch (_e.label) {
                 templatesLookUp[key] = elementNode;
+                dependencies = structure.dependencies;
+                if (dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) !== 'local') {
+                    dependencies[dependency.path] = dependency;
+                }
+                if (!(dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local')) return [3 /*break*/, 2];
+                return [4 /*yield*/, generateComponentContent(node, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
+            case 1:
+                compTag = _e.sent();
+                return [2 /*return*/, compTag];
+            case 2:
+                if (!children) return [3 /*break*/, 6];
+                _i = 0, children_1 = children;
+                _e.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, externals, routeDefinitions, structure)];
+            case 4:
+                childTag = _e.sent();
+                if (!childTag) {
+                    return [2 /*return*/];
+                }
+                if (typeof childTag === 'string') {
+                    teleport_plugin_common_1.HASTUtils.addTextNode(elementNode, childTag);
+                }
+                else {
+                    teleport_plugin_common_1.HASTUtils.addChildNode(elementNode, childTag);
+                }
+                _e.label = 5;
+            case 5:
+                _i++;
+                return [3 /*break*/, 3];
+            case 6:
+                if (Object.keys(referencedStyles).length > 0) {
+                    Object.keys(referencedStyles).forEach(function (styleRef) {
+                        var refStyle = referencedStyles[styleRef];
+                        if (refStyle.content.mapType === 'inlined') {
+                            handleStyles(node, refStyle.content.styles, propDefinitions, stateDefinitions);
+                            return;
+                        }
+                    });
+                }
+                if (Object.keys(style).length > 0) {
+                    handleStyles(node, style, propDefinitions, stateDefinitions);
+                }
+                if (Object.keys(attrs).length > 0) {
+                    handleAttributes(elementNode, attrs, propDefinitions, stateDefinitions, routeDefinitions);
+                }
+                return [2 /*return*/, elementNode];
+        }
+    });
+}); };
+var generateComponentContent = function (node, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, elementType, _b, attrs, key, dependencies, chunks, options, comp, lookUpTemplates, combinedProps, propsForInstance, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, result, chunk, styleChunk;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                _a = node.content, elementType = _a.elementType, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, key = _a.key;
                 dependencies = structure.dependencies, chunks = structure.chunks, options = structure.options;
-                if (!((dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local')) return [3 /*break*/, 3];
-                comp_1 = externals[elementType];
-                if (!comp_1) {
+                comp = externals[elementType];
+                lookUpTemplates = {};
+                if (!comp) {
                     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)));
                 }
-                combinedProps_1 = __assign(__assign({}, propDefinitions), ((comp_1 === null || comp_1 === void 0 ? void 0 : comp_1.propDefinitions) || {}));
-                propsForInstance = Object.keys(combinedProps_1).reduce(function (acc, propKey) {
+                combinedProps = __assign(__assign({}, propDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.propDefinitions) || {}));
+                propsForInstance = Object.keys(combinedProps).reduce(function (acc, propKey) {
+                    var _a, _b;
                     if (attrs[propKey]) {
-                        acc[propKey] = __assign(__assign({}, combinedProps_1[propKey]), { defaultValue: attrs[propKey].content });
+                        acc[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: ((_a = attrs[propKey]) === null || _a === void 0 ? void 0 : _a.content) || ((_b = combinedProps[propKey]) === null || _b === void 0 ? void 0 : _b.defaultValue) });
                     }
                     else {
-                        acc[propKey] = combinedProps_1[propKey];
+                        acc[propKey] = combinedProps[propKey];
                     }
                     return acc;
                 }, {});
-                combinedStates_1 = __assign(__assign({}, stateDefinitions), ((comp_1 === null || comp_1 === void 0 ? void 0 : comp_1.stateDefinitions) || {}));
-                statesForInstance = Object.keys(combinedStates_1).reduce(function (acc, propKey) {
+                combinedStates = __assign(__assign({}, stateDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.stateDefinitions) || {}));
+                statesForInstance = Object.keys(combinedStates).reduce(function (acc, propKey) {
+                    var _a, _b;
                     if (attrs[propKey]) {
-                        acc[propKey] = __assign(__assign({}, combinedStates_1[propKey]), { defaultValue: attrs[propKey].content });
+                        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) });
                     }
                     else {
-                        acc[propKey] = combinedStates_1[propKey];
+                        acc[propKey] = combinedStates[propKey];
                     }
                     return acc;
                 }, {});
-                lookupTemplate = {};
-                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(comp_1.node, lookupTemplate, propsForInstance, statesForInstance, externals, routeDefinitions, structure)];
+                elementNode = teleport_plugin_common_1.HASTBuilders.createHTMLNode(elementType);
+                lookUpTemplates[key] = elementNode;
+                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(comp.node, lookUpTemplates, propsForInstance, statesForInstance, externals, routeDefinitions, structure)];
             case 1:
-                compTag = _e.sent();
+                compTag = (_c.sent());
                 cssPlugin = (0, teleport_plugin_css_1.createCSSPlugin)({
@@ -120,7 +181,7 @@ templateStyle: 'html',
                     forceScoping: true,
-                    chunkName: comp_1.name,
+                    chunkName: comp.name,
                     staticPropReferences: true,
                 });
                 return [4 /*yield*/, cssPlugin({
-                        uidl: __assign(__assign({}, comp_1), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
+                        uidl: __assign(__assign({}, comp), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
                         chunks: [
@@ -134,3 +195,3 @@ {
                                 meta: {
-                                    nodesLookup: lookupTemplate,
+                                    nodesLookup: lookUpTemplates,
                                 },
@@ -143,51 +204,9 @@ },
             case 2:
-                result = _e.sent();
-                chunk = chunks.find(function (item) { return item.name === comp_1.name; });
+                result = _c.sent();
+                chunk = chunks.find(function (item) { return item.name === comp.name; });
                 if (!chunk) {
-                    styleChunk = result.chunks.find(function (item) { return item.name === comp_1.name; });
+                    styleChunk = result.chunks.find(function (item) { return item.name === comp.name; });
                     chunks.push(styleChunk);
                 }
-                return [2 /*return*/, compTag];
-            case 3:
-                if (dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) !== 'local') {
-                    dependencies[dependency.path] = dependency;
-                }
-                if (!children) return [3 /*break*/, 7];
-                _i = 0, children_1 = children;
-                _e.label = 4;
-            case 4:
-                if (!(_i < children_1.length)) return [3 /*break*/, 7];
-                child = children_1[_i];
-                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(child, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
-            case 5:
-                childTag = _e.sent();
-                if (!childTag) {
-                    return [2 /*return*/];
-                }
-                if (typeof childTag === 'string') {
-                    teleport_plugin_common_1.HASTUtils.addTextNode(elementNode, childTag);
-                }
-                else {
-                    teleport_plugin_common_1.HASTUtils.addChildNode(elementNode, childTag);
-                }
-                _e.label = 6;
-            case 6:
-                _i++;
-                return [3 /*break*/, 4];
-            case 7:
-                if (Object.keys(referencedStyles).length > 0) {
-                    Object.keys(referencedStyles).forEach(function (styleRef) {
-                        var refStyle = referencedStyles[styleRef];
-                        if (refStyle.content.mapType === 'inlined') {
-                            handleStyles(node, refStyle.content.styles, propDefinitions, stateDefinitions);
-                            return;
-                        }
-                    });
-                }
-                if (Object.keys(style).length > 0) {
-                    handleStyles(node, style, propDefinitions, stateDefinitions);
-                }
-                if (Object.keys(attrs).length > 0) {
-                    handleAttributes(elementNode, attrs, propDefinitions, stateDefinitions, routeDefinitions);
-                }
+                teleport_plugin_common_1.HASTUtils.addChildNode(elementNode, compTag);
                 return [2 /*return*/, elementNode];
@@ -233,2 +252,4 @@ }
                     : (0, teleport_uidl_builders_1.staticNode)("".concat(attrValue.content.split('/').pop(), ".html"));
+            teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, String(attrValue.content));
+            return;
         }
@@ -244,5 +265,7 @@ if (attrValue.type === 'dynamic') {
             teleport_plugin_common_1.HASTUtils.addBooleanAttributeToNode(htmlNode, attrKey);
+            return;
         }
         else if (typeof attrValue.content === 'string' || typeof attrValue.content === 'number') {
             teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, teleport_shared_1.StringUtils.encode(String(attrValue.content)));
+            return;
         }
@@ -249,0 +272,0 @@ });

dist/esm/node-handlers.js

@@ -72,3 +72,3 @@ var __assign = (this && this.__assign) || function () {
 var generatElementNode = function (node, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementType, children, _b, attrs, _c, style, _d, referencedStyles, dependency, key, elementNode, dependencies, chunks, options, comp_1, combinedProps_1, propsForInstance, combinedStates_1, statesForInstance, lookupTemplate, compTag, cssPlugin, result, chunk, styleChunk, _i, children_1, child, childTag;
+    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) {
@@ -80,32 +80,93 @@ switch (_e.label) {
                 templatesLookUp[key] = elementNode;
+                dependencies = structure.dependencies;
+                if (dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) !== 'local') {
+                    dependencies[dependency.path] = dependency;
+                }
+                if (!(dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local')) return [3 /*break*/, 2];
+                return [4 /*yield*/, generateComponentContent(node, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
+            case 1:
+                compTag = _e.sent();
+                return [2 /*return*/, compTag];
+            case 2:
+                if (!children) return [3 /*break*/, 6];
+                _i = 0, children_1 = children;
+                _e.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, externals, routeDefinitions, structure)];
+            case 4:
+                childTag = _e.sent();
+                if (!childTag) {
+                    return [2 /*return*/];
+                }
+                if (typeof childTag === 'string') {
+                    HASTUtils.addTextNode(elementNode, childTag);
+                }
+                else {
+                    HASTUtils.addChildNode(elementNode, childTag);
+                }
+                _e.label = 5;
+            case 5:
+                _i++;
+                return [3 /*break*/, 3];
+            case 6:
+                if (Object.keys(referencedStyles).length > 0) {
+                    Object.keys(referencedStyles).forEach(function (styleRef) {
+                        var refStyle = referencedStyles[styleRef];
+                        if (refStyle.content.mapType === 'inlined') {
+                            handleStyles(node, refStyle.content.styles, propDefinitions, stateDefinitions);
+                            return;
+                        }
+                    });
+                }
+                if (Object.keys(style).length > 0) {
+                    handleStyles(node, style, propDefinitions, stateDefinitions);
+                }
+                if (Object.keys(attrs).length > 0) {
+                    handleAttributes(elementNode, attrs, propDefinitions, stateDefinitions, routeDefinitions);
+                }
+                return [2 /*return*/, elementNode];
+        }
+    });
+}); };
+var generateComponentContent = function (node, propDefinitions, stateDefinitions, externals, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, elementType, _b, attrs, key, dependencies, chunks, options, comp, lookUpTemplates, combinedProps, propsForInstance, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, result, chunk, styleChunk;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                _a = node.content, elementType = _a.elementType, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, key = _a.key;
                 dependencies = structure.dependencies, chunks = structure.chunks, options = structure.options;
-                if (!((dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local')) return [3 /*break*/, 3];
-                comp_1 = externals[elementType];
-                if (!comp_1) {
+                comp = externals[elementType];
+                lookUpTemplates = {};
+                if (!comp) {
                     throw new HTMLComponentGeneratorError("".concat(elementType, " is not found from the externals. \n\n        Received ").concat(JSON.stringify(Object.keys(externals), null, 2)));
                 }
-                combinedProps_1 = __assign(__assign({}, propDefinitions), ((comp_1 === null || comp_1 === void 0 ? void 0 : comp_1.propDefinitions) || {}));
-                propsForInstance = Object.keys(combinedProps_1).reduce(function (acc, propKey) {
+                combinedProps = __assign(__assign({}, propDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.propDefinitions) || {}));
+                propsForInstance = Object.keys(combinedProps).reduce(function (acc, propKey) {
+                    var _a, _b;
                     if (attrs[propKey]) {
-                        acc[propKey] = __assign(__assign({}, combinedProps_1[propKey]), { defaultValue: attrs[propKey].content });
+                        acc[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: ((_a = attrs[propKey]) === null || _a === void 0 ? void 0 : _a.content) || ((_b = combinedProps[propKey]) === null || _b === void 0 ? void 0 : _b.defaultValue) });
                     }
                     else {
-                        acc[propKey] = combinedProps_1[propKey];
+                        acc[propKey] = combinedProps[propKey];
                     }
                     return acc;
                 }, {});
-                combinedStates_1 = __assign(__assign({}, stateDefinitions), ((comp_1 === null || comp_1 === void 0 ? void 0 : comp_1.stateDefinitions) || {}));
-                statesForInstance = Object.keys(combinedStates_1).reduce(function (acc, propKey) {
+                combinedStates = __assign(__assign({}, stateDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.stateDefinitions) || {}));
+                statesForInstance = Object.keys(combinedStates).reduce(function (acc, propKey) {
+                    var _a, _b;
                     if (attrs[propKey]) {
-                        acc[propKey] = __assign(__assign({}, combinedStates_1[propKey]), { defaultValue: attrs[propKey].content });
+                        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) });
                     }
                     else {
-                        acc[propKey] = combinedStates_1[propKey];
+                        acc[propKey] = combinedStates[propKey];
                     }
                     return acc;
                 }, {});
-                lookupTemplate = {};
-                return [4 /*yield*/, generateHtmlSynatx(comp_1.node, lookupTemplate, propsForInstance, statesForInstance, externals, routeDefinitions, structure)];
+                elementNode = HASTBuilders.createHTMLNode(elementType);
+                lookUpTemplates[key] = elementNode;
+                return [4 /*yield*/, generateHtmlSynatx(comp.node, lookUpTemplates, propsForInstance, statesForInstance, externals, routeDefinitions, structure)];
             case 1:
-                compTag = _e.sent();
+                compTag = (_c.sent());
                 cssPlugin = createCSSPlugin({
@@ -116,7 +177,7 @@ templateStyle: 'html',
                     forceScoping: true,
-                    chunkName: comp_1.name,
+                    chunkName: comp.name,
                     staticPropReferences: true,
                 });
                 return [4 /*yield*/, cssPlugin({
-                        uidl: __assign(__assign({}, comp_1), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
+                        uidl: __assign(__assign({}, comp), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
                         chunks: [
@@ -130,3 +191,3 @@ {
                                 meta: {
-                                    nodesLookup: lookupTemplate,
+                                    nodesLookup: lookUpTemplates,
                                 },
@@ -139,51 +200,9 @@ },
             case 2:
-                result = _e.sent();
-                chunk = chunks.find(function (item) { return item.name === comp_1.name; });
+                result = _c.sent();
+                chunk = chunks.find(function (item) { return item.name === comp.name; });
                 if (!chunk) {
-                    styleChunk = result.chunks.find(function (item) { return item.name === comp_1.name; });
+                    styleChunk = result.chunks.find(function (item) { return item.name === comp.name; });
                     chunks.push(styleChunk);
                 }
-                return [2 /*return*/, compTag];
-            case 3:
-                if (dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) !== 'local') {
-                    dependencies[dependency.path] = dependency;
-                }
-                if (!children) return [3 /*break*/, 7];
-                _i = 0, children_1 = children;
-                _e.label = 4;
-            case 4:
-                if (!(_i < children_1.length)) return [3 /*break*/, 7];
-                child = children_1[_i];
-                return [4 /*yield*/, generateHtmlSynatx(child, templatesLookUp, propDefinitions, stateDefinitions, externals, routeDefinitions, structure)];
-            case 5:
-                childTag = _e.sent();
-                if (!childTag) {
-                    return [2 /*return*/];
-                }
-                if (typeof childTag === 'string') {
-                    HASTUtils.addTextNode(elementNode, childTag);
-                }
-                else {
-                    HASTUtils.addChildNode(elementNode, childTag);
-                }
-                _e.label = 6;
-            case 6:
-                _i++;
-                return [3 /*break*/, 4];
-            case 7:
-                if (Object.keys(referencedStyles).length > 0) {
-                    Object.keys(referencedStyles).forEach(function (styleRef) {
-                        var refStyle = referencedStyles[styleRef];
-                        if (refStyle.content.mapType === 'inlined') {
-                            handleStyles(node, refStyle.content.styles, propDefinitions, stateDefinitions);
-                            return;
-                        }
-                    });
-                }
-                if (Object.keys(style).length > 0) {
-                    handleStyles(node, style, propDefinitions, stateDefinitions);
-                }
-                if (Object.keys(attrs).length > 0) {
-                    handleAttributes(elementNode, attrs, propDefinitions, stateDefinitions, routeDefinitions);
-                }
+                HASTUtils.addChildNode(elementNode, compTag);
                 return [2 /*return*/, elementNode];
@@ -229,2 +248,4 @@ }
                     : staticNode("".concat(attrValue.content.split('/').pop(), ".html"));
+            HASTUtils.addAttributeToNode(htmlNode, attrKey, String(attrValue.content));
+            return;
         }
@@ -240,5 +261,7 @@ if (attrValue.type === 'dynamic') {
             HASTUtils.addBooleanAttributeToNode(htmlNode, attrKey);
+            return;
         }
         else if (typeof attrValue.content === 'string' || typeof attrValue.content === 'number') {
             HASTUtils.addAttributeToNode(htmlNode, attrKey, StringUtils.encode(String(attrValue.content)));
+            return;
         }
@@ -245,0 +268,0 @@ });

package.json

 {
   "name": "@teleporthq/teleport-plugin-html-base-component",
-  "version": "0.22.1",
+  "version": "0.22.2",
   "description": "A plugin for handling the skeleton/baseline of a base html component",
@@ -33,3 +33,3 @@ "author": "teleportHQ",
   },
-  "gitHead": "ee598de21aa925f81fc62369be7213ca287de038"
+  "gitHead": "d90f5f7b77b1bdaf7703760abf2fd97af0e768a4"
 }

src/node-handlers.ts

@@ -111,52 +111,12 @@ import {
 
-  const { dependencies, chunks, options } = structure
+  const { dependencies } = structure
+  if (dependency && (dependency as UIDLDependency)?.type !== 'local') {
+    dependencies[dependency.path] = dependency
+  }
 
-  if (dependency?.type === 'local') {
-    const comp = externals[elementType]
-
-    if (!comp) {
-      throw new HTMLComponentGeneratorError(`${elementType} is not found from the externals. \n
-        Received ${JSON.stringify(Object.keys(externals), null, 2)}`)
-    }
-
-    const combinedProps = { ...propDefinitions, ...(comp?.propDefinitions || {}) }
-    const propsForInstance = Object.keys(combinedProps).reduce(
-      (acc: Record<string, UIDLPropDefinition>, propKey) => {
-        if (attrs[propKey]) {
-          acc[propKey] = {
-            ...combinedProps[propKey],
-            defaultValue: attrs[propKey].content,
-          }
-        } else {
-          acc[propKey] = combinedProps[propKey]
-        }
-
-        return acc
-      },
-      {}
-    )
-
-    const combinedStates = { ...stateDefinitions, ...(comp?.stateDefinitions || {}) }
-    const statesForInstance = Object.keys(combinedStates).reduce(
-      (acc: Record<string, UIDLStateDefinition>, propKey) => {
-        if (attrs[propKey]) {
-          acc[propKey] = {
-            ...combinedStates[propKey],
-            defaultValue: attrs[propKey].content,
-          }
-        } else {
-          acc[propKey] = combinedStates[propKey]
-        }
-
-        return acc
-      },
-      {}
-    )
-
-    const lookupTemplate: Record<string, unknown> = {}
-    const compTag = await generateHtmlSynatx(
-      comp.node,
-      lookupTemplate,
-      propsForInstance,
-      statesForInstance,
+  if (dependency && (dependency as UIDLDependency)?.type === 'local') {
+    const compTag = await generateComponentContent(
+      node,
+      propDefinitions,
+      stateDefinitions,
       externals,
@@ -166,47 +126,5 @@ routeDefinitions,
     )
-
-    const cssPlugin = createCSSPlugin({
-      templateStyle: 'html',
-      templateChunkName: 'html-template',
-      declareDependency: 'import',
-      forceScoping: true,
-      chunkName: comp.name,
-      staticPropReferences: true,
-    })
-
-    const result = await cssPlugin({
-      uidl: {
-        ...comp,
-        propDefinitions: propsForInstance,
-        stateDefinitions: statesForInstance,
-      },
-      chunks: [
-        {
-          type: ChunkType.HAST,
-          fileType: FileType.HTML,
-          name: DEFAULT_COMPONENT_CHUNK_NAME,
-          linkAfter: [],
-          content: compTag,
-          meta: {
-            nodesLookup: lookupTemplate,
-          },
-        },
-      ],
-      dependencies,
-      options,
-    })
-
-    const chunk = chunks.find((item) => item.name === comp.name)
-    if (!chunk) {
-      const styleChunk = result.chunks.find((item: ChunkDefinition) => item.name === comp.name)
-      chunks.push(styleChunk)
-    }
-
     return compTag
   }
 
-  if (dependency && (dependency as UIDLDependency)?.type !== 'local') {
-    dependencies[dependency.path] = dependency
-  }
-
   if (children) {
@@ -257,2 +175,111 @@ for (const child of children) {
 
+const generateComponentContent = async (
+  node: UIDLElementNode,
+  propDefinitions: Record<string, UIDLPropDefinition>,
+  stateDefinitions: Record<string, UIDLStateDefinition>,
+  externals: Record<string, ComponentUIDL>,
+  routeDefinitions: UIDLRouteDefinitions,
+  structure: {
+    chunks: ChunkDefinition[]
+    dependencies: Record<string, UIDLDependency>
+    options: GeneratorOptions
+  }
+) => {
+  const { elementType, attrs = {}, key } = node.content
+  const { dependencies, chunks, options } = structure
+  const comp = externals[elementType]
+  const lookUpTemplates: Record<string, unknown> = {}
+
+  if (!comp) {
+    throw new HTMLComponentGeneratorError(`${elementType} is not found from the externals. \n
+        Received ${JSON.stringify(Object.keys(externals), null, 2)}`)
+  }
+
+  const combinedProps = { ...propDefinitions, ...(comp?.propDefinitions || {}) }
+  const propsForInstance = Object.keys(combinedProps).reduce(
+    (acc: Record<string, UIDLPropDefinition>, propKey) => {
+      if (attrs[propKey]) {
+        acc[propKey] = {
+          ...combinedProps[propKey],
+          defaultValue: attrs[propKey]?.content || combinedProps[propKey]?.defaultValue,
+        }
+      } else {
+        acc[propKey] = combinedProps[propKey]
+      }
+
+      return acc
+    },
+    {}
+  )
+
+  const combinedStates = { ...stateDefinitions, ...(comp?.stateDefinitions || {}) }
+  const statesForInstance = Object.keys(combinedStates).reduce(
+    (acc: Record<string, UIDLStateDefinition>, propKey) => {
+      if (attrs[propKey]) {
+        acc[propKey] = {
+          ...combinedStates[propKey],
+          defaultValue: attrs[propKey]?.content || combinedStates[propKey]?.defaultValue,
+        }
+      } else {
+        acc[propKey] = combinedStates[propKey]
+      }
+
+      return acc
+    },
+    {}
+  )
+  const elementNode = HASTBuilders.createHTMLNode(elementType)
+  lookUpTemplates[key] = elementNode
+
+  const compTag = (await generateHtmlSynatx(
+    comp.node,
+    lookUpTemplates,
+    propsForInstance,
+    statesForInstance,
+    externals,
+    routeDefinitions,
+    structure
+  )) as unknown as HastNode
+
+  const cssPlugin = createCSSPlugin({
+    templateStyle: 'html',
+    templateChunkName: 'html-template',
+    declareDependency: 'import',
+    forceScoping: true,
+    chunkName: comp.name,
+    staticPropReferences: true,
+  })
+
+  const result = await cssPlugin({
+    uidl: {
+      ...comp,
+      propDefinitions: propsForInstance,
+      stateDefinitions: statesForInstance,
+    },
+    chunks: [
+      {
+        type: ChunkType.HAST,
+        fileType: FileType.HTML,
+        name: DEFAULT_COMPONENT_CHUNK_NAME,
+        linkAfter: [],
+        content: compTag,
+        meta: {
+          nodesLookup: lookUpTemplates,
+        },
+      },
+    ],
+    dependencies,
+    options,
+  })
+
+  const chunk = chunks.find((item) => item.name === comp.name)
+  if (!chunk) {
+    const styleChunk = result.chunks.find((item: ChunkDefinition) => item.name === comp.name)
+    chunks.push(styleChunk)
+  }
+
+  HASTUtils.addChildNode(elementNode, compTag)
+  return elementNode
+}
+
 const generateDynamicNode: NodeToHTML<UIDLDynamicReference, HastNode> = (
@@ -317,2 +344,4 @@ node,
           : staticNode(`${attrValue.content.split('/').pop()}.html`)
+      HASTUtils.addAttributeToNode(htmlNode, attrKey, String(attrValue.content))
+      return
     }
@@ -331,4 +360,6 @@
       HASTUtils.addBooleanAttributeToNode(htmlNode, attrKey)
+      return
     } else if (typeof attrValue.content === 'string' || typeof attrValue.content === 'number') {
       HASTUtils.addAttributeToNode(htmlNode, attrKey, StringUtils.encode(String(attrValue.content)))
+      return
     }
@@ -335,0 +366,0 @@ })

No alert changes

Improved metrics

Total package byte prevSize

134183

increased by4.3%

Lines of code

1315

increased by6.05%

No dependency changes