wip

Author: aarondfrancis

packages/vue/injectors/ast-utils.js

@@ -5,22 +5,23 @@ import babel from "recast/parsers/babel.js";
 const {namedTypes: n, builders: b} = recast.types;
 
 /**
- * Selects the appropriate parser based on file extension
- * @param {string} fileName - Name of the file being processed
+ * Selects the appropriate parser based on typescript flag
+ * @param {boolean} useTypeScript - Whether to use the TypeScript parser
  * @returns {object} The parser to use
  */
-export function selectParser(fileName) {
-  return fileName.endsWith(".ts") || fileName.endsWith(".tsx") ? ts : babel;
+export function selectParser(useTypeScript) {
+  return useTypeScript ? ts : babel;
 }
 
 /**
  * Parse source code into an AST
  * @param {string} sourceCode - Source code to parse
- * @param {string} fileName - File name (used for parser selection and source mapping)
+ * @param {string} fileName - File name (used for source mapping)
+ * @param {boolean} useTypeScript - Whether to use the TypeScript parser
  * @returns {object} The resulting AST
  */
-export function parseCode(sourceCode, fileName = "") {
-  const parser = selectParser(fileName);
+export function parseCode(sourceCode, fileName = "", useTypeScript = false) {
+  const parser = selectParser(useTypeScript);
   return recast.parse(sourceCode, {
     parser,
     sourceFileName: fileName
@@ -30,9 +31,10 @@ export function parseCode(sourceCode, fileName = "") {
 /**
  * Handles useFusion import in AST
  * @param {object} ast - The AST to modify
+ * @param {string} fusionPath - The path to use for the fusion import
  * @returns {object} Object containing information about useFusion imports
  */
-export function handleFusionImport(ast) {
+export function handleFusionImport(ast, fusionPath) {
   let fusionLocalName = null;
   let hasUseFusionImport = false;
 
@@ -54,7 +56,7 @@ export function handleFusionImport(ast) {
           }
         });
         // Update the import source.
-        path.node.source.value = "__aliasedFusionPath__";
+        path.node.source.value = fusionPath;
         hasUseFusionImport = true;
       }
       this.traverse(path);
@@ -68,13 +70,14 @@ export function handleFusionImport(ast) {
  * Adds a useFusion import if one doesn't exist
  * @param {object} ast - The AST to modify
  * @param {boolean} hasUseFusionImport - Whether a useFusion import already exists
+ * @param {string} fusionPath - The path to use for the fusion import
  * @returns {string} The local name for useFusion (default is "useFusion")
  */
-export function ensureFusionImport(ast, hasUseFusionImport) {
+export function ensureFusionImport(ast, hasUseFusionImport, fusionPath) {
   if (!hasUseFusionImport) {
     const fusionImport = b.importDeclaration(
       [b.importSpecifier(b.identifier("useFusion"))],
-      b.literal("__aliasedFusionPath__")
+      b.literal(fusionPath)
     );
 
     // Find the best position to insert the import (after other imports)

packages/vue/injectors/createScriptSetupAst.js

@@ -3,14 +3,15 @@ import recast from "recast";
 
 const {builders: b} = recast.types;
 
-export default function injector(code, fileName, keys) {
-  // Build an AST for a new program (the script setup content)
+export default function injector(code, fileName, keys, fusionPath = "__aliasedFusionPath__", useTypeScript = false) {
+  // The useTypeScript parameter is not used directly here as this injector
+  // creates a new script block rather than parsing existing code
   const program = b.program([]);
 
-  // 1. import { useFusion } from "__aliasedFusionPath__";
+  // 1. import { useFusion } from fusion path
   const importUseFusion = b.importDeclaration(
     [b.importSpecifier(b.identifier("useFusion"), b.identifier("useFusion"))],
-    b.literal("__aliasedFusionPath__")
+    b.literal(fusionPath)
   );
 
   // 2. import useHotFusion from "@fusion/vue/hmr";

packages/vue/injectors/index.js

@@ -3,9 +3,19 @@ import optionsWithoutSetup from './optionsWithoutSetup.js'
 import createScriptSetup from './createScriptSetup.js'
 import modifyScriptSetup from './modifyScriptSetup.js'
 
+import optionsWithSetupAst from './optionsWithSetupAst.js'
+import optionsWithoutSetupAst from './optionsWithoutSetupAst.js'
+import createScriptSetupAst from './createScriptSetupAst.js'
+import modifyScriptSetupAst from './modifyScriptSetupAst.js'
+
 export default {
   optionsWithSetup,
   optionsWithoutSetup,
   createScriptSetup,
   modifyScriptSetup,
+
+  optionsWithSetupAst,
+  optionsWithoutSetupAst,
+  createScriptSetupAst,
+  modifyScriptSetupAst,
 }

packages/vue/injectors/modifyScriptSetupAst.js

@@ -10,12 +10,12 @@ import recast from "recast";
 
 const {builders: b} = recast.types;
 
-export function transformCode(sourceCode, fileName = "", keys = []) {
-  // Parse the source code into an AST
-  const ast = parseCode(sourceCode, fileName);
+export function transformCode(sourceCode, fileName = "", keys = [], fusionPath = "__aliasedFusionPath__", useTypeScript = false) {
+  // Parse the source code into an AST using explicit TypeScript flag
+  const ast = parseCode(sourceCode, fileName, useTypeScript);
 
   // Handle imports and get fusion local name
-  const {fusionLocalName: localName, hasUseFusionImport} = handleFusionImport(ast);
+  const {fusionLocalName: localName, hasUseFusionImport} = handleFusionImport(ast, fusionPath);
   const fusionLocalName = localName || (hasUseFusionImport ? localName : "useFusion");
 
   // Collect keys from existing useFusion calls and update them to include __props.fusion
@@ -34,7 +34,7 @@ export function transformCode(sourceCode, fileName = "", keys = []) {
     if (missingKeys.length > 0) {
       // Ensure the import exists.
       if (!hasUseFusionImport) {
-        ensureFusionImport(ast, hasUseFusionImport);
+        ensureFusionImport(ast, hasUseFusionImport, fusionPath);
       }
 
       // Find the index after the last import.
@@ -62,7 +62,7 @@ export function transformCode(sourceCode, fileName = "", keys = []) {
     // Case 2: No useFusion call exists.
     // Ensure an import for useFusion is injected.
     if (!hasUseFusionImport) {
-      ensureFusionImport(ast, hasUseFusionImport);
+      ensureFusionImport(ast, hasUseFusionImport, fusionPath);
     }
 
     // Find the index after the last import.

packages/vue/injectors/optionsWithSetupAst.js

@@ -11,9 +11,9 @@ import recast from "recast";
 
 const {namedTypes: n, builders: b} = recast.types;
 
-export function optionsWithSetup(sourceCode, fileName = "", keys = []) {
-  // Parse the source code.
-  const ast = parseCode(sourceCode, fileName);
+export function optionsWithSetup(sourceCode, fileName = "", keys = [], fusionPath = "__aliasedFusionPath__", useTypeScript = false) {
+  // Parse the source code using explicit TypeScript flag
+  const ast = parseCode(sourceCode, fileName, useTypeScript);
 
   // ------------------------------
   // Step 1: Remove any existing useFusion imports.
@@ -137,7 +137,7 @@ export function optionsWithSetup(sourceCode, fileName = "", keys = []) {
 
   // ------------------------------
   // Step 6: Insert a new import for useFusion.
-  ensureFusionImport(ast, false);
+  ensureFusionImport(ast, false, fusionPath);
 
   // ------------------------------
   // Step 7: Append a wrapper to override the setup function.

packages/vue/injectors/optionsWithoutSetupAst.js

@@ -10,16 +10,19 @@ import recast from "recast";
 
 const {builders: b} = recast.types;
 
-export default function injector(code, fileName, keys) {
-  // Parse the source code using Babel's parser.
+export default function injector(code, fileName, keys, fusionPath = "__aliasedFusionPath__", useTypeScript = false) {
+  // Use the explicit TypeScript flag instead of inferring from filename
+  const parser = useTypeScript ? babelParser : babelParser; // Both use babelParser in this file
+
+  // Parse the source code using the appropriate parser.
   const ast = recast.parse(code, {
-    parser: babelParser,
+    parser,
     sourceFileName: fileName
   });
 
   // 1. Determine the local name for useFusion.
-  const {fusionLocalName: localName, hasUseFusionImport} = handleFusionImport(ast);
-  const fusionLocalName = localName || ensureFusionImport(ast, hasUseFusionImport) || "useFusion";
+  const {fusionLocalName: localName, hasUseFusionImport} = handleFusionImport(ast, fusionPath);
+  const fusionLocalName = localName || ensureFusionImport(ast, hasUseFusionImport, fusionPath) || "useFusion";
 
   // 2. Rewrite the default export:
   extractDefaultExport(ast);

packages/vue/tests/injectors/createScriptSetupAst.test.js

@@ -9,7 +9,7 @@ describe("injector", () => {
   test("appends a script setup block to simple code", () => {
     const code = `console.log("Hello");`;
     const keys = ["name", "email"];
-    const result = injector(code, "test.js", keys);
+    const result = injector(code, "test.js", keys, "__aliasedFusionPath__", false);
     const expected = `
 console.log("Hello");
 <script setup>
@@ -29,7 +29,7 @@ useHotFusion(__fusionData);
 <p>Test paragraph</p>
     `;
     const keys = ["user", "age"];
-    const result = injector(code, "test.js", keys);
+    const result = injector(code, "test.js", keys, "__aliasedFusionPath__", false);
     const expected = `
 <div>Hello World</div>
 <p>Test paragraph</p>
@@ -47,7 +47,7 @@ useHotFusion(__fusionData);
   test("handles empty code by injecting only the script setup block", () => {
     const code = ``;
     const keys = ["foo"];
-    const result = injector(code, "test.js", keys);
+    const result = injector(code, "test.js", keys, "__aliasedFusionPath__", false);
     const expected = `
 <script setup>
 import { useFusion } from "__aliasedFusionPath__";
@@ -67,7 +67,7 @@ let a = 10;
 /* User code end */
     `;
     const keys = ["first", "last", "email"];
-    const result = injector(code, "test.js", keys);
+    const result = injector(code, "test.js", keys, "__aliasedFusionPath__", false);
     const expected = `
 /* User code start */
 let a = 10;
@@ -78,6 +78,42 @@ import useHotFusion from "@fusion/vue/hmr";
 const __fusionData = useFusion([first, last, email], __props.fusion);
 const { first: first, last: last, email: email } = __fusionData;
 useHotFusion(__fusionData);
+</script>
+    `;
+    expect(result.code).toMatchCode(expected);
+  });
+
+  test("supports custom fusion path", () => {
+    const code = `console.log("Hello");`;
+    const keys = ["name", "email"];
+    const result = injector(code, "test.js", keys, "@custom/fusion-path", false);
+    const expected = `
+console.log("Hello");
+<script setup>
+import { useFusion } from "@custom/fusion-path";
+import useHotFusion from "@fusion/vue/hmr";
+const __fusionData = useFusion([name, email], __props.fusion);
+const { name: name, email: email } = __fusionData;
+useHotFusion(__fusionData);
+</script>
+    `;
+    expect(result.code).toMatchCode(expected);
+  });
+
+  // TypeScript flag doesn't affect this injector much since it generates new code,
+  // but including a test for completeness
+  test("accepts typescript flag without changing behavior", () => {
+    const code = `console.log("Hello");`;
+    const keys = ["name", "email"];
+    const result = injector(code, "test.js", keys, "__aliasedFusionPath__", true);
+    const expected = `
+console.log("Hello");
+<script setup>
+import { useFusion } from "__aliasedFusionPath__";
+import useHotFusion from "@fusion/vue/hmr";
+const __fusionData = useFusion([name, email], __props.fusion);
+const { name: name, email: email } = __fusionData;
+useHotFusion(__fusionData);
 </script>
     `;
     expect(result.code).toMatchCode(expected);