@teleporthq/teleport-plugin-html-base-component 0.38.0-alpha.0 → 0.38.0

package/dist/cjs/node-handlers.js

@@ -56,64 +56,161 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateHtmlSynatx = void 0;
+exports.generateHtmlSyntax = void 0;
 var teleport_types_1 = require("@teleporthq/teleport-types");
+var path_1 = require("path");
 var teleport_plugin_common_1 = require("@teleporthq/teleport-plugin-common");
 var teleport_shared_1 = require("@teleporthq/teleport-shared");
 var teleport_uidl_builders_1 = require("@teleporthq/teleport-uidl-builders");
 var teleport_plugin_css_1 = require("@teleporthq/teleport-plugin-css");
+var teleport_uidl_resolver_1 = require("@teleporthq/teleport-uidl-resolver");
 var constants_1 = require("./constants");
-var generateHtmlSynatx = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        switch (node.type) {
-            case 'inject':
-            case 'raw':
-                return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createTextNode(node.content.toString())];
-            case 'static':
-                return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createTextNode(teleport_shared_1.StringUtils.encode(node.content.toString()))];
-            case 'slot':
-                return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createHTMLNode(node.type)];
-            case 'element':
-                return [2 /*return*/, generatElementNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
-            case 'dynamic':
-                return [2 /*return*/, generateDynamicNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
-            default:
-                throw new teleport_types_1.HTMLComponentGeneratorError("generateHtmlSyntax encountered a node of unsupported type: ".concat(JSON.stringify(node, null, 2), " "));
+var isValidURL = function (url) {
+    try {
+        /* tslint:disable:no-unused-expression */
+        new URL(url);
+        return true;
+    }
+    catch (error) {
+        return false;
+    }
+};
+var addNodeToLookup = function (key, node, tag, nodesLoookup, hierarchy) {
+    if (hierarchy === void 0) { hierarchy = []; }
+    // In html code-generation we combine the nodes of the component that is being consumed with the current component.
+    // As html can't load the component at runtime like react or any other frameworks. So, we merge the component as a standalone
+    // component in the current component.
+    if (nodesLoookup[key]) {
+        throw new teleport_types_1.HTMLComponentGeneratorError("\n".concat(hierarchy.join(' -> '), " \n\nDuplicate key found in nodesLookup: ").concat(node.content.key, " \n\n\nA node with the same key already exists\n\nReceived \n\n ").concat(JSON.stringify(tag), "\n ").concat(JSON.stringify(node), "\nExisting \n\n ").concat(JSON.stringify(nodesLoookup[key]), " \n\n"));
+    }
+    nodesLoookup[key] = tag;
+};
+var generateHtmlSyntax = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, elementNode, dynamicNode, conditionalNodeComment, _b, staticValue, reference, _c, conditions, matchingCriteria, _d, referenceType, id, refPath, usedProp, defaultValue, _i, refPath_1, path, dynamicConditions, matchCondition, conditionString, isConditionPassing;
+    return __generator(this, function (_e) {
+        switch (_e.label) {
+            case 0:
+                _a = node.type;
+                switch (_a) {
+                    case 'inject': return [3 /*break*/, 1];
+                    case 'raw': return [3 /*break*/, 1];
+                    case 'static': return [3 /*break*/, 2];
+                    case 'slot': return [3 /*break*/, 3];
+                    case 'element': return [3 /*break*/, 4];
+                    case 'dynamic': return [3 /*break*/, 6];
+                    case 'conditional': return [3 /*break*/, 8];
+                    case 'expr': return [3 /*break*/, 9];
+                }
+                return [3 /*break*/, 10];
+            case 1: return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createTextNode(node.content.toString())];
+            case 2: return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createTextNode(teleport_shared_1.StringUtils.encode(node.content.toString()))];
+            case 3: return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createHTMLNode(node.type)];
+            case 4: return [4 /*yield*/, generateElementNode(node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 5:
+                elementNode = _e.sent();
+                return [2 /*return*/, elementNode];
+            case 6: return [4 /*yield*/, generateDynamicNode(node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 7:
+                dynamicNode = _e.sent();
+                return [2 /*return*/, dynamicNode];
+            case 8:
+                conditionalNodeComment = teleport_plugin_common_1.HASTBuilders.createComment('Conditional nodes are not supported in HTML');
+                _b = node.content, staticValue = _b.value, reference = _b.reference, _c = _b.condition, conditions = _c.conditions, matchingCriteria = _c.matchingCriteria;
+                if (reference.type !== 'dynamic') {
+                    return [2 /*return*/, conditionalNodeComment];
+                }
+                _d = reference.content, referenceType = _d.referenceType, id = _d.id, refPath = _d.refPath;
+                switch (referenceType) {
+                    case 'prop': {
+                        usedProp = propDefinitions[id];
+                        if (usedProp === undefined || usedProp.defaultValue === undefined) {
+                            return [2 /*return*/, conditionalNodeComment];
+                        }
+                        defaultValue = usedProp.defaultValue;
+                        for (_i = 0, refPath_1 = refPath; _i < refPath_1.length; _i++) {
+                            path = refPath_1[_i];
+                            defaultValue = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[path];
+                        }
+                        // Safety measure in case no value is found
+                        if (!defaultValue) {
+                            defaultValue = usedProp.defaultValue;
+                        }
+                        dynamicConditions = createConditionalStatement(staticValue !== undefined ? [{ operand: staticValue, operation: '===' }] : conditions, defaultValue);
+                        matchCondition = matchingCriteria && matchingCriteria === 'all' ? '&&' : '||';
+                        conditionString = dynamicConditions.join(" ".concat(matchCondition, " "));
+                        try {
+                            isConditionPassing = new Function("return ".concat(conditionString))();
+                            if (isConditionPassing) {
+                                return [2 /*return*/, (0, exports.generateHtmlSyntax)(node.content.node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+                            }
+                        }
+                        catch (error) {
+                            return [2 /*return*/, conditionalNodeComment];
+                        }
+                        return [2 /*return*/, conditionalNodeComment];
+                    }
+                    case 'state':
+                    default:
+                        return [2 /*return*/, conditionalNodeComment];
+                }
+                _e.label = 9;
+            case 9: return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createComment('Expressions are not supported in HTML')];
+            case 10: throw new teleport_types_1.HTMLComponentGeneratorError("generateHtmlSyntax encountered a node of unsupported type: ".concat(JSON.stringify(node, null, 2), " "));
         }
-        return [2 /*return*/];
     });
 }); };
-exports.generateHtmlSynatx = generateHtmlSynatx;
-var generatElementNode = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, 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, compTag, _i, children_1, child, childTag;
+exports.generateHtmlSyntax = generateHtmlSyntax;
+var createConditionalStatement = function (conditions, leftOperand) {
+    return conditions.map(function (condition) {
+        var operation = condition.operation, operand = condition.operand;
+        if (operand === undefined) {
+            return "".concat(teleport_plugin_common_1.ASTUtils.convertToUnaryOperator(operation)).concat(getValueType(operand));
+        }
+        return "".concat(getValueType(leftOperand), " ").concat(teleport_plugin_common_1.ASTUtils.convertToBinaryOperator(operation), " ").concat(getValueType(operand));
+    });
+};
+var getValueType = function (value) {
+    var valueType = typeof value;
+    switch (valueType) {
+        case 'string':
+            return "\"".concat(value, "\"");
+        case 'number':
+            return value;
+        case 'boolean':
+            return value;
+        default:
+            throw new teleport_types_1.HTMLComponentGeneratorError("Conditional node received an operand of type ".concat(valueType, " \n\n          Received ").concat(JSON.stringify(value)));
+    }
+};
+var generateElementNode = function (node, compName, 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, dependencies, compTag, elementNode, _i, children_1, child, childTag;
     return __generator(this, function (_e) {
         switch (_e.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;
+                _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;
                 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, subComponentOptions, routeDefinitions, structure)];
+                return [4 /*yield*/, generateComponentContent(node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
             case 1:
                 compTag = _e.sent();
+                if ('tagName' in compTag) {
+                    compTag.children.unshift(teleport_plugin_common_1.HASTBuilders.createComment("".concat(node.content.semanticType, " component")));
+                }
                 return [2 /*return*/, compTag];
             case 2:
+                if (dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) !== 'local') {
+                    dependencies[dependency.path] = dependency;
+                }
+                elementNode = teleport_plugin_common_1.HASTBuilders.createHTMLNode(elementType);
                 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, subComponentOptions, routeDefinitions, structure)];
+                return [4 /*yield*/, (0, exports.generateHtmlSyntax)(child, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
             case 4:
                 childTag = _e.sent();
-                if (!childTag) {
-                    return [2 /*return*/];
-                }
                 if (typeof childTag === 'string') {
                     teleport_plugin_common_1.HASTUtils.addTextNode(elementNode, childTag);
                 }
@@ -130,38 +227,47 @@ var generatElementNode = function (node, templatesLookUp, propDefinitions, state
                         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);
-                }
+                handleAttributes(elementType, elementNode, attrs, propDefinitions, stateDefinitions, structure.options.projectRouteDefinition, structure.outputOptions);
+                addNodeToLookup(node.content.key, node, elementNode, nodesLookup, [compName]);
                 return [2 /*return*/, elementNode];
         }
     });
 }); };
