@symbiote-native/blur 0.0.0-stage → 0.1.0

package/src/angular/blur-target-view/index.ios.ts

@@ -0,0 +1,25 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
+import { SymbioteHostPropsDirective, View } from '@symbiote-native/angular';
+import { BlurTargetViewBase } from './shared';
+
+/** Angular twin of `expo-blur`'s `BlurTargetView`, a plain View on iOS */
+@Component({
+  selector: 'BlurTargetView',
+  standalone: true,
+  imports: [SymbioteHostPropsDirective, View],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<view #host [symbioteHostProps]="hostProps"><ng-content /></view>`,
+})
+export class BlurTargetView extends BlurTargetViewBase {
+  @ViewChild('host', { read: ElementRef, static: true })
+  private readonly hostRef!: ElementRef<unknown>;
+
+  get nativeElement(): unknown {
+    return this.hostRef.nativeElement;
+  }
+}

package/src/angular/blur-target-view/index.ts

@@ -0,0 +1,2 @@
+// Базовая точка для headless и tsc, Metro берёт `index.ios` или `index.android`
+export { BlurTargetView } from './index.ios';

package/src/angular/blur-target-view/shared.ts

@@ -0,0 +1,22 @@
+import { Directive, Input } from '@angular/core';
+import { NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import { renderBlurTargetView } from '../../core';
+
+// Платформы различаются только тегом в шаблоне, остальное общее
+@Directive()
+export abstract class BlurTargetViewBase extends NativeViewBase {
+  /** Нужен свойству `blurTarget` у `BlurView`, чтобы найти host-узел */
+  abstract readonly nativeElement: unknown;
+
+  protected readonly propNames =
+    [] as const satisfies readonly (keyof BlurTargetViewBase)[];
+
+  protected override renderView(props: object): IDescriptor {
+    return renderBlurTargetView(props);
+  }
+
+  get hostProps(): Record<string, unknown> {
+    return this.descriptor?.props ?? {};
+  }
+}

package/src/angular/blur-view.ts

@@ -0,0 +1,87 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  type AfterViewInit,
+  type OnChanges,
+  type OnDestroy,
+  type SimpleChanges,
+} from '@angular/core';
+import {
+  DescriptorHost,
+  NativeViewBase,
+  hostNodeOf,
+} from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import { renderBlurView, warnBlurProps, watchBlurTarget } from '../core';
+import type { IBlurViewProps } from '../core';
+
+/** Angular twin of `expo-blur`'s `BlurView`, the projected content paints over the blur */
+@Component({
+  selector: 'BlurView',
+  standalone: true,
+  imports: [DescriptorHost],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `@if (descriptor; as node) {
+    <symbiote-descriptor-host [node]="node"
+      ><ng-content
+    /></symbiote-descriptor-host>
+  }`,
+})
+export class BlurView
+  extends NativeViewBase
+  implements AfterViewInit, OnChanges, OnDestroy
+{
+  @Input() tint?: IBlurViewProps['tint'];
+  @Input() intensity?: IBlurViewProps['intensity'];
+  @Input() blurReductionFactor?: IBlurViewProps['blurReductionFactor'];
+  @Input() experimentalBlurMethod?: IBlurViewProps['experimentalBlurMethod'];
+  @Input() blurMethod?: IBlurViewProps['blurMethod'];
+  /** Template ref на `BlurTargetView`, его содержимое это фон для размытия */
+  @Input() blurTarget?: unknown;
+
+  protected override readonly propNames = [
+    'tint',
+    'intensity',
+    'blurReductionFactor',
+    'experimentalBlurMethod',
+    'blurMethod',
+  ] as const satisfies readonly (keyof BlurView)[];
+
+  private blurTargetId: number | undefined;
+  private cancelWatch = (): void => {};
+  private isViewReady = false;
+
+  protected override renderView(props: object): IDescriptor {
+    return renderBlurView(props, this.blurTargetId);
+  }
+
+  // Цель ставится при создании представления соседа, поэтому ждём `ngAfterViewInit`
+  ngAfterViewInit(): void {
+    this.isViewReady = true;
+    this.watchTarget();
+    warnBlurProps(
+      Object.fromEntries(
+        this.propNames.map(name => [name, Reflect.get(this, name)]),
+      ),
+      this.blurTarget !== undefined,
+    );
+  }
+
+  override ngOnChanges(changes: SimpleChanges): void {
+    super.ngOnChanges(changes);
+    if (this.isViewReady && 'blurTarget' in changes) this.watchTarget();
+  }
+
+  protected override disposeView(): void {
+    this.cancelWatch();
+  }
+
+  private watchTarget(): void {
+    this.cancelWatch();
+    this.cancelWatch = watchBlurTarget(hostNodeOf(this.blurTarget), id => {
+      this.blurTargetId = id;
+      this.changeDetector.markForCheck();
+    });
+  }
+}

