@wc-toolkit/vuejs-types 1.0.0

package/dist/index.js

@@ -0,0 +1,637 @@
+// src/type-generator.ts
+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 definitionExports = /* @__PURE__ */ new Map();
+var components = [];
+var manifest;
+function getAllComponents(customElementsManifest, exclude = []) {
+  if (!customElementsManifest) {
+    return [];
+  }
+  if (!customElementsManifest || areObjectsEqual(customElementsManifest, manifest)) {
+    return components;
+  }
+  resetCache();
+  manifest = customElementsManifest;
+  setAllDefinitionExports(customElementsManifest);
+  manifest.modules.forEach((module) => {
+    const ces = module.declarations?.filter(
+      (d) => d.customElement
+    );
+    if (ces?.length) {
+      ces.forEach((ce) => {
+        if (exclude?.includes(ce.name)) {
+          return;
+        }
+        ce.modulePath = module.path;
+        ce.definitionPath = definitionExports.get(ce.name);
+        if ("typeDefinitionPath" in module && module.typeDefinitionPath) {
+          ce.typeDefinitionPath = module.typeDefinitionPath;
+        }
+        components.push(ce);
+      });
+    }
+  });
+  return components;
+}
+function resetCache() {
+  components = [];
+  manifest = void 0;
+  definitionExports.clear();
+}
+function getComponentPublicProperties(component) {
+  if (!component || !component.members) {
+    return [];
+  }
+  return component?.members?.filter(
+    (member) => member.kind === "field" && member.privacy !== "private" && member.privacy !== "protected" && !member.static && !member.name.startsWith("#")
+  ) || [];
+}
+function setAllDefinitionExports(customElementsManifest) {
+  if (!customElementsManifest) {
+    return;
+  }
+  customElementsManifest.modules.forEach((mod) => {
+    const defExports = mod?.exports?.filter(
+      (e) => e.kind === "custom-element-definition"
+    );
+    if (defExports?.length) {
+      defExports.forEach((e) => {
+        if (e.declaration.name) {
+          definitionExports.set(e.declaration.name, mod.path);
+        }
+      });
+    }
+  });
+}
+function areObjectsEqual(obj1, obj2) {
+  if (obj1 === obj2) return true;
+  if (obj1 === null || obj2 === null || typeof obj1 !== "object" || typeof obj2 !== "object")
+    return false;
+  if (Array.isArray(obj1) && Array.isArray(obj2)) {
+    if (obj1.length !== obj2.length) return false;
+    return obj1.every((item, index) => areObjectsEqual(item, obj2[index]));
+  }
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  if (keys1.length !== keys2.length) return false;
+  if (!keys2.every((key) => key in obj1)) return false;
+  return keys1.every((key) => {
+    const val1 = obj1[key];
+    const val2 = obj2[key];
+    if (val1 === null && val2 === null) return true;
+    if (val1 === null || val2 === null) return false;
+    if (typeof val1 === "object" && typeof val2 === "object") {
+      return areObjectsEqual(val1, val2);
+    }
+    return val1 === val2;
+  });
+}
+function getMemberDescription(description, deprecated) {
+  if (!deprecated) {
+    return description || "";
+  }
+  const desc = description ? `- ${description}` : "";
+  return typeof deprecated === "string" ? `@deprecated ${deprecated} ${desc}` : `@deprecated ${desc}`;
+}
+function toPascalCase(value) {
+  return value.replace(new RegExp(/[-_]+/, "g"), " ").replace(new RegExp(/[^\w\s]/, "g"), "").replace(
+    new RegExp(/\s+(.)(\w*)/, "g"),
+    ($1, $2, $3) => `${$2.toUpperCase() + $3}`
+  ).replace(new RegExp(/\w/), (s) => s.toUpperCase());
+}
+
+// src/logger.ts
+var Logger = class {
+  #debug;
+  constructor(debug = false) {
+    this.#debug = debug;
+  }
+  log(message, color = "\x1B[30m%s\x1B[0m") {
+    if (!this.#debug) {
+      return;
+    }
+    console.log(color, message);
+  }
+  red(message) {
+    this.log(message, "\x1B[31m%s\x1B[0m");
+  }
+  green(message) {
+    this.log(message, "\x1B[32m%s\x1B[0m");
+  }
+  yellow(message) {
+    this.log(message, "\x1B[33m%s\x1B[0m");
+  }
+  blue(message) {
+    this.log(message, "\x1B[34m%s\x1B[0m");
+  }
+  magenta(message) {
+    this.log(message, "\x1B[35m%s\x1B[0m");
+  }
+  cyan(message) {
+    this.log(message, "\x1B[36m%s\x1B[0m");
+  }
+};
+
+// src/type-generator.ts
+import prettier from "@prettier/sync";
+var DEFAULT_OPTIONS = {
+  fileName: "custom-element-vuejs.d.ts",
+  outdir: "./",
+  exclude: [],
+  prefix: "",
+  suffix: ""
+};
+var KNOWN_FILE_EXTENSIONS = [
+  ".d.ts",
+  ".ts",
+  ".tsx",
+  ".js",
+  ".jsx",
+  ".mjs",
+  ".cjs",
+  ".mts",
+  ".cts"
+];
+function toPosixPath(p) {
+  return p.split(path.sep).join("/");
+}
+function ensureRelativeSpecifier(p) {
+  return p.startsWith(".") ? p : `./${p}`;
+}
+function normalizeImportPath(importPath, options) {
+  const outDirAbs = path.resolve(options.outdir ?? "./");
+  const isAbsPath = importPath.startsWith("/") || /^[A-Za-z]:[\\/]/.test(importPath);
+  const hasPathSeparators = importPath.includes("/") || importPath.includes("\\");
+  const hasKnownExt = KNOWN_FILE_EXTENSIONS.some(
+    (ext) => importPath.endsWith(ext)
+  );
+  const shouldTryFs = isAbsPath || importPath.startsWith(".") || hasPathSeparators || hasKnownExt;
+  if (!shouldTryFs) {
+    return importPath;
+  }
+  const abs = path.resolve(importPath);
+  if (!fs.existsSync(abs)) {
+    return importPath;
+  }
+  try {
+    if (!fs.statSync(abs).isFile()) {
+      return importPath;
+    }
+  } catch {
+    return importPath;
+  }
+  const rel = toPosixPath(path.relative(outDirAbs, abs));
+  return ensureRelativeSpecifier(rel);
+}
+function generateVuejsTypes(manifest2, options = {}) {
+  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+  const log = new Logger(mergedOptions.debug);
+  if (mergedOptions.skip) {
+    log.yellow("[vuejs-types] - Skipped");
+    return;
+  }
+  if (!manifest2 || !manifest2.modules || manifest2.modules.length === 0) {
+    log.red("[vuejs-types] - No modules found in the manifest.");
+    return;
+  }
+  if (!mergedOptions.outdir) {
+    log.red("[vuejs-types] - No output directory specified.");
+    return;
+  }
+  log.log("[vuejs-types] - Generating types...");
+  const template = getTypeTemplate(manifest2, mergedOptions);
+  if (mergedOptions.fileName) {
+    createOutDir(mergedOptions.outdir);
+    const outputPath = saveFile(
+      mergedOptions.outdir,
+      mergedOptions.fileName,
+      template
+    );
+    log.green(`[vuejs-types] - Generated "${outputPath}".`);
+  } else {
+    log.yellow(
+      `[vuejs-types] - File generation skipped because \`fileName\` was not defined.`
+    );
+  }
+  return template;
+}
+function getImports(manifest2, options) {
+  const imports = /* @__PURE__ */ new Map();
+  const componentModules = /* @__PURE__ */ new Map();
+  manifest2.modules.forEach((module) => {
+    if (!module.declarations || !module.declarations.length || !module.declarations.some((d) => d.customElement)) {
+      return;
+    }
+    module.declarations?.forEach((element) => {
+      const component = element;
+      if (!component.customElement || !component.name) {
+        return;
+      }
+      componentModules.set(component.name, {
+        modulePath: module.path,
+        tagName: component.tagName
+      });
+    });
+    if (options.globalTypePath) {
+      module.exports?.forEach((exportDeclaration) => {
+        const exportName = exportDeclaration.declaration.name;
+        if (!exportName || exportName === "*") {
+          return;
+        }
+        addImport(imports, options.globalTypePath, exportName);
+      });
+    } else {
+      module.declarations?.forEach((element) => {
+        const component = element;
+        if (!component.customElement || !component.name) {
+          return;
+        }
+        const importPath = normalizeImportPath(
+          getComponentImportPath(
+            component.name,
+            component.tagName,
+            module.path,
+            options
+          ),
+          options
+        );
+        module.exports?.forEach((exportDeclaration) => {
+          const exportName = exportDeclaration.declaration.name;
+          if (!exportName || exportName === "*") {
+            return;
+          }
+          if (!(options.defaultExport && exportName === component.name)) {
+            addImport(imports, importPath, exportName);
+          }
+        });
+        if (options.defaultExport) {
+          addImport(imports, importPath, `default as ${component.name}`);
+        }
+      });
+    }
+  });
+  if (options.useCemTypes) {
+    getAllComponents(manifest2, options.exclude).forEach((component) => {
+      if (!component.name) {
+        return;
+      }
+      const componentModule = componentModules.get(component.name);
+      if (!componentModule) {
+        return;
+      }
+      getComponentProps(component).forEach((prop) => {
+        const propType = getResolvedPropType(prop, options);
+        propType?.references?.forEach((reference) => {
+          if (!reference.name || reference.name === "default") {
+            return;
+          }
+          const importPath = getTypeImportPath(
+            reference,
+            componentModule.modulePath,
+            component,
+            options
+          );
+          if (!importPath) {
+            return;
+          }
+          addImport(imports, importPath, reference.name);
+        });
+      });
+    });
+  }
+  return Array.from(imports.entries()).map(
+    ([importPath, exportNames]) => `import type { ${Array.from(exportNames).join(", ")} } from "${importPath}";`
+  ).join("\n");
+}
+function getTypeTemplate(manifest2, options) {
+  const components2 = getAllComponents(manifest2, options.exclude);
+  const imports = getImports(manifest2, options);
+  return `
+${imports}
+import type { HTMLAttributes, PublicProps, EmitFn, EmitsToProps } from "vue";
+
+/**
+  * 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)
+  * @template D - The type of the detail payload for the custom event
+  */
+ type TypedEvent<
+   T extends EventTarget,
+   E = Event
+ > = E & {
+   target: T;
+ };` : ""}
+
+export type EventMap = {
+  [event: string]: Event;
+};
+
+// Vue's template type-checking reads props from $props and events from $emit.
+// See: https://vuejs.org/guide/extras/web-components.html#non-vue-web-components-and-typescript
+export type VueEmitsOptions<T extends EventMap> = {
+  [K in keyof T]: (event: T[K]) => void;
+};
+
+export type VueEmit<T extends EventMap> = EmitFn<VueEmitsOptions<T>>;
+
+// Helps Volar autocomplete "@event" by providing "onXxx" props.
+export type VueOnProps<T extends EventMap> = EmitsToProps<VueEmitsOptions<T>>;
+
+export type DefineCustomElement<
+  ElementType extends HTMLElement,
+  Props = {},
+  Events extends EventMap = {},
+> = new () => ElementType & {
+  /** @deprecated Do not use the $props property on a Custom Element ref; this is for template prop types only. */
+  $props: HTMLAttributes & Props & PublicProps & VueOnProps<Events>${options.allowUnknownProps ? " & Record<string, any>" : ""};
+
+  /** @deprecated Do not use the $emit property on a Custom Element ref; this is for template event types only. */
+  $emit: VueEmit<Events>;
+};
+
+${components2?.map((component) => {
+    if (!component.name || !component.tagName) {
+      return "";
+    }
+    const cachedProps = getComponentProps(component)?.filter(
+      (prop) => !prop.readonly && !prop.static
+    ) || [];
+    const strongEventTypes = getStrongEventTypes(component);
+    const vueEventsTemplate = component.events?.filter((e) => e.name)?.map((event) => {
+      const eventType = event.type?.text?.startsWith("{") ? `CustomEvent<${event.type.text}>` : event.type?.text || "Event";
+      const resolvedEventType = getEventTypeName(
+        eventType,
+        strongEventTypes?.find((x) => x.name === event.name)?.newType || null,
+        component.name,
+        options.stronglyTypedEvents
+      );
+      return `  /** ${getMemberDescription(
+        event.description,
+        event.deprecated
+      )} */
+  "${event.name}": ${resolvedEventType};`;
+    }).join("\n") || "";
+    return `
+${options.stronglyTypedEvents ? getStronglyTypedEvents(component) : ""}
+
+export type ${component.name}VueProps = {
+${(() => {
+      if (!cachedProps?.length) {
+        return "";
+      }
+      return cachedProps.reduce((acc, prop) => {
+        const description = getMemberDescription(prop.description, prop.deprecated);
+        const typeInfo = getResolvedPropType(prop, options);
+        const type = getPropType(component.name, prop, typeInfo, options);
+        const propExists = prop.propName ? acc.includes(`  "${prop.propName}"?:`) : false;
+        const attrExists = prop.attrName ? acc.includes(`  "${prop.attrName}"?:`) : false;
+        let result = acc;
+        if (prop.attrName && prop.attrName !== prop.propName && !attrExists) {
+          result += `  /** ${description} */
+  "${prop.attrName}"?: ${type};
+`;
+        }
+        if (prop.propName && !propExists) {
+          result += `  /** ${description} */
+  "${prop.propName}"?: ${type};
+`;
+        }
+        return result;
+      }, "");
+    })()}
+};
+
+export type ${component.name}VueEvents = {
+${vueEventsTemplate}
+};
+`;
+  }).join("\n")}
+
+export type CustomCssProperties = {
+${(() => {
+    const uniqueCssProperties = /* @__PURE__ */ new Set();
+    const cssPropertiesArray = [];
+    components2.forEach((component) => {
+      component.cssProperties?.forEach((property) => {
+        if (!uniqueCssProperties.has(property.name)) {
+          uniqueCssProperties.add(property.name);
+          cssPropertiesArray.push(
+            `  /** ${getMemberDescription(property.description, property.deprecated)} */
+  "${property.name}"?: string;`
+          );
+        }
+      });
+    });
+    return cssPropertiesArray.join("\n");
+  })()}
+}
+
+// Vue SFC template type-checking (GlobalComponents) for non-Vue custom elements.
+// Note: Some tooling expects this augmentation under "@vue/runtime-core", while
+// other docs/examples use "vue". We emit both for compatibility.
+export interface WcToolkitVueGlobalComponents {
+${components2.map((component) => {
+    if (!component.name || !component.tagName) {
+      return "";
+    }
+    let tagName = component.tagName;
+    if (options.tagFormatter) {
+      tagName = options.tagFormatter(component.tagName);
+    } else if (options.prefix || options.suffix) {
+      tagName = `${options.prefix}${component.tagName}${options.suffix}`;
+    }
+    const componentDoc = component.description ? getMemberDescription(
+      component.description,
+      component.deprecated
+    ).replace(/\n/g, " ").replace(/`/g, "'") : void 0;
+    return componentDoc ? `  /** ${componentDoc} */
+  "${tagName}": DefineCustomElement<${component.name}, ${component.name}VueProps, ${component.name}VueEvents>;` : `  "${tagName}": DefineCustomElement<${component.name}, ${component.name}VueProps, ${component.name}VueEvents>;`;
+  }).join("\n")}
+}
+
+declare module "@vue/runtime-core" {
+  interface GlobalComponents extends WcToolkitVueGlobalComponents {}
+}
+
+declare module "@vue/runtime-dom" {
+  interface GlobalComponents extends WcToolkitVueGlobalComponents {}
+
+  // Needed for named slots on native elements when using Web Components.
+  // Vue templates otherwise reject: <span slot="icon" />
+  interface HTMLAttributes {
+    slot?: string;
+  }
+}
+
+declare module "vue" {
+  interface GlobalComponents extends WcToolkitVueGlobalComponents {}
+
+  // Some package managers (notably pnpm) may not make "@vue/runtime-dom" directly
+  // resolvable from the consuming project, so we also augment via "vue".
+  interface HTMLAttributes {
+    slot?: string;
+  }
+
+  ${options.excludeCssCustomProperties ? "" : "interface CSSProperties extends CustomCssProperties {}"}
+}
+`;
+}
+function addImport(imports, importPath, exportName) {
+  const existing = imports.get(importPath);
+  if (existing) {
+    existing.add(exportName);
+    return;
+  }
+  imports.set(importPath, /* @__PURE__ */ new Set([exportName]));
+}
+function getComponentImportPath(componentName, tagName, modulePath, options) {
+  return typeof options.componentTypePath === "function" ? options.componentTypePath(componentName, tagName, modulePath) : modulePath;
+}
+function getTypeImportPath(reference, componentModulePath, component, options) {
+  if (reference.package) {
+    return reference.package;
+  }
+  if (!reference.module) {
+    return null;
+  }
+  if (reference.module === componentModulePath) {
+    if (options.globalTypePath) {
+      return normalizeImportPath(options.globalTypePath, options);
+    }
+    if (component.name) {
+      return normalizeImportPath(
+        getComponentImportPath(
+          component.name,
+          component.tagName,
+          componentModulePath,
+          options
+        ),
+        options
+      );
+    }
+  }
+  return normalizeImportPath(reference.module, options);
+}
+function getComponentProps(component) {
+  const properties = getComponentPublicProperties(
+    component
+  );
+  const propertyMap = new Map(
+    properties.map((property) => [property.name, property])
+  );
+  const attributeProps = component.attributes?.map(
+    (attribute) => ({
+      attrName: attribute.name,
+      propName: attribute.fieldName,
+      description: attribute.description,
+      deprecated: attribute.deprecated,
+      readonly: false,
+      static: false,
+      type: attribute.type,
+      attribute,
+      property: attribute.fieldName ? propertyMap.get(attribute.fieldName) : void 0
+    })
+  ) || [];
+  const attributePropNames = new Set(
+    attributeProps.map((attribute) => attribute.propName).filter((propName) => Boolean(propName))
+  );
+  const propertyOnlyProps = properties.filter((property) => !attributePropNames.has(property.name)).map((property) => ({
+    attrName: void 0,
+    propName: property.name,
+    description: property.description,
+    deprecated: property.deprecated,
+    readonly: property.readonly,
+    static: property.static,
+    type: property.type,
+    attribute: void 0,
+    property
+  }));
+  return [...attributeProps, ...propertyOnlyProps];
+}
+function getTypeFromSource(source, sourceKey) {
+  const candidate = source ? source[sourceKey] : void 0;
+  if (candidate && typeof candidate === "object" && "text" in candidate && typeof candidate.text === "string") {
+    return candidate;
+  }
+  return void 0;
+}
+function getResolvedPropType(prop, options) {
+  const sourceKey = options.typesSrc || "type";
+  return getTypeFromSource(prop.property, sourceKey) ?? getTypeFromSource(prop.attribute, sourceKey) ?? (sourceKey === "type" ? void 0 : getTypeFromSource(prop.property, "type")) ?? (sourceKey === "type" ? void 0 : getTypeFromSource(prop.attribute, "type")) ?? prop.type;
+}
+function getPropType(componentName, prop, propType, options) {
+  if (options.useCemTypes) {
+    return propType?.text || "unknown";
+  }
+  return prop.propName ? `${componentName}['${prop.propName}']` : "unknown";
+}
+function getEventTypeName(eventType, strongEventType, componentName = "", stronglyTyped) {
+  return stronglyTyped ? strongEventType ?? `${componentName}ElementEvent` : eventType;
+}
+function getStrongEventTypes(component) {
+  const eventTypes = component?.events?.filter((e) => e.name)?.map((event) => ({
+    name: event.name,
+    type: event?.type?.text
+  }));
+  if (!eventTypes) {
+    return [];
+  }
+  return eventTypes.filter(
+    (eventType) => eventType.type && eventType.type !== "Event" && eventType.type !== "CustomEvent"
+  ).map((eventType) => {
+    return {
+      name: eventType.name,
+      type: eventType.type.startsWith("{") ? `CustomEvent<${eventType.type}>` : eventType.type,
+      newType: `${component.name}${toPascalCase(eventType.name)}ElementEvent`
+    };
+  });
+}
+function getStronglyTypedEvents(component) {
+  if (!component.events?.length) {
+    return "";
+  }
+  const eventTypes = getStrongEventTypes(component);
+  const types = [
+    `/** \`${component.name}\` component event */
+     export type ${component.name}ElementEvent<E = Event> = TypedEvent<${component.name}, E>;`
+  ];
+  eventTypes.forEach((eventType) => {
+    types.push(
+      `/** \`${eventType.name}\` event type */
+      export type ${eventType.newType} = ${component.name}ElementEvent<${eventType.type}>;`
+    );
+  });
+  return types.join("\n");
+}
+function createOutDir(outDir) {
+  if (outDir !== "./" && !fs.existsSync(outDir)) {
+    fs.mkdirSync(outDir, { recursive: true });
+  }
+}
+function saveFile(outDir, fileName, contents) {
+  const outputPath = path.join(outDir, fileName);
+  fs.writeFileSync(
+    outputPath,
+    prettier.format(contents, { parser: "typescript", printWidth: 80 })
+  );
+  return outputPath;
+}
+
+// src/cem-plugin.ts
+function vuejsTypesPlugin(options = {}) {
+  return {
+    name: "@wc-toolkit/vuejs-types",
+    packageLinkPhase({ customElementsManifest }) {
+      generateVuejsTypes(customElementsManifest, options);
+    }
+  };
+}
+export {
+  generateVuejsTypes,
+  vuejsTypesPlugin
+};