pixifact 0.4.0 → 0.6.0

package/dist/runtime-dev/runtimeClient.js

@@ -0,0 +1,382 @@
+import { BitmapText, Graphics, Sprite, Text, } from 'pixi.js';
+const maxRetainedLogs = 500;
+const runtimeRequestEvent = 'pixifact:runtime:request';
+const runtimeResponseEvent = 'pixifact:runtime:response';
+const runtimeAnnounceEvent = 'pixifact:runtime:announce';
+function pointSnapshot(point) {
+    return { x: point.x, y: point.y };
+}
+function boundsSnapshot(bounds) {
+    return {
+        x: bounds.x,
+        y: bounds.y,
+        width: bounds.width,
+        height: bounds.height,
+    };
+}
+function basicNodeSnapshot(node, childIndex) {
+    return {
+        uid: node.uid,
+        type: node.constructor.name,
+        label: node.label,
+        childIndex,
+        position: pointSnapshot(node.position),
+        scale: pointSnapshot(node.scale),
+        rotation: node.rotation,
+        alpha: node.alpha,
+        visible: node.visible,
+        renderable: node.renderable,
+        zIndex: node.zIndex,
+        eventMode: node.eventMode ?? null,
+        children: node.children.map((child, index) => basicNodeSnapshot(child, index)),
+    };
+}
+function supportedFill(fill) {
+    return typeof fill === 'number' || typeof fill === 'string' ? fill : null;
+}
+function specificNodeSnapshot(node) {
+    if (node instanceof Sprite) {
+        return {
+            kind: 'sprite',
+            anchor: pointSnapshot(node.anchor),
+            texture: {
+                uid: node.texture.uid,
+                label: node.texture.label ?? null,
+                width: node.texture.width,
+                height: node.texture.height,
+            },
+            tint: node.tint,
+        };
+    }
+    if (node instanceof BitmapText || node instanceof Text) {
+        return {
+            kind: node instanceof BitmapText ? 'bitmapText' : 'text',
+            text: node.text,
+            anchor: pointSnapshot(node.anchor),
+            style: {
+                align: node.style.align,
+                fill: supportedFill(node.style.fill),
+                fontFamily: Array.isArray(node.style.fontFamily)
+                    ? [...node.style.fontFamily]
+                    : node.style.fontFamily,
+                fontSize: node.style.fontSize,
+                fontStyle: node.style.fontStyle,
+                fontWeight: node.style.fontWeight,
+            },
+        };
+    }
+    if (node instanceof Graphics) {
+        return { kind: 'graphics' };
+    }
+    return undefined;
+}
+function findStageNode(stage, uid) {
+    if (stage.uid === uid)
+        return stage;
+    for (const child of stage.children) {
+        const result = findStageNode(child, uid);
+        if (result)
+            return result;
+    }
+    return undefined;
+}
+function detailedNodeSnapshot(node) {
+    const childIndex = node.parent ? node.parent.children.indexOf(node) : null;
+    const specific = specificNodeSnapshot(node);
+    return {
+        uid: node.uid,
+        type: node.constructor.name,
+        label: node.label,
+        parentUid: node.parent?.uid ?? null,
+        childIndex,
+        childCount: node.children.length,
+        position: pointSnapshot(node.position),
+        scale: pointSnapshot(node.scale),
+        pivot: pointSnapshot(node.pivot),
+        skew: pointSnapshot(node.skew),
+        rotation: node.rotation,
+        angle: node.angle,
+        width: node.width,
+        height: node.height,
+        localBounds: boundsSnapshot(node.getLocalBounds()),
+        globalBounds: boundsSnapshot(node.getBounds()),
+        alpha: node.alpha,
+        worldAlpha: node.getGlobalAlpha(),
+        visible: node.visible,
+        renderable: node.renderable,
+        zIndex: node.zIndex,
+        tint: node.tint,
+        blendMode: String(node.blendMode),
+        eventMode: node.eventMode ?? null,
+        cursor: node.cursor === undefined ? null : String(node.cursor),
+        ...(specific ? { specific } : {}),
+    };
+}
+function snapshotLogValue(value, seen = new WeakSet(), depth = 0) {
+    if (value === null || typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'bigint')
+        return `${value}n`;
+    if (typeof value === 'undefined')
+        return '[undefined]';
+    if (typeof value === 'symbol')
+        return String(value);
+    if (typeof value === 'function')
+        return `[Function ${value.name || 'anonymous'}]`;
+    if (value instanceof Error) {
+        return {
+            name: value.name,
+            message: value.message,
+            stack: value.stack ?? '',
+        };
+    }
+    if (value instanceof Date)
+        return value.toISOString();
+    if (depth >= 4)
+        return `[${value.constructor?.name ?? 'Object'}]`;
+    if (seen.has(value))
+        return '[Circular]';
+    seen.add(value);
+    if (Array.isArray(value)) {
+        return value.map((item) => snapshotLogValue(item, seen, depth + 1));
+    }
+    const snapshot = {};
+    for (const key of Object.keys(value)) {
+        const descriptor = Object.getOwnPropertyDescriptor(value, key);
+        snapshot[key] = descriptor && 'value' in descriptor
+            ? snapshotLogValue(descriptor.value, seen, depth + 1)
+            : '[Getter]';
+    }
+    return snapshot;
+}
+function logMessage(args) {
+    const first = args[0];
+    if (typeof first === 'string')
+        return first;
+    if (first instanceof Error)
+        return first.message;
+    return JSON.stringify(snapshotLogValue(first));
+}
+function createRuntimeLogCapture(targetConsole, targetWindow, now) {
+    const retained = [];
+    const originals = new Map();
+    let sequence = 0;
+    function append(level, args, explicitStack) {
+        const stack = explicitStack ?? args.find((value) => value instanceof Error)?.stack;
+        retained.push({
+            seq: ++sequence,
+            time: now().toISOString(),
+            level,
+            message: logMessage(args),
+            args: args.slice(typeof args[0] === 'string' ? 1 : 0).map((value) => snapshotLogValue(value)),
+            ...(stack ? { stack } : {}),
+        });
+        if (retained.length > maxRetainedLogs)
+            retained.splice(0, retained.length - maxRetainedLogs);
+    }
+    for (const level of ['debug', 'log', 'info', 'warn', 'error']) {
+        const original = targetConsole[level];
+        originals.set(level, original);
+        targetConsole[level] = ((...args) => {
+            original.apply(targetConsole, args);
+            append(level, args);
+        });
+    }
+    const onWindowError = (event) => {
+        append('error', [event.message, event.error ?? null], event.error instanceof Error ? event.error.stack : undefined);
+    };
+    const onUnhandledRejection = (event) => {
+        const reason = event.reason;
+        append('error', ['Unhandled promise rejection', reason], reason instanceof Error ? reason.stack : undefined);
+    };
+    targetWindow.addEventListener('error', onWindowError);
+    targetWindow.addEventListener('unhandledrejection', onUnhandledRejection);
+    return {
+        entries: () => retained,
+        latestSeq: () => sequence,
+        dispose() {
+            for (const [level, original] of originals) {
+                targetConsole[level] = original;
+            }
+            targetWindow.removeEventListener('error', onWindowError);
+            targetWindow.removeEventListener('unhandledrejection', onUnhandledRejection);
+        },
+    };
+}
+function pointerEvent(targetWindow, type, point, buttons) {
+    const eventWindow = targetWindow;
+    return new eventWindow.PointerEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        pointerId: 1,
+        pointerType: 'mouse',
+        isPrimary: true,
+        button: 0,
+        buttons,
+        ...point,
+    });
+}
+function clientPoint(app, x, y) {
+    if (!Number.isFinite(x) || !Number.isFinite(y)) {
+        throw new Error('Runtime pointer coordinates must be finite numbers.');
+    }
+    if (x < 0 || y < 0 || x > app.screen.width || y > app.screen.height) {
+        throw new Error(`Runtime pointer coordinates must stay inside ${app.screen.width} x ${app.screen.height}.`);
+    }
+    const bounds = app.canvas.getBoundingClientRect();
+    return {
+        clientX: bounds.left + (x / app.screen.width) * bounds.width,
+        clientY: bounds.top + (y / app.screen.height) * bounds.height,
+    };
+}
+function keyboardIdentity(key) {
+    if (key === 'Space')
+        return { key: ' ', code: 'Space' };
+    if (/^Key[A-Z]$/.test(key))
+        return { key: key.slice(3).toLowerCase(), code: key };
+    if (/^Digit[0-9]$/.test(key))
+        return { key: key.slice(5), code: key };
+    return { key, code: key };
+}
+function dispatchRuntimeInput(targetWindow, app, request) {
+    const eventWindow = targetWindow;
+    if (request.action === 'move' || request.action === 'click') {
+        const point = clientPoint(app, request.x, request.y);
+        app.canvas.dispatchEvent(pointerEvent(targetWindow, 'pointermove', point, 0));
+        if (request.action === 'click') {
+            app.canvas.dispatchEvent(pointerEvent(targetWindow, 'pointerdown', point, 1));
+            app.canvas.dispatchEvent(pointerEvent(targetWindow, 'pointerup', point, 0));
+            app.canvas.dispatchEvent(new eventWindow.MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                button: 0,
+                ...point,
+            }));
+        }
+        return;
+    }
+    if (!('key' in request))
+        throw new Error('Runtime keyboard input requires a key.');
+    const identity = keyboardIdentity(request.key);
+    const dispatchKey = (type) => {
+        targetWindow.dispatchEvent(new eventWindow.KeyboardEvent(type, {
+            bubbles: true,
+            cancelable: true,
+            ...identity,
+        }));
+    };
+    if (request.action === 'key' || request.action === 'keydown')
+        dispatchKey('keydown');
+    if (request.action === 'key' || request.action === 'keyup')
+        dispatchKey('keyup');
+}
+function cloneState(value) {
+    return JSON.parse(JSON.stringify(value));
+}
+function isHmrRequest(value) {
+    return typeof value === 'object'
+        && value !== null
+        && typeof value.requestId === 'string'
+        && typeof value.runtimeId === 'string'
+        && typeof value.request === 'object'
+        && value.request !== null;
+}
+export function createPixifactRuntimeClient(options) {
+    const now = options.now ?? (() => new Date());
+    const logs = createRuntimeLogCapture(options.console, options.window, now);
+    let app;
+    let getState;
+    function descriptor() {
+        return {
+            runtimeId: options.runtimeId,
+            url: options.window.location.href,
+            title: options.window.document.title,
+            ready: app !== undefined,
+        };
+    }
+    function announce() {
+        options.hot.send(runtimeAnnounceEvent, descriptor());
+    }
+    function requireApplication() {
+        if (!app)
+            throw new Error('PixiJS Application has not been registered in this runtime.');
+        return app;
+    }
+    async function handleRequest(request) {
+        if (request.type === 'logs') {
+            return {
+                runtimeId: options.runtimeId,
+                latestSeq: logs.latestSeq(),
+                entries: logs.entries()
+                    .filter((entry) => request.after === undefined || entry.seq > request.after)
+                    .filter((entry) => request.level === undefined || entry.level === request.level)
+                    .map((entry) => ({ ...entry })),
+            };
+        }
+        const currentApp = requireApplication();
+        if (request.type === 'tree') {
+            return {
+                runtimeId: options.runtimeId,
+                root: basicNodeSnapshot(currentApp.stage, null),
+            };
+        }
+        if (request.type === 'node') {
+            const node = findStageNode(currentApp.stage, request.uid);
+            if (!node)
+                throw new Error(`PixiJS node uid ${request.uid} is not in app.stage.`);
+            return {
+                runtimeId: options.runtimeId,
+                node: detailedNodeSnapshot(node),
+            };
+        }
+        if (request.type === 'state') {
+            return getState
+                ? {
+                    runtimeId: options.runtimeId,
+                    available: true,
+                    state: cloneState(getState()),
+                }
+                : {
+                    runtimeId: options.runtimeId,
+                    available: false,
+                    state: null,
+                };
+        }
+        if (request.type === 'input') {
+            dispatchRuntimeInput(options.window, currentApp, request);
+            return {
+                runtimeId: options.runtimeId,
+                dispatched: true,
+            };
+        }
+        throw new Error('Unknown Pixifact Runtime request.');
+    }
+    options.hot.on(runtimeRequestEvent, (data) => {
+        if (!isHmrRequest(data) || data.runtimeId !== options.runtimeId)
+            return;
+        void handleRequest(data.request).then((result) => options.hot.send(runtimeResponseEvent, {
+            requestId: data.requestId,
+            runtimeId: options.runtimeId,
+            ok: true,
+            result,
+        }), (error) => options.hot.send(runtimeResponseEvent, {
+            requestId: data.requestId,
+            runtimeId: options.runtimeId,
+            ok: false,
+            error: error instanceof Error ? error.message : String(error),
+        }));
+    });
+    announce();
+    return {
+        register(application, registerOptions = {}) {
+            if (app)
+                throw new Error('This page already has a registered PixiJS Application.');
+            app = application;
+            getState = registerOptions.getState;
+            announce();
+        },
+        handleRequest,
+        dispose: logs.dispose,
+    };
+}

