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

package/dist/esm/node-handlers.js

@@ -56,68 +56,468 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { HTMLComponentGeneratorError, ChunkType, FileType, } from '@teleporthq/teleport-types';
 import { join, relative } from 'path';
-import { HASTBuilders, HASTUtils } from '@teleporthq/teleport-plugin-common';
-import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared';
+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, 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, structure)];
-            case 'dynamic':
-                return [2 /*return*/, generateDynamicNode(node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure)];
-            default:
-                throw new HTMLComponentGeneratorError("generateHtmlSyntax encountered a node of unsupported type: ".concat(JSON.stringify(node, null, 2), " "));
+var getTranslation = function (id, options) {
+    var _a, _b;
+    var i18n = options.internationalization;
+    if (!(i18n === null || i18n === void 0 ? void 0 : i18n.translations)) {
+        return null;
+    }
+    var locale = i18n.targetLocale || ((_a = i18n.main) === null || _a === void 0 ? void 0 : _a.locale);
+    if (!locale) {
+        return null;
+    }
+    return ((_b = i18n.translations[locale]) === null || _b === void 0 ? void 0 : _b[id]) || null;
+};
+var resolveTranslationText = function (translation) {
+    if (translation.type === 'static') {
+        return String(translation.content);
+    }
+    if (translation.type === 'element' && translation.content.children) {
+        return translation.content.children
+            .map(function (child) {
+            if (child.type === 'static') {
+                return String(child.content);
+            }
+            if (child.type === 'element') {
+                return resolveTranslationText(child);
+            }
+            return '';
+        })
+            .join('');
+    }
+    return '';
+};
+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, rawNode, elementNode, dynamicNode, repeatNode, conditionalNodeComment, _b, staticValue, reference, _c, conditions, matchingCriteria, _d, referenceType, id, _e, refPath, usedProp, defaultValue, _i, refPath_1, path, dynamicConditions, matchCondition, conditionString, isConditionPassing, expressionEntries, localValue, _f, expressionEntries_1, expr, currentItem, _g, refPath_2, path, localConditions, localMatchCondition, localConditionString, isLocalConditionPassing, content, uidlDynamicRef, generatedNode, isProp, uidlDynamicRef, generatedNode, successNode;
+    var _h, _j;
+    return __generator(this, function (_k) {
+        switch (_k.label) {
+            case 0:
+                _a = node.type;
+                switch (_a) {
+                    case 'inject': return [3 /*break*/, 1];
+                    case 'raw': return [3 /*break*/, 2];
+                    case 'static': return [3 /*break*/, 3];
+                    case 'slot': return [3 /*break*/, 4];
+                    case 'element': return [3 /*break*/, 5];
+                    case 'dynamic': return [3 /*break*/, 7];
+                    case 'repeat': return [3 /*break*/, 9];
+                    case 'conditional': return [3 /*break*/, 11];
+                    case 'expr': return [3 /*break*/, 12];
+                    case 'cms-list-repeater': return [3 /*break*/, 17];
+                    case 'cms-item': return [3 /*break*/, 18];
+                    case 'cms-list': return [3 /*break*/, 18];
+                    case 'data-source-item': return [3 /*break*/, 18];
+                    case 'data-source-list': return [3 /*break*/, 18];
+                }
+                return [3 /*break*/, 19];
+            case 1: return [2 /*return*/, HASTBuilders.createTextNode(node.content.toString())];
+            case 2:
+                {
+                    rawNode = node;
+                    return [2 /*return*/, HASTBuilders.createTextNode((rawNode.fallback || rawNode.content).toString())];
+                }
+                _k.label = 3;
+            case 3: return [2 /*return*/, HASTBuilders.createTextNode(StringUtils.encode(node.content.toString()))];
+            case 4: return [2 /*return*/, HASTBuilders.createHTMLNode(node.type)];
+            case 5: return [4 /*yield*/, generateElementNode(node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
+            case 6:
+                elementNode = _k.sent();
+                return [2 /*return*/, elementNode];
+            case 7: return [4 /*yield*/, generateDynamicNode(node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
+            case 8:
+                dynamicNode = _k.sent();
+                return [2 /*return*/, dynamicNode];
+            case 9: return [4 /*yield*/, generateHtmlSyntax(node.content.node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
+            case 10:
+                repeatNode = _k.sent();
+                return [2 /*return*/, repeatNode];
+            case 11:
+                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 'local': {
+                        if (!resolvedExpressions || resolvedExpressions.currentIndex === undefined) {
+                            return [2 /*return*/, conditionalNodeComment];
+                        }
+                        expressionEntries = Object.values(resolvedExpressions.expressions || {});
+                        localValue = void 0;
+                        for (_f = 0, expressionEntries_1 = expressionEntries; _f < expressionEntries_1.length; _f++) {
+                            expr = expressionEntries_1[_f];
+                            if (expr && Array.isArray(expr.defaultValue)) {
+                                currentItem = expr.defaultValue[resolvedExpressions.currentIndex];
+                                if (currentItem !== undefined) {
+                                    localValue = currentItem;
+                                    for (_g = 0, refPath_2 = refPath; _g < refPath_2.length; _g++) {
+                                        path = refPath_2[_g];
+                                        localValue = localValue === null || localValue === void 0 ? void 0 : localValue[path];
+                                    }
+                                    break;
+                                }
+                            }
+                        }
+                        if (localValue === undefined) {
+                            return [2 /*return*/, conditionalNodeComment];
+                        }
+                        localConditions = createConditionalStatement(staticValue !== undefined ? [{ operand: staticValue, operation: '===' }] : conditions, localValue);
+                        localMatchCondition = matchingCriteria && matchingCriteria === 'all' ? '&&' : '||';
+                        localConditionString = localConditions.join(" ".concat(localMatchCondition, " "));
+                        try {
+                            isLocalConditionPassing = new Function("return ".concat(localConditionString))();
+                            if (isLocalConditionPassing) {
+                                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];
+                }
+                _k.label = 12;
+            case 12:
+                content = node.content.split('?.');
+                if (!(resolvedExpressions && ((_h = resolvedExpressions.expressions) === null || _h === void 0 ? void 0 : _h[content[0] || '']))) return [3 /*break*/, 14];
+                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 13:
+                generatedNode = _k.sent();
+                return [2 /*return*/, generatedNode];
+            case 14:
+                if (!(content[0] && ((propDefinitions === null || propDefinitions === void 0 ? void 0 : propDefinitions[content[0]]) || (stateDefinitions === null || stateDefinitions === void 0 ? void 0 : stateDefinitions[content[0]])))) return [3 /*break*/, 16];
+                isProp = Boolean(propDefinitions === null || propDefinitions === void 0 ? void 0 : propDefinitions[content[0]]);
+                uidlDynamicRef = {
+                    type: 'dynamic',
+                    content: {
+                        referenceType: isProp ? 'prop' : 'state',
+                        refPath: content.slice(1),
+                        id: content[0],
+                    },
+                };
+                return [4 /*yield*/, generateDynamicNode(uidlDynamicRef, compName, nodesLookup, isProp ? propDefinitions : stateDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 15:
+                generatedNode = _k.sent();
+                return [2 /*return*/, generatedNode];
+            case 16: return [2 /*return*/, HASTBuilders.createComment('Expressions are not supported in HTML')];
+            case 17: return [2 /*return*/, generateRepeaterNode(node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
+            case 18:
+                successNode = (_j = node.content.nodes) === null || _j === void 0 ? void 0 : _j.success;
+                if (successNode) {
+                    return [2 /*return*/, generateHtmlSyntax(successNode, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
+                }
+                // If no success node, return empty div
+                return [2 /*return*/, HASTBuilders.createHTMLNode('div')];
+            case 19: throw new HTMLComponentGeneratorError("generateHtmlSyntax encountered a node of unsupported type: ".concat(JSON.stringify(node, null, 2), " "));
         }
-        return [2 /*return*/];
     });
 }); };
-var generatElementNode = function (node, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementType, children, _b, attrs, _c, style, _d, referencedStyles, dependency, key, elementNode, dependencies, compTag, _i, children_1, child, childTag;
-    return __generator(this, function (_e) {
-        switch (_e.label) {
+var 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;
+        case 'object':
+            // `typeof null === 'object'` — render as the null literal so comparisons
+            // against a missing/null default evaluate sensibly.
+            if (value === null) {
+                return 'null';
+            }
+            // Handle dynamic references (local, prop, state)
+            if (value && typeof value === 'object' && 'type' in value) {
+                var dynamicValue = value;
+                if (dynamicValue.type === 'dynamic' && dynamicValue.content) {
+                    var _a = dynamicValue.content, referenceType = _a.referenceType, id = _a.id, refPath = _a.refPath;
+                    if (referenceType === 'local' && id) {
+                        // Local reference from repeater context
+                        if (refPath && refPath.length > 0) {
+                            return "".concat(id, ".").concat(refPath.join('.'));
+                        }
+                        return id;
+                    }
+                    else if (referenceType === 'prop' || referenceType === 'state') {
+                        // Prop or state reference
+                        var key = refPath && refPath.length > 0 ? refPath.join('.') : id;
+                        return key;
+                    }
+                }
+            }
+            // Handle link-type prop default values ({ url, newTab }). Collapse to the
+            // url string so comparisons like `mapUrl !== '--'` evaluate sensibly.
+            if (value &&
+                typeof value === 'object' &&
+                'url' in value &&
+                typeof value.url === 'string') {
+                return "\"".concat(value.url, "\"");
+            }
+            throw new HTMLComponentGeneratorError("Conditional node received an operand of type ".concat(valueType, " \n\n          Received ").concat(JSON.stringify(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, resolvedExpressions) { return __awaiter(void 0, void 0, void 0, function () {
+    var nodes, contextId, sourceValue, propDef, nestedPath, parentContextKey, parentPropDef, pathMatch, parentItem, nestedValue, parsedSource, elementNode, emptyChildren, _i, emptyChildren_1, child, childTag, listChildren, index, _a, listChildren_1, child, childTag;
+    var _b;
+    var _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
             case 0:
-                _a = node.content, elementType = _a.elementType, children = _a.children, _b = _a.attrs, attrs = _b === void 0 ? {} : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.referencedStyles, referencedStyles = _d === void 0 ? {} : _d, dependency = _a.dependency, key = _a.key;
-                elementNode = HASTBuilders.createHTMLNode(elementType);
-                templatesLookUp[key] = elementNode;
-                dependencies = structure.dependencies;
-                if (dependency && (dependency === null || dependency === void 0 ? void 0 : dependency.type) !== 'local') {
-                    dependencies[dependency.path] = dependency;
+                nodes = node.content.nodes;
+                contextId = node.content.renderPropIdentifier;
+                sourceValue = node.content.source;
+                propDef = sourceValue && typeof sourceValue === 'string'
+                    ? propDefinitions[Object.keys(propDefinitions).find(function (propKey) { return sourceValue.includes(propKey); }) || '']
+                    : undefined;
+                nestedPath = null;
+                if (propDef && resolvedExpressions && sourceValue && typeof sourceValue === 'string') {
+                    parentContextKey = Object.keys(resolvedExpressions.expressions || {}).find(function (key) {
+                        return sourceValue.includes(key);
+                    });
+                    if (parentContextKey) {
+                        parentPropDef = resolvedExpressions.expressions[parentContextKey];
+                        pathMatch = sourceValue.match(new RegExp("".concat(parentContextKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), "((?:\\?\\.\\w+)+)")));
+                        if (pathMatch && pathMatch[1]) {
+                            nestedPath = pathMatch[1].split('?.').filter(Boolean);
+                        }
+                        if (nestedPath && parentPropDef && Array.isArray(parentPropDef.defaultValue)) {
+                            parentItem = parentPropDef.defaultValue[resolvedExpressions.currentIndex];
+                            if (parentItem && typeof parentItem === 'object' && !Array.isArray(parentItem)) {
+                                nestedValue = nestedPath.reduce(function (acc, key) {
+                                    return acc && typeof acc === 'object' && !Array.isArray(acc)
+                                        ? acc[key]
+                                        : acc;
+                                }, parentItem);
+                                if (Array.isArray(nestedValue)) {
+                                    propDef = {
+                                        defaultValue: nestedValue,
+                                        id: contextId,
+                                        type: 'array',
+                                    };
+                                }
+                            }
+                        }
+                    }
+                }
+                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 (_e) {
+                        // 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 (node.content.nodes.loading) {
+                    node.content.nodes.loading.content.style = { display: { type: 'static', content: 'contents' } };
+                }
+                if (!(propDef.defaultValue.length === 0)) return [3 /*break*/, 5];
+                emptyChildren = (_c = nodes.empty) === null || _c === void 0 ? void 0 : _c.content.children;
+                if (!emptyChildren) return [3 /*break*/, 4];
+                _i = 0, emptyChildren_1 = emptyChildren;
+                _d.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 = _d.sent();
+                if (typeof childTag === 'string') {
+                    HASTUtils.addTextNode(elementNode, childTag);
+                }
+                else {
+                    HASTUtils.addChildNode(elementNode, childTag);
+                }
+                _d.label = 3;
+            case 3:
+                _i++;
+                return [3 /*break*/, 1];
+            case 4:
+                if (nodes.empty) {
+                    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;
+                _d.label = 6;
+            case 6:
+                if (!(index < propDef.defaultValue.length)) return [3 /*break*/, 11];
+                _a = 0, listChildren_1 = listChildren;
+                _d.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 = _d.sent();
+                if (typeof childTag === 'string') {
+                    HASTUtils.addTextNode(elementNode, childTag);
+                }
+                else {
+                    HASTUtils.addChildNode(elementNode, childTag);
+                }
+                _d.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];
+        }
+    });
+}); };
+var generateElementNode = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions) { return __awaiter(void 0, void 0, void 0, function () {
+    var successNode, _a, elementType, children, _b, attrs, _c, style, _d, referencedStyles, dependency, dependencies, compTag, elementNode, _i, children_1, child, childTag;
+    var _e;
+    return __generator(this, function (_f) {
+        switch (_f.label) {
+            case 0:
+                // Check if this is a wrapped data-source node
+                if (node.content &&
+                    typeof node.content === 'object' &&
+                    'type' in node.content &&
+                    (node.content.type === 'data-source-item' || node.content.type === 'data-source-list')) {
+                    successNode = (_e = node.content.nodes) === null || _e === void 0 ? void 0 : _e.success;
+                    if (successNode) {
+                        return [2 /*return*/, generateHtmlSyntax(successNode, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
+                    }
+                    // If no success node, return empty div
+                    return [2 /*return*/, HASTBuilders.createHTMLNode('div')];
                 }
+                _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')) return [3 /*break*/, 2];
-                return [4 /*yield*/, generateComponentContent(node, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+                return [4 /*yield*/, generateComponentContent(node, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
             case 1:
-                compTag = _e.sent();
+                compTag = _f.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;
+                _f.label = 3;
             case 3:
                 if (!(_i < children_1.length)) return [3 /*break*/, 6];
                 child = children_1[_i];
-                return [4 /*yield*/, generateHtmlSynatx(child, templatesLookUp, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+                return [4 /*yield*/, generateHtmlSyntax(child, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
             case 4:
-                childTag = _e.sent();
-                if (!childTag) {
-                    return [2 /*return*/];
-                }
+                childTag = _f.sent();
                 if (typeof childTag === 'string') {
                     HASTUtils.addTextNode(elementNode, childTag);
                 }
                 else {
                     HASTUtils.addChildNode(elementNode, childTag);
                 }
-                _e.label = 5;
+                _f.label = 5;
             case 5:
                 _i++;
                 return [3 /*break*/, 3];
@@ -126,39 +526,48 @@ var generatElementNode = function (node, templatesLookUp, propDefinitions, state
                     Object.keys(referencedStyles).forEach(function (styleRef) {
                         var refStyle = referencedStyles[styleRef];
                         if (refStyle.content.mapType === 'inlined') {
-                            handleStyles(node, refStyle.content.styles, propDefinitions, stateDefinitions);
-                            return;
+                            handleStyles(node, refStyle.content.styles, propDefinitions, stateDefinitions, structure.options);
                         }
                     });
                 }
                 if (Object.keys(style).length > 0) {
-                    handleStyles(node, style, propDefinitions, stateDefinitions);
-                }
-                if (Object.keys(attrs).length > 0) {
-                    handleAttributes(elementType, elementNode, attrs, propDefinitions, stateDefinitions, structure.options.projectRouteDefinition, structure.outputOptions);
+                    handleStyles(node, style, propDefinitions, stateDefinitions, structure.options);
                 }
+                handleAttributes(elementType, elementNode, attrs, propDefinitions, stateDefinitions, structure.options.projectRouteDefinition, structure.outputOptions, structure.options, 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, 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, standaloneHtmlComponents, _b, elementType, _c, attrs, _d, children, dependencies, _e, chunks, options, componentName, component, componentClone, lookupTableForCurrentPage, combinedProps, combinedStates, statesForInstance, propsForInstance, _loop_1, _i, _f, propKey, componentWrapper, isExistingNode, wrapperAttrs, componentInstanceToGenerate, compTag, cssPlugin, initialStructure, result;
+    var _g, _h, _j;
+    return __generator(this, function (_k) {
+        switch (_k.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;
-                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)));
+                externals = subComponentOptions.externals, plugins = subComponentOptions.plugins, _a = subComponentOptions.standaloneHtmlComponents, standaloneHtmlComponents = _a === void 0 ? false : _a;
+                _b = node.content, elementType = _b.elementType, _c = _b.attrs, attrs = _c === void 0 ? {} : _c, _d = _b.children, children = _d === void 0 ? [] : _d;
+                dependencies = structure.dependencies, _e = structure.chunks, chunks = _e === void 0 ? [] : _e, options = structure.options;
+                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'; });
@@ -168,6 +577,7 @@ var generateComponentContent = function (node, propDefinitions, stateDefinitions
                                     content: {
                                         key: 'custom-slot',
                                         elementType: 'slot',
+                                        name: componentClone.name + 'slot',
                                         style: {
                                             display: {
                                                 type: 'static',
@@ -186,46 +596,133 @@ 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, 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) || ((_g = combinedProps[propKey]) === null || _g === void 0 ? void 0 : _g.defaultValue) });
+                    }
+                    if ((attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'expr') {
+                        var _l = attribute.content.split('?.'), ctxId_1 = _l[0], refPath = _l.slice(1);
+                        var propKeyFromAttr = Object.keys(combinedProps).find(function (key) { return key === ctxId_1; });
+                        var resolvedValue = combinedProps[propKeyFromAttr];
+                        var hasRefPath = refPath.length > 0;
+                        // Build the path using repeater index when available
+                        var fullRefPath = typeof (resolvedExpressions === null || resolvedExpressions === void 0 ? void 0 : resolvedExpressions.currentIndex) === 'number' && hasRefPath
+                            ? __spreadArray([resolvedExpressions.currentIndex.toString()], refPath, true) : refPath;
+                        if (Array.isArray(resolvedValue)) {
+                            // If the resolved value itself is an array definition, pass it through
+                            propsForInstance[propKey] = resolvedValue;
+                        }
+                        else {
+                            var defaultVal = resolvedValue === null || resolvedValue === void 0 ? void 0 : resolvedValue.defaultValue;
+                            var extracted = hasRefPath && defaultVal !== undefined
+                                ? extractDefaultValueFromRefPath(defaultVal, fullRefPath)
+                                : defaultVal !== null && defaultVal !== void 0 ? defaultVal : null;
+                            propsForInstance[propKey] = __assign(__assign({}, resolvedValue), { defaultValue: extracted });
+                        }
+                    }
+                    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: (_h = attribute === null || attribute === void 0 ? void 0 : attribute.content) !== null && _h !== void 0 ? _h : (_j = combinedProps[propKey]) === null || _j === void 0 ? void 0 : _j.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, _f = Object.keys(combinedProps); _i < _f.length; _i++) {
+                    propKey = _f[_i];
+                    _loop_1(propKey);
+                }
+                componentWrapper = StringUtils.camelCaseToDashCase("".concat(componentName, "-wrapper"));
+                isExistingNode = nodesLookup[componentWrapper];
+                if (isExistingNode !== undefined) {
+                    componentWrapper = "".concat(componentWrapper, "-").concat(StringUtils.generateRandomString());
+                }
+                wrapperAttrs = {};
+                Object.keys(attrs).forEach(function (attrKey) {
+                    if (attrKey.startsWith('dataNode') || attrKey.startsWith('data-node')) {
+                        wrapperAttrs[attrKey] = attrs[attrKey];
+                    }
+                });
+                componentInstanceToGenerate = {
+                    type: 'element',
+                    content: {
+                        elementType: componentWrapper,
+                        key: componentWrapper,
+                        children: [componentClone.node],
+                        attrs: wrapperAttrs,
+                        style: {
+                            display: {
+                                type: 'static',
+                                content: 'contents',
+                            },
+                        },
+                    },
+                };
+                return [4 /*yield*/, generateHtmlSyntax(componentInstanceToGenerate, component.name, nodesLookup, propsForInstance, statesForInstance, subComponentOptions, structure, resolvedExpressions)];
             case 1:
-                compTag = (_f.sent());
+                compTag = _k.sent();
                 cssPlugin = createCSSPlugin({
                     templateStyle: 'html',
                     templateChunkName: DEFAULT_COMPONENT_CHUNK_NAME,
-                    declareDependency: 'import',
-                    forceScoping: true,
-                    chunkName: comp.name,
+                    declareDependency: standaloneHtmlComponents ? 'none' : 'import',
+                    chunkName: componentClone.name,
                     staticPropReferences: true,
+                    standaloneHtmlComponents: standaloneHtmlComponents,
                 });
                 initialStructure = {
-                    uidl: __assign(__assign({}, comp), { propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
+                    uidl: __assign(__assign({}, componentClone), { node: componentInstanceToGenerate, propDefinitions: propsForInstance, stateDefinitions: statesForInstance }),
                     chunks: [
                         {
                             type: ChunkType.HAST,
@@ -234,7 +731,7 @@ var generateComponentContent = function (node, propDefinitions, stateDefinitions
                             linkAfter: [],
                             content: compTag,
                             meta: {
-                                nodesLookup: lookUpTemplates,
+                                nodesLookup: nodesLookup,
                             },
                         },
                     ],
@@ -253,132 +750,271 @@ 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);
+                result = _k.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, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions) { return __awaiter(void 0, void 0, void 0, function () {
+    var translation, localeTag, commentNode, globalTag, commentNode, usedReferenceValue, extracted, elementNode, elementClone, iterElementTag, generatedElementTag, spanTagWrapper, commentNode, spanTag;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                if (node.content.referenceType === 'locale') {
+                    translation = getTranslation(node.content.id, structure.options);
+                    if (translation) {
+                        if (translation.type === 'static') {
+                            return [2 /*return*/, HASTBuilders.createTextNode(String(translation.content))];
                         }
-                    });
-                }
-                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*/];
+                        if (translation.type === 'element') {
+                            return [2 /*return*/, generateHtmlSyntax(translation, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
                         }
-                        chunks.push(styleChunk);
                     }
+                    localeTag = HASTBuilders.createHTMLNode('span');
+                    commentNode = HASTBuilders.createComment("Content for locale ".concat(node.content.id));
+                    HASTUtils.addChildNode(localeTag, commentNode);
+                    return [2 /*return*/, localeTag];
                 }
-                return [2 /*return*/, compTag];
+                if (node.content.referenceType === 'global' ||
+                    node.content.referenceType === 'globalState') {
+                    globalTag = HASTBuilders.createHTMLNode('span');
+                    commentNode = HASTBuilders.createComment("Global reference: ".concat(node.content.id));
+                    HASTUtils.addChildNode(globalTag, commentNode);
+                    return [2 /*return*/, globalTag];
+                }
+                usedReferenceValue = getValueFromReference(node.content.id, node.content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
+                if ((usedReferenceValue.type === 'object' || usedReferenceValue.type === 'array') &&
+                    usedReferenceValue.defaultValue) {
+                    extracted = extractDefaultValueFromRefPath(usedReferenceValue.defaultValue, node.content.refPath);
+                    if (extracted === undefined || extracted === null) {
+                        return [2 /*return*/, HASTBuilders.createTextNode('')];
+                    }
+                    return [2 /*return*/, HASTBuilders.createTextNode(String(extracted))];
+                }
+                if (!(usedReferenceValue.type === 'element')) return [3 /*break*/, 5];
+                elementNode = usedReferenceValue.defaultValue;
+                if (!elementNode) return [3 /*break*/, 4];
+                if (!(resolvedExpressions && typeof resolvedExpressions.currentIndex === 'number')) return [3 /*break*/, 2];
+                elementClone = UIDLUtils.cloneObject(elementNode);
+                if ((_a = elementClone === null || elementClone === void 0 ? void 0 : elementClone.content) === null || _a === void 0 ? void 0 : _a.key) {
+                    elementClone.content.key = "".concat(elementClone.content.key, "-").concat(resolvedExpressions.currentIndex);
+                }
+                return [4 /*yield*/, generateHtmlSyntax(elementClone, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
+            case 1:
+                iterElementTag = _b.sent();
+                return [2 /*return*/, iterElementTag];
+            case 2:
+                if (elementNode.content.key in nodesLookup) {
+                    return [2 /*return*/, nodesLookup[elementNode.content.key]];
+                }
+                return [4 /*yield*/, generateHtmlSyntax(elementNode, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure, resolvedExpressions)];
+            case 3:
+                generatedElementTag = _b.sent();
+                return [2 /*return*/, generatedElementTag];
+            case 4:
+                spanTagWrapper = HASTBuilders.createHTMLNode('span');
+                commentNode = HASTBuilders.createComment("Content for slot ".concat(node.content.id));
+                HASTUtils.addChildNode(spanTagWrapper, commentNode);
+                return [2 /*return*/, spanTagWrapper];
+            case 5:
+                spanTag = HASTBuilders.createHTMLNode('span');
+                HASTUtils.addTextNode(spanTag, String(usedReferenceValue.defaultValue));
+                return [2 /*return*/, spanTag];
         }
     });
 }); };
-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 handleStyles = function (node, styles, propDefinitions, stateDefinitions) {
+var handleStyles = function (node, styles, propDefinitions, stateDefinitions, options) {
     Object.keys(styles).forEach(function (styleKey) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         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);
+            if (((_b = style.content) === null || _b === void 0 ? void 0 : _b.referenceType) === 'locale') {
+                var translation = getTranslation(style.content.id, options);
+                var resolvedText = translation
+                    ? resolveTranslationText(translation)
+                    : "[locale: ".concat(style.content.id, "]");
+                node.content.style[styleKey] = staticNode(resolvedText);
+                return;
+            }
+            if (((_c = style.content) === null || _c === void 0 ? void 0 : _c.referenceType) === 'global' ||
+                ((_d = style.content) === null || _d === void 0 ? void 0 : _d.referenceType) === 'globalState') {
+                node.content.style[styleKey] = staticNode("[global: ".concat(style.content.id, "]"));
+                return;
             }
-            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, (_e = style === null || style === void 0 ? void 0 : style.content) === null || _e === void 0 ? void 0 : _e.refPath));
             }
             node.content.style[styleKey] = typeof style === 'string' ? staticNode(style) : style;
         }
     });
 };
-var handleAttributes = function (elementType, htmlNode, attrs, propDefinitions, stateDefinitions, routeDefinitions, outputOptions) {
-    Object.keys(attrs).forEach(function (attrKey) {
+var handleAttributes = function (elementType, htmlNode, attrs, propDefinitions, stateDefinitions, routeDefinitions, outputOptions, options, currentIndex) {
+    var _loop_2 = function (attrKey) {
         var attrValue = attrs[attrKey];
-        if (attrKey === 'href' &&
-            attrValue.type === 'static' &&
-            typeof attrValue.content === 'string' &&
-            attrValue.content.startsWith('/')) {
-            var targetLink = void 0;
-            var targetRoute = ((routeDefinitions === null || routeDefinitions === void 0 ? void 0 : routeDefinitions.values) || []).find(function (route) { return route.pageOptions.navLink === attrValue.content; });
-            if (targetRoute) {
-                targetLink = targetRoute.pageOptions.navLink;
+        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' || elementType === 'video') &&
+                        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;
             }
-            if (!targetRoute && attrValue.content === '/home') {
-                targetLink = '/';
+            case 'dynamic': {
+                if (content.referenceType === 'locale') {
+                    var translation = getTranslation(content.id, options);
+                    var resolvedText = translation
+                        ? resolveTranslationText(translation)
+                        : "[locale: ".concat(content.id, "]");
+                    HASTUtils.addAttributeToNode(htmlNode, attrKey, resolvedText);
+                    break;
+                }
+                if (content.referenceType === 'global' ||
+                    content.referenceType === 'globalState') {
+                    HASTUtils.addAttributeToNode(htmlNode, attrKey, "[global: ".concat(content.id, "]"));
+                    break;
+                }
+                var value = getValueFromReference(content.id, content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
+                // A `func` prop has no meaningful static HTML representation; skip
+                // rather than emitting the stringified function body as an attribute.
+                if (value.type === 'func') {
+                    break;
+                }
+                var extracted = extractDefaultValueFromRefPath(value.defaultValue, content.refPath);
+                var extractedValue = String(extracted);
+                if ((elementType === 'img' || elementType === 'video') &&
+                    attrKey === 'src' &&
+                    !extractedValue.startsWith('http')) {
+                    var path = join(relative(join.apply(void 0, outputOptions.folderPath), './'), extractedValue);
+                    HASTUtils.addAttributeToNode(htmlNode, attrKey, path);
+                    break;
+                }
+                HASTUtils.addAttributeToNode(htmlNode, attrKey, extractedValue);
+                break;
             }
-            if (!targetLink && !targetRoute) {
-                targetLink = attrValue.content;
+            case 'raw': {
+                var rawAttr = attrValue;
+                HASTUtils.addAttributeToNode(htmlNode, attrKey, rawAttr.fallback || rawAttr.content);
+                break;
             }
-            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"));
-            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') {
-            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') {
-                /*
-                  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);
+            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"));
             }
-            HASTUtils.addAttributeToNode(htmlNode, attrKey, value);
-            return;
         }
-    });
+    };
+    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 ((usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type) &&
+        ['string', 'number', 'object', 'element', 'array', 'boolean', 'link', 'func'].includes(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 (!refPath || refPath.length === 0) {
+        return propDefaultValue;
+    }
+    // Directly handle array indexing for the first segment when applicable
+    if (Array.isArray(propDefaultValue)) {
+        var first = refPath[0], rest = refPath.slice(1);
+        var idx = Number(first);
+        if (!Number.isNaN(idx) && idx >= 0 && idx < propDefaultValue.length) {
+            var nextVal = propDefaultValue[idx];
+            if (rest.length === 0) {
+                return nextVal;
+            }
+            return extractDefaultValueFromRefPath(nextVal, rest);
+        }
+    }
+    if (typeof propDefaultValue !== 'object') {
+        return propDefaultValue;
     }
-    return String(usedReferenceValue.defaultValue);
+    return GenericUtils.getValueFromPath(refPath.join('.'), propDefaultValue);
 };
 //# sourceMappingURL=node-handlers.js.map