@blinkorb/rcx 0.0.0 → 0.0.1

package/src/render.ts

@@ -1,299 +0,0 @@
-import { renderingContext } from './components/canvas/context.ts';
-import { emitter } from './internal/emitter.ts';
-import { cxGlobal } from './internal/global.ts';
-import type {
-  AnyObject,
-  NestedArray,
-  RCXChild,
-  RCXChildren,
-  RCXElementAny,
-  RCXNodeAny,
-  RCXRenderingContext,
-} from './types.ts';
-import { isArray } from './utils/type-guards.ts';
-
-const getCanvasElement = (container: HTMLElement) => {
-  if (container instanceof HTMLCanvasElement) {
-    return container;
-  }
-
-  const canvasElement = document.createElement('canvas');
-  container.appendChild(canvasElement);
-
-  return canvasElement;
-};
-
-const unmountNodes = (
-  children: NestedArray<RCXNodeAny> | RCXNodeAny | undefined
-) => {
-  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: RCXElementAny,
-  prevNode: RCXNodeAny | undefined
-): RCXNodeAny => {
-  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: RCXChildren,
-  nextChildIndex: number,
-  stillRendered: NestedArray<RCXNodeAny> | undefined
-) => {
-  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: NestedArray<RCXNodeAny>,
-  prevChildIndex: number,
-  nextRendered: NestedArray<RCXChild>
-) => {
-  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: RCXElementAny,
-  renderingContextState: RCXRenderingContext,
-  prevNode: RCXNodeAny | undefined,
-  parentContext?: AnyObject
-): RCXNodeAny => {
-  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: RCXChildren,
-    prevRendered: NestedArray<RCXNodeAny> | undefined
-  ): NestedArray<RCXNodeAny> => {
-    if (!!nextRendered && typeof nextRendered === 'object') {
-      if (isArray(nextRendered)) {
-        let stillRendered: NestedArray<RCXNodeAny> | undefined;
-
-        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: RCXElementAny, container: HTMLElement) => {
-  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: number | undefined;
-  let rootNode: RCXNodeAny | undefined;
-
-  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;
-};

package/src/types.ts

@@ -1,151 +0,0 @@
-import type { CanvasProps } from './components/canvas/index.ts';
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    export interface IntrinsicAttributes {
-      $key?: string | number;
-    }
-  }
-}
-
-export type Primitive = string | number | boolean | null | undefined;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnyObject = Record<PropertyKey, any>;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnyArray = readonly any[];
-// eslint-disable-next-line @typescript-eslint/no-explicit-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 {
-  // font string
-  fontStyle?: RCXCanvasFontStyle;
-  fontWeight?: RCXCanvasFontWeight;
-  fontSize?: number;
-  fontFamily?: string;
-}
-
-export interface RCXFontStyle extends RCXFontStringStyle {
-  // other ctx2d properties
-  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/src/utils/apply-fill-and-stroke-style.ts

@@ -1,33 +0,0 @@
-import type { AnyObject, RCXRenderingContext } from '../types.ts';
-import { isValidFillOrStrokeStyle } from './is-valid-fill-or-stroke-style.ts';
-import { isValidStrokeCap } from './is-valid-stroke-cap.ts';
-import { isValidStrokeJoin } from './is-valid-stroke-join.ts';
-
-export const applyFillAndStrokeStyles = (
-  renderingContext: RCXRenderingContext,
-  style: Partial<AnyObject>
-) => {
-  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();
-  }
-};

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

@@ -1,2 +0,0 @@
-export const getRecommendedPixelRatio = () =>
-  window.devicePixelRatio >= 2 ? 2 : 1;

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

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

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

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

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

@@ -1,10 +0,0 @@
-import { isOwnPropertyOf } from './is-own-property-of.ts';
-
-const STROKE_CAPS = {
-  butt: true,
-  round: true,
-  square: true,
-} satisfies Record<CanvasLineCap, true>;
-
-export const isValidStrokeCap = (value: unknown): value is CanvasLineCap =>
-  typeof value === 'string' && isOwnPropertyOf(STROKE_CAPS, value as string);

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

@@ -1,10 +0,0 @@
-import { isOwnPropertyOf } from './is-own-property-of.ts';
-
-const STROKE_JOINS = {
-  bevel: true,
-  round: true,
-  miter: true,
-} satisfies Record<CanvasLineJoin, true>;
-
-export const isValidStrokeJoin = (value: unknown): value is CanvasLineJoin =>
-  typeof value === 'string' && isOwnPropertyOf(STROKE_JOINS, value as string);

package/src/utils/resolve-styles.ts

@@ -1,21 +0,0 @@
-import type { AnyObject, NestedArray } from '../types.ts';
-import { isArray } from './type-guards.ts';
-
-export const resolveStyles = <S extends AnyObject>(
-  styles: NestedArray<false | null | undefined | S>
-): Partial<S> => {
-  if (typeof styles === 'object' && !!styles) {
-    if (isArray(styles)) {
-      return styles.reduce((acc, style) => {
-        return {
-          ...acc,
-          ...resolveStyles(style),
-        };
-      }, {});
-    }
-
-    return styles;
-  }
-
-  return {};
-};

package/src/utils/type-guards.ts

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

package/src/utils/with-px.ts

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

package/tsb.config.ts

@@ -1,11 +0,0 @@
-import { Config } from '@jakesidsmith/tsb';
-
-const config: Config = {
-  indexHTMLPath: 'demo/index.html',
-  main: 'demo/index.tsx',
-  outDir: 'build',
-  tsconfigPath: 'demo/tsconfig.json',
-  host: 'localhost',
-};
-
-export default config;

package/tsconfig.dist.json

@@ -1,13 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": false,
-    "declaration": true,
-    "sourceMap": true,
-    "inlineSources": true,
-    "outDir": "./dist",
-    "rootDir": "./src"
-  },
-  "include": ["src/*"],
-  "exclude": ["**/*.test.*", "**/*.spec.*"]
-}

package/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "noErrorTruncation": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noUncheckedIndexedAccess": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true,
-    "allowImportingTsExtensions": true,
-    "target": "ESNext",
-    "module": "Preserve",
-    "moduleResolution": "Bundler",
-    "jsx": "react-jsx",
-    "jsxImportSource": "@blinkorb/rcx"
-  },
-  "include": ["demo/*", "src/*", "jest.config.ts"]
-}