-var generateComponentContent = function (node, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var externals, plugins, _a, elementType, _b, attrs, key, _c, children, dependencies, _d, chunks, options, comp, lookUpTemplates, compHasSlots, combinedProps, propsForInstance, combinedStates, statesForInstance, elementNode, compTag, cssPlugin, initialStructure, result, chunk, styleChunk;
-    var _e;
-    return __generator(this, function (_f) {
-        switch (_f.label) {
+var createLookupTable = function (component, nodesLookup) {
+    var lookup = {};
+    for (var _i = 0, _a = Object.keys(nodesLookup); _i < _a.length; _i++) {
+        var node = _a[_i];
+        lookup[node] = {
+            count: 1,
+            nextKey: '1',
+        };
+    }
+    (0, teleport_uidl_resolver_1.createNodesLookup)(component, lookup);
+    return lookup;
+};
+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, attribute, propFromCurrentComponent, componentWrapper, isExistingNode, componentInstanceToGenerate, compTag, cssPlugin, initialStructure, result;
+    var _f, _g;
+    return __generator(this, function (_h) {
+        switch (_h.label) {
             case 0:
                 externals = subComponentOptions.externals, plugins = subComponentOptions.plugins;
-                _a = node.content, elementType = _a.elementType, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, key = _a.key, _c = _a.children, children = _c === void 0 ? [] : _c;
+                _a = node.content, elementType = _a.elementType, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, _c = _a.children, children = _c === void 0 ? [] : _c;
                 dependencies = structure.dependencies, _d = structure.chunks, chunks = _d === void 0 ? [] : _d, options = structure.options;
-                comp = teleport_shared_1.UIDLUtils.cloneObject(externals[elementType] || {});
-                lookUpTemplates = {};
-                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)));
+                componentName = elementType === 'Component' ? 'AppComponent' : elementType;
+                component = externals[componentName];
+                if (component === undefined) {
+                    throw new teleport_types_1.HTMLComponentGeneratorError("".concat(componentName, " is missing from externals object"));
                 }
+                componentClone = teleport_shared_1.UIDLUtils.cloneObject(component);
                 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;
                         if (childNode.type === 'slot' && parentNode.type === 'element') {
                             var nonSlotNodes = (_b = (_a = parentNode.content) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.filter(function (n) { return n.type !== 'slot'; });
@@ -171,6 +277,7 @@ var generateComponentContent = function (node, propDefinitions, stateDefinitions
                                     content: {
                                         key: 'custom-slot',
                                         elementType: 'slot',
+                                        name: componentClone.name + 'slot',
                                         style: {
                                             display: {
                                                 type: 'static',
@@ -189,46 +296,115 @@ var generateComponentContent = function (node, propDefinitions, stateDefinitions
                     */
                     node.content.children = [];
                 }
-                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[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[propKey];
+                lookupTableForCurrentPage = createLookupTable(componentClone, nodesLookup);
+                (0, teleport_uidl_resolver_1.generateUniqueKeys)(componentClone, lookupTableForCurrentPage);
+                combinedProps = __assign(__assign({}, Object.keys(propDefinitions).reduce(function (acc, propKey) {
+                    var _a;
+                    if (((_a = propDefinitions[propKey]) === null || _a === void 0 ? void 0 : _a.type) === 'element') {
+                        return acc;
                     }
+                    acc[propKey] = propDefinitions[propKey];
                     return acc;
-                }, {});
-                combinedStates = __assign(__assign({}, stateDefinitions), ((comp === null || comp === void 0 ? void 0 : comp.stateDefinitions) || {}));
+                }, {})), ((componentClone === null || componentClone === void 0 ? void 0 : componentClone.propDefinitions) || {}));
+                combinedStates = __assign(__assign({}, stateDefinitions), ((componentClone === null || componentClone === void 0 ? void 0 : componentClone.stateDefinitions) || {}));
                 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 {
                         acc[propKey] = combinedStates[propKey];
                     }
                     return acc;
                 }, {});
-                elementNode = teleport_plugin_common_1.HASTBuilders.createHTMLNode(teleport_shared_1.StringUtils.camelCaseToDashCase(elementType));
-                lookUpTemplates[key] = elementNode;
-                return [4 /*yield*/, (0, exports.generateHtmlSynatx)(__assign(__assign({}, comp.node), { content: __assign(__assign({}, comp.node.content), { style: __assign(__assign({}, (((_e = comp.node.content) === null || _e === void 0 ? void 0 : _e.style) || {})), { display: {
-                                    type: 'static',
-                                    content: 'contents',
-                                } }) }) }), lookUpTemplates, propsForInstance, statesForInstance, subComponentOptions, routeDefinitions, structure)];
+                propsForInstance = {};
+                _i = 0, _e = Object.keys(combinedProps);
+                _h.label = 1;
             case 1:
-                compTag = (_f.sent());
+                if (!(_i < _e.length)) return [3 /*break*/, 7];
+                propKey = _e[_i];
+                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] });
+                return [4 /*yield*/, (0, exports.generateHtmlSyntax)(attrs[propKey], component.name, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 2:
+                _h.sent();
+                _h.label = 3;
+            case 3:
+                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."));
+                    }
+                }
+                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*/, 5];
+                return [4 /*yield*/, (0, exports.generateHtmlSyntax)(propFromCurrentComponent.defaultValue, component.name, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 4:
+                _h.sent();
+                _h.label = 5;
+            case 5:
+                propsForInstance[propKey] = propFromCurrentComponent;
+                _h.label = 6;
+            case 6:
+                _i++;
+                return [3 /*break*/, 1];
+            case 7:
+                componentWrapper = teleport_shared_1.StringUtils.camelCaseToDashCase("".concat(componentName, "-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, component.name, nodesLookup, propsForInstance, statesForInstance, subComponentOptions, structure)];
+            case 8:
+                compTag = _h.sent();
                 cssPlugin = (0, teleport_plugin_css_1.createCSSPlugin)({
                     templateStyle: 'html',
                     templateChunkName: constants_1.DEFAULT_COMPONENT_CHUNK_NAME,
                     declareDependency: 'import',
-                    forceScoping: true,
-                    chunkName: comp.name,
+                    chunkName: componentClone.name,
                     staticPropReferences: true,
                 });
                 initialStructure = {
-                    uidl: __assign(__assign({}, comp), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
+                    uidl: __assign(__assign({}, componentClone), { node: componentInstanceToGenerate, propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
                     chunks: [
                         {
                             type: teleport_types_1.ChunkType.HAST,
@@ -237,7 +413,7 @@ var generateComponentContent = function (node, propDefinitions, stateDefinitions
                             linkAfter: [],
                             content: compTag,
                             meta: {
-                                nodesLookup: lookUpTemplates,
+                                nodesLookup: nodesLookup,
                             },
                         },
                     ],
@@ -255,100 +431,170 @@ var generateComponentContent = function (node, propDefinitions, stateDefinitions
                             }
                         });
                     }); }, Promise.resolve(initialStructure))];
-            case 2:
-                result = _f.sent();
-                if (compHasSlots) {
-                    result.chunks.forEach(function (chunk) {
-                        if (chunk.fileType === teleport_types_1.FileType.CSS) {
-                            chunks.push(chunk);
-                        }
-                    });
-                }
-                else {
-                    chunk = chunks.find(function (item) { return item.name === comp.name; });
-                    if (!chunk) {
-                        styleChunk = result.chunks.find(function (item) { return item.fileType === teleport_types_1.FileType.CSS; });
-                        if (!styleChunk) {
-                            return [2 /*return*/];
-                        }
-                        chunks.push(styleChunk);
+            case 9:
+                result = _h.sent();
+                result.chunks.forEach(function (chunk) {
+                    if (chunk.fileType === teleport_types_1.FileType.CSS) {
+                        chunks.push(chunk);
                     }
-                }
+                });
+                addNodeToLookup(node.content.key, node, compTag, nodesLookup, [compName, component.name]);
                 return [2 /*return*/, compTag];
         }
     });
 }); };
