@blinkorb/rcx 0.0.0

package/src/render.ts

@@ -0,0 +1,299 @@
+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

@@ -0,0 +1,151 @@
+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

@@ -0,0 +1,33 @@
+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

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

package/src/utils/index.ts

@@ -0,0 +1,8 @@
+export * from './apply-fill-and-stroke-style.ts';
+export * from './get-recommended-pixel-ratio.ts';
+export * from './is-own-property-of.ts';
+export * from './is-valid-stroke-cap.ts';
+export * from './is-valid-stroke-join.ts';
+export * from './resolve-styles.ts';
+export * from './type-guards.ts';
+export * from './is-valid-fill-or-stroke-style.ts';

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

@@ -0,0 +1,6 @@
+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

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

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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,11 @@
+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

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

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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"]
+}