@blinkorb/rcx 0.0.0 → 0.0.1

package/jest.config.ts

@@ -1,21 +0,0 @@
-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/scripts/prep-package.js

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

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

@@ -1,98 +0,0 @@
-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/paths/arc-to.ts

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

@@ -1,32 +0,0 @@
-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/line.ts

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

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

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

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

@@ -1,75 +0,0 @@
-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/rectangle.ts

@@ -1,45 +0,0 @@
-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/text.ts

@@ -1,137 +0,0 @@
-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';