@blinkorb/rcx 0.0.0 → 0.0.1

package/components/transform/rotate.js

@@ -0,0 +1,14 @@
+import { useRenderAfterChildren, useRenderBeforeChildren, } from "../../hooks/use-render.js";
+export const Rotate = (props) => {
+    useRenderBeforeChildren((renderingContext) => {
+        const { rotation } = props;
+        renderingContext.ctx2d.save();
+        renderingContext.ctx2d.rotate(rotation);
+    });
+    useRenderAfterChildren((renderingContext) => {
+        renderingContext.ctx2d.restore();
+    });
+    return props.children;
+};
+Rotate.displayName = 'Rotate';
+//# sourceMappingURL=rotate.js.map

package/components/transform/rotate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rotate.js","sourceRoot":"","sources":["../../../src/components/transform/rotate.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAOnC,MAAM,CAAC,MAAM,MAAM,GAA8B,CAAC,KAAK,EAAE,EAAE;IACzD,uBAAuB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC3C,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;QAE3B,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAC9B,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,sBAAsB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC1C,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import {\n  useRenderAfterChildren,\n  useRenderBeforeChildren,\n} from '../../hooks/use-render.ts';\nimport { RCXComponent, RCXPropsWithChildren } from '../../types.ts';\n\nexport type RotateProps = RCXPropsWithChildren<{\n  rotation: number;\n}>;\n\nexport const Rotate: RCXComponent<RotateProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const { rotation } = props;\n\n    renderingContext.ctx2d.save();\n    renderingContext.ctx2d.rotate(rotation);\n  });\n\n  useRenderAfterChildren((renderingContext) => {\n    renderingContext.ctx2d.restore();\n  });\n\n  return props.children;\n};\n\nRotate.displayName = 'Rotate';\n"]}

package/components/transform/scale.d.ts

@@ -0,0 +1,11 @@
+import { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+export type ScaleProps = RCXPropsWithChildren<{
+    scale: number;
+    scaleX?: never;
+    scaleY?: never;
+}> | RCXPropsWithChildren<{
+    scale: never;
+    scaleX: number;
+    scaleY: number;
+}>;
+export declare const Scale: RCXComponent<ScaleProps>;

package/components/transform/scale.js

@@ -0,0 +1,14 @@
+import { useRenderAfterChildren, useRenderBeforeChildren, } from "../../hooks/use-render.js";
+export const Scale = (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';
+//# sourceMappingURL=scale.js.map

package/components/transform/scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale.js","sourceRoot":"","sources":["../../../src/components/transform/scale.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAenC,MAAM,CAAC,MAAM,KAAK,GAA6B,CAAC,KAAK,EAAE,EAAE;IACvD,uBAAuB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC3C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;QAExC,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAC9B,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,EAAE,MAAM,IAAI,KAAK,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,sBAAsB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC1C,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n  useRenderAfterChildren,\n  useRenderBeforeChildren,\n} from '../../hooks/use-render.ts';\nimport { RCXComponent, RCXPropsWithChildren } from '../../types.ts';\n\nexport type ScaleProps =\n  | RCXPropsWithChildren<{\n      scale: number;\n      scaleX?: never;\n      scaleY?: never;\n    }>\n  | RCXPropsWithChildren<{\n      scale: never;\n      scaleX: number;\n      scaleY: number;\n    }>;\n\nexport const Scale: RCXComponent<ScaleProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const { scale, scaleX, scaleY } = props;\n\n    renderingContext.ctx2d.save();\n    renderingContext.ctx2d.scale(scaleX ?? scale, scaleY ?? scale);\n  });\n\n  useRenderAfterChildren((renderingContext) => {\n    renderingContext.ctx2d.restore();\n  });\n\n  return props.children;\n};\n\nScale.displayName = 'Scale';\n"]}

package/components/transform/translate.d.ts

