@cratis/scene.components 3.4.0 → 3.6.0

package/data/SceneSingleResult.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';
+import { booleanProperty, objectProperty, stringProperty } from '../properties';
+import { SingleResultStatus } from './SingleResultStatus';
+
+const SingleResultRuntime = lazy(() => import('./SingleResultRuntime'));
+
+/** Read-only scalar field of an optional single model; the host owns and commits the input. */
+export function SceneSingleResult({ element }: RegisteredComponentProps) {
+    const { name, target } = resolveElementBinding(element, BindingKind.Query);
+    if (!target) return <MissingBinding element={element} kind={BindingKind.Query} name={name} />;
+
+    // Nothing, including loading Arc, happens until the host explicitly commits its input.
+    if (!element.isEnabled || booleanProperty(element.properties, 'enabled') !== true) {
+        return <SingleResultStatus state='idle' />;
+    }
+
+    const queryArguments = objectProperty(element.properties, 'queryArguments');
+    const resultField = stringProperty(element.properties, 'resultField');
+    if (!queryArguments || !resultField) return <SingleResultStatus state='failure' />;
+
+    return <ArcRuntimeBoundary>
+        <SingleResultRuntime query={target} queryArguments={queryArguments} resultField={resultField} />
+    </ArcRuntimeBoundary>;
+}

package/data/SingleResultRuntime.tsx

@@ -0,0 +1,103 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { ArcContext } from '@cratis/arc.react';
+import type { QueryFor } from '@cratis/arc/queries';
+import { Guid } from '@cratis/fundamentals';
+import type { BoundConstructor } from '../bindings/BoundConstructor';
+import { SingleResultStatus } from './SingleResultStatus';
+
+interface Props {
+    query: BoundConstructor;
+    queryArguments: Record<string, unknown>;
+    resultField: string;
+    /** queryInputForm alone opts into scalar String/Guid descriptor mapping; no value conversion. */
+    stringInputs?: boolean;
+}
+
+type Outcome = { state: 'failure' | 'notFound' } | { state: 'success'; value: string };
+
+/**
+ * Private execution owner. Arc owns validation, routing, HTTP and deserialization; this component
+ * owns only request lifetime and presentation. No shared cache can hand B the result belonging to A.
+ */
+export default function SingleResultRuntime({ query, queryArguments, resultField, stringInputs = false }: Props) {
+    const arc = useContext(ArcContext);
+    const { microservice, apiBasePath, origin, httpHeadersCallback, queryVersion } = arc;
+    // Identity is deliberate: hosts replace immutable committed arguments rather than mutating them.
+    const request = useMemo(() => ({ query, queryArguments, resultField, stringInputs, microservice, apiBasePath, origin, httpHeadersCallback, queryVersion }),
+        [query, queryArguments, resultField, stringInputs, microservice, apiBasePath, origin, httpHeadersCallback, queryVersion]);
+    const [settled, setSettled] = useState<{ request: typeof request; outcome: Outcome }>();
+
+    useEffect(() => {
+        // Each effect setup is a generation, including StrictMode's setup/cleanup/setup replay.
+        let current = true;
+        let instance: QueryFor<unknown, Record<string, unknown>> | undefined;
+        const publish = (outcome: Outcome) => {
+            if (current) setSettled({ request, outcome });
+        };
+        const execute = async () => {
+            try {
+                // The registry intentionally stores constructors without an eager Arc dependency.
+                instance = new request.query() as QueryFor<unknown, Record<string, unknown>>;
+                if (instance.enumerable !== false) {
+                    publish({ state: 'failure' });
+                    return;
+                }
+                // Arc perform does not validate argument-to-descriptor types. The form supports only
+                // scalar String/Guid inputs, matched by exact name and constructor, never by naming
+                // convention. This check is lazy and form-only; singleResult's host contract is intact.
+                if (request.stringInputs && !Object.entries(request.queryArguments).every(([name, value]) => {
+                    const descriptors = instance!.parameterDescriptors.filter(descriptor => descriptor.name === name);
+                    return typeof value === 'string' && descriptors.length === 1 && !descriptors[0].isEnumerable
+                        && (descriptors[0].type === String || descriptors[0].type === Guid);
+                })) {
+                    publish({ state: 'failure' });
+                    return;
+                }
+                instance.setMicroservice(request.microservice);
+                instance.setApiBasePath(request.apiBasePath ?? '');
+                instance.setOrigin(request.origin ?? '');
+                instance.setHttpHeadersCallback(request.httpHeadersCallback ?? (() => ({})));
+                // Native perform validates required arguments and proxy rules before HTTP. No copying,
+                // defaults, business validation, route construction or array wrapping happens here.
+                const result = await instance.perform(request.queryArguments);
+                if (!current) return;
+                if (result.isSuccess !== true || result.isAuthorized !== true || result.isValid !== true || result.hasExceptions !== false || result.isReady === false) {
+                    publish({ state: 'failure' });
+                    return;
+                }
+                if (result.data === null || result.data === undefined) {
+                    publish({ state: 'notFound' });
+                    return;
+                }
+                if (typeof result.data !== 'object' || Array.isArray(result.data)) {
+                    publish({ state: 'failure' });
+                    return;
+                }
+                // Only one own data field, never a path, inherited member, getter or expression.
+                const descriptor = Object.getOwnPropertyDescriptor(result.data, request.resultField);
+                const value: unknown = descriptor && 'value' in descriptor ? descriptor.value : undefined;
+                if (typeof value === 'string' || typeof value === 'boolean' || (typeof value === 'number' && Number.isFinite(value))) {
+                    publish({ state: 'success', value: String(value) });
+                } else {
+                    publish({ state: 'failure' });
+                }
+            } catch {
+                // Includes native AbortError rejections. Disposed generations cannot publish or leak
+                // an unhandled promise, even when the HTTP boundary ignores cancellation.
+                publish({ state: 'failure' });
+            }
+        };
+        void execute();
+        return () => {
+            current = false;
+            instance?.abortController?.abort();
+        };
+    }, [request]);
+
+    // Mask old data during the render that changes inputs, before effect cleanup/setup runs.
+    if (settled?.request !== request) return <SingleResultStatus state='loading' />;
+    return <SingleResultStatus {...settled.outcome} />;
+}