package/dist/scene/decorators.d.ts

@@ -1,6 +1,7 @@
-import type { SceneClassDecorator, SceneEventDecoratorOptions, SceneMemberDecorator, ScenePartDecoratorOptions, ScenePropDecoratorOptions, SceneSlotDecoratorOptions } from '../compiler/spec.js';
+import type { SceneClassDecorator, SceneEventDecoratorOptions, SceneMemberDecorator, ScenePartDecoratorOptions, ScenePropDecoratorOptions, SceneSlotDecoratorOptions, SceneVariants } from '../compiler/spec.js';
 export declare function scene(): SceneClassDecorator;
 export declare function prop(options: ScenePropDecoratorOptions): SceneMemberDecorator;
+export declare function defineVariants<const TVariants extends SceneVariants>(variants: TVariants): TVariants;
 export declare function event(_options?: SceneEventDecoratorOptions): SceneMemberDecorator;
 export declare function slot(options?: SceneSlotDecoratorOptions): SceneMemberDecorator;
 export declare function part(options?: ScenePartDecoratorOptions): SceneMemberDecorator;

package/dist/scene/decorators.js

@@ -1,15 +1,21 @@
+import { activateRuntimeTree } from '../runtime/runtimeBehavior.js';
 import { mountSceneClass } from './sceneRuntime.js';
