@twick/2d 0.13.0 → 0.14.2

package/src/lib/decorators/spacingSignal.ts

@@ -1,15 +1,15 @@
-import {Spacing} from '@twick/core';
-import {compound} from './compound';
-import {wrapper} from './signal';
-
-export function spacingSignal(prefix?: string): PropertyDecorator {
-  return (target, key) => {
-    compound({
-      top: prefix ? `${prefix}Top` : 'top',
-      right: prefix ? `${prefix}Right` : 'right',
-      bottom: prefix ? `${prefix}Bottom` : 'bottom',
-      left: prefix ? `${prefix}Left` : 'left',
-    })(target, key);
-    wrapper(Spacing)(target, key);
-  };
-}
+import {Spacing} from '@twick/core';
+import {compound} from './compound';
+import {wrapper} from './signal';
+
+export function spacingSignal(prefix?: string): PropertyDecorator {
+  return (target, key) => {
+    compound({
+      top: prefix ? `${prefix}Top` : 'top',
+      right: prefix ? `${prefix}Right` : 'right',
+      bottom: prefix ? `${prefix}Bottom` : 'bottom',
+      left: prefix ? `${prefix}Left` : 'left',
+    })(target, key);
+    wrapper(Spacing)(target, key);
+  };
+}

package/src/lib/decorators/vector2Signal.ts

@@ -1,30 +1,30 @@
-import type {PossibleVector2, Signal} from '@twick/core';
-import {Vector2} from '@twick/core';
-import type {Length} from '../partials';
-import {compound} from './compound';
-import {wrapper} from './signal';
-
-export type Vector2LengthSignal<TOwner> = Signal<
-  PossibleVector2<Length>,
-  Vector2,
-  TOwner
-> & {
-  x: Signal<Length, number, TOwner>;
-  y: Signal<Length, number, TOwner>;
-};
-
-export function vector2Signal(
-  prefix?: string | Record<string, string>,
-): PropertyDecorator {
-  return (target, key) => {
-    compound(
-      typeof prefix === 'object'
-        ? prefix
-        : {
-            x: prefix ? `${prefix}X` : 'x',
-            y: prefix ? `${prefix}Y` : 'y',
-          },
-    )(target, key);
-    wrapper(Vector2)(target, key);
-  };
-}
+import type {PossibleVector2, Signal} from '@twick/core';
+import {Vector2} from '@twick/core';
+import type {Length} from '../partials';
+import {compound} from './compound';
+import {wrapper} from './signal';
+
+export type Vector2LengthSignal<TOwner> = Signal<
+  PossibleVector2<Length>,
+  Vector2,
+  TOwner
+> & {
+  x: Signal<Length, number, TOwner>;
+  y: Signal<Length, number, TOwner>;
+};
+
+export function vector2Signal(
+  prefix?: string | Record<string, string>,
+): PropertyDecorator {
+  return (target, key) => {
+    compound(
+      typeof prefix === 'object'
+        ? prefix
+        : {
+            x: prefix ? `${prefix}X` : 'x',
+            y: prefix ? `${prefix}Y` : 'y',
+          },
+    )(target, key);
+    wrapper(Vector2)(target, key);
+  };
+}

package/src/lib/globals.d.ts

@@ -1,2 +1,2 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/// <reference types="@twick/core/project" />
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/// <reference types="@twick/core/project" />

package/src/lib/index.ts

@@ -1,8 +1,8 @@
-export * from './code';
-export * from './components';
-export * from './curves';
-export * from './decorators';
-export * from './jsx-runtime';
-export * from './partials';
-export * from './scenes';
-export * from './utils';
+export * from './code';
+export * from './components';
+export * from './curves';
+export * from './decorators';
+export * from './jsx-runtime';
+export * from './partials';
+export * from './scenes';
+export * from './utils';

package/src/lib/jsx-dev-runtime.ts

@@ -1,2 +1,2 @@
-import {Fragment, jsx} from './jsx-runtime';
-export {Fragment, jsx as jsxDEV};
+import {Fragment, jsx} from './jsx-runtime';
+export {Fragment, jsx as jsxDEV};

package/src/lib/jsx-runtime.ts