package/src/angular/index.ts

@@ -0,0 +1,13 @@
+// @symbiote-native/blur/angular: компоненты `BlurView` и `BlurTargetView` поверх общего ядра
+
+export { BlurView } from './blur-view';
+export { BlurTargetView } from './blur-target-view';
+export {
+  BLUR_MODULE_NAME,
+  blurTargetViewName,
+  blurViewName,
+  type IBlurMethod,
+  type IBlurTint,
+  type IBlurViewProps,
+  type IBlurTargetViewProps,
+} from '../core';

package/src/core/blur.ts

@@ -0,0 +1,214 @@
+// Ядро `BlurView` и `BlurTargetView`, порт `BlurView.tsx` из expo-blur
+import { Platform, requireNativeViewManager } from 'expo-modules-core';
+import { el } from '@symbiote-native/components';
+import type {
+  IAccessibilityProps,
+  IAriaProps,
+  IDescriptor,
+  IResponderProps,
+} from '@symbiote-native/components';
+import {
+  defineExpoNativeViews,
+  getNativeTag,
+  isSymbioteNode,
+  whenCommitted,
+} from '@symbiote-native/engine';
+import type {
+  IStyleProp,
+  ISymbioteEvent,
+  IViewStyle,
+} from '@symbiote-native/engine';
+
+export const BLUR_MODULE_NAME = 'ExpoBlur';
+const BLUR_VIEW_NAME = 'ExpoBlurView';
+const BLUR_TARGET_VIEW_NAME = 'ExpoBlurTargetView';
+
+const BLUR_METHODS = [
+  'none',
+  'dimezisBlurView',
+  'dimezisBlurViewSdk31Plus',
+] as const;
+
+/** Метод размытия на Android: `none` это полупрозрачный view, остальные нативный BlurView */
+export type IBlurMethod = (typeof BLUR_METHODS)[number];
+
+const DEFAULT_BLUR_METHOD: IBlurMethod = BLUR_METHODS[0];
+
+export type IBlurTint =
+  | 'light'
+  | 'dark'
+  | 'default'
+  | 'extraLight'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+
+type IViewSurface = IAccessibilityProps &
+  IAriaProps &
+  IResponderProps & {
+    style?: IStyleProp<IViewStyle>;
+    testID?: string;
+    nativeID?: string;
+    onLayout?: (event: ISymbioteEvent) => void;
+  };
+
+// `blurTarget` не здесь: у каждого адаптера свой тип ref
+export type IBlurViewProps = IViewSurface & {
+  /** @default 'default' */
+  tint?: IBlurTint;
+  /**
+   * Сила размытия от 1 до 100
+   * @default 50
+   */
+  intensity?: number;
+  /**
+   * Делитель силы размытия на Android
+   * @default 4
+   * @platform android
+   */
+  blurReductionFactor?: number;
+  /**
+   * @deprecated Use `blurMethod` instead
+   * @platform android
+   */
+  experimentalBlurMethod?: IBlurMethod;
+  /**
+   * @default 'none'
+   * @platform android
+   */
+  blurMethod?: IBlurMethod;
+};
+
+export type IBlurTargetViewProps = IViewSurface;
+
+// Эти ключи разбираются здесь, остальное уходит на View как есть
+const BLUR_KEYS: ReadonlySet<string> = new Set<keyof IBlurViewProps>([
+  'tint',
+  'intensity',
+  'blurReductionFactor',
+  'experimentalBlurMethod',
+  'blurMethod',
+]);
+
+const ABSOLUTE_FILL = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};
+
+const CONTAINER_STYLE = { backgroundColor: 'transparent' };
+
+const DEPRECATED_METHOD_WARNING =
+  'The `experimentalBlurMethod` prop has been depracated. Please use the `blurMethod` prop instead.';
+
+// Регистрация идёт при рендере: побочный эффект барреля теряется в release
+const views = defineExpoNativeViews(
+  requireNativeViewManager,
+  BLUR_MODULE_NAME,
+  {
+    blur: BLUR_VIEW_NAME,
+    target: BLUR_TARGET_VIEW_NAME,
+  },
+);
+
+export const blurViewName = views.blur.name;
+export const blurTargetViewName = views.target.name;
+export const ensureBlurRegistered = views.blur.ensureRegistered;
+export const ensureBlurTargetRegistered = views.target.ensureRegistered;
+
+function isBlurMethod(value: unknown): value is IBlurMethod {
+  return BLUR_METHODS.some(method => method === value);
+}
+
+function blurMethodOf(props: object): IBlurMethod {
+  const provided: unknown = Reflect.get(props, 'blurMethod');
+  const deprecated: unknown = Reflect.get(props, 'experimentalBlurMethod');
+  if (isBlurMethod(provided)) return provided;
+  return isBlurMethod(deprecated) ? deprecated : DEFAULT_BLUR_METHOD;
+}
+
+/** Предупреждения из `componentDidMount` upstream, зовутся один раз при монтировании */
+export function warnBlurProps(props: object, hasBlurTarget: boolean): void {
+  const method = blurMethodOf(props);
+  const isAndroidTarget = Platform.select({ android: true, default: false });
+  if (isAndroidTarget && method !== DEFAULT_BLUR_METHOD && !hasBlurTarget) {
+    console.warn(
+      `You have selected the "${method}" blur method, but the \`blurTarget\` prop has not been configured. The blur view will fallback to "none" blur method to avoid errors. You can learn more about the new BlurView API at: https://docs.expo.dev/versions/latest/sdk/blur-view/`,
+    );
+  }
+  if (Reflect.get(props, 'experimentalBlurMethod') != null) {
+    console.warn(DEPRECATED_METHOD_WARNING);
+  }
+}
+
+/**
+ * Отдаёт нативный тег цели размытия после её коммита, у не-узла отдаёт `undefined`
+ * Адаптер сам приводит свой ref к host-узлу, возвращённая функция отменяет ожидание
+ */
+export function watchBlurTarget(
+  target: unknown,
+  onId: (id: number | undefined) => void,
+): () => void {
+  if (!isSymbioteNode(target)) {
+    onId(undefined);
+    return () => {};
+  }
+  return whenCommitted(target, () => onId(getNativeTag(target)));
+}
+
+// `object`, а не тип пропсов: Vue и Angular отдают нетипизированный набор атрибутов
+export function renderBlurView(
+  props: object,
+  blurTargetId: number | null | undefined,
+): IDescriptor {
+  const hostProps = Object.fromEntries(
+    Object.entries(props).filter(([key]) => !BLUR_KEYS.has(key)),
+  );
+  const style = [CONTAINER_STYLE, Reflect.get(props, 'style')];
+  if (!ensureBlurRegistered()) {
+    console.warn('BlurView is not available on this platform');
+    return el('view', { ...hostProps, style });
+  }
+
+  const tint: unknown = Reflect.get(props, 'tint');
+  const intensity: unknown = Reflect.get(props, 'intensity');
+  const reduction: unknown = Reflect.get(props, 'blurReductionFactor');
+  const native = el(blurViewName(), {
+    ...(blurTargetId === undefined ? {} : { blurTargetId }),
+    tint: tint ?? 'default',
+    intensity: intensity ?? 50,
+    blurReductionFactor: reduction ?? 4,
+    blurMethod: blurMethodOf(props),
+    style: ABSOLUTE_FILL,
+  });
+  return el('view', { ...hostProps, style }, [native]);
+}
+
+// Нативная цель размытия есть только на Android, на iOS это обычный View
+export function renderBlurTargetView(props: object): IDescriptor {
+  const hostProps = { ...props };
+  if (!Platform.select({ android: true, default: false })) {
+    return el('view', hostProps);
+  }
+  if (!ensureBlurTargetRegistered()) {
+    console.warn('BlurTargetView is not available on this platform');
+    return el('view', hostProps);
+  }
+  return el(blurTargetViewName(), hostProps);
+}

