@blinkorb/rcx 0.0.0 → 0.0.1

package/render.js

@@ -0,0 +1,198 @@
+import { renderingContext } from "./components/canvas/context.js";
+import { emitter } from "./internal/emitter.js";
+import { cxGlobal } from "./internal/global.js";
+import { isArray } from "./utils/type-guards.js";
+const getCanvasElement = (container) => {
+    if (container instanceof HTMLCanvasElement) {
+        return container;
+    }
+    const canvasElement = document.createElement('canvas');
+    container.appendChild(canvasElement);
+    return canvasElement;
+};
+const unmountNodes = (children) => {
+    if (!!children && typeof children === 'object') {
+        if (isArray(children)) {
+            children.forEach((child) => unmountNodes(child));
+        }
+        else {
+            children.hooks.forEach((hook) => {
+                if (hook.type === 'useOnMount') {
+                    hook.value.onUnmount?.();
+                }
+                if (hook.type === 'useOnUnmount') {
+                    hook.value();
+                }
+            });
+            unmountNodes(children.childNodes);
+        }
+    }
+};
+const updateNode = (element, prevNode) => {
+    if (element.type === prevNode?.element.type) {
+        const nextPropsCopy = { ...element.props };
+        // Delete previous props
+        Object.keys(prevNode.element.props).forEach((key) => {
+            delete prevNode.element.props[key];
+        });
+        // Copy in new props
+        Object.entries(nextPropsCopy).forEach(([key, value]) => {
+            prevNode.element.props[key] = value;
+        });
+        return prevNode;
+    }
+    unmountNodes(prevNode);
+    return {
+        element,
+        hooks: [],
+        rendered: [],
+        childNodes: [],
+        context: {},
+    };
+};
+const getMatchingChildPrev = (nextChild, nextChildIndex, stillRendered) => {
+    if (!!nextChild && typeof nextChild === 'object' && !isArray(nextChild)) {
+        if (isArray(stillRendered)) {
+            if (typeof nextChild.props.$key !== 'undefined') {
+                return stillRendered.find((prev) => !!prev &&
+                    typeof prev === 'object' &&
+                    !isArray(prev) &&
+                    prev.element.type === nextChild.type &&
+                    prev.element.props.$key === nextChild.props.$key);
+            }
+            const atIndex = stillRendered[nextChildIndex];
+            if (!!atIndex &&
+                typeof atIndex === 'object' &&
+                !isArray(atIndex) &&
+                atIndex.element.type === nextChild.type &&
+                typeof atIndex.element.props.$key === 'undefined') {
+                return atIndex;
+            }
+        }
+    }
+};
+const getMatchingChildNext = (prevChild, prevChildIndex, nextRendered) => {
+    if (!!prevChild && typeof prevChild === 'object' && !isArray(prevChild)) {
+        if (isArray(nextRendered)) {
+            if (typeof prevChild.element.props.$key !== 'undefined') {
+                return nextRendered.find((next) => !!next &&
+                    typeof next === 'object' &&
+                    !isArray(next) &&
+                    next.type === prevChild.element.type &&
+                    next.props.$key === prevChild.element.props.$key);
+            }
+            const atIndex = nextRendered[prevChildIndex];
+            if (!!atIndex &&
+                typeof atIndex === 'object' &&
+                !isArray(atIndex) &&
+                atIndex.type === prevChild.element.type &&
+                typeof atIndex.props.$key === 'undefined') {
+                return atIndex;
+            }
+        }
+    }
+};
+const renderElement = (element, renderingContextState, prevNode, parentContext) => {
+    const node = updateNode(element, prevNode);
+    node.context = {
+        ...parentContext,
+    };
+    cxGlobal.currentNode = node;
+    cxGlobal.hookIndex = 0;
+    renderingContext.useProvide(renderingContextState);
+    node.rendered = element.type(element.props);
+    delete cxGlobal.currentNode;
+    const traverse = (nextRendered, prevRendered) => {
+        if (!!nextRendered && typeof nextRendered === 'object') {
+            if (isArray(nextRendered)) {
+                let stillRendered;
+                if (!isArray(prevRendered)) {
+                    unmountNodes(prevRendered);
+                }
+                else {
+                    stillRendered = prevRendered.filter((prevChild, prevChildIndex) => {
+                        const match = getMatchingChildNext(prevChild, prevChildIndex, nextRendered);
+                        if (!match) {
+                            unmountNodes(prevChild);
+                        }
+                        return !!match;
+                    });
+                }
+                return nextRendered.map((nextChild, nextChildIndex) => traverse(nextChild, getMatchingChildPrev(nextChild, nextChildIndex, stillRendered)));
+            }
+            if (!!prevRendered && typeof prevRendered === 'object') {
+                if (isArray(prevRendered)) {
+                    unmountNodes(prevRendered);
+                }
+                else if (prevRendered.element.type !== nextRendered.type) {
+                    unmountNodes(prevRendered);
+                }
+            }
+            return renderElement(nextRendered, renderingContextState, !!prevRendered &&
+                typeof prevRendered === 'object' &&
+                !isArray(prevRendered)
+                ? prevRendered
+                : undefined, node.context);
+        }
+        unmountNodes(prevRendered);
+        return [];
+    };
+    node.hooks.forEach((hook) => {
+        if (hook.type === 'useOnMount' && element.type !== prevNode?.element.type) {
+            hook.value.onMount();
+        }
+    });
+    node.hooks.forEach((hook) => {
+        if (hook.type === 'useRenderBeforeChildren') {
+            hook.value(renderingContextState);
+        }
+    });
+    node.childNodes = traverse(node.rendered, prevNode?.childNodes);
+    node.hooks.forEach((hook) => {
+        if (hook.type === 'useRenderAfterChildren') {
+            hook.value(renderingContextState);
+        }
+    });
+    return node;
+};
+export const render = (element, container) => {
+    const canvas = getCanvasElement(container);
+    const ctx2d = canvas.getContext('2d');
+    if (!ctx2d) {
+        const errorMessage = 'CanvasRenderingContext2D not supported';
+        if (window.console && typeof window.console.error === 'function') {
+            // eslint-disable-next-line no-console
+            console.error(errorMessage);
+        }
+        return {
+            error: errorMessage,
+        };
+    }
+    const renderingContextState = { canvas, ctx2d };
+    let raf;
+    let rootNode;
+    const renderRoot = () => {
+        if (typeof raf === 'number') {
+            window.cancelAnimationFrame(raf);
+        }
+        raf = window.requestAnimationFrame(() => {
+            // eslint-disable-next-line no-self-assign
+            canvas.width = canvas.width;
+            rootNode = renderElement(element, renderingContextState, rootNode);
+        });
+    };
+    renderRoot();
+    emitter.on('render', renderRoot);
+    const unmount = () => {
+        if (typeof raf === 'number') {
+            window.cancelAnimationFrame(raf);
+        }
+        // eslint-disable-next-line no-self-assign
+        canvas.width = canvas.width;
+        if (!(container instanceof HTMLCanvasElement)) {
+            container.removeChild(canvas);
+        }
+    };
+    return unmount;
+};
+//# sourceMappingURL=render.js.map

