@ogygia/tsdown-plugin-svelte 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Puru Vijayvargia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,128 @@
-# Temporary Holding Version
+# @ogygia/tsdown-plugin-svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@ogygia/tsdown-plugin-svelte)](https://www.npmjs.com/package/@ogygia/tsdown-plugin-svelte)
+[![license](https://img.shields.io/npm/l/@ogygia/tsdown-plugin-svelte)](./LICENSE)
+
+Ship Svelte components from a [tsdown](https://tsdown.dev) build.
+
+Keep one build for your whole library. Your `.ts` goes through tsdown as usual, and your `.svelte` components ship next to it, the way `svelte-package` ships them, with no second build step.
+
+```
+src/                         dist/
+├─ index.ts           →      ├─ index.mjs + index.d.mts        (tsdown)
+├─ Button.svelte      →      ├─ Button.svelte                  (plain JS, uncompiled)
+│                            ├─ Button.svelte.d.ts             (typed props)
+└─ theme.css          →      └─ theme.css                      (copied)
+```
+
+## Why
+
+- **Components ship uncompiled.** Each `.svelte` file lands in `dist` at the same path, as source. Your users' own Svelte compiles it, so your library never pins them to the Svelte version you built with.
+- **Write TypeScript everywhere, ship plain JS.** TypeScript is removed from the `<script>` and from the template: `{item as Row}`, `{user!.name}` and `{#snippet row(item: Row)}` are all fine. What ships needs no TypeScript setup on the user's side.
+- **Typed props.** A `.svelte.d.ts` is generated beside every component, with svelte2tsx, the same engine `svelte-package` uses.
+- **Safe stripping.** Types are found with Svelte's own parser, not with patterns, so a string or comment that merely looks like a type is never touched.
+- **Styles come along.** Plain `.css` files under `src` are copied as they are.
+
+## Install
+
+```sh
+pnpm add -D @ogygia/tsdown-plugin-svelte
+```
+
+It needs `tsdown` (0.15 or newer) and `svelte` 5. For the defaults, also install:
+
+```sh
+pnpm add -D svelte2tsx typescript @sveltejs/vite-plugin-svelte
+```
+
+- `svelte2tsx` and `typescript` generate the `.svelte.d.ts` types. Skip them with `dts: false`.
+- `@sveltejs/vite-plugin-svelte` provides the default preprocessor. Skip it by passing your own `preprocess`.
+
+## Usage
+
+```ts
+// tsdown.config.ts
+import { defineConfig } from 'tsdown';
+import { svelte } from '@ogygia/tsdown-plugin-svelte';
+
+export default defineConfig({
+	entry: ['src/**/*.ts'],
+	unbundle: true,
+	dts: true,
+	plugins: [svelte()],
+	// the shipped components stay as files: never bundle them, or Svelte, into your JS
+	deps: { neverBundle: ['svelte', /\.svelte$/] }
+});
+```
+
+`unbundle: true` keeps one output file per source file, so `import Button from './Button.svelte'` in your `.ts` still points at the shipped component.
+
+Then expose the components to Svelte-aware tools with the `svelte` export condition:
+
+```jsonc
+// package.json
+{
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.mts",
+			"svelte": "./dist/index.mjs",
+			"default": "./dist/index.mjs"
+		},
+		"./Button.svelte": {
+			"types": "./dist/Button.svelte.d.ts",
+			"svelte": "./dist/Button.svelte"
+		}
+	},
+	"files": ["dist"]
+}
+```
+
+## Options
+
+```ts
+svelte({
+	root: process.cwd(),
+	src: 'src',
+	out: 'dist',
+	preprocess: vitePreprocess({ script: true }),
+	dts: true
+});
+```
+
+| Option       | Default                            | What it does                                                    |
+| ------------ | ---------------------------------- | --------------------------------------------------------------- |
+| `root`       | `process.cwd()`                    | The package root that `src` and `out` are relative to.          |
+| `src`        | `'src'`                            | Where your components and `.css` files live.                    |
+| `out`        | `'dist'`                           | Where they are written. Match tsdown's `outDir`.                |
+| `preprocess` | `vitePreprocess({ script: true })` | Svelte preprocessors for the script and styles (one or a list). |
+| `dts`        | `true`                             | Write a `.svelte.d.ts` beside each component.                   |
+
+In a monorepo, set `root` to the package's own folder when tsdown runs from somewhere else:
+
+```ts
+svelte({ root: fileURLToPath(new URL('.', import.meta.url)) });
+```
+
+## How it works
+
+1. At the start of the build, every `.svelte` under `src` is run through your preprocessors, which turns its `<script lang="ts">` into JS.
+2. Svelte's parser then reads the file once more, still as TypeScript, and every type-only span in the template is cut out: `as` and `satisfies` casts, `!` assertions, annotations and generic arguments. `lang="ts"` is removed from each script.
+3. The result is emitted as a build asset at the same path in `out`. Emitting assets, rather than writing files, means tsdown's `clean` never wipes them.
+4. After the bundle is written, svelte2tsx generates declarations into a scratch folder, and only the `*.svelte.d.ts` files are copied next to the components. tsdown keeps owning the declarations for your `.ts` files.
+
+## Using the TypeScript strip on its own
+
+`strip_markup_ts` is exported for tools that ship Svelte source another way. Run it on the output of `preprocess()`, when the script is JS but the template still has types:
+
+```ts
+import { preprocess } from 'svelte/compiler';
+import { strip_markup_ts } from '@ogygia/tsdown-plugin-svelte';
+
+const { code } = await preprocess(source, preprocessors, { filename });
+const plain_js = strip_markup_ts(code, filename);
+```
+
+## License
+
+[MIT](./LICENSE)

package/dist/index.d.mts

@@ -0,0 +1,31 @@
+import { PreprocessorGroup } from "svelte/compiler";
+//#region src/strip-ts.d.ts
+declare function strip_markup_ts(source: string, filename?: string): string;
+//#endregion
+//#region src/index.d.ts
+interface SvelteOptions {
+  /** the package root the other paths are relative to (default: the working directory) */
+  root?: string;
+  /** the source dir holding the components (default: `src`) */
+  src?: string;
+  /** the output dir, tsdown's `outDir` (default: `dist`) */
+  out?: string;
+  /** preprocessors for the script and style (default: vite-plugin-svelte's `vitePreprocess({ script: true })`) */
+  preprocess?: PreprocessorGroup | PreprocessorGroup[];
+  /** generate `.svelte.d.ts` beside each component (default: true; needs `svelte2tsx` and `typescript`) */
+  dts?: boolean;
+}
+interface EmitContext {
+  emitFile(file: {
+    type: 'asset';
+    fileName: string;
+    source: string | Uint8Array;
+  }): string;
+}
+declare function svelte(options?: SvelteOptions): {
+  name: string;
+  buildStart(this: EmitContext): Promise<void>;
+  writeBundle(): Promise<void>;
+};
+//#endregion
+export { SvelteOptions, svelte as default, svelte, strip_markup_ts };

package/dist/index.mjs

@@ -0,0 +1,166 @@
+import { cpSync, existsSync, globSync, mkdirSync, readFileSync, rmSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parse, preprocess } from "svelte/compiler";
+import MagicString from "magic-string";
+//#region src/strip-ts.ts
+/**
+* Turn a TypeScript Svelte component into a plain-JS one, for shipping raw.
+*
+* `preprocess()` transpiles the `<script>`, but never the template: a `{x as Y}`, `{a!.b}` or
+* `{#snippet row(l: Line)}` survives it, and once `lang="ts"` is gone the consumer's compiler reads
+* it as broken JS. `strip_markup_ts` takes Svelte's own parse of the file (which reads the template
+* as TS while `lang="ts"` is still on the script) and cuts every type-only span out of the
+* template's expressions: `as` / `satisfies` casts, `!` assertions, annotations, generic
+* arguments. Only type-only syntax exists in a Svelte template, so the cuts leave exactly the JS.
+* It also drops the `lang="ts"` attribute from each script, by the parse, not by pattern.
+*
+* Run it on the output of `preprocess()`: the script is JS by then and the markup still TS.
+*/
+const is_node = (v) => !!v && typeof v === "object" && typeof v.start === "number" && typeof v.end === "number";
+/** keys that hold a type, never a value: cut the whole span and do not look inside */
+const TYPE_KEYS = /* @__PURE__ */ new Set([
+	"typeAnnotation",
+	"typeArguments",
+	"typeParameters",
+	"returnType"
+]);
+/** the static text of an attribute value (`lang="ts"` → `ts`), or undefined */
+function attr_text(a) {
+	const v = a.value;
+	if (!Array.isArray(v) || v.length !== 1) return void 0;
+	const t = v[0];
+	return t.type === "Text" ? t.data : void 0;
+}
+/** true when the source has a `<script lang="ts">`: a cheap check before paying for a parse */
+const has_ts_script = (source) => source.includes("lang=\"ts\"") || source.includes("lang='ts'");
+function strip_markup_ts(source, filename) {
+	if (!has_ts_script(source)) return source;
+	const ast = parse(source, {
+		modern: true,
+		filename
+	});
+	const s = new MagicString(source);
+	const seen = /* @__PURE__ */ new Set();
+	const visit = (v) => {
+		if (!v || typeof v !== "object" || seen.has(v)) return;
+		seen.add(v);
+		if (Array.isArray(v)) {
+			for (const x of v) visit(x);
+			return;
+		}
+		const n = v;
+		if (n.type === "TSAsExpression" || n.type === "TSSatisfiesExpression" || n.type === "TSNonNullExpression") {
+			const inner = n.expression;
+			if (inner.end < n.end) s.remove(inner.end, n.end);
+			visit(inner);
+			return;
+		}
+		if (n.type === "TSTypeAssertion") {
+			const inner = n.expression;
+			if (n.start < inner.start) s.remove(n.start, inner.start);
+			visit(inner);
+			return;
+		}
+		for (const k in n) {
+			if (k === "parent" || k === "metadata") continue;
+			const c = n[k];
+			if (TYPE_KEYS.has(k)) {
+				if (is_node(c) && c.start < c.end) s.remove(c.start, c.end);
+				continue;
+			}
+			visit(c);
+		}
+	};
+	visit(ast.fragment);
+	for (const script of [ast.instance, ast.module]) for (const a of script?.attributes ?? []) {
+		if (a.name !== "lang" || attr_text(a) !== "ts") continue;
+		let from = a.start;
+		while (from > 0 && (source[from - 1] === " " || source[from - 1] === "	" || source[from - 1] === "\n")) from--;
+		s.remove(from, a.end);
+	}
+	return s.hasChanged() ? s.toString() : source;
+}
+//#endregion
+//#region src/index.ts
+/**
+* A tsdown plugin that ships a library's Svelte components the way svelte-package does, inside a
+* normal tsdown build:
+*
+*   - every `.svelte` under `src` is preprocessed (its script's TS transpiled), its markup's TS cut
+*     (`strip_markup_ts`) and `lang="ts"` dropped, then emitted into the output dir at the same
+*     path as a raw, plain-JS component. It is NOT compiled: the consumer's own Svelte compiles it,
+*     so the library never bakes in a Svelte version. Templates may use TypeScript freely.
+*   - standalone `.css` files are copied as they are.
+*   - `.svelte.d.ts` types are generated beside each component with svelte2tsx (the engine
+*     svelte-package uses). tsdown stays in charge of the `.ts` declarations.
+*
+* Assets are emitted in `buildStart` and types copied in `writeBundle`, so tsdown's `clean` never
+* wipes them.
+*/
+/** the path of `abs` inside `dir`, with forward slashes */
+const rel_to = (dir, abs) => relative(dir, abs).split("\\").join("/");
+async function default_preprocess() {
+	try {
+		const { vitePreprocess } = await import("@sveltejs/vite-plugin-svelte");
+		return vitePreprocess({ script: true });
+	} catch {
+		throw new Error("@ogygia/tsdown-plugin-svelte: pass `preprocess`, or install @sveltejs/vite-plugin-svelte for the default");
+	}
+}
+function svelte(options = {}) {
+	const root = resolve(options.root ?? process.cwd());
+	const src = resolve(root, options.src ?? "src");
+	const out = resolve(root, options.out ?? "dist");
+	return {
+		name: "@ogygia/tsdown-plugin-svelte",
+		async buildStart() {
+			const pre = options.preprocess ?? await default_preprocess();
+			for (const file of globSync("**/*.{svelte,css}", { cwd: src })) {
+				const abs = join(src, file);
+				const fileName = rel_to(src, abs);
+				let source = readFileSync(abs, "utf8");
+				if (abs.endsWith(".svelte")) {
+					({code: source} = await preprocess(source, pre, { filename: abs }));
+					source = strip_markup_ts(source, abs);
+				}
+				this.emitFile({
+					type: "asset",
+					fileName,
+					source
+				});
+			}
+		},
+		async writeBundle() {
+			if (options.dts === false) return;
+			const { emitDts } = await import("svelte2tsx");
+			const tmp = join(root, ".svelte-dts");
+			rmSync(tmp, {
+				recursive: true,
+				force: true
+			});
+			try {
+				await emitDts({
+					libRoot: src,
+					declarationDir: tmp,
+					svelteShimsPath: fileURLToPath(import.meta.resolve("svelte2tsx/svelte-shims-v4.d.ts"))
+				});
+				for (const file of globSync("**/*.svelte", { cwd: src })) {
+					const rel = rel_to(src, join(src, file)) + ".d.ts";
+					const from = join(tmp, rel);
+					if (!existsSync(from)) continue;
+					const to = join(out, rel);
+					mkdirSync(dirname(to), { recursive: true });
+					cpSync(from, to);
+				}
+			} finally {
+				rmSync(tmp, {
+					recursive: true,
+					force: true
+				});
+			}
+		}
+	};
+}
+//#endregion
+export { svelte as default, svelte, strip_markup_ts };

package/package.json

@@ -1,6 +1,68 @@
 {
   "name": "@ogygia/tsdown-plugin-svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "Ship Svelte components from a tsdown build: preprocessed, TypeScript-free markup, with .svelte.d.ts types",
+  "type": "module",
+  "license": "MIT",
+  "author": "Puru Vijayvargia <devpuruvj@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PuruVJ/ogygia.git",
+    "directory": "packages/tsdown-plugin-svelte"
+  },
+  "keywords": [
+    "tsdown",
+    "rolldown",
+    "svelte",
+    "plugin",
+    "library"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "magic-string": "^1.1.0"
+  },
+  "peerDependencies": {
+    "@sveltejs/vite-plugin-svelte": ">=5.0.0",
+    "svelte": "^5.40.0",
+    "svelte2tsx": ">=0.7.0",
+    "tsdown": ">=0.15.0",
+    "typescript": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@sveltejs/vite-plugin-svelte": {
+      "optional": true
+    },
+    "svelte2tsx": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "@types/node": "^26.1.2",
+    "svelte": "^5.40.0",
+    "svelte2tsx": "^0.7.60",
+    "tsdown": "^0.22.14",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run"
+  }
 }