@@ -0,0 +1,6 @@
+import { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+export type TranslateProps = RCXPropsWithChildren<{
+    x?: number;
+    y?: number;
+}>;
+export declare const Translate: RCXComponent<TranslateProps>;

package/components/transform/translate.js

@@ -0,0 +1,14 @@
+import { useRenderAfterChildren, useRenderBeforeChildren, } from "../../hooks/use-render.js";
+export const Translate = (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';
+//# sourceMappingURL=translate.js.map

package/components/transform/translate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translate.js","sourceRoot":"","sources":["../../../src/components/transform/translate.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAQnC,MAAM,CAAC,MAAM,SAAS,GAAiC,CAAC,KAAK,EAAE,EAAE;IAC/D,uBAAuB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC3C,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;QAE/B,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAC9B,gBAAgB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,sBAAsB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC1C,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import {\n  useRenderAfterChildren,\n  useRenderBeforeChildren,\n} from '../../hooks/use-render.ts';\nimport { RCXComponent, RCXPropsWithChildren } from '../../types.ts';\n\nexport type TranslateProps = RCXPropsWithChildren<{\n  x?: number;\n  y?: number;\n}>;\n\nexport const Translate: RCXComponent<TranslateProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const { x = 0, y = 0 } = props;\n\n    renderingContext.ctx2d.save();\n    renderingContext.ctx2d.translate(x, y);\n  });\n\n  useRenderAfterChildren((renderingContext) => {\n    renderingContext.ctx2d.restore();\n  });\n\n  return props.children;\n};\n\nTranslate.displayName = 'Translate';\n"]}

package/context/create-context.d.ts

@@ -0,0 +1,9 @@
+import type { AnyObject, RCXComponent, RCXPropsWithChildren } from '../types.ts';
+export type ProviderProps<T> = RCXPropsWithChildren<{
+    value: T;
+}>;
+export declare const createContext: <T extends AnyObject>(name?: string) => {
+    Provider: RCXComponent<ProviderProps<T>>;
+    useProvide: (value: T) => void;
+    useInject: () => Readonly<T> | undefined;
+};

package/context/create-context.js

@@ -0,0 +1,29 @@
+import { cxGlobal } from "../internal/global.js";
+export const createContext = (name) => {
+    const symbol = Symbol(name);
+    const useProvide = (value) => {
+        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];
+    };
+    const Provider = ({ children, value }) => {
+        useProvide(value);
+        return children;
+    };
+    Provider.displayName = 'Provider';
+    return {
+        Provider,
+        useProvide,
+        useInject,
+    };
+};
+//# sourceMappingURL=create-context.js.map

package/context/create-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-context.js","sourceRoot":"","sources":["../../src/context/create-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAWjD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAsB,IAAa,EAAE,EAAE;IAClE,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE5B,MAAM,UAAU,GAAG,CAAC,KAAQ,EAAE,EAAE;QAC9B,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CACb,0DAA0D,CAC3D,CAAC;QACJ,CAAC;QAED,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CACb,yDAAyD,CAC1D,CAAC;QACJ,CAAC;QAED,OAAO,WAAW,CAAC,OAAO,CAAC,MAAM,CAA4B,CAAC;IAChE,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAmC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;QACvE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;IAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;IAElC,OAAO;QACL,QAAQ;QACR,UAAU;QACV,SAAS;KACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { cxGlobal } from '../internal/global.ts';\nimport type {\n  AnyObject,\n  RCXComponent,\n  RCXPropsWithChildren,\n} from '../types.ts';\n\nexport type ProviderProps<T> = RCXPropsWithChildren<{\n  value: T;\n}>;\n\nexport const createContext = <T extends AnyObject>(name?: string) => {\n  const symbol = Symbol(name);\n\n  const useProvide = (value: T) => {\n    const { currentNode } = cxGlobal;\n    if (!currentNode) {\n      throw new Error(\n        'useProvide must be called inside the body of a component'\n      );\n    }\n\n    currentNode.context[symbol] = value;\n  };\n\n  const useInject = () => {\n    const { currentNode } = cxGlobal;\n    if (!currentNode) {\n      throw new Error(\n        'useInject must be called inside the body of a component'\n      );\n    }\n\n    return currentNode.context[symbol] as Readonly<T> | undefined;\n  };\n\n  const Provider: RCXComponent<ProviderProps<T>> = ({ children, value }) => {\n    useProvide(value);\n    return children;\n  };\n\n  Provider.displayName = 'Provider';\n\n  return {\n    Provider,\n    useProvide,\n    useInject,\n  };\n};\n"]}

