@blinkorb/rcx 0.0.0

package/src/components/text/text.ts

@@ -0,0 +1,137 @@
+import { useRenderBeforeChildren } from '../../hooks/use-render.ts';
+import type {
+  RCXChildren,
+  RCXComponent,
+  RCXFontStyle,
+  RCXPropsWithChildren,
+  RCXShapeStyle,
+  RCXStyleProp,
+} from '../../types.ts';
+import { isValidFillOrStrokeStyle } from '../../utils/is-valid-fill-or-stroke-style.ts';
+import { isValidStrokeCap } from '../../utils/is-valid-stroke-cap.ts';
+import { isValidStrokeJoin } from '../../utils/is-valid-stroke-join.ts';
+import { resolveStyles } from '../../utils/resolve-styles.ts';
+import { isArray } from '../../utils/type-guards.ts';
+import { withPx } from '../../utils/with-px.ts';
+
+export interface TextStyle extends RCXShapeStyle, RCXFontStyle {
+  align?: CanvasTextAlign;
+  baseline?: CanvasTextBaseline;
+}
+
+export type TextProps = RCXPropsWithChildren<{
+  x: number;
+  y: number;
+  maxWidth?: number;
+  children?: RCXChildren;
+  style?: RCXStyleProp<TextStyle>;
+}>;
+
+const DEFAULT_FONT_STYLE = {
+  // font string
+  fontStyle: 'normal',
+  fontWeight: 'normal',
+  fontSize: 10,
+  fontFamily: 'sans-serif',
+  // other ctx2d properties
+  fontStretch: 'normal',
+  fontVariant: 'normal',
+  fontKerning: 'normal',
+} satisfies Required<RCXFontStyle>;
+
+const getTextFromChildren = (children: RCXChildren): string => {
+  if (
+    children === null ||
+    typeof children === 'boolean' ||
+    typeof children === 'undefined'
+  ) {
+    return '';
+  }
+
+  if (typeof children === 'object') {
+    if (isArray(children)) {
+      return children.reduce<string>(
+        (acc, child) => acc + getTextFromChildren(child),
+        ''
+      );
+    }
+
+    return getTextFromChildren(children.props.children);
+  }
+
+  return children.toString();
+};
+
+export const Text: RCXComponent<TextProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const { x, y, maxWidth, children } = props;
+    const {
+      fill,
+      stroke,
+      strokeWidth,
+      strokeCap,
+      strokeJoin,
+      align,
+      baseline,
+      fontStyle = DEFAULT_FONT_STYLE.fontStyle,
+      fontWeight = DEFAULT_FONT_STYLE.fontWeight,
+      fontSize = DEFAULT_FONT_STYLE.fontSize,
+      fontFamily = DEFAULT_FONT_STYLE.fontFamily,
+      // other ctx2d properties
+      fontStretch = DEFAULT_FONT_STYLE.fontStretch,
+      fontVariant = DEFAULT_FONT_STYLE.fontVariant,
+      fontKerning = DEFAULT_FONT_STYLE.fontKerning,
+    } = resolveStyles(props.style);
+
+    const text = getTextFromChildren(children);
+
+    renderingContext.ctx2d.save();
+
+    if (typeof align === 'string') {
+      renderingContext.ctx2d.textAlign = align;
+    }
+
+    if (typeof baseline === 'string') {
+      renderingContext.ctx2d.textBaseline = baseline;
+    }
+
+    renderingContext.ctx2d.font = [
+      fontStyle,
+      fontWeight,
+      withPx(fontSize),
+      fontFamily,
+    ].join(' ');
+
+    renderingContext.ctx2d.fontStretch = fontStretch;
+    renderingContext.ctx2d.fontVariantCaps = fontVariant;
+    renderingContext.ctx2d.fontKerning = fontKerning;
+
+    if (isValidFillOrStrokeStyle(fill)) {
+      renderingContext.ctx2d.fillStyle = fill;
+      renderingContext.ctx2d.fillText(text, x, y, maxWidth);
+    }
+
+    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.strokeText(text, x, y, maxWidth);
+    }
+
+    renderingContext.ctx2d.restore();
+  });
+
+  return null;
+};
+
+Text.displayName = 'Text';

package/src/components/transform/index.ts

@@ -0,0 +1,3 @@
+export * from './translate.ts';
+export * from './rotate.ts';
+export * from './scale.ts';

package/src/components/transform/rotate.ts

