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

package/dist/esm/node-handlers.js

@@ -55,61 +55,272 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { HTMLComponentGeneratorError, ChunkType, FileType, } from '@teleporthq/teleport-types';
-import { HASTBuilders, HASTUtils } from '@teleporthq/teleport-plugin-common';
-import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared';
+import { join, relative } from 'path';
+import { HASTBuilders, HASTUtils, ASTUtils } from '@teleporthq/teleport-plugin-common';
+import { GenericUtils, StringUtils, UIDLUtils } from '@teleporthq/teleport-shared';
 import { staticNode } from '@teleporthq/teleport-uidl-builders';
 import { createCSSPlugin } from '@teleporthq/teleport-plugin-css';
+import { generateUniqueKeys, createNodesLookup } from '@teleporthq/teleport-uidl-resolver';
 import { DEFAULT_COMPONENT_CHUNK_NAME } from './constants';
-export 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*/, HASTBuilders.createTextNode(node.content.toString())];
-            case 'static':
-                return [2 /*return*/, HASTBuilders.createTextNode(StringUtils.encode(node.content.toString()))];
-            case 'slot':
-                return [2 /*return*/, 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 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, tag, nodesLoookup) {
+    // 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.
+    var currentLookup = nodesLoookup[key];
+    if (currentLookup) {
+        if (Array.isArray(currentLookup)) {
+            Array.isArray(tag) ? currentLookup.push.apply(currentLookup, tag) : currentLookup.push(tag);
+        }
+        else {
+            nodesLoookup[key] = Array.isArray(tag) ? __spreadArray([currentLookup], tag, true) : [currentLookup, tag];
+        }
+        return;
+    }
+    nodesLoookup[key] = tag;
+};
+export var generateHtmlSyntax = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, elementNode, dynamicNode, conditionalNodeComment, _b, staticValue, reference, _c, conditions, matchingCriteria, _d, referenceType, id, _e, refPath, usedProp, defaultValue, _i, refPath_1, path, dynamicConditions, matchCondition, conditionString, isConditionPassing, content, uidlDynamicRef, generatedNode;
+    var _f;
+    return __generator(this, function (_g) {
+        switch (_g.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];
+                    case 'cms-list-repeater': return [3 /*break*/, 12];
+                }
+                return [3 /*break*/, 13];
+            case 1: return [2 /*return*/, HASTBuilders.createTextNode(node.content.toString())];
+            case 2: return [2 /*return*/, HASTBuilders.createTextNode(StringUtils.encode(node.content.toString()))];
+            case 3: return [2 /*return*/, HASTBuilders.createHTMLNode(node.type)];
+            case 4: return [4 /*yield*/, generateElementNode(node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
+            case 5:
+                elementNode = _g.sent();
+                return [2 /*return*/, elementNode];
+            case 6: return [4 /*yield*/, generateDynamicNode(node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 7:
+                dynamicNode = _g.sent();
+                return [2 /*return*/, dynamicNode];
+            case 8:
+                conditionalNodeComment = HASTBuilders.createTextNode('');
+                _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, _e = _d.refPath, refPath = _e === void 0 ? [] : _e;
+                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];
+                        }
+                        // If defaultValue is undefined or null after path traversal, use original default
+                        defaultValue = defaultValue !== null && defaultValue !== void 0 ? 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*/, generateHtmlSyntax(node.content.node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
+                            }
+                        }
+                        catch (error) {
+                            return [2 /*return*/, conditionalNodeComment];
+                        }
+                        return [2 /*return*/, conditionalNodeComment];
+                    }
+                    case 'state':
+                    default:
+                        return [2 /*return*/, conditionalNodeComment];
+                }
+                _g.label = 9;
+            case 9:
+                content = node.content.split('?.');
+                if (!(resolvedExpressions && ((_f = resolvedExpressions.expressions) === null || _f === void 0 ? void 0 : _f[content[0] || '']))) return [3 /*break*/, 11];
+                uidlDynamicRef = {
+                    type: 'dynamic',
+                    content: {
+                        referenceType: 'prop',
+                        refPath: __spreadArray([resolvedExpressions.currentIndex.toString()], content.slice(1), true),
+                        id: content[0],
+                    },
+                };
+                return [4 /*yield*/, generateDynamicNode(uidlDynamicRef, compName, nodesLookup, resolvedExpressions.expressions, stateDefinitions, subComponentOptions, structure)];
+            case 10:
+                generatedNode = _g.sent();
+                return [2 /*return*/, generatedNode];
+            case 11: return [2 /*return*/, HASTBuilders.createComment('Expressions are not supported in HTML')];
+            case 12: return [2 /*return*/, generateRepeaterNode(node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 13: throw new HTMLComponentGeneratorError("generateHtmlSyntax encountered a node of unsupported type: ".concat(JSON.stringify(node, null, 2), " "));
+        }
+    });
+}); };
+var createConditionalStatement = function (conditions, leftOperand) {
+    return conditions.map(function (condition) {
+        var operation = condition.operation, operand = condition.operand;
+        if (operand === undefined) {
+            return "".concat(ASTUtils.convertToUnaryOperator(operation)).concat(getValueType(operand));
+        }
+        return "".concat(getValueType(leftOperand), " ").concat(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 HTMLComponentGeneratorError("Conditional node received an operand of type ".concat(valueType, " \n\n          Received ").concat(JSON.stringify(value)));
+    }
+};
+var generateRepeaterNode = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var nodes, contextId, sourceValue, propDef, parsedSource, elementNode, emptyChildren, _i, emptyChildren_1, child, childTag, listChildren, index, _a, listChildren_1, child, childTag;
+    var _b;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                nodes = node.content.nodes;
+                contextId = node.content.renderPropIdentifier;
+                sourceValue = node.content.source;
+                propDef = propDefinitions[Object.keys(propDefinitions).find(function (propKey) { return sourceValue.includes(propKey); }) || ''];
+                if (!propDef || !Array.isArray(propDef.defaultValue)) {
+                    // If no prop is found we might have a static source value
+                    try {
+                        parsedSource = JSON.parse(sourceValue);
+                        propDef = {
+                            defaultValue: parsedSource,
+                            id: contextId,
+                            type: 'array',
+                        };
+                    }
+                    catch (_d) {
+                        // Silent fail
+                    }
+                }
+                // We do the check again to keep typescript happy, otherwise this could be in catch
+                if (!propDef || !Array.isArray(propDef.defaultValue)) {
+                    return [2 /*return*/, HASTBuilders.createComment('CMS Array Mapper/Repeater not supported in HTML without a prop source')];
+                }
+                propDefinitions[contextId] = propDef;
+                elementNode = HASTBuilders.createHTMLNode('div');
+                node.content.nodes.list.content.style = { display: { type: 'static', content: 'contents' } };
+                if (node.content.nodes.empty) {
+                    node.content.nodes.empty.content.style = { display: { type: 'static', content: 'contents' } };
+                }
+                if (!(propDef.defaultValue.length === 0)) return [3 /*break*/, 5];
+                emptyChildren = nodes.empty.content.children;
+                if (!emptyChildren) return [3 /*break*/, 4];
+                _i = 0, emptyChildren_1 = emptyChildren;
+                _c.label = 1;
+            case 1:
+                if (!(_i < emptyChildren_1.length)) return [3 /*break*/, 4];
+                child = emptyChildren_1[_i];
+                return [4 /*yield*/, generateHtmlSyntax(child, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 2:
+                childTag = _c.sent();
+                if (typeof childTag === 'string') {
+                    HASTUtils.addTextNode(elementNode, childTag);
+                }
+                else {
+                    HASTUtils.addChildNode(elementNode, childTag);
+                }
+                _c.label = 3;
+            case 3:
+                _i++;
+                return [3 /*break*/, 1];
+            case 4:
+                addNodeToLookup("".concat(node.content.nodes.empty.content.key), elementNode, nodesLookup);
+                return [2 /*return*/, elementNode];
+            case 5:
+                listChildren = nodes.list.content.children;
+                if (!listChildren) return [3 /*break*/, 11];
+                index = 0;
+                _c.label = 6;
+            case 6:
+                if (!(index < propDef.defaultValue.length)) return [3 /*break*/, 11];
+                _a = 0, listChildren_1 = listChildren;
+                _c.label = 7;
+            case 7:
+                if (!(_a < listChildren_1.length)) return [3 /*break*/, 10];
+                child = listChildren_1[_a];
+                return [4 /*yield*/, generateHtmlSyntax(child, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, { currentIndex: index, expressions: (_b = {}, _b[contextId] = propDef, _b) })];
+            case 8:
+                childTag = _c.sent();
+                if (typeof childTag === 'string') {
+                    HASTUtils.addTextNode(elementNode, childTag);
+                }
+                else {
+                    HASTUtils.addChildNode(elementNode, childTag);
+                }
+                _c.label = 9;
+            case 9:
+                _a++;
+                return [3 /*break*/, 7];
+            case 10:
+                index++;
+                return [3 /*break*/, 6];
+            case 11:
+                addNodeToLookup("".concat(node.content.nodes.list.content.key), elementNode, nodesLookup);
+                return [2 /*return*/, elementNode];
         }
-        return [2 /*return*/];
     });
 }); };
