@symbiote-native/linear-gradient 0.0.0-stage → 0.0.0

package/src/core/linear-gradient.ts

@@ -0,0 +1,184 @@
+// Ядро `LinearGradient`, порт `LinearGradient.tsx` из expo-linear-gradient
+import { Platform, requireNativeViewManager } from 'expo-modules-core';
+import { el } from '@symbiote-native/components';
+import type {
+  IAccessibilityProps,
+  IAriaProps,
+  IDescriptor,
+  IResponderProps,
+} from '@symbiote-native/components';
+import {
+  expoViewManagerName,
+  flattenStyle,
+  processColor,
+  styleOfProps,
+  tryRegisterNativeView,
+} from '@symbiote-native/engine';
+import type {
+  IColorValue,
+  IStyleProp,
+  ISymbioteEvent,
+  IViewStyle,
+} from '@symbiote-native/engine';
+
+export const LINEAR_GRADIENT_MODULE_NAME = 'ExpoLinearGradient';
+
+export type INativeLinearGradientPoint = [x: number, y: number];
+
+/** Доли размера градиента от 0 до 1, объект `{ x, y }` или пара `[x, y]` */
+export type ILinearGradientPoint =
+  | { x: number; y: number }
+  | INativeLinearGradientPoint;
+
+export type ILinearGradientProps = IAccessibilityProps &
+  IAriaProps &
+  IResponderProps & {
+    /** Минимум два цвета, для одного используйте `style.backgroundColor` у View */
+    colors: readonly [IColorValue, IColorValue, ...IColorValue[]];
+    /** Позиции остановок от 0 до 1 по возрастанию, той же длины, что и `colors` */
+    locations?: readonly [number, number, ...number[]] | null;
+    /** @default { x: 0.5, y: 0.0 } */
+    start?: ILinearGradientPoint | null;
+    /** @default { x: 0.5, y: 1.0 } */
+    end?: ILinearGradientPoint | null;
+    /**
+     * Дизеринг убирает полосы в градиенте, false может ускорить отрисовку
+     * @default true
+     * @platform android
+     */
+    dither?: boolean;
+    style?: IStyleProp<IViewStyle>;
+    testID?: string;
+    nativeID?: string;
+    onLayout?: (event: ISymbioteEvent) => void;
+  };
+
+// Эти ключи разбираются здесь, остальное уходит на хост как есть
+const GRADIENT_KEYS: ReadonlySet<string> = new Set<keyof ILinearGradientProps>([
+  'colors',
+  'locations',
+  'start',
+  'end',
+  'dither',
+]);
+
+const ABSOLUTE_FILL = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};
+
+export function linearGradientViewName(): string {
+  return expoViewManagerName(LINEAR_GRADIENT_MODULE_NAME);
+}
+
+// Регистрирует view config в реестре RN, из него движок берёт события и процессоры пропсов
+// Зовётся при рендере, а не при импорте: регистрация в побочном эффекте барреля теряется в release
+export function ensureLinearGradientRegistered(): boolean {
+  return tryRegisterNativeView(() =>
+    requireNativeViewManager(LINEAR_GRADIENT_MODULE_NAME),
+  );
+}
+
+function isNumber(value: unknown): value is number {
+  return typeof value === 'number';
+}
+
+export function normalizePoint(
+  point: unknown,
+): INativeLinearGradientPoint | undefined {
+  if (!point) return undefined;
+  if (Array.isArray(point)) {
+    const [x, y] = point;
+    if (point.length === 2 && isNumber(x) && isNumber(y)) return [x, y];
+    console.warn(
+      'start and end props for LinearGradient must be of the format [x,y] or {x, y}',
+    );
+    return undefined;
+  }
+  const x: unknown = Reflect.get(Object(point), 'x');
+  const y: unknown = Reflect.get(Object(point), 'y');
+  return isNumber(x) && isNumber(y) ? [x, y] : undefined;
+}
+
+function resolveLocations(
+  colors: readonly unknown[],
+  locations: unknown,
+): readonly number[] | undefined {
+  if (!Array.isArray(locations)) return undefined;
+  if (locations.length === colors.length) return locations;
+  console.warn(
+    'LinearGradient colors and locations props should be arrays of the same length',
+  );
+  return locations.slice(0, colors.length);
+}
+
+function radiusOr(value: unknown, fallback: number): number {
+  return isNumber(value) ? value : fallback;
+}
+
+// Формат из `Path.addRoundRect`: по два значения на угол, начиная с верхнего левого
+function borderRadiiOf(style: unknown): number[] {
+  const flat = flattenStyle(style) ?? {};
+  const base = radiusOr(flat.borderRadius, 0);
+  const topLeft = radiusOr(flat.borderTopLeftRadius, base);
+  const topRight = radiusOr(flat.borderTopRightRadius, base);
+  const bottomRight = radiusOr(flat.borderBottomRightRadius, base);
+  const bottomLeft = radiusOr(flat.borderBottomLeftRadius, base);
+  return [
+    topLeft,
+    topLeft,
+    topRight,
+    topRight,
+    bottomRight,
+    bottomRight,
+    bottomLeft,
+    bottomLeft,
+  ];
+}
+
+function withoutUndefined(
+  props: Record<string, unknown>,
+): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== undefined),
+  );
+}
+
+// `object`, а не тип пропсов: Vue и Angular отдают нетипизированный набор атрибутов
+export function renderLinearGradient(props: object): IDescriptor {
+  const hostProps = Object.fromEntries(
+    Object.entries(props).filter(([key]) => !GRADIENT_KEYS.has(key)),
+  );
+  if (!ensureLinearGradientRegistered()) {
+    console.warn('LinearGradient is not available on this platform');
+    return el('view', hostProps);
+  }
+
+  const colors: unknown = Reflect.get(props, 'colors');
+  const colorList = Array.isArray(colors) ? colors : [];
+  const nativeProps = withoutUndefined({
+    colors: colorList.map(color => processColor(color)),
+    locations: resolveLocations(colorList, Reflect.get(props, 'locations')),
+    startPoint: normalizePoint(Reflect.get(props, 'start')),
+    endPoint: normalizePoint(Reflect.get(props, 'end')),
+  });
+
+  if (!Platform.select({ android: true, default: false })) {
+    return el(linearGradientViewName(), { ...hostProps, ...nativeProps });
+  }
+
+  // Нативный градиент заполняет View и сам скругляет углы, т.к. RN не обрезает по радиусу
+  const native = el(
+    linearGradientViewName(),
+    withoutUndefined({
+      ...nativeProps,
+      style: ABSOLUTE_FILL,
+      borderRadii: borderRadiiOf(styleOfProps(props)),
+      dither: Reflect.get(props, 'dither'),
+    }),
+  );
+  return el('view', hostProps, [native]);
+}

