@tschk/moonshine-vue 0.0.0-stage → 0.4.4

package/src/events.ts

@@ -0,0 +1,86 @@
+import { getComponentContext } from "@tschk/moonshine-dom/component";
+import {
+  errorHandlerKey,
+  runWithOwner,
+  untrack,
+} from "@tschk/moonshine-dom/reactive";
+type EventMap<E> = { [K in keyof E]: readonly unknown[] };
+type Camel<S extends string> = S extends `${infer A}-${infer B}`
+  ? `${A}${Capitalize<Camel<B>>}`
+  : S;
+type Listener<A extends readonly unknown[]> = (...args: A) => unknown;
+export type EventListeners<E extends EventMap<E>> = {
+  [K in keyof E as K extends string ? `on${Capitalize<Camel<K>>}` : never]?:
+    Listener<E[K]> | readonly Listener<E[K]>[];
+} & {
+  [
+    K in keyof E as K extends string ? `on${Capitalize<Camel<K>>}Once` : never
+  ]?: Listener<E[K]> | readonly Listener<E[K]>[];
+};
+export type Emit<E extends EventMap<E>> = <K extends keyof E & string>(
+  event: K,
+  ...args: E[K]
+) => void;
+const camel = (name: string) =>
+  name.replace(/-(\w)/g, (_, letter: string) => letter.toUpperCase());
+const key = (name: string) =>
+  name ? "on" + name[0]!.toUpperCase() + name.slice(1) : "";
+/** Compiler-private declared component events; no DOM dispatch, model modifiers or Vue app error API. */
+export function createEmitter<E extends EventMap<E>>(source: object): Emit<E> {
+  const frame = getComponentContext();
+  const route = frame.owner.context?.get(errorHandlerKey) as
+    ((error: unknown) => boolean) | undefined;
+  let emitted: Set<string> | undefined;
+  const report = (error: unknown) => {
+    if (!route?.(error)) throw error;
+  };
+  return ((event: string, ...args: readonly unknown[]) => {
+    if (frame.mode === "dom" && frame.owner.disposed) return;
+    return untrack(() => {
+      let name = key(event),
+        listener = Reflect.get(source, name, source);
+      if (!listener) {
+        name = key(camel(event));
+        listener = Reflect.get(source, name, source);
+      }
+      let failed = false,
+        failure: unknown;
+      const invoke = (value: unknown) => {
+        const callbacks = Array.isArray(value) ? value : [value];
+        for (const fn of callbacks) {
+          if (fn == null) continue;
+          try {
+            if (typeof fn !== "function")
+              throw new TypeError(
+                "Component event listeners must be functions",
+              );
+            const result = Reflect.apply(fn, undefined, args);
+            if (
+              result &&
+              typeof (result as PromiseLike<unknown>).then === "function"
+            )
+              Promise.resolve(result).then(undefined, (error) => {
+                queueMicrotask(() =>
+                  runWithOwner(frame.owner, () => untrack(() => report(error))),
+                );
+              });
+          } catch (error) {
+            try {
+              report(error);
+            } catch (unrouted) {
+              if (!failed) failure = unrouted;
+              failed = true;
+            }
+          }
+        }
+      };
+      invoke(listener);
+      const once = Reflect.get(source, name + "Once", source);
+      if (once && !emitted?.has(name)) {
+        (emitted ??= new Set()).add(name);
+        invoke(once);
+      }
+      if (failed) throw failure;
+    });
+  }) as Emit<E>;
+}

package/src/framework.ts

@@ -0,0 +1 @@
+export { crepusRenderer } from "@tschk/moonshine-dom/framework-lazy";

package/src/index.ts

@@ -0,0 +1,42 @@
+/**
+ * @tschk/moonshine-vue
+ *
+ * Independent signal bridges and lazy native SSR compatibility renderer.
+ * Legacy Vue runtime/compiler entries are separate from native `/reactive`.
+ */
+import {
+  createSignal as msCreateSignal,
+  type Signal as MsSignal,
+} from "@tschk/moonshine";
+
+export type VueRef<T> = {
+  get value(): T;
+  set value(next: T);
+};
+
+export function fromMoonshineSignal<T>(signal: MsSignal<T>): VueRef<T> {
+  return {
+    get value() {
+      return signal();
+    },
+    set value(next: T) {
+      signal.set(() => next);
+    },
+  };
+}
+
+export function createBridgedRef<T>(initial: T): VueRef<T> {
+  return fromMoonshineSignal(msCreateSignal(initial));
+}
+
+export { msCreateSignal as createMoonshineSignal };
+export type { MsSignal as MoonshineSignal };
+export {
+  createResource,
+  createSignal as createMsSignal,
+  createMemo,
+  batch,
+  untrack,
+} from "@tschk/moonshine";
+export type { Resource, ResourceStatus } from "@tschk/moonshine";
+export { crepusRenderer } from "./framework";

package/src/lifecycle.ts

