@yoyaflow/yoya-ui 0.1.0

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@yoyaflow/yoya-ui",
+  "version": "0.1.0",
+  "description": "A browser-native UI library that replaces React/Vue-style frameworks: declarative HTML authoring, component library, router, i18n and layout, with zero build steps.",
+  "type": "module",
+  "private": false,
+  "main": "./dist/yoya-ui.umd.js",
+  "module": "./dist/yoya.ui.js",
+  "style": "./dist/yoya.ui.css",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/yoya.ui.js",
+      "require": "./dist/yoya-ui.umd.js"
+    },
+    "./core": {
+      "types": "./types/yoya.core.d.ts",
+      "import": "./dist/yoya.core.js"
+    },
+    "./echart": {
+      "types": "./types/yoya.echart.d.ts",
+      "import": "./dist/yoya.echart.js"
+    },
+    "./ssr": {
+      "types": "./types/yoya.ssr.d.ts",
+      "import": "./dist/yoya.ssr.js"
+    },
+    "./ui": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/yoya.ui.js"
+    },
+    "./ui.css": "./dist/yoya.ui.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "!types/tests",
+    "!dist/examples"
+  ],
+  "scripts": {
+    "build": "node scripts/build-entries.mjs && vite build --config vite.umd.config.js && vite build --config vite.examples.config.js && node scripts/copy-example-modules.mjs",
+    "build:entries": "node scripts/build-entries.mjs",
+    "build:examples": "vite build --config vite.examples.config.js && node scripts/copy-example-modules.mjs",
+    "build:umd": "vite build --config vite.umd.config.js",
+    "examples:html": "vite --config vite.examples.config.js --host 0.0.0.0",
+    "examples:i18n": "vite --config vite.examples.config.js --host 0.0.0.0 --port 5174",
+    "examples:layout": "vite --config vite.examples.config.js --host 0.0.0.0 --port 5175",
+    "examples:svg": "vite --config vite.examples.config.js --host 0.0.0.0 --port 5176",
+    "examples:router": "vite --config vite.examples.config.js --host 0.0.0.0 --port 5177",
+    "examples:admin": "vite --config vite.examples.config.js --host 0.0.0.0 --port 5179",
+    "examples:components": "vite --config vite.examples.config.js --host 0.0.0.0 --port 5178",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc -p tsconfig.json",
+    "test:types": "npm run typecheck"
+  },
+  "keywords": [
+    "vite",
+    "vanilla-js",
+    "ui",
+    "web-components",
+    "frontend"
+  ],
+  "author": "zhanglj",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yoyaflow/yoya-ui.git"
+  },
+  "homepage": "https://github.com/yoyaflow/yoya-ui#readme",
+  "bugs": {
+    "url": "https://github.com/yoyaflow/yoya-ui/issues"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@preact/signals-core": "^1.14.4",
+    "eslint": "^10.8.1",
+    "globals": "^17.11.0",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.9.6",
+    "typescript": "^7.0.2",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10"
+  }
+}

package/types/actions.d.ts

