@wc-toolkit/cem-generator-svelte 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 wc-toolkit contributors
+
+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

@@ -0,0 +1,18 @@
+# @wc-toolkit/cem-generator-svelte
+
+Svelte detector plugin for components compiled as custom elements with
+`<svelte:options customElement="..." />`.
+
+```ts
+import { sveltePlugin } from "@wc-toolkit/cem-generator-svelte";
+
+const manifest = generateCem({
+  plugins: [sveltePlugin()],
+});
+```
+
+The plugin analyzes `.svelte` files, extracting props, slots, parts, CSS
+custom properties, static events, and component JSDoc metadata.
+
+Run the included demo with `pnpm demo:svelte`. It writes the generated manifest
+to `demo/custom-elements.json`.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { type DetectorPlugin } from "@wc-toolkit/cem-generator";
+/** Detects Svelte components compiled as custom elements. */
+export declare function sveltePlugin(): DetectorPlugin;

package/dist/index.js

@@ -0,0 +1,154 @@
+import path from "node:path";
+import { parseCssMetadata, } from "@wc-toolkit/cem-generator";
+/** Detects Svelte components compiled as custom elements. */
+export function sveltePlugin() {
+    return {
+        name: "svelte",
+        shouldAnalyze(sourceText, filePath) {
+            return filePath.endsWith(".svelte") && /<svelte:options\b[^>]*customElement/.test(sourceText);
+        },
+        onFile(context) {
+            const source = context.sourceText;
+            const tagName = getTagName(source);
+            if (!tagName)
+                return {};
+            const props = getProps(source);
+            const metadata = getComponentMetadata(source, tagName);
+            const fragment = {
+                name: getComponentName(context.filePath),
+                module: context.filePath,
+                description: metadata.description,
+                summary: metadata.summary,
+                deprecated: metadata.deprecated,
+                tagName: metadata.tagName ?? tagName,
+                members: props.length ? props.map(({ attribute: _attribute, ...member }) => member) : undefined,
+                attributes: props.length ? props.map(({ name: fieldName, type, parsedType, description, attribute }) => ({
+                    name: attribute ?? fieldName,
+                    type,
+                    parsedType,
+                    description,
+                    fieldName,
+                })) : undefined,
+                events: mergeNamed(discoverEvents(source), metadata.events),
+                slots: mergeNamed(discoverSlots(source), metadata.slots),
+                cssParts: mergeNamed(discoverParts(source), metadata.cssParts),
+                cssProperties: mergeNamed(discoverCssProperties(source), metadata.cssProperties),
+                cssStates: metadata.cssStates,
+            };
+            return { [fragment.name]: fragment };
+        },
+    };
+}
+function getTagName(source) {
+    const options = source.match(/<svelte:options\b[^>]*customElement\s*=\s*(?:["']([^"']+)["']|\{\{?\s*tag\s*:\s*["']([^"']+)["'])/s);
+    return options?.[1] ?? options?.[2];
+}
+function getComponentName(filePath) {
+    return path.basename(filePath, ".svelte").replace(/[^A-Za-z0-9]+(.)/g, (_match, character) => character.toUpperCase());
+}
+function getProps(source) {
+    const props = [];
+    const script = source.match(/<script\b[^>]*>([\s\S]*?)<\/script>/)?.[1] ?? "";
+    const interfaces = new Map();
+    for (const match of script.matchAll(/(?:\/\*\*([\s\S]*?)\*\/\s*)?(\w+)\??\s*:\s*([^;\n,}]+)/g)) {
+        interfaces.set(match[2], { type: match[3].trim(), description: cleanComment(match[1]) });
+    }
+    for (const match of script.matchAll(/(?:\/\*\*([\s\S]*?)\*\/\s*)?export\s+let\s+(\w+)\s*(?::\s*([^=;]+))?\s*(?:=\s*([^;\n]+))?/g)) {
+        const [, comment, name, type, defaultValue] = match;
+        props.push({ name, kind: "field", type: type?.trim() ?? inferType(defaultValue), description: cleanComment(comment), default: defaultValue?.trim(), attribute: name.toLowerCase() });
+    }
+    const runeProps = script.match(/\b(?:let|const)\s*\{([\s\S]*?)\}\s*(?::\s*(\w+))?\s*=\s*\$props\s*\(\s*\)/)?.[1];
+    for (const entry of runeProps?.split(",") ?? []) {
+        const match = entry.trim().match(/^(\w+)(?:\s*=\s*(.+))?$/);
+        if (!match || props.some((prop) => prop.name === match[1]))
+            continue;
+        const info = interfaces.get(match[1]);
+        props.push({ name: match[1], kind: "field", type: info?.type ?? inferType(match[2]), description: info?.description, default: match[2]?.trim(), attribute: match[1].toLowerCase() });
+    }
+    const options = source.match(/<svelte:options\b([\s\S]*?)\/>/)?.[1] ?? "";
+    for (const match of options.matchAll(/(\w+)\s*:\s*\{[^}]*?attribute\s*:\s*["']([^"']+)["'][^}]*\}/g)) {
+        const prop = props.find((item) => item.name === match[1]);
+        if (prop)
+            prop.attribute = match[2];
+    }
+    return props;
+}
+function getComponentMetadata(source, tagName) {
+    const comment = source.match(/\/\*\*([\s\S]*?)\*\/\s*<svelte:options/)?.[1] ?? "";
+    const description = cleanComment(comment.replace(/\n\s*\*\s*@\w+[\s\S]*/, ""));
+    const summary = getTagDescription(comment, "summary");
+    const deprecated = getTagDescription(comment, "deprecated");
+    return {
+        description,
+        summary,
+        deprecated: deprecated || undefined,
+        tagName,
+        events: parseNamedTags(comment, "event"),
+        slots: parseNamedTags(comment, "slot"),
+        cssParts: parseNamedTags(comment, "csspart"),
+        cssProperties: parseCssTags(comment),
+        cssStates: parseNamedTags(comment, "cssState"),
+    };
+}
+function discoverSlots(source) {
+    return [...source.matchAll(/<slot(?:\s+name\s*=\s*["']([^"']+)["'])?[^>]*>/g)].map((match) => ({ name: match[1] ?? "", description: trailingHtmlComment(source.slice(0, match.index ?? 0)) }));
+}
+function discoverParts(source) {
+    return [...source.matchAll(/<[^>]*\bpart\s*=\s*["']([^"']+)["'][^>]*>/g)].flatMap((match) => match[1].split(/\s+/).filter(Boolean).map((name) => ({ name, description: trailingHtmlComment(source.slice(0, match.index ?? 0)) })));
+}
+function discoverCssProperties(source) {
+    const properties = [];
+    for (const match of source.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/g))
+        properties.push(...(parseCssMetadata(match[1]) ?? []));
+    return properties;
+}
+function discoverEvents(source) {
+    const events = [];
+    for (const match of source.matchAll(/(?:dispatch\s*\(\s*|dispatchEvent\s*\(\s*new\s+CustomEvent\s*\(\s*)["']([^"']+)["']/g))
+        events.push({ name: match[1], type: "CustomEvent" });
+    return events;
+}
+function parseNamedTags(comment, tag) {
+    const values = [...comment.matchAll(new RegExp(`@${tag}\\s+([^\\s-]+|-)\\s*(?:-\\s*)?([^\\n]*)`, "g"))].map((match) => ({ name: match[1] === "-" ? "" : match[1], description: match[2]?.trim() || undefined }));
+    return values.length ? values : undefined;
+}
+function parseCssTags(comment) {
+    const values = [...comment.matchAll(/@cssprop(?:erty)?\s+(?:\[([^=\]]+)=([^\]]+)\]|(\S+))\s*(?:-\s*)?([^\n]*)/g)].map((match) => ({ name: match[1] ?? match[3], default: match[2], description: match[4]?.trim() || undefined }));
+    return values.length ? values : undefined;
+}
+function getTagDescription(comment, tag) {
+    return comment.match(new RegExp(`@${tag}\\s+([^\\n]*)`))?.[1]?.trim() || undefined;
+}
+function cleanComment(value) {
+    if (!value)
+        return undefined;
+    const text = value.split("\n").map((line) => line.replace(/^\s*\*\s?/, "")).join(" ").replace(/\s+/g, " ").trim();
+    return text || undefined;
+}
+function trailingHtmlComment(value) {
+    const end = value.lastIndexOf("-->");
+    if (end < 0 || value.slice(end + 3).trim())
+        return undefined;
+    const start = value.lastIndexOf("<!--", end);
+    return start >= 0 ? cleanComment(value.slice(start + 4, end)) : undefined;
+}
+function inferType(value) {
+    if (!value)
+        return undefined;
+    if (/^['"]/.test(value))
+        return "string";
+    if (/^(true|false)$/.test(value))
+        return "boolean";
+    if (/^\d/.test(value))
+        return "number";
+    if (/^[\[{]/.test(value))
+        return value.startsWith("[") ? "array" : "object";
+    return undefined;
+}
+function mergeNamed(...sources) {
+    const values = new Map();
+    for (const source of sources)
+        for (const item of source ?? [])
+            values.set(item.name, { ...values.get(item.name), ...item });
+    return values.size ? [...values.values()] : undefined;
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@wc-toolkit/cem-generator-svelte",
+  "version": "0.1.1",
+  "description": "Svelte detector plugin for generating Custom Elements Manifests.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wc-toolkit/cem-generator.git",
+    "directory": "packages/plugins/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/wc-toolkit/cem-generator/issues"
+  },
+  "homepage": "https://wc-toolkit.github.io/cem-generator/plugins/svelte/",
+  "keywords": [
+    "custom-elements",
+    "custom-elements-manifest",
+    "web-components",
+    "svelte"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "typescript": "^5.9.0",
+    "@wc-toolkit/cem-generator": "0.1.1",
+    "@wc-toolkit/cem-generator-utils": "0.1.0"
+  },
+  "devDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "scripts": {
+    "test": "node --test tests/*.test.mjs",
+    "demo": "tsx demo/run.ts"
+  }
+}