@reticlehq/browser 3.7.0 → 3.8.0

package/dist/commands/commands.js

@@ -1,4 +1,4 @@
-import { ComponentStateReason, ElementQuerySchema, ReticleCommand, SnapshotMode, TRANSPORT_LIMITS, selectPath, capDepth, } from '@reticlehq/core';
+import { ComponentStateReason, ElementQuerySchema, INSPECT_IN_VIEWPORT_FIELD, INSPECT_REVEAL_ARG, ReticleCommand, SnapshotMode, TRANSPORT_LIMITS, selectPath, capDepth, } from '@reticlehq/core';
 import { buildSnapshot } from '../dom/snapshot.js';
 import { paintContextOf } from '../dom/paint-context.js';
 import { matchQuery, runQuery } from '../dom/query.js';
@@ -11,6 +11,7 @@ import { editEpoch } from '../edit-epoch.js';
 import { isButton, isInput } from '../dom/realm.js';
 import { hitTestOccluder } from '../dom/occlusion.js';
 import { readStorage } from '../observers/storage.js';
+import { canvasAfterAct } from '../observers/canvas.js';
 import { captureDesktopWindow } from '../dom/desktop-capture.js';
 import { identifyComponent, readComponentState } from '../registry/stores/adapters.js';
 import { readStoresWithTruncation, readStoresRaw, storeNames } from '../registry/stores.js';
@@ -18,6 +19,7 @@ import { sanitizeWithReport } from '../security/serialization.js';
 import { getCapabilities } from '../registry/capabilities.js';
 import { freezeClock, advanceClock, resetClock, isClockFrozen } from '../timers/clock.js';
 import { scrollContainer } from '../actions/scroll.js';
