@wc-toolkit/vuejs-types 1.0.0 → 1.0.2

package/README.md

@@ -19,10 +19,11 @@ Types are generated from a Custom Elements Manifest (CEM) and include documentat
 
 ## Usage
 
-Two primary ways to generate types:
+Three primary ways to generate types:
 
 1. Programmatically, from a build script
 2. As a plugin for the Custom Elements Manifest Analyzer
+3. As a plugin for `@wc-toolkit/cem-generator`
 
 ### Install
 
@@ -65,6 +66,17 @@ export default {
 };
 ```
 
+### cem-generator Plugin
+
+```ts
+import { generateCem } from "@wc-toolkit/cem-generator";
+import { vuejsTypesGeneratorPlugin } from "@wc-toolkit/vuejs-types";
+
+generateCem({
+  plugins: [vuejsTypesGeneratorPlugin({ outdir: "./dist/types" })],
+});
+```
+
 ## Implementation / Integrating generated types
 
 There are two common ways consumers can include the generated types in their Vue projects.

package/dist/index.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   generateVuejsTypes: () => generateVuejsTypes,
+  vuejsTypesGeneratorPlugin: () => vuejsTypesGeneratorPlugin,
   vuejsTypesPlugin: () => vuejsTypesPlugin
 });
 module.exports = __toCommonJS(index_exports);
@@ -40,6 +41,42 @@ var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
 
 // node_modules/.pnpm/@wc-toolkit+cem-utilities@1.4.1/node_modules/@wc-toolkit/cem-utilities/dist/index.js
+var JS_TYPES = /* @__PURE__ */ new Set([
+  "any",
+  "bigint",
+  "boolean",
+  "never",
+  "null",
+  "number",
+  "string",
+  "Symbol",
+  "undefined",
+  "unknown"
+]);
+var DOM_EVENTS = /* @__PURE__ */ new Set([
+  "AnimationEvent",
+  "BeforeUnloadEvent",
+  "ClipboardEvent",
+  "DragEvent",
+  "Event",
+  "FocusEvent",
+  "HashChangeEvent",
+  "InputEvent",
+  "KeyboardEvent",
+  "MessageEvent",
+  "MouseEvent",
+  "MutationObserver",
+  "PageTransitionEvent",
+  "PointerEvent",
+  "PopStateEvent",
+  "ProgressEvent",
+  "StorageEvent",
+  "TouchEvent",
+  "TransitionEvent",
+  "UIEvent",
+  "WebGLContextEvent",
+  "WheelEvent"
+]);
 var definitionExports = /* @__PURE__ */ new Map();
 var components = [];
 var manifest;
@@ -86,6 +123,16 @@ function getComponentPublicProperties(component) {
     (member) => member.kind === "field" && member.privacy !== "private" && member.privacy !== "protected" && !member.static && !member.name.startsWith("#")
   ) || [];
 }
+function getCustomEventDetailTypes(component, excludedTypes) {
+  if (!component || !component.events) {
+    return [];
+  }
+  const types = component?.events?.map((e) => {
+    const eventType = e.type?.text.replace("[]", "").replace(" | undefined", "");
+    return eventType && !excludedTypes?.includes(eventType) && !JS_TYPES.has(eventType) && !DOM_EVENTS.has(eventType) && !eventType.includes("<") && !eventType.includes(">") && !eventType.includes(`{`) && !eventType.includes("'") && !eventType.includes(`"`) ? eventType : void 0;
+  })?.filter((e) => e !== void 0 && !e?.startsWith("HTML")) || [];
+  return types?.length ? [...new Set(types)] : [];
+}
 function setAllDefinitionExports(customElementsManifest) {
   if (!customElementsManifest) {
     return;
@@ -339,6 +386,25 @@ function getImports(manifest2, options) {
       });
     });
   }
+  getAllComponents(manifest2, options.exclude).forEach((component) => {
+    if (!component.name || !component.events) return;
+    const componentModule = componentModules.get(component.name);
+    if (!componentModule) return;
+    const detailTypes = getEventDetailImportTypes(component);
+    if (detailTypes.length === 0) return;
+    const importPath = options.globalTypePath ? normalizeImportPath(options.globalTypePath, options) : normalizeImportPath(
+      getComponentImportPath(
+        component.name,
+        component.tagName,
+        componentModule.modulePath,
+        options
+      ),
+      options
+    );
+    detailTypes.forEach((typeName) => {
+      addImport(imports, importPath, typeName);
+    });
+  });
   return Array.from(imports.entries()).map(
     ([importPath, exportNames]) => `import type { ${Array.from(exportNames).join(", ")} } from "${importPath}";`
   ).join("\n");