@@ -0,0 +1,166 @@
+import type {
+  AttrValue,
+  ChildInput,
+  ElementFactory,
+  ElementOptions,
+  SetupCallback,
+  SetupInput
+} from './core.js';
+import type { HtmlElementNode } from './html.js';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonFormType = 'button' | 'submit' | 'reset';
+export type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+
+/** Compound button component. */
+export class VButton extends HtmlElementNode {
+  label(content: ChildInput): VButton;
+  content(content: ChildInput): VButton;
+  type(): ButtonVariant;
+  type(value: ButtonVariant): VButton;
+  variant(): ButtonVariant;
+  variant(value: ButtonVariant): VButton;
+  formType(): string;
+  formType(value: ButtonFormType): VButton;
+  size(): ButtonSize;
+  size(value: ButtonSize): VButton;
+  disabled(): boolean;
+  disabled(value: boolean): VButton;
+  loading(): boolean;
+  loading(value: boolean): VButton;
+}
+
+/** Button group with selection state. */
+export class VButtons extends HtmlElementNode {
+  child(...children: ChildInput[]): this;
+  variant(): ButtonVariant;
+  variant(value: ButtonVariant): VButtons;
+  size(): ButtonSize;
+  size(value: ButtonSize): VButtons;
+  selectable(value?: boolean): VButtons;
+  value(): unknown;
+  value(next: unknown): VButtons;
+  change(): ((value: unknown, buttons: VButtons) => void) | null;
+  change(handler: ((value: unknown, buttons: VButtons) => void) | null): VButtons;
+  joined(value?: boolean): VButtons;
+  disabled(value: boolean): VButtons;
+  options(): VButton[];
+  options(
+    items:
+      VButton | string | number | ButtonOption | Array<VButton | string | number | ButtonOption>
+  ): VButtons;
+}
+
+export interface ButtonOption {
+  label?: ChildInput;
+  value?: unknown;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+/** Floating action button. */
+export class VFloatButton extends HtmlElementNode {
+  icon(content: ChildInput): VFloatButton;
+  label(content: ChildInput): VFloatButton;
+  content(content: ChildInput): VFloatButton;
+  text(content: ChildInput): this;
+  variant(): ButtonVariant;
+  variant(value: ButtonVariant): VFloatButton;
+  type(): ButtonVariant;
+  type(value: ButtonVariant): VFloatButton;
+  size(): ButtonSize;
+  size(value: ButtonSize): VFloatButton;
+  disabled(): boolean;
+  disabled(value: boolean): VFloatButton;
+  fixed(value?: boolean): VFloatButton;
+  position(): string;
+  position(value: string): VFloatButton;
+}
+
+/** Icon/symbol-only button without border or outline. */
+export class VSymbolButton extends HtmlElementNode {
+  icon(content: ChildInput): VSymbolButton;
+  ariaLabel(): AttrValue | undefined;
+  ariaLabel(value: string): VSymbolButton;
+}
+
+/** Dropdown menu anchored to a trigger. */
+export class VDropdownMenu extends HtmlElementNode {
+  trigger(): HtmlElementNode;
+  trigger(setup: SetupInput<HtmlElementNode>): VDropdownMenu;
+  menuContent(): HtmlElementNode;
+  menuContent(setup: SetupInput<HtmlElementNode>): VDropdownMenu;
+  placement(): string;
+  placement(value: DropdownPlacement): VDropdownMenu;
+  closeOnSelect(value?: boolean): VDropdownMenu;
+  open(value?: boolean): VDropdownMenu;
+  close(): VDropdownMenu;
+  toggle(): VDropdownMenu;
+}
+
+/** Right-click context menu. */
+export class VContextMenu extends HtmlElementNode {
+  target(): HtmlElementNode;
+  target(setup: SetupInput<HtmlElementNode>): VContextMenu;
+  menuContent(): HtmlElementNode;
+  menuContent(setup: SetupInput<HtmlElementNode>): VContextMenu;
+  closeOnSelect(value?: boolean): VContextMenu;
+  openAt(
+    pointOrX?: number | MouseEvent | { clientX?: number; clientY?: number; x?: number; y?: number },
+    y?: number
+  ): VContextMenu;
+  open(value?: boolean): VContextMenu;
+  close(): VContextMenu;
+}
+
+export const vButton: ElementFactory<VButton> & {
+  (first?: SetupInput<VButton> | null, callback?: SetupCallback<VButton>): VButton;
+};
+export const vButtons: ElementFactory<VButtons> & {
+  (first?: SetupInput<VButtons> | null, callback?: SetupCallback<VButtons>): VButtons;
+};
+export const vFloatButton: ElementFactory<VFloatButton> & {
+  (first?: SetupInput<VFloatButton> | null, callback?: SetupCallback<VFloatButton>): VFloatButton;
+};
+export const vSymbolButton: ElementFactory<VSymbolButton> & {
+  (
+    first?: SetupInput<VSymbolButton> | null,
+    callback?: SetupCallback<VSymbolButton>
+  ): VSymbolButton;
+};
+export const vDropdownMenu: ElementFactory<VDropdownMenu> & {
+  (
+    first?: SetupInput<VDropdownMenu> | null,
+    callback?: SetupCallback<VDropdownMenu>
+  ): VDropdownMenu;
+};
+export const vContextMenu: ElementFactory<VContextMenu> & {
+  (first?: SetupInput<VContextMenu> | null, callback?: SetupCallback<VContextMenu>): VContextMenu;
+};
+
+/** Parent-shortcut surface merged onto HtmlElementNode. */
+export interface ActionsParentShortcuts {
+  vButton(first?: SetupInput<VButton> | null, callback?: SetupCallback<VButton>): VButton;
+  vButtons(first?: SetupInput<VButtons> | null, callback?: SetupCallback<VButtons>): VButtons;
+  vFloatButton(
+    first?: SetupInput<VFloatButton> | null,
+    callback?: SetupCallback<VFloatButton>
+  ): VFloatButton;
+  vSymbolButton(
+    first?: SetupInput<VSymbolButton> | null,
+    callback?: SetupCallback<VSymbolButton>
+  ): VSymbolButton;
+  vDropdownMenu(
+    first?: SetupInput<VDropdownMenu> | null,
+    callback?: SetupCallback<VDropdownMenu>
+  ): VDropdownMenu;
+  vContextMenu(
+    first?: SetupInput<VContextMenu> | null,
+    callback?: SetupCallback<VContextMenu>
+  ): VContextMenu;
+}
+
+export type { ElementOptions };

package/types/async.d.ts

@@ -0,0 +1,58 @@
+import type { ChildInput, ElementNode, ElementOptions, SetupCallback, SetupInput } from './core.js';
+
+export type DynamicLoaderStatus = 'pending' | 'loading' | 'loaded' | 'error';
+
+export interface DynamicLoaderViews {
+  pending?: ChildInput | ((payload: unknown, node: DynamicLoaderNode) => ChildInput);
+  loading?: ChildInput | ((payload: unknown, node: DynamicLoaderNode) => ChildInput);
+  loaded?: ChildInput | ((payload: unknown, node: DynamicLoaderNode) => ChildInput);
+  error?: ChildInput | ((payload: unknown, node: DynamicLoaderNode) => ChildInput);
+}
+
+export interface DynamicLoaderOptions {
+  loader: () => unknown | Promise<unknown>;
+  auto?: boolean;
+  cacheKey?: string | null;
+  onStateChange?: (status: DynamicLoaderStatus, payload: unknown, node: DynamicLoaderNode) => void;
+  views?: DynamicLoaderViews;
+}
+
+/** Lazy module loader node with status views. */
+export interface DynamicLoaderNode extends ElementNode {
+  status(): DynamicLoaderStatus;
+  state(): DynamicLoaderStatus;
+  module(): unknown;
+  value(): unknown;
+  loadError(): unknown;
+  error(): unknown;
+  load(): Promise<unknown>;
+  retry(): Promise<unknown>;
+  preload(): Promise<unknown>;
+  clearCache(): DynamicLoaderNode;
+}
+
+/** Creates a lazy-loading node; loader may be a function or a cache-keyed option object. */
+export function vDynamicLoader(
+  first?:
+    | DynamicLoaderOptions
+    | (() => unknown | Promise<unknown>)
+    | SetupCallback<DynamicLoaderNode>
+    | null,
+  options?: ElementOptions,
+  callback?: SetupCallback<DynamicLoaderNode>
+): DynamicLoaderNode;
+
+/** Preloads a module into the shared cache. */
+export function preloadDynamicModule(
+  cacheKey: string,
+  loader: () => unknown | Promise<unknown>
+): Promise<unknown>;
+
+/** Clears the shared module cache (all entries when cacheKey is omitted). */
+export function clearDynamicModuleCache(cacheKey?: string | null): void;
+
+/**
+ * Parent-shortcut surface merged onto HtmlElementNode. vDynamicLoader is
+ * registered on ElementNode and inherited, so it is declared there.
+ */
+export interface AsyncParentShortcuts {}

package/types/chart.d.ts

@@ -0,0 +1,40 @@
+import type { ElementFactory, ElementOptions, SetupCallback, SetupInput } from './core.js';
+import type { HtmlElementNode } from './html.js';
+
+/** Minimal ECharts module shape accepted by echartsLib(). */
+export interface EChartsLib {
+  init(element: HTMLElement, theme?: unknown, opts?: unknown): unknown;
+  [key: string]: any;
+}
+
+/** ECharts component (the echarts library itself is not bundled). */
+export class VEchart extends HtmlElementNode {
+  echartsLib(lib: EChartsLib): VEchart;
+  option(value: Record<string, any>): VEchart;
+  width(): number | string;
+  width(value: number | string): VEchart;
+  height(): number | string;
+  height(value: number | string): VEchart;
+  theme(value: string): VEchart;
+  renderer(value: 'canvas' | 'svg' | string): VEchart;
+  devicePixelRatio(value: number): VEchart;
+  autoResize(value: boolean): VEchart;
+  loading(value: boolean, text?: string): VEchart;
+  onChartReady(callback: (chart: unknown) => void): VEchart;
+  onChartResize(callback: (width: number, height: number) => void): VEchart;
+  getChartInstance(): unknown;
+  resize(opts?: { width?: number | string; height?: number | string }): VEchart;
+  clear(): VEchart;
+  dispose(): VEchart;
+}
+
+export const vEchart: ElementFactory<VEchart> & {
+  (first?: SetupInput<VEchart> | null, callback?: SetupCallback<VEchart>): VEchart;
+};
+
+/** Parent-shortcut surface merged onto HtmlElementNode. */
+export interface ChartParentShortcuts {
+  vEchart(first?: SetupInput<VEchart> | null, callback?: SetupCallback<VEchart>): VEchart;
+}
+
+export type { ElementOptions };