+import { isOffViewport } from '../actions/actions-dom.js';
 export const RELOAD_CACHE_BUST_PARAM = '_reticle_reload';
 function str(value) {
     return 'string' === typeof value ? value : undefined;
@@ -29,11 +31,13 @@ function record(value) {
     return 'object' === typeof value && value !== null ? value : {};
 }
 function sourceLocation(value) {
-    if (typeof value !== 'object' || null === value)
+    if (typeof value !== 'object' || null === value) {
         return undefined;
+    }
     const obj = value;
-    if (typeof obj['file'] !== 'string' || typeof obj['line'] !== 'number')
+    if (typeof obj['file'] !== 'string' || typeof obj['line'] !== 'number') {
         return undefined;
+    }
     return { file: obj['file'], line: obj['line'], column: num(obj['column']) };
 }
 function queryFromArgs(args) {
@@ -56,10 +60,17 @@ function queryFromArgs(args) {
         source: sourceLocation(args['source']),
     };
 }
-function inspect(ref) {
+function inspect(ref, reveal = false) {
     const el = refs.resolve(ref);
-    if (null === el)
+    if (null === el) {
         throw new Error(editEpoch.staleRefMessage(ref));
+    }
+    const scrolledIntoView = reveal &&
+        'function' === typeof el.scrollIntoView &&
+        isOffViewport(el, el.getBoundingClientRect());
+    if (scrolledIntoView) {
+        el.scrollIntoView({ block: 'center', inline: 'center' });
+    }
     const rect = el.getBoundingClientRect();
     const component = identifyComponent(el);
     const view = el.ownerDocument.defaultView;
@@ -101,6 +112,8 @@ function inspect(ref) {
         formAction: isButton(el) || isInput(el) ? (el.form?.getAttribute('action') ?? undefined) : undefined,
         formText: isButton(el) || isInput(el) ? (el.form?.textContent ?? undefined) : undefined,
         box: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+        ...(scrolledIntoView ? { scrolledIntoView: true } : {}),
+        ...(reveal ? { [INSPECT_IN_VIEWPORT_FIELD]: !isOffViewport(el, rect) } : {}),
         occluded: isOccluded(el, rect),
         styles,
         scroll,
@@ -145,8 +158,9 @@ function readState(ref, store, path, depth) {
         stores,
         storeNames: names,
     };
-    if (truncation !== undefined)
+    if (truncation !== undefined) {
         result.truncation = truncation;
+    }
     if (ref !== undefined && ref.length > 0) {
         const el = refs.resolve(ref);
         if (null === el) {
@@ -161,8 +175,9 @@ function readState(ref, store, path, depth) {
 }
 function listAnimations() {
     const doc = document;
-    if (typeof doc.getAnimations !== 'function')
+    if (typeof doc.getAnimations !== 'function') {
         return { animations: [] };
+    }
     const animations = doc.getAnimations().map((a) => {
         const effect = a.effect;
         const timing = effect?.getTiming();
@@ -177,8 +192,9 @@ function listAnimations() {
     return { animations };
 }
 export function resolveNavigationUrl(rawUrl, baseUrl) {
-    if (0 === rawUrl.length || rawUrl.length > TRANSPORT_LIMITS.MAX_URL_LENGTH)
+    if (0 === rawUrl.length || rawUrl.length > TRANSPORT_LIMITS.MAX_URL_LENGTH) {
         return null;
+    }
     try {
         const url = new URL(rawUrl, baseUrl);
         return 'http:' === url.protocol || 'https:' === url.protocol ? url.toString() : null;
@@ -193,29 +209,39 @@ export function createCommandRegistry() {
         scope: str(args['scope']),
         mode: str(args['mode']) ?? SnapshotMode.FULL,
         includeRoot: true === args['includeRoot'],
+        ids: true === args['ids'],
+        audit: true === args['audit'],
     }));
     reg.set(ReticleCommand.QUERY, (args) => {
         const limit = args['limit'];
         return runQuery(queryFromArgs(args), 'number' === typeof limit ? limit : undefined);
     });
-    reg.set(ReticleCommand.MATCH, (args) => matchQuery(ElementQuerySchema.parse(record(args['query'])), str(args['state'])));
-    reg.set(ReticleCommand.ACT, (args) => {
+    reg.set(ReticleCommand.MATCH, (args) => matchQuery(ElementQuerySchema.parse(record(args['query'])), str(args['state']), undefined, undefined, true === args['diagnose']));
+    reg.set(ReticleCommand.ACT, async (args) => {
         const action = str(args['action']) ?? '';
-        return executeAction(str(args['ref']) ?? '', action, record(args['args']));
+        const result = await executeAction(str(args['ref']) ?? '', action, record(args['args']));
+        canvasAfterAct();
+        return result;
+    });
+    reg.set(ReticleCommand.ACT_SEQUENCE, async (args) => {
+        const result = await executeSequence((Array.isArray(args['steps']) ? args['steps'] : []));
+        canvasAfterAct();
+        return result;
     });
-    reg.set(ReticleCommand.ACT_SEQUENCE, (args) => executeSequence((Array.isArray(args['steps']) ? args['steps'] : [])));
-    reg.set(ReticleCommand.INSPECT, (args) => inspect(str(args['ref']) ?? ''));
+    reg.set(ReticleCommand.INSPECT, (args) => inspect(str(args['ref']) ?? '', true === args[INSPECT_REVEAL_ARG]));
     reg.set(ReticleCommand.ANIMATIONS, () => listAnimations());
     reg.set(ReticleCommand.CLOCK, (args) => {
         if (true === args['reset']) {
             resetClock();
         }
         else {
-            if (true === args['freeze'])
+            if (true === args['freeze']) {
                 freezeClock();
+            }
             const adv = args['advanceMs'];
-            if ('number' === typeof adv)
+            if ('number' === typeof adv) {
                 advanceClock(adv);
+            }
         }
         return { frozen: isClockFrozen() };
     });
@@ -231,11 +257,13 @@ export function createCommandRegistry() {
     });
     reg.set(ReticleCommand.NAVIGATE, (args) => {
         const rawUrl = str(args['url']);
-        if (rawUrl === undefined || 0 === rawUrl.length)
+        if (rawUrl === undefined || 0 === rawUrl.length) {
             return { ok: false, reason: 'url required' };
+        }
         const url = resolveNavigationUrl(rawUrl, window.location.href);
-        if (null === url)
+        if (null === url) {
             return { ok: false, reason: 'only http(s) navigation is allowed' };
+        }
         window.location.assign(url);
         return { ok: true, url };
     });

package/dist/connect-options.d.ts

@@ -1,4 +1,4 @@
-import type { RedactionConfig } from '@reticlehq/core';
+import { HelloInstrumentation, type HelloEnv, type HelloScope, type RedactionConfig } from '@reticlehq/core';
 export interface ReticleConnectOptions {
     url?: string;
     session?: string;
@@ -6,6 +6,10 @@ export interface ReticleConnectOptions {
     token?: string;
     allowNonLocalhost?: boolean;
     allowInProduction?: boolean;
+    env?: HelloEnv;
+    scope?: HelloScope;
+    injected?: boolean;
+    lease?: boolean;
     testIdAttribute?: string;
     overlay?: boolean;
     captureNetworkBodies?: boolean;
@@ -26,3 +30,10 @@ export interface ReticleConnectOptions {
     idleEndMs?: number;
     redact?: RedactionConfig;
 }
+export declare function helloMode(options: Pick<ReticleConnectOptions, 'env' | 'scope' | 'injected'>): {
+    env?: HelloEnv;
+    scope?: HelloScope;
+    instrumentation?: HelloInstrumentation;
+};
+export declare function shouldBlockProduction(nodeEnv: string | undefined, allowInProduction: boolean): boolean;
+export declare function leaseToken(options: ReticleConnectOptions, current: string | undefined): string | undefined;

package/dist/connect-options.js

@@ -1 +1,18 @@
-export {};
+import { HelloInstrumentation, } from '@reticlehq/core';
+export function helloMode(options) {
+    return {
+        ...(options.env === undefined ? {} : { env: options.env }),
+        ...(options.scope === undefined ? {} : { scope: options.scope }),
+        ...(true === options.injected ? { instrumentation: HelloInstrumentation.INJECTED } : {}),
+    };
+}
+export function shouldBlockProduction(nodeEnv, allowInProduction) {
+    return 'production' === nodeEnv && !allowInProduction;
+}
+export function leaseToken(options, current) {
+    const token = options.token;
+    if (true !== options.lease || token === undefined || 0 === token.length || token === current) {
+        return undefined;
+    }
+    return token;
+}

package/dist/dom/a11y.d.ts

@@ -4,6 +4,8 @@ export declare function getAccessibleName(el: Element): string;
 export declare function getStates(el: Element, visible?: boolean): ElementState[];
 export declare function isSensitiveField(el: Element): boolean;
 export declare function getValue(el: Element): string | undefined;
+export declare function isHiddenByAriaOnly(el: Element): boolean;
+export declare function isRenderedOutsideAriaHidden(el: Element): boolean;
 export declare function isInViewport(el: Element, memo?: Map<Element, boolean>): boolean;
 export declare function isVisible(el: Element, memo?: Map<Element, boolean>): boolean;
 export declare function describe(el: Element, memo?: Map<Element, boolean>): ElementDescriptor;