+import { initializeSceneProps } from './sceneBindingRuntime.js';
 const metadataByConstructor = new WeakMap();
 export function scene() {
     return ((constructor) => {
         const SceneClass = class extends constructor {
             constructor(...args) {
-                super(...args);
+                super();
                 if (new.target !== SceneClass) {
                     return;
                 }
-                const result = mountSceneClass(this, SceneClass);
                 const metadata = sceneMetadata(constructor);
+                const initialProps = args[0] && typeof args[0] === 'object'
+                    ? args[0]
+                    : {};
+                initializeSceneProps(this, metadata.props, initialProps);
+                const result = mountSceneClass(this, SceneClass);
                 for (const [property, id] of metadata.parts) {
                     Object.defineProperty(this, property, {
                         configurable: true,
@@ -26,11 +32,7 @@ export function scene() {
                         writable: false,
                     });
                 }
-                for (const [property, propOptions] of metadata.props) {
-                    if (propOptions.default !== undefined) {
-                        this[property] = propOptions.default;
-                    }
-                }
+                activateRuntimeTree(this);
                 const ready = this.onMounted;
                 if (ready) {
                     ready.call(this);
@@ -46,6 +48,9 @@ export function prop(options) {
         sceneMetadata(target.constructor).props.set(memberName(propertyKey), options);
     });
 }
+export function defineVariants(variants) {
+    return variants;
+}
 export function event(_options = {}) {
     return noopMemberDecorator;
 }

package/dist/scene/index.d.ts

@@ -1,5 +1,6 @@
 export * from './decorators.js';
 export * from './eventRuntime.js';
 export * from './sceneAssetRuntime.js';
+export * from './sceneBindingRuntime.js';
 export * from './sceneRuntime.js';
 export * from './slotRuntime.js';

package/dist/scene/index.js

@@ -1,5 +1,6 @@
 export * from './decorators.js';
 export * from './eventRuntime.js';
 export * from './sceneAssetRuntime.js';
+export * from './sceneBindingRuntime.js';
 export * from './sceneRuntime.js';
 export * from './slotRuntime.js';

package/dist/scene/sceneBindingRuntime.d.ts

@@ -0,0 +1,10 @@
+import type { Container } from 'pixi.js';
+import type { ScenePropDecoratorOptions, SceneTemplateBindingValue, SceneTemplateInterface, SceneTemplateScalarValue } from '../compiler/spec.js';
+export declare function initializeSceneProps(target: object, definitions: ReadonlyMap<string, ScenePropDecoratorOptions>, initialProps?: Record<string, unknown>): void;
+export declare function initializeScenePropsFromInterface(target: object, sceneInterface: SceneTemplateInterface, initialProps?: Record<string, unknown>): void;
+export declare function setSceneProp(target: object, name: string, value: unknown): void;
+export declare function getSceneProp<T = unknown>(target: object, name: string): T;
+export declare function readSceneBindingValue<T = unknown>(target: object, binding: SceneTemplateBindingValue): T;
+export declare function bindSceneNodeProp(root: object, binding: SceneTemplateBindingValue, target: Container, prop: string): void;
+export declare function applySceneNodeProp(target: Container, prop: string, sourceValue: unknown): void;
+export type SceneBindingInitialValue = SceneTemplateScalarValue | object;

package/dist/scene/sceneBindingRuntime.js

@@ -0,0 +1,124 @@
+import { setFrameLayout } from '../runtime/index.js';
+const states = new WeakMap();
+const layoutProps = new Set(['left', 'right', 'top', 'bottom', 'horizontal', 'vertical']);
+const textStyleProps = new Set(['fontSize', 'fontFamily', 'fontWeight', 'fill']);
+const colorProps = new Set(['fill', 'fillColor', 'strokeColor', 'tint']);
+export function initializeSceneProps(target, definitions, initialProps = {}) {
+    const state = {
+        definitions: Object.fromEntries(definitions),
+        subscribers: new Map(),
+        values: {},
+    };
+    states.set(target, state);
+    for (const [name, definition] of Object.entries(state.definitions)) {
+        state.values[name] = Object.hasOwn(initialProps, name)
+            ? initialProps[name]
+            : definition.default;
+        Object.defineProperty(target, name, {
+            configurable: true,
+            enumerable: true,
+            get: () => state.values[name],
+            set: (value) => setSceneProp(target, name, value),
+        });
+    }
+}
+export function initializeScenePropsFromInterface(target, sceneInterface, initialProps = {}) {
+    initializeSceneProps(target, new Map(Object.entries(sceneInterface.props).map(([name, contract]) => [
+        name,
+        {
+            ...('default' in contract ? { default: contract.default } : {}),
+            ...(contract.type === 'variant' ? { variants: contract.variants } : {}),
+        },
+    ])), initialProps);
+}
+export function setSceneProp(target, name, value) {
+    const state = sceneBindingState(target);
+    if (Object.is(state.values[name], value)) {
+        return;
+    }
+    state.values[name] = value;
+    for (const update of state.subscribers.get(name) ?? []) {
+        update();
+    }
+}
+export function getSceneProp(target, name) {
+    return sceneBindingState(target).values[name];
+}
+export function readSceneBindingValue(target, binding) {
+    const state = sceneBindingState(target);
+    const [prop, field] = binding.path;
+    const value = state.values[prop];
+    if (!field) {
+        return value;
+    }
+    const selected = String(value);
+    return state.definitions[prop]?.variants?.[selected]?.[field];
+}
+export function bindSceneNodeProp(root, binding, target, prop) {
+    const state = sceneBindingState(root);
+    const update = () => applySceneNodeProp(target, prop, readSceneBindingValue(root, binding));
+    const subscribers = state.subscribers.get(binding.path[0]) ?? new Set();
+    subscribers.add(update);
+    state.subscribers.set(binding.path[0], subscribers);
+    update();
+}
+export function applySceneNodeProp(target, prop, sourceValue) {
+    if (prop === 'text') {
+        target.text = String(sourceValue ?? '');
+        return;
+    }
+    const value = normalizeBindingValue(prop, sourceValue);
+    if (layoutProps.has(prop)) {
+        setFrameLayout(target, { [prop]: value });
+        return;
+    }
+    const record = target;
+    if (textStyleProps.has(prop) && 'text' in record && record.style) {
+        record.style[prop] = value;
+        return;
+    }
+    if (prop === 'scaleX' || prop === 'scaleY') {
+        const point = record.scale;
+        point[prop === 'scaleX' ? 'x' : 'y'] = value;
+        return;
+    }
+    if (prop === 'pivotX' || prop === 'pivotY') {
+        const point = record.pivot;
+        point[prop === 'pivotX' ? 'x' : 'y'] = value;
+        return;
+    }
+    if (prop === 'skewX' || prop === 'skewY') {
+        const point = record.skew;
+        point[prop === 'skewX' ? 'x' : 'y'] = value;
+        return;
+    }
+    if (prop === 'anchorX' || prop === 'anchorY') {
+        const point = record.anchor;
+        point[prop === 'anchorX' ? 'x' : 'y'] = value;
+        return;
+    }
+    if (prop === 'tilePositionX' || prop === 'tilePositionY') {
+        const point = record.tilePosition;
+        point[prop === 'tilePositionX' ? 'x' : 'y'] = value;
+        return;
+    }
+    if (prop === 'tileScaleX' || prop === 'tileScaleY') {
+        const point = record.tileScale;
+        point[prop === 'tileScaleX' ? 'x' : 'y'] = value;
+        return;
+    }
+    record[prop] = value;
+}
+function normalizeBindingValue(prop, value) {
+    if (colorProps.has(prop) && typeof value === 'string' && /^#[0-9a-fA-F]{6}$/.test(value)) {
+        return Number.parseInt(value.slice(1), 16);
+    }
+    return value;
+}
+function sceneBindingState(target) {
+    const state = states.get(target);
+    if (!state) {
+        throw new Error('Scene props must be initialized before bindings are mounted.');
+    }
+    return state;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixifact",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Pixifact 2D UI 和轻量游戏 Scene 语义框架。",
   "packageManager": "bun@1.3.13",
   "main": "./dist/index.js",
@@ -42,6 +42,11 @@
       "import": "./dist/runtime/index.js",
       "require": "./dist/runtime/index.js"
     },
+    "./runtime-dev": {
+      "types": "./dist/runtime-dev/index.d.ts",
+      "import": "./dist/runtime-dev/index.js",
+      "require": "./dist/runtime-dev/index.js"
+    },
     "./scene": {
       "types": "./dist/scene/index.d.ts",
       "import": "./dist/scene/index.js",