@@ -0,0 +1,26 @@
+import {
+  useRenderAfterChildren,
+  useRenderBeforeChildren,
+} from '../../hooks/use-render.ts';
+import { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+
+export type RotateProps = RCXPropsWithChildren<{
+  rotation: number;
+}>;
+
+export const Rotate: RCXComponent<RotateProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const { rotation } = props;
+
+    renderingContext.ctx2d.save();
+    renderingContext.ctx2d.rotate(rotation);
+  });
+
+  useRenderAfterChildren((renderingContext) => {
+    renderingContext.ctx2d.restore();
+  });
+
+  return props.children;
+};
+
+Rotate.displayName = 'Rotate';

package/src/components/transform/scale.ts

@@ -0,0 +1,34 @@
+import {
+  useRenderAfterChildren,
+  useRenderBeforeChildren,
+} from '../../hooks/use-render.ts';
+import { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+
+export type ScaleProps =
+  | RCXPropsWithChildren<{
+      scale: number;
+      scaleX?: never;
+      scaleY?: never;
+    }>
+  | RCXPropsWithChildren<{
+      scale: never;
+      scaleX: number;
+      scaleY: number;
+    }>;
+
+export const Scale: RCXComponent<ScaleProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const { scale, scaleX, scaleY } = props;
+
+    renderingContext.ctx2d.save();
+    renderingContext.ctx2d.scale(scaleX ?? scale, scaleY ?? scale);
+  });
+
+  useRenderAfterChildren((renderingContext) => {
+    renderingContext.ctx2d.restore();
+  });
+
+  return props.children;
+};
+
+Scale.displayName = 'Scale';

package/src/components/transform/translate.ts

@@ -0,0 +1,27 @@
+import {
+  useRenderAfterChildren,
+  useRenderBeforeChildren,
+} from '../../hooks/use-render.ts';
+import { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+
+export type TranslateProps = RCXPropsWithChildren<{
+  x?: number;
+  y?: number;
+}>;
+
+export const Translate: RCXComponent<TranslateProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const { x = 0, y = 0 } = props;
+
+    renderingContext.ctx2d.save();
+    renderingContext.ctx2d.translate(x, y);
+  });
+
+  useRenderAfterChildren((renderingContext) => {
+    renderingContext.ctx2d.restore();
+  });
+
+  return props.children;
+};
+
+Translate.displayName = 'Translate';

package/src/context/create-context.ts

@@ -0,0 +1,49 @@
+import { cxGlobal } from '../internal/global.ts';
+import type {
+  AnyObject,
+  RCXComponent,
+  RCXPropsWithChildren,
+} from '../types.ts';
+
+export type ProviderProps<T> = RCXPropsWithChildren<{
+  value: T;
+}>;
+
+export const createContext = <T extends AnyObject>(name?: string) => {
+  const symbol = Symbol(name);
+
+  const useProvide = (value: T) => {
+    const { currentNode } = cxGlobal;
+    if (!currentNode) {
+      throw new Error(
+        'useProvide must be called inside the body of a component'
+      );
+    }
+
+    currentNode.context[symbol] = value;
+  };
+
+  const useInject = () => {
+    const { currentNode } = cxGlobal;
+    if (!currentNode) {
+      throw new Error(
+        'useInject must be called inside the body of a component'
+      );
+    }
+
+    return currentNode.context[symbol] as Readonly<T> | undefined;
+  };
+
+  const Provider: RCXComponent<ProviderProps<T>> = ({ children, value }) => {
+    useProvide(value);
+    return children;
+  };
+
+  Provider.displayName = 'Provider';
+
+  return {
+    Provider,
+    useProvide,
+    useInject,
+  };
+};

package/src/context/index.ts

@@ -0,0 +1 @@
+export * from './create-context.ts';

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './use-canvas-context.ts';
+export * from './use-loop.ts';
+export * from './use-on.ts';
+export * from './use-render.ts';
+export * from './use-state.ts';
+export * from './use-window-size.ts';
+export * from './use-linear-gradient.ts';
+export * from './use-radial-gradient.ts';

package/src/hooks/use-canvas-context.ts

@@ -0,0 +1,11 @@
+import { canvasContext } from '../components/canvas/context.ts';
+
+export const useCanvasContext = () => {
+  const context = canvasContext.useInject();
+
+  if (!context) {
+    throw new Error('useCanvasContext must be used below a Canvas component');
+  }
+
+  return context;
+};

package/src/hooks/use-linear-gradient.ts