package/context/index.js

@@ -0,0 +1,2 @@
+export * from "./create-context.js";
+//# sourceMappingURL=index.js.map

package/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './create-context.ts';\n"]}

package/hooks/index.js

@@ -0,0 +1,9 @@
+export * from "./use-canvas-context.js";
+export * from "./use-loop.js";
+export * from "./use-on.js";
+export * from "./use-render.js";
+export * from "./use-state.js";
+export * from "./use-window-size.js";
+export * from "./use-linear-gradient.js";
+export * from "./use-radial-gradient.js";
+//# sourceMappingURL=index.js.map

package/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './use-canvas-context.ts';\nexport * from './use-loop.ts';\nexport * from './use-on.ts';\nexport * from './use-render.ts';\nexport * from './use-state.ts';\nexport * from './use-window-size.ts';\nexport * from './use-linear-gradient.ts';\nexport * from './use-radial-gradient.ts';\n"]}

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

@@ -0,0 +1 @@
+export declare const useCanvasContext: () => Readonly<import("../types.ts").RCXCanvasContext>;

package/hooks/use-canvas-context.js

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

package/hooks/use-canvas-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-canvas-context.js","sourceRoot":"","sources":["../../src/hooks/use-canvas-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,EAAE,CAAC;IAE1C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC5E,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import { canvasContext } from '../components/canvas/context.ts';\n\nexport const useCanvasContext = () => {\n  const context = canvasContext.useInject();\n\n  if (!context) {\n    throw new Error('useCanvasContext must be used below a Canvas component');\n  }\n\n  return context;\n};\n"]}

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

@@ -0,0 +1,9 @@
+import type { RCXColorStop } from '../types.ts';
+export interface LinearGradientConfig {
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    stops: readonly RCXColorStop[];
+}
+export declare const useLinearGradient: ({ startX, startY, endX, endY, stops, }: LinearGradientConfig) => CanvasGradient;

package/hooks/use-linear-gradient.js

@@ -0,0 +1,13 @@
+import { renderingContext } from "../components/canvas/context.js";
+export const useLinearGradient = ({ startX, startY, endX, endY, stops, }) => {
+    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;
+};
+//# sourceMappingURL=use-linear-gradient.js.map

package/hooks/use-linear-gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-linear-gradient.js","sourceRoot":"","sources":["../../src/hooks/use-linear-gradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAWnE,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,KAAK,GACgB,EAAE,EAAE;IACzB,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC;IAE3D,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CACb,iEAAiE,CAClE,CAAC;IACJ,CAAC;IAED,MAAM,QAAQ,GAAG,qBAAqB,CAAC,KAAK,CAAC,oBAAoB,CAC/D,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,CACL,CAAC;IAEF,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;QAClC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC","sourcesContent":["import { renderingContext } from '../components/canvas/context.ts';\nimport type { RCXColorStop } from '../types.ts';\n\nexport interface LinearGradientConfig {\n  startX: number;\n  startY: number;\n  endX: number;\n  endY: number;\n  stops: readonly RCXColorStop[];\n}\n\nexport const useLinearGradient = ({\n  startX,\n  startY,\n  endX,\n  endY,\n  stops,\n}: LinearGradientConfig) => {\n  const renderingContextState = renderingContext.useInject();\n\n  if (!renderingContextState) {\n    throw new Error(\n      'useLinearGradient must be called inside the body of a component'\n    );\n  }\n\n  const gradient = renderingContextState.ctx2d.createLinearGradient(\n    startX,\n    startY,\n    endX,\n    endY\n  );\n\n  stops.forEach(({ offset, color }) => {\n    gradient.addColorStop(offset, color);\n  });\n\n  return gradient;\n};\n"]}

package/hooks/use-loop.d.ts

@@ -0,0 +1 @@
+export declare const useLoop: (callback: () => void) => void;