package/src/react/index.ts

@@ -0,0 +1,10 @@
+// @symbiote-native/linear-gradient/react: компонент `LinearGradient` поверх общего ядра
+
+export { LinearGradient } from './linear-gradient';
+export type { ILinearGradientProps } from './linear-gradient';
+export {
+  LINEAR_GRADIENT_MODULE_NAME,
+  linearGradientViewName,
+  type ILinearGradientPoint,
+  type INativeLinearGradientPoint,
+} from '../core';

package/src/react/linear-gradient.ts

@@ -0,0 +1,18 @@
+import type { ReactElement, ReactNode } from 'react';
+import { descriptorToReactWithChildren } from '@symbiote-native/react';
+import type { IViewProps } from '@symbiote-native/react';
+import { renderLinearGradient } from '../core/linear-gradient';
+import type { ILinearGradientProps as ILinearGradientBaseProps } from '../core/linear-gradient';
+
+// Поверхность View как у `ViewProps` в upstream, дети и `className` свои у React
+export type ILinearGradientProps = ILinearGradientBaseProps &
+  Omit<IViewProps, keyof ILinearGradientBaseProps | 'children'> & {
+    children?: ReactNode;
+    className?: string;
+  };
+
+/** React twin of `expo-linear-gradient`'s `LinearGradient`, children paint over the gradient */
+export function LinearGradient(props: ILinearGradientProps): ReactElement {
+  const { children, ...rest } = props;
+  return descriptorToReactWithChildren(renderLinearGradient(rest), children);
+}

package/src/solid/index.ts

@@ -0,0 +1,10 @@
+// @symbiote-native/linear-gradient/solid: компонент `LinearGradient` поверх общего ядра
+
+export { LinearGradient } from './linear-gradient';
+export type { ILinearGradientProps } from './linear-gradient';
+export {
+  LINEAR_GRADIENT_MODULE_NAME,
+  linearGradientViewName,
+  type ILinearGradientPoint,
+  type INativeLinearGradientPoint,
+} from '../core';

