@symbiote-native/blur 0.0.0-stage → 0.0.0

package/src/core/blur.ts

@@ -0,0 +1,210 @@
+// Ядро `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,46 @@
+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,54 @@
+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';

package/src/vue/blur.ts

@@ -0,0 +1,82 @@
+import {
+  defineComponent,
+  h,
+  isRef,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  toRaw,
+  type VNode,
+} from '@vue/runtime-core';
+import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
+import type { IViewProps } from '@symbiote-native/vue';
+import {
+  renderBlurTargetView,
+  renderBlurView,
+  warnBlurProps,
+  watchBlurTarget,
+} from '../core';
+import type { IBlurTargetViewProps, IBlurViewProps } from '../core';
+
+// Поверхность View как у `ViewProps` в upstream, дети идут слотом по умолчанию
+export type IBlurViewVueProps = IBlurViewProps &
+  Omit<IViewProps, keyof IBlurViewProps> & {
+    /** Template ref на `BlurTargetView`, его содержимое это фон для размытия */
+    blurTarget?: unknown;
+  };
+
+export type IBlurTargetViewVueProps = IBlurTargetViewProps &
+  Omit<IViewProps, keyof IBlurTargetViewProps>;
+
+// Template ref на компонент отдаёт его публичный экземпляр, корневой host-узел лежит в `$el`
+function hostOf(target: unknown): unknown {
+  const value = isRef(target) ? target.value : target;
+  const host =
+    value !== null && typeof value === 'object' && '$el' in value
+      ? value.$el
+      : value;
+  return toRaw(host);
+}
+
+/** Vue twin of `expo-blur`'s `BlurView`, the default slot paints over the blur */
+export const BlurView = defineComponent({
+  name: 'BlurView',
+  // Все атрибуты это пропсы нативного view, на обёртку ничего не должно просочиться
+  inheritAttrs: false,
+  setup(_props, { attrs, slots }) {
+    const blurTargetId = ref<number | undefined>();
+    let cancelWatch = (): void => {};
+    const syncTarget = (): void => {
+      cancelWatch();
+      cancelWatch = watchBlurTarget(hostOf(attrs.blurTarget), id => {
+        blurTargetId.value = id;
+      });
+    };
+    // Ref цели ставится при патче, поэтому читаем его после монтирования и каждого обновления
+    onMounted(() => {
+      syncTarget();
+      warnBlurProps(normalizeVueAttrs(attrs), attrs.blurTarget !== undefined);
+    });
+    onUpdated(syncTarget);
+    onBeforeUnmount(() => cancelWatch());
+
+    return (): VNode => {
+      const { blurTarget: _blurTarget, ...rest } = normalizeVueAttrs(attrs);
+      const descriptor = renderBlurView(rest, blurTargetId.value);
+      return descriptorToVue(descriptor, slots.default?.() ?? []);
+    };
+  },
+});
+
+/** Vue twin of `expo-blur`'s `BlurTargetView`, native on Android and a plain View on iOS */
+export const BlurTargetView = defineComponent({
+  name: 'BlurTargetView',
+  inheritAttrs: false,
+  setup(_props, { attrs, slots }) {
+    return (): VNode => {
+      const descriptor = renderBlurTargetView(normalizeVueAttrs(attrs));
+      return h(descriptor.type, descriptor.props, slots.default?.() ?? []);
+    };
+  },
+});

package/src/vue/index.ts

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