package/hooks/use-loop.js

@@ -0,0 +1,9 @@
+import { useUnreactive } from "./use-state.js";
+export const useLoop = (callback) => {
+    const unreactive = useUnreactive({ raf: null });
+    if (typeof unreactive.raf === 'number') {
+        window.cancelAnimationFrame(unreactive.raf);
+    }
+    unreactive.raf = window.requestAnimationFrame(callback);
+};
+//# sourceMappingURL=use-loop.js.map

package/hooks/use-loop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-loop.js","sourceRoot":"","sources":["../../src/hooks/use-loop.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,QAAoB,EAAE,EAAE;IAC9C,MAAM,UAAU,GAAG,aAAa,CAAyB,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IAExE,IAAI,OAAO,UAAU,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;QACvC,MAAM,CAAC,oBAAoB,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,UAAU,CAAC,GAAG,GAAG,MAAM,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AAC1D,CAAC,CAAC","sourcesContent":["import { useUnreactive } from './use-state.ts';\n\nexport const useLoop = (callback: () => void) => {\n  const unreactive = useUnreactive<{ raf: number | null }>({ raf: null });\n\n  if (typeof unreactive.raf === 'number') {\n    window.cancelAnimationFrame(unreactive.raf);\n  }\n\n  unreactive.raf = window.requestAnimationFrame(callback);\n};\n"]}

package/hooks/use-on.d.ts

@@ -0,0 +1,2 @@
+export declare const useOnMount: (callback: () => void | (() => void)) => void;
+export declare const useOnUnmount: (callback: () => void) => void;

package/hooks/use-on.js

@@ -0,0 +1,16 @@
+import { registerHook } from "../internal/hooks.js";
+export const useOnMount = (callback) => {
+    const hook = {
+        onMount: () => {
+            const onUnmount = callback();
+            if (onUnmount) {
+                hook.onUnmount = onUnmount;
+            }
+        },
+    };
+    registerHook('useOnMount', hook);
+};
+export const useOnUnmount = (callback) => {
+    registerHook('useOnUnmount', callback);
+};
+//# sourceMappingURL=use-on.js.map

package/hooks/use-on.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-on.js","sourceRoot":"","sources":["../../src/hooks/use-on.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,QAAmC,EAAE,EAAE;IAChE,MAAM,IAAI,GAAmB;QAC3B,OAAO,EAAE,GAAG,EAAE;YACZ,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC;YAC7B,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC7B,CAAC;QACH,CAAC;KACF,CAAC;IACF,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAoB,EAAE,EAAE;IACnD,YAAY,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACzC,CAAC,CAAC","sourcesContent":["import { registerHook } from '../internal/hooks.ts';\nimport type { RCXOnMountHook } from '../types.ts';\n\nexport const useOnMount = (callback: () => void | (() => void)) => {\n  const hook: RCXOnMountHook = {\n    onMount: () => {\n      const onUnmount = callback();\n      if (onUnmount) {\n        hook.onUnmount = onUnmount;\n      }\n    },\n  };\n  registerHook('useOnMount', hook);\n};\n\nexport const useOnUnmount = (callback: () => void) => {\n  registerHook('useOnUnmount', callback);\n};\n"]}

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

@@ -0,0 +1,11 @@
+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 declare const useRadialGradient: ({ startX, startY, startRadius, endX, endY, endRadius, stops, }: RadialGradientConfig) => CanvasGradient;

package/hooks/use-radial-gradient.js

@@ -0,0 +1,13 @@
+import { renderingContext } from "../components/canvas/context.js";
+export const useRadialGradient = ({ startX, startY, startRadius, endX, endY, endRadius, stops, }) => {
+    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;
+};
+//# sourceMappingURL=use-radial-gradient.js.map

