@blinkorb/rcx 0.0.0

package/demo/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": true,
+    "paths": {
+      "@blinkorb/rcx": ["../src/index.ts"],
+      "@blinkorb/rcx/canvas": ["../src/components/canvas/index.ts"],
+      "@blinkorb/rcx/*": ["../src/*"]
+    }
+  },
+  "include": ["./*", "../src/*"]
+}

package/jest.config.ts

@@ -0,0 +1,21 @@
+import type { Config } from 'jest';
+
+const config = {
+  preset: 'ts-jest/presets/default-esm',
+  testMatch: ['<rootDir>/src/**/*.(spec|test).{js,jsx,ts,tsx}'],
+  collectCoverageFrom: ['src/**/*.(js|jsx|ts|tsx)'],
+  // coverageThreshold: {
+  //   global: {
+  //     branches: 100,
+  //     functions: 100,
+  //     lines: 100,
+  //     statements: 100,
+  //   },
+  // },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  moduleNameMapper: {
+    '(.+)\\.js$': '$1',
+  },
+} satisfies Config;
+
+export default config;

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@blinkorb/rcx",
+  "version": "0.0.0",
+  "description": "Reactive JSX-based library for creating HTML5 canvas applications",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts"
+    },
+    "./canvas": {
+      "import": "./src/components/canvas/index.ts"
+    },
+    "./components": {
+      "import": "./src/components/index.ts"
+    },
+    "./context": {
+      "import": "./src/context/index.ts"
+    },
+    "./hooks": {
+      "import": "./src/hooks/index.ts"
+    },
+    "./utils": {
+      "import": "./src/utils/index.ts"
+    },
+    "./jsx-runtime": {
+      "import": "./src/jsx-runtime.ts"
+    }
+  },
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "tsb serve",
+    "dist": "npm run build",
+    "build": "rm -rf dist && tsc -p tsconfig.dist.json --rewriteRelativeImportExtensions && node scripts/prep-package.js",
+    "typecheck": "tsc --noEmit",
+    "format-check": "prettier --check *",
+    "format": "prettier --write *",
+    "lint": "eslint '**/*.{ts,tsx,js,jsx}'",
+    "tests": "jest --coverage --runInBand",
+    "test": "npm run format-check && npm run typecheck && npm run lint && npm run tests",
+    "prepublishOnly": "npm run test && npm run dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/blinkorb/rcx.git"
+  },
+  "keywords": [
+    "canvas",
+    "jsx",
+    "view",
+    "library",
+    "reactive",
+    "html5",
+    "game"
+  ],
+  "author": "BlinkOrb",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/blinkorb/rcx/issues"
+  },
+  "homepage": "https://github.com/blinkorb/rcx#readme",
+  "devDependencies": {
+    "@jakesidsmith/tsb": "^3.0.2",
+    "@types/jest": "^29.5.12",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.3.3",
+    "ts-jest": "^29.2.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.3"
+  }
+}

package/scripts/prep-package.js

