paintcannon-react 0.0.1

package/dist/src/host-components/mounted.d.ts

@@ -0,0 +1,38 @@
+import type { PaintElement, TextNode } from "paintcannon";
+import * as button from "./button/button.ts";
+import * as div from "./div/div.ts";
+import * as form from "./form/form.ts";
+import * as input from "./input/input.ts";
+import * as span from "./span/span.ts";
+import * as textarea from "./textarea/textarea.ts";
+import type { HostComponent, HostType } from "./shared.ts";
+export type HostProps = div.Props | span.Props | form.Props | button.Props | input.Props | textarea.Props;
+export type MountedHostElement<Type extends HostType, Props, Element extends PaintElement> = {
+    kind: "element";
+    type: Type;
+    props: Props;
+    children: HostNode[];
+    node: Element;
+};
+export type MountedComponent<Module> = Module extends {
+    type: infer Type extends HostType;
+    Component: HostComponent<infer Props, infer Element extends PaintElement>;
+} ? MountedHostElement<Type, Props, Element> : never;
+export type HostElement = MountedComponent<typeof div> | MountedComponent<typeof span> | MountedComponent<typeof form> | MountedComponent<typeof button> | MountedComponent<typeof input> | MountedComponent<typeof textarea>;
+export type HostText = {
+    kind: "text";
+    text: string;
+    node: TextNode;
+};
+export type HostNode = HostElement | HostText;
+declare const hostPropsForType: {
+    "paintcannon.div": div.Props;
+    "paintcannon.span": span.Props;
+    "paintcannon.form": form.Props;
+    "paintcannon.button": button.Props;
+    "paintcannon.input": input.Props;
+    "paintcannon.textarea": textarea.Props;
+};
+export type HostPropsForType = typeof hostPropsForType;
+export declare function castHostProps<Type extends HostType>(_type: Type, props: HostProps): HostPropsForType[Type];
+export {};

package/dist/src/host-components/mounted.js

@@ -0,0 +1,17 @@
+import * as button from "./button/button.js";
+import * as div from "./div/div.js";
+import * as form from "./form/form.js";
+import * as input from "./input/input.js";
+import * as span from "./span/span.js";
+import * as textarea from "./textarea/textarea.js";
+const hostPropsForType = {
+    [div.type]: undefined,
+    [span.type]: undefined,
+    [form.type]: undefined,
+    [button.type]: undefined,
+    [input.type]: undefined,
+    [textarea.type]: undefined,
+};
+export function castHostProps(_type, props) {
+    return props;
+}

package/dist/src/host-components/reconcile-shared.d.ts

@@ -0,0 +1,8 @@
+import type { InputElement, PaintElement, TextAreaElement } from "paintcannon";
+import type * as input from "./input/input.ts";
+import type * as textarea from "./textarea/textarea.ts";
+import type { CommonProps, Scrollable } from "./shared.ts";
+export type ApplyCommonProps = (node: PaintElement, oldProps: Partial<CommonProps>, newProps: CommonProps) => void;
+export declare function applyScrollableElementProps<Props extends CommonProps & Partial<Scrollable>>(node: PaintElement & Scrollable, oldProps: Partial<Props>, newProps: Props, applyCommonProps: ApplyCommonProps): void;
+export declare function applyScrollableProps(node: Scrollable, props: Partial<Scrollable>): void;
+export declare function applyTextControlProps<T extends InputElement | TextAreaElement>(node: T, oldProps: Partial<input.Props | textarea.Props>, newProps: input.Props | textarea.Props): void;

package/dist/src/host-components/reconcile-shared.js

@@ -0,0 +1,26 @@
+export function applyScrollableElementProps(node, oldProps, newProps, applyCommonProps) {
+    applyCommonProps(node, oldProps, newProps);
+    applyScrollableProps(node, newProps);
+}
+export function applyScrollableProps(node, props) {
+    if (props.scrollLeft !== undefined) {
+        node.scrollLeft = props.scrollLeft;
+    }
+    if (props.scrollTop !== undefined) {
+        node.scrollTop = props.scrollTop;
+    }
+}
+export function applyTextControlProps(node, oldProps, newProps) {
+    if (newProps.value !== undefined) {
+        node.value = newProps.value;
+    }
+    if (newProps.placeholder !== undefined) {
+        node.placeholder = newProps.placeholder;
+    }
+    if (newProps.cursorPosition !== undefined) {
+        node.cursorPosition = newProps.cursorPosition;
+    }
+    if (newProps.autoFocus === true && oldProps.autoFocus !== true) {
+        node.focus();
+    }
+}

package/dist/src/host-components/shared.d.ts