package/src/core/index.ts

@@ -0,0 +1,15 @@
+export {
+  BLUR_MODULE_NAME,
+  blurTargetViewName,
+  blurViewName,
+  ensureBlurRegistered,
+  ensureBlurTargetRegistered,
+  renderBlurTargetView,
+  renderBlurView,
+  warnBlurProps,
+  watchBlurTarget,
+  type IBlurMethod,
+  type IBlurTargetViewProps,
+  type IBlurTint,
+  type IBlurViewProps,
+} from './blur';

package/src/react/blur.ts

@@ -0,0 +1,49 @@
+import { createElement, useEffect, useLayoutEffect, useState } from 'react';
+import type { ReactElement, ReactNode, RefObject } from 'react';
+import { descriptorToReactWithChildren } from '@symbiote-native/react';
+import type { IHostInstance, IViewProps } from '@symbiote-native/react';
+import {
+  renderBlurTargetView,
+  renderBlurView,
+  warnBlurProps,
+  watchBlurTarget,
+} from '../core';
+import type { IBlurTargetViewProps, IBlurViewProps } from '../core';
+
+// Поверхность View как у `ViewProps` в upstream, дети и `className` свои у React
+export type IBlurViewReactProps = IBlurViewProps &
+  Omit<IViewProps, keyof IBlurViewProps | 'children'> & {
+    /** Ref на `BlurTargetView`, его содержимое это фон для размытия */
+    blurTarget?: RefObject<IHostInstance | null>;
+    children?: ReactNode;
+    className?: string;
+  };
+
+export type IBlurTargetViewReactProps = IBlurTargetViewProps &
+  Omit<IViewProps, keyof IBlurTargetViewProps | 'children' | 'ref'> & {
+    ref?: RefObject<IHostInstance | null>;
+    children?: ReactNode;
+    className?: string;
+  };
+
+/** React twin of `expo-blur`'s `BlurView`, children paint over the blur */
+export function BlurView(props: IBlurViewReactProps): ReactElement {
+  const { blurTarget, children, ...rest } = props;
+  const [blurTargetId, setBlurTargetId] = useState<number | undefined>();
+
+  // Без списка зависимостей, как `componentDidUpdate` upstream: ref цели ставится в коммите
+  useLayoutEffect(() => watchBlurTarget(blurTarget?.current, setBlurTargetId));
+  useEffect(() => warnBlurProps(rest, blurTarget !== undefined), []);
+
+  return descriptorToReactWithChildren(
+    renderBlurView(rest, blurTargetId),
+    children,
+  );
+}
+
+/** React twin of `expo-blur`'s `BlurTargetView`, native on Android and a plain View on iOS */
+export function BlurTargetView(props: IBlurTargetViewReactProps): ReactElement {
+  const { children, ...rest } = props;
+  const descriptor = renderBlurTargetView(rest);
+  return createElement(descriptor.type, descriptor.props, children);
+}