@@ -0,0 +1,59 @@
+/** Opt-in lifecycle for native component scopes, not Vue's component runtime ABI. */
+import {
+  getRenderScheduler,
+  onBeforeDispose,
+  onAfterDispose,
+  queuePostCommit,
+  runWithOwner,
+  untrack,
+} from "@tschk/moonshine-dom/reactive";
+import {
+  getComponentContext,
+  onComponentReady,
+  withComponentConsumer,
+} from "@tschk/moonshine-dom/component";
+import { flushComponentReferences } from "@tschk/moonshine-dom/component-instance";
+
+function component(fn: () => void) {
+  const frame = getComponentContext();
+  if (typeof fn !== "function")
+    throw new TypeError("Lifecycle callback must be a function");
+  return frame;
+}
+export function onMounted(fn: () => void): void {
+  const frame = component(fn);
+  if (frame.mode === "ssr") return;
+  const post = getRenderScheduler()?.post ?? queuePostCommit;
+  onComponentReady(() =>
+    post(() => {
+      if (frame.owner.disposed) return;
+      runWithOwner(frame.owner, () =>
+        untrack(() => {
+          flushComponentReferences();
+          if (!frame.owner.disposed) withComponentConsumer(frame, fn);
+        }),
+      );
+    }),
+  );
+}
+export function onBeforeUnmount(fn: () => void): void {
+  const frame = component(fn);
+  if (frame.mode === "ssr") return;
+  runWithOwner(frame.owner, () =>
+    onBeforeDispose(() => {
+      runWithOwner(frame.owner, () =>
+        untrack(() => withComponentConsumer(frame, fn)),
+      );
+    }),
+  );
+}
+export function onUnmounted(fn: () => void): void {
+  const frame = component(fn);
+  if (frame.mode === "ssr") return;
+  const post = getRenderScheduler()?.post ?? queuePostCommit;
+  runWithOwner(frame.owner, () =>
+    onAfterDispose(() => {
+      post(() => runWithOwner(frame.owner, () => untrack(fn)));
+    }),
+  );
+}

package/src/normalize.ts

@@ -0,0 +1,111 @@
+import { isReactive } from "./reactive";
+type StyleRecord = Record<string, unknown>;
+export function normalizeClass(value: unknown): string {
+  if (typeof value === "string") return value.trim();
+  let result = "";
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      const part = normalizeClass(item);
+      if (part) result += part + " ";
+    }
+  } else if (value !== null && typeof value === "object") {
+    for (const key in value)
+      if ((value as Record<string, unknown>)[key]) result += key + " ";
+  }
+  return result.trim();
+}
+// Vue's narrow declaration normalizer, not a CSS validator/parser: it deliberately
+// does not interpret quotes and preserves the reference's recovery behavior.
+function declarations(text: string): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const declaration of text
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .split(/;(?![^(]*\))/g)) {
+    const colon = declaration.indexOf(":");
+    if (colon !== -1 && colon < declaration.length - 1) {
+      Object.defineProperty(result, declaration.slice(0, colon).trim(), {
+        value: declaration.slice(colon + 1).trim(),
+        enumerable: true,
+        configurable: true,
+        writable: true,
+      });
+    }
+  }
+  return result;
+}
+type StyleEntry<T> = unknown extends T
+  ? unknown
+  : T extends string
+    ? string
+    : T extends readonly unknown[]
+      ? StyleEntry<T[number]>
+      : T extends object
+        ? T[keyof T]
+        : never;
+type NormalizedStyle<T> = unknown extends T
+  ? string | StyleRecord | undefined
+  : T extends (...args: never[]) => unknown
+    ? undefined
+    : T extends readonly unknown[]
+      ? Record<string, StyleEntry<T[number]>>
+      : T extends string | object
+        ? T
+        : undefined;
+export function normalizeStyle<T>(value: T): NormalizedStyle<T>;
+export function normalizeStyle(
+  value: unknown,
+): string | StyleRecord | undefined {
+  if (Array.isArray(value)) {
+    const result: StyleRecord = {};
+    for (const item of value) {
+      const style =
+        typeof item === "string" ? declarations(item) : normalizeStyle(item);
+      if (style && typeof style !== "string")
+        for (const key in style) {
+          Object.defineProperty(result, key, {
+            value: style[key],
+            enumerable: true,
+            configurable: true,
+            writable: true,
+          });
+        }
+    }
+    return result;
+  }
+  if (
+    typeof value === "string" ||
+    (value !== null && typeof value === "object")
+  )
+    return value as string | StyleRecord;
+}
+export function normalizeStaticStyle(value: string): Record<string, string> {
+  return declarations(value);
+}
+
+// Compiler-facing VNode policies differ from the public normalization utilities.
+export function normalizeClassSSR<T>(
+  value: T,
+): T extends object ? string : T | string {
+  return (
+    value && typeof value !== "string" ? normalizeClass(value) : value
+  ) as T extends object ? string : T | string;
+}
+function copyReactive<T>(value: T): T {
+  if (isReactive(value) && !Array.isArray(value)) return { ...value } as T;
+  return value;
+}
+export function normalizeStyleDOM<T>(value: T): NormalizedStyle<T> {
+  return copyReactive(normalizeStyle(value));
+}
+type VNodeStyle<T> = T extends (...args: never[]) => unknown
+  ? T
+  : T extends object
+    ? NormalizedStyle<T>
+    : T;
+export function normalizeStyleSSR<T>(value: T): VNodeStyle<T> {
+  return (
+    value !== null && typeof value === "object"
+      ? normalizeStyle(copyReactive(value))
+      : value
+  ) as VNodeStyle<T>;
+}