@@ -0,0 +1,29 @@
+import { writeFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import packageJson from '../package.json' with { type: 'json' };
+
+const cwd = dirname(fileURLToPath(import.meta.url));
+
+const modifiedJson = {
+  ...packageJson,
+  main: packageJson.main.replace('src/', '').replace('.ts', '.js'),
+  exports: Object.fromEntries(
+    Object.entries(packageJson.exports).map(([key, imports]) => [
+      key,
+      Object.fromEntries(
+        Object.entries(imports).map(([path, actual]) => [
+          path,
+          actual.replace('src/', '').replace('.ts', '.js'),
+        ])
+      ),
+    ])
+  ),
+};
+
+writeFileSync(
+  resolve(cwd, '../dist/package.json'),
+  JSON.stringify(modifiedJson, null, 2),
+  'utf-8'
+);

package/src/components/canvas/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from '../../context/create-context.ts';
+import type { RCXCanvasContext, RCXRenderingContext } from '../../types.ts';
+
+export const canvasContext = createContext<RCXCanvasContext>();
+
+export const renderingContext = createContext<RCXRenderingContext>();

package/src/components/canvas/index.ts

@@ -0,0 +1,98 @@
+import { useOnMount } from '../../hooks/use-on.ts';
+import { useRenderBeforeChildren } from '../../hooks/use-render.ts';
+import { useReactive, useUnreactive } from '../../hooks/use-state.ts';
+import type { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+import { getRecommendedPixelRatio } from '../../utils/get-recommended-pixel-ratio.ts';
+import { canvasContext, renderingContext } from './context.ts';
+
+export type CanvasProps = RCXPropsWithChildren<{
+  width?: number | 'auto';
+  height?: number | 'auto';
+  pixelRatio?: number | 'auto';
+}>;
+
+const getValueOrAuto = (
+  value: undefined | number | 'auto',
+  autoValue: number
+) => {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  return autoValue;
+};
+
+export const Canvas: RCXComponent<CanvasProps> = (props) => {
+  const renderingContextStateRoot = renderingContext.useInject();
+
+  if (!renderingContextStateRoot) {
+    throw new Error('Canvas was rendered outside of an application');
+  }
+
+  const initialCanvasSize =
+    renderingContextStateRoot.canvas.getBoundingClientRect();
+  const canvasSize = useReactive({
+    width: initialCanvasSize.width,
+    height: initialCanvasSize.height,
+  });
+  const resizeObserver = useUnreactive(
+    new ResizeObserver((entries) => {
+      const canvasEntry = entries[0];
+      if (typeof canvasEntry === 'undefined') {
+        return;
+      }
+
+      const rect = canvasEntry.target.getBoundingClientRect();
+      canvasSize.width = rect.width;
+      canvasSize.height = rect.height;
+    })
+  );
+
+  useOnMount(() => {
+    resizeObserver.observe(renderingContextStateRoot.canvas);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+
+  useRenderBeforeChildren((renderingContextState) => {
+    const pixelRatio = getValueOrAuto(
+      props.pixelRatio,
+      getRecommendedPixelRatio()
+    );
+    const rect = renderingContextState.canvas.getBoundingClientRect();
+    const width =
+      getValueOrAuto(props.width, rect.width * pixelRatio) / pixelRatio;
+    const height =
+      getValueOrAuto(props.height, rect.height * pixelRatio) / pixelRatio;
+
+    renderingContextState.canvas.width = width * pixelRatio;
+    renderingContextState.canvas.height = height * pixelRatio;
+    renderingContextState.ctx2d.scale(pixelRatio, pixelRatio);
+  });
+
+  const pixelRatio = getValueOrAuto(
+    props.pixelRatio,
+    getRecommendedPixelRatio()
+  );
+  const rect = renderingContextStateRoot.canvas.getBoundingClientRect();
+  const width =
+    getValueOrAuto(props.width, rect.width * pixelRatio) / pixelRatio;
+  const height =
+    getValueOrAuto(props.height, rect.height * pixelRatio) / pixelRatio;
+
+  canvasContext.useProvide({
+    ...renderingContextStateRoot,
+    props,
+    width,
+    height,
+    pixelRatio,
+    actualWidth: width * pixelRatio,
+    actualHeight: height * pixelRatio,
+  });
+
+  return props.children;
+};
+
+Canvas.displayName = 'Canvas';

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './canvas/index.ts';
+export * from './paths/index.ts';
+export * from './shapes/index.ts';
+export * from './text/index.ts';
+export * from './transform/index.ts';

package/src/components/paths/arc-to.ts

@@ -0,0 +1,66 @@
+import {
+  useRenderAfterChildren,
+  useRenderBeforeChildren,
+} from '../../hooks/use-render.ts';
+import type {
+  RCXComponent,
+  RCXPropsWithChildren,
+  RCXShapeStyle,
+  RCXStyleProp,
+} from '../../types.ts';
+import { applyFillAndStrokeStyles } from '../../utils/apply-fill-and-stroke-style.ts';
+import { resolveStyles } from '../../utils/resolve-styles.ts';
+
+export type ArcToProps = RCXPropsWithChildren<{
+  startControlX: number;
+  startControlY: number;
+  endControlX: number;
+  endControlY: number;
+  radius: number;
+  style?: RCXStyleProp<RCXShapeStyle>;
+  beginPath?: boolean;
+  closePath?: boolean;
+}>;
+
+export const ArcTo: RCXComponent<ArcToProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const {
+      startControlX,
+      startControlY,
+      endControlX,
+      endControlY,
+      radius,
+      beginPath = false,
+    } = props;
+
+    renderingContext.ctx2d.save();
+
+    if (beginPath) {
+      renderingContext.ctx2d.beginPath();
+    }
+
+    renderingContext.ctx2d.arcTo(
+      startControlX,
+      startControlY,
+      endControlX,
+      endControlY,
+      radius
+    );
+  });
+
+  useRenderAfterChildren((renderingContext) => {
+    const { closePath = false } = props;
+
+    if (closePath) {
+      renderingContext.ctx2d.closePath();
+    }
+
+    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));
+
+    renderingContext.ctx2d.restore();
+  });
+
+  return props.children;
+};
+
+ArcTo.displayName = 'ArcTo';

package/src/components/paths/clip.ts