@@ -0,0 +1,39 @@
+import { renderingContext } from '../components/canvas/context.ts';
+import type { RCXColorStop } from '../types.ts';
+
+export interface LinearGradientConfig {
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  stops: readonly RCXColorStop[];
+}
+
+export const useLinearGradient = ({
+  startX,
+  startY,
+  endX,
+  endY,
+  stops,
+}: LinearGradientConfig) => {
+  const renderingContextState = renderingContext.useInject();
+
+  if (!renderingContextState) {
+    throw new Error(
+      'useLinearGradient must be called inside the body of a component'
+    );
+  }
+
+  const gradient = renderingContextState.ctx2d.createLinearGradient(
+    startX,
+    startY,
+    endX,
+    endY
+  );
+
+  stops.forEach(({ offset, color }) => {
+    gradient.addColorStop(offset, color);
+  });
+
+  return gradient;
+};

package/src/hooks/use-loop.ts

@@ -0,0 +1,11 @@
+import { useUnreactive } from './use-state.ts';
+
+export const useLoop = (callback: () => void) => {
+  const unreactive = useUnreactive<{ raf: number | null }>({ raf: null });
+
+  if (typeof unreactive.raf === 'number') {
+    window.cancelAnimationFrame(unreactive.raf);
+  }
+
+  unreactive.raf = window.requestAnimationFrame(callback);
+};

package/src/hooks/use-on.ts

@@ -0,0 +1,18 @@
+import { registerHook } from '../internal/hooks.ts';
+import type { RCXOnMountHook } from '../types.ts';
+
+export const useOnMount = (callback: () => void | (() => void)) => {
+  const hook: RCXOnMountHook = {
+    onMount: () => {
+      const onUnmount = callback();
+      if (onUnmount) {
+        hook.onUnmount = onUnmount;
+      }
+    },
+  };
+  registerHook('useOnMount', hook);
+};
+
+export const useOnUnmount = (callback: () => void) => {
+  registerHook('useOnUnmount', callback);
+};

package/src/hooks/use-radial-gradient.ts

@@ -0,0 +1,45 @@
+import { renderingContext } from '../components/canvas/context.ts';
+import type { RCXColorStop } from '../types.ts';
+
+export interface RadialGradientConfig {
+  startX: number;
+  startY: number;
+  startRadius: number;
+  endX: number;
+  endY: number;
+  endRadius: number;
+  stops: readonly RCXColorStop[];
+}
+
+export const useRadialGradient = ({
+  startX,
+  startY,
+  startRadius,
+  endX,
+  endY,
+  endRadius,
+  stops,
+}: RadialGradientConfig) => {
+  const renderingContextState = renderingContext.useInject();
+
+  if (!renderingContextState) {
+    throw new Error(
+      'useRadialGradient must be called inside the body of a component'
+    );
+  }
+
+  const gradient = renderingContextState.ctx2d.createRadialGradient(
+    startX,
+    startY,
+    startRadius,
+    endX,
+    endY,
+    endRadius
+  );
+
+  stops.forEach(({ offset, color }) => {
+    gradient.addColorStop(offset, color);
+  });
+
+  return gradient;
+};

package/src/hooks/use-render.ts

@@ -0,0 +1,14 @@
+import { registerHook } from '../internal/hooks.ts';
+import { RCXRenderingContext } from '../types.ts';
+
+export const useRenderBeforeChildren = (
+  callback: (renderingContext: RCXRenderingContext) => void
+) => {
+  registerHook('useRenderBeforeChildren', callback);
+};
+
+export const useRenderAfterChildren = (
+  callback: (renderingContext: RCXRenderingContext) => void
+) => {
+  registerHook('useRenderAfterChildren', callback);
+};

package/src/hooks/use-state.ts

@@ -0,0 +1,9 @@
+import { registerHook } from '../internal/hooks.ts';
+import { reactive } from '../internal/reactive.ts';
+import type { AnyObject } from '../types.ts';
+
+export const useReactive = <T extends AnyObject>(initialState: T) =>
+  registerHook('useReactive', reactive(initialState));
+
+export const useUnreactive = <T extends AnyObject>(initialState: T) =>
+  registerHook('useUnreactive', initialState);

package/src/hooks/use-window-size.ts

