@ydgp/core-types

Small TypeScript primitives for describing and registering web components.

The package currently exports:

• YfWebElement: a typed wrapper around a custom element constructor and its tag name
• defineWebComponent(...): a safe registration helper that only calls customElements.define(...) when the tag is not already registered
• YfWebElementAttributes and YfWebElementListener: base type aliases for generic typing
• Writable, DeepWritable, DeepPartial, and OmitNever: utility conditional types for reshaping TypeScript object types

Installation

npm install @ydgp/core-types

Usage

import { YfWebElement, defineWebComponent } from '@ydgp/core-types';

class HelloCard extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello';
  }
}

const helloCard = new YfWebElement('hello-card', HelloCard);

defineWebComponent(helloCard);

API

YfWebElement

new YfWebElement<A, L>(tagName, element)

Stores:

• tagName: the custom element tag to register
• element: the CustomElementConstructor

The generic parameters A and L are available for consumers that want to associate attribute and listener typings with a component definition.

defineWebComponent

defineWebComponent(webElement)

Registers the custom element if customElements.get(webElement.tagName) does not already return a definition.

Conditional Types

• Writable<T>: removes readonly from the top-level properties of T
• DeepWritable<T>: recursively removes readonly from nested object properties
• DeepPartial<T>: recursively makes all properties optional
• OmitNever<T>: removes keys whose value type resolves to never

Runtime Notes

• This package targets browser environments with the Custom Elements API.
• TypeScript is compiled to ESM output in dist/.
• The package ships type declarations via dist/index.d.mts.

Development

npm run lint
npm run build