@wc-toolkit/svelte-types 1.0.0

package/dist/index.js

@@ -0,0 +1,797 @@
+// src/type-generator.ts
+import fs from "fs";
+import path from "path";
+import prettier from "@prettier/sync";
+
+// 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;
+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 getComponentPublicMethods(component) {
+  if (!component || !component.members) {
+    return [];
+  }
+  const getParameter = (p) => p.name + getParamType(p) + getParamDefaultValue(p);
+  const getParamType = (p) => p.type?.text ? `${p.optional ? "?" : ""}: ${p.type?.text}` : "";
+  const getParamDefaultValue = (p) => p.default ? ` = ${p.default}` : "";
+  return (
+    // filter to return only public methods
+    component?.members?.filter(
+      (member) => member.kind === "method" && member.privacy !== "private" && member.privacy !== "protected" && !member.name.startsWith("#")
+    )?.map((m) => {
+      m.type = {
+        text: `${m.name}(${m.parameters?.map((p) => getParameter(p)).join(", ") || ""}) => ${m.return?.type?.text || "void"}`
+      };
+      return m;
+    })
+  );
+}
+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;
+  }
+  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 deepMerge(target, source) {
+  if (typeof target !== "object" || target === null) {
+    return source;
+  }
+  if (typeof source !== "object" || source === null) {
+    return target;
+  }
+  const targetObj = target;
+  const sourceObj = source;
+  for (const key of Object.keys(source)) {
+    if (sourceObj[key] instanceof Array) {
+      if (!targetObj[key]) {
+        targetObj[key] = [];
+      }
+      targetObj[key] = targetObj[key].concat(sourceObj[key]);
+    } else if (sourceObj[key] instanceof Object) {
+      if (!targetObj[key]) {
+        targetObj[key] = {};
+      }
+      targetObj[key] = deepMerge(targetObj[key], sourceObj[key]);
+    } else {
+      targetObj[key] = sourceObj[key];
+    }
+  }
+  return targetObj;
+}
+function getComponentDetailsTemplate(component, options, isJsDoc) {
+  if (!component) {
+    throw new Error("Component is required");
+  }
+  const apiOptions = deepMerge(
+    defaultDescriptionOptions,
+    options
+  );
+  let description = getMainComponentDescription(
+    component,
+    apiOptions.descriptionSrc
+  );
+  const headingLevel = createMarkdownHeading(
+    apiOptions.sectionHeadingLevel || 2
+  );
+  apiOptions.order?.forEach((key) => {
+    const componentContent = getApiByOrderOption(component, key);
+    const api = apiOptions.apis ? apiOptions.apis[key] : void 0;
+    if (api && componentContent?.length) {
+      description += `
+
+${headingLevel} ${api.heading}`;
+      description += api.description ? `
+
+${api.description}` : "";
+      description += api.template ? (
+        // @ts-expect-error componentContent takes many shapes
+        `
+
+${api.template(componentContent)}`
+      ) : "";
+    }
+  });
+  if (isJsDoc) {
+    description = description.split("\n").map((x) => ` * ${x}`).join("\n");
+  }
+  return description;
+}
+function getApiByOrderOption(component, api) {
+  if (!component || !api) {
+    return [];
+  }
+  switch (api) {
+    case "attributes":
+      return component.attributes || [];
+    case "properties":
+      return getComponentPublicProperties(component) || [];
+    case "attrsAndProps": {
+      return getAttrsAndProps(component);
+    }
+    case "propsOnly": {
+      return getPropertyOnlyFields(component);
+    }
+    case "events":
+      return component.events || [];
+    case "methods":
+      return getComponentPublicMethods(component);
+    case "slots":
+      return component.slots || [];
+    case "cssProps":
+      return component.cssProperties || [];
+    case "cssParts":
+      return component.cssParts || [];
+    case "cssState":
+      return component.cssStates || [];
+    default:
+      return [];
+  }
+}
+function getMainComponentDescription(component, descriptionSrc) {
+  if (!component) {
+    return "";
+  }
+  let description = (descriptionSrc ? component[descriptionSrc] : component.summary || component.description)?.replace(/\\n/g, "\n") || "";
+  if (component.deprecated) {
+    const deprecation = typeof component.deprecated === "string" ? `@deprecated ${component.deprecated}` : "@deprecated";
+    description = `${deprecation}
+
+${description}`;
+  }
+  return description;
+}
+function getAttrsAndProps(component) {
+  if (!component) {
+    return [];
+  }
+  const attributes = component.attributes?.map((attr) => {
+    return {
+      attrName: attr.name,
+      propName: attr.fieldName,
+      summary: attr.summary,
+      description: attr.description,
+      inheritedFrom: attr.inheritedFrom,
+      type: attr.type,
+      default: attr.default,
+      deprecated: attr.deprecated,
+      static: false,
+      source: void 0,
+      readonly: false
+    };
+  }) || [];
+  const properties = getComponentPublicProperties(component).filter((prop) => {
+    return !attributes?.map((attr) => attr.propName).includes(prop.name);
+  }).map((prop) => {
+    return {
+      attrName: void 0,
+      propName: prop.name,
+      summary: prop.summary,
+      description: prop.description,
+      inheritedFrom: prop.inheritedFrom,
+      type: prop.type,
+      default: prop.default,
+      deprecated: prop.deprecated,
+      static: prop.static,
+      source: prop.source,
+      readonly: prop.readonly
+    };
+  });
+  return [...attributes, ...properties];
+}
+function getPropertyOnlyFields(component) {
+  if (!component) {
+    return [];
+  }
+  const props = getComponentPublicProperties(component) || [];
+  const attrs = component.attributes?.map((attr) => attr.name) || [];
+  return props?.filter(
+    (prop) => !attrs.includes(prop.name) || []
+  );
+}
+function getMemberDescription(description, deprecated) {
+  if (!deprecated) {
+    return description || "";
+  }
+  const desc = description ? `- ${description}` : "";
+  return typeof deprecated === "string" ? `@deprecated ${deprecated} ${desc}` : `@deprecated ${desc}`;
+}
+var defaultDescriptionOptions = {
+  order: [
+    "attrsAndProps",
+    "events",
+    "slots",
+    "methods",
+    "cssProps",
+    "cssParts",
+    "cssState"
+  ],
+  descriptionSrc: "description",
+  apis: {
+    attributes: {
+      heading: "Attributes",
+      description: "HTML attributes that can be applied to this element.",
+      template: (api) => api?.map((attr) => {
+        const getName = (attr2) => attr2.name === attr2.fieldName || !attr2.fieldName ? `\`${attr2.name}\`` : `\`${attr2.name}\`/\`${attr2.fieldName}\``;
+        return `- ${getName(attr)}: ${attr.description}`;
+      }).join("\n") || ""
+    },
+    properties: {
+      heading: "Properties",
+      description: "Properties that can be applied to this element using JavaScript.",
+      template: (api) => api?.map(
+        (prop) => `- \`${prop.name}\`: ${prop.readonly ? "(readonly) " : ""}${prop.description}`
+      ).join("\n") || ""
+    },
+    attrsAndProps: {
+      heading: "Attributes & Properties",
+      description: "Component attributes and properties that can be applied to the element or by using JavaScript.",
+      template: (api) => api?.map((prop) => {
+        const getName = (prop2) => prop2.attrName === prop2.propName || !prop2.attrName ? `\`${prop2.propName}\`` : `\`${prop2.attrName}\`/\`${prop2.propName}\``;
+        return `- ${getName(prop)}: ${prop.description} ${!prop.attrName ? "(property only)" : ""}${prop.readonly ? " (readonly)" : ""}`;
+      }).join("\n") || ""
+    },
+    propsOnly: {
+      heading: "Properties",
+      description: "Properties that can be applied to this element using JavaScript.",
+      template: (api) => api?.map(
+        (prop) => `- \`${prop.name}\`: ${prop.readonly ? "(readonly) " : ""}${prop.description}`
+      ).join("\n") || ""
+    },
+    events: {
+      heading: "Events",
+      description: "Events that will be emitted by the component.",
+      template: (api) => api?.map((event) => `- \`${event.name}\`: ${event.description}`).join("\n") || ""
+    },
+    methods: {
+      heading: "Methods",
+      description: "Methods that can be called to access component functionality.",
+      template: (api) => api?.map((method) => `- \`${method.type.text}\`: ${method.description}`).join("\n") || ""
+    },
+    slots: {
+      heading: "Slots",
+      description: "Areas where markup can be added to the component.",
+      template: (api) => api?.map(
+        (slot) => `- \`${slot.name || "(default)"}\`: ${slot.description}`
+      ).join("\n") || ""
+    },
+    cssProps: {
+      heading: "CSS Custom Properties",
+      description: "CSS variables available for styling the component.",
+      template: (api) => api?.map(
+        (cssProp) => `- \`${cssProp.name}\`: ${cssProp.description} (default: \`${cssProp.default}\`)`
+      ).join("\n") || ""
+    },
+    cssParts: {
+      heading: "CSS Parts",
+      description: "Custom selectors for styling elements within the component.",
+      template: (api) => api?.map((cssPart) => `- \`${cssPart.name}\`: ${cssPart.description}`).join("\n") || ""
+    },
+    cssState: {
+      heading: "CSS States",
+      description: "These can be used to apply styling when a component is in a given state.",
+      template: (api) => api?.map((cssState) => `- \`${cssState.name}\`: ${cssState.description}`).join("\n") || ""
+    }
+  }
+};
+function createMarkdownHeading(level) {
+  const safeLevel = Math.min(Math.max(level, 1), 6);
+  return "#".repeat(safeLevel);
+}
+
+// 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/global-types.ts
+var GLOBAL_PROPS = `
+  /** Content added between the opening and closing tags of the element */
+   children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Specifies the language of the element. */
+  lang?: string;
+  /** Defines the element's semantic role for accessibility APIs. */
+  role?: string;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+   ref?: unknown | ((e: unknown) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+   style?: string;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+   /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: "auto" | "hint" | "manual";
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
+  /** Specifies the action to be performed on a popover element being controlled by a control element. */
+  popovertargetaction?: "show" | "hide" | "toggle";
+`;
+var GLOBAL_EVENTS = `
+  // Mouse Events
+
+  /** Triggered when the element is clicked by the user by mouse or keyboard. */
+  onClick?: (event: MouseEvent) => void;
+  /** Fired when the context menu is triggered, often by right-clicking. */
+  onContextMenu?: (event: MouseEvent) => void;
+  /** Fired when the element is double-clicked. */
+  onDoubleClick?: (event: MouseEvent) => void;
+  /** Fired repeatedly as the draggable element is being dragged. */
+  onDrag?: (event: DragEvent) => void;
+  /** Fired when the dragging of a draggable element is finished. */
+  onDragEnd?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection enters a valid drop target. */
+  onDragEnter?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragExit?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragLeave?: (event: DragEvent) => void;
+  /** Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds). */
+  onDragOver?: (event: DragEvent) => void;
+  /** Fired when a draggable element starts being dragged. */
+  onDragStart?: (event: DragEvent) => void;
+  /** Fired when a dragged element is dropped onto a drop target. */
+  onDrop?: (event: DragEvent) => void;
+  /** Fired when a mouse button is pressed down on the element. */
+  onMouseDown?: (event: MouseEvent) => void;
+  /** Fired when the mouse cursor enters the element. */
+  onMouseEnter?: (event: MouseEvent) => void;
+  /** Triggered when the mouse cursor leaves the element. */
+  onMouseLeave?: (event: MouseEvent) => void;
+  /** Fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it. */
+  onMouseMove?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. */
+  onMouseOut?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements. */
+  onMouseOver?: (event: MouseEvent) => void;
+  /** Fired when a mouse button is released on the element. */
+  onMouseUp?: (event: MouseEvent) => void;
+
+  // Keyboard Events
+
+  /** Fired when a key is pressed down. */
+  onKeyDown?: (event: KeyboardEvent) => void;
+  /** Fired when a key is released.. */
+  onKeyUp?: (event: KeyboardEvent) => void;
+  /** Fired when a key is pressed down. */
+  onKeyPressed?: (event: KeyboardEvent) => void;
+
+  // Focus Events
+
+  /** Fired when the element receives focus, often triggered by tab navigation. */
+  onFocus?: (event: FocusEvent) => void;
+  /** Fired when the element loses focus. */
+  onBlur?: (event: FocusEvent) => void;
+
+  // Form Events
+
+  /** Fired when the value of an input element changes, such as with text inputs or select elements. */
+  onChange?: (event: Event) => void;
+  /** Fires when the value of an <input>, <select>, or <textarea> element has been changed. */
+  onInput?: (event: Event) => void;
+  /** Fired when a form is submitted, usually on pressing Enter in a text input. */
+  onSubmit?: (event: Event) => void;
+  /** Fired when a form is reset. */
+  onReset?: (event: Event) => void;
+
+  // UI Events
+
+  /** Fired when the content of an element is scrolled. */
+  onScroll?: (event: UIEvent) => void;
+
+  // Wheel Events
+
+  /** Fired when the mouse wheel is scrolled while the element is focused. */
+  onWheel?: (event: WheelEvent) => void;
+
+  // Animation Events
+
+  /** Fired when a CSS animation starts. */
+  onAnimationStart?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes. */
+  onAnimationEnd?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes one iteration. */
+  onAnimationIteration?: (event: AnimationEvent) => void;
+
+  // Transition Events
+
+  /** Fired when a CSS transition has completed. */
+  onTransitionEnd?: (event: TransitionEvent) => void;
+
+  // Media Events
+
+  /** Fired when an element (usually an image) finishes loading */
+  onLoad?: (event: Event) => void;
+  /** Fired when an error occurs during the loading of an element, like an image not being found. */
+  onError?: (event: Event) => void;
+
+  // Clipboard Events
+
+  /** Fires when the user initiates a copy action through the browser's user interface. */
+  onCopy?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "cut" action through the browser's user interface. */
+  onCut?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "paste" action through the browser's user interface. */
+  onPaste?: (event: ClipboardEvent) => void;
+`;
+
+// src/type-generator.ts
+var DEFAULT_OPTIONS = {
+  fileName: "custom-elements-svelte.d.ts",
+  outdir: "./",
+  exclude: [],
+  includeModernEventHandlers: true
+};
+function generateSvelteTypes(manifest2, options = {}) {
+  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+  const log = new Logger(mergedOptions.debug);
+  if (mergedOptions.skip) {
+    log.yellow("[svelte-types] - Skipped");
+    return;
+  }
+  if (!manifest2?.modules?.length) {
+    log.red("[svelte-types] - No modules found in the manifest.");
+    return;
+  }
+  if (!mergedOptions.outdir) {
+    log.red("[svelte-types] - No output directory specified.");
+    return;
+  }
+  const template = getTypeTemplate(manifest2, mergedOptions);
+  if (mergedOptions.fileName) {
+    createOutDir(mergedOptions.outdir);
+    const outputPath = saveFile(
+      mergedOptions.outdir,
+      mergedOptions.fileName,
+      template
+    );
+    log.green(`[svelte-types] - Generated "${outputPath}".`);
+  }
+  return template;
+}
+function getTypeTemplate(manifest2, options) {
+  const components2 = getAllComponents(manifest2, options.exclude).filter(
+    (component) => component.customElement && component.name && component.tagName
+  );
+  return `
+${getImports(manifest2, components2, options)}
+
+type BaseProps = {
+${GLOBAL_PROPS}
+};
+
+type BaseEvents = {
+${options.globalEvents ?? ""}
+${options.includeDefaultDOMEvents ? getSvelteGlobalEvents(options.includeModernEventHandlers) : ""}
+};
+
+${components2.map((component) => getComponentPropsTemplate(component, options)).join("\n")}
+${components2.map((component) => getComponentElementTemplate(component, options)).join("\n")}
+
+export type CustomElements = {
+${components2.map((component) => {
+    const tagName = formatTagName(component.tagName, options);
+    return `
+  /**
+    ${getComponentDetailsTemplate(toUtilityComponent(component), options.componentDescriptionOptions, true)}
+  */
+  "${tagName}": Partial<${component.name}Props & BaseProps & BaseEvents>;`;
+  }).join("\n")}
+};
+
+declare namespace svelteHTML {
+  interface IntrinsicElements extends CustomElements {}
+}
+`;
+}
+function getImports(manifest2, components2, options) {
+  const names = /* @__PURE__ */ new Map();
+  for (const component of components2) {
+    const importPath = options.globalTypePath ? options.globalTypePath : typeof options.componentTypePath === "function" ? options.componentTypePath(
+      component.name,
+      component.tagName,
+      getComponentModulePath(manifest2, component)
+    ) : void 0;
+    if (!importPath) continue;
+    addImport(names, importPath, component.name);
+    for (const eventType of getCustomEventDetailTypes(
+      toUtilityComponent(component),
+      [component.name]
+    )) {
+      addImport(names, importPath, eventType);
+    }
+  }
+  return [...names.entries()].map(
+    ([importPath, exports]) => `import type { ${[...exports].join(", ")} } from "${importPath}";`
+  ).join("\n");
+}
+function getComponentPropsTemplate(component, options) {
+  const typeFor = (name, source, fallback) => {
+    if (options.globalTypePath || options.componentTypePath) {
+      return `${component.name}['${name}']`;
+    }
+    const configured = getConfiguredType(source, options.typesSrc);
+    return configured?.text || fallback?.text || "string";
+  };
+  const attributes = (component.attributes ?? []).map(
+    (attribute) => `  /** ${getMemberDescription(attribute.description, attribute.deprecated)} */
+          "${attribute.name}"?: ${typeFor(attribute.fieldName || attribute.name, attribute, attribute.type)};`
+  ).join("\n");
+  const publicProperties = getComponentPublicProperties(
+    toUtilityComponent(component)
+  ).filter((property) => !property.readonly && !property.static).filter(
+    (property) => !(component.attributes ?? []).some(
+      (attribute) => attribute.fieldName === property.name
+    )
+  );
+  const properties = publicProperties.map(
+    (property) => `  /** ${getMemberDescription(property.description, property.deprecated)} */
+   "${property.name}"?: ${typeFor(property.name, property, property.type)};`
+  ).join("\n");
+  const events = (component.events ?? []).map((event) => {
+    const eventType = event.type?.text || "Event";
+    const handlers = [`  "on:${event.name}"?: (e: ${eventType}) => void;`];
+    if (options.includeModernEventHandlers) {
+      handlers.push(`  "on${event.name}"?: (e: ${eventType}) => void;`);
+    }
+    return `  /** ${getMemberDescription(event.description, event.deprecated)} */
+${handlers.join("\n")}`;
+  }).join("\n");
+  const cssProperties = (component.cssProperties ?? []).map(
+    (property) => `  /** ${getMemberDescription(property.description, property.deprecated)} */
+  "style:${property.name}"?: string | number;`
+  ).join("\n");
+  return `export type ${component.name}Props = {
+${attributes}
+${properties}
+${events}
+${cssProperties}
+};`;
+}
+function addImport(imports, importPath, name) {
+  if (!imports.has(importPath)) imports.set(importPath, /* @__PURE__ */ new Set());
+  imports.get(importPath).add(name);
+}
+function getComponentElementTemplate(component, options) {
+  const elementType = `${component.name}Element`;
+  const slots = component.slots?.map((slot) => JSON.stringify(slot.name)) ?? [];
+  const slotType = slots.length ? `export type ${component.name}Slots = ${slots.join(" | ")};` : "";
+  if (options.globalTypePath || options.componentTypePath) {
+    return `export type ${elementType} = ${component.name};
+${slotType}`;
+  }
+  const methods = getComponentPublicMethods(toUtilityComponent(component)).filter((method) => !method.static).map((method) => {
+    const parameters = (method.parameters ?? []).map((parameter) => {
+      const optional = parameter.optional ? "?" : "";
+      const rest = parameter.rest ? "..." : "";
+      return `${rest}${parameter.name}${optional}: ${parameter.type?.text || "unknown"}`;
+    }).join(", ");
+    return `  /** ${getMemberDescription(method.description, method.deprecated)} */
+  ${method.name}(${parameters}): ${method.return?.type?.text || "void"};`;
+  }).join("\n");
+  return `export interface ${elementType} extends HTMLElement {
+${methods}
+}
+${slotType}`;
+}
+function formatTagName(tagName, options) {
+  return options.tagFormatter ? options.tagFormatter(tagName) : tagName;
+}
+function toUtilityComponent(component) {
+  return component;
+}
+function getConfiguredType(source, sourceKey) {
+  if (!sourceKey || !source || typeof source !== "object") return void 0;
+  const value = source[sourceKey];
+  return value && typeof value === "object" && "text" in value ? value : void 0;
+}
+function getComponentModulePath(manifest2, component) {
+  return manifest2.modules.find(
+    (module) => module.declarations?.some(
+      (declaration) => declaration.name === component.name
+    )
+  )?.path;
+}
+function getSvelteGlobalEvents(includeModern) {
+  return GLOBAL_EVENTS.replace(
+    /^(\s*)on([A-Z][\w]*)(\?:.*)$/gm,
+    (_, indent, name, declaration) => {
+      const eventName = name.toLowerCase();
+      const handlers = [`${indent}"on:${eventName}"${declaration}`];
+      if (includeModern) handlers.push(`${indent}on${eventName}${declaration}`);
+      return handlers.join("\n");
+    }
+  );
+}
+function createOutDir(outDir) {
+  if (!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: 120 })
+  );
+  return outputPath;
+}
+
+// src/cem-plugin.ts
+function customElementSveltePlugin(options = {}) {
+  return {
+    name: "@wc-toolkit/svelte-types",
+    packageLinkPhase({ customElementsManifest }) {
+      generateSvelteTypes(customElementsManifest, options);
+    }
+  };
+}
+export {
+  customElementSveltePlugin,
+  generateSvelteTypes
+};