-var generateDynamicNode = function (node, _, propDefinitions, stateDefinitions) {
-    var spanTag = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
-    var usedReferenceValue = node.content.referenceType === 'prop'
-        ? getValueFromReference(node.content.id, propDefinitions)
-        : getValueFromReference(node.content.id, stateDefinitions);
-    teleport_plugin_common_1.HASTUtils.addTextNode(spanTag, String(usedReferenceValue));
-    return spanTag;
-};
+var generateDynamicNode = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var localeTag, commentNode, usedReferenceValue, elementNode, elementTag, spanTagWrapper, commentNode, spanTag;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (node.content.referenceType === 'locale') {
+                    localeTag = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
+                    commentNode = teleport_plugin_common_1.HASTBuilders.createComment("Content for locale ".concat(node.content.id));
+                    teleport_plugin_common_1.HASTUtils.addChildNode(localeTag, commentNode);
+                    return [2 /*return*/, localeTag];
+                }
+                usedReferenceValue = getValueFromReference(node.content.id, node.content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
+                if ((usedReferenceValue.type === 'object' || usedReferenceValue.type === 'array') &&
+                    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.
+                    return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createTextNode(String(extractDefaultValueFromRefPath(usedReferenceValue.defaultValue, node.content.refPath)))];
+                }
+                if (!(usedReferenceValue.type === 'element')) return [3 /*break*/, 4];
+                elementNode = usedReferenceValue.defaultValue;
+                if (!elementNode) return [3 /*break*/, 3];
+                if (!(elementNode.content.key in nodesLookup)) return [3 /*break*/, 1];
+                return [2 /*return*/, nodesLookup[elementNode.content.key]];
+            case 1: return [4 /*yield*/, (0, exports.generateHtmlSyntax)(elementNode, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 2:
+                elementTag = _a.sent();
+                return [2 /*return*/, elementTag];
+            case 3:
+                spanTagWrapper = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
+                commentNode = teleport_plugin_common_1.HASTBuilders.createComment("Content for slot ".concat(node.content.id));
+                teleport_plugin_common_1.HASTUtils.addChildNode(spanTagWrapper, commentNode);
+                return [2 /*return*/, spanTagWrapper];
+            case 4:
+                spanTag = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
+                teleport_plugin_common_1.HASTUtils.addTextNode(spanTag, String(usedReferenceValue.defaultValue));
+                return [2 /*return*/, spanTag];
+        }
+    });
+}); };
 var handleStyles = function (node, styles, propDefinitions, stateDefinitions) {
     Object.keys(styles).forEach(function (styleKey) {
-        var _a;
+        var _a, _b;
         var style = styles[styleKey];
         if (style.type === 'dynamic' && ((_a = style.content) === null || _a === void 0 ? void 0 : _a.referenceType) !== 'token') {
-            if (style.content.referenceType === 'prop') {
-                style = getValueFromReference(style.content.id, propDefinitions);
-            }
-            else if (style.content.referenceType === 'state') {
-                style = getValueFromReference(style.content.id, stateDefinitions);
+            var referencedValue = getValueFromReference(style.content.id, style.content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
+            if (referencedValue.type === 'string' || referencedValue.type === 'number') {
+                style = String(extractDefaultValueFromRefPath(referencedValue.defaultValue, (_b = style === null || style === void 0 ? void 0 : style.content) === null || _b === void 0 ? void 0 : _b.refPath));
             }
             node.content.style[styleKey] = typeof style === 'string' ? (0, teleport_uidl_builders_1.staticNode)(style) : style;
         }
     });
 };
-var handleAttributes = function (htmlNode, attrs, propDefinitions, stateDefinitions, routeDefinitions) {
-    Object.keys(attrs).forEach(function (attrKey) {
+var handleAttributes = function (elementType, htmlNode, attrs, propDefinitions, stateDefinitions, routeDefinitions, outputOptions) {
+    var _loop_1 = function (attrKey) {
         var attrValue = attrs[attrKey];
-        if (attrKey === 'href' &&
-            attrValue.type === 'static' &&
-            typeof attrValue.content === 'string' &&
-            attrValue.content.startsWith('/')) {
-            attrValue =
-                attrValue.content === '/' ||
-                    attrValue.content ===
-                        "/".concat(teleport_shared_1.StringUtils.camelCaseToDashCase(teleport_shared_1.StringUtils.removeIllegalCharacters((routeDefinitions === null || routeDefinitions === void 0 ? void 0 : routeDefinitions.defaultValue) || '')))
-                    ? (0, teleport_uidl_builders_1.staticNode)('index.html')
-                    : (0, teleport_uidl_builders_1.staticNode)("".concat(attrValue.content.split('/').pop(), ".html"));
-            teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, String(attrValue.content));
-            return;
-        }
-        if (attrValue.type === 'dynamic') {
-            var value = attrValue.content.referenceType === 'prop'
-                ? getValueFromReference(attrValue.content.id, propDefinitions)
-                : getValueFromReference(attrValue.content.id, stateDefinitions);
-            teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, String(value));
-            return;
-        }
-        if (attrValue.type === 'raw') {
-            teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, attrValue.content);
-            return;
-        }
-        if (typeof attrValue.content === 'boolean') {
-            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;
+        var type = attrValue.type, content = attrValue.content;
+        switch (type) {
+            case 'static': {
+                if (attrKey === 'href' && typeof content === 'string' && content.startsWith('/')) {
+                    var targetLink = void 0;
+                    var targetRoute = ((routeDefinitions === null || routeDefinitions === void 0 ? void 0 : routeDefinitions.values) || []).find(function (route) { return route.pageOptions.navLink === content; });
+                    if (targetRoute) {
+                        targetLink = targetRoute.pageOptions.navLink;
+                    }
+                    if (!targetRoute && content === '/home') {
+                        targetLink = '/';
+                    }
+                    if (!targetLink && !targetRoute) {
+                        targetLink = content;
+                    }
+                    var currentPageRoute = path_1.join.apply(void 0, __spreadArray(__spreadArray([], ((outputOptions === null || outputOptions === void 0 ? void 0 : outputOptions.folderPath) || []), false), ['./'], false));
+                    var localPrefix = (0, path_1.relative)("/".concat(currentPageRoute), "/".concat(targetLink === '/' ? 'index' : targetLink));
+                    teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, "".concat(localPrefix, ".html"));
+                    break;
+                }
+                if (typeof content === 'boolean') {
+                    htmlNode.properties[attrKey] = content === true ? 'true' : 'false';
+                }
+                else if (typeof content === 'string' || typeof attrValue.content === 'number') {
+                    var value = teleport_shared_1.StringUtils.encode(String(attrValue.content));
+                    /*
+                      elementType of image is always mapped to img.
+                      For reference, check `html-mapping` file.
+                    */
+                    if (elementType === 'img' && attrKey === 'src' && !isValidURL(value)) {
+                        /*
+                          By default we just prefix all the asset paths with just the
+                          assetPrefix that is configured in the project. But for `html` generators
+                          we need to prefix that with the current file location.
+            
+                          Because, all the other frameworks have a build setup. which serves all the
+                          assets from the `public` folder. But in the case of `html` here is how it works
+            
+                          We load a file from `index.html` the request for the image goes from
+                          '...url.../public/...image...'
+                          If it's a nested url, then the request goes from
+                          '...url/nested/public/...image..'
+            
+                          But the nested folder is available only on the root. With this
+                          The url changes prefixes to
+            
+                          ../public/playground_assets/..image.. etc depending on the dept the file is in.
+                        */
+                        value = (0, path_1.join)((0, path_1.relative)(path_1.join.apply(void 0, outputOptions.folderPath), './'), value);
+                    }
+                    teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, value);
+                }
+                break;
+            }
+            case 'dynamic': {
+                var value = getValueFromReference(content.id, content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
+                teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, String(extractDefaultValueFromRefPath(value.defaultValue, content.refPath)));
+                break;
+            }
+            case 'raw': {
+                teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, content);
+                break;
+            }
+            case 'element':
+            case 'import':
+            case 'expr':
+            case 'object':
+                break;
+            default: {
+                throw new teleport_types_1.HTMLComponentGeneratorError("Received ".concat(JSON.stringify(attrValue, null, 2), " \n in handleAttributes for html"));
+            }
         }
-    });
+    };
+    for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) {
+        var attrKey = _a[_i];
+        _loop_1(attrKey);
+    }
 };
 var getValueFromReference = function (key, definitions) {
-    var usedReferenceValue = definitions[key.includes('.') ? key.split('.')[0] : key];
+    var usedReferenceValue = definitions[key.includes('?.') ? key.split('?.')[0] : key];
     if (!usedReferenceValue) {
         throw new teleport_types_1.HTMLComponentGeneratorError("Definition for ".concat(key, " is missing from ").concat(JSON.stringify(definitions, null, 2)));
     }
-    if (!usedReferenceValue.hasOwnProperty('defaultValue')) {
+    if (['string', 'number', 'object', 'element', 'array'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type) === false) {
+        throw new teleport_types_1.HTMLComponentGeneratorError("Attribute is using dynamic value, but received of type ".concat(JSON.stringify(usedReferenceValue, null, 2)));
+    }
+    if (usedReferenceValue.type !== 'element' &&
+        usedReferenceValue.hasOwnProperty('defaultValue') === false) {
         throw new teleport_types_1.HTMLComponentGeneratorError("Default value is missing from dynamic reference - ".concat(JSON.stringify(usedReferenceValue, null, 2)));
     }
-    if (!['string', 'number', 'object'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type)) {
-        throw new teleport_types_1.HTMLComponentGeneratorError("Attribute is using dynamic value, but received of type ".concat(JSON.stringify(usedReferenceValue, null, 2)));
+    return usedReferenceValue;
+};
+var extractDefaultValueFromRefPath = function (propDefaultValue, refPath) {
+    if (typeof propDefaultValue !== 'object' || !(refPath === null || refPath === void 0 ? void 0 : refPath.length)) {
+        return propDefaultValue;
     }
-    return String(usedReferenceValue.defaultValue);
+    return teleport_shared_1.GenericUtils.getValueFromPath(refPath.join('.'), propDefaultValue);
 };
 //# sourceMappingURL=node-handlers.js.map