@@ -0,0 +1,32 @@
+import {
+  useRenderAfterChildren,
+  useRenderBeforeChildren,
+} from '../../hooks/use-render.ts';
+import type { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+
+export type ClipProps = RCXPropsWithChildren<{
+  path?: Path2D;
+  fillRule?: CanvasFillRule;
+}>;
+
+export const Clip: RCXComponent<ClipProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const { path, fillRule } = props;
+
+    renderingContext.ctx2d.save();
+
+    if (typeof path === 'undefined') {
+      renderingContext.ctx2d.clip(fillRule);
+    } else {
+      renderingContext.ctx2d.clip(path, fillRule);
+    }
+  });
+
+  useRenderAfterChildren((renderingContext) => {
+    renderingContext.ctx2d.restore();
+  });
+
+  return props.children;
+};
+
+Clip.displayName = 'Clip';

package/src/components/paths/index.ts

@@ -0,0 +1,5 @@
+export * from './arc-to.ts';
+export * from './line.ts';
+export * from './path.ts';
+export * from './point.ts';
+export * from './clip.ts';

package/src/components/paths/line.ts

@@ -0,0 +1,53 @@
+import {
+  useRenderAfterChildren,
+  useRenderBeforeChildren,
+} from '../../hooks/use-render.ts';
+import type {
+  RCXComponent,
+  RCXLineStyle,
+  RCXPropsWithChildren,
+  RCXStyleProp,
+} from '../../types.ts';
+import { applyFillAndStrokeStyles } from '../../utils/apply-fill-and-stroke-style.ts';
+import { resolveStyles } from '../../utils/resolve-styles.ts';
+
+export type LineProps = RCXPropsWithChildren<{
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  beginPath?: boolean;
+  closePath?: boolean;
+  style?: RCXStyleProp<RCXLineStyle>;
+}>;
+
+export const Line: RCXComponent<LineProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const { startX, startY, endX, endY, beginPath = true } = props;
+
+    renderingContext.ctx2d.save();
+
+    if (beginPath) {
+      renderingContext.ctx2d.beginPath();
+    }
+
+    renderingContext.ctx2d.moveTo(startX, startY);
+    renderingContext.ctx2d.lineTo(endX, endY);
+  });
+
+  useRenderAfterChildren((renderingContext) => {
+    const { closePath = false } = props;
+
+    if (closePath) {
+      renderingContext.ctx2d.closePath();
+    }
+
+    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));
+
+    renderingContext.ctx2d.restore();
+  });
+
+  return props.children;
+};
+
+Line.displayName = 'Line';

package/src/components/paths/path.ts

@@ -0,0 +1,59 @@
+import {
+  useRenderAfterChildren,
+  useRenderBeforeChildren,
+} from '../../hooks/use-render.ts';
+import type {
+  RCXComponent,
+  RCXPoint,
+  RCXPropsWithChildren,
+  RCXShapeStyle,
+  RCXStyleProp,
+} from '../../types.ts';
+import { applyFillAndStrokeStyles } from '../../utils/apply-fill-and-stroke-style.ts';
+import { resolveStyles } from '../../utils/resolve-styles.ts';
+import { isArray } from '../../utils/type-guards.ts';
+
+export type PathProps = RCXPropsWithChildren<{
+  points?: readonly RCXPoint[];
+  beginPath?: boolean;
+  closePath?: boolean;
+  style?: RCXStyleProp<RCXShapeStyle>;
+}>;
+
+export const Path: RCXComponent<PathProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const { points, beginPath = true } = props;
+
+    renderingContext.ctx2d.save();
+
+    if (beginPath) {
+      renderingContext.ctx2d.beginPath();
+    }
+
+    points?.forEach((point, index) => {
+      const [x, y] = isArray(point) ? point : [point.x, point.y];
+
+      if (index === 0) {
+        renderingContext.ctx2d.moveTo(x, y);
+      } else {
+        renderingContext.ctx2d.lineTo(x, y);
+      }
+    });
+  });
+
+  useRenderAfterChildren((renderingContext) => {
+    const { closePath = false } = props;
+
+    if (closePath) {
+      renderingContext.ctx2d.closePath();
+    }
+
+    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));
+
+    renderingContext.ctx2d.restore();
+  });
+
+  return props.children;
+};
+
+Path.displayName = 'Path';

package/src/components/paths/point.ts

@@ -0,0 +1,24 @@
+import { useRenderBeforeChildren } from '../../hooks/use-render.ts';
+import type { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+
+export type PointProps = RCXPropsWithChildren<{
+  x: number;
+  y: number;
+  lineTo?: boolean;
+}>;
+
+export const Point: RCXComponent<PointProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const { x, y, lineTo = true } = props;
+
+    if (lineTo) {
+      renderingContext.ctx2d.lineTo(x, y);
+    } else {
+      renderingContext.ctx2d.moveTo(x, y);
+    }
+  });
+
+  return props.children;
+};
+
+Point.displayName = 'Point';