package/src/react/index.ts

@@ -0,0 +1,14 @@
+// @symbiote-native/blur/react: компоненты `BlurView` и `BlurTargetView` поверх общего ядра
+
+export { BlurTargetView, BlurView } from './blur';
+export type {
+  IBlurTargetViewReactProps as IBlurTargetViewProps,
+  IBlurViewReactProps as IBlurViewProps,
+} from './blur';
+export {
+  BLUR_MODULE_NAME,
+  blurTargetViewName,
+  blurViewName,
+  type IBlurMethod,
+  type IBlurTint,
+} from '../core';

package/src/solid/blur.ts

@@ -0,0 +1,60 @@
+import {
+  createEffect,
+  createSignal,
+  onCleanup,
+  onMount,
+  splitProps,
+} from 'solid-js';
+import type { JSX } from 'solid-js';
+import {
+  defineDescriptorComponent,
+  descriptorToSolid,
+} from '@symbiote-native/solid';
+import type { IHostInstance, IViewProps } from '@symbiote-native/solid';
+import type { IClassNameValue } from '@symbiote-native/engine';
+import {
+  renderBlurTargetView,
+  renderBlurView,
+  warnBlurProps,
+  watchBlurTarget,
+} from '../core';
+import type { IBlurTargetViewProps, IBlurViewProps } from '../core';
+
+// Поверхность View как у `ViewProps` в upstream, дети и `class` свои у Solid
+export type IBlurViewSolidProps = IBlurViewProps &
+  Omit<IViewProps, keyof IBlurViewProps | 'children' | 'ref'> & {
+    /** Host-узел `BlurTargetView`, его содержимое это фон для размытия */
+    blurTarget?: IHostInstance;
+    children?: JSX.Element;
+    class?: IClassNameValue;
+  };
+
+export type IBlurTargetViewSolidProps = IBlurTargetViewProps &
+  Omit<IViewProps, keyof IBlurTargetViewProps | 'children'> & {
+    children?: JSX.Element;
+    class?: IClassNameValue;
+  };
+
+/** Solid twin of `expo-blur`'s `BlurView`, children paint over the blur */
+export function BlurView(
+  props: IBlurViewSolidProps,
+): ReturnType<typeof descriptorToSolid> {
+  const [local, rest] = splitProps(props, ['children', 'blurTarget']);
+  const [blurTargetId, setBlurTargetId] = createSignal<number | undefined>();
+
+  // Цель приходит сигналом после коммита, поэтому следим за ней, а не читаем один раз
+  createEffect(() => {
+    const cancel = watchBlurTarget(local.blurTarget, setBlurTargetId);
+    onCleanup(cancel);
+  });
+  onMount(() => warnBlurProps({ ...rest }, local.blurTarget !== undefined));
+
+  return descriptorToSolid(
+    () => renderBlurView({ ...rest }, blurTargetId()),
+    () => local.children,
+  );
+}
+
+/** Solid twin of `expo-blur`'s `BlurTargetView`, native on Android and a plain View on iOS */
+export const BlurTargetView =
+  defineDescriptorComponent<IBlurTargetViewSolidProps>(renderBlurTargetView);