package/hooks/use-radial-gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-radial-gradient.js","sourceRoot":"","sources":["../../src/hooks/use-radial-gradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAanE,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,MAAM,EACN,MAAM,EACN,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,KAAK,GACgB,EAAE,EAAE;IACzB,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC;IAE3D,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CACb,iEAAiE,CAClE,CAAC;IACJ,CAAC;IAED,MAAM,QAAQ,GAAG,qBAAqB,CAAC,KAAK,CAAC,oBAAoB,CAC/D,MAAM,EACN,MAAM,EACN,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,SAAS,CACV,CAAC;IAEF,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;QAClC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC","sourcesContent":["import { renderingContext } from '../components/canvas/context.ts';\nimport type { RCXColorStop } from '../types.ts';\n\nexport interface RadialGradientConfig {\n  startX: number;\n  startY: number;\n  startRadius: number;\n  endX: number;\n  endY: number;\n  endRadius: number;\n  stops: readonly RCXColorStop[];\n}\n\nexport const useRadialGradient = ({\n  startX,\n  startY,\n  startRadius,\n  endX,\n  endY,\n  endRadius,\n  stops,\n}: RadialGradientConfig) => {\n  const renderingContextState = renderingContext.useInject();\n\n  if (!renderingContextState) {\n    throw new Error(\n      'useRadialGradient must be called inside the body of a component'\n    );\n  }\n\n  const gradient = renderingContextState.ctx2d.createRadialGradient(\n    startX,\n    startY,\n    startRadius,\n    endX,\n    endY,\n    endRadius\n  );\n\n  stops.forEach(({ offset, color }) => {\n    gradient.addColorStop(offset, color);\n  });\n\n  return gradient;\n};\n"]}

package/hooks/use-render.d.ts

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

package/hooks/use-render.js

@@ -0,0 +1,8 @@
+import { registerHook } from "../internal/hooks.js";
+export const useRenderBeforeChildren = (callback) => {
+    registerHook('useRenderBeforeChildren', callback);
+};
+export const useRenderAfterChildren = (callback) => {
+    registerHook('useRenderAfterChildren', callback);
+};
+//# sourceMappingURL=use-render.js.map

package/hooks/use-render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-render.js","sourceRoot":"","sources":["../../src/hooks/use-render.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,QAAyD,EACzD,EAAE;IACF,YAAY,CAAC,yBAAyB,EAAE,QAAQ,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,QAAyD,EACzD,EAAE;IACF,YAAY,CAAC,wBAAwB,EAAE,QAAQ,CAAC,CAAC;AACnD,CAAC,CAAC","sourcesContent":["import { registerHook } from '../internal/hooks.ts';\nimport { RCXRenderingContext } from '../types.ts';\n\nexport const useRenderBeforeChildren = (\n  callback: (renderingContext: RCXRenderingContext) => void\n) => {\n  registerHook('useRenderBeforeChildren', callback);\n};\n\nexport const useRenderAfterChildren = (\n  callback: (renderingContext: RCXRenderingContext) => void\n) => {\n  registerHook('useRenderAfterChildren', callback);\n};\n"]}

package/hooks/use-state.d.ts

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

package/hooks/use-state.js

@@ -0,0 +1,5 @@
+import { registerHook } from "../internal/hooks.js";
+import { reactive } from "../internal/reactive.js";
+export const useReactive = (initialState) => registerHook('useReactive', reactive(initialState));
+export const useUnreactive = (initialState) => registerHook('useUnreactive', initialState);
+//# sourceMappingURL=use-state.js.map

package/hooks/use-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-state.js","sourceRoot":"","sources":["../../src/hooks/use-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGnD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAsB,YAAe,EAAE,EAAE,CAClE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAsB,YAAe,EAAE,EAAE,CACpE,YAAY,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import { registerHook } from '../internal/hooks.ts';\nimport { reactive } from '../internal/reactive.ts';\nimport type { AnyObject } from '../types.ts';\n\nexport const useReactive = <T extends AnyObject>(initialState: T) =>\n  registerHook('useReactive', reactive(initialState));\n\nexport const useUnreactive = <T extends AnyObject>(initialState: T) =>\n  registerHook('useUnreactive', initialState);\n"]}

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

@@ -0,0 +1,4 @@
+export declare const useWindowSize: () => {
+    width: number;
+    height: number;
+};

package/hooks/use-window-size.js