package/src/solid/linear-gradient.ts

@@ -0,0 +1,17 @@
+import type { JSX } from 'solid-js';
+import { defineDescriptorComponent } from '@symbiote-native/solid';
+import type { IViewProps } from '@symbiote-native/solid';
+import type { IClassNameValue } from '@symbiote-native/engine';
+import { renderLinearGradient } from '../core/linear-gradient';
+import type { ILinearGradientProps as ILinearGradientBaseProps } from '../core/linear-gradient';
+
+// Поверхность View как у `ViewProps` в upstream, дети и `class` свои у Solid
+export type ILinearGradientProps = ILinearGradientBaseProps &
+  Omit<IViewProps, keyof ILinearGradientBaseProps | 'children' | 'ref'> & {
+    children?: JSX.Element;
+    class?: IClassNameValue;
+  };
+
+/** Solid twin of `expo-linear-gradient`'s `LinearGradient`, children paint over the gradient */
+export const LinearGradient =
+  defineDescriptorComponent<ILinearGradientProps>(renderLinearGradient);

package/src/svelte/index.ts

@@ -0,0 +1,10 @@
+// @symbiote-native/linear-gradient/svelte: компонент `LinearGradient` поверх общего ядра
+
+export { default as LinearGradient } from './linear-gradient.svelte';
+export type { ILinearGradientProps } from './linear-gradient-props';
+export {
+  LINEAR_GRADIENT_MODULE_NAME,
+  linearGradientViewName,
+  type ILinearGradientPoint,
+  type INativeLinearGradientPoint,
+} from '../core';

package/src/svelte/linear-gradient-props.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { IViewProps } from '@symbiote-native/svelte';
+import type { ILinearGradientProps as ILinearGradientBaseProps } from '../core/linear-gradient';
+
+// Поверхность View как у `ViewProps` в upstream, дети идут сниппетом
+export type ILinearGradientProps = ILinearGradientBaseProps &
+  Omit<IViewProps, keyof ILinearGradientBaseProps | 'children'> & {
+    children?: Snippet;
+  };

package/src/svelte/linear-gradient.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import DescriptorHost from '@symbiote-native/svelte/descriptor-host';
+  import { renderLinearGradient } from '../core/linear-gradient';
+  import type { ILinearGradientProps } from './linear-gradient-props';
+
+  const { children, ...rest }: ILinearGradientProps = $props();
+  const descriptor = $derived(renderLinearGradient({ ...rest }));
+</script>
+
+<DescriptorHost {descriptor} {children} />

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/index.ts

@@ -0,0 +1,10 @@
+// @symbiote-native/linear-gradient/vue: компонент `LinearGradient` поверх общего ядра
+
+export { LinearGradient } from './linear-gradient';
+export type { ILinearGradientProps } from './linear-gradient';
+export {
+  LINEAR_GRADIENT_MODULE_NAME,
+  linearGradientViewName,
+  type ILinearGradientPoint,
+  type INativeLinearGradientPoint,
+} from '../core';

package/src/vue/linear-gradient.ts

@@ -0,0 +1,23 @@
+import { defineComponent, type VNode } from '@vue/runtime-core';
+import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
+import type { IViewProps } from '@symbiote-native/vue';
+import { renderLinearGradient } from '../core/linear-gradient';
+import type { ILinearGradientProps as ILinearGradientBaseProps } from '../core/linear-gradient';
+
+// Поверхность View как у `ViewProps` в upstream, дети идут слотом по умолчанию
+export type ILinearGradientProps = ILinearGradientBaseProps &
+  Omit<IViewProps, keyof ILinearGradientBaseProps>;
+
+/** Vue twin of `expo-linear-gradient`'s `LinearGradient`, the default slot paints over it */
+export const LinearGradient = defineComponent({
+  name: 'LinearGradient',
+  // Все атрибуты это пропсы нативного view, на обёртку ничего не должно просочиться
+  inheritAttrs: false,
+  setup(_props, { attrs, slots }) {
+    return (): VNode => {
+      const descriptor = renderLinearGradient(normalizeVueAttrs(attrs));
+      // Слот приложения идёт в корень после собственных детей дескриптора
+      return descriptorToVue(descriptor, slots.default?.() ?? []);
+    };
+  },
+});