package/src/solid/index.ts

@@ -0,0 +1,14 @@
+// @symbiote-native/blur/solid: компоненты `BlurView` и `BlurTargetView` поверх общего ядра
+
+export { BlurTargetView, BlurView } from './blur';
+export type {
+  IBlurTargetViewSolidProps as IBlurTargetViewProps,
+  IBlurViewSolidProps as IBlurViewProps,
+} from './blur';
+export {
+  BLUR_MODULE_NAME,
+  blurTargetViewName,
+  blurViewName,
+  type IBlurMethod,
+  type IBlurTint,
+} from '../core';

package/src/svelte/blur-props.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { IViewProps } from '@symbiote-native/svelte';
+import type { IBlurTargetViewProps, IBlurViewProps } from '../core';
+
+// Поверхность View как у `ViewProps` в upstream, дети идут сниппетом
+export type IBlurViewSvelteProps = IBlurViewProps &
+  Omit<IViewProps, keyof IBlurViewProps | 'children'> & {
+    /** Значение `bind:ref` от `BlurTargetView`, его содержимое это фон для размытия */
+    blurTarget?: unknown;
+    children?: Snippet;
+  };
+
+export type IBlurTargetViewSvelteProps = IBlurTargetViewProps &
+  Omit<IViewProps, keyof IBlurTargetViewProps | 'children'> & {
+    /** Host-ref, отдаётся через `bind:ref` и передаётся в `blurTarget` у `BlurView` */
+    ref?: unknown;
+    children?: Snippet;
+  };