@@ -350,8 +416,7 @@ function getTypeTemplate(manifest2, options) {
 ${imports}
 import type { HTMLAttributes, PublicProps, EmitFn, EmitsToProps } from "vue";
 
-/**
-  * This file was autogenerated by @wc-toolkit/vuejs-types
+/** This file was autogenerated by @wc-toolkit/vuejs-types */
 ${options.stronglyTypedEvents ? `/**
   * A generic type for strongly typing custom events with their targets
   * @template T - The type of the event target (extends EventTarget)
@@ -645,6 +710,20 @@ function getStronglyTypedEvents(component) {
   });
   return types.join("\n");
 }
+function getEventDetailImportTypes(component) {
+  const bare = getCustomEventDetailTypes(component);
+  const wrapped = (component.events || []).map((event) => {
+    const text = event.type?.text?.trim();
+    if (!text) return void 0;
+    const match = /^CustomEvent<(.+)>$/.exec(text);
+    return match?.[1]?.trim();
+  }).filter(
+    (detail) => detail !== void 0 && /^[A-Z][\w$]*$/.test(detail)
+  );
+  return [.../* @__PURE__ */ new Set([...bare, ...wrapped])].filter(
+    (name) => name !== "CustomEvent" && name !== "Event"
+  );
+}
 function createOutDir(outDir) {
   if (outDir !== "./" && !import_fs.default.existsSync(outDir)) {
     import_fs.default.mkdirSync(outDir, { recursive: true });
@@ -668,8 +747,17 @@ function vuejsTypesPlugin(options = {}) {
     }
   };
 }
+function vuejsTypesGeneratorPlugin(options = {}) {
+  return {
+    name: "@wc-toolkit/vuejs-types:cem-generator",
+    afterGenerate(manifest2) {
+      generateVuejsTypes(manifest2, options);
+    }
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   generateVuejsTypes,
+  vuejsTypesGeneratorPlugin,
   vuejsTypesPlugin
 });

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 import { ComponentDescriptionOptions } from '@wc-toolkit/cem-utilities';
+import { Plugin } from '@wc-toolkit/cem-generator';
 
 type VuejsTypesOptions = {
     /** Used to get a specific path for a given component */
@@ -55,6 +56,8 @@ declare function vuejsTypesPlugin(options?: VuejsTypesOptions): {
     name: string;
     packageLinkPhase({ customElementsManifest }: any): void;
 };
+/** Plugin for @wc-toolkit/cem-generator that generates Vue.js types from the finalized CEM. */
+declare function vuejsTypesGeneratorPlugin(options?: VuejsTypesOptions): Plugin;
 
 /**
  * @license
@@ -811,4 +814,4 @@ interface Demo {
  */
 declare function generateVuejsTypes(manifest: Package, options?: VuejsTypesOptions): string | undefined;
 
-export { generateVuejsTypes, vuejsTypesPlugin };
+export { generateVuejsTypes, vuejsTypesGeneratorPlugin, vuejsTypesPlugin };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { ComponentDescriptionOptions } from '@wc-toolkit/cem-utilities';
+import { Plugin } from '@wc-toolkit/cem-generator';
 
 type VuejsTypesOptions = {
     /** Used to get a specific path for a given component */
@@ -55,6 +56,8 @@ declare function vuejsTypesPlugin(options?: VuejsTypesOptions): {
     name: string;
     packageLinkPhase({ customElementsManifest }: any): void;
 };
+/** Plugin for @wc-toolkit/cem-generator that generates Vue.js types from the finalized CEM. */
+declare function vuejsTypesGeneratorPlugin(options?: VuejsTypesOptions): Plugin;
 
 /**
  * @license
@@ -811,4 +814,4 @@ interface Demo {
  */
 declare function generateVuejsTypes(manifest: Package, options?: VuejsTypesOptions): string | undefined;
 
-export { generateVuejsTypes, vuejsTypesPlugin };
+export { generateVuejsTypes, vuejsTypesGeneratorPlugin, vuejsTypesPlugin };

package/dist/index.js

@@ -3,6 +3,42 @@ import fs from "fs";
 import path from "path";
 
 // node_modules/.pnpm/@wc-toolkit+cem-utilities@1.4.1/node_modules/@wc-toolkit/cem-utilities/dist/index.js
+var JS_TYPES = /* @__PURE__ */ new Set([
+  "any",
+  "bigint",
+  "boolean",
+  "never",
+  "null",
+  "number",
+  "string",
+  "Symbol",
+  "undefined",
+  "unknown"
+]);
+var DOM_EVENTS = /* @__PURE__ */ new Set([
+  "AnimationEvent",
+  "BeforeUnloadEvent",
+  "ClipboardEvent",
+  "DragEvent",
+  "Event",
+  "FocusEvent",
+  "HashChangeEvent",
+  "InputEvent",
+  "KeyboardEvent",
+  "MessageEvent",
+  "MouseEvent",
+  "MutationObserver",
+  "PageTransitionEvent",
+  "PointerEvent",
+  "PopStateEvent",
+  "ProgressEvent",
+  "StorageEvent",
+  "TouchEvent",
+  "TransitionEvent",
+  "UIEvent",
+  "WebGLContextEvent",
+  "WheelEvent"
+]);
 var definitionExports = /* @__PURE__ */ new Map();
 var components = [];
 var manifest;
@@ -49,6 +85,16 @@ function getComponentPublicProperties(component) {
     (member) => member.kind === "field" && member.privacy !== "private" && member.privacy !== "protected" && !member.static && !member.name.startsWith("#")
   ) || [];
 }
+function getCustomEventDetailTypes(component, excludedTypes) {
+  if (!component || !component.events) {
+    return [];
+  }
+  const types = component?.events?.map((e) => {
+    const eventType = e.type?.text.replace("[]", "").replace(" | undefined", "");
+    return eventType && !excludedTypes?.includes(eventType) && !JS_TYPES.has(eventType) && !DOM_EVENTS.has(eventType) && !eventType.includes("<") && !eventType.includes(">") && !eventType.includes(`{`) && !eventType.includes("'") && !eventType.includes(`"`) ? eventType : void 0;
+  })?.filter((e) => e !== void 0 && !e?.startsWith("HTML")) || [];
+  return types?.length ? [...new Set(types)] : [];
+}
 function setAllDefinitionExports(customElementsManifest) {
   if (!customElementsManifest) {
     return;
@@ -302,6 +348,25 @@ function getImports(manifest2, options) {
       });
     });
   }