-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;
+var generateElementNode = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions) { 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 = 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, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
             case 1:
                 compTag = _e.sent();
+                if ('tagName' in compTag) {
+                    compTag.children.unshift(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 = 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*/, generateHtmlSynatx(child, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, routeDefinitions, structure)];
+                return [4 /*yield*/, generateHtmlSyntax(child, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
             case 4:
                 childTag = _e.sent();
-                if (!childTag) {
-                    return [2 /*return*/];
-                }
                 if (typeof childTag === 'string') {
                     HASTUtils.addTextNode(elementNode, childTag);
                 }
@@ -126,38 +337,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, resolvedExpressions === null || resolvedExpressions === void 0 ? void 0 : resolvedExpressions.currentIndex);
+                addNodeToLookup(node.content.key, elementNode, nodesLookup);
                 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',
+        };
+    }
+    createNodesLookup(component, lookup);
+    return lookup;
+};
+var generateComponentContent = function (node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions) { 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, _loop_1, _i, _e, propKey, componentWrapper, isExistingNode, componentInstanceToGenerate, compTag, cssPlugin, initialStructure, result;
+    var _f, _g, _h;
+    return __generator(this, function (_j) {
+        switch (_j.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 = UIDLUtils.cloneObject(externals[elementType] || {});
-                lookUpTemplates = {};
-                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)));
+                componentName = elementType === 'Component' ? 'AppComponent' : elementType;
+                component = externals[componentName];
+                if (component === undefined) {
+                    throw new HTMLComponentGeneratorError("".concat(componentName, " is missing from externals object"));
                 }
+                componentClone = UIDLUtils.cloneObject(component);
                 if (children.length) {
-                    compHasSlots = true;
-                    UIDLUtils.traverseNodes(comp.node, function (childNode, parentNode) {
+                    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'; });
@@ -167,6 +387,7 @@ var generateComponentContent = function (node, propDefinitions, stateDefinitions
                                     content: {
                                         key: 'custom-slot',
                                         elementType: 'slot',
+                                        name: componentClone.name + 'slot',
                                         style: {
                                             display: {
                                                 type: 'static',
@@ -185,46 +406,117 @@ 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);
+                generateUniqueKeys(componentClone, lookupTableForCurrentPage);
+                combinedProps = __assign(__assign({}, Object.keys(propDefinitions).reduce(function (acc, propKey) {
+                    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 attr = attrs[propKey];
+                    if ((attr === null || attr === void 0 ? void 0 : attr.type) === 'object') {
+                        throw new Error("Object attributes are not supported in html exports");
+                    }
+                    if (attr) {
+                        acc[propKey] = __assign(__assign({}, combinedStates[propKey]), { defaultValue: (_a = attr === null || attr === void 0 ? void 0 : attr.content) !== null && _a !== void 0 ? _a : (_b = combinedStates[propKey]) === null || _b === void 0 ? void 0 : _b.defaultValue });
                     }
                     else {
                         acc[propKey] = combinedStates[propKey];
                     }
                     return acc;
                 }, {});
-                elementNode = HASTBuilders.createHTMLNode(StringUtils.camelCaseToDashCase(elementType));
-                lookUpTemplates[key] = elementNode;
-                return [4 /*yield*/, 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 = {};
+                _loop_1 = function (propKey) {
+                    var attribute = attrs[propKey];
+                    if ((attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'element') {
+                        propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: attrs[propKey] });
+                    }
+                    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[attribute.content.id];
+                                break;
+                            case 'state':
+                                propsForInstance[propKey] = combinedStates[attribute.content.id];
+                                break;
+                            case 'expr':
+                                // Ignore expr type attributes in html comp instances for the time being.
+                                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) === 'expr') {
+                        var _k = attribute.content.split('?.'), ctxId_1 = _k[0], refPath = _k.slice(1);
+                        var propKeyFromAttr = Object.keys(combinedProps).find(function (key) { return key === ctxId_1; });
+                        var resolvedValue = combinedProps[propKeyFromAttr];
+                        propsForInstance[propKey] = Array.isArray(resolvedValue)
+                            ? resolvedValue
+                            : __assign(__assign({}, resolvedValue), { defaultValue: refPath.length > 0 && (resolvedValue === null || resolvedValue === void 0 ? void 0 : resolvedValue.defaultValue)
+                                    ? extractDefaultValueFromRefPath(resolvedValue.defaultValue, __spreadArray([
+                                        resolvedExpressions.currentIndex.toString()
+                                    ], refPath, true))
+                                    : null });
+                    }
+                    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' &&
+                        (attribute === null || attribute === void 0 ? void 0 : attribute.type) !== 'expr') {
+                        propsForInstance[propKey] = __assign(__assign({}, combinedProps[propKey]), { defaultValue: (_g = attribute === null || attribute === void 0 ? void 0 : attribute.content) !== null && _g !== void 0 ? _g : (_h = combinedProps[propKey]) === null || _h === void 0 ? void 0 : _h.defaultValue });
+                    }
+                    if (attribute === undefined) {
+                        var propFromCurrentComponent = combinedProps[propKey];
+                        propsForInstance[propKey] = propFromCurrentComponent;
+                    }
+                };
+                // this is where we check if the component we are conusming is actually passing any props to the instance.
+                // We check if we are passing any props and pick the value from the atrrs, if not we pick the value from the propDefinitions of
+                // the component instance that we are using here.
+                for (_i = 0, _e = Object.keys(combinedProps); _i < _e.length; _i++) {
+                    propKey = _e[_i];
+                    _loop_1(propKey);
+                }
+                componentWrapper = StringUtils.camelCaseToDashCase("".concat(componentName, "-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, component.name, nodesLookup, propsForInstance, statesForInstance, subComponentOptions, structure)];
             case 1:
-                compTag = (_f.sent());
+                compTag = _j.sent();
                 cssPlugin = createCSSPlugin({
                     templateStyle: 'html',
                     templateChunkName: 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: ChunkType.HAST,
@@ -233,7 +525,7 @@ var generateComponentContent = function (node, propDefinitions, stateDefinitions
                             linkAfter: [],
                             content: compTag,
                             meta: {
-                                nodesLookup: lookUpTemplates,
+                                nodesLookup: nodesLookup,
                             },
                         },
                     ],
@@ -252,99 +544,183 @@ var generateComponentContent = function (node, propDefinitions, stateDefinitions
                         });
                     }); }, Promise.resolve(initialStructure))];
             case 2:
-                result = _f.sent();
-                if (compHasSlots) {
-                    result.chunks.forEach(function (chunk) {
-                        if (chunk.fileType === 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 === FileType.CSS; });
-                        if (!styleChunk) {
-                            return [2 /*return*/];
-                        }
-                        chunks.push(styleChunk);
+                result = _j.sent();
+                result.chunks.forEach(function (chunk) {
+                    if (chunk.fileType === FileType.CSS) {
+                        chunks.push(chunk);
                     }
-                }
+                });
+                addNodeToLookup(node.content.key, compTag, nodesLookup);
                 return [2 /*return*/, compTag];
         }
     });
 }); };
