@symbiote-native/angular 0.6.0 → 0.6.1

package/src/components/virtualized-section-list/index.ts

@@ -33,6 +33,7 @@ import {
 } from '@angular/core';
 import {
   flattenSections,
+  resolveStickySectionHeaders,
   scrollLocationToFlatIndex,
   sectionEntryKey,
   unwrapEntryItem,
@@ -442,9 +443,11 @@ export class VirtualizedSectionList<ItemT = unknown>
     this.headerIndices = headerIndices;
 
     // RN sticks section headers by default only on iOS; Android does not unless asked.
-    const stickyDefault = Platform.OS === 'ios';
-    const stickyEnabled = this.stickySectionHeadersEnabled ?? stickyDefault;
-    this.stickyHeaderIndices = stickyEnabled ? headerIndices : undefined;
+    this.stickyHeaderIndices = resolveStickySectionHeaders(
+      this.stickySectionHeadersEnabled,
+      headerIndices,
+      Platform.OS,
+    );
 
     dlog(
       `Angular VirtualizedSectionList: ${sections.length} sections flattened to ${entries.length} entries`,

package/src/index.ts

@@ -135,7 +135,12 @@ export { DescriptorOutlet } from './descriptor-to-angular';
 // call.
 export { PortalDirective, PortalOutletDirective } from './create-portal';
 export { createTunnel, TunnelInDirective, TunnelOut, type ITunnelStore } from './create-tunnel';
-export { registerComposedComponent, SymbioteRenderer, SymbioteRendererFactory } from './renderer';
+export { SymbioteRenderer, SymbioteRendererFactory } from './renderer';
+// registerComposedComponent lives in the dependency-free leaf ./anchor-host-registry, NOT in the
+// require-cyclic ./renderer — see the leaf header. The babel-register-composed plugin injects the
+// import straight from that subpath so app-screen registration never routes through this cyclic
+// barrel.
+export { registerComposedComponent } from './anchor-host-registry';
 export { findNodeHandle } from './host-instance';
 export type { IHostInstance } from './host-instance';
 export { StatusBar } from './modules/status-bar';

package/src/renderer/index.ts

@@ -26,6 +26,7 @@ import {
 } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
 import type { Renderer2, RendererFactory2, RendererType2 } from '@angular/core';
+import { isAnchorHostComponent } from '../anchor-host-registry';
 import {
   getScrollViewProjection,
   removeScrollViewProjectedChild,
@@ -76,68 +77,9 @@ const PRIMITIVE_SELECTOR_ALIAS: Record<string, string> = {
   Text: 'symbiote-text',
 };
 
-// A composed component's selector must be listed so createElement gives it a non-painting
-// anchor host (see the set comment below). Tests register their own child-component selectors
-// through this at module load; app-authored composed components can too.
-export function registerComposedComponent(selector: string): void {
-  ANCHOR_HOST_COMPONENTS.add(selector.toLowerCase());
-}
-
-// Lowercased at construction — createElement's lookup and registerComposedComponent's insert
-// both normalize to lowercase (Angular lowercases a dynamically-mounted component's selector at
-// runtime, see §11a), so the literal entries below must match that or every capitalized one
-// (all but the handful already written lowercase) silently never matches .has() and falls
-// through to a real Fabric createNode — the exact "Unimplemented component" / extra-wrapper-node
-// bug this Set exists to prevent.
-const ANCHOR_HOST_COMPONENTS: Set<string> = new Set(
-  [
-    // Composed Angular components render their real Fabric descriptor tree from the template;
-    // their Angular host element is only a framework bookkeeping node and must not paint. This
-    // is NOT limited to adapter-authored components — ANY custom composed @Component used as a
-    // plain <Tag> inside another template needs its selector listed here too, or Angular's
-    // automatic host-element creation for it falls through to a raw Fabric createNode call with
-    // an unrecognized view name, which paints RN's own "Unimplemented component: <Tag>" fallback
-    // view instead (a real device-visible bug, not a silent no-op). This Set holds only
-    // adapter/engine-owned selectors; app code and third-party packages self-register their own
-    // composed components through registerComposedComponent instead of being hardcoded here.
-    'ActivityIndicator',
-    'Button',
-    'FlatList',
-    'AnimatedView',
-    'symbiote-animated-view',
-    'AnimatedText',
-    'symbiote-animated-text',
-    'AnimatedImage',
-    'symbiote-animated-image',
-    'AnimatedScrollView',
-    'symbiote-animated-scroll-view',
-    'symbiote-descriptor-outlet',
-    'tunnel-out',
-    'Image',
-    'ImageBackground',
-    'InputAccessoryView',
-    'KeyboardAvoidingView',
-    'Modal',
-    'Pressable',
-    'RefreshControl',
-    'SafeAreaView',
-    'ScrollView',
-    'ScrollViewStickyHeader',
-    'SectionList',
-    'symbiote-sticky-header',
-    'StatusBar',
-    'Switch',
-    'Text',
-    'TextInput',
-    'TouchableHighlight',
-    'TouchableNativeFeedback',
-    'TouchableOpacity',
-    'TouchableWithoutFeedback',
-    'VirtualizedList',
-    'VirtualizedSectionList',
-    'symbiote-pressable',
-  ].map(selector => selector.toLowerCase()),
-);
+// The ANCHOR_HOST_COMPONENTS Set and registerComposedComponent now live in the dependency-free
+// leaf module ../anchor-host-registry (imported above as isAnchorHostComponent) — see its header
+// for why the registry must NOT sit in this require-cyclic renderer module.
 
 // Inserting a bare raw-text node anywhere but inside a <Text> is invalid in Fabric (a
 // stray RCTRawText would paint). Angular's ɵɵtext only ever lands text inside a <Text>,
@@ -170,7 +112,7 @@ export class SymbioteRenderer implements Renderer2 {
     // ViewConfig). toPublicInstance grafts the imperative API (measure / setNativeProps /
     // focus) onto the raw node in place, returning the SAME identity the commit mirror keys on.
     const engineName = PRIMITIVE_SELECTOR_ALIAS[name] ?? name;
-    if (ANCHOR_HOST_COMPONENTS.has(engineName.toLowerCase())) {
+    if (isAnchorHostComponent(engineName)) {
       const anchor = tagAnchorForDebug(createAnchor());
       dlog(`angular createElement ${name} -> anchor host ${describeHost(anchor)}`);
       return anchor;

package/src/renderer/renderer.test.ts

@@ -14,7 +14,8 @@ import {
   registerStyles,
 } from '@symbiote-native/engine';
 import { installFabric } from '@symbiote-native/test-utils';
-import { registerComposedComponent, SymbioteRenderer, SymbioteRendererFactory } from './index';
+import { SymbioteRenderer, SymbioteRendererFactory } from './index';
+import { registerComposedComponent } from '../anchor-host-registry';
 
 const ROOT_TAG = 707;
 const PROBE_ID = 'probe';

package/build/bootstrap.d.ts

@@ -1,7 +0,0 @@
-import type { Type } from '@angular/core';
-import { type IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
-export type { IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
-export type IBootstrapApplicationOptions = IBootstrapHostOptions & {
-    appName: string;
-};
-export declare function bootstrapApplication(AppComponent: Type<unknown>, options: IBootstrapApplicationOptions): void;

package/build/bootstrap.js

@@ -1,14 +0,0 @@
-// Zero-config app entry, the Angular twin of adapters/react/src/bootstrap.ts. Lives OUTSIDE the
-// package's main barrel — see that file's header for why anything importing react-native must
-// stay there. No @Component/@Directive decorators here, so unlike the package's main "." entry
-// this needs no ngc/AOT build step and can stay a plain source reference.
-import { AppRegistry as RNAppRegistry } from 'react-native';
-import { bootstrapHost } from '@symbiote-native/components/bootstrap';
-import { AppRegistry, setHostRegistrar } from './modules/app-registry';
-// Mirrors real Angular's bootstrapApplication(RootComponent, config) idiom.
-export function bootstrapApplication(AppComponent, options) {
-    const { appName, ...bootstrapOptions } = options;
-    bootstrapHost(bootstrapOptions);
-    setHostRegistrar(RNAppRegistry);
-    AppRegistry.registerComponent(appName, () => AppComponent);
-}

package/build/components/activity-indicator/index.android.d.ts

@@ -1,9 +0,0 @@
-import { ActivityIndicatorBase } from './shared';
-export type { IActivityIndicatorProps } from './shared';
-export declare class ActivityIndicator extends ActivityIndicatorBase {
-    protected readonly defaultColor: null;
-    protected readonly nativeExtras: {
-        styleAttr: string;
-        indeterminate: boolean;
-    };
-}

package/build/components/activity-indicator/index.android.js

@@ -1,64 +0,0 @@
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DescriptorOutlet } from '../../descriptor-to-angular';
-import { ActivityIndicatorBase } from './shared';
-let ActivityIndicator = (() => {
-    let _classDecorators = [Component({
-            selector: 'ActivityIndicator',
-            standalone: true,
-            imports: [DescriptorOutlet],
-            changeDetection: ChangeDetectionStrategy.OnPush,
-            template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = ActivityIndicatorBase;
-    var ActivityIndicator = class extends _classSuper {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            ActivityIndicator = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        defaultColor = null;
-        nativeExtras = { styleAttr: 'Normal', indeterminate: true };
-    };
-    return ActivityIndicator = _classThis;
-})();
-export { ActivityIndicator };

package/build/components/activity-indicator/index.d.ts

@@ -1 +0,0 @@
-export * from './index.ios';

package/build/components/activity-indicator/index.ios.d.ts

@@ -1,5 +0,0 @@
-import { ActivityIndicatorBase } from './shared';
-export type { IActivityIndicatorProps } from './shared';
-export declare class ActivityIndicator extends ActivityIndicatorBase {
-    protected readonly defaultColor = "#999999";
-}

package/build/components/activity-indicator/index.ios.js

@@ -1,64 +0,0 @@
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DescriptorOutlet } from '../../descriptor-to-angular';
-import { ActivityIndicatorBase } from './shared';
-const IOS_DEFAULT_COLOR = '#999999';
-let ActivityIndicator = (() => {
-    let _classDecorators = [Component({
-            selector: 'ActivityIndicator',
-            standalone: true,
-            imports: [DescriptorOutlet],
-            changeDetection: ChangeDetectionStrategy.OnPush,
-            template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = ActivityIndicatorBase;
-    var ActivityIndicator = class extends _classSuper {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            ActivityIndicator = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        defaultColor = IOS_DEFAULT_COLOR;
-    };
-    return ActivityIndicator = _classThis;
-})();
-export { ActivityIndicator };

package/build/components/activity-indicator/index.js

@@ -1,3 +0,0 @@
-// Base/default ActivityIndicator. Re-exports the iOS build; Metro picks index.ios.ts /
-// index.android.ts in platform bundles.
-export * from './index.ios';

package/build/components/activity-indicator/shared.d.ts

@@ -1,64 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { type IAccessibilityProps, type IAccessibilityStateValue, type IActivityIndicatorProps, type IActivityIndicatorSize, type IAriaProps } from '@symbiote-native/components';
-import type { ISymbioteEvent } from '@symbiote-native/engine';
-import type { IDescriptor } from '@symbiote-native/components';
-export type { IActivityIndicatorProps, IActivityIndicatorSize } from '@symbiote-native/components';
-export type IActivityIndicatorInputs = Omit<IActivityIndicatorProps, 'onLayout' | 'onAccessibilityAction' | 'onAccessibilityTap' | 'onMagicTap' | 'onAccessibilityEscape'>;
-export declare abstract class ActivityIndicatorBase implements IActivityIndicatorInputs {
-    animating?: boolean;
-    color?: string;
-    hidesWhenStopped?: boolean;
-    nativeID?: string;
-    size?: IActivityIndicatorSize;
-    style?: IActivityIndicatorProps['style'];
-    testID?: string;
-    readonly layout: EventEmitter<ISymbioteEvent>;
-    accessible?: boolean;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
-    accessibilityRole?: IAccessibilityProps['accessibilityRole'];
-    accessibilityState?: IAccessibilityStateValue;
-    accessibilityValue?: IAccessibilityProps['accessibilityValue'];
-    accessibilityActions?: IAccessibilityProps['accessibilityActions'];
-    accessibilityLabelledBy?: string | string[];
-    importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-    accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
-    screenReaderFocusable?: boolean;
-    accessibilityViewIsModal?: boolean;
-    accessibilityElementsHidden?: boolean;
-    accessibilityIgnoresInvertColors?: boolean;
-    accessibilityLanguage?: string;
-    accessibilityRespondsToUserInteraction?: boolean;
-    accessibilityShowsLargeContentViewer?: boolean;
-    accessibilityLargeContentTitle?: string;
-    readonly accessibilityAction: EventEmitter<ISymbioteEvent>;
-    readonly accessibilityTap: EventEmitter<ISymbioteEvent>;
-    readonly magicTap: EventEmitter<ISymbioteEvent>;
-    readonly accessibilityEscape: EventEmitter<ISymbioteEvent>;
-    role?: IAriaProps['role'];
-    ariaLabel?: string;
-    ariaLabelledBy?: string;
-    ariaLive?: IAriaProps['aria-live'];
-    ariaHidden?: boolean;
-    ariaBusy?: boolean;
-    ariaChecked?: boolean | 'mixed';
-    ariaDisabled?: boolean;
-    ariaExpanded?: boolean;
-    ariaSelected?: boolean;
-    ariaModal?: boolean;
-    ariaValueMax?: number;
-    ariaValueMin?: number;
-    ariaValueNow?: number;
-    ariaValueText?: string;
-    protected abstract readonly defaultColor: string | null;
-    protected readonly nativeExtras: Readonly<Record<string, unknown>>;
-    private readonly elementRef;
-    private readonly onLayoutHandler;
-    private readonly onAccessibilityActionHandler;
-    private readonly onAccessibilityTapHandler;
-    private readonly onMagicTapHandler;
-    private readonly onAccessibilityEscapeHandler;
-    get descriptor(): IDescriptor;
-    private get platform();
-    private emitterHandler;
-}