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

package/package.json

@@ -1,6 +1,148 @@
 {
   "name": "@symbiote-native/linear-gradient",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "expo-linear-gradient wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. A native view that paints a multi-color linear gradient behind its children.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "packages/linear-gradient"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/packages/linear-gradient#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "expo-linear-gradient",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "gradient",
+    "linear-gradient"
+  ],
+  "type": "module",
+  "main": "./build/core/index.js",
+  "module": "./build/core/index.js",
+  "types": "./build/core/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/core/index.d.ts",
+      "default": "./build/core/index.js"
+    },
+    "./vue": {
+      "types": "./build/vue/index.d.ts",
+      "default": "./build/vue/index.js"
+    },
+    "./react": {
+      "types": "./build/react/index.d.ts",
+      "default": "./build/react/index.js"
+    },
+    "./svelte": "./src/svelte/index.ts",
+    "./solid": {
+      "types": "./build/solid/index.d.ts",
+      "default": "./build/solid/index.js"
+    },
+    "./angular": {
+      "types": "./build-ngc/angular/index.d.ts",
+      "react-native": "./build-ngc/angular/index.js",
+      "default": "./src/angular/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "build",
+    "build-ngc",
+    "native-link.json",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/*.detox.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "expo-linear-gradient": "57.0.2",
+    "expo-modules-core": "57.0.20",
+    "@symbiote-native/components": "3.2.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20",
+    "@vue/runtime-core": "^3.5.13",
+    "react": ">=19.0.0",
+    "react-native": ">=0.86",
+    "solid-js": ">=1.9.0",
+    "svelte": ">=5.56.0",
+    "vue": ">=3.5.0",
+    "@symbiote-native/angular": "^3.3.0",
+    "@symbiote-native/engine": "^1.6.0",
+    "@symbiote-native/react": "^3.3.0",
+    "@symbiote-native/solid": "^3.2.0",
+    "@symbiote-native/svelte": "^3.2.0",
+    "@symbiote-native/vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@symbiote-native/angular": {
+      "optional": true
+    },
+    "@symbiote-native/react": {
+      "optional": true
+    },
+    "@symbiote-native/solid": {
+      "optional": true
+    },
+    "@symbiote-native/svelte": {
+      "optional": true
+    },
+    "@symbiote-native/vue": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@vue/runtime-core": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/compiler": "~22.0.8",
+    "@angular/compiler-cli": "~22.0.8",
+    "@angular/core": "~22.0.8",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.0",
+    "@vue/runtime-core": "^3.5.13",
+    "react": "19.2.3",
+    "solid-js": "^1.9.14",
+    "svelte": "^5.56.0",
+    "typescript": "~6.0.0",
+    "@symbiote-native/angular": "3.3.0",
+    "@symbiote-native/engine": "1.6.0",
+    "@symbiote-native/react": "3.3.0",
+    "@symbiote-native/solid": "3.2.0",
+    "@symbiote-native/svelte": "3.2.0",
+    "@symbiote-native/test-utils": "0.4.7",
+    "@symbiote-native/vue": "3.3.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "clean": "rm -rf build-ngc",
+    "ng:build": "pnpm run clean && ngc -p tsconfig.angular.json",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
 }

package/src/angular/index.ts

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

package/src/angular/linear-gradient/index.android.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorHost } from '@symbiote-native/angular';
+import { LinearGradientBase } from './shared';
+
+/** Angular twin of `expo-linear-gradient`'s `LinearGradient`, a View wraps the gradient leaf */
+@Component({
+  selector: 'LinearGradient',
+  standalone: true,
+  imports: [DescriptorHost],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `@if (descriptor; as node) {
+    <symbiote-descriptor-host [node]="node"
+      ><ng-content
+    /></symbiote-descriptor-host>
+  }`,
+})
+export class LinearGradient extends LinearGradientBase {}

package/src/angular/linear-gradient/index.ios.ts

@@ -0,0 +1,32 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import { SymbioteHostPropsDirective } from '@symbiote-native/angular';
+import { warnIfViewNameIsDynamic } from '@symbiote-native/engine';
+import { LINEAR_GRADIENT_MODULE_NAME } from '../../core';
+import { LinearGradientBase } from './shared';
+
+const TEMPLATE_TAG = 'ViewManagerAdapter_ExpoLinearGradient';
+
+/** Angular twin of `expo-linear-gradient`'s `LinearGradient`, children go inside the native view */
+@Component({
+  selector: 'LinearGradient',
+  standalone: true,
+  imports: [SymbioteHostPropsDirective],
+  schemas: [NO_ERRORS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  // Имя тега это нативное имя view, его нельзя собрать динамически
+  template: `@if (descriptor; as node) {
+    <ViewManagerAdapter_ExpoLinearGradient [symbioteHostProps]="node.props">
+      <ng-content />
+    </ViewManagerAdapter_ExpoLinearGradient>
+  }`,
+})
+export class LinearGradient extends LinearGradientBase {
+  constructor() {
+    super();
+    warnIfViewNameIsDynamic(TEMPLATE_TAG, LINEAR_GRADIENT_MODULE_NAME);
+  }
+}

package/src/angular/linear-gradient/index.ts

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

package/src/angular/linear-gradient/shared.ts

@@ -0,0 +1,27 @@
+import { Directive, Input } from '@angular/core';
+import { NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import { renderLinearGradient } from '../../core/linear-gradient';
+import type { ILinearGradientProps } from '../../core/linear-gradient';
+
+// Inputs и сборка дескриптора общие, платформы различаются только шаблоном
+@Directive()
+export abstract class LinearGradientBase extends NativeViewBase {
+  @Input({ required: true }) colors!: ILinearGradientProps['colors'];
+  @Input() locations?: ILinearGradientProps['locations'];
+  @Input() start?: ILinearGradientProps['start'];
+  @Input() end?: ILinearGradientProps['end'];
+  @Input() dither?: ILinearGradientProps['dither'];
+
+  protected override readonly propNames = [
+    'colors',
+    'locations',
+    'start',
+    'end',
+    'dither',
+  ] as const satisfies readonly (keyof LinearGradientBase)[];
+
+  protected override renderView(props: object): IDescriptor {
+    return renderLinearGradient(props);
+  }
+}

package/src/core/index.ts

@@ -0,0 +1,10 @@
+export {
+  LINEAR_GRADIENT_MODULE_NAME,
+  ensureLinearGradientRegistered,
+  linearGradientViewName,
+  normalizePoint,
+  renderLinearGradient,
+  type ILinearGradientPoint,
+  type ILinearGradientProps,
+  type INativeLinearGradientPoint,
+} from './linear-gradient';

package/src/core/linear-gradient.ts

@@ -0,0 +1,183 @@
+// Ядро `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?.() ?? []);
+    };
+  },
+});