-var generateDynamicNode = function (node, _, propDefinitions, stateDefinitions) {
-    var spanTag = HASTBuilders.createHTMLNode('span');
-    var usedReferenceValue = node.content.referenceType === 'prop'
-        ? getValueFromReference(node.content.id, propDefinitions)
-        : getValueFromReference(node.content.id, stateDefinitions);
-    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 = HASTBuilders.createHTMLNode('span');
+                    commentNode = HASTBuilders.createComment("Content for locale ".concat(node.content.id));
+                    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*/, 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*/, generateHtmlSyntax(elementNode, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 2:
+                elementTag = _a.sent();
+                return [2 /*return*/, elementTag];
+            case 3:
+                spanTagWrapper = HASTBuilders.createHTMLNode('span');
+                commentNode = HASTBuilders.createComment("Content for slot ".concat(node.content.id));
+                HASTUtils.addChildNode(spanTagWrapper, commentNode);
+                return [2 /*return*/, spanTagWrapper];
+            case 4:
+                spanTag = HASTBuilders.createHTMLNode('span');
+                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' ? 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, currentIndex) {
+    var _loop_2 = 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(StringUtils.camelCaseToDashCase(StringUtils.removeIllegalCharacters((routeDefinitions === null || routeDefinitions === void 0 ? void 0 : routeDefinitions.defaultValue) || '')))
-                    ? staticNode('index.html')
-                    : staticNode("".concat(attrValue.content.split('/').pop(), ".html"));
-            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);
-            HASTUtils.addAttributeToNode(htmlNode, attrKey, String(value));
-            return;
-        }
-        if (attrValue.type === 'raw') {
-            HASTUtils.addAttributeToNode(htmlNode, attrKey, attrValue.content);
-            return;
-        }
-        if (typeof attrValue.content === 'boolean') {
-            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;
+        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 = join.apply(void 0, __spreadArray(__spreadArray([], ((outputOptions === null || outputOptions === void 0 ? void 0 : outputOptions.folderPath) || []), false), ['./'], false));
+                    var localPrefix = relative("/".concat(currentPageRoute), "/".concat(targetLink === '/' ? 'index' : targetLink));
+                    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 = 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 = join(relative(join.apply(void 0, outputOptions.folderPath), './'), value);
+                    }
+                    HASTUtils.addAttributeToNode(htmlNode, attrKey, value);
+                }
+                break;
+            }
+            case 'dynamic': {
+                var value = getValueFromReference(content.id, content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
+                HASTUtils.addAttributeToNode(htmlNode, attrKey, String(extractDefaultValueFromRefPath(value.defaultValue, content.refPath)));
+                break;
+            }
+            case 'raw': {
+                HASTUtils.addAttributeToNode(htmlNode, attrKey, content);
+                break;
+            }
+            case 'expr': {
+                var fullPath = content.split('?.');
+                var prop = propDefinitions[(fullPath === null || fullPath === void 0 ? void 0 : fullPath[0]) || ''];
+                if (!prop) {
+                    break;
+                }
+                var path = typeof currentIndex === 'number'
+                    ? __spreadArray([currentIndex.toString()], fullPath.slice(1), true) : fullPath.slice(1);
+                var value = extractDefaultValueFromRefPath(prop.defaultValue, path);
+                if (!value) {
+                    break;
+                }
+                HASTUtils.addAttributeToNode(htmlNode, attrKey, String(value));
+                break;
+            }
+            case 'element':
+            case 'import':
+            case 'object':
+                break;
+            default: {
+                throw new 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_2(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 HTMLComponentGeneratorError("Definition for ".concat(key, " is missing from ").concat(JSON.stringify(definitions, null, 2)));
     }
-    if (!usedReferenceValue.hasOwnProperty('defaultValue')) {
+    if (['string', 'number', 'object', 'element', 'array', 'boolean'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type) === false) {
+        throw new 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 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 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 GenericUtils.getValueFromPath(refPath.join('.'), propDefaultValue);
 };
 //# sourceMappingURL=node-handlers.js.map