@wavemaker-ai/react-codegen 1.0.0-rc.647469 → 1.0.0-rc.647499

package/src/utils.browser.js

@@ -0,0 +1,853 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractScriptAndLinkTags = exports.extractInteractiveContainerDiv = exports.htmlToJsx = exports.convertStyleStringToObject = exports.OVERRIDE_TOKENS_PATH = exports.APP_OVERRIDE_CSS_PATH = exports.DESIGN_TOKENS_DIR_NAME = exports.htmlElements = exports.fixURLPathAndScope = exports.scopeCssUnderWmApp = exports.modifyExpression = exports.convertHyphenatedPropsToBracketNotation = exports.transformAppLocale = exports.fixURLPath = exports.addOptionalChaining = exports.addOptionalChainingToPropertyPath = void 0;
+exports.isValid = isValid;
+exports.isJSExpression = isJSExpression;
+const parser_1 = require("@babel/parser");
+const node_html_parser_1 = require("node-html-parser");
+function isValid(expr) {
+    try {
+        (0, parser_1.parse)(expr, { sourceType: "module", plugins: ["optionalChaining"] });
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function isJSExpression(expr) {
+    try {
+        (0, parser_1.parseExpression)(expr, { sourceType: "module", plugins: ["optionalChaining"] });
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+/**
+ * Finds the closing `]` for `[` at `openIdx` using bracket nesting depth.
+ * Used so property paths inside computed keys (`dataSet[outer[inner]]`) are not truncated.
+ */
+const findMatchingBracketEnd = (str, openIdx) => {
+    if (openIdx >= str.length || str[openIdx] !== "[")
+        return -1;
+    let depth = 0;
+    for (let p = openIdx; p < str.length; p++) {
+        const c = str[p];
+        if (c === "[")
+            depth++;
+        else if (c === "]") {
+            depth--;
+            if (depth === 0)
+                return p;
+        }
+    }
+    return -1;
+};
+/**
+ * Extends a property-access path from `start` (must point at the first char of an identifier):
+ *   `a.b[c[d]].e` — includes balanced bracket segments (not `\[[^\]]+\]`).
+ */
+const extendPropertyAccessPath = (str, start) => {
+    let i = start;
+    if (i >= str.length || !/[a-zA-Z_$]/.test(str[i]))
+        return null;
+    i++;
+    while (i < str.length && /[a-zA-Z0-9_$]/.test(str[i]))
+        i++;
+    let end = i;
+    while (end < str.length) {
+        if (str[end] === ".") {
+            if (end + 1 >= str.length || !/[a-zA-Z_$]/.test(str[end + 1]))
+                break;
+            let j = end + 2;
+            while (j < str.length && /[a-zA-Z0-9_$]/.test(str[j]))
+                j++;
+            end = j;
+        }
+        else if (str[end] === "[") {
+            const rb = findMatchingBracketEnd(str, end);
+            if (rb === -1)
+                break;
+            end = rb + 1;
+        }
+        else {
+            break;
+        }
+    }
+    return { end, text: str.substring(start, end) };
+};
+const collectPropertyPathMatches = (searchStr) => {
+    const matches = [];
+    let idx = 0;
+    while (idx < searchStr.length) {
+        const ch = searchStr[idx];
+        if (/[a-zA-Z_$]/.test(ch)) {
+            const prev = idx > 0 ? searchStr[idx - 1] : "";
+            const prevIsIdent = /[a-zA-Z0-9_$]/.test(prev);
+            if (!prevIsIdent) {
+                const ext = extendPropertyAccessPath(searchStr, idx);
+                if (ext && ext.text.length > 0) {
+                    matches.push({ start: idx, end: ext.end, text: ext.text });
+                    idx = ext.end;
+                    continue;
+                }
+            }
+        }
+        idx++;
+    }
+    return matches;
+};
+const addOptionalChainingToPropertyPath = (propertyPath) => {
+    var _a;
+    // Split the path into meaningful parts while preserving structure
+    const parts = [];
+    let current = "";
+    let i = 0;
+    // Handle the first part specially (no optional chaining at the start)
+    while (i < propertyPath.length && propertyPath[i] !== "." && propertyPath[i] !== "[") {
+        current += propertyPath[i];
+        i++;
+    }
+    if (current) {
+        parts.push({ type: "prop", content: current });
+        current = "";
+    }
+    while (i < propertyPath.length) {
+        if (propertyPath[i] === ".") {
+            i++; // Skip the dot
+            current = "";
+            while (i < propertyPath.length && propertyPath[i] !== "." && propertyPath[i] !== "[") {
+                current += propertyPath[i];
+                i++;
+            }
+            if (current) {
+                parts.push({ type: "prop", content: `.${current}` });
+                current = "";
+            }
+        }
+        else if (propertyPath[i] === "[") {
+            i++; // Skip the opening bracket
+            let bracketContent = "";
+            let nestedBracketLevel = 0;
+            // Handle nested brackets properly
+            while (i < propertyPath.length) {
+                if (propertyPath[i] === "[") {
+                    nestedBracketLevel++;
+                    bracketContent += propertyPath[i];
+                }
+                else if (propertyPath[i] === "]") {
+                    if (nestedBracketLevel === 0) {
+                        break; // Found the matching closing bracket
+                    }
+                    nestedBracketLevel--;
+                    bracketContent += propertyPath[i];
+                }
+                else {
+                    bracketContent += propertyPath[i];
+                }
+                i++;
+            }
+            if (i < propertyPath.length) {
+                parts.push({ type: "bracket", content: bracketContent });
+                i++; // Skip the closing bracket
+            }
+        }
+        else {
+            i++; // Skip any unexpected characters
+        }
+    }
+    // Helper to process only property paths within bracket content, preserving bracket structure
+    const processBracketContent = (content) => {
+        const trimmed = content.trim();
+        // Skip if it's a string literal or numeric index
+        if (trimmed.startsWith("'") || trimmed.startsWith('"'))
+            return content;
+        if (/^\d+$/.test(trimmed))
+            return content;
+        // If it contains nested brackets, process property paths within them
+        if (trimmed.includes("[")) {
+            // Find property paths (identifier.identifier) and process only those parts
+            // Example: "data[Widgets.form.value]" -> "data[Widgets?.form?.value]"
+            // Example: "items[0]" -> "items[0]" (no change)
+            // Use regex to find and replace property paths, preserving bracket structure
+            const propertyPathRegex = /([a-zA-Z_$][a-zA-Z0-9_$]*\.[a-zA-Z_$][a-zA-Z0-9_$]*(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)*)/g;
+            return trimmed.replace(propertyPathRegex, match => {
+                // Process only the property path part (the part with dots)
+                return (0, exports.addOptionalChainingToPropertyPath)(match);
+            });
+        }
+        // Check if it's a property path (contains dots after identifier)
+        if (/^[a-zA-Z_$][a-zA-Z0-9_$]*\.[a-zA-Z_$]/.test(trimmed)) {
+            return (0, exports.addOptionalChainingToPropertyPath)(content);
+        }
+        // Simple identifier or other - leave as is
+        return content;
+    };
+    // Add optional chaining
+    let result = ((_a = parts[0]) === null || _a === void 0 ? void 0 : _a.content) || "";
+    for (let j = 1; j < parts.length; j++) {
+        const part = parts[j];
+        if (part.type === "bracket") {
+            // Process bracket content - only property paths get optional chaining
+            const processedContent = processBracketContent(part.content);
+            result += `?.[${processedContent}]`;
+        }
+        else if (part.content.startsWith(".")) {
+            result += `?${part.content}`;
+        }
+    }
+    return result;
+};
+exports.addOptionalChainingToPropertyPath = addOptionalChainingToPropertyPath;
+const addOptionalChaining = (bindPath, options = {}) => {
+    const { targetPattern, addFallback = false, fallbackValue = '""', detectFunctionCalls = false, } = options;
+    // Helper to find balanced parentheses
+    const findBalancedParens = (str, start) => {
+        let depth = 0;
+        for (let i = start; i < str.length; i++) {
+            if (str[i] === "(")
+                depth++;
+            else if (str[i] === ")") {
+                depth--;
+                if (depth === 0)
+                    return i;
+            }
+        }
+        return -1;
+    };
+    // Step 1: Extract and protect string literals
+    const stringLiterals = [];
+    let protectedExpression = bindPath.replace(/"[^"]*"|'[^']*'/g, match => {
+        const placeholder = `__STRING_${stringLiterals.length}__`;
+        stringLiterals.push(match);
+        return placeholder;
+    });
+    // Step 1.5: Extract and protect function arguments (including arrow functions)
+    // This prevents processing property paths inside function arguments
+    const functionArgs = [];
+    let argProtectedExpression = protectedExpression;
+    // Find all function calls and protect their arguments
+    let funcArgIndex = 0;
+    let i = 0;
+    while (i < argProtectedExpression.length) {
+        if (argProtectedExpression[i] === "(") {
+            const parenStart = i;
+            const parenEnd = findBalancedParens(argProtectedExpression, i);
+            if (parenEnd !== -1) {
+                const argsContent = argProtectedExpression.substring(parenStart + 1, parenEnd);
+                // Only protect if there's actual content (not empty parentheses)
+                if (argsContent.trim()) {
+                    const placeholder = `__FUNCARG_${funcArgIndex}__`;
+                    functionArgs.push(argsContent);
+                    argProtectedExpression =
+                        argProtectedExpression.substring(0, parenStart + 1) +
+                            placeholder +
+                            argProtectedExpression.substring(parenEnd);
+                    funcArgIndex++;
+                    i = parenStart + placeholder.length + 1;
+                    continue;
+                }
+            }
+        }
+        i++;
+    }
+    // Step 2: Process property access patterns, handling function calls
+    // Default matcher must use balanced `[`…`]` so nested computed keys do not truncate
+    // (regex `\[[^\]]+\]` breaks on `dataSet[foo[bar].baz]`).
+    let result = argProtectedExpression;
+    let matches = [];
+    if (targetPattern) {
+        targetPattern.lastIndex = 0;
+        let match;
+        while ((match = targetPattern.exec(argProtectedExpression)) !== null) {
+            matches.push({
+                start: match.index,
+                end: match.index + match[0].length,
+                text: match[0],
+            });
+        }
+    }
+    else {
+        matches = collectPropertyPathMatches(argProtectedExpression);
+    }
+    // Process matches in reverse order to maintain indices
+    for (let i = matches.length - 1; i >= 0; i--) {
+        const m = matches[i];
+        let processed = (0, exports.addOptionalChainingToPropertyPath)(m.text);
+        // Check if there's a function call immediately after this match
+        const afterMatch = argProtectedExpression.substring(m.end);
+        const funcCallMatch = afterMatch.match(/^\s*\(/);
+        if (funcCallMatch) {
+            // Find the closing parenthesis
+            const parenEnd = findBalancedParens(argProtectedExpression, m.end + funcCallMatch[0].length - 1);
+            if (parenEnd !== -1) {
+                const funcCall = argProtectedExpression.substring(m.end, parenEnd + 1);
+                processed += funcCall;
+                // Check if there's property access after the function call
+                const afterFunc = argProtectedExpression.substring(parenEnd + 1);
+                const propAccessMatch = afterFunc.match(/^\s*\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+                if (propAccessMatch) {
+                    processed += `?.${propAccessMatch[1]}`;
+                    // Update the match end to include the function call and property
+                    matches[i].end = parenEnd + 1 + propAccessMatch[0].length;
+                }
+                else {
+                    matches[i].end = parenEnd + 1;
+                }
+            }
+        }
+        // Replace in result
+        result = result.substring(0, m.start) + processed + result.substring(m.end);
+    }
+    // Step 3: Add optional chaining after closing parentheses/brackets that are followed by property access
+    // This handles cases like:
+    // - obj.method().prop
+    // - (expr | pipe)[0].url
+    // - (expr)[0].url
+    result = result.replace(/(\))\s*\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g, "$1?.$2");
+    result = result.replace(/(\))\s*\[/g, "$1?.[");
+    result = result.replace(/(\])\s*\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g, "$1?.$2");
+    result = result.replace(/(\])\s*\[/g, "$1?.[");
+    // Step 4: Restore function arguments and process property paths in them
+    functionArgs.forEach((arg, index) => {
+        let processedArg = arg;
+        // Process arrow function bodies (parts after =>)
+        const arrowMatch = arg.match(/^([^=]*)=>\s*(.+)$/);
+        if (arrowMatch) {
+            const [, params, body] = arrowMatch;
+            // Process property paths in the arrow function body
+            const processedBody = (0, exports.addOptionalChaining)(body);
+            processedArg = `${params}=> ${processedBody}`;
+        }
+        else {
+            // Not an arrow function - recursively process with addOptionalChaining
+            // This handles nested brackets properly
+            processedArg = (0, exports.addOptionalChaining)(arg);
+        }
+        result = result.replace(`__FUNCARG_${index}__`, processedArg);
+    });
+    // Step 5: Restore string literals
+    stringLiterals.forEach((literal, index) => {
+        result = result.replace(`__STRING_${index}__`, literal);
+    });
+    // Step 6: Add fallback handling if requested
+    if (addFallback) {
+        if (detectFunctionCalls) {
+            const hasFunctionCall = /\([^)]*\)\s*$/.test(result);
+            if (!hasFunctionCall) {
+                result = `(${result} || ${fallbackValue})`;
+            }
+        }
+        else {
+            result = `(${result} || ${fallbackValue})`;
+        }
+    }
+    return result;
+};
+exports.addOptionalChaining = addOptionalChaining;
+const fixURLPath = (file_content, basePath, isAppCss) => {
+    // Fix resources URLs
+    let updatedContent = file_content.replace(/url\((['"]?)resources/g, `url($1${basePath || ""}/resources`);
+    // Fix font URLs and other URLs that need leading slash
+    // This regex matches url() with single or double quotes that don't start with /, http, or data:
+    if (isAppCss) {
+        updatedContent = updatedContent.replace(/url\((['"])(?!\/|http|data:)([^'"]+)\1\)/g, (match, quote, url) => {
+            // Add leading slash if the URL doesn't already have one
+            // Check if URL already starts with / (absolute path)
+            const fixedUrl = url.startsWith("/") ? url : `/${url}`;
+            return `url(${quote}${fixedUrl}${quote})`;
+        });
+    }
+    return updatedContent;
+};
+exports.fixURLPath = fixURLPath;
+const transformAppLocale = (exp) => {
+    if (exp.startsWith("fragment?.Prefab") || exp.startsWith("fragment.Prefab")) {
+        exp = exp.replace("fragment?.Prefab", "fragment");
+        exp = exp.replace("fragment.Prefab", "fragment");
+    }
+    // Updated regex to capture the optional 'fragment.' prefix
+    const appLocaleRegex = /(fragment\.)?appLocale(?:\.messages)?(?:\[(['"])([^'"]+)\2\]|\.([a-zA-Z0-9_]+))/g;
+    // We use a replacer function with .replace() to have full control over the output.
+    // This function is called for every match found by the regex.
+    const replacer = (fullMatch, fragmentPrefix, quoteType, keyFromBrackets, keyFromDot) => {
+        // The key will either be from the bracket capture group or the dot capture group.
+        const key = keyFromBrackets || keyFromDot;
+        if (key) {
+            // If there's a fragment prefix, include it in the formatMessage call
+            if (fragmentPrefix) {
+                return `formatMessage(fragment, '${key}')`;
+            }
+            else {
+                return `formatMessage('${key}')`;
+            }
+        }
+        // Fallback to return the original match if key extraction fails (unlikely)
+        return fullMatch;
+    };
+    // Apply the transformation
+    const expression = exp.replace(appLocaleRegex, replacer);
+    return expression;
+};
+exports.transformAppLocale = transformAppLocale;
+/**
+ * Converts property paths with hyphens to bracket notation for valid JavaScript.
+ * e.g. Actions.goToPage_test-page.invoke() -> Actions["goToPage_test-page"].invoke()
+ * Hyphens in identifiers are invalid in JS (parsed as subtraction), so we use bracket notation.
+ */
+const convertHyphenatedPropsToBracketNotation = (expr) => {
+    if (!expr || typeof expr !== "string")
+        return expr;
+    // Match .identifier where identifier contains hyphen (e.g. .goToPage_test-page, .my-var)
+    return expr.replace(/\.([a-zA-Z_$][a-zA-Z0-9_$]*-[a-zA-Z_$][a-zA-Z0-9_$\-]*)/g, (_, propName) => {
+        return `["${propName}"]`;
+    });
+};
+exports.convertHyphenatedPropsToBracketNotation = convertHyphenatedPropsToBracketNotation;
+const modifyExpression = (exp) => {
+    if (exp.startsWith('"http') || exp.startsWith('"/') || exp.startsWith("{")) {
+        return exp;
+    }
+    if (!isValid(exp))
+        return `""`;
+    if (exp.includes("appLocale")) {
+        const transformedExp = (0, exports.transformAppLocale)(exp);
+        return (0, exports.addOptionalChaining)(transformedExp);
+    }
+    else {
+        return (0, exports.addOptionalChaining)(exp);
+    }
+};
+exports.modifyExpression = modifyExpression;
+const scopeCssUnderWmApp = (cssContent) => {
+    if (!cssContent || cssContent.trim() === "") {
+        return cssContent;
+    }
+    // Split CSS into rules while preserving structure
+    const rules = [];
+    let currentRule = "";
+    let inComment = false;
+    let inString = false;
+    let stringChar = "";
+    let braceLevel = 0;
+    for (let i = 0; i < cssContent.length; i++) {
+        const char = cssContent[i];
+        const nextChar = cssContent[i + 1];
+        // Handle comments
+        if (!inString && char === "/" && nextChar === "*") {
+            inComment = true;
+            currentRule += char;
+            continue;
+        }
+        if (inComment && char === "*" && nextChar === "/") {
+            inComment = false;
+            currentRule += char;
+            continue;
+        }
+        if (inComment) {
+            currentRule += char;
+            continue;
+        }
+        // Handle strings
+        if (!inString && (char === '"' || char === "'")) {
+            inString = true;
+            stringChar = char;
+            currentRule += char;
+            continue;
+        }
+        if (inString && char === stringChar && cssContent[i - 1] !== "\\") {
+            inString = false;
+            stringChar = "";
+            currentRule += char;
+            continue;
+        }
+        if (inString) {
+            currentRule += char;
+            continue;
+        }
+        // Handle braces to track rule boundaries
+        if (char === "{") {
+            braceLevel++;
+            currentRule += char;
+        }
+        else if (char === "}") {
+            braceLevel--;
+            currentRule += char;
+            // If we're back to level 0, we've completed a rule
+            if (braceLevel === 0) {
+                rules.push(currentRule.trim());
+                currentRule = "";
+            }
+        }
+        else {
+            currentRule += char;
+        }
+    }
+    // Add any remaining content
+    if (currentRule.trim()) {
+        rules.push(currentRule.trim());
+    }
+    // Process each rule
+    const processedRules = rules.map(rule => {
+        // Skip empty rules or comments
+        if (!rule ||
+            rule.startsWith("/*") ||
+            rule.startsWith("@import") ||
+            rule.startsWith("@charset")) {
+            return rule;
+        }
+        // Handle at-rules like @media, @keyframes, etc.
+        if (rule.startsWith("@")) {
+            return rule;
+        }
+        // Find the opening brace to separate selector from declarations
+        const openBraceIndex = rule.indexOf("{");
+        if (openBraceIndex === -1) {
+            return rule;
+        }
+        const selector = rule.substring(0, openBraceIndex).trim();
+        const declarations = rule.substring(openBraceIndex);
+        // Skip if already scoped under .wm-app .app-page
+        if (selector.includes(".wm-app .app-page") ||
+            selector.startsWith(".wm-app .app-page") ||
+            selector.includes(".wm-app") ||
+            selector.startsWith(".wm-app")) {
+            return rule;
+        }
+        // Split multiple selectors (comma-separated)
+        const selectors = selector.split(",").map(s => s.trim());
+        // Scope each selector under .wm-app .app-page
+        const scopedSelectors = selectors.map(sel => {
+            if (!sel)
+                return sel;
+            // Handle pseudo-selectors like :root, :before, :after
+            if (sel.startsWith(":")) {
+                return sel;
+            }
+            // Handle html, body tags - wrap them
+            if (sel === "html" || sel === "body" || sel.startsWith("html ") || sel.startsWith("body ")) {
+                return `.wm-app .app-page ${sel}`;
+            }
+            // For all other selectors, wrap them under .wm-app .app-page
+            return `.wm-app .app-page ${sel}`;
+        });
+        return `${scopedSelectors.join(", ")} ${declarations}`;
+    });
+    return processedRules.join("\n");
+};
+exports.scopeCssUnderWmApp = scopeCssUnderWmApp;
+const fixURLPathAndScope = (file_content, basePath, isAppCss) => {
+    const urlFixed = (0, exports.fixURLPath)(file_content, basePath, isAppCss);
+    return (0, exports.scopeCssUnderWmApp)(urlFixed);
+};
+exports.fixURLPathAndScope = fixURLPathAndScope;
+exports.htmlElements = [
+    "header",
+    "footer",
+    "main",
+    "section",
+    "article",
+    "aside",
+    "nav",
+    "div",
+    "span",
+    "p",
+    "a",
+    "img",
+    "button",
+    "input",
+    "textarea",
+    "select",
+    "option",
+    "label",
+    "form",
+    "table",
+    "tbody",
+    "tr",
+    "td",
+    "th",
+    "ul",
+    "li",
+    "ol",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "iframe",
+];
+exports.DESIGN_TOKENS_DIR_NAME = "design-tokens";
+exports.APP_OVERRIDE_CSS_PATH = `${exports.DESIGN_TOKENS_DIR_NAME}/app.override.css`;
+exports.OVERRIDE_TOKENS_PATH = `${exports.DESIGN_TOKENS_DIR_NAME}/overrides`;
+const getExistingImportUrls = (layoutContent) => {
+    const existingUrls = new Set();
+    try {
+        const parsed = (0, node_html_parser_1.parse)(layoutContent);
+        const traverseNodes = (node) => {
+            var _a;
+            if (node.nodeType === node_html_parser_1.NodeType.ELEMENT_NODE) {
+                const tagName = (_a = node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+                if (tagName === "script" || tagName === "link") {
+                    const url = node.getAttribute("src") || node.getAttribute("href") || "";
+                    if (url) {
+                        existingUrls.add(url);
+                    }
+                }
+                if (node.childNodes) {
+                    node.childNodes.forEach((child) => {
+                        traverseNodes(child);
+                    });
+                }
+            }
+        };
+        parsed.childNodes.forEach((node) => {
+            traverseNodes(node);
+        });
+    }
+    catch (error) {
+        // If parsing fails, return empty set
+    }
+    return existingUrls;
+};
+/**
+ * HTML attribute names that need to be converted for JSX compatibility
+ */
+const HTML_TO_JSX_ATTR_MAP = {
+    class: "className",
+    for: "htmlFor",
+    tabindex: "tabIndex",
+    readonly: "readOnly",
+    autofocus: "autoFocus",
+    autoplay: "autoPlay",
+    crossorigin: "crossOrigin",
+    maxlength: "maxLength",
+    minlength: "minLength",
+    spellcheck: "spellCheck",
+};
+/**
+ * Void elements that must be self-closing in JSX
+ */
+const VOID_ELEMENTS = new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr",
+]);
+/**
+ * Converts CSS style string to React style object format
+ * Example: "color:#ffffff; font-size:14px" -> {color:"#ffffff",fontSize:"14px"}
+ */
+const convertStyleStringToObject = (styleString) => {
+    if (!styleString || styleString.trim() === "") {
+        return "{}";
+    }
+    const styleObject = {};
+    styleString.split(";").forEach(rule => {
+        const colonIndex = rule.indexOf(":");
+        if (colonIndex > 0) {
+            const property = rule.substring(0, colonIndex).trim();
+            const value = rule.substring(colonIndex + 1).trim();
+            if (property && value) {
+                const camelCaseProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+                styleObject[camelCaseProperty] = value;
+            }
+        }
+    });
+    return JSON.stringify(styleObject);
+};
+exports.convertStyleStringToObject = convertStyleStringToObject;
+/**
+ * Converts HTML string to JSX-compatible format (class->className, style->style object, etc.)
+ * @param htmlString The HTML string to convert
+ * @returns JSX-compatible string
+ */
+const htmlToJsx = (htmlString) => {
+    if (!htmlString || typeof htmlString !== "string") {
+        return "";
+    }
+    try {
+        const parsed = (0, node_html_parser_1.parse)(htmlString);
+        const nodeToJsx = (node) => {
+            var _a, _b;
+            if (node.nodeType === node_html_parser_1.NodeType.TEXT_NODE) {
+                return node.text || "";
+            }
+            if (node.nodeType !== node_html_parser_1.NodeType.ELEMENT_NODE) {
+                return "";
+            }
+            const tagName = ((_a = node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "div";
+            const isVoid = VOID_ELEMENTS.has(tagName);
+            const attrs = [];
+            const attributes = node.attributes || node.attrs || {};
+            if (Object.keys(attributes).length > 0) {
+                for (const [attr, value] of Object.entries(attributes)) {
+                    if (value == null || value === "")
+                        continue;
+                    const attrLower = attr.toLowerCase();
+                    if (attrLower === "class") {
+                        attrs.push(`className="${value}"`);
+                    }
+                    else if (attrLower === "style") {
+                        attrs.push(`style={${(0, exports.convertStyleStringToObject)(value)}}`);
+                    }
+                    else {
+                        const jsxAttr = HTML_TO_JSX_ATTR_MAP[attrLower] || attr;
+                        attrs.push(`${jsxAttr}="${value}"`);
+                    }
+                }
+            }
+            const attrsStr = attrs.length ? " " + attrs.join(" ") : "";
+            if (isVoid) {
+                return `<${tagName}${attrsStr} />`;
+            }
+            let children = "";
+            if ((_b = node.childNodes) === null || _b === void 0 ? void 0 : _b.length) {
+                children = node.childNodes.map((child) => nodeToJsx(child)).join("");
+            }
+            return `<${tagName}${attrsStr}>${children}</${tagName}>`;
+        };
+        return parsed.childNodes.map((node) => nodeToJsx(node)).join("");
+    }
+    catch (error) {
+        console.error("Error converting HTML to JSX:", error);
+        return "";
+    }
+};
+exports.htmlToJsx = htmlToJsx;
+/**
+ * Extracts the interactive-container div from HTML (with full structure including children)
+ * @param htmlString The HTML string to parse
+ * @returns The outerHTML of the interactive-container div, or empty string if not found
+ */
+const extractInteractiveContainerDiv = (htmlString) => {
+    if (!htmlString || typeof htmlString !== "string") {
+        return "";
+    }
+    try {
+        const parsed = (0, node_html_parser_1.parse)(htmlString);
+        const findInteractiveContainer = (node) => {
+            var _a;
+            if (node.nodeType === node_html_parser_1.NodeType.ELEMENT_NODE) {
+                const tagName = (_a = node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+                if (tagName === "div") {
+                    const className = node.getAttribute("class") || "";
+                    if (className.split(/\s+/).includes("interactive-container")) {
+                        return node;
+                    }
+                }
+                if (node.childNodes) {
+                    for (const child of node.childNodes) {
+                        const found = findInteractiveContainer(child);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+            return null;
+        };
+        for (const node of parsed.childNodes) {
+            const div = findInteractiveContainer(node);
+            if (div) {
+                return div.outerHTML;
+            }
+        }
+    }
+    catch (error) {
+        console.error("Error extracting interactive-container div:", error);
+    }
+    return "";
+};
+exports.extractInteractiveContainerDiv = extractInteractiveContainerDiv;
+/**
+ * Extracts only <script> and <link> tags from an HTML string that:
+ * - Have CDN paths (http:// or https:// URLs)
+ * - Are NOT from jQuery or Angular libraries
+ * - Are NOT already present in the layout file
+ * @param htmlString The HTML string to parse
+ * @param layoutContent Optional layout file content to check for existing imports
+ * @returns A string containing only the extracted <script> and <link> tags
+ */
+const extractScriptAndLinkTags = (htmlString, layoutContent) => {
+    if (!htmlString || typeof htmlString !== "string") {
+        return "";
+    }
+    try {
+        const parsed = (0, node_html_parser_1.parse)(htmlString);
+        const extractedTags = [];
+        // Get existing URLs from layout if provided
+        const existingUrls = layoutContent ? getExistingImportUrls(layoutContent) : new Set();
+        // Patterns to identify jQuery and Angular libraries
+        const jqueryPatterns = [/jquery/i, /\bjq\b/i, /jquery-ui/i, /jquery\.min/i];
+        const angularPatterns = [/angular/i, /ng-/i, /angularjs/i, /@angular/i];
+        // Function to check if a URL is from jQuery or Angular
+        const isJQueryOrAngular = (url) => {
+            if (!url)
+                return false;
+            const lowerUrl = url.toLowerCase();
+            return (jqueryPatterns.some(pattern => pattern.test(lowerUrl)) ||
+                angularPatterns.some(pattern => pattern.test(lowerUrl)));
+        };
+        // Function to check if a URL is a CDN path (http:// or https://)
+        const isCdnPath = (url) => {
+            if (!url)
+                return false;
+            return url.startsWith("http://") || url.startsWith("https://");
+        };
+        // Function to recursively traverse nodes
+        const traverseNodes = (node) => {
+            var _a;
+            if (node.nodeType === node_html_parser_1.NodeType.ELEMENT_NODE) {
+                const tagName = (_a = node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+                // Extract script and link tags
+                if (tagName === "script" || tagName === "link") {
+                    // Get the URL from src (for script) or href (for link)
+                    const url = node.getAttribute("src") || node.getAttribute("href") || "";
+                    // It's a CDN path (http:// or https://)
+                    if (isCdnPath(url) && !isJQueryOrAngular(url) && !existingUrls.has(url)) {
+                        // Convert to JSX-compatible format (self-closing for link tags only)
+                        let jsxTag = node.outerHTML;
+                        // For link tags, ensure they are self-closing for JSX compatibility
+                        if (tagName === "link") {
+                            // Remove any closing tag </link>
+                            jsxTag = jsxTag.replace(/\s*<\/link>/gi, "");
+                            // If it doesn't end with />, make it self-closing
+                            if (!jsxTag.trim().endsWith("/>")) {
+                                // Replace the closing > with />
+                                jsxTag = jsxTag.replace(/>\s*$/, " />");
+                            }
+                        }
+                        extractedTags.push(jsxTag);
+                    }
+                }
+                // Recursively process child nodes
+                if (node.childNodes) {
+                    node.childNodes.forEach((child) => {
+                        traverseNodes(child);
+                    });
+                }
+            }
+        };
+        // Traverse all nodes in the parsed HTML
+        parsed.childNodes.forEach((node) => {
+            traverseNodes(node);
+        });
+        return extractedTags.join("\n");
+    }
+    catch (error) {
+        console.error("Error extracting script and link tags:", error);
+        return "";
+    }
+};
+exports.extractScriptAndLinkTags = extractScriptAndLinkTags;
+//# sourceMappingURL=utils.browser.js.map