@@ -1,46 +1,46 @@
-import type {
-  ComponentChildren,
-  FunctionComponent,
-  JSXProps,
-  Node,
-  NodeConstructor,
-} from './components';
-
-export namespace JSX {
-  export type Element = Node;
-  export type ElementClass = Node;
-  export interface ElementChildrenAttribute {
-    children: any;
-  }
-}
-
-function isClassComponent(
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  fn: Function,
-): fn is new (...args: unknown[]) => unknown {
-  return !!fn.prototype?.isClass;
-}
-
-export const Fragment: FunctionComponent = ({children}) => children;
-
-export function jsx(
-  type: NodeConstructor | FunctionComponent | typeof Fragment,
-  config: JSXProps,
-  key?: any,
-): ComponentChildren {
-  const {ref, children, ...rest} = config;
-  const flatChildren = Array.isArray(children) ? children.flat() : children;
-
-  if (type === Fragment) {
-    return flatChildren;
-  }
-
-  if (isClassComponent(type)) {
-    const node = new type({...rest, children: flatChildren, key});
-    ref?.(node);
-    return node;
-  } else {
-    return type({...rest, ref, children: flatChildren, key});
-  }
-}
-export {jsx as jsxs};
+import type {
+  ComponentChildren,
+  FunctionComponent,
+  JSXProps,
+  Node,
+  NodeConstructor,
+} from './components';
+
+export namespace JSX {
+  export type Element = Node;
+  export type ElementClass = Node;
+  export interface ElementChildrenAttribute {
+    children: any;
+  }
+}
+
+function isClassComponent(
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  fn: Function,
+): fn is new (...args: unknown[]) => unknown {
+  return !!fn.prototype?.isClass;
+}
+
+export const Fragment: FunctionComponent = ({children}) => children;
+
+export function jsx(
+  type: NodeConstructor | FunctionComponent | typeof Fragment,
+  config: JSXProps,
+  key?: any,
+): ComponentChildren {
+  const {ref, children, ...rest} = config;
+  const flatChildren = Array.isArray(children) ? children.flat() : children;
+
+  if (type === Fragment) {
+    return flatChildren;
+  }
+
+  if (isClassComponent(type)) {
+    const node = new type({...rest, children: flatChildren, key});
+    ref?.(node);
+    return node;
+  } else {
+    return type({...rest, ref, children: flatChildren, key});
+  }
+}
+export {jsx as jsxs};

package/src/lib/parse-svg-path.d.ts

@@ -1,14 +1,14 @@
-declare module 'parse-svg-path' {
-  export type PathCommand = [
-    string,
-    number,
-    number,
-    number,
-    number,
-    number,
-    number,
-    number,
-  ];
-  function parse(path: string): PathCommand[];
-  export default parse;
-}
+declare module 'parse-svg-path' {
+  export type PathCommand = [
+    string,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+  ];
+  function parse(path: string): PathCommand[];
+  export default parse;
+}

package/src/lib/partials/Filter.ts

