rwsdk 0.2.0-alpha.9 → 0.2.0

package/dist/vite/transformJsxScriptTagsPlugin.mjs

@@ -1,4 +1,4 @@
-import { Project, Node, SyntaxKind } from "ts-morph";
+import { Project, Node, SyntaxKind, } from "ts-morph";
 import { readFile } from "node:fs/promises";
 import { pathExists } from "fs-extra";
 import debug from "debug";
@@ -28,23 +28,18 @@ function hasJsxFunctions(text) {
         text.includes('jsxDEV("link"') ||
         text.includes("jsxDEV('link'"));
 }
-// Transform import statements in script content using ts-morph
 function transformScriptImports(scriptContent, manifest) {
     const scriptProject = new Project({ useInMemoryFileSystem: true });
     try {
-        // Wrap in a function to make it valid JavaScript
         const wrappedContent = `function __wrapper() {${scriptContent}}`;
         const scriptFile = scriptProject.createSourceFile("script.js", wrappedContent);
         let hasChanges = false;
         const entryPoints = [];
-        // Find all CallExpressions that look like import("path")
         scriptFile
             .getDescendantsOfKind(SyntaxKind.CallExpression)
             .forEach((callExpr) => {
             const expr = callExpr.getExpression();
-            // Check for both "import()" and "await import()" patterns
             const isImport = expr.getText() === "import";
-            // Check for await import pattern
             const isAwaitImport = expr.getKind() === SyntaxKind.PropertyAccessExpression &&
                 expr.getText().endsWith(".import");
             if (isImport || isAwaitImport) {
@@ -54,7 +49,7 @@ function transformScriptImports(scriptContent, manifest) {
                     if (importPath.startsWith("/")) {
                         log("Found dynamic import with root-relative path: %s", importPath);
                         entryPoints.push(importPath);
-                        const path = importPath.slice(1); // Remove leading slash
+                        const path = importPath.slice(1);
                         if (manifest[path]) {
                             const transformedSrc = `/${manifest[path].file}`;
                             args[0].setLiteralValue(transformedSrc);
@@ -65,19 +60,15 @@ function transformScriptImports(scriptContent, manifest) {
             }
         });
         if (hasChanges) {
-            // Extract the transformed content from inside the wrapper function
             const fullText = scriptFile.getFullText();
-            // Find content between the first { and the last }
             const startPos = fullText.indexOf("{") + 1;
             const endPos = fullText.lastIndexOf("}");
             const transformedContent = fullText.substring(startPos, endPos);
             return { content: transformedContent, hasChanges: true, entryPoints };
         }
-        // Return the original content when no changes are made
         return { content: scriptContent, hasChanges: false, entryPoints };
     }
     catch (error) {
-        // If parsing fails, fall back to the original content
         console.warn("Failed to parse inline script content:", error);
         return { content: undefined, hasChanges: false, entryPoints: [] };
     }
@@ -90,17 +81,15 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
     }
     const project = new Project({ useInMemoryFileSystem: true });
     const sourceFile = project.createSourceFile("temp.tsx", code);
-    let hasModifications = false;
+    const modifications = [];
     const needsRequestInfoImportRef = { value: false };
-    // Check for existing imports up front
+    const entryPointsPerCallExpr = new Map();
     let hasRequestInfoImport = false;
     let sdkWorkerImportDecl;
-    // Scan for imports only once
     sourceFile.getImportDeclarations().forEach((importDecl) => {
         const moduleSpecifier = importDecl.getModuleSpecifierValue();
         if (moduleSpecifier === "rwsdk/worker") {
             sdkWorkerImportDecl = importDecl;
-            // Check if requestInfo is already imported
             if (importDecl
                 .getNamedImports()
                 .some((namedImport) => namedImport.getName() === "requestInfo")) {
@@ -108,97 +97,83 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
             }
         }
     });
-    // Look for jsx function calls (jsx, jsxs, jsxDEV)
     sourceFile
         .getDescendantsOfKind(SyntaxKind.CallExpression)
         .forEach((callExpr) => {
         const expression = callExpr.getExpression();
         const expressionText = expression.getText();
-        // Only process jsx/jsxs/jsxDEV calls
         if (expressionText !== "jsx" &&
             expressionText !== "jsxs" &&
             expressionText !== "jsxDEV") {
             return;
         }
-        // Get arguments of the jsx call
         const args = callExpr.getArguments();
         if (args.length < 2)
             return;
-        // First argument should be the element type
         const elementType = args[0];
         if (!Node.isStringLiteral(elementType))
             return;
         const tagName = elementType.getLiteralValue();
         const entryPoints = [];
-        // Process script and link tags
         if (tagName === "script" || tagName === "link") {
-            // Second argument should be the props object
             const propsArg = args[1];
-            // Handle object literals with properties
             if (Node.isObjectLiteralExpression(propsArg)) {
                 const properties = propsArg.getProperties();
-                // Variables to track script attributes
                 let hasDangerouslySetInnerHTML = false;
                 let hasNonce = false;
                 let hasStringLiteralChildren = false;
                 let hasSrc = false;
-                // Variables to track link attributes
                 let isPreload = false;
                 let hrefValue = null;
                 for (const prop of properties) {
                     if (Node.isPropertyAssignment(prop)) {
                         const propName = prop.getName();
                         const initializer = prop.getInitializer();
-                        // Check for existing nonce
                         if (propName === "nonce") {
                             hasNonce = true;
                         }
-                        // Check for dangerouslySetInnerHTML
                         if (propName === "dangerouslySetInnerHTML") {
                             hasDangerouslySetInnerHTML = true;
                         }
-                        // Check for src attribute
                         if (tagName === "script" && propName === "src") {
                             hasSrc = true;
-                            // Also process src for manifest transformation if needed
                             if (Node.isStringLiteral(initializer) ||
                                 Node.isNoSubstitutionTemplateLiteral(initializer)) {
                                 const srcValue = initializer.getLiteralValue();
                                 if (srcValue.startsWith("/")) {
                                     entryPoints.push(srcValue);
-                                    const path = srcValue.slice(1); // Remove leading slash
+                                    const path = srcValue.slice(1);
                                     if (manifest[path]) {
                                         const transformedSrc = `/${manifest[path].file}`;
-                                        initializer.setLiteralValue(transformedSrc);
-                                        hasModifications = true;
+                                        modifications.push({
+                                            type: "literalValue",
+                                            node: initializer,
+                                            value: transformedSrc,
+                                        });
                                     }
                                 }
                             }
                         }
-                        // Check for string literal children
                         if (tagName === "script" &&
                             propName === "children" &&
                             (Node.isStringLiteral(initializer) ||
                                 Node.isNoSubstitutionTemplateLiteral(initializer))) {
                             hasStringLiteralChildren = true;
                             const scriptContent = initializer.getLiteralValue();
-                            // Transform import statements in script content using ts-morph
                             const { content: transformedContent, hasChanges: contentHasChanges, entryPoints: dynamicEntryPoints, } = transformScriptImports(scriptContent, manifest);
                             entryPoints.push(...dynamicEntryPoints);
                             if (contentHasChanges && transformedContent) {
-                                // Get the raw text with quotes to determine the exact format
                                 const isTemplateLiteral = Node.isNoSubstitutionTemplateLiteral(initializer);
-                                if (isTemplateLiteral) {
-                                    // Simply wrap the transformed content in backticks
-                                    initializer.replaceWithText("`" + transformedContent + "`");
-                                }
-                                else {
-                                    initializer.replaceWithText(JSON.stringify(transformedContent));
-                                }
-                                hasModifications = true;
+                                const replacementText = isTemplateLiteral
+                                    ? "`" + transformedContent + "`"
+                                    : JSON.stringify(transformedContent);
+                                modifications.push({
+                                    type: "replaceText",
+                                    node: initializer,
+                                    text: replacementText,
+                                });
                             }
                         }
-                        // For link tags, first check if it's a preload/modulepreload
                         if (tagName === "link") {
                             if (propName === "rel" &&
                                 (Node.isStringLiteral(initializer) ||
@@ -216,28 +191,26 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
                         }
                     }
                 }
-                // Add nonce to script tags if needed
                 if (tagName === "script" &&
                     !hasNonce &&
                     !hasDangerouslySetInnerHTML &&
                     (hasStringLiteralChildren || hasSrc)) {
-                    // Add nonce property to the props object
-                    propsArg.addPropertyAssignment({
+                    modifications.push({
+                        type: "addProperty",
+                        node: propsArg,
                         name: "nonce",
                         initializer: "requestInfo.rw.nonce",
                     });
                     if (!hasRequestInfoImport) {
                         needsRequestInfoImportRef.value = true;
                     }
-                    hasModifications = true;
                 }
-                // Transform href if this is a preload link
                 if (tagName === "link" &&
                     isPreload &&
                     hrefValue &&
                     hrefValue.startsWith("/") &&
                     manifest[hrefValue.slice(1)]) {
-                    const path = hrefValue.slice(1); // Remove leading slash
+                    const path = hrefValue.slice(1);
                     for (const prop of properties) {
                         if (Node.isPropertyAssignment(prop) &&
                             prop.getName() === "href") {
@@ -250,17 +223,21 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
                                 const quote = isTemplateLiteral
                                     ? "`"
                                     : originalText.charAt(0);
-                                // Preserve the original quote style
+                                let replacementText;
                                 if (isTemplateLiteral) {
-                                    initializer.replaceWithText(`\`/${transformedHref}\``);
+                                    replacementText = `\`/${transformedHref}\``;
                                 }
                                 else if (quote === '"') {
-                                    initializer.replaceWithText(`"/${transformedHref}"`);
+                                    replacementText = `"/${transformedHref}"`;
                                 }
                                 else {
-                                    initializer.replaceWithText(`'/${transformedHref}'`);
+                                    replacementText = `'/${transformedHref}'`;
                                 }
-                                hasModifications = true;
+                                modifications.push({
+                                    type: "replaceText",
+                                    node: initializer,
+                                    text: replacementText,
+                                });
                             }
                         }
                     }
@@ -274,51 +251,87 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
                 .join(",\n");
             const leadingCommentRanges = callExpr.getLeadingCommentRanges();
             const pureComment = leadingCommentRanges.find((r) => r.getText().includes("@__PURE__"));
-            const callExprText = callExpr.getText();
-            if (pureComment) {
-                const pureCommentText = pureComment.getText();
-                const newText = `(
-            ${sideEffects},
-            ${pureCommentText} ${callExprText}
-          )`;
-                const fullText = callExpr.getFullText();
-                const leadingTriviaText = fullText.substring(0, fullText.length - callExprText.length);
-                const newLeadingTriviaText = leadingTriviaText.replace(pureCommentText, "");
-                // By replacing from `getFullStart`, we remove the original node and all its leading trivia
-                // and replace it with our manually reconstructed string.
-                // This should correctly move the pure comment and preserve other comments and whitespace.
-                callExpr
-                    .getSourceFile()
-                    .replaceText([callExpr.getFullStart(), callExpr.getEnd()], newLeadingTriviaText + newText);
-            }
-            else {
-                callExpr.replaceWithText(`(
-              ${sideEffects},
-              ${callExprText}
-            )`);
+            const wrapInfo = {
+                callExpr: callExpr,
+                sideEffects: sideEffects,
+                pureCommentText: pureComment?.getText(),
+            };
+            if (!entryPointsPerCallExpr.has(callExpr)) {
+                entryPointsPerCallExpr.set(callExpr, wrapInfo);
             }
             needsRequestInfoImportRef.value = true;
-            hasModifications = true;
         }
     });
-    // Add requestInfo import if needed and not already imported
-    if (needsRequestInfoImportRef.value && hasModifications) {
-        if (sdkWorkerImportDecl) {
-            // Module is imported but need to add requestInfo
-            if (!hasRequestInfoImport) {
-                sdkWorkerImportDecl.addNamedImport("requestInfo");
+    if (modifications.length > 0 || entryPointsPerCallExpr.size > 0) {
+        for (const mod of modifications) {
+            if (mod.type === "literalValue") {
+                mod.node.setLiteralValue(mod.value);
+            }
+            else if (mod.type === "replaceText") {
+                mod.node.replaceWithText(mod.text);
+            }
+            else if (mod.type === "addProperty") {
+                mod.node.addPropertyAssignment({
+                    name: mod.name,
+                    initializer: mod.initializer,
+                });
             }
         }
-        else {
-            // Add new import declaration
-            sourceFile.addImportDeclaration({
-                moduleSpecifier: "rwsdk/worker",
-                namedImports: ["requestInfo"],
+        const wrapModifications = [];
+        for (const [callExpr, wrapInfo] of entryPointsPerCallExpr) {
+            const fullStart = callExpr.getFullStart();
+            const end = callExpr.getEnd();
+            const callExprText = callExpr.getText();
+            const fullText = callExpr.getFullText();
+            const leadingWhitespace = fullText.substring(0, fullText.length - callExprText.length);
+            let pureCommentText;
+            let leadingTriviaText;
+            if (wrapInfo.pureCommentText) {
+                pureCommentText = wrapInfo.pureCommentText;
+                leadingTriviaText = leadingWhitespace;
+            }
+            wrapModifications.push({
+                type: "wrapCallExpr",
+                sideEffects: wrapInfo.sideEffects,
+                pureCommentText: pureCommentText,
+                leadingTriviaText: leadingTriviaText,
+                fullStart: fullStart,
+                end: end,
+                callExprText: callExprText,
+                leadingWhitespace: leadingWhitespace,
             });
         }
-    }
-    // Return the transformed code only if modifications were made
-    if (hasModifications) {
+        wrapModifications.sort((a, b) => b.fullStart - a.fullStart);
+        for (const mod of wrapModifications) {
+            if (mod.pureCommentText && mod.leadingTriviaText) {
+                const newText = `(
+${mod.sideEffects},
+${mod.pureCommentText} ${mod.callExprText}
+)`;
+                const newLeadingTriviaText = mod.leadingTriviaText.replace(mod.pureCommentText, "");
+                sourceFile.replaceText([mod.fullStart, mod.end], newLeadingTriviaText + newText);
+            }
+            else {
+                const leadingNewlines = mod.leadingWhitespace.match(/\n\s*/)?.[0] || "";
+                sourceFile.replaceText([mod.fullStart, mod.end], `${leadingNewlines}(
+${mod.sideEffects},
+${mod.callExprText}
+)`);
+            }
+        }
+        if (needsRequestInfoImportRef.value) {
+            if (sdkWorkerImportDecl) {
+                if (!hasRequestInfoImport) {
+                    sdkWorkerImportDecl.addNamedImport("requestInfo");
+                }
+            }
+            else {
+                sourceFile.addImportDeclaration({
+                    moduleSpecifier: "rwsdk/worker",
+                    namedImports: ["requestInfo"],
+                });
+            }
+        }
         return {
             code: sourceFile.getFullText(),
             map: null,
@@ -338,6 +351,8 @@ export const transformJsxScriptTagsPlugin = ({ manifestPath, }) => {
                 id.endsWith(".tsx") &&
                 !id.includes("node_modules") &&
                 hasJsxFunctions(code)) {
+                log("Transforming JSX script tags in %s", id);
+                process.env.VERBOSE && log("Code:\n%s", code);
                 const manifest = isBuild ? await readManifest(manifestPath) : {};
                 const result = await transformJsxScriptTagsCode(code, manifest);
                 if (result) {