@promakeai/inspector-hook 1.0.2 → 1.1.0

package/dist/utils/jsxUpdater.d.ts

@@ -1,6 +1,7 @@
 /**
  * JSX Source Code Updater
- * AST-based utility for updating styles and classNames in JSX/TSX source code
+ * Lightweight regex-based utility for updating styles and classNames in JSX/TSX source code
+ * No Babel dependencies - works perfectly in browser environments!
  */
 export interface UpdateJSXSourceOptions {
     sourceCode: string;

package/dist/utils/jsxUpdater.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsxUpdater.d.ts","sourceRoot":"","sources":["../../src/utils/jsxUpdater.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAgBH,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAuKD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,qBAAqB,CA+DtF"}
+{"version":3,"file":"jsxUpdater.d.ts","sourceRoot":"","sources":["../../src/utils/jsxUpdater.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA4YD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CAkFvB"}

package/dist/utils/jsxUpdater.js

@@ -1,125 +1,320 @@
 /**
  * JSX Source Code Updater
- * AST-based utility for updating styles and classNames in JSX/TSX source code
+ * Lightweight regex-based utility for updating styles and classNames in JSX/TSX source code
+ * No Babel dependencies - works perfectly in browser environments!
  */
-import * as parser from '@babel/parser';
-import * as traverseModule from '@babel/traverse';
-import * as generateModule from '@babel/generator';
-import * as t from '@babel/types';
-// Browser compatibility: Handle both CommonJS and ESM default exports
-// @ts-ignore - Babel modules have complex type definitions
-const traverse = traverseModule.default || traverseModule;
-// @ts-ignore - Babel modules have complex type definitions
-const generate = generateModule.default || generateModule;
 /**
- * Create AST ObjectExpression from styles object
+ * Extract tag name from JSX opening tag (handles generics like Component<T>)
  */
-function createStyleObjectExpression(styles) {
-    return t.objectExpression(Object.entries(styles).map(([key, value]) => t.objectProperty(t.identifier(key), t.stringLiteral(value))));
+function extractTagName(tagContent) {
+    // Match tag name, supporting generics: <Component<T> or <div
+    const match = tagContent.match(/^<([A-Za-z_$][A-Za-z0-9_$]*)/);
+    return match ? match[1] : null;
 }
 /**
- * Find JSX element at specific line and column position
+ * Find the JSX opening tag at the specified line and column
  */
-function findJSXElementAtPosition(ast, targetLine, targetColumn) {
-    let foundElement = null;
-    traverse(ast, {
-        JSXOpeningElement(path) {
-            const { loc } = path.node;
-            if (loc &&
-                loc.start.line === targetLine &&
-                loc.start.column === targetColumn) {
-                foundElement = path;
-                path.stop();
-            }
-        },
-    });
-    return foundElement;
+function findJSXTagAtPosition(sourceCode, lineNumber, columnNumber, tagName) {
+    const lines = sourceCode.split("\n");
+    if (lineNumber < 1 || lineNumber > lines.length) {
+        return null;
+    }
+    // Calculate absolute position in source code
+    let absolutePosition = 0;
+    for (let i = 0; i < lineNumber - 1; i++) {
+        absolutePosition += lines[i].length + 1; // +1 for newline
+    }
+    absolutePosition += columnNumber;
+    // Check if we're at the start of a tag (flexible - allows any tag)
+    const remainingCode = sourceCode.slice(absolutePosition);
+    const tagPattern = /^<[A-Za-z_$][A-Za-z0-9_$]*/;
+    if (!tagPattern.test(remainingCode)) {
+        return null;
+    }
+    // Extract actual tag name found at this position
+    const foundTagName = extractTagName(remainingCode);
+    if (!foundTagName) {
+        return null;
+    }
+    // Find the end of the opening tag
+    let depth = 0;
+    let angleBracketDepth = 0; // For TypeScript generics
+    let inString = false;
+    let stringChar = "";
+    let inExpression = false;
+    let i = absolutePosition + 1; // Skip the '<'
+    let hasSeenTagName = false;
+    while (i < sourceCode.length) {
+        const char = sourceCode[i];
+        const prevChar = i > 0 ? sourceCode[i - 1] : "";
+        // Handle strings
+        if ((char === '"' || char === "'" || char === "`") && prevChar !== "\\") {
+            if (!inString) {
+                inString = true;
+                stringChar = char;
+            }
+            else if (char === stringChar) {
+                inString = false;
+                stringChar = "";
+            }
+        }
+        // Handle JSX expressions and TypeScript generics
+        if (!inString) {
+            if (char === "{") {
+                inExpression = true;
+                depth++;
+            }
+            else if (char === "}") {
+                depth--;
+                if (depth === 0) {
+                    inExpression = false;
+                }
+                // Detect unterminated expressions
+                if (depth < 0) {
+                    return null; // Invalid JSX
+                }
+            }
+            else if (char === "<" && !hasSeenTagName) {
+                // TypeScript generic opening
+                angleBracketDepth++;
+            }
+            else if (char === ">" && angleBracketDepth > 0) {
+                // TypeScript generic closing
+                angleBracketDepth--;
+            }
+        }
+        // Mark that we've passed the tag name
+        if (!hasSeenTagName &&
+            (char === " " || char === "\t" || char === "\n" || char === "<")) {
+            hasSeenTagName = true;
+        }
+        // Check for end of opening tag
+        if (!inString && !inExpression && depth === 0 && angleBracketDepth === 0) {
+            if (char === ">" ||
+                (char === "/" && i + 1 < sourceCode.length && sourceCode[i + 1] === ">")) {
+                const end = char === "/" ? i + 2 : i + 1;
+                const content = sourceCode.slice(absolutePosition, end);
+                // Additional validation: check for incomplete/malformed closing tag
+                if (!content.trim().endsWith(">") && !content.trim().endsWith("/>")) {
+                    return null;
+                }
+                return {
+                    start: absolutePosition,
+                    end: end,
+                    content: content,
+                    foundTagName: foundTagName,
+                };
+            }
+        }
+        i++;
+    }
+    // If we reach here, the tag was not properly closed
+    return null;
 }
 /**
- * Merge new styles with existing style prop
+ * Parse inline style object from style attribute
  */
-function mergeStyleProp(jsxOpeningElement, newStyles) {
-    const attributes = jsxOpeningElement.node.attributes;
-    // Find existing style attribute
-    const styleAttrIndex = attributes.findIndex((attr) => t.isJSXAttribute(attr) &&
-        t.isJSXIdentifier(attr.name) &&
-        attr.name.name === 'style');
-    const newStyleObjectExpression = createStyleObjectExpression(newStyles);
-    if (styleAttrIndex !== -1) {
-        // Update existing style attribute
-        const styleAttr = attributes[styleAttrIndex];
-        if (t.isJSXExpressionContainer(styleAttr.value) &&
-            t.isObjectExpression(styleAttr.value.expression)) {
-            // Merge with existing styles
-            const existingProps = styleAttr.value.expression.properties;
-            const newProps = newStyleObjectExpression.properties;
-            // Create map of new style keys
-            const newStyleKeys = new Set(Object.keys(newStyles));
-            // Filter out existing properties that will be replaced
-            const filteredExisting = existingProps.filter((prop) => !t.isObjectProperty(prop) ||
-                !t.isIdentifier(prop.key) ||
-                !newStyleKeys.has(prop.key.name));
-            // Combine: keep non-updated existing properties + add new properties
-            styleAttr.value.expression.properties = [
-                ...filteredExisting,
-                ...newProps,
-            ];
+function parseStyleObject(styleValue) {
+    const styles = {};
+    // Remove outer {{ }}
+    const objectMatch = styleValue.match(/\{\s*\{([^}]*)\}\s*\}/s);
+    if (!objectMatch) {
+        return styles;
+    }
+    const content = objectMatch[1];
+    // Parse property: value pairs
+    const propRegex = /(\w+):\s*['"]([^'"]*)['"]/g;
+    let match;
+    while ((match = propRegex.exec(content)) !== null) {
+        styles[match[1]] = match[2];
+    }
+    return styles;
+}
+/**
+ * Create style object string from styles
+ */
+function createStyleString(styles) {
+    const entries = Object.entries(styles).map(([key, value]) => `${key}: "${value}"`);
+    return `{{ ${entries.join(", ")} }}`;
+}
+/**
+ * Validate that the tag content has proper syntax
+ */
+function validateTagSyntax(tagContent) {
+    // Check for incomplete attributes (e.g., className= without value)
+    if (/\s+\w+=$/.test(tagContent) || /\s+\w+=\s*>/.test(tagContent)) {
+        return false;
+    }
+    // Check for proper closing
+    if (!tagContent.endsWith(">") && !tagContent.endsWith("/>")) {
+        return false;
+    }
+    return true;
+}
+/**
+ * Check if a JSX element has a proper closing tag and valid content (basic check)
+ */
+function hasProperClosingTag(sourceCode, tagStart, tagEnd, tagName) {
+    // For self-closing tags, no closing tag needed
+    const openingTag = sourceCode.slice(tagStart, tagEnd);
+    if (openingTag.trim().endsWith("/>")) {
+        return true;
+    }
+    // Look for closing tag after the opening tag
+    const afterOpening = sourceCode.slice(tagEnd);
+    const closingTagPattern = new RegExp(`</${tagName}\\s*>`);
+    // Check if there's a closing tag somewhere
+    const closingMatch = closingTagPattern.exec(afterOpening);
+    if (!closingMatch) {
+        return false;
+    }
+    // Check the content between opening and closing tags for unmatched braces
+    const contentBetween = afterOpening.slice(0, closingMatch.index);
+    let braceDepth = 0;
+    let inString = false;
+    let stringChar = "";
+    for (let i = 0; i < contentBetween.length; i++) {
+        const char = contentBetween[i];
+        const prevChar = i > 0 ? contentBetween[i - 1] : "";
+        // Handle strings
+        if ((char === '"' || char === "'" || char === "`") && prevChar !== "\\") {
+            if (!inString) {
+                inString = true;
+                stringChar = char;
+            }
+            else if (char === stringChar) {
+                inString = false;
+                stringChar = "";
+            }
+        }
+        // Count braces outside of strings
+        if (!inString) {
+            if (char === "{") {
+                braceDepth++;
+            }
+            else if (char === "}") {
+                braceDepth--;
+            }
+        }
+    }
+    // If braces don't match, JSX is invalid
+    if (braceDepth !== 0) {
+        return false;
+    }
+    // Validate proper nesting by tracking all opening and closing tags
+    let tagStack = [tagName];
+    let i = 0;
+    while (i < afterOpening.length && tagStack.length > 0) {
+        // Look for next tag (opening or closing)
+        const remainingCode = afterOpening.slice(i);
+        const nextTag = remainingCode.match(/^<\/?([A-Za-z_$][A-Za-z0-9_$]*)/);
+        if (!nextTag) {
+            // No more tags, move forward
+            i++;
+            continue;
+        }
+        const isClosing = remainingCode.startsWith("</");
+        const foundTagName = nextTag[1];
+        if (isClosing) {
+            // Closing tag - should match top of stack
+            if (tagStack.length === 0 ||
+                tagStack[tagStack.length - 1] !== foundTagName) {
+                return false; // Mismatched closing tag
+            }
+            tagStack.pop();
+            // If this was our target tag's closing, we're done
+            if (tagStack.length === 0) {
+                break;
+            }
         }
         else {
-            // Replace entirely if existing value is not a simple object
-            styleAttr.value = t.jsxExpressionContainer(newStyleObjectExpression);
+            // Opening tag - check if it's self-closing
+            const tagEndMatch = remainingCode.match(/^<[^>]+?(\/?)>/);
+            if (tagEndMatch && !tagEndMatch[1]) {
+                // Not self-closing, add to stack
+                tagStack.push(foundTagName);
+            }
+            // If self-closing (/>), don't add to stack
         }
+        // Move past this tag
+        const tagEnd = remainingCode.indexOf(">");
+        if (tagEnd === -1)
+            break;
+        i += tagEnd + 1;
+    }
+    // Stack should be empty if all tags matched properly
+    if (tagStack.length > 0) {
+        return false;
+    }
+    return true;
+}
+/**
+ * Update or add style attribute in JSX tag
+ */
+function updateStyleAttribute(tagContent, newStyles) {
+    // Validate syntax before attempting to update
+    if (!validateTagSyntax(tagContent)) {
+        throw new Error("Invalid JSX syntax: malformed attributes or incomplete tag");
+    }
+    const styleMatch = tagContent.match(/style=\{\s*\{[^}]*\}\s*\}/s);
+    if (styleMatch) {
+        // Merge with existing styles
+        const existingStyles = parseStyleObject(styleMatch[0]);
+        const mergedStyles = { ...existingStyles, ...newStyles };
+        const newStyleAttr = `style=${createStyleString(mergedStyles)}`;
+        return tagContent.replace(/style=\{\s*\{[^}]*\}\s*\}/s, newStyleAttr);
     }
     else {
         // Add new style attribute
-        const styleAttr = t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(newStyleObjectExpression));
-        attributes.push(styleAttr);
+        const newStyleAttr = ` style=${createStyleString(newStyles)}`;
+        // Insert before closing > or />
+        if (tagContent.endsWith("/>")) {
+            return tagContent.slice(0, -2) + newStyleAttr + " />";
+        }
+        else if (tagContent.endsWith(">")) {
+            return tagContent.slice(0, -1) + newStyleAttr + ">";
+        }
     }
+    return tagContent;
 }
 /**
- * Merge new className with existing className prop
+ * Update or add className attribute in JSX tag
  */
-function mergeClassNameProp(jsxOpeningElement, newClassName) {
-    const attributes = jsxOpeningElement.node.attributes;
-    // Find existing className attribute
-    const classNameAttrIndex = attributes.findIndex((attr) => t.isJSXAttribute(attr) &&
-        t.isJSXIdentifier(attr.name) &&
-        attr.name.name === 'className');
-    if (classNameAttrIndex !== -1) {
+function updateClassNameAttribute(tagContent, newClassName) {
+    // Validate syntax before attempting to update
+    if (!validateTagSyntax(tagContent)) {
+        throw new Error("Invalid JSX syntax: malformed attributes or incomplete tag");
+    }
+    // Check for existing className
+    const classNameMatch = tagContent.match(/className=["']([^"']*)["']/);
+    if (classNameMatch) {
         // Merge with existing className
-        const classNameAttr = attributes[classNameAttrIndex];
-        if (t.isStringLiteral(classNameAttr.value)) {
-            // Simple string className
-            const existingClasses = classNameAttr.value.value;
-            classNameAttr.value = t.stringLiteral(`${existingClasses} ${newClassName}`.trim());
-        }
-        else if (t.isJSXExpressionContainer(classNameAttr.value) &&
-            t.isStringLiteral(classNameAttr.value.expression)) {
-            // className={""} format
-            const existingClasses = classNameAttr.value.expression.value;
-            classNameAttr.value.expression = t.stringLiteral(`${existingClasses} ${newClassName}`.trim());
-        }
-        else if (t.isJSXExpressionContainer(classNameAttr.value) &&
-            t.isTemplateLiteral(classNameAttr.value.expression)) {
-            // Template literal className
-            const templateLiteral = classNameAttr.value.expression;
-            const lastQuasi = templateLiteral.quasis[templateLiteral.quasis.length - 1];
-            lastQuasi.value.raw += ` ${newClassName}`;
-            lastQuasi.value.cooked = lastQuasi.value.raw;
+        const existingClasses = classNameMatch[1];
+        const allClasses = `${existingClasses} ${newClassName}`.trim();
+        return tagContent.replace(/className=["'][^"']*["']/, `className="${allClasses}"`);
+    }
+    else {
+        // Check for className with JSX expression
+        const classNameExprMatch = tagContent.match(/className=\{[^}]*\}/);
+        if (classNameExprMatch) {
+            // Wrap existing expression in template literal
+            const existingExpr = classNameExprMatch[0].slice(11, -1); // Remove className={ and }
+            const newExpr = `className={\`\${${existingExpr}} ${newClassName}\`}`;
+            return tagContent.replace(/className=\{[^}]*\}/, newExpr);
         }
         else {
-            // Complex expression - wrap in template literal
-            classNameAttr.value = t.jsxExpressionContainer(t.templateLiteral([
-                t.templateElement({ raw: '', cooked: '' }, false),
-                t.templateElement({ raw: ` ${newClassName}`, cooked: ` ${newClassName}` }, true),
-            ], [classNameAttr.value.expression]));
+            // Add new className attribute
+            const newClassNameAttr = ` className="${newClassName}"`;
+            // Insert before closing > or />
+            if (tagContent.endsWith("/>")) {
+                return tagContent.slice(0, -2) + newClassNameAttr + " />";
+            }
+            else if (tagContent.endsWith(">")) {
+                return tagContent.slice(0, -1) + newClassNameAttr + ">";
+            }
         }
     }
-    else {
-        // Add new className attribute
-        const classNameAttr = t.jsxAttribute(t.jsxIdentifier('className'), t.stringLiteral(newClassName));
-        attributes.push(classNameAttr);
-    }
+    return tagContent;
 }
 /**
  * Update JSX source code with new styles and/or className
@@ -143,56 +338,57 @@ function mergeClassNameProp(jsxOpeningElement, newClassName) {
 export function updateJSXSource(options) {
     const { sourceCode, lineNumber, columnNumber, tagName, styles, className } = options;
     try {
-        // Parse JSX/TSX source code
-        const ast = parser.parse(sourceCode, {
-            sourceType: 'module',
-            plugins: ['jsx', 'typescript', 'decorators-legacy'],
-        });
-        // Find the target JSX element at the specified position
-        const elementPath = findJSXElementAtPosition(ast, lineNumber, columnNumber);
-        if (!elementPath) {
+        // Find the JSX tag at the specified position
+        const tagInfo = findJSXTagAtPosition(sourceCode, lineNumber, columnNumber, tagName);
+        if (!tagInfo) {
             return {
                 success: false,
                 code: sourceCode,
                 message: `Could not find JSX element <${tagName}> at line ${lineNumber}, column ${columnNumber}`,
             };
         }
-        // Verify tag name matches (optional validation)
-        const foundTagName = t.isJSXIdentifier(elementPath.node.name)
-            ? elementPath.node.name.name
-            : '';
-        if (foundTagName.toLowerCase() !== tagName.toLowerCase()) {
+        // Verify tag name matches
+        if (tagInfo.foundTagName.toLowerCase() !== tagName.toLowerCase()) {
+            return {
+                success: false,
+                code: sourceCode,
+                message: `Tag name mismatch: expected <${tagName}>, found <${tagInfo.foundTagName}>`,
+            };
+        }
+        // Validate that the element has proper closing tag
+        if (!hasProperClosingTag(sourceCode, tagInfo.start, tagInfo.end, tagInfo.foundTagName)) {
             return {
                 success: false,
                 code: sourceCode,
-                message: `Tag name mismatch: expected <${tagName}>, found <${foundTagName}>`,
+                message: `Invalid JSX: element <${tagInfo.foundTagName}> is missing or has mismatched closing tag`,
             };
         }
+        let updatedTagContent = tagInfo.content;
         // Apply style updates if provided
         if (styles && Object.keys(styles).length > 0) {
-            mergeStyleProp(elementPath, styles);
+            updatedTagContent = updateStyleAttribute(updatedTagContent, styles);
         }
         // Apply className updates if provided
         if (className && className.trim()) {
-            mergeClassNameProp(elementPath, className.trim());
-        }
-        // Generate updated code
-        const output = generate(ast, {
-            retainLines: true,
-            compact: false,
-            concise: false,
-        });
+            updatedTagContent = updateClassNameAttribute(updatedTagContent, className.trim());
+        }
+        // Replace the tag in the source code
+        const updatedCode = sourceCode.slice(0, tagInfo.start) +
+            updatedTagContent +
+            sourceCode.slice(tagInfo.end);
         return {
             success: true,
-            code: output.code,
-            message: 'JSX source updated successfully',
+            code: updatedCode,
+            message: "JSX source updated successfully",
         };
     }
     catch (error) {
         return {
             success: false,
             code: sourceCode,
-            message: error instanceof Error ? error.message : 'Unknown error occurred during JSX update',
+            message: error instanceof Error
+                ? error.message
+                : "Unknown error occurred during JSX update",
         };
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/inspector-hook",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "React hook for controlling inspector in parent applications",
   "author": "Promake",
   "type": "module",
@@ -45,16 +45,8 @@
   },
   "devDependencies": {
     "@promakeai/inspector-types": "^1.0.1",
-    "@types/babel__traverse": "^7.20.0",
-    "@types/babel__generator": "^7.6.0",
     "vitest": "^1.0.0"
   },
-  "dependencies": {
-    "@babel/parser": "^7.23.0",
-    "@babel/traverse": "^7.23.0",
-    "@babel/generator": "^7.23.0",
-    "@babel/types": "^7.23.0"
-  },
   "publishConfig": {
     "access": "public"
   }