@@ -0,0 +1,20 @@
+import { useOnMount } from "./use-on.js";
+import { useReactive } from "./use-state.js";
+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;
+};
+//# sourceMappingURL=use-window-size.js.map

package/hooks/use-window-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-window-size.js","sourceRoot":"","sources":["../../src/hooks/use-window-size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,IAAI,GAAG,WAAW,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC,UAAU;QACxB,MAAM,EAAE,MAAM,CAAC,WAAW;KAC3B,CAAC,CAAC;IAEH,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC;QACnC,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAE5C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["import { useOnMount } from './use-on.ts';\nimport { useReactive } from './use-state.ts';\n\nexport const useWindowSize = () => {\n  const size = useReactive({\n    width: window.innerWidth,\n    height: window.innerHeight,\n  });\n\n  useOnMount(() => {\n    const onResize = () => {\n      size.width = window.innerWidth;\n      size.height = window.innerHeight;\n    };\n\n    window.addEventListener('resize', onResize);\n\n    return () => {\n      window.removeEventListener('resize', onResize);\n    };\n  });\n\n  return size;\n};\n"]}

package/index.js

@@ -0,0 +1,7 @@
+export * from "./types.js";
+export * from "./render.js";
+export * from "./hooks/index.js";
+export * from "./components/index.js";
+export * from "./context/index.js";
+export * from "./utils/index.js";
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './types.ts';\nexport * from './render.ts';\nexport * from './hooks/index.ts';\nexport * from './components/index.ts';\nexport * from './context/index.ts';\nexport * from './utils/index.ts';\n"]}

package/internal/emitter.d.ts

@@ -0,0 +1,15 @@
+import type { AnyFunction, AnyObject } from '../types.ts';
+type Handler<T extends AnyObject, K extends keyof T> = (data: T[K], event: K) => void;
+declare class Emitter<T extends AnyObject> {
+    private handlers;
+    on: <K extends keyof T>(event: K, handler: Handler<T, K>) => () => void;
+    off: <K extends keyof T>(event: K, handler: Handler<T, K>) => void;
+    emit: <K extends keyof T>(event: K, data: T[K]) => void;
+}
+export declare const emitter: Emitter<{
+    render: null;
+    registerState: any;
+    registerBeforeChildren: AnyFunction;
+    registerAfterChildren: AnyFunction;
+}>;
+export {};

package/internal/emitter.js

@@ -0,0 +1,19 @@
+class Emitter {
+    handlers = {};
+    on = (event, handler) => {
+        this.handlers[event] = this.handlers[event] || [];
+        this.handlers[event]?.push(handler);
+        return () => this.off(event, handler);
+    };
+    off = (event, handler) => {
+        const index = this.handlers[event]?.indexOf(handler);
+        if (typeof index === 'number' && index >= 0) {
+            this.handlers[event]?.splice(index, 1);
+        }
+    };
+    emit = (event, data) => {
+        this.handlers[event]?.forEach((handler) => handler(data, event));
+    };
+}
+export const emitter = new Emitter();
+//# sourceMappingURL=emitter.js.map