package/src/components/shapes/circle.tsx

@@ -0,0 +1,32 @@
+import type {
+  RCXComponent,
+  RCXPropsWithChildren,
+  RCXShapeStyle,
+  RCXStyleProp,
+} from '../../types.ts';
+import { Ellipse } from './ellipse.ts';
+
+export type CircleProps = RCXPropsWithChildren<{
+  x: number;
+  y: number;
+  radius: number;
+  rotation?: number;
+  startAngle?: number;
+  endAngle?: number;
+  counterClockwise?: boolean;
+  beginPath?: boolean;
+  closePath?: boolean;
+  style?: RCXStyleProp<RCXShapeStyle>;
+}>;
+
+export const Circle: RCXComponent<CircleProps> = (props) => {
+  const { radius, ...rest } = props;
+
+  return (
+    <Ellipse {...rest} radiusX={radius} radiusY={radius}>
+      {props.children}
+    </Ellipse>
+  );
+};
+
+Circle.displayName = 'Circle';

package/src/components/shapes/ellipse.ts

@@ -0,0 +1,75 @@
+import {
+  useRenderAfterChildren,
+  useRenderBeforeChildren,
+} from '../../hooks/use-render.ts';
+import type {
+  RCXComponent,
+  RCXPropsWithChildren,
+  RCXShapeStyle,
+  RCXStyleProp,
+} from '../../types.ts';
+import { applyFillAndStrokeStyles } from '../../utils/apply-fill-and-stroke-style.ts';
+import { resolveStyles } from '../../utils/resolve-styles.ts';
+
+export type EllipseProps = RCXPropsWithChildren<{
+  x: number;
+  y: number;
+  radiusX: number;
+  radiusY: number;
+  rotation?: number;
+  startAngle?: number;
+  endAngle?: number;
+  counterClockwise?: boolean;
+  beginPath?: boolean;
+  closePath?: boolean;
+  style?: RCXStyleProp<RCXShapeStyle>;
+}>;
+
+export const Ellipse: RCXComponent<EllipseProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const {
+      x,
+      y,
+      radiusX,
+      radiusY,
+      rotation = 0,
+      startAngle = 0,
+      endAngle = Math.PI * 2,
+      counterClockwise = false,
+      beginPath = true,
+    } = props;
+
+    renderingContext.ctx2d.save();
+
+    if (beginPath) {
+      renderingContext.ctx2d.beginPath();
+    }
+
+    renderingContext.ctx2d.ellipse(
+      x,
+      y,
+      radiusX,
+      radiusY,
+      rotation,
+      startAngle,
+      endAngle,
+      counterClockwise
+    );
+  });
+
+  useRenderAfterChildren((renderingContext) => {
+    const { closePath = true } = props;
+
+    if (closePath) {
+      renderingContext.ctx2d.closePath();
+    }
+
+    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));
+
+    renderingContext.ctx2d.restore();
+  });
+
+  return props.children;
+};
+
+Ellipse.displayName = 'Ellipse';

package/src/components/shapes/index.ts

@@ -0,0 +1,3 @@
+export * from './circle.tsx';
+export * from './ellipse.ts';
+export * from './rectangle.ts';

package/src/components/shapes/rectangle.ts

@@ -0,0 +1,45 @@
+import {
+  useRenderAfterChildren,
+  useRenderBeforeChildren,
+} from '../../hooks/use-render.ts';
+import type {
+  RCXComponent,
+  RCXPropsWithChildren,
+  RCXShapeStyle,
+  RCXStyleProp,
+} from '../../types.ts';
+import { applyFillAndStrokeStyles } from '../../utils/apply-fill-and-stroke-style.ts';
+import { resolveStyles } from '../../utils/resolve-styles.ts';
+
+export type RectangleProps = RCXPropsWithChildren<{
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  beginPath?: boolean;
+  style?: RCXStyleProp<RCXShapeStyle>;
+}>;
+
+export const Rectangle: RCXComponent<RectangleProps> = (props) => {
+  useRenderBeforeChildren((renderingContext) => {
+    const { x, y, width, height, beginPath = true } = props;
+
+    renderingContext.ctx2d.save();
+
+    if (beginPath) {
+      renderingContext.ctx2d.beginPath();
+    }
+
+    renderingContext.ctx2d.rect(x, y, width, height);
+  });
+
+  useRenderAfterChildren((renderingContext) => {
+    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));
+
+    renderingContext.ctx2d.restore();
+  });
+
+  return props.children;
+};
+
+Rectangle.displayName = 'Rectangle';

package/src/components/text/index.ts

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