@@ -0,0 +1,40 @@
+import type React from "react";
+import type { CSSStyleProperties, ElementEventListenerFor, ElementEventType, PaintElement, PaintElementTagName } from "paintcannon";
+export type HostTagName = Exclude<PaintElementTagName, "img">;
+export type HostType = `paintcannon.${HostTagName}`;
+export declare function typeString<Type extends HostType>(type: Type): Type;
+export type Scrollable = {
+    scrollLeft: number;
+    scrollTop: number;
+};
+export type HostComponent<Props, Element extends PaintElement> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Element>>;
+export declare const EVENT_PROP_NAMES: {
+    readonly keydown: "onKeyDown";
+    readonly keyup: "onKeyUp";
+    readonly click: "onClick";
+    readonly mouseenter: "onMouseEnter";
+    readonly mouseleave: "onMouseLeave";
+    readonly mousemove: "onMouseMove";
+    readonly focus: "onFocus";
+    readonly blur: "onBlur";
+    readonly submit: "onSubmit";
+    readonly change: "onChange";
+    readonly transitionstart: "onTransitionStart";
+    readonly transitionend: "onTransitionEnd";
+    readonly scroll: "onScroll";
+};
+export type EventPropName<T extends ElementEventType = ElementEventType> = (typeof EVENT_PROP_NAMES)[T];
+type ElementEventProps = {
+    [T in ElementEventType as EventPropName<T>]?: ElementEventListenerFor<T>;
+};
+export type CommonProps = ElementEventProps & {
+    children?: React.ReactNode;
+    style?: CSSStyleProperties;
+};
+export type TextControlProps = CommonProps & {
+    value?: string;
+    placeholder?: string;
+    cursorPosition?: number;
+    autoFocus?: boolean;
+};
+export {};

package/dist/src/host-components/shared.js

@@ -0,0 +1,18 @@
+export function typeString(type) {
+    return type;
+}
+export const EVENT_PROP_NAMES = {
+    keydown: "onKeyDown",
+    keyup: "onKeyUp",
+    click: "onClick",
+    mouseenter: "onMouseEnter",
+    mouseleave: "onMouseLeave",
+    mousemove: "onMouseMove",
+    focus: "onFocus",
+    blur: "onBlur",
+    submit: "onSubmit",
+    change: "onChange",
+    transitionstart: "onTransitionStart",
+    transitionend: "onTransitionEnd",
+    scroll: "onScroll",
+};

package/dist/src/host-components/span/reconcile-span.d.ts

@@ -0,0 +1,6 @@
+import type { PaintCannon } from "paintcannon";
+import * as span from "./span.ts";
+import type { MountedComponent } from "../mounted.ts";
+import { type ApplyCommonProps } from "../reconcile-shared.ts";
+export declare function create(paintCannon: PaintCannon, props: span.Props, applyCommonProps: ApplyCommonProps): MountedComponent<typeof span>;
+export declare function applyProps(node: span.Element, oldProps: Partial<span.Props>, newProps: span.Props, applyCommonProps: ApplyCommonProps): void;

package/dist/src/host-components/span/reconcile-span.js

@@ -0,0 +1,10 @@
+import * as span from "./span.js";
+import { applyScrollableElementProps } from "../reconcile-shared.js";
+export function create(paintCannon, props, applyCommonProps) {
+    const node = paintCannon.createElement("span");
+    applyProps(node, {}, props, applyCommonProps);
+    return { kind: "element", type: span.type, props, children: [], node };
+}
+export function applyProps(node, oldProps, newProps, applyCommonProps) {
+    applyScrollableElementProps(node, oldProps, newProps, applyCommonProps);
+}

package/dist/src/host-components/span/span.d.ts

@@ -0,0 +1,6 @@
+import type { SpanElement as PaintSpanElement } from "paintcannon";
+import type { CommonProps, HostComponent, Scrollable } from "../shared.ts";
+export type Props = CommonProps & Partial<Scrollable>;
+export type Element = PaintSpanElement;
+export declare const type: "paintcannon.span";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/span/span.js

@@ -0,0 +1,3 @@
+import { typeString } from "../shared.js";
+export const type = typeString("paintcannon.span");
+export const Component = type;

package/dist/src/host-components/span.d.ts

@@ -0,0 +1,6 @@
+import type { SpanElement as PaintSpanElement } from 'paintcannon';
+import type { CommonProps, HostComponent, Scrollable } from './shared.ts';
+export type Props = CommonProps & Partial<Scrollable>;
+export type Element = PaintSpanElement;
+export declare const type: "paintcannon.span";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/span.js

@@ -0,0 +1,3 @@
+import { typeString } from "./shared.js";
+export const type = typeString('paintcannon.span');
+export const Component = type;

package/dist/src/host-components/textarea/reconcile-textarea.d.ts

@@ -0,0 +1,6 @@
+import type { PaintCannon } from "paintcannon";
+import * as textarea from "./textarea.ts";
+import type { MountedComponent } from "../mounted.ts";
+import { type ApplyCommonProps } from "../reconcile-shared.ts";
+export declare function create(paintCannon: PaintCannon, props: textarea.Props, applyCommonProps: ApplyCommonProps): MountedComponent<typeof textarea>;
+export declare function applyProps(node: textarea.Element, oldProps: Partial<textarea.Props>, newProps: textarea.Props, applyCommonProps: ApplyCommonProps): void;

package/dist/src/host-components/textarea/reconcile-textarea.js