package/internal/emitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emitter.js","sourceRoot":"","sources":["../../src/internal/emitter.ts"],"names":[],"mappings":"AAOA,MAAM,OAAO;IACH,QAAQ,GAEZ,EAAE,CAAC;IAEA,EAAE,GAAG,CAAoB,KAAQ,EAAE,OAAsB,EAAE,EAAE;QAClE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAClD,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAEpC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACxC,CAAC,CAAC;IAEK,GAAG,GAAG,CAAoB,KAAQ,EAAE,OAAsB,EAAE,EAAE;QACnE,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QAErD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YAC5C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEK,IAAI,GAAG,CAAoB,KAAQ,EAAE,IAAU,EAAE,EAAE;QACxD,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACnE,CAAC,CAAC;CACH;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,OAAO,EAM9B,CAAC","sourcesContent":["import type { AnyFunction, AnyObject } from '../types.ts';\n\ntype Handler<T extends AnyObject, K extends keyof T> = (\n  data: T[K],\n  event: K\n) => void;\n\nclass Emitter<T extends AnyObject> {\n  private handlers: {\n    [K in keyof T]?: Handler<T, K>[];\n  } = {};\n\n  public on = <K extends keyof T>(event: K, handler: Handler<T, K>) => {\n    this.handlers[event] = this.handlers[event] || [];\n    this.handlers[event]?.push(handler);\n\n    return () => this.off(event, handler);\n  };\n\n  public off = <K extends keyof T>(event: K, handler: Handler<T, K>) => {\n    const index = this.handlers[event]?.indexOf(handler);\n\n    if (typeof index === 'number' && index >= 0) {\n      this.handlers[event]?.splice(index, 1);\n    }\n  };\n\n  public emit = <K extends keyof T>(event: K, data: T[K]) => {\n    this.handlers[event]?.forEach((handler) => handler(data, event));\n  };\n}\n\nexport const emitter = new Emitter<{\n  render: null;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  registerState: any;\n  registerBeforeChildren: AnyFunction;\n  registerAfterChildren: AnyFunction;\n}>();\n"]}

package/internal/global.d.ts

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

package/internal/global.js

@@ -0,0 +1,4 @@
+export const cxGlobal = {
+    hookIndex: 0,
+};
+//# sourceMappingURL=global.js.map

package/internal/global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global.js","sourceRoot":"","sources":["../../src/internal/global.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAc;IACjC,SAAS,EAAE,CAAC;CACb,CAAC","sourcesContent":["import type { RCXGlobal } from '../types.ts';\n\nexport const cxGlobal: RCXGlobal = {\n  hookIndex: 0,\n};\n"]}

package/internal/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { RCXHookMap } from '../types.ts';
+export declare const registerHook: <H extends keyof RCXHookMap, T extends RCXHookMap[H]>(hookType: H, value: T) => T;

package/internal/hooks.js

@@ -0,0 +1,17 @@
+import { cxGlobal } from "./global.js";
+export const registerHook = (hookType, value) => {
+    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 };
+    currentNode.hooks[hookIndex] = hook;
+    cxGlobal.hookIndex += 1;
+    return hook.value;
+};
+//# sourceMappingURL=hooks.js.map

package/internal/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/internal/hooks.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,CAAC,MAAM,YAAY,GAAG,CAI1B,QAAW,EACX,KAAQ,EACR,EAAE;IACF,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC;IAE5C,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACb,GAAG,QAAQ,gDAAgD,CAC5D,CAAC;IACJ,CAAC;IAED,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAE1C,IAAI,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QACrC,MAAM,IAAI,KAAK,CACb,GAAG,QAAQ,+DAA+D,CAC3E,CAAC;IACJ,CAAC;IAED,MAAM,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAChD,MAAM,IAAI,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAa,CAAC;IACjE,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,SAAS,IAAI,CAAC,CAAC;IACxB,OAAO,IAAI,CAAC,KAAU,CAAC;AACzB,CAAC,CAAC","sourcesContent":["import type { RCXHook, RCXHookMap } from '../types.ts';\nimport { cxGlobal } from './global.ts';\n\nexport const registerHook = <\n  H extends keyof RCXHookMap,\n  T extends RCXHookMap[H],\n>(\n  hookType: H,\n  value: T\n) => {\n  const { currentNode, hookIndex } = cxGlobal;\n\n  if (!currentNode) {\n    throw new Error(\n      `${hookType} must be called inside the body of a component`\n    );\n  }\n\n  const prev = currentNode.hooks[hookIndex];\n\n  if (!!prev && prev.type !== hookType) {\n    throw new Error(\n      `${hookType} was called at a different time (conditionally, or in a loop)`\n    );\n  }\n\n  const originalValue = prev ? prev.value : value;\n  const hook = { type: hookType, value: originalValue } as RCXHook;\n  currentNode.hooks[hookIndex] = hook;\n  cxGlobal.hookIndex += 1;\n  return hook.value as T;\n};\n"]}

package/internal/reactive.d.ts

