vite-plugin-tannijs 0.1.0

package/README.md

@@ -0,0 +1 @@
+#  @tannijs/vite-plugin

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "vite-plugin-tannijs",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Vite plugin for compiling .tanni single-file components",
+  "license": "MIT",
+  "author": "Sebastijan Zindl",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "tannijs-compiler": "0.1.0"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  }
+}

package/src/index.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+
+import { tanniPlugin } from './index';
+
+describe('tanniPlugin', () => {
+  it('transforms .tanni files through compiler', async () => {
+    const plugin = tanniPlugin({ runtimeModule: 'tanni-runtime' });
+    const transformHook =
+      typeof plugin.transform === 'function' ? plugin.transform : plugin.transform?.handler;
+    expect(transformHook).toBeTypeOf('function');
+    const source = `
+<script setup lang="ts">
+const value = () => 'ok';
+</script>
+<template>
+  <p>{{ value() }}</p>
+</template>
+`;
+
+    const output = await transformHook?.call(
+      {} as never,
+      source,
+      '/demo/components/HelloWorld.tanni'
+    );
+
+    expect(output).toBeTruthy();
+    const result = output as { code: string };
+    expect(result.code).toContain("import { createEffect, delegateEvents } from 'tanni-runtime';");
+    expect(result.code).toContain('function HelloWorld(__props = {})');
+    expect(result.code).toContain('document.createTextNode');
+  });
+
+  it('ignores non-tanni files', async () => {
+    const plugin = tanniPlugin();
+    const transformHook =
+      typeof plugin.transform === 'function' ? plugin.transform : plugin.transform?.handler;
+    expect(transformHook).toBeTypeOf('function');
+    const output = await transformHook?.call(
+      {} as never,
+      'export const a = 1;',
+      '/demo/a.ts'
+    );
+    expect(output).toBeNull();
+  });
+});

package/src/index.ts

@@ -0,0 +1,75 @@
+import path from 'node:path';
+import type { Plugin } from 'vite';
+
+import { compileSfc } from 'tannijs-compiler';
+
+export interface TanniPluginOptions {
+  runtimeModule?: string;
+}
+
+const TANNI_EXTENSION = '.tanni';
+const VIRTUAL_CSS_SUFFIX = '.tanni.css';
+const VIRTUAL_CSS_PREFIX = '\0';
+const DEFAULT_RUNTIME_MODULE = 'tannijs/internals';
+
+export function tanniPlugin(options: TanniPluginOptions = {}): Plugin {
+  const cssCache = new Map<string, string>();
+
+  return {
+    name: 'tanni-plugin',
+    enforce: 'pre',
+
+    resolveId(source) {
+      if (source.endsWith(VIRTUAL_CSS_SUFFIX)) {
+        return VIRTUAL_CSS_PREFIX + source;
+      }
+      return null;
+    },
+
+    load(id) {
+      if (id.startsWith(VIRTUAL_CSS_PREFIX) && id.endsWith(VIRTUAL_CSS_SUFFIX)) {
+        const realId = id.slice(VIRTUAL_CSS_PREFIX.length);
+        return cssCache.get(realId) ?? '';
+      }
+      return null;
+    },
+
+    transform(source, id) {
+      if (!id.endsWith(TANNI_EXTENSION)) {
+        return null;
+      }
+
+      const runtimeModule = options.runtimeModule ?? DEFAULT_RUNTIME_MODULE;
+      const result = compileSfc(source, {
+        id,
+        componentName: inferComponentName(id),
+        runtimeModule,
+      });
+
+      let code = result.code;
+
+      if (result.css.length > 0) {
+        const virtualCssId = id + '.css';
+        cssCache.set(virtualCssId, result.css);
+        code = `import ${JSON.stringify(virtualCssId)};\n${code}`;
+      }
+
+      return {
+        code,
+        map: null,
+      };
+    },
+  };
+}
+
+function inferComponentName(filePath: string): string {
+  const fileName = path.basename(filePath, TANNI_EXTENSION);
+  const sanitized = fileName.replace(/[^A-Za-z0-9_$]/g, '_');
+  if (sanitized.length === 0) {
+    return 'Component';
+  }
+  if (/^[0-9]/.test(sanitized)) {
+    return `Component_${sanitized}`;
+  }
+  return sanitized;
+}