rwsdk 0.1.16 → 0.1.17

package/dist/vite/transformClientComponents.test.mjs

@@ -0,0 +1,264 @@
+import { describe, it, expect } from "vitest";
+import { transformClientComponents } from "./transformClientComponents.mjs";
+describe("transformClientComponents", () => {
+    async function transform(code) {
+        const result = await transformClientComponents(code, "/test/file.tsx", {
+            environmentName: "worker",
+        });
+        return result?.code;
+    }
+    it("transforms arrow function component", async () => {
+        expect((await transform(`"use client"
+
+export const Component = () => {
+  return jsx('div', { children: 'Hello' });
+}
+`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+const Component = registerClientReference("/test/file.tsx", "Component");
+export { Component };
+`);
+    });
+    it("transforms async arrow function component", async () => {
+        expect((await transform(`"use client"
+
+export const Component = async () => {
+  return jsx('div', { children: 'Hello' });
+}
+  `)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+const Component = registerClientReference("/test/file.tsx", "Component");
+export { Component };
+`);
+    });
+    it("transforms function declaration component", async () => {
+        expect((await transform(`"use client"
+
+export function Component() {
+  return jsx('div', { children: 'Hello' });
+}`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+const Component = registerClientReference("/test/file.tsx", "Component");
+export { Component };
+`);
+    });
+    it("transforms default export arrow function component", async () => {
+        expect((await transform(`"use client"
+
+export default () => {
+  return jsx('div', { children: 'Hello' });
+}`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+export default registerClientReference("/test/file.tsx", "default");
+`);
+    });
+    it("transforms default export function declaration component", async () => {
+        expect((await transform(`"use client"
+
+export default function Component({ prop1, prop2 }) {
+  return jsx('div', { children: 'Hello' });
+}`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+export default registerClientReference("/test/file.tsx", "default");
+`);
+    });
+    it("transforms mixed export styles (inline, grouped, and default)", async () => {
+        expect((await transform(`"use client"
+
+export const First = () => {
+  return jsx('div', { children: 'First' });
+}
+
+const Second = () => {
+  return jsx('div', { children: 'Second' });
+}
+
+function Third() {
+  return jsx('div', { children: 'Third' });
+}
+
+const Fourth = () => {
+  return jsx('div', { children: 'Fourth' });
+}
+
+export default function Main() {
+  return jsx('div', { children: 'Main' });
+}
+
+export { Second, Third }
+export { Fourth as AnotherName }`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+const First = registerClientReference("/test/file.tsx", "First");
+const Second = registerClientReference("/test/file.tsx", "Second");
+const Third = registerClientReference("/test/file.tsx", "Third");
+const Fourth_AnotherName = registerClientReference("/test/file.tsx", "AnotherName");
+export { First, Second, Third, Fourth_AnotherName as AnotherName };
+export default registerClientReference("/test/file.tsx", "default");
+`);
+    });
+    it("transforms function declaration that is exported default separately", async () => {
+        expect((await transform(`
+"use client"
+
+function Component({ prop1, prop2 }) {
+  return jsx('div', { children: 'Hello' });
+}
+
+export default Component;`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+export default registerClientReference("/test/file.tsx", "default");
+`);
+    });
+    it("Works in dev", async () => {
+        expect((await transform(`"use client"
+import { jsxDEV } from "react/jsx-dev-runtime";
+import { sendMessage } from "./functions";
+import { useState } from "react";
+import { consumeEventStream } from "rwsdk/client";
+
+export function Chat() {
+  const [message, setMessage] = useState("");
+  const [reply, setReply] = useState("");
+  const onClick = async () => {
+    setReply("");
+    (await sendMessage(message)).pipeTo(
+      consumeEventStream({
+        onChunk: (event) => {
+          setReply(
+            (prev) => prev + (event.data === "[DONE]" ? "" : JSON.parse(event.data).response)
+          );
+        }
+      })
+    );
+  };
+  return /* @__PURE__ */ jsxDEV("div", { children: [
+    /* @__PURE__ */ jsxDEV(
+      "input",
+      {
+        type: "text",
+        value: message,
+        placeholder: "Type a message...",
+        onChange: (e) => setMessage(e.target.value),
+        style: {
+          width: "80%",
+          padding: "10px",
+          marginRight: "8px",
+          borderRadius: "4px",
+          border: "1px solid #ccc"
+        }
+      },
+      void 0,
+      false,
+      {
+        fileName: "/Users/justin/rw/sdk/experiments/ai-stream/src/app/pages/Chat/Chat.tsx",
+        lineNumber: 28,
+        columnNumber: 7
+      },
+      this
+    ),
+    /* @__PURE__ */ jsxDEV(
+      "button",
+      {
+        onClick,
+        style: {
+          padding: "10px 20px",
+          borderRadius: "4px",
+          border: "none",
+          backgroundColor: "#007bff",
+          color: "white",
+          cursor: "pointer"
+        },
+        children: "Send"
+      },
+      void 0,
+      false,
+      {
+        fileName: "/Users/justin/rw/sdk/experiments/ai-stream/src/app/pages/Chat/Chat.tsx",
+        lineNumber: 41,
+        columnNumber: 7
+      },
+      this
+    ),
+    /* @__PURE__ */ jsxDEV("div", { children: reply }, void 0, false, {
+      fileName: "/Users/justin/rw/sdk/experiments/ai-stream/src/app/pages/Chat/Chat.tsx",
+      lineNumber: 54,
+      columnNumber: 7
+    }, this)
+  ] }, void 0, true, {
+    fileName: "/Users/justin/rw/sdk/experiments/ai-stream/src/app/pages/Chat/Chat.tsx",
+    lineNumber: 27,
+    columnNumber: 5
+  }, this);
+}
+`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+const Chat = registerClientReference("/test/file.tsx", "Chat");
+export { Chat };
+`);
+    });
+    it("Does not transform when 'use client' is not directive", async () => {
+        expect(await transform(`const message = "use client";`)).toEqual(undefined);
+    });
+    it("properly handles export alias", async () => {
+        expect((await transform(`"use client"
+
+const MyComponent = () => {
+  return jsx('div', { children: 'Hello' });
+}
+
+export { MyComponent as CustomName }`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+const MyComponent_CustomName = registerClientReference("/test/file.tsx", "CustomName");
+export { MyComponent_CustomName as CustomName };
+`);
+    });
+    it("correctly processes multiple component exports", async () => {
+        expect((await transform(`"use client"
+
+const First = () => jsx('div', { children: 'First' });
+const Second = () => jsx('div', { children: 'Second' });
+const Third = () => jsx('div', { children: 'Third' });
+
+export { First, Second, Third }`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+const First = registerClientReference("/test/file.tsx", "First");
+const Second = registerClientReference("/test/file.tsx", "Second");
+const Third = registerClientReference("/test/file.tsx", "Third");
+export { First, Second, Third };
+`);
+    });
+    it("handles combination of JSX and non-JSX exports", async () => {
+        expect((await transform(`"use client"
+
+const Component = () => jsx('div', {});
+const data = { value: 42 };
+const helper = () => console.log('helper');
+
+export { Component, data, helper }`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+const Component = registerClientReference("/test/file.tsx", "Component");
+const data = registerClientReference("/test/file.tsx", "data");
+const helper = registerClientReference("/test/file.tsx", "helper");
+export { Component, data, helper };
+`);
+    });
+    it("transforms multiple exports aliases for the same component", async () => {
+        expect((await transform(`"use client"
+
+export const Slot = () => {
+  return jsx('div', { children: 'Slot' });
+}
+
+export { Slot, Slot as Root }
+`)) ?? "").toEqual(`import { registerClientReference } from "rwsdk/worker";
+const Slot = registerClientReference("/test/file.tsx", "Slot");
+const Slot_Root = registerClientReference("/test/file.tsx", "Root");
+export { Slot, Slot_Root as Root };
+`);
+    });
+});
+describe("transformClientComponents logic branches (from transformClientComponents.mts)", () => {
+    it("returns code as-is if file does not start with 'use client'", async () => {
+        const code = "const foo = 1;";
+        const result = await transformClientComponents(code, "/test/file.tsx", {
+            environmentName: "worker",
+        });
+        expect(result).toBeUndefined();
+    });
+    it("removes directive but does not transform if not a virtual SSR file", async () => {
+        const code = '"use client"\nexport const foo = 1;';
+        const result = await transformClientComponents(code, "/test/file.tsx", {
+            environmentName: "ssr",
+        });
+        expect(result?.code).toEqual("export const foo = 1;");
+    });
+});

package/dist/vite/transformJsxScriptTagsPlugin.d.mts

@@ -0,0 +1,8 @@
+import { type Plugin } from "vite";
+export declare function transformJsxScriptTagsCode(code: string, manifest?: Record<string, any>): Promise<{
+    code: string;
+    map: null;
+} | undefined>;
+export declare const transformJsxScriptTagsPlugin: ({ manifestPath, }: {
+    manifestPath: string;
+}) => Plugin;

package/dist/vite/transformJsxScriptTagsPlugin.mjs

@@ -0,0 +1,315 @@
+import { Project, Node, SyntaxKind } from "ts-morph";
+import { readFile } from "node:fs/promises";
+import { pathExists } from "fs-extra";
+let manifestCache;
+const readManifest = async (manifestPath) => {
+    if (manifestCache === undefined) {
+        const exists = await pathExists(manifestPath);
+        if (!exists) {
+            throw new Error(`RedwoodSDK expected client manifest to exist at ${manifestPath}. This is likely a bug. Please report it at https://github.com/redwoodjs/sdk/issues/new`);
+        }
+        manifestCache = JSON.parse(await readFile(manifestPath, "utf-8"));
+    }
+    return manifestCache;
+};
+function hasJsxFunctions(text) {
+    return (text.includes('jsx("script"') ||
+        text.includes("jsx('script'") ||
+        text.includes('jsx("link"') ||
+        text.includes("jsx('link'") ||
+        text.includes('jsxs("script"') ||
+        text.includes("jsxs('script'") ||
+        text.includes('jsxs("link"') ||
+        text.includes("jsxs('link'") ||
+        text.includes('jsxDEV("script"') ||
+        text.includes("jsxDEV('script'") ||
+        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;
+        // 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) {
+                const args = callExpr.getArguments();
+                if (args.length > 0 && Node.isStringLiteral(args[0])) {
+                    const importPath = args[0].getLiteralValue();
+                    if (importPath.startsWith("/")) {
+                        const path = importPath.slice(1); // Remove leading slash
+                        if (manifest[path]) {
+                            const transformedPath = manifest[path].file;
+                            args[0].replaceWithText(`"/${transformedPath}"`);
+                            hasChanges = true;
+                        }
+                    }
+                }
+            }
+        });
+        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 };
+        }
+        // Return the original content when no changes are made
+        return { content: scriptContent, hasChanges: false };
+    }
+    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 };
+    }
+}
+export async function transformJsxScriptTagsCode(code, manifest = {}) {
+    // context(justinvdm, 15 Jun 2025): Optimization to exit early
+    // to avoidunnecessary ts-morph parsing
+    if (!hasJsxFunctions(code)) {
+        return;
+    }
+    const project = new Project({ useInMemoryFileSystem: true });
+    const sourceFile = project.createSourceFile("temp.tsx", code);
+    let hasModifications = false;
+    let needsRequestInfoImport = false;
+    // Check for existing imports up front
+    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")) {
+                hasRequestInfoImport = true;
+            }
+        }
+    });
+    // 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();
+        // 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("/") && manifest[srcValue.slice(1)]) {
+                                    const path = srcValue.slice(1); // Remove leading slash
+                                    const transformedSrc = manifest[path].file;
+                                    const originalText = initializer.getText();
+                                    const isTemplateLiteral = Node.isNoSubstitutionTemplateLiteral(initializer);
+                                    const quote = isTemplateLiteral
+                                        ? "`"
+                                        : originalText.charAt(0);
+                                    // Preserve the original quote style
+                                    if (isTemplateLiteral) {
+                                        initializer.replaceWithText(`\`/${transformedSrc}\``);
+                                    }
+                                    else if (quote === '"') {
+                                        initializer.replaceWithText(`"/${transformedSrc}"`);
+                                    }
+                                    else {
+                                        initializer.replaceWithText(`'/${transformedSrc}'`);
+                                    }
+                                    hasModifications = true;
+                                }
+                            }
+                        }
+                        // 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 } = transformScriptImports(scriptContent, manifest);
+                            if (hasChanges && 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;
+                            }
+                        }
+                        // For link tags, first check if it's a preload/modulepreload
+                        if (tagName === "link") {
+                            if (propName === "rel" &&
+                                (Node.isStringLiteral(initializer) ||
+                                    Node.isNoSubstitutionTemplateLiteral(initializer))) {
+                                const relValue = initializer.getLiteralValue();
+                                if (relValue === "preload" || relValue === "modulepreload") {
+                                    isPreload = true;
+                                }
+                            }
+                            if (propName === "href" &&
+                                (Node.isStringLiteral(initializer) ||
+                                    Node.isNoSubstitutionTemplateLiteral(initializer))) {
+                                hrefValue = initializer.getLiteralValue();
+                            }
+                        }
+                    }
+                }
+                // Add nonce to script tags if needed
+                if (tagName === "script" &&
+                    !hasNonce &&
+                    !hasDangerouslySetInnerHTML &&
+                    (hasStringLiteralChildren || hasSrc)) {
+                    // Add nonce property to the props object
+                    propsArg.addPropertyAssignment({
+                        name: "nonce",
+                        initializer: "requestInfo.rw.nonce",
+                    });
+                    if (!hasRequestInfoImport) {
+                        needsRequestInfoImport = 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
+                    for (const prop of properties) {
+                        if (Node.isPropertyAssignment(prop) &&
+                            prop.getName() === "href") {
+                            const initializer = prop.getInitializer();
+                            if (Node.isStringLiteral(initializer) ||
+                                Node.isNoSubstitutionTemplateLiteral(initializer)) {
+                                const transformedHref = manifest[path].file;
+                                const originalText = initializer.getText();
+                                const isTemplateLiteral = Node.isNoSubstitutionTemplateLiteral(initializer);
+                                const quote = isTemplateLiteral
+                                    ? "`"
+                                    : originalText.charAt(0);
+                                // Preserve the original quote style
+                                if (isTemplateLiteral) {
+                                    initializer.replaceWithText(`\`/${transformedHref}\``);
+                                }
+                                else if (quote === '"') {
+                                    initializer.replaceWithText(`"/${transformedHref}"`);
+                                }
+                                else {
+                                    initializer.replaceWithText(`'/${transformedHref}'`);
+                                }
+                                hasModifications = true;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    });
+    // Add requestInfo import if needed and not already imported
+    if (needsRequestInfoImport && hasModifications) {
+        if (sdkWorkerImportDecl) {
+            // Module is imported but need to add requestInfo
+            if (!hasRequestInfoImport) {
+                sdkWorkerImportDecl.addNamedImport("requestInfo");
+            }
+        }
+        else {
+            // Add new import declaration
+            sourceFile.addImportDeclaration({
+                moduleSpecifier: "rwsdk/worker",
+                namedImports: ["requestInfo"],
+            });
+        }
+    }
+    // Return the transformed code only if modifications were made
+    if (hasModifications) {
+        return {
+            code: sourceFile.getFullText(),
+            map: null,
+        };
+    }
+    return;
+}
+export const transformJsxScriptTagsPlugin = ({ manifestPath, }) => {
+    let isBuild = false;
+    return {
+        name: "rwsdk:transform-jsx-script-tags",
+        configResolved(config) {
+            isBuild = config.command === "build";
+        },
+        async transform(code) {
+            if (this.environment.name !== "worker") {
+                return;
+            }
+            const manifest = isBuild ? await readManifest(manifestPath) : {};
+            return transformJsxScriptTagsCode(code, manifest);
+        },
+    };
+};

package/dist/vite/transformJsxScriptTagsPlugin.test.d.mts

@@ -0,0 +1 @@
+export {};