package/data/SingleResultStatus.tsx

@@ -0,0 +1,13 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+type State = 'idle' | 'loading' | 'notFound' | 'failure' | 'success';
+
+const messages = { idle: 'Idle', loading: 'Loading', notFound: 'Not found', failure: 'Unable to load result', success: '' };
+
+/** Internal shared presentation; never exposes query exception messages or server stack traces. */
+export function SingleResultStatus({ state, value }: { state: State; value?: string }) {
+    return <span role={state === 'failure' ? 'alert' : 'status'} data-scene-single-result={state}>
+        {state === 'success' ? value : messages[state]}
+    </span>;
+}

package/data/for_SceneDataTable/when_forwarding_query_arguments.tsx

@@ -5,8 +5,8 @@ import { act, cleanup, render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import { externalComponent } from '../../given';
 
-class InvoicesForProject {}
-class AnotherQuery {}
+let InvoicesForProject: typeof import('../../bindings/for_requireArcProxy/NativeProxies').Snapshot;
+let AnotherQuery: typeof InvoicesForProject;
 
 // Load a fresh adapter so its lazy component cannot leak the peer double into other specs.
 describe('when forwarding query arguments', () => {
@@ -24,6 +24,8 @@ describe('when forwarding query arguments', () => {
                 return <div data-testid='query-table' />;
             },
         }));
+        ({ Snapshot: InvoicesForProject } = await import('../../bindings/for_requireArcProxy/NativeProxies'));
+        AnotherQuery = InvoicesForProject;
         bindings = await import('../../bindings');
         bindings.clearBindings();
         bindings.registerQuery('InvoicesForProject', InvoicesForProject);
@@ -55,6 +57,25 @@ describe('when forwarding query arguments', () => {
         properties.should.have.property('queryArguments').that.deep.equals({ projectId: suppliedId });
     });
 
+    it('should bridge an identity-only query to an existing table without a second legacy registration', async () => {
+        bindings.clearBindings();
+        bindings.registerQueryIdentity('InvoicesForProject', 'Invoices/ForProject', InvoicesForProject);
+        const queryArguments = { projectId: suppliedId };
+        await renderTable({ query: 'InvoicesForProject', queryArguments });
+        await screen.findByTestId('query-table');
+        (received.mock.lastCall![0].query === InvoicesForProject).should.equal(true);
+        (received.mock.lastCall![0].queryArguments === queryArguments).should.equal(true);
+    });
+
+    it('should visibly reject ambiguous identity-only tables without selecting either native proxy', async () => {
+        bindings.clearBindings();
+        bindings.registerQueryIdentity('InvoicesForProject', 'One/ForProject', InvoicesForProject);
+        bindings.registerQueryIdentity('InvoicesForProject', 'Two/ForProject', AnotherQuery);
+        await renderTable({ query: 'InvoicesForProject' });
+        (screen.getByText("Unresolved query binding 'InvoicesForProject' on Cratis.Components:dataTable") !== null).should.equal(true);
+        received.mock.calls.should.have.lengthOf(0);
+    });
+
     it('should preserve all supplied keys and values without normalization or defaults', async () => {
         const queryArguments = { projectId: suppliedId, ProjectID: 'distinct', limit: 0, enabled: false, optional: null, filter: { names: ['one'] } };
         await renderTable({ query: 'InvoicesForProject', queryArguments });

package/data/for_SceneSingleResult/when_executing_a_native_query.tsx

@@ -0,0 +1,290 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import { expect, vi } from 'vitest';
+import { StrictMode } from 'react';
+import { ArcContext, type ArcConfiguration } from '@cratis/arc.react';
+import { QueryFor, QueryHttpMethod, QueryValidator } from '@cratis/arc/queries';
+import { clearBindings, registerQuery } from '../../bindings';
+import { externalComponent } from '../../given';
+import { SceneSingleResult } from '../SceneSingleResult';
+
+class ProjectName extends QueryFor<object | undefined, { projectId: string }> {
+    readonly route = '/projects/{projectId}/name';
+    readonly parameterDescriptors = [];
+    readonly requiredRequestParameters = ['projectId'];
+    defaultValue = undefined;
+
+    constructor() {
+        super(Object, false);
+        this.setHttpMethod(QueryHttpMethod.Get);
+    }
+}
+
+class ProjectNames extends QueryFor<object[]> {
+    readonly route = '/projects';
+    readonly parameterDescriptors = [];
+    readonly requiredRequestParameters = [];
+    defaultValue = [];
+
+    constructor() { super(Object, true); }
+}
+
+class ProjectArgumentsValidator extends QueryValidator<{ projectId: string }> {
+    static received: unknown;
+
+    constructor() {
+        super();
+        this.ruleFor(args => {
+            ProjectArgumentsValidator.received = args;
+            return args.projectId;
+        }).minLength(2);
+    }
+}
+
+class ValidatedProjectName extends ProjectName {
+    readonly validation = new ProjectArgumentsValidator();
+}
+
+function envelope(data: unknown, overrides: Record<string, unknown> = {}) {
+    return {
+        data, isSuccess: true, isAuthorized: true, isValid: true, hasExceptions: false,
+        validationResults: [], exceptionMessages: [], exceptionStackTrace: '',
+        paging: { page: 0, size: 0, totalItems: 0, totalPages: 0 }, ...overrides,
+    };
+}
+
+function response(data: unknown, overrides: Record<string, unknown> = {}) {
+    return { ok: true, status: 200, json: async () => envelope(data, overrides) } as Response;
+}
+
+function deferred() {
+    let resolve!: (value: Response) => void;
+    let reject!: (error: unknown) => void;
+    const promise = new Promise<Response>((yes, no) => { resolve = yes; reject = no; });
+    return { promise, resolve, reject };
+}
+
+describe('when executing an optional single result with native Arc 22.16.1', () => {
+    const headers = () => ({ 'x-host': 'one' });
+    const context: ArcConfiguration = { microservice: 'projects', origin: 'https://example.test', apiBasePath: '/backend', httpHeadersCallback: headers };
+    const fetch = vi.fn<typeof globalThis.fetch>();
+
+    function view(queryArguments: unknown = { projectId: 'A' }, arc = context, properties: Record<string, unknown> = {}) {
+        return <ArcContext.Provider value={arc}>
+            <SceneSingleResult element={externalComponent('Cratis.Components:singleResult', {
+                query: 'ProjectName', queryArguments, enabled: true, resultField: 'name', ...properties,
+            })} slots={{}} />
+        </ArcContext.Provider>;
+    }
+
+    beforeEach(() => {
+        clearBindings();
+        registerQuery('ProjectName', ProjectName);
+        registerQuery('ProjectNames', ProjectNames);
+        registerQuery('ValidatedProjectName', ValidatedProjectName);
+        fetch.mockReset();
+        vi.stubGlobal('fetch', fetch);
+    });
+
+    afterEach(() => {
+        cleanup();
+        clearBindings();
+        vi.unstubAllGlobals();
+    });
+
+    it('uses the native URL, arguments and context headers without changing the host object', async () => {
+        const args = Object.freeze({ projectId: 'AA', locale: 'en' });
+        fetch.mockResolvedValue(response({ name: '<b>Project A</b>' }));
+        await act(async () => { render(view(args, context, { query: 'ValidatedProjectName' })); });
+        expect(await screen.findByText('<b>Project A</b>')).not.toBeNull();
+        expect(document.querySelector('b')).toBeNull();
+        expect(fetch).toHaveBeenCalledTimes(1);
+        const [url, init] = fetch.mock.calls[0];
+        expect(String(url)).toBe('https://example.test/backend/projects/AA/name?locale=en');
+        expect(ProjectArgumentsValidator.received).toBe(args);
+        expect(new Headers(init?.headers).get('x-host')).toBe('one');
+        expect(new Headers(init?.headers).get('x-cratis-microservice')).toBe('projects');
+        expect(args).toEqual({ projectId: 'AA', locale: 'en' });
+    });
+
+    for (const value of [false, 0, '']) {
+        it(`renders scalar own-field ${JSON.stringify(value)} as present`, async () => {
+            fetch.mockResolvedValue(response({ name: value }));
+            await act(async () => { render(view()); });
+            await waitFor(() => expect(screen.getByRole('status').getAttribute('data-scene-single-result')).toBe('success'));
+            expect(screen.getByRole('status').textContent).toBe(String(value));
+        });
+    }
+
+    for (const data of [null, undefined]) {
+        it(`shows not found for successful ${String(data)}`, async () => {
+            fetch.mockResolvedValue(response(data));
+            await act(async () => { render(view()); });
+            expect(await screen.findByText('Not found')).not.toBeNull();
+        });
+    }
+
+    for (const failure of [{ isSuccess: false }, { isAuthorized: false }, { isValid: false }, { hasExceptions: true }]) {
+        it(`prioritizes failure over missing data: ${JSON.stringify(failure)}`, async () => {
+            fetch.mockResolvedValue(response(null, { ...failure, exceptionMessages: ['secret'], exceptionStackTrace: 'server stack' }));
+            await act(async () => { render(view()); });
+            expect(await screen.findByRole('alert')).toHaveProperty('textContent', 'Unable to load result');
+            expect(screen.queryByText('Not found')).toBeNull();
+            expect(document.body.textContent).not.toMatch(/secret|server stack/);
+        });
+    }
+
+    for (const args of [{}, { projectId: '' }, { projectId: null }, [], null, 'A', undefined]) {
+        it(`does not send invalid or missing arguments: ${JSON.stringify(args)}`, async () => {
+            await act(async () => { render(view(args, context, { queryArguments: args })); });
+            expect(await screen.findByRole('alert')).not.toBeNull();
+            expect(fetch).not.toHaveBeenCalled();
+        });
+    }
+
+    it('lets the native proxy validator reject arguments without HTTP', async () => {
+        await act(async () => { render(view({ projectId: 'A' }, context, { query: 'ValidatedProjectName' })); });
+        expect(await screen.findByRole('alert')).not.toBeNull();
+        expect(fetch).not.toHaveBeenCalled();
+    });
+
+    for (const enabled of [false, undefined, 'true']) {
+        it(`is idle unless explicitly enabled: ${String(enabled)}`, async () => {
+            await act(async () => { render(view({ projectId: 'A' }, context, { enabled })); });
+            expect(screen.getByText('Idle')).not.toBeNull();
+            expect(fetch).not.toHaveBeenCalled();
+        });
+    }
+
+    it('never chooses another query when the binding is missing', async () => {
+        await act(async () => { render(view({}, context, { query: 'Missing' })); });
+        expect(screen.getByText(/Unresolved query binding 'Missing'/)).not.toBeNull();
+        expect(fetch).not.toHaveBeenCalled();
+    });
+
+    it('aborts A and ignores reverse completion when the transport ignores abort', async () => {
+        const a = deferred();
+        const b = deferred();
+        fetch.mockReturnValueOnce(a.promise).mockReturnValueOnce(b.promise);
+        let mounted!: ReturnType<typeof render>;
+        await act(async () => { mounted = render(view()); });
+        expect(screen.getByText('Loading')).not.toBeNull();
+        const signal = fetch.mock.calls[0][1]?.signal;
+        await act(async () => { mounted.rerender(view({ projectId: 'B' })); });
+        expect(signal?.aborted).toBe(true);
+        await act(async () => { b.resolve(response({ name: 'B' })); });
+        expect(screen.getByText('B')).not.toBeNull();
+        await act(async () => { a.resolve(response({ name: 'A' })); });
+        expect(screen.queryByText('A')).toBeNull();
+        expect(screen.getByText('B')).not.toBeNull();
+    });
+
+    it('hides a settled A immediately on B and aborts B on disposal', async () => {
+        const b = deferred();
+        fetch.mockResolvedValueOnce(response({ name: 'A' })).mockReturnValueOnce(b.promise);
+        let mounted!: ReturnType<typeof render>;
+        await act(async () => { mounted = render(view()); });
+        expect(screen.getByText('A')).not.toBeNull();
+        await act(async () => { mounted.rerender(view({ projectId: 'B' })); });
+        expect(screen.queryByText('A')).toBeNull();
+        expect(screen.getByText('Loading')).not.toBeNull();
+        mounted.unmount();
+        expect(fetch.mock.calls[1][1]?.signal?.aborted).toBe(true);
+        await act(async () => { b.reject(new DOMException('Aborted', 'AbortError')); });
+    });
+
+    it('reexecutes for header-only context changes and ignores the old response', async () => {
+        const a = deferred();
+        const b = deferred();
+        const args = { projectId: 'A' };
+        fetch.mockReturnValueOnce(a.promise).mockReturnValueOnce(b.promise);
+        let mounted!: ReturnType<typeof render>;
+        await act(async () => { mounted = render(view(args)); });
+        await act(async () => { mounted.rerender(view(args, { ...context, httpHeadersCallback: () => ({ 'x-host': 'two' }) })); });
+        expect(fetch.mock.calls[0][1]?.signal?.aborted).toBe(true);
+        expect(new Headers(fetch.mock.calls[1][1]?.headers).get('x-host')).toBe('two');
+        await act(async () => { b.resolve(response({ name: 'New context' })); a.resolve(response({ name: 'Old context' })); });
+        expect(screen.getByText('New context')).not.toBeNull();
+        expect(screen.queryByText('Old context')).toBeNull();
+    });
+
+    it('rejects enumerable proxies before HTTP rather than adapting them to a single model', async () => {
+        await act(async () => { render(view({}, context, { query: 'ProjectNames' })); });
+        expect(await screen.findByRole('alert')).not.toBeNull();
+        expect(fetch).not.toHaveBeenCalled();
+    });
+
+    it('handles StrictMode disposal without an unhandled abort promise', async () => {
+        const a = deferred();
+        const b = deferred();
+        fetch.mockReturnValueOnce(a.promise).mockReturnValueOnce(b.promise);
+        await act(async () => { render(<StrictMode>{view()}</StrictMode>); });
+        expect(fetch).toHaveBeenCalledTimes(2);
+        expect(fetch.mock.calls[0][1]?.signal?.aborted).toBe(true);
+        await act(async () => {
+            a.reject(new DOMException('Aborted', 'AbortError'));
+            b.resolve(response({ name: 'Current generation' }));
+        });
+        expect(screen.getByText('Current generation')).not.toBeNull();
+    });
+
+    it('ignores successful completion after unmount even if HTTP ignores abort', async () => {
+        const pending = deferred();
+        fetch.mockReturnValueOnce(pending.promise);
+        let mounted!: ReturnType<typeof render>;
+        await act(async () => { mounted = render(view()); });
+        mounted.unmount();
+        expect(fetch.mock.calls[0][1]?.signal?.aborted).toBe(true);
+        await act(async () => { pending.resolve(response({ name: 'Disposed' })); });
+        expect(screen.queryByText('Disposed')).toBeNull();
+    });
+
+    it('turns transport rejection and malformed envelopes into safe failure', async () => {
+        fetch.mockRejectedValueOnce(new Error('private network detail'));
+        let mounted!: ReturnType<typeof render>;
+        await act(async () => { mounted = render(view()); });
+        expect(await screen.findByRole('alert')).toHaveProperty('textContent', 'Unable to load result');
+        fetch.mockResolvedValueOnce({ ok: false, status: 500, json: async () => ({}) } as Response);
+        await act(async () => { mounted.rerender(view({ projectId: 'B' })); });
+        expect(await screen.findByRole('alert')).toHaveProperty('textContent', 'Unable to load result');
+        expect(document.body.textContent).not.toContain('private network detail');
+    });
+
+    it('aborts and clears a pending request when disabled', async () => {
+        const pending = deferred();
+        fetch.mockReturnValueOnce(pending.promise);
+        let mounted!: ReturnType<typeof render>;
+        await act(async () => { mounted = render(view()); });
+        await act(async () => { mounted.rerender(view({ projectId: 'A' }, context, { enabled: false })); });
+        expect(fetch.mock.calls[0][1]?.signal?.aborted).toBe(true);
+        await act(async () => { pending.resolve(response({ name: 'Obsolete' })); });
+        expect(screen.getByText('Idle')).not.toBeNull();
+        expect(screen.queryByText('Obsolete')).toBeNull();
+    });
+
+    for (const change of [{ origin: 'https://other.test' }, { apiBasePath: '/v2' }, { microservice: 'other' }, { queryVersion: 1 }]) {
+        it(`invalidates a settled result after context changes: ${JSON.stringify(change)}`, async () => {
+            const pending = deferred();
+            const args = { projectId: 'A' };
+            fetch.mockResolvedValueOnce(response({ name: 'Old' })).mockReturnValueOnce(pending.promise);
+            let mounted!: ReturnType<typeof render>;
+            await act(async () => { mounted = render(view(args)); });
+            await act(async () => { mounted.rerender(view(args, { ...context, ...change })); });
+            expect(screen.queryByText('Old')).toBeNull();
+            expect(screen.getByText('Loading')).not.toBeNull();
+            expect(fetch).toHaveBeenCalledTimes(2);
+            await act(async () => { pending.resolve(response({ name: 'New' })); });
+            expect(screen.getByText('New')).not.toBeNull();
+        });
+    }
+
+    for (const data of [{ name: {} }, { name: [] }, {}, Object.create({ name: 'Inherited' }), [{ name: 'A' }]]) {
+        it(`rejects non-scalar or absent own fields: ${JSON.stringify(data)}`, async () => {
+            fetch.mockResolvedValue(response(data));
+            await act(async () => { render(view()); });
+            expect(await screen.findByRole('alert')).not.toBeNull();
+        });
+    }
+});

package/data/for_SceneSingleResult/when_gating_the_lazy_runtime.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { act, cleanup, render, screen } from '@testing-library/react';
+import { expect, vi } from 'vitest';
+import { externalComponent } from '../../given';
+
+class RegisteredQuery {}
+
+describe('when gating the single result lazy runtime', () => {
+    const loaded = vi.fn();
+    let SceneSingleResult: typeof import('../SceneSingleResult').SceneSingleResult;
+    let bindings: typeof import('../../bindings');
+
+    beforeEach(async () => {
+        vi.resetModules();
+        loaded.mockClear();
+        vi.doMock('../SingleResultRuntime', () => {
+            loaded();
+            return { default: () => <span>Runtime mounted</span> };
+        });
+        bindings = await import('../../bindings');
+        bindings.clearBindings();
+        bindings.registerQuery('Registered', RegisteredQuery);
+        ({ SceneSingleResult } = await import('../SceneSingleResult'));
+    });
+
+    afterEach(() => {
+        cleanup();
+        bindings.clearBindings();
+        vi.doUnmock('../SingleResultRuntime');
+        vi.resetModules();
+    });
+
+    for (const properties of [
+        { query: 'Missing', enabled: true, queryArguments: {}, resultField: 'name' },
+        { query: 'Registered', queryArguments: {}, resultField: 'name' },
+        { query: 'Registered', enabled: true, queryArguments: [], resultField: 'name' },
+        { query: 'Registered', enabled: true, queryArguments: {}, resultField: '' },
+    ]) {
+        it(`does not import Arc-bound code for ${JSON.stringify(properties)}`, async () => {
+            await act(async () => {
+                render(<SceneSingleResult element={externalComponent('Cratis.Components:singleResult', properties)} slots={{}} />);
+            });
+            expect(loaded).not.toHaveBeenCalled();
+            expect(screen.queryByText('Runtime mounted')).toBeNull();
+            expect(document.body.textContent).toMatch(/Unresolved query binding|Idle|Unable to load result/);
+        });
+    }
+
+    it('loads only the explicitly bound and enabled view', async () => {
+        await act(async () => {
+            render(<SceneSingleResult element={externalComponent('Cratis.Components:singleResult', {
+                query: 'Registered', enabled: true, queryArguments: {}, resultField: 'name',
+            })} slots={{}} />);
+        });
+        expect(await screen.findByText('Runtime mounted')).not.toBeNull();
+        expect(loaded).toHaveBeenCalledTimes(1);
+    });
+});

package/data/index.ts

@@ -1,5 +1,6 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+export * from './SceneSingleResult';
 export * from './SceneDataTable';
 export * from './SceneObservableDataTable';

package/dialogs/SceneCommandDialog.tsx

@@ -6,7 +6,7 @@ import { RegisteredComponentProps } from '@cratis/scene.react';
 import { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';
 import { booleanProperty, stringProperty } from '../properties';
 
-const CommandDialog = lazy(async () => ({ default: (await import('@cratis/components/CommandDialog')).CommandDialog }));
+const CommandDialog = lazy(async () => ({ default: (await import('../bindings/ArcBoundComponents')).BoundCommandDialog }));
 
 /**
  * The `Cratis.Components:commandDialog` component - `CommandDialog` from `@cratis/components/CommandDialog`.

package/dialogs/SceneStepperCommandDialog.tsx

@@ -7,7 +7,7 @@ import { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding
 import { booleanProperty, stringProperty, unionProperty } from '../properties';
 
 const StepperCommandDialog = lazy(async () => ({
-    default: (await import('@cratis/components/CommandDialog')).StepperCommandDialog,
+    default: (await import('../bindings/ArcBoundComponents')).BoundStepperCommandDialog,
 }));
 
 /** Whether the step headers run across the top or down the side. */

package/dist/cjs/bindings/ArcBoundComponents.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var queries = require('@cratis/arc/queries');
+var commands = require('@cratis/arc/commands');
+var DataTables = require('@cratis/components/DataTables');
+var DataPage = require('@cratis/components/DataPage');
+var CommandDialog = require('@cratis/components/CommandDialog');
+var requireArcProxy = require('./requireArcProxy.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+// Runtime-only module: import dynamically beneath ArcRuntimeBoundary, never through the barrel.
+// Scene carries property names and argument objects, not compile-time row schemas. These adapters
+// support generated object/collection queries, as required by the Components public prop contracts.
+function BoundDataTable({ query, ...props }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(DataTables.DataTableForQuery, {
+        ...props,
+        query: requireArcProxy.requireArcProxy(query, queries.QueryFor, 'query')
+    });
+}
+function BoundObservableDataTable({ query, ...props }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(DataTables.DataTableForObservableQuery, {
+        ...props,
+        query: requireArcProxy.requireArcProxy(query, queries.ObservableQueryFor, 'observable query')
+    });
+}
+function BoundDataPage({ query, ...props }) {
+    const base = query.prototype instanceof queries.ObservableQueryFor ? queries.ObservableQueryFor : queries.QueryFor;
+    // This chooses only the kind of the supplied constructor, never another registered binding.
+    const proxy = requireArcProxy.requireArcProxy(query, base, 'query');
+    return /*#__PURE__*/ jsxRuntime.jsx(DataPage.DataPage, {
+        ...props,
+        query: proxy
+    });
+}
+function BoundCommandDialog({ command, ...props }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandDialog.CommandDialog, {
+        ...props,
+        command: requireArcProxy.requireArcProxy(command, commands.Command, 'command')
+    });
+}
+function BoundStepperCommandDialog({ command, ...props }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(CommandDialog.StepperCommandDialog, {
+        ...props,
+        command: requireArcProxy.requireArcProxy(command, commands.Command, 'command')
+    });
+}
+
+exports.BoundCommandDialog = BoundCommandDialog;
+exports.BoundDataPage = BoundDataPage;
+exports.BoundDataTable = BoundDataTable;
+exports.BoundObservableDataTable = BoundObservableDataTable;
+exports.BoundStepperCommandDialog = BoundStepperCommandDialog;
+//# sourceMappingURL=ArcBoundComponents.js.map

package/dist/cjs/bindings/ArcBoundComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArcBoundComponents.js","sources":["../../../bindings/ArcBoundComponents.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n// Runtime-only module: import dynamically beneath ArcRuntimeBoundary, never through the barrel.\nimport type { ComponentProps } from 'react';\nimport { QueryFor, ObservableQueryFor } from '@cratis/arc/queries';\nimport { Command } from '@cratis/arc/commands';\nimport { DataTableForQuery, DataTableForObservableQuery } from '@cratis/components/DataTables';\nimport { DataPage } from '@cratis/components/DataPage';\nimport { CommandDialog, StepperCommandDialog } from '@cratis/components/CommandDialog';\nimport type { BoundConstructor } from './BoundConstructor';\nimport { requireArcProxy } from './requireArcProxy';\n\ntype QueryProps<T> = Omit<T, 'query'> & { query: BoundConstructor };\ntype CommandProps<T> = Omit<T, 'command'> & { command: BoundConstructor };\n\n// Scene carries property names and argument objects, not compile-time row schemas. These adapters\n// support generated object/collection queries, as required by the Components public prop contracts.\nexport function BoundDataTable({ query, ...props }: QueryProps<ComponentProps<typeof DataTableForQuery>>) {\n    return <DataTableForQuery {...props} query={requireArcProxy(query, QueryFor<object, object>, 'query')} />;\n}\n\nexport function BoundObservableDataTable({ query, ...props }: QueryProps<ComponentProps<typeof DataTableForObservableQuery>>) {\n    return <DataTableForObservableQuery {...props} query={requireArcProxy(query, ObservableQueryFor<object, object>, 'observable query')} />;\n}\n\nexport function BoundDataPage({ query, ...props }: QueryProps<ComponentProps<typeof DataPage>>) {\n    const base = query.prototype instanceof ObservableQueryFor ? ObservableQueryFor<object, object> : QueryFor<object, object>;\n    // This chooses only the kind of the supplied constructor, never another registered binding.\n    const proxy = requireArcProxy<QueryFor<object, object> | ObservableQueryFor<object, object>>(query, base, 'query');\n    return <DataPage {...props} query={proxy} />;\n}\n\nexport function BoundCommandDialog({ command, ...props }: CommandProps<ComponentProps<typeof CommandDialog>>) {\n    return <CommandDialog {...props} command={requireArcProxy(command, Command<object, object>, 'command')} />;\n}\n\nexport function BoundStepperCommandDialog({ command, ...props }: CommandProps<ComponentProps<typeof StepperCommandDialog>>) {\n    return <StepperCommandDialog {...props} command={requireArcProxy(command, Command<object, object>, 'command')} />;\n}\n"],"names":["BoundDataTable","query","props","_jsx","DataTableForQuery","requireArcProxy","QueryFor","BoundObservableDataTable","DataTableForObservableQuery","ObservableQueryFor","BoundDataPage","base","prototype","proxy","DataPage","BoundCommandDialog","command","CommandDialog","Command","BoundStepperCommandDialog","StepperCommandDialog"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AAaA;AACA;AACO,SAASA,cAAAA,CAAe,EAAEC,KAAK,EAAE,GAAGC,KAAAA,EAA6D,EAAA;AACpG,IAAA,qBAAOC,cAAA,CAACC,4BAAAA,EAAAA;AAAmB,QAAA,GAAGF,KAAK;QAAED,KAAAA,EAAOI,+BAAAA,CAAgBJ,OAAOK,gBAAAA,EAA0B,OAAA;;AACjG;AAEO,SAASC,wBAAAA,CAAyB,EAAEN,KAAK,EAAE,GAAGC,KAAAA,EAAuE,EAAA;AACxH,IAAA,qBAAOC,cAAA,CAACK,sCAAAA,EAAAA;AAA6B,QAAA,GAAGN,KAAK;QAAED,KAAAA,EAAOI,+BAAAA,CAAgBJ,OAAOQ,0BAAAA,EAAoC,kBAAA;;AACrH;AAEO,SAASC,aAAAA,CAAc,EAAET,KAAK,EAAE,GAAGC,KAAAA,EAAoD,EAAA;AAC1F,IAAA,MAAMS,IAAAA,GAAOV,KAAAA,CAAMW,SAAS,YAAYH,6BAAqBA,0BAAAA,GAAqCH,gBAAAA;;IAElG,MAAMO,KAAAA,GAAQR,+BAAAA,CAA+EJ,KAAAA,EAAOU,IAAAA,EAAM,OAAA,CAAA;AAC1G,IAAA,qBAAOR,cAAA,CAACW,iBAAAA,EAAAA;AAAU,QAAA,GAAGZ,KAAK;QAAED,KAAAA,EAAOY;;AACvC;AAEO,SAASE,kBAAAA,CAAmB,EAAEC,OAAO,EAAE,GAAGd,KAAAA,EAA2D,EAAA;AACxG,IAAA,qBAAOC,cAAA,CAACc,2BAAAA,EAAAA;AAAe,QAAA,GAAGf,KAAK;QAAEc,OAAAA,EAASX,+BAAAA,CAAgBW,SAASE,gBAAAA,EAAyB,SAAA;;AAChG;AAEO,SAASC,yBAAAA,CAA0B,EAAEH,OAAO,EAAE,GAAGd,KAAAA,EAAkE,EAAA;AACtH,IAAA,qBAAOC,cAAA,CAACiB,kCAAAA,EAAAA;AAAsB,QAAA,GAAGlB,KAAK;QAAEc,OAAAA,EAASX,+BAAAA,CAAgBW,SAASE,gBAAAA,EAAyB,SAAA;;AACvG;;;;;;"}