package/src/svelte/blur-target-view.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import DescriptorHost from '@symbiote-native/svelte/descriptor-host';
+  import { renderBlurTargetView } from '../core';
+  import type { IBlurTargetViewSvelteProps } from './blur-props';
+
+  let {
+    children,
+    ref = $bindable(),
+    ...rest
+  }: IBlurTargetViewSvelteProps = $props();
+  const descriptor = $derived(renderBlurTargetView({ ...rest }));
+</script>
+
+<DescriptorHost {descriptor} bind:ref {children} />

package/src/svelte/blur-view.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import DescriptorHost from '@symbiote-native/svelte/descriptor-host';
+  import { hostInstance } from '@symbiote-native/svelte/native-view-bridge';
+  import { renderBlurView, warnBlurProps, watchBlurTarget } from '../core';
+  import type { IBlurViewSvelteProps } from './blur-props';
+
+  const { children, blurTarget, ...rest }: IBlurViewSvelteProps = $props();
+  let blurTargetId = $state<number | undefined>();
+
+  // Цель приходит после монтирования и мутирует, поэтому эффект следит за ней
+  $effect(() =>
+    watchBlurTarget(hostInstance(blurTarget), id => {
+      blurTargetId = id;
+    }),
+  );
+  $effect(() => warnBlurProps({ ...rest }, blurTarget !== undefined));
+
+  const descriptor = $derived(renderBlurView({ ...rest }, blurTargetId));
+</script>
+
+<DescriptorHost {descriptor} {children} />

package/src/svelte/index.ts

@@ -0,0 +1,15 @@
+// @symbiote-native/blur/svelte: компоненты `BlurView` и `BlurTargetView` поверх общего ядра
+
+export { default as BlurTargetView } from './blur-target-view.svelte';
+export { default as BlurView } from './blur-view.svelte';
+export type {
+  IBlurTargetViewSvelteProps as IBlurTargetViewProps,
+  IBlurViewSvelteProps as IBlurViewProps,
+} from './blur-props';
+export {
+  BLUR_MODULE_NAME,
+  blurTargetViewName,
+  blurViewName,
+  type IBlurMethod,
+  type IBlurTint,
+} from '../core';

package/src/svelte/svelte-ambient.d.ts

@@ -0,0 +1,6 @@
+// Pulls in svelte's ambient global declarations ($state/$effect/...) for this package's tsc
+// program. adapters/svelte gets these for free because render.ts does a real value import from
+// 'svelte' (any file in a program importing a module loads its ambient globals for the whole
+// program); this package has no such import, so a triple-slash reference does the same job
+// explicitly rather than relying on an incidental side-effect.
+/// <reference types="svelte" />

package/src/svelte/svelte-compile.test-helper.ts

@@ -0,0 +1,6 @@
+// Re-exports the existing harness instead of another copy
+export {
+  createSvelteHarness,
+  loadComponent,
+  type ISvelteHarness,
+} from '../../../sqlite/src/svelte/svelte-compile.test-helper';