feat: use vue-sfc-transformer/mkdist as vue transformer

Author: zsilbi

src/builders/transformers/index.ts

@@ -2,16 +2,18 @@ import { consola } from "consola";
 import { oxcTransformer, type OxcTransformerOptions } from "./oxc.ts";
 import type { BuildContext } from "../../types.ts";
 import type { ResolveOptions } from "exsolve";
+import { vueTransformer } from "./vue.ts";
 
 type MaybePromise<T> = T | Promise<T>;
 
 const transformers: Record<TransformerName, Transformer> = {
   oxc: oxcTransformer,
+  vue: vueTransformer,
 };
 
-const defaultTransformers: Transformer[] = [oxcTransformer];
+const defaultTransformers: Transformer[] = [oxcTransformer, vueTransformer];
 
-export type TransformerName = "oxc" | (string & {});
+export type TransformerName = "oxc" | "vue" | (string & {});
 
 export interface TransformerOptions extends OxcTransformerOptions {
   build: BuildContext;
@@ -24,6 +26,12 @@ export interface CreateTransformerOptions extends TransformerOptions {
 
 export interface TransformerContext {
   transformFile: TransformFile;
+  /**
+   * For compatibility with `mkdist` loaders
+   *
+   * @deprecated Use `transformFile()` instead
+   */
+  loadFile: TransformFile;
   options: TransformerOptions;
 }
 
@@ -88,6 +96,7 @@ export function resolveTransformers(
 
 export function createTransformer(options: CreateTransformerOptions): {
   transformFile: TransformFile;
+  loadFile: TransformFile;
 } {
   const transformers = resolveTransformers([
     // Provided transformers have higher priority
@@ -100,6 +109,7 @@ export function createTransformer(options: CreateTransformerOptions): {
   ): Promise<OutputFile[]> {
     const context: TransformerContext = {
       transformFile,
+      loadFile: transformFile,
       options,
     };
 
@@ -122,5 +132,6 @@ export function createTransformer(options: CreateTransformerOptions): {
 
   return {
     transformFile,
+    loadFile: transformFile,
   };
 }

src/builders/transformers/vue.ts

@@ -0,0 +1,23 @@
+import consola from "consola";
+import type { InputFile, Transformer, TransformerContext } from "./index.ts";
+
+let cachedVueTransformer: Transformer | undefined;
+
+export const vueTransformer: Transformer = async (
+  file: InputFile,
+  ctx: TransformerContext,
+) => {
+  if (!cachedVueTransformer) {
+    cachedVueTransformer = await import("vue-sfc-transformer/mkdist").then(
+      (r) => r.vueLoader,
+      (error) => {
+        consola.error(
+          `Failed to transform "${file.path}" because vue-sfc-transformer is not installed.`,
+        );
+
+        throw error;
+      },
+    );
+  }
+  return cachedVueTransformer!(file, ctx);
+};

test/fixture/src/vue/TestComponent.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :data-test="toValue('hello')" />
+</template>
+
+<script>
+export default { name: "App" };
+</script>
+
+<script setup lang="ts">
+import { toValue, ref, type Ref } from "vue";
+defineProps<{ msg: string }>();
+const msg: Ref<number> = ref(1);
+</script>
+
+<style scoped>
+#main {
+  .foo {
+    color: --var-red;
+  }
+}
+</style>

test/obuild.test.ts

@@ -27,6 +27,11 @@ describe("obuild", () => {
           },
         },
         "src/utils.ts",
+        {
+          type: "transform",
+          input: "src/vue",
+          outDir: "dist/vue",
+        },
       ],
     });
   });
@@ -42,24 +47,28 @@ describe("obuild", () => {
         "index.d.mts",
         "index.mjs",
         "runtime",
+        "runtime/components",
+        "runtime/components/jsx-component.jsx",
+        "runtime/components/jsx-component.jsx.map",
+        "runtime/components/tsx-component.d.mts",
+        "runtime/components/tsx-component.jsx",
+        "runtime/components/tsx-component.jsx.map",
         "runtime/index.d.mts",
         "runtime/index.mjs",
         "runtime/index.mjs.map",
-        "runtime/js-module.mjs",
-        "runtime/js-module.mjs.map",
-        "runtime/jsx-component.jsx",
-        "runtime/jsx-component.jsx.map",
+        "runtime/modules",
+        "runtime/modules/js-module.mjs",
+        "runtime/modules/js-module.mjs.map",
+        "runtime/modules/ts-module.d.mts",
+        "runtime/modules/ts-module.mjs",
+        "runtime/modules/ts-module.mjs.map",
         "runtime/test.d.mts",
         "runtime/test.mjs",
         "runtime/test.mjs.map",
-        "runtime/ts-module.d.mts",
-        "runtime/ts-module.mjs",
-        "runtime/ts-module.mjs.map",
-        "runtime/tsx-component.d.mts",
-        "runtime/tsx-component.jsx",
-        "runtime/tsx-component.jsx.map",
         "utils.d.mts",
         "utils.mjs",
+        "vue",
+        "vue/TestComponent.vue",
       ]
     `);
   });