@@ -0,0 +1,2 @@
+import type { AnyObject } from '../types.ts';
+export declare const reactive: <T extends AnyObject>(initialState: T) => T;

package/internal/reactive.js

@@ -0,0 +1,16 @@
+import { emitter } from "./emitter.js";
+export const reactive = (initialState) => 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;
+    },
+});
+//# sourceMappingURL=reactive.js.map

package/internal/reactive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactive.js","sourceRoot":"","sources":["../../src/internal/reactive.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAsB,YAAe,EAAE,EAAE,CAC/D,IAAI,KAAK,CAAC,YAAY,EAAE;IACtB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK;QACpB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QAChC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IACD,GAAG,CAAC,MAAM,EAAE,GAAG;QACb,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAEvC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC;YACzC,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;CACF,CAAC,CAAC","sourcesContent":["import type { AnyObject } from '../types.ts';\nimport { emitter } from './emitter.ts';\n\nexport const reactive = <T extends AnyObject>(initialState: T) =>\n  new Proxy(initialState, {\n    set(target, key, value) {\n      Reflect.set(target, key, value);\n      emitter.emit('render', null);\n      return true;\n    },\n    get(target, key) {\n      const value = Reflect.get(target, key);\n\n      if (typeof value === 'object' && !!value) {\n        return reactive(value);\n      }\n\n      return value;\n    },\n  });\n"]}

package/jsx-runtime.d.ts

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

package/jsx-runtime.js

@@ -0,0 +1,8 @@
+export const jsx = (type, props) => ({
+    type,
+    props,
+});
+export const jsxs = jsx;
+export const Fragment = ({ children }) => children;
+Fragment.displayName = 'Fragment';
+//# sourceMappingURL=jsx-runtime.js.map

package/jsx-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,GAAG,GAAG,CACjB,IAAO,EACP,KAAQ,EACU,EAAE,CAAC,CAAC;IACtB,IAAI;IACJ,KAAK;CACN,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAmC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACvE,QAAQ,CAAC;AAEX,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import type {\n  AnyObject,\n  RCXComponent,\n  RCXElement,\n  RCXFragmentProps,\n} from './types.ts';\n\nexport const jsx = <C extends RCXComponent<P>, P extends AnyObject>(\n  type: C,\n  props: P\n): RCXElement<C, P> => ({\n  type,\n  props,\n});\n\nexport const jsxs = jsx;\n\nexport const Fragment: RCXComponent<RCXFragmentProps> = ({ children }) =>\n  children;\n\nFragment.displayName = 'Fragment';\n"]}

package/package.json

@@ -1,48 +1,36 @@
 {
   "name": "@blinkorb/rcx",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Reactive JSX-based library for creating HTML5 canvas applications",
   "publishConfig": {
     "access": "public"
   },
   "type": "module",
-  "main": "./src/index.ts",
+  "main": "./index.js",
   "exports": {
     ".": {
-      "import": "./src/index.ts"
+      "import": "./index.js"
     },
     "./canvas": {
-      "import": "./src/components/canvas/index.ts"
+      "import": "./components/canvas/index.js"
     },
     "./components": {
-      "import": "./src/components/index.ts"
+      "import": "./components/index.js"
     },
     "./context": {
-      "import": "./src/context/index.ts"
+      "import": "./context/index.js"
     },
     "./hooks": {
-      "import": "./src/hooks/index.ts"
+      "import": "./hooks/index.js"
     },
     "./utils": {
-      "import": "./src/utils/index.ts"
+      "import": "./utils/index.js"
     },
     "./jsx-runtime": {
-      "import": "./src/jsx-runtime.ts"
+      "import": "./jsx-runtime.js"
     }
   },
-  "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"
-  },
+  "scripts": {},
   "repository": {
     "type": "git",
     "url": "git+https://github.com/blinkorb/rcx.git"
@@ -77,4 +65,4 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.7.3"
   }
-}
+}

package/render.d.ts

@@ -0,0 +1,4 @@
+import type { RCXElementAny } from './types.ts';
+export declare const render: (element: RCXElementAny, container: HTMLElement) => (() => void) | {
+    error: string;
+};