package/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"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","sourcesContent":["import { renderingContext } from './components/canvas/context.ts';\nimport { emitter } from './internal/emitter.ts';\nimport { cxGlobal } from './internal/global.ts';\nimport type {\n  AnyObject,\n  NestedArray,\n  RCXChild,\n  RCXChildren,\n  RCXElementAny,\n  RCXNodeAny,\n  RCXRenderingContext,\n} from './types.ts';\nimport { isArray } from './utils/type-guards.ts';\n\nconst getCanvasElement = (container: HTMLElement) => {\n  if (container instanceof HTMLCanvasElement) {\n    return container;\n  }\n\n  const canvasElement = document.createElement('canvas');\n  container.appendChild(canvasElement);\n\n  return canvasElement;\n};\n\nconst unmountNodes = (\n  children: NestedArray<RCXNodeAny> | RCXNodeAny | undefined\n) => {\n  if (!!children && typeof children === 'object') {\n    if (isArray(children)) {\n      children.forEach((child) => unmountNodes(child));\n    } else {\n      children.hooks.forEach((hook) => {\n        if (hook.type === 'useOnMount') {\n          hook.value.onUnmount?.();\n        }\n\n        if (hook.type === 'useOnUnmount') {\n          hook.value();\n        }\n      });\n\n      unmountNodes(children.childNodes);\n    }\n  }\n};\n\nconst updateNode = (\n  element: RCXElementAny,\n  prevNode: RCXNodeAny | undefined\n): RCXNodeAny => {\n  if (element.type === prevNode?.element.type) {\n    const nextPropsCopy = { ...element.props };\n\n    // Delete previous props\n    Object.keys(prevNode.element.props).forEach((key) => {\n      delete prevNode.element.props[key];\n    });\n\n    // Copy in new props\n    Object.entries(nextPropsCopy).forEach(([key, value]) => {\n      prevNode.element.props[key] = value;\n    });\n\n    return prevNode;\n  }\n\n  unmountNodes(prevNode);\n\n  return {\n    element,\n    hooks: [],\n    rendered: [],\n    childNodes: [],\n    context: {},\n  };\n};\n\nconst getMatchingChildPrev = (\n  nextChild: RCXChildren,\n  nextChildIndex: number,\n  stillRendered: NestedArray<RCXNodeAny> | undefined\n) => {\n  if (!!nextChild && typeof nextChild === 'object' && !isArray(nextChild)) {\n    if (isArray(stillRendered)) {\n      if (typeof nextChild.props.$key !== 'undefined') {\n        return stillRendered.find(\n          (prev) =>\n            !!prev &&\n            typeof prev === 'object' &&\n            !isArray(prev) &&\n            prev.element.type === nextChild.type &&\n            prev.element.props.$key === nextChild.props.$key\n        );\n      }\n\n      const atIndex = stillRendered[nextChildIndex];\n\n      if (\n        !!atIndex &&\n        typeof atIndex === 'object' &&\n        !isArray(atIndex) &&\n        atIndex.element.type === nextChild.type &&\n        typeof atIndex.element.props.$key === 'undefined'\n      ) {\n        return atIndex;\n      }\n    }\n  }\n};\n\nconst getMatchingChildNext = (\n  prevChild: NestedArray<RCXNodeAny>,\n  prevChildIndex: number,\n  nextRendered: NestedArray<RCXChild>\n) => {\n  if (!!prevChild && typeof prevChild === 'object' && !isArray(prevChild)) {\n    if (isArray(nextRendered)) {\n      if (typeof prevChild.element.props.$key !== 'undefined') {\n        return nextRendered.find(\n          (next) =>\n            !!next &&\n            typeof next === 'object' &&\n            !isArray(next) &&\n            next.type === prevChild.element.type &&\n            next.props.$key === prevChild.element.props.$key\n        );\n      }\n\n      const atIndex = nextRendered[prevChildIndex];\n\n      if (\n        !!atIndex &&\n        typeof atIndex === 'object' &&\n        !isArray(atIndex) &&\n        atIndex.type === prevChild.element.type &&\n        typeof atIndex.props.$key === 'undefined'\n      ) {\n        return atIndex;\n      }\n    }\n  }\n};\n\nconst renderElement = (\n  element: RCXElementAny,\n  renderingContextState: RCXRenderingContext,\n  prevNode: RCXNodeAny | undefined,\n  parentContext?: AnyObject\n): RCXNodeAny => {\n  const node = updateNode(element, prevNode);\n\n  node.context = {\n    ...parentContext,\n  };\n\n  cxGlobal.currentNode = node;\n  cxGlobal.hookIndex = 0;\n\n  renderingContext.useProvide(renderingContextState);\n\n  node.rendered = element.type(element.props);\n\n  delete cxGlobal.currentNode;\n\n  const traverse = (\n    nextRendered: RCXChildren,\n    prevRendered: NestedArray<RCXNodeAny> | undefined\n  ): NestedArray<RCXNodeAny> => {\n    if (!!nextRendered && typeof nextRendered === 'object') {\n      if (isArray(nextRendered)) {\n        let stillRendered: NestedArray<RCXNodeAny> | undefined;\n\n        if (!isArray(prevRendered)) {\n          unmountNodes(prevRendered);\n        } else {\n          stillRendered = prevRendered.filter((prevChild, prevChildIndex) => {\n            const match = getMatchingChildNext(\n              prevChild,\n              prevChildIndex,\n              nextRendered\n            );\n\n            if (!match) {\n              unmountNodes(prevChild);\n            }\n\n            return !!match;\n          });\n        }\n\n        return nextRendered.map((nextChild, nextChildIndex) =>\n          traverse(\n            nextChild,\n            getMatchingChildPrev(nextChild, nextChildIndex, stillRendered)\n          )\n        );\n      }\n\n      if (!!prevRendered && typeof prevRendered === 'object') {\n        if (isArray(prevRendered)) {\n          unmountNodes(prevRendered);\n        } else if (prevRendered.element.type !== nextRendered.type) {\n          unmountNodes(prevRendered);\n        }\n      }\n\n      return renderElement(\n        nextRendered,\n        renderingContextState,\n        !!prevRendered &&\n          typeof prevRendered === 'object' &&\n          !isArray(prevRendered)\n          ? prevRendered\n          : undefined,\n        node.context\n      );\n    }\n\n    unmountNodes(prevRendered);\n\n    return [];\n  };\n\n  node.hooks.forEach((hook) => {\n    if (hook.type === 'useOnMount' && element.type !== prevNode?.element.type) {\n      hook.value.onMount();\n    }\n  });\n\n  node.hooks.forEach((hook) => {\n    if (hook.type === 'useRenderBeforeChildren') {\n      hook.value(renderingContextState);\n    }\n  });\n\n  node.childNodes = traverse(node.rendered, prevNode?.childNodes);\n\n  node.hooks.forEach((hook) => {\n    if (hook.type === 'useRenderAfterChildren') {\n      hook.value(renderingContextState);\n    }\n  });\n\n  return node;\n};\n\nexport const render = (element: RCXElementAny, container: HTMLElement) => {\n  const canvas = getCanvasElement(container);\n  const ctx2d = canvas.getContext('2d');\n\n  if (!ctx2d) {\n    const errorMessage = 'CanvasRenderingContext2D not supported';\n\n    if (window.console && typeof window.console.error === 'function') {\n      // eslint-disable-next-line no-console\n      console.error(errorMessage);\n    }\n\n    return {\n      error: errorMessage,\n    };\n  }\n\n  const renderingContextState = { canvas, ctx2d };\n\n  let raf: number | undefined;\n  let rootNode: RCXNodeAny | undefined;\n\n  const renderRoot = () => {\n    if (typeof raf === 'number') {\n      window.cancelAnimationFrame(raf);\n    }\n\n    raf = window.requestAnimationFrame(() => {\n      // eslint-disable-next-line no-self-assign\n      canvas.width = canvas.width;\n      rootNode = renderElement(element, renderingContextState, rootNode);\n    });\n  };\n\n  renderRoot();\n\n  emitter.on('render', renderRoot);\n\n  const unmount = () => {\n    if (typeof raf === 'number') {\n      window.cancelAnimationFrame(raf);\n    }\n    // eslint-disable-next-line no-self-assign\n    canvas.width = canvas.width;\n\n    if (!(container instanceof HTMLCanvasElement)) {\n      container.removeChild(canvas);\n    }\n  };\n\n  return unmount;\n};\n"]}