+  getAllComponents(manifest2, options.exclude).forEach((component) => {
+    if (!component.name || !component.events) return;
+    const componentModule = componentModules.get(component.name);
+    if (!componentModule) return;
+    const detailTypes = getEventDetailImportTypes(component);
+    if (detailTypes.length === 0) return;
+    const importPath = options.globalTypePath ? normalizeImportPath(options.globalTypePath, options) : normalizeImportPath(
+      getComponentImportPath(
+        component.name,
+        component.tagName,
+        componentModule.modulePath,
+        options
+      ),
+      options
+    );
+    detailTypes.forEach((typeName) => {
+      addImport(imports, importPath, typeName);
+    });
+  });
   return Array.from(imports.entries()).map(
     ([importPath, exportNames]) => `import type { ${Array.from(exportNames).join(", ")} } from "${importPath}";`
   ).join("\n");
@@ -313,8 +378,7 @@ function getTypeTemplate(manifest2, options) {
 ${imports}
 import type { HTMLAttributes, PublicProps, EmitFn, EmitsToProps } from "vue";
 
-/**
-  * This file was autogenerated by @wc-toolkit/vuejs-types
+/** This file was autogenerated by @wc-toolkit/vuejs-types */
 ${options.stronglyTypedEvents ? `/**
   * A generic type for strongly typing custom events with their targets
   * @template T - The type of the event target (extends EventTarget)
@@ -608,6 +672,20 @@ function getStronglyTypedEvents(component) {
   });
   return types.join("\n");
 }
+function getEventDetailImportTypes(component) {
+  const bare = getCustomEventDetailTypes(component);
+  const wrapped = (component.events || []).map((event) => {
+    const text = event.type?.text?.trim();
+    if (!text) return void 0;
+    const match = /^CustomEvent<(.+)>$/.exec(text);
+    return match?.[1]?.trim();
+  }).filter(
+    (detail) => detail !== void 0 && /^[A-Z][\w$]*$/.test(detail)
+  );
+  return [.../* @__PURE__ */ new Set([...bare, ...wrapped])].filter(
+    (name) => name !== "CustomEvent" && name !== "Event"
+  );
+}
 function createOutDir(outDir) {
   if (outDir !== "./" && !fs.existsSync(outDir)) {
     fs.mkdirSync(outDir, { recursive: true });
@@ -631,7 +709,16 @@ function vuejsTypesPlugin(options = {}) {
     }
   };
 }
+function vuejsTypesGeneratorPlugin(options = {}) {
+  return {
+    name: "@wc-toolkit/vuejs-types:cem-generator",
+    afterGenerate(manifest2) {
+      generateVuejsTypes(manifest2, options);
+    }
+  };
+}
 export {
   generateVuejsTypes,
+  vuejsTypesGeneratorPlugin,
   vuejsTypesPlugin
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wc-toolkit/vuejs-types",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "This package generates Vue.js types for custom elements / web components",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -50,6 +50,7 @@
     "vitest": "^3.0.4"
   },
   "dependencies": {
+    "@wc-toolkit/cem-generator": "^0.1.1",
     "@prettier/sync": "^0.6.1"
   },
   "keywords": [