sibujs 1.0.0-beta.1

package/dist/ecosystem.d.cts

@@ -0,0 +1,247 @@
+import { T as TagProps } from './tagFactory-DeAXq9ef.cjs';
+
+interface PluginContext {
+    /** Register a global hook */
+    onInit: (callback: () => void) => void;
+    onMount: (callback: (element: HTMLElement) => void) => void;
+    onUnmount: (callback: (element: HTMLElement) => void) => void;
+    onError: (callback: (error: Error) => void) => void;
+    /** Provide a value globally */
+    provide: (key: string, value: unknown) => void;
+}
+interface SibuPlugin {
+    name: string;
+    install: (ctx: PluginContext, options?: unknown) => void;
+}
+
+/** MobX autorun disposer function type. */
+type MobXReactionDisposer = () => void;
+interface MobXAdapterOptions {
+    /** MobX's autorun function — passed to avoid importing MobX directly. */
+    autorun: (view: () => void) => MobXReactionDisposer;
+}
+interface MobXAdapterAPI {
+    /**
+     * Bridge a MobX observable into a SibuJS reactive getter.
+     *
+     * Takes a MobX expression (function reading MobX observables)
+     * and returns a SibuJS getter that updates when the observables change.
+     */
+    fromMobX: <T>(expression: () => T) => () => T;
+    /**
+     * Bridge a SibuJS getter into a MobX reaction.
+     *
+     * Runs a callback whenever a SibuJS signal changes.
+     */
+    toMobX: (sibuGetter: () => unknown, callback: (value: unknown) => void) => () => void;
+    /** Dispose all active bridges. */
+    destroy: () => void;
+}
+/**
+ * Creates a MobX adapter plugin for SibuJS.
+ *
+ * Unlike Redux/Zustand, MobX has distributed observables rather than
+ * a single store. The adapter provides `fromMobX()` to bridge any
+ * MobX expression into a SibuJS reactive getter.
+ *
+ * @example
+ * ```ts
+ * import { mobXAdapter } from "sibu/extras";
+ * import { autorun, makeAutoObservable } from "mobx";
+ *
+ * class TodoStore {
+ *   todos: string[] = [];
+ *   constructor() { makeAutoObservable(this); }
+ *   addTodo(t: string) { this.todos.push(t); }
+ * }
+ *
+ * const todoStore = new TodoStore();
+ * const plugin = mobXAdapter({ autorun });
+ * plugin(plugin);
+ *
+ * const mobx = inject<MobXAdapterAPI>("mobx");
+ * const todoCount = mobx.fromMobX(() => todoStore.todos.length);
+ * div({ nodes: () => `Todos: ${todoCount()}` });
+ * ```
+ */
+declare function mobXAdapter(options: MobXAdapterOptions): SibuPlugin;
+
+/** Minimal Redux store interface (peer dependency — no import from redux). */
+interface ReduxStore<S = unknown> {
+    getState(): S;
+    dispatch(action: unknown): unknown;
+    subscribe(listener: () => void): () => void;
+}
+interface ReduxAdapterOptions<S = unknown> {
+    store: ReduxStore<S>;
+}
+interface ReduxAdapterAPI<S = unknown> {
+    /** Full store state as a SibuJS reactive getter */
+    getState: () => S;
+    /** Create a SibuJS reactive getter from a Redux selector */
+    useSelector: <R>(selector: (state: S) => R) => () => R;
+    /** Dispatch an action to the Redux store */
+    dispatch: ReduxStore<S>["dispatch"];
+    /** Unsubscribe from the Redux store */
+    destroy: () => void;
+}
+/**
+ * Creates a Redux adapter plugin for SibuJS.
+ *
+ * Bridges Redux store subscriptions into SibuJS signal-based reactivity.
+ * Each selector becomes a reactive getter that auto-updates when Redux
+ * state changes.
+ *
+ * @example
+ * ```ts
+ * import { reduxAdapter } from "sibu/extras";
+ * import { createStore } from "redux";
+ *
+ * const reduxStore = createStore(rootReducer);
+ * const reduxPlugin = reduxAdapter({ store: reduxStore });
+ * plugin(reduxPlugin);
+ *
+ * const redux = inject<ReduxAdapterAPI>("redux");
+ * const count = redux.useSelector(s => s.counter);
+ * div({ nodes: () => `Count: ${count()}` });
+ * ```
+ */
+declare function reduxAdapter<S>(options: ReduxAdapterOptions<S>): SibuPlugin;
+
+/** Minimal Zustand store interface (peer dependency). */
+interface ZustandStore<S> {
+    getState(): S;
+    setState(partial: Partial<S> | ((state: S) => Partial<S>), replace?: boolean): void;
+    subscribe(listener: (state: S, prevState: S) => void): () => void;
+    destroy(): void;
+}
+interface ZustandAdapterOptions<S> {
+    store: ZustandStore<S>;
+}
+interface ZustandAdapterAPI<S> {
+    /** Full Zustand state as a SibuJS reactive getter */
+    getState: () => S;
+    /** Create a SibuJS reactive getter from a Zustand selector */
+    useSelector: <R>(selector: (state: S) => R) => () => R;
+    /** Set state on the Zustand store */
+    setState: ZustandStore<S>["setState"];
+    /** Destroy the subscription and the Zustand store */
+    destroy: () => void;
+}
+/**
+ * Creates a Zustand adapter plugin for SibuJS.
+ *
+ * @example
+ * ```ts
+ * import { zustandAdapter } from "sibu/extras";
+ * import { createStore } from "zustand/vanilla";
+ *
+ * const bearStore = createStore((set) => ({
+ *   bears: 0,
+ *   increase: () => set((s) => ({ bears: s.bears + 1 })),
+ * }));
+ *
+ * const plugin = zustandAdapter({ store: bearStore });
+ * plugin(plugin);
+ *
+ * const zs = inject<ZustandAdapterAPI>("zustand");
+ * const bears = zs.useSelector(s => s.bears);
+ * div({ nodes: () => `Bears: ${bears()}` });
+ * ```
+ */
+declare function zustandAdapter<S>(options: ZustandAdapterOptions<S>): SibuPlugin;
+
+interface ThemeConfig {
+    /** CSS class prefix for the design system (e.g., "mdc", "ant", "chakra") */
+    prefix: string;
+    /** CSS variables to inject as custom properties */
+    variables?: Record<string, string>;
+    /** Overrides for default class mappings */
+    classOverrides?: Record<string, string>;
+}
+interface ThemeAPI {
+    /** Get the current theme config reactively */
+    config: () => ThemeConfig;
+    /** Update the theme */
+    setTheme: (config: Partial<ThemeConfig>) => void;
+    /** Resolve a component class name using prefix and overrides */
+    resolveClass: (component: string, variant?: string) => string;
+}
+/**
+ * Creates a reactive theme for a UI component library adapter.
+ */
+declare function createTheme(initial: ThemeConfig): ThemeAPI;
+interface ComponentMapping {
+    /** HTML tag to use (default: "div") */
+    tag?: string;
+    /** Base CSS class for this component */
+    baseClass: string;
+    /** Variant-to-class mapping */
+    variants?: Record<string, string>;
+    /** Size-to-class mapping */
+    sizes?: Record<string, string>;
+    /** Additional default props */
+    defaultProps?: Partial<TagProps>;
+}
+interface AdapterConfig {
+    /** Name of the CSS framework */
+    name: string;
+    /** CSS class prefix */
+    prefix: string;
+    /** Component mappings */
+    components: Record<string, ComponentMapping>;
+}
+interface AdaptedComponentProps extends TagProps {
+    /** Component variant (e.g., "primary", "outlined") */
+    variant?: string;
+    /** Component size (e.g., "sm", "md", "lg") */
+    size?: string;
+}
+type AdaptedComponent = (props?: AdaptedComponentProps) => Element;
+/**
+ * Creates a set of SibuJS components from a CSS framework's class mappings.
+ *
+ * @example
+ * ```ts
+ * const adapter = componentAdapter({
+ *   name: "material",
+ *   prefix: "mdc",
+ *   components: {
+ *     Button: {
+ *       tag: "button",
+ *       baseClass: "mdc-button",
+ *       variants: { raised: "mdc-button--raised" },
+ *       sizes: { sm: "mdc-button--dense" },
+ *     },
+ *   },
+ * });
+ *
+ * const { Button } = adapter.components;
+ * Button({ variant: "raised", nodes: "Click me" });
+ * ```
+ */
+declare function componentAdapter(config: AdapterConfig): {
+    name: string;
+    components: Record<string, AdaptedComponent>;
+    theme: ThemeAPI;
+};
+
+declare const antdAdapter: {
+    name: string;
+    components: Record<string, AdaptedComponent>;
+    theme: ThemeAPI;
+};
+
+declare const chakraAdapter: {
+    name: string;
+    components: Record<string, AdaptedComponent>;
+    theme: ThemeAPI;
+};
+
+declare const materialAdapter: {
+    name: string;
+    components: Record<string, AdaptedComponent>;
+    theme: ThemeAPI;
+};
+
+export { type AdaptedComponent, type AdaptedComponentProps, type AdapterConfig, type ComponentMapping, type MobXAdapterAPI, type MobXAdapterOptions, type MobXReactionDisposer, type ReduxAdapterAPI, type ReduxAdapterOptions, type ReduxStore, type ThemeAPI, type ThemeConfig, type ZustandAdapterAPI, type ZustandAdapterOptions, type ZustandStore, antdAdapter, chakraAdapter, componentAdapter, createTheme, materialAdapter, mobXAdapter, reduxAdapter, zustandAdapter };