@@ -0,0 +1,24 @@
+import { useOnMount } from './use-on.ts';
+import { useReactive } from './use-state.ts';
+
+export const useWindowSize = () => {
+  const size = useReactive({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useOnMount(() => {
+    const onResize = () => {
+      size.width = window.innerWidth;
+      size.height = window.innerHeight;
+    };
+
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  });
+
+  return size;
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './types.ts';
+export * from './render.ts';
+export * from './hooks/index.ts';
+export * from './components/index.ts';
+export * from './context/index.ts';
+export * from './utils/index.ts';

package/src/internal/emitter.ts

@@ -0,0 +1,39 @@
+import type { AnyFunction, AnyObject } from '../types.ts';
+
+type Handler<T extends AnyObject, K extends keyof T> = (
+  data: T[K],
+  event: K
+) => void;
+
+class Emitter<T extends AnyObject> {
+  private handlers: {
+    [K in keyof T]?: Handler<T, K>[];
+  } = {};
+
+  public on = <K extends keyof T>(event: K, handler: Handler<T, K>) => {
+    this.handlers[event] = this.handlers[event] || [];
+    this.handlers[event]?.push(handler);
+
+    return () => this.off(event, handler);
+  };
+
+  public off = <K extends keyof T>(event: K, handler: Handler<T, K>) => {
+    const index = this.handlers[event]?.indexOf(handler);
+
+    if (typeof index === 'number' && index >= 0) {
+      this.handlers[event]?.splice(index, 1);
+    }
+  };
+
+  public emit = <K extends keyof T>(event: K, data: T[K]) => {
+    this.handlers[event]?.forEach((handler) => handler(data, event));
+  };
+}
+
+export const emitter = new Emitter<{
+  render: null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  registerState: any;
+  registerBeforeChildren: AnyFunction;
+  registerAfterChildren: AnyFunction;
+}>();

package/src/internal/global.ts

@@ -0,0 +1,5 @@
+import type { RCXGlobal } from '../types.ts';
+
+export const cxGlobal: RCXGlobal = {
+  hookIndex: 0,
+};

package/src/internal/hooks.ts

@@ -0,0 +1,32 @@
+import type { RCXHook, RCXHookMap } from '../types.ts';
+import { cxGlobal } from './global.ts';
+
+export const registerHook = <
+  H extends keyof RCXHookMap,
+  T extends RCXHookMap[H],
+>(
+  hookType: H,
+  value: T
+) => {
+  const { currentNode, hookIndex } = cxGlobal;
+
+  if (!currentNode) {
+    throw new Error(
+      `${hookType} must be called inside the body of a component`
+    );
+  }
+
+  const prev = currentNode.hooks[hookIndex];
+
+  if (!!prev && prev.type !== hookType) {
+    throw new Error(
+      `${hookType} was called at a different time (conditionally, or in a loop)`
+    );
+  }
+
+  const originalValue = prev ? prev.value : value;
+  const hook = { type: hookType, value: originalValue } as RCXHook;
+  currentNode.hooks[hookIndex] = hook;
+  cxGlobal.hookIndex += 1;
+  return hook.value as T;
+};

package/src/internal/reactive.test.ts

@@ -0,0 +1,20 @@
+import { reactive } from './reactive.ts';
+
+describe('reactive', () => {
+  it('wraps an object in a proxy and allows accessing raw values', () => {
+    const result = reactive({ foo: 'foo', bar: 123 });
+
+    expect(typeof result.foo).toBe('string');
+    expect(result.foo).toBe('foo');
+    expect(result.foo + 'bar').toBe('foobar');
+    expect(typeof result.bar).toBe('number');
+    expect(result.bar).toBe(123);
+    expect(result.bar * 2).toBe(246);
+    expect(JSON.stringify(result)).toBe('{"foo":"foo","bar":123}');
+
+    expect(Object.entries(result)).toEqual([
+      ['foo', 'foo'],
+      ['bar', 123],
+    ]);
+  });
+});

package/src/internal/reactive.ts

@@ -0,0 +1,20 @@
+import type { AnyObject } from '../types.ts';
+import { emitter } from './emitter.ts';
+
+export const reactive = <T extends AnyObject>(initialState: T) =>
+  new Proxy(initialState, {
+    set(target, key, value) {
+      Reflect.set(target, key, value);
+      emitter.emit('render', null);
+      return true;
+    },
+    get(target, key) {
+      const value = Reflect.get(target, key);
+
+      if (typeof value === 'object' && !!value) {
+        return reactive(value);
+      }
+
+      return value;
+    },
+  });

package/src/jsx-runtime.ts

@@ -0,0 +1,21 @@
+import type {
+  AnyObject,
+  RCXComponent,
+  RCXElement,
+  RCXFragmentProps,
+} from './types.ts';
+
+export const jsx = <C extends RCXComponent<P>, P extends AnyObject>(
+  type: C,
+  props: P
+): RCXElement<C, P> => ({
+  type,
+  props,
+});
+
+export const jsxs = jsx;
+
+export const Fragment: RCXComponent<RCXFragmentProps> = ({ children }) =>
+  children;
+
+Fragment.displayName = 'Fragment';