@@ -0,0 +1,12 @@
+import * as textarea from "./textarea.js";
+import { applyScrollableProps, applyTextControlProps, } from "../reconcile-shared.js";
+export function create(paintCannon, props, applyCommonProps) {
+    const node = paintCannon.createElement("textarea");
+    applyProps(node, {}, props, applyCommonProps);
+    return { kind: "element", type: textarea.type, props, children: [], node };
+}
+export function applyProps(node, oldProps, newProps, applyCommonProps) {
+    applyCommonProps(node, oldProps, newProps);
+    applyTextControlProps(node, oldProps, newProps);
+    applyScrollableProps(node, newProps);
+}

package/dist/src/host-components/textarea/textarea.d.ts

@@ -0,0 +1,8 @@
+import type { TextAreaElement as PaintTextAreaElement } from "paintcannon";
+import type { HostComponent, Scrollable, TextControlProps } from "../shared.ts";
+export type Props = TextControlProps & Partial<Scrollable> & {
+    type?: never;
+};
+export type Element = PaintTextAreaElement;
+export declare const type: "paintcannon.textarea";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/textarea/textarea.js

@@ -0,0 +1,3 @@
+import { typeString } from "../shared.js";
+export const type = typeString("paintcannon.textarea");
+export const Component = type;

package/dist/src/host-components/textarea.d.ts

@@ -0,0 +1,8 @@
+import type { TextAreaElement as PaintTextAreaElement } from 'paintcannon';
+import type { HostComponent, Scrollable, TextControlProps } from './shared.ts';
+export type Props = TextControlProps & Partial<Scrollable> & {
+    type?: never;
+};
+export type Element = PaintTextAreaElement;
+export declare const type: "paintcannon.textarea";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/textarea.js

@@ -0,0 +1,3 @@
+import { typeString } from "./shared.js";
+export const type = typeString('paintcannon.textarea');
+export const Component = type;

package/dist/src/index.d.ts

@@ -0,0 +1,21 @@
+import * as hostComponents from "./host-components/index.ts";
+export { useAnimation, useApp, type AnimationOptions, type AnimationResult, type PaintCannonReactApp, } from "./hooks/index.ts";
+export { createRoot, render, type CreateRootOptions, type PaintCannonReactRoot, } from "./reconciler.ts";
+export type DivProps = hostComponents.div.Props;
+export type DivElement = hostComponents.div.Element;
+export declare const Div: hostComponents.HostComponent<hostComponents.div.Props, import("paintcannon").DivElement>;
+export type SpanProps = hostComponents.span.Props;
+export type SpanElement = hostComponents.span.Element;
+export declare const Span: hostComponents.HostComponent<hostComponents.span.Props, import("paintcannon").SpanElement>;
+export type FormProps = hostComponents.form.Props;
+export type FormElement = hostComponents.form.Element;
+export declare const Form: hostComponents.HostComponent<hostComponents.form.Props, import("paintcannon").FormElement>;
+export type ButtonProps = hostComponents.button.Props;
+export type ButtonElement = hostComponents.button.Element;
+export declare const Button: hostComponents.HostComponent<hostComponents.button.Props, import("paintcannon").ButtonElement>;
+export type InputProps = hostComponents.input.Props;
+export type InputElement = hostComponents.input.Element;
+export declare const Input: hostComponents.HostComponent<hostComponents.input.Props, import("paintcannon").InputElement>;
+export type TextareaProps = hostComponents.textarea.Props;
+export type TextareaElement = hostComponents.textarea.Element;
+export declare const Textarea: hostComponents.HostComponent<hostComponents.textarea.Props, import("paintcannon").TextAreaElement>;

package/dist/src/index.js

@@ -0,0 +1,9 @@
+import * as hostComponents from "./host-components/index.js";
+export { useAnimation, useApp, } from "./hooks/index.js";
+export { createRoot, render, } from "./reconciler.js";
+export const Div = hostComponents.div.Component;
+export const Span = hostComponents.span.Component;
+export const Form = hostComponents.form.Component;
+export const Button = hostComponents.button.Component;
+export const Input = hostComponents.input.Component;
+export const Textarea = hostComponents.textarea.Component;

package/dist/src/reconciler.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { DivElement as PaintDivElement, FormElement as PaintFormElement, PaintCannonOptions, SpanElement as PaintSpanElement } from "paintcannon";
+import { PaintCannon } from "paintcannon";
+export type CreateRootOptions = PaintCannonOptions & {
+    paintCannon?: PaintCannon;
+    container?: PaintDivElement | PaintSpanElement | PaintFormElement;
+};
+export type PaintCannonReactRoot = {
+    readonly paintCannon: PaintCannon;
+    readonly container: PaintDivElement | PaintSpanElement | PaintFormElement;
+    render(element: React.ReactNode): void;
+    unmount(): void;
+    exit(errorOrResult?: unknown): void;
+    waitUntilExit(): Promise<unknown>;
+};
+export declare function createRoot(options?: CreateRootOptions): PaintCannonReactRoot;
+export declare function render(element: React.ReactNode, options?: CreateRootOptions): PaintCannonReactRoot;