pixifact 0.4.0 → 0.6.0

package/dist/compiler/templateParser.js

@@ -5,6 +5,8 @@ const pixiTypes = new Set([
     'Container',
     'Sprite',
     'Text',
+    'Label',
+    'BitmapLabel',
     'Graphics',
     'Rect',
     'Image',
@@ -148,6 +150,10 @@ function isEventAttribute(name) {
     return eventName(name) !== undefined;
 }
 function parseAttributeValue(name, value) {
+    const binding = parseBindingValue(value);
+    if (binding) {
+        return binding;
+    }
     if (pixiSceneFieldSchema(name)?.type === 'string') {
         return value;
     }
@@ -161,6 +167,19 @@ function parseAttributeValue(name, value) {
         return Number.parseInt(value.slice(1), 16);
     return value;
 }
+function parseBindingValue(value) {
+    const match = /^\{([A-Za-z_$][\w$]*)(?:\.([A-Za-z_$][\w$]*))?\}$/.exec(value);
+    if (!match) {
+        if (value.startsWith('{') || value.endsWith('}')) {
+            throw new Error(`Unsupported Scene binding "${value}". Use {prop} or {variant.field}.`);
+        }
+        return undefined;
+    }
+    return {
+        kind: 'binding',
+        path: match[2] ? [match[1], match[2]] : [match[1]],
+    };
+}
 function removeAttribute(element, name) {
     const attributes = { ...element.attributes };
     delete attributes[name];

package/dist/compiler/templateSerializer.js

@@ -79,18 +79,24 @@ function serializeAttributes(attributes) {
 }
 function flattenAttributes(attributes) {
     return attributes.flatMap(([name, value]) => {
-        if (!value || typeof value !== 'object') {
+        if (!value || typeof value !== 'object' || isBindingValue(value)) {
             return [[name, value]];
         }
         return Object.entries(value).map(([field, fieldValue]) => [`${name}.${field}`, fieldValue]);
     });
 }
 function formatAttributeValue(name, value) {
+    if (isBindingValue(value)) {
+        return `{${value.path.join('.')}}`;
+    }
     if (typeof value === 'number' && colorPropNames.has(name)) {
         return `#${value.toString(16).padStart(6, '0').slice(-6)}`;
     }
     return String(value);
 }
+function isBindingValue(value) {
+    return typeof value === 'object' && value.kind === 'binding';
+}
 function escapeAttribute(value) {
     return value
         .replaceAll('&', '&')

package/dist/compiler/typescriptCompiler.js

@@ -1,14 +1,18 @@
-import { pixiSceneDisplayProps, pixiSceneGraphicsProps, pixiSceneLayoutProps, pixiSceneRectProps, pixiSceneSpriteLikeProps, pixiSceneTextStyleProps, pixiSceneTransformProps, } from './pixiNodeSchema.js';
+import { pixiSceneDisplayProps, pixiSceneGraphicsProps, pixiSceneLabelProps, pixiSceneLayoutProps, pixiSceneRectProps, pixiSceneSpriteLikeProps, pixiSceneTextStyleProps, pixiSceneTransformProps, } from './pixiNodeSchema.js';
 import { compilerSceneNodeLocator } from './commands/index.js';
 const transformProps = new Set(pixiSceneTransformProps);
 const layoutProps = new Set(pixiSceneLayoutProps);
 const pixiProps = new Set(pixiSceneDisplayProps);
 const spriteProps = new Set(pixiSceneSpriteLikeProps);
 const graphicsProps = new Set(pixiSceneGraphicsProps);
+const labelProps = new Set(pixiSceneLabelProps);
 const rectProps = new Set(pixiSceneRectProps);
 const textStyleProps = new Set(pixiSceneTextStyleProps);
-const runtimeNodeTypes = new Set(['Group', 'GridContainer', 'HBoxContainer', 'ScrollContainer', 'VBoxContainer', 'Rect', 'Image', 'NineImage', 'TileImage']);
+const runtimeNodeTypes = new Set(['Group', 'GridContainer', 'HBoxContainer', 'ScrollContainer', 'VBoxContainer', 'Label', 'BitmapLabel', 'Rect', 'Image', 'NineImage', 'TileImage']);
 const runtimeNodeProps = new Set(['columns', 'gap', 'gapX', 'gapY', 'alignX', 'alignY', 'justify', 'direction', 'scrollX', 'scrollY']);
+function isSceneBindingValue(value) {
+    return !!value && typeof value === 'object' && value.kind === 'binding';
+}
 export function compileSceneTemplateToTs(template, options = {}) {
     const context = new CompileContext(template, options);
     return context.compile();
@@ -228,7 +232,8 @@ class CompileContext {
         const variable = node.id || this.#anonymousName(node.type);
         const locator = compilerSceneNodeLocator(node, path);
         const constructorName = this.#sceneConstructorName(node);
-        this.#lines.push(`  const ${variable} = new ${constructorName}();`);
+        const constructorArgs = this.#sceneInstanceConstructorArgs(variable, node);
+        this.#lines.push(`  const ${variable} = new ${constructorName}(${constructorArgs});`);
         this.#applyPixiProps(variable, node.props, true, node);
         for (const [name, action] of Object.entries(node.events)) {
             this.#runtimeImports.add('connectSceneEvent');
@@ -253,7 +258,8 @@ class CompileContext {
             const variable = node.id || this.#anonymousName(node.type);
             const locator = compilerSceneNodeLocator(node, path);
             const constructorName = this.#sceneConstructorName(node);
-            this.#lines.push(`  const ${variable} = new ${constructorName}();`);
+            const constructorArgs = this.#sceneInstanceConstructorArgs(variable, node);
+            this.#lines.push(`  const ${variable} = new ${constructorName}(${constructorArgs});`);
             this.#applyPixiProps(variable, node.props, true, node);
             for (const [name, action] of Object.entries(node.events)) {
                 this.#runtimeImports.add('connectSceneEvent');
@@ -282,7 +288,7 @@ class CompileContext {
     }
     #constructPixiNode(node) {
         if (node.type === 'Text' || node.type === 'BitmapText' || node.type === 'HTMLText') {
-            const text = this.#stringValue(node.props.text ?? '');
+            const text = this.#stringValue(isSceneBindingValue(node.props.text) ? '' : node.props.text ?? '');
             const style = this.#styleObject(node.props);
             return `new ${node.type}({ text: ${text}${style ? `, style: ${style}` : ''} })`;
         }
@@ -308,6 +314,31 @@ class CompileContext {
     #sceneConstructorName(node) {
         return this.options.sceneClassAliases?.[node.scene] ?? node.type;
     }
+    #sceneInstanceConstructorArgs(variable, node) {
+        const sceneInterface = this.options.sceneInterfaces?.[node.scene];
+        if (!sceneInterface) {
+            return '';
+        }
+        const entries = [];
+        for (const [key, value] of Object.entries(node.props)) {
+            const contract = sceneInterface.props[key];
+            if (!contract) {
+                continue;
+            }
+            if (isSceneBindingValue(value)) {
+                this.#runtimeImports.add('readSceneBindingValue');
+                entries.push(`${key}: readSceneBindingValue(root, ${JSON.stringify(value)})`);
+                continue;
+            }
+            if (contract.type === 'struct' && value && typeof value === 'object') {
+                const structVariable = this.#createStructValue(variable, key, value, contract);
+                entries.push(`${key}: ${structVariable}`);
+                continue;
+            }
+            entries.push(`${key}: ${this.#value(value)}`);
+        }
+        return entries.length > 0 ? `{ ${entries.join(', ')} }` : '';
+    }
     #sceneStructImports(sceneImport) {
         const scene = this.#sceneImportScene(sceneImport);
         if (!scene) {
@@ -378,6 +409,18 @@ class CompileContext {
         return contract.sourceScene ?? instanceScene;
     }
     #applyPixiProps(variable, props, instance = false, sceneInstance, pixiType) {
+        const publicProps = new Set(Object.keys(sceneInstance ? this.options.sceneInterfaces?.[sceneInstance.scene]?.props ?? {} : {}));
+        const bindingEntries = Object.entries(props).filter((entry) => (isSceneBindingValue(entry[1]) && !publicProps.has(entry[0])));
+        props = Object.fromEntries(Object.entries(props).filter(([, value]) => !isSceneBindingValue(value)));
+        if (sceneInstance) {
+            props = Object.fromEntries(Object.entries(props).filter(([key]) => !publicProps.has(key)));
+            for (const [key, value] of Object.entries(sceneInstance.props)) {
+                if (publicProps.has(key) && isSceneBindingValue(value)) {
+                    this.#runtimeImports.add('bindSceneNodeProp');
+                    this.#lines.push(`  bindSceneNodeProp(root, ${JSON.stringify(value)}, ${variable}, ${JSON.stringify(key)});`);
+                }
+            }
+        }
         const x = props.x;
         const y = props.y;
         if (x !== undefined || y !== undefined) {
@@ -413,6 +456,10 @@ class CompileContext {
             this.#drawGraphics(variable, props);
         }
         for (const [key, value] of Object.entries(props)) {
+            if (!instance && (pixiType === 'Label' || pixiType === 'BitmapLabel') && labelProps.has(key)) {
+                this.#lines.push(`  ${variable}.${key} = ${this.#value(value)};`);
+                continue;
+            }
             if (!instance && runtimeNodeProps.has(key)) {
                 this.#lines.push(`  ${variable}.${key} = ${this.#value(value)};`);
                 continue;
@@ -436,7 +483,7 @@ class CompileContext {
             if (instance && layoutProps.has(key)) {
                 continue;
             }
-            if (instance && value && typeof value === 'object') {
+            if (instance && value && typeof value === 'object' && !isSceneBindingValue(value)) {
                 this.#applyStructProp(variable, key, value, sceneInstance);
                 continue;
             }
@@ -444,6 +491,10 @@ class CompileContext {
                 this.#lines.push(`  ${variable}.${key} = ${this.#value(value)};`);
             }
         }
+        for (const [key, binding] of bindingEntries) {
+            this.#runtimeImports.add('bindSceneNodeProp');
+            this.#lines.push(`  bindSceneNodeProp(root, ${JSON.stringify(binding)}, ${variable}, ${JSON.stringify(key)});`);
+        }
     }
     #applyRootProps() {
         const props = { ...this.template.props };
@@ -474,12 +525,16 @@ class CompileContext {
             this.#lines.push(`  ${variable}.${key} = ${this.#value(value)};`);
             return;
         }
+        const structVariable = this.#createStructValue(variable, key, value, contract);
+        this.#lines.push(`  ${variable}.${key} = ${structVariable};`);
+    }
+    #createStructValue(variable, key, value, contract) {
         const structVariable = `${variable}${key.charAt(0).toUpperCase()}${key.slice(1)}`;
         this.#lines.push(`  const ${structVariable} = new ${contract.struct}();`);
         for (const [field, fieldValue] of Object.entries(value)) {
             this.#lines.push(`  ${structVariable}.${field} = ${this.#value(fieldValue)};`);
         }
-        this.#lines.push(`  ${variable}.${key} = ${structVariable};`);
+        return structVariable;
     }
     #sceneInstanceStructContract(sceneInstance, key) {
         const contract = sceneInstance ? this.options.sceneInterfaces?.[sceneInstance.scene]?.props[key] : undefined;
@@ -550,7 +605,7 @@ class CompileContext {
         const entries = [];
         for (const key of pixiSceneTextStyleProps) {
             const value = props[key];
-            if (value !== undefined) {
+            if (value !== undefined && !isSceneBindingValue(value)) {
                 entries.push(`${key}: ${key === 'fontWeight' ? JSON.stringify(String(value)) : this.#value(value)}`);
             }
         }
@@ -608,6 +663,9 @@ class CompileContext {
         if (typeof value === 'string') {
             return JSON.stringify(value);
         }
+        if (isSceneBindingValue(value)) {
+            throw new Error(`Scene binding ${value.path.join('.')} must be compiled as a binding target.`);
+        }
         if (value && typeof value === 'object') {
             return `{ ${Object.entries(value).map(([key, fieldValue]) => `${key}: ${this.#scalarValue(fieldValue)}`).join(', ')} }`;
         }

package/dist/compiler-node/builtinSceneInterfaces.d.ts

@@ -0,0 +1,6 @@
+import type { SceneTemplateInterface } from '../compiler/spec.js';
+import { type BuiltinSceneScriptSources } from '../compiler/builtinScenes.js';
+export declare function builtinSceneInterface(assetId: string, scriptSources: BuiltinSceneScriptSources): SceneTemplateInterface;
+export declare function builtinSceneInterfaces(scriptSources: BuiltinSceneScriptSources): {
+    [k: string]: SceneTemplateInterface;
+};

package/dist/compiler-node/builtinSceneInterfaces.js

@@ -0,0 +1,27 @@
+import { builtinSceneAssetId, builtinSceneAssetIds, builtinSceneNameFromAssetId, builtinSceneNames, } from '../compiler/builtinScenes.js';
+import { extractSceneScriptInterfaces } from './scriptInterfaceExtractor.js';
+export function builtinSceneInterface(assetId, scriptSources) {
+    return builtinSceneInterfaceDescriptors(scriptSources)[assetId].interface;
+}
+export function builtinSceneInterfaces(scriptSources) {
+    const descriptors = builtinSceneInterfaceDescriptors(scriptSources);
+    return Object.fromEntries(builtinSceneAssetIds().map((assetId) => [assetId, descriptors[assetId].interface]));
+}
+function builtinSceneInterfaceDescriptors(scriptSources) {
+    const descriptors = extractSceneScriptInterfaces(builtinSceneNames.map((name) => ({
+        scene: builtinSceneAssetId(name),
+        fileName: `${name}.ts`,
+        source: scriptSources[name],
+    })));
+    for (const assetId of builtinSceneAssetIds()) {
+        const name = builtinSceneNameFromAssetId(assetId);
+        const descriptor = descriptors[assetId];
+        if (!descriptor) {
+            throw new Error(`Built-in Scene "${assetId}" is missing a @scene script.`);
+        }
+        if (descriptor.className !== name) {
+            throw new Error(`Built-in Scene "${assetId}" name must match @scene class "${descriptor.className}".`);
+        }
+    }
+    return descriptors;
+}

package/dist/compiler-node/index.d.ts

@@ -1,3 +1,6 @@
 export * from '../compiler/compileScenes.js';
 export * from './builtinSceneAssets.js';
+export * from './builtinSceneInterfaces.js';
+export * from './scriptInterfaceExtractor.js';
+export * from './runtimeVite.js';
 export * from './vite.js';

package/dist/compiler-node/index.js

@@ -1,3 +1,6 @@
 export * from '../compiler/compileScenes.js';
 export * from './builtinSceneAssets.js';
+export * from './builtinSceneInterfaces.js';
+export * from './scriptInterfaceExtractor.js';
+export * from './runtimeVite.js';
 export * from './vite.js';

package/dist/compiler-node/runtimeVite.d.ts

@@ -0,0 +1,89 @@
+import type { IncomingMessage, Server, ServerResponse } from 'node:http';
+export declare const runtimeSessionProtocolVersion = 1;
+export interface RuntimeSessionDescriptor {
+    protocolVersion: typeof runtimeSessionProtocolVersion;
+    projectRoot: string;
+    pid: number;
+    origin: string;
+    token: string;
+}
+export interface RuntimeHostBrowserSocket {
+    send(event: string, data: unknown): void;
+}
+interface RuntimeHostSessionOptions {
+    projectRoot: string;
+    requestTimeoutMs?: number;
+    token: string;
+    now?: () => Date;
+}
+interface RuntimeSessionLookupOptions {
+    projectRoot: string;
+    sessionsRoot?: string;
+    fetch?: typeof fetch;
+}
+interface ClaimRuntimeSessionOptions extends RuntimeSessionLookupOptions {
+    descriptor: RuntimeSessionDescriptor;
+}
+export interface PixifactRuntimePluginOptions {
+    projectRoot?: string | URL;
+}
+interface RuntimeViteClient extends RuntimeHostBrowserSocket {
+    socket: {
+        once(event: 'close', listener: () => void): void;
+    };
+}
+interface RuntimeViteServer {
+    config: {
+        server: {
+            https?: unknown;
+        };
+        logger: {
+            error(message: string): void;
+        };
+    };
+    httpServer: Server | null;
+    middlewares: {
+        use(handler: (request: IncomingMessage, response: ServerResponse, next: (error?: unknown) => void) => void): void;
+    };
+    ws: {
+        on(event: string, listener: (data: unknown, client: RuntimeViteClient) => void): void;
+    };
+}
+export declare function createRuntimeHostSession(options: RuntimeHostSessionOptions): {
+    open: (socket: RuntimeHostBrowserSocket) => void;
+    close: (socket: RuntimeHostBrowserSocket) => void;
+    message: (socket: RuntimeHostBrowserSocket, event: string, data: unknown) => void;
+    fetch: (request: Request) => Promise<Response | undefined>;
+};
+export declare function defaultRuntimeSessionsRoot(): string;
+export declare function runtimeSessionDescriptorPath(projectRoot: string, sessionsRoot?: string): string;
+export declare function readRuntimeSessionDescriptor(projectRoot: string, sessionsRoot?: string): RuntimeSessionDescriptor | undefined;
+export declare function writeRuntimeSessionDescriptor(descriptor: RuntimeSessionDescriptor, sessionsRoot?: string): void;
+export declare function removeRuntimeSessionDescriptor(descriptor: RuntimeSessionDescriptor, sessionsRoot?: string): void;
+export declare function findActiveRuntimeSession(options: RuntimeSessionLookupOptions): Promise<RuntimeSessionDescriptor | undefined>;
+export declare function claimRuntimeSession(options: ClaimRuntimeSessionOptions): Promise<{
+    descriptor: RuntimeSessionDescriptor;
+    owned: false;
+} | {
+    descriptor: RuntimeSessionDescriptor;
+    owned: true;
+}>;
+export declare function pixifactRuntimePlugin(options?: PixifactRuntimePluginOptions): {
+    name: string;
+    apply: string;
+    configResolved(config: {
+        root: string;
+    }): void;
+    resolveId(id: string): "\0virtual:pixifact-runtime-client" | undefined;
+    load(id: string): string | undefined;
+    transformIndexHtml(): {
+        tag: string;
+        attrs: {
+            type: string;
+            src: string;
+        };
+        injectTo: "head-prepend";
+    }[];
+    configureServer(server: RuntimeViteServer): void;
+};
+export {};