@@ -1,180 +1,180 @@
-import type {SignalValue, SimpleSignal} from '@twick/core';
-import {createSignal, map, transformScalar} from '@twick/core';
-
-/**
- * All possible CSS filter names.
- *
- * @internal
- */
-export type FilterName =
-  | 'invert'
-  | 'sepia'
-  | 'grayscale'
-  | 'brightness'
-  | 'contrast'
-  | 'saturate'
-  | 'hue'
-  | 'blur';
-
-/**
- * Definitions of all possible CSS filters.
- *
- * @internal
- */
-export const FILTERS: Record<string, Partial<FilterProps>> = {
-  invert: {
-    name: 'invert',
-  },
-  sepia: {
-    name: 'sepia',
-  },
-  grayscale: {
-    name: 'grayscale',
-  },
-  brightness: {
-    name: 'brightness',
-    default: 1,
-  },
-  contrast: {
-    name: 'contrast',
-    default: 1,
-  },
-  saturate: {
-    name: 'saturate',
-    default: 1,
-  },
-  hue: {
-    name: 'hue-rotate',
-    unit: 'deg',
-    scale: 1,
-  },
-  blur: {
-    name: 'blur',
-    transform: true,
-    unit: 'px',
-    scale: 1,
-  },
-};
-
-/**
- * A unified abstraction for all CSS filters.
- */
-export interface FilterProps {
-  name: string;
-  value: SignalValue<number>;
-  unit: string;
-  scale: number;
-  transform: boolean;
-  default: number;
-}
-
-export class Filter {
-  public get name() {
-    return this.props.name;
-  }
-
-  public get default() {
-    return this.props.default;
-  }
-
-  public readonly value: SimpleSignal<number, Filter>;
-  private readonly props: FilterProps;
-
-  public constructor(props: Partial<FilterProps>) {
-    this.props = {
-      name: 'invert',
-      default: 0,
-      unit: '%',
-      scale: 100,
-      transform: false,
-      ...props,
-      value: props.value ?? props.default ?? 0,
-    };
-    this.value = createSignal(this.props.value, map, this);
-  }
-
-  public isActive() {
-    return this.value() !== this.props.default;
-  }
-
-  public serialize(matrix: DOMMatrix): string {
-    let value = this.value();
-    if (this.props.transform) {
-      value = transformScalar(value, matrix);
-    }
-
-    return `${this.props.name}(${value * this.props.scale}${this.props.unit})`;
-  }
-}
-
-/**
- * Create an {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert | invert} filter.
- *
- * @param value - The value of the filter.
- */
-export function invert(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.invert, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia | sepia} filter.
- *
- * @param value - The value of the filter.
- */
-export function sepia(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.sepia, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale | grayscale} filter.
- *
- * @param value - The value of the filter.
- */
-export function grayscale(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.grayscale, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness | brightness} filter.
- *
- * @param value - The value of the filter.
- */
-export function brightness(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.brightness, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast | contrast} filter.
- *
- * @param value - The value of the filter.
- */
-export function contrast(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.contrast, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate | saturate} filter.
- *
- * @param value - The value of the filter.
- */
-export function saturate(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.saturate, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate | hue} filter.
- *
- * @param value - The value of the filter in degrees.
- */
-export function hue(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.hue, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur | blur} filter.
- *
- * @param value - The value of the filter in pixels.
- */
-export function blur(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.blur, value});
-}
+import type {SignalValue, SimpleSignal} from '@twick/core';
+import {createSignal, map, transformScalar} from '@twick/core';
+
+/**
+ * All possible CSS filter names.
+ *
+ * @internal
+ */
+export type FilterName =
+  | 'invert'
+  | 'sepia'
+  | 'grayscale'
+  | 'brightness'
+  | 'contrast'
+  | 'saturate'
+  | 'hue'
+  | 'blur';
+
+/**
+ * Definitions of all possible CSS filters.
+ *
+ * @internal
+ */
+export const FILTERS: Record<string, Partial<FilterProps>> = {
+  invert: {
+    name: 'invert',
+  },
+  sepia: {
+    name: 'sepia',
+  },
+  grayscale: {
+    name: 'grayscale',
+  },
+  brightness: {
+    name: 'brightness',
+    default: 1,
+  },
+  contrast: {
+    name: 'contrast',
+    default: 1,
+  },
+  saturate: {
+    name: 'saturate',
+    default: 1,
+  },
+  hue: {
+    name: 'hue-rotate',
+    unit: 'deg',
+    scale: 1,
+  },
+  blur: {
+    name: 'blur',
+    transform: true,
+    unit: 'px',
+    scale: 1,
+  },
+};
+
+/**
+ * A unified abstraction for all CSS filters.
+ */
+export interface FilterProps {
+  name: string;
+  value: SignalValue<number>;
+  unit: string;
+  scale: number;
+  transform: boolean;
+  default: number;
+}
+
+export class Filter {
+  public get name() {
+    return this.props.name;
+  }
+
+  public get default() {
+    return this.props.default;
+  }
+
+  public readonly value: SimpleSignal<number, Filter>;
+  private readonly props: FilterProps;
+
+  public constructor(props: Partial<FilterProps>) {
+    this.props = {
+      name: 'invert',
+      default: 0,
+      unit: '%',
+      scale: 100,
+      transform: false,
+      ...props,
+      value: props.value ?? props.default ?? 0,
+    };
+    this.value = createSignal(this.props.value, map, this);
+  }
+
+  public isActive() {
+    return this.value() !== this.props.default;
+  }
+
+  public serialize(matrix: DOMMatrix): string {
+    let value = this.value();
+    if (this.props.transform) {
+      value = transformScalar(value, matrix);
+    }
+
+    return `${this.props.name}(${value * this.props.scale}${this.props.unit})`;
+  }
+}
+
+/**
+ * Create an {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert | invert} filter.
+ *
+ * @param value - The value of the filter.
+ */
+export function invert(value?: SignalValue<number>) {
+  return new Filter({...FILTERS.invert, value});
+}
+
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia | sepia} filter.
+ *
+ * @param value - The value of the filter.
+ */
+export function sepia(value?: SignalValue<number>) {
+  return new Filter({...FILTERS.sepia, value});
+}
+
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale | grayscale} filter.
+ *
+ * @param value - The value of the filter.
+ */
+export function grayscale(value?: SignalValue<number>) {
+  return new Filter({...FILTERS.grayscale, value});
+}
+
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness | brightness} filter.
+ *
+ * @param value - The value of the filter.
+ */
+export function brightness(value?: SignalValue<number>) {
+  return new Filter({...FILTERS.brightness, value});
+}
+
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast | contrast} filter.
+ *
+ * @param value - The value of the filter.
+ */
+export function contrast(value?: SignalValue<number>) {
+  return new Filter({...FILTERS.contrast, value});
+}
+
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate | saturate} filter.
+ *
+ * @param value - The value of the filter.
+ */
+export function saturate(value?: SignalValue<number>) {
+  return new Filter({...FILTERS.saturate, value});
+}
+
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate | hue} filter.
+ *
+ * @param value - The value of the filter in degrees.
+ */
+export function hue(value?: SignalValue<number>) {
+  return new Filter({...FILTERS.hue, value});
+}
+
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur | blur} filter.
+ *
+ * @param value - The value of the filter in pixels.
+ */
+export function blur(value?: SignalValue<number>) {
+  return new Filter({...FILTERS.blur, value});
+}