package/dist/ecosystem.d.ts

@@ -0,0 +1,247 @@
+import { T as TagProps } from './tagFactory-DeAXq9ef.js';
+
+interface PluginContext {
+    /** Register a global hook */
+    onInit: (callback: () => void) => void;
+    onMount: (callback: (element: HTMLElement) => void) => void;
+    onUnmount: (callback: (element: HTMLElement) => void) => void;
+    onError: (callback: (error: Error) => void) => void;
+    /** Provide a value globally */
+    provide: (key: string, value: unknown) => void;
+}
+interface SibuPlugin {
+    name: string;
+    install: (ctx: PluginContext, options?: unknown) => void;
+}
+
+/** MobX autorun disposer function type. */
+type MobXReactionDisposer = () => void;
+interface MobXAdapterOptions {
+    /** MobX's autorun function — passed to avoid importing MobX directly. */
+    autorun: (view: () => void) => MobXReactionDisposer;
+}
+interface MobXAdapterAPI {
+    /**
+     * Bridge a MobX observable into a SibuJS reactive getter.
+     *
+     * Takes a MobX expression (function reading MobX observables)
+     * and returns a SibuJS getter that updates when the observables change.
+     */
+    fromMobX: <T>(expression: () => T) => () => T;
+    /**
+     * Bridge a SibuJS getter into a MobX reaction.
+     *
+     * Runs a callback whenever a SibuJS signal changes.
+     */
+    toMobX: (sibuGetter: () => unknown, callback: (value: unknown) => void) => () => void;
+    /** Dispose all active bridges. */
+    destroy: () => void;
+}
+/**
+ * Creates a MobX adapter plugin for SibuJS.
+ *
+ * Unlike Redux/Zustand, MobX has distributed observables rather than
+ * a single store. The adapter provides `fromMobX()` to bridge any
+ * MobX expression into a SibuJS reactive getter.
+ *
+ * @example
+ * ```ts
+ * import { mobXAdapter } from "sibu/extras";
+ * import { autorun, makeAutoObservable } from "mobx";
+ *
+ * class TodoStore {
+ *   todos: string[] = [];
+ *   constructor() { makeAutoObservable(this); }
+ *   addTodo(t: string) { this.todos.push(t); }
+ * }
+ *
+ * const todoStore = new TodoStore();
+ * const plugin = mobXAdapter({ autorun });
+ * plugin(plugin);
+ *
+ * const mobx = inject<MobXAdapterAPI>("mobx");
+ * const todoCount = mobx.fromMobX(() => todoStore.todos.length);
+ * div({ nodes: () => `Todos: ${todoCount()}` });
+ * ```
+ */
+declare function mobXAdapter(options: MobXAdapterOptions): SibuPlugin;
+
+/** Minimal Redux store interface (peer dependency — no import from redux). */
+interface ReduxStore<S = unknown> {
+    getState(): S;
+    dispatch(action: unknown): unknown;
+    subscribe(listener: () => void): () => void;
+}
+interface ReduxAdapterOptions<S = unknown> {
+    store: ReduxStore<S>;
+}
+interface ReduxAdapterAPI<S = unknown> {
+    /** Full store state as a SibuJS reactive getter */
+    getState: () => S;
+    /** Create a SibuJS reactive getter from a Redux selector */
+    useSelector: <R>(selector: (state: S) => R) => () => R;
+    /** Dispatch an action to the Redux store */
+    dispatch: ReduxStore<S>["dispatch"];
+    /** Unsubscribe from the Redux store */
+    destroy: () => void;
+}
+/**
+ * Creates a Redux adapter plugin for SibuJS.
+ *
+ * Bridges Redux store subscriptions into SibuJS signal-based reactivity.
+ * Each selector becomes a reactive getter that auto-updates when Redux
+ * state changes.
+ *
+ * @example
+ * ```ts
+ * import { reduxAdapter } from "sibu/extras";
+ * import { createStore } from "redux";
+ *
+ * const reduxStore = createStore(rootReducer);
+ * const reduxPlugin = reduxAdapter({ store: reduxStore });
+ * plugin(reduxPlugin);
+ *
+ * const redux = inject<ReduxAdapterAPI>("redux");
+ * const count = redux.useSelector(s => s.counter);
+ * div({ nodes: () => `Count: ${count()}` });
+ * ```
+ */
+declare function reduxAdapter<S>(options: ReduxAdapterOptions<S>): SibuPlugin;
+
+/** Minimal Zustand store interface (peer dependency). */
+interface ZustandStore<S> {
+    getState(): S;
+    setState(partial: Partial<S> | ((state: S) => Partial<S>), replace?: boolean): void;
+    subscribe(listener: (state: S, prevState: S) => void): () => void;
+    destroy(): void;
+}
+interface ZustandAdapterOptions<S> {
+    store: ZustandStore<S>;
+}
+interface ZustandAdapterAPI<S> {
+    /** Full Zustand state as a SibuJS reactive getter */
+    getState: () => S;
+    /** Create a SibuJS reactive getter from a Zustand selector */
+    useSelector: <R>(selector: (state: S) => R) => () => R;
+    /** Set state on the Zustand store */
+    setState: ZustandStore<S>["setState"];
+    /** Destroy the subscription and the Zustand store */
+    destroy: () => void;
+}
+/**
+ * Creates a Zustand adapter plugin for SibuJS.
+ *
+ * @example
+ * ```ts
+ * import { zustandAdapter } from "sibu/extras";
+ * import { createStore } from "zustand/vanilla";
+ *
+ * const bearStore = createStore((set) => ({
+ *   bears: 0,
+ *   increase: () => set((s) => ({ bears: s.bears + 1 })),
+ * }));
+ *
+ * const plugin = zustandAdapter({ store: bearStore });
+ * plugin(plugin);
+ *
+ * const zs = inject<ZustandAdapterAPI>("zustand");
+ * const bears = zs.useSelector(s => s.bears);
+ * div({ nodes: () => `Bears: ${bears()}` });
+ * ```
+ */
+declare function zustandAdapter<S>(options: ZustandAdapterOptions<S>): SibuPlugin;
+
+interface ThemeConfig {
+    /** CSS class prefix for the design system (e.g., "mdc", "ant", "chakra") */
+    prefix: string;
+    /** CSS variables to inject as custom properties */
+    variables?: Record<string, string>;
+    /** Overrides for default class mappings */
+    classOverrides?: Record<string, string>;
+}
+interface ThemeAPI {
+    /** Get the current theme config reactively */
+    config: () => ThemeConfig;
+    /** Update the theme */
+    setTheme: (config: Partial<ThemeConfig>) => void;
+    /** Resolve a component class name using prefix and overrides */
+    resolveClass: (component: string, variant?: string) => string;
+}
+/**
+ * Creates a reactive theme for a UI component library adapter.
+ */
+declare function createTheme(initial: ThemeConfig): ThemeAPI;
+interface ComponentMapping {
+    /** HTML tag to use (default: "div") */
+    tag?: string;
+    /** Base CSS class for this component */
+    baseClass: string;
+    /** Variant-to-class mapping */
+    variants?: Record<string, string>;
+    /** Size-to-class mapping */
+    sizes?: Record<string, string>;
+    /** Additional default props */
+    defaultProps?: Partial<TagProps>;
+}
+interface AdapterConfig {
+    /** Name of the CSS framework */
+    name: string;
+    /** CSS class prefix */
+    prefix: string;
+    /** Component mappings */
+    components: Record<string, ComponentMapping>;
+}
+interface AdaptedComponentProps extends TagProps {
+    /** Component variant (e.g., "primary", "outlined") */
+    variant?: string;
+    /** Component size (e.g., "sm", "md", "lg") */
+    size?: string;
+}
+type AdaptedComponent = (props?: AdaptedComponentProps) => Element;
+/**
+ * Creates a set of SibuJS components from a CSS framework's class mappings.
+ *
+ * @example
+ * ```ts
+ * const adapter = componentAdapter({
+ *   name: "material",
+ *   prefix: "mdc",
+ *   components: {
+ *     Button: {
+ *       tag: "button",
+ *       baseClass: "mdc-button",
+ *       variants: { raised: "mdc-button--raised" },
+ *       sizes: { sm: "mdc-button--dense" },
+ *     },
+ *   },
+ * });
+ *
+ * const { Button } = adapter.components;
+ * Button({ variant: "raised", nodes: "Click me" });
+ * ```
+ */
+declare function componentAdapter(config: AdapterConfig): {
+    name: string;
+    components: Record<string, AdaptedComponent>;
+    theme: ThemeAPI;
+};
+
+declare const antdAdapter: {
+    name: string;
+    components: Record<string, AdaptedComponent>;
+    theme: ThemeAPI;
+};
+
+declare const chakraAdapter: {
+    name: string;
+    components: Record<string, AdaptedComponent>;
+    theme: ThemeAPI;
+};
+
+declare const materialAdapter: {
+    name: string;
+    components: Record<string, AdaptedComponent>;
+    theme: ThemeAPI;
+};
+
+export { type AdaptedComponent, type AdaptedComponentProps, type AdapterConfig, type ComponentMapping, type MobXAdapterAPI, type MobXAdapterOptions, type MobXReactionDisposer, type ReduxAdapterAPI, type ReduxAdapterOptions, type ReduxStore, type ThemeAPI, type ThemeConfig, type ZustandAdapterAPI, type ZustandAdapterOptions, type ZustandStore, antdAdapter, chakraAdapter, componentAdapter, createTheme, materialAdapter, mobXAdapter, reduxAdapter, zustandAdapter };