package/types.d.ts

@@ -0,0 +1,108 @@
+import type { CanvasProps } from './components/canvas/index.ts';
+declare global {
+    namespace JSX {
+        interface IntrinsicAttributes {
+            $key?: string | number;
+        }
+    }
+}
+export type Primitive = string | number | boolean | null | undefined;
+export type AnyObject = Record<PropertyKey, any>;
+export type AnyArray = readonly any[];
+export type AnyFunction = (...args: any[]) => any;
+export type NestedArray<T> = T | readonly NestedArray<T>[];
+export interface RCXElement<C extends RCXComponent<P>, P extends AnyObject> {
+    type: C;
+    props: P;
+}
+export type RCXElementAny = RCXElement<RCXComponentAny, AnyObject>;
+export type RCXChild = RCXElementAny | Primitive;
+export type RCXChildren = NestedArray<RCXChild>;
+export interface RCXOnMountHook {
+    onMount: () => void;
+    onUnmount?: () => void;
+}
+export interface RCXHookMap {
+    useReactive: AnyObject;
+    useUnreactive: AnyObject;
+    useRenderBeforeChildren: (renderingContext: RCXRenderingContext) => void;
+    useRenderAfterChildren: (renderingContext: RCXRenderingContext) => void;
+    useOnMount: RCXOnMountHook;
+    useOnUnmount: () => void;
+}
+export type RCXHook = {
+    [K in keyof RCXHookMap]: {
+        type: K;
+        value: RCXHookMap[K];
+    };
+}[keyof RCXHookMap];
+export interface RCXNode<C extends RCXComponent<P>, P extends AnyObject> {
+    element: RCXElement<C, P>;
+    rendered: RCXChildren;
+    hooks: RCXHook[];
+    childNodes: NestedArray<RCXNodeAny>;
+    context: AnyObject;
+}
+export type RCXNodeAny = RCXNode<RCXComponentAny, AnyObject>;
+export interface RCXRenderingContext {
+    readonly canvas: HTMLCanvasElement;
+    readonly ctx2d: CanvasRenderingContext2D;
+}
+export interface RCXComponentInterface {
+    displayName?: string;
+}
+export type RCXComponent<P extends AnyObject = Record<PropertyKey, never>> = ((props: Readonly<P>) => RCXChildren) & RCXComponentInterface;
+export type RCXComponentAny = RCXComponent<AnyObject>;
+export type RCXPropsWithChildren<P extends AnyObject> = Omit<P, 'children'> & {
+    children?: RCXChildren;
+};
+export interface RCXCanvasContext {
+    readonly props: CanvasProps;
+    readonly width: number;
+    readonly height: number;
+    readonly pixelRatio: number;
+    readonly actualWidth: number;
+    readonly actualHeight: number;
+    readonly canvas: Omit<HTMLCanvasElement, 'width' | 'height'>;
+    readonly ctx2d: CanvasRenderingContext2D;
+}
+export interface RCXGlobal {
+    currentNode?: RCXNodeAny;
+    hookIndex: number;
+}
+export interface RCXFragmentProps {
+    children?: RCXChildren;
+}
+export type RCXPoint = [number, number] | {
+    x: number;
+    y: number;
+};
+export type RCXStyleProp<T extends AnyObject> = NestedArray<false | null | undefined | T>;
+export interface RCXLineStyle {
+    stroke?: RCXFillOrStrokeStyle;
+    strokeWidth?: number;
+    strokeCap?: CanvasLineCap;
+    strokeJoin?: CanvasLineJoin;
+}
+export interface RCXShapeStyle extends RCXLineStyle {
+    fill?: RCXFillOrStrokeStyle;
+}
+export interface RCXFontStringStyle {
+    fontStyle?: RCXCanvasFontStyle;
+    fontWeight?: RCXCanvasFontWeight;
+    fontSize?: number;
+    fontFamily?: string;
+}
+export interface RCXFontStyle extends RCXFontStringStyle {
+    fontStretch?: CanvasFontStretch;
+    fontVariant?: RCXCanvasFontVariant;
+    fontKerning?: CanvasFontKerning;
+}
+export type RCXCanvasFontStyle = 'normal' | 'italic' | 'oblique';
+export type RCXCanvasFontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | number;
+export type RCXCanvasFontVariant = 'normal' | CanvasFontVariantCaps;
+export interface RCXColorStop {
+    offset: number;
+    color: string;
+}
+export type RCXFillOrStrokeStyle = string | CanvasGradient;

