vite-plugin-vue-forward-slots 0.1.0

package/README.md

@@ -0,0 +1,78 @@
+# vite-plugin-vue-forward-slots
+
+A tiny Vite plugin that transforms `<ForwardSlots />` into native Vue slot-forwarding template syntax.
+
+## Why this exists
+
+There are many `ForwardSlots` component implementations, but in real projects we kept hitting reactivity and edge-case issues that were hard to fully solve in a runtime component.
+
+This plugin avoids that class of problems by compiling `ForwardSlots` usage directly into native Vue template syntax at build time.
+
+## Install
+
+```bash
+bun install vite-plugin-vue-forward-slots
+```
+
+## Usage
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import forwardSlotsPlugin from 'vite-plugin-vue-forward-slots'
+
+export default defineConfig({
+  plugins: [forwardSlotsPlugin(), vue()],
+})
+```
+
+## Supported syntax
+
+Both forms are supported:
+
+```vue
+<ForwardSlots />
+<forward-slots></forward-slots>
+```
+
+You can also forward from a custom slots object:
+
+```vue
+<ForwardSlots :slots="resolvedSlots" />
+```
+
+## Transform example
+
+Input:
+
+```vue
+<template>
+  <ForwardSlots :slots="resolvedSlots" />
+</template>
+```
+
+Output:
+
+```vue
+<template>
+  <template v-for="(slot,_idx) in Object.keys(resolvedSlots)" :key="_idx" v-slot:[slot]="slotProps">
+	<slot :name="slot" v-bind="slotProps"></slot>
+  </template>
+</template>
+```
+
+## Development
+
+```bash
+bun install
+bun test
+bun run build
+```
+
+## Publish checklist
+
+```bash
+bun test
+bun run build
+```

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        ForwardSlots: DefineComponent<{
+            slots: Record<string, unknown>;
+        }>;
+    }
+}
+export default function forwardSlotsPlugin(): {
+    name: string;
+    enforce: string;
+    transform(code: string, id: string): string | undefined;
+};

package/dist/index.js

@@ -0,0 +1,31 @@
+import { parse as parseSFC } from '@vue/compiler-sfc';
+const FORWARD_SLOTS_TAG_RE = /<\s*forward-?slots\b([^>]*)\s*(?:\/>|>\s*<\/\s*forward-?slots\s*>)/gi;
+function getSlotsExpression(attributes) {
+    const match = attributes.match(/(?:^|\s):slots\s*=\s*(?:"([^"]+)"|'([^']+)')/);
+    return match?.[1] || match?.[2] || '$slots';
+}
+export default function forwardSlotsPlugin() {
+    return {
+        name: 'vite-plugin-vue-forward-slots',
+        enforce: 'pre',
+        transform(code, id) {
+            if (!id.endsWith('.vue'))
+                return;
+            const { descriptor } = parseSFC(code);
+            if (!descriptor.template)
+                return;
+            const template = descriptor.template.content;
+            const replaced = template.replace(FORWARD_SLOTS_TAG_RE, (_, attributes) => {
+                const expr = getSlotsExpression(attributes || '');
+                return `
+<template v-for="(slot,_idx) in Object.keys(${expr})" :key="_idx" v-slot:[slot]="slotProps">
+  <slot :name="slot" v-bind="slotProps"></slot>
+</template>
+`;
+            });
+            if (replaced === template)
+                return;
+            return code.replace(template, replaced);
+        },
+    };
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "vite-plugin-vue-forward-slots",
+  "author": "Genesis Studio LLC <studio@gnz.is> (https://studio.gnz.is)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/021-projects/vite-plugin-vue-forward-slots.git"
+  },
+  "version": "0.1.0",
+  "description": "Vite plugin that compiles <ForwardSlots> into native Vue slot forwarding syntax.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build && bun run test"
+  },
+  "devDependencies": {
+    "@vue/compiler-dom": "^3.5.31",
+    "@vue/compiler-sfc": "^3.5.31",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "vite": "^5 || ^6 || ^7",
+    "vue": "^3.3.0"
+  },
+  "funding": [
+    {
+      "type": "individual",
+      "url": "https://btcpay.gnz.is/apps/2iTijXXYdXMZstbGV8RtdXceWDEc/crowdfund"
+    }
+  ]
+}