@wc-toolkit/cem-generator-vue 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,17 @@
+# @wc-toolkit/cem-generator-vue
+
+Vue detector plugin for custom elements created with `defineCustomElement`.
+
+```ts
+import { vuePlugin } from "@wc-toolkit/cem-generator-vue";
+
+const manifest = generateCem({
+  plugins: [vuePlugin()],
+});
+```
+
+The plugin detects `customElements.define` registrations and extracts Vue
+`props` and `emits` metadata.
+
+Run the included demo with `pnpm demo:vue`. 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 custom elements created with Vue's `defineCustomElement`. */
+export declare function vuePlugin(): DetectorPlugin;

package/dist/index.js

@@ -0,0 +1,204 @@
+import ts from "typescript";
+import { discoverFrameworkApis, } from "@wc-toolkit/cem-generator";
+import { getJSDocInfo, parseCemClassTags } from "@wc-toolkit/cem-generator-utils";
+/** Detects custom elements created with Vue's `defineCustomElement`. */
+export function vuePlugin() {
+    return {
+        name: "vue",
+        shouldAnalyze(sourceText) {
+            return /from\s+["']vue["']/.test(sourceText) &&
+                /\bdefineCustomElement\s*\(/.test(sourceText);
+        },
+        onFile(context) {
+            const fragment = {};
+            const defineNames = getDefineCustomElementNames(context.sourceFile);
+            const tags = getCustomElementRegistrations(context.sourceFile);
+            ts.forEachChild(context.sourceFile, function visit(node) {
+                if (!ts.isCallExpression(node) || !isDefineCustomElementCall(node, defineNames)) {
+                    ts.forEachChild(node, visit);
+                    return;
+                }
+                const declaration = findContainingVariable(node);
+                const name = declaration?.name && ts.isIdentifier(declaration.name) ? declaration.name.text : undefined;
+                if (!name) {
+                    ts.forEachChild(node, visit);
+                    return;
+                }
+                const component = node.arguments[0];
+                const options = resolveComponentOptions(component, context);
+                const classDoc = declaration ? parseCemClassTags(declaration) : {};
+                const props = options ? getProps(options, context) : undefined;
+                const discovered = options ? discoverFrameworkApis(options, context.sourceFile) : {};
+                const attributes = props?.map(({ name: fieldName, ...member }) => ({
+                    name: fieldName,
+                    type: member.type,
+                    description: member.description,
+                    fieldName,
+                }));
+                const events = options ? getEmits(options) : undefined;
+                fragment[name] = {
+                    name,
+                    exportName: getExportName(declaration),
+                    module: context.filePath,
+                    description: (declaration ? getJSDocInfo(declaration).description : undefined) || (options ? getJSDocInfo(options).description || undefined : undefined),
+                    summary: classDoc.summary,
+                    deprecated: classDoc.deprecated,
+                    tagName: classDoc.tagName ?? tags.get(name),
+                    members: props?.length ? props.map(({ name: _name, ...member }) => ({ name: _name, ...member })) : undefined,
+                    attributes: attributes?.length ? attributes : undefined,
+                    events: mergeEvents(mergeEvents(events, discovered.events), classDoc.events),
+                    slots: mergeNamed(discovered.slots, classDoc.slots),
+                    cssParts: mergeNamed(discovered.cssParts, classDoc.cssParts),
+                    cssProperties: mergeNamed(discovered.cssProperties, classDoc.cssProperties),
+                    cssStates: mergeNamed(discovered.cssStates, classDoc.cssStates),
+                    omitInherited: classDoc.omitInherited,
+                    customJsDocTags: classDoc.customJsDocTags,
+                };
+                ts.forEachChild(node, visit);
+            });
+            return fragment;
+        },
+    };
+}
+function mergeNamed(discovered, documented) {
+    const values = new Map();
+    for (const item of discovered ?? [])
+        values.set(item.name, item);
+    for (const item of documented ?? [])
+        values.set(item.name, { ...values.get(item.name), ...item });
+    return values.size ? [...values.values()] : undefined;
+}
+function getDefineCustomElementNames(sourceFile) {
+    const names = new Set();
+    for (const statement of sourceFile.statements) {
+        if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier) || statement.moduleSpecifier.text !== "vue")
+            continue;
+        const bindings = statement.importClause?.namedBindings;
+        if (!bindings || !ts.isNamedImports(bindings))
+            continue;
+        for (const element of bindings.elements) {
+            if ((element.propertyName?.text ?? element.name.text) === "defineCustomElement")
+                names.add(element.name.text);
+        }
+    }
+    return names;
+}
+function isDefineCustomElementCall(node, names) {
+    return ts.isIdentifier(node.expression) && names.has(node.expression.text);
+}
+function getCustomElementRegistrations(sourceFile) {
+    const tags = new Map();
+    function visit(node) {
+        if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) &&
+            node.expression.getText(sourceFile) === "customElements.define") {
+            const tag = node.arguments[0];
+            const constructor = node.arguments[1];
+            if (tag && ts.isStringLiteralLike(tag) && constructor && ts.isIdentifier(constructor))
+                tags.set(constructor.text, tag.text);
+        }
+        ts.forEachChild(node, visit);
+    }
+    visit(sourceFile);
+    return tags;
+}
+function findContainingVariable(node) {
+    let current = node.parent;
+    while (current && !ts.isSourceFile(current)) {
+        if (ts.isVariableDeclaration(current))
+            return current;
+        current = current.parent;
+    }
+    return undefined;
+}
+function resolveComponentOptions(component, context) {
+    if (!component)
+        return undefined;
+    if (ts.isObjectLiteralExpression(component))
+        return component;
+    if (!ts.isIdentifier(component))
+        return undefined;
+    const symbol = context.checker.getSymbolAtLocation(component);
+    const resolved = symbol && symbol.flags & ts.SymbolFlags.Alias ? context.checker.getAliasedSymbol(symbol) : symbol;
+    const declaration = resolved?.declarations?.find(ts.isVariableDeclaration);
+    const initializer = declaration?.initializer;
+    if (initializer && ts.isObjectLiteralExpression(initializer))
+        return initializer;
+    if (initializer && ts.isCallExpression(initializer) && ts.isIdentifier(initializer.expression) && initializer.expression.text === "defineComponent") {
+        return initializer.arguments[0] && ts.isObjectLiteralExpression(initializer.arguments[0]) ? initializer.arguments[0] : undefined;
+    }
+    return undefined;
+}
+function getProps(options, context) {
+    const props = getObjectProperty(options, "props");
+    if (!props || !ts.isObjectLiteralExpression(props.initializer))
+        return [];
+    return props.initializer.properties.flatMap((property) => {
+        if (!ts.isPropertyAssignment(property))
+            return [];
+        const name = getPropertyName(property.name);
+        if (!name)
+            return [];
+        const metadata = getPropMetadata(property.initializer, context);
+        return [{ name, kind: "field", type: metadata.type, description: getJSDocInfo(property).description || undefined, default: metadata.default }];
+    });
+}
+function getPropMetadata(initializer, context) {
+    if (ts.isObjectLiteralExpression(initializer)) {
+        const type = getObjectProperty(initializer, "type");
+        const defaultValue = getObjectProperty(initializer, "default");
+        return { type: type && getVueType(type.initializer, context), default: defaultValue?.initializer.getText() };
+    }
+    return { type: getVueType(initializer, context) };
+}
+function getVueType(node, context) {
+    const name = ts.isIdentifier(node) ? node.text : undefined;
+    if (name === "String")
+        return "string";
+    if (name === "Number")
+        return "number";
+    if (name === "Boolean")
+        return "boolean";
+    if (name === "Object")
+        return "object";
+    if (name === "Array")
+        return "array";
+    return context.checker.typeToString(context.checker.getTypeAtLocation(node));
+}
+function getEmits(options) {
+    const emits = getObjectProperty(options, "emits");
+    if (!emits)
+        return undefined;
+    if (ts.isArrayLiteralExpression(emits.initializer)) {
+        return emits.initializer.elements.flatMap((event) => ts.isStringLiteralLike(event) ? [{ name: event.text }] : []);
+    }
+    if (ts.isObjectLiteralExpression(emits.initializer)) {
+        return emits.initializer.properties.flatMap((property) => {
+            const name = property.name && getPropertyName(property.name);
+            return name ? [{ name }] : [];
+        });
+    }
+    return undefined;
+}
+function mergeEvents(emitted, documented) {
+    const events = new Map();
+    for (const event of emitted ?? [])
+        events.set(event.name, event);
+    for (const event of documented ?? [])
+        events.set(event.name, { ...events.get(event.name), ...event });
+    return events.size ? [...events.values()] : undefined;
+}
+function getObjectProperty(object, name) {
+    return object.properties.find((property) => ts.isPropertyAssignment(property) && getPropertyName(property.name) === name);
+}
+function getPropertyName(name) {
+    return ts.isIdentifier(name) || ts.isStringLiteralLike(name) ? name.text : undefined;
+}
+function getExportName(node) {
+    const declaration = node?.parent.parent;
+    if (!declaration || !ts.isVariableStatement(declaration))
+        return undefined;
+    const modifiers = ts.canHaveModifiers(declaration) ? ts.getModifiers(declaration) : undefined;
+    if (!modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword))
+        return undefined;
+    return modifiers.some((modifier) => modifier.kind === ts.SyntaxKind.DefaultKeyword) ? "default" : node?.name.getText();
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@wc-toolkit/cem-generator-vue",
+  "version": "0.1.1",
+  "description": "Vue 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/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/wc-toolkit/cem-generator/issues"
+  },
+  "homepage": "https://wc-toolkit.github.io/cem-generator/plugins/vue/",
+  "keywords": [
+    "custom-elements",
+    "custom-elements-manifest",
+    "web-components",
+    "vue"
+  ],
+  "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": {
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "test": "node --test tests/*.test.mjs",
+    "demo": "tsx demo/run.ts"
+  }
+}