package/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CanvasProps } from './components/canvas/index.ts';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    export interface IntrinsicAttributes {\n      $key?: string | number;\n    }\n  }\n}\n\nexport type Primitive = string | number | boolean | null | undefined;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyObject = Record<PropertyKey, any>;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyArray = readonly any[];\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any;\n\nexport type NestedArray<T> = T | readonly NestedArray<T>[];\n\nexport interface RCXElement<C extends RCXComponent<P>, P extends AnyObject> {\n  type: C;\n  props: P;\n}\n\nexport type RCXElementAny = RCXElement<RCXComponentAny, AnyObject>;\n\nexport type RCXChild = RCXElementAny | Primitive;\n\nexport type RCXChildren = NestedArray<RCXChild>;\n\nexport interface RCXOnMountHook {\n  onMount: () => void;\n  onUnmount?: () => void;\n}\n\nexport interface RCXHookMap {\n  useReactive: AnyObject;\n  useUnreactive: AnyObject;\n  useRenderBeforeChildren: (renderingContext: RCXRenderingContext) => void;\n  useRenderAfterChildren: (renderingContext: RCXRenderingContext) => void;\n  useOnMount: RCXOnMountHook;\n  useOnUnmount: () => void;\n}\n\nexport type RCXHook = {\n  [K in keyof RCXHookMap]: {\n    type: K;\n    value: RCXHookMap[K];\n  };\n}[keyof RCXHookMap];\n\nexport interface RCXNode<C extends RCXComponent<P>, P extends AnyObject> {\n  element: RCXElement<C, P>;\n  rendered: RCXChildren;\n  hooks: RCXHook[];\n  childNodes: NestedArray<RCXNodeAny>;\n  context: AnyObject;\n}\n\nexport type RCXNodeAny = RCXNode<RCXComponentAny, AnyObject>;\n\nexport interface RCXRenderingContext {\n  readonly canvas: HTMLCanvasElement;\n  readonly ctx2d: CanvasRenderingContext2D;\n}\n\nexport interface RCXComponentInterface {\n  displayName?: string;\n}\n\nexport type RCXComponent<P extends AnyObject = Record<PropertyKey, never>> = ((\n  props: Readonly<P>\n) => RCXChildren) &\n  RCXComponentInterface;\n\nexport type RCXComponentAny = RCXComponent<AnyObject>;\n\nexport type RCXPropsWithChildren<P extends AnyObject> = Omit<P, 'children'> & {\n  children?: RCXChildren;\n};\n\nexport interface RCXCanvasContext {\n  readonly props: CanvasProps;\n  readonly width: number;\n  readonly height: number;\n  readonly pixelRatio: number;\n  readonly actualWidth: number;\n  readonly actualHeight: number;\n  readonly canvas: Omit<HTMLCanvasElement, 'width' | 'height'>;\n  readonly ctx2d: CanvasRenderingContext2D;\n}\n\nexport interface RCXGlobal {\n  currentNode?: RCXNodeAny;\n  hookIndex: number;\n}\n\nexport interface RCXFragmentProps {\n  children?: RCXChildren;\n}\n\nexport type RCXPoint = [number, number] | { x: number; y: number };\n\nexport type RCXStyleProp<T extends AnyObject> = NestedArray<\n  false | null | undefined | T\n>;\n\nexport interface RCXLineStyle {\n  stroke?: RCXFillOrStrokeStyle;\n  strokeWidth?: number;\n  strokeCap?: CanvasLineCap;\n  strokeJoin?: CanvasLineJoin;\n}\n\nexport interface RCXShapeStyle extends RCXLineStyle {\n  fill?: RCXFillOrStrokeStyle;\n}\n\nexport interface RCXFontStringStyle {\n  // font string\n  fontStyle?: RCXCanvasFontStyle;\n  fontWeight?: RCXCanvasFontWeight;\n  fontSize?: number;\n  fontFamily?: string;\n}\n\nexport interface RCXFontStyle extends RCXFontStringStyle {\n  // other ctx2d properties\n  fontStretch?: CanvasFontStretch;\n  fontVariant?: RCXCanvasFontVariant;\n  fontKerning?: CanvasFontKerning;\n}\n\nexport type RCXCanvasFontStyle = 'normal' | 'italic' | 'oblique';\nexport type RCXCanvasFontWeight =\n  | 'normal'\n  | 'bold'\n  | 'bolder'\n  | 'lighter'\n  | number;\nexport type RCXCanvasFontVariant = 'normal' | CanvasFontVariantCaps;\n\nexport interface RCXColorStop {\n  offset: number;\n  color: string;\n}\n\nexport type RCXFillOrStrokeStyle = string | CanvasGradient;\n"]}

package/utils/apply-fill-and-stroke-style.d.ts

@@ -0,0 +1,2 @@
+import type { AnyObject, RCXRenderingContext } from '../types.ts';
+export declare const applyFillAndStrokeStyles: (renderingContext: RCXRenderingContext, style: Partial<AnyObject>) => void;

package/utils/apply-fill-and-stroke-style.js

@@ -0,0 +1,24 @@
+import { isValidFillOrStrokeStyle } from "./is-valid-fill-or-stroke-style.js";
+import { isValidStrokeCap } from "./is-valid-stroke-cap.js";
+import { isValidStrokeJoin } from "./is-valid-stroke-join.js";
+export const applyFillAndStrokeStyles = (renderingContext, style) => {
+    const { fill, stroke, strokeWidth, strokeCap, strokeJoin } = style;
+    if (isValidFillOrStrokeStyle(fill)) {
+        renderingContext.ctx2d.fillStyle = fill;
+        renderingContext.ctx2d.fill();
+    }
+    if (typeof strokeWidth === 'number') {
+        renderingContext.ctx2d.lineWidth = strokeWidth;
+    }
+    if (isValidStrokeCap(strokeCap)) {
+        renderingContext.ctx2d.lineCap = strokeCap;
+    }
+    if (isValidStrokeJoin(strokeJoin)) {
+        renderingContext.ctx2d.lineJoin = strokeJoin;
+    }
+    if (isValidFillOrStrokeStyle(stroke)) {
+        renderingContext.ctx2d.strokeStyle = stroke;
+        renderingContext.ctx2d.stroke();
+    }
+};
+//# sourceMappingURL=apply-fill-and-stroke-style.js.map

package/utils/apply-fill-and-stroke-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply-fill-and-stroke-style.js","sourceRoot":"","sources":["../../src/utils/apply-fill-and-stroke-style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,gBAAqC,EACrC,KAAyB,EACzB,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAEnE,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC;QACnC,gBAAgB,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;QACxC,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAED,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE,CAAC;QACpC,gBAAgB,CAAC,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC;IACjD,CAAC;IAED,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE,CAAC;QAChC,gBAAgB,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC;IAED,IAAI,iBAAiB,CAAC,UAAU,CAAC,EAAE,CAAC;QAClC,gBAAgB,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IAC/C,CAAC;IAED,IAAI,wBAAwB,CAAC,MAAM,CAAC,EAAE,CAAC;QACrC,gBAAgB,CAAC,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC;QAC5C,gBAAgB,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;IAClC,CAAC;AACH,CAAC,CAAC","sourcesContent":["import type { AnyObject, RCXRenderingContext } from '../types.ts';\nimport { isValidFillOrStrokeStyle } from './is-valid-fill-or-stroke-style.ts';\nimport { isValidStrokeCap } from './is-valid-stroke-cap.ts';\nimport { isValidStrokeJoin } from './is-valid-stroke-join.ts';\n\nexport const applyFillAndStrokeStyles = (\n  renderingContext: RCXRenderingContext,\n  style: Partial<AnyObject>\n) => {\n  const { fill, stroke, strokeWidth, strokeCap, strokeJoin } = style;\n\n  if (isValidFillOrStrokeStyle(fill)) {\n    renderingContext.ctx2d.fillStyle = fill;\n    renderingContext.ctx2d.fill();\n  }\n\n  if (typeof strokeWidth === 'number') {\n    renderingContext.ctx2d.lineWidth = strokeWidth;\n  }\n\n  if (isValidStrokeCap(strokeCap)) {\n    renderingContext.ctx2d.lineCap = strokeCap;\n  }\n\n  if (isValidStrokeJoin(strokeJoin)) {\n    renderingContext.ctx2d.lineJoin = strokeJoin;\n  }\n\n  if (isValidFillOrStrokeStyle(stroke)) {\n    renderingContext.ctx2d.strokeStyle = stroke;\n    renderingContext.ctx2d.stroke();\n  }\n};\n"]}

package/utils/get-recommended-pixel-ratio.d.ts

@@ -0,0 +1 @@
+export declare const getRecommendedPixelRatio: () => 1 | 2;

package/utils/get-recommended-pixel-ratio.js

@@ -0,0 +1,2 @@
+export const getRecommendedPixelRatio = () => window.devicePixelRatio >= 2 ? 2 : 1;
+//# sourceMappingURL=get-recommended-pixel-ratio.js.map

package/utils/get-recommended-pixel-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-recommended-pixel-ratio.js","sourceRoot":"","sources":["../../src/utils/get-recommended-pixel-ratio.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE,CAC3C,MAAM,CAAC,gBAAgB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC","sourcesContent":["export const getRecommendedPixelRatio = () =>\n  window.devicePixelRatio >= 2 ? 2 : 1;\n"]}

package/utils/index.js

@@ -0,0 +1,9 @@
+export * from "./apply-fill-and-stroke-style.js";
+export * from "./get-recommended-pixel-ratio.js";
+export * from "./is-own-property-of.js";
+export * from "./is-valid-stroke-cap.js";
+export * from "./is-valid-stroke-join.js";
+export * from "./resolve-styles.js";
+export * from "./type-guards.js";
+export * from "./is-valid-fill-or-stroke-style.js";
+//# sourceMappingURL=index.js.map

package/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './apply-fill-and-stroke-style.ts';\nexport * from './get-recommended-pixel-ratio.ts';\nexport * from './is-own-property-of.ts';\nexport * from './is-valid-stroke-cap.ts';\nexport * from './is-valid-stroke-join.ts';\nexport * from './resolve-styles.ts';\nexport * from './type-guards.ts';\nexport * from './is-valid-fill-or-stroke-style.ts';\n"]}

package/utils/is-own-property-of.d.ts

@@ -0,0 +1,2 @@
+import { AnyObject } from '../types.ts';
+export declare const isOwnPropertyOf: <T extends AnyObject>(obj: T, key: PropertyKey) => key is keyof T;

package/utils/is-own-property-of.js

@@ -0,0 +1,2 @@
+export const isOwnPropertyOf = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
+//# sourceMappingURL=is-own-property-of.js.map

package/utils/is-own-property-of.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-own-property-of.js","sourceRoot":"","sources":["../../src/utils/is-own-property-of.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,GAAM,EACN,GAAgB,EACA,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC","sourcesContent":["import { AnyObject } from '../types.ts';\n\nexport const isOwnPropertyOf = <T extends AnyObject>(\n  obj: T,\n  key: PropertyKey\n): key is keyof T => Object.prototype.hasOwnProperty.call(obj, key);\n"]}

package/utils/is-valid-fill-or-stroke-style.d.ts

@@ -0,0 +1 @@
+export declare const isValidFillOrStrokeStyle: (fillOrStrokeStyle: unknown) => fillOrStrokeStyle is string | CanvasGradient;

package/utils/is-valid-fill-or-stroke-style.js

@@ -0,0 +1,3 @@
+export const isValidFillOrStrokeStyle = (fillOrStrokeStyle) => typeof fillOrStrokeStyle === 'string' ||
+    fillOrStrokeStyle instanceof CanvasGradient;
+//# sourceMappingURL=is-valid-fill-or-stroke-style.js.map

package/utils/is-valid-fill-or-stroke-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-valid-fill-or-stroke-style.js","sourceRoot":"","sources":["../../src/utils/is-valid-fill-or-stroke-style.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,iBAA0B,EACoB,EAAE,CAChD,OAAO,iBAAiB,KAAK,QAAQ;IACrC,iBAAiB,YAAY,cAAc,CAAC","sourcesContent":["export const isValidFillOrStrokeStyle = (\n  fillOrStrokeStyle: unknown\n): fillOrStrokeStyle is string | CanvasGradient =>\n  typeof fillOrStrokeStyle === 'string' ||\n  fillOrStrokeStyle instanceof CanvasGradient;\n"]}

package/utils/is-valid-stroke-cap.d.ts

@@ -0,0 +1 @@
+export declare const isValidStrokeCap: (value: unknown) => value is CanvasLineCap;

package/utils/is-valid-stroke-cap.js

@@ -0,0 +1,8 @@
+import { isOwnPropertyOf } from "./is-own-property-of.js";
+const STROKE_CAPS = {
+    butt: true,
+    round: true,
+    square: true,
+};
+export const isValidStrokeCap = (value) => typeof value === 'string' && isOwnPropertyOf(STROKE_CAPS, value);
+//# sourceMappingURL=is-valid-stroke-cap.js.map

package/utils/is-valid-stroke-cap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-valid-stroke-cap.js","sourceRoot":"","sources":["../../src/utils/is-valid-stroke-cap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;CACyB,CAAC;AAExC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAc,EAA0B,EAAE,CACzE,OAAO,KAAK,KAAK,QAAQ,IAAI,eAAe,CAAC,WAAW,EAAE,KAAe,CAAC,CAAC","sourcesContent":["import { isOwnPropertyOf } from './is-own-property-of.ts';\n\nconst STROKE_CAPS = {\n  butt: true,\n  round: true,\n  square: true,\n} satisfies Record<CanvasLineCap, true>;\n\nexport const isValidStrokeCap = (value: unknown): value is CanvasLineCap =>\n  typeof value === 'string' && isOwnPropertyOf(STROKE_CAPS, value as string);\n"]}

package/utils/is-valid-stroke-join.d.ts

@@ -0,0 +1 @@
+export declare const isValidStrokeJoin: (value: unknown) => value is CanvasLineJoin;

package/utils/is-valid-stroke-join.js

@@ -0,0 +1,8 @@
+import { isOwnPropertyOf } from "./is-own-property-of.js";
+const STROKE_JOINS = {
+    bevel: true,
+    round: true,
+    miter: true,
+};
+export const isValidStrokeJoin = (value) => typeof value === 'string' && isOwnPropertyOf(STROKE_JOINS, value);
+//# sourceMappingURL=is-valid-stroke-join.js.map

package/utils/is-valid-stroke-join.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-valid-stroke-join.js","sourceRoot":"","sources":["../../src/utils/is-valid-stroke-join.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;CAC2B,CAAC;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAc,EAA2B,EAAE,CAC3E,OAAO,KAAK,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,EAAE,KAAe,CAAC,CAAC","sourcesContent":["import { isOwnPropertyOf } from './is-own-property-of.ts';\n\nconst STROKE_JOINS = {\n  bevel: true,\n  round: true,\n  miter: true,\n} satisfies Record<CanvasLineJoin, true>;\n\nexport const isValidStrokeJoin = (value: unknown): value is CanvasLineJoin =>\n  typeof value === 'string' && isOwnPropertyOf(STROKE_JOINS, value as string);\n"]}

package/utils/resolve-styles.d.ts

@@ -0,0 +1,2 @@
+import type { AnyObject, NestedArray } from '../types.ts';
+export declare const resolveStyles: <S extends AnyObject>(styles: NestedArray<false | null | undefined | S>) => Partial<S>;

package/utils/resolve-styles.js

@@ -0,0 +1,16 @@
+import { isArray } from "./type-guards.js";
+export const resolveStyles = (styles) => {
+    if (typeof styles === 'object' && !!styles) {
+        if (isArray(styles)) {
+            return styles.reduce((acc, style) => {
+                return {
+                    ...acc,
+                    ...resolveStyles(style),
+                };
+            }, {});
+        }
+        return styles;
+    }
+    return {};
+};
+//# sourceMappingURL=resolve-styles.js.map

package/utils/resolve-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-styles.js","sourceRoot":"","sources":["../../src/utils/resolve-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,MAAiD,EACrC,EAAE;IACd,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3C,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YACpB,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;gBAClC,OAAO;oBACL,GAAG,GAAG;oBACN,GAAG,aAAa,CAAC,KAAK,CAAC;iBACxB,CAAC;YACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QACT,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC","sourcesContent":["import type { AnyObject, NestedArray } from '../types.ts';\nimport { isArray } from './type-guards.ts';\n\nexport const resolveStyles = <S extends AnyObject>(\n  styles: NestedArray<false | null | undefined | S>\n): Partial<S> => {\n  if (typeof styles === 'object' && !!styles) {\n    if (isArray(styles)) {\n      return styles.reduce((acc, style) => {\n        return {\n          ...acc,\n          ...resolveStyles(style),\n        };\n      }, {});\n    }\n\n    return styles;\n  }\n\n  return {};\n};\n"]}

package/utils/type-guards.d.ts

@@ -0,0 +1,2 @@
+import type { AnyArray } from '../types.ts';
+export declare const isArray: <T>(input: T) => input is Extract<T, AnyArray>;

package/utils/type-guards.js

@@ -0,0 +1,2 @@
+export const isArray = (input) => Array.isArray(input);
+//# sourceMappingURL=type-guards.js.map

package/utils/type-guards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type-guards.js","sourceRoot":"","sources":["../../src/utils/type-guards.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAI,KAAQ,EAAiC,EAAE,CACpE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC","sourcesContent":["import type { AnyArray } from '../types.ts';\n\nexport const isArray = <T>(input: T): input is Extract<T, AnyArray> =>\n  Array.isArray(input);\n"]}

package/utils/with-px.d.ts

@@ -0,0 +1 @@
+export declare const withPx: <T extends string | number>(value: T) => T extends number ? `${T}px` : T;

package/utils/with-px.js

@@ -0,0 +1,2 @@
+export const withPx = (value) => (typeof value === 'number' ? `${value}px` : value);
+//# sourceMappingURL=with-px.js.map

package/utils/with-px.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-px.js","sourceRoot":"","sources":["../../src/utils/with-px.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG,CAA4B,KAAQ,EAAE,EAAE,CAC5D,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAE5C,CAAC","sourcesContent":["export const withPx = <T extends string | number>(value: T) =>\n  (typeof value === 'number' ? `${value}px` : value) as T extends number\n    ? `${T}px`\n    : T;\n"]}

package/.eslintignore

@@ -1,4 +0,0 @@
-/node_modules/*
-/coverage/*
-/build/*
-/dist/*