paintcannon-react 0.0.41 → 0.0.43

package/README.md

@@ -88,6 +88,7 @@ DOM API:
 
 - `Div`
 - `Span`
+- `A`
 - `Input`
 - `Textarea`
 - `Button`
@@ -112,6 +113,15 @@ app.paintCannon.addEventListener("blur", () => {
 
 Inside tmux, terminal focus reporting requires `set -g focus-events on`.
 
+Font capabilities are available through `app.paintCannon.font`. Use
+`hasNerdFontSet(set)` or `hasSymbolsForLegacyComputing()` for initial support,
+then subscribe with `font.addEventListener("nerdfont-powerline-change", listener)`
+or `"symbols-for-legacy-computing-change"` to update React state from
+`event.supported`. Remove the listener in your effect's cleanup. Rust refreshes
+support every two seconds, requires support in every attached tmux terminal
+client, and repaints chunky borders automatically. See [font detection in
+PaintCannon](../paintcannon/README.md#nerd-font-detection) for all sets and limits.
+
 ### Common props:
 
 All host components accept:
@@ -227,6 +237,7 @@ both supported:
 
 - `Div`: shared props, plus `scrollLeft?: number` and `scrollTop?: number`.
 - `Span`: shared props, plus `scrollLeft?: number` and `scrollTop?: number`.
+- `A`: shared props, `scrollLeft?: number`, `scrollTop?: number`, and `href?: string`.
 - `Form`: shared props, plus `scrollLeft?: number` and `scrollTop?: number`.
 - `Button`: shared props, plus `type?: "submit" | "button"`,
   `scrollLeft?: number`, and `scrollTop?: number`.

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

@@ -0,0 +1,8 @@
+import type { AnchorElement } from "paintcannon";
+import type { CommonProps, HostComponent, Scrollable } from "../shared.ts";
+export type Props = CommonProps & Partial<Scrollable> & {
+    href?: string;
+};
+export type Element = AnchorElement;
+export declare const type: "paintcannon.a";
+export declare const Component: HostComponent<Props, Element>;

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

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

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

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

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

@@ -0,0 +1,13 @@
+import * as a from "./a.js";
+import { applyScrollableElementProps } from "../reconcile-shared.js";
+export function create(paintCannon, props, applyCommonProps) {
+    const node = paintCannon.createElement("a");
+    applyProps(node, {}, props, applyCommonProps);
+    return { kind: "element", type: a.type, props, children: new Set(), node };
+}
+export function applyProps(node, oldProps, newProps, applyCommonProps) {
+    applyScrollableElementProps(node, oldProps, newProps, applyCommonProps);
+    if (oldProps.href !== newProps.href) {
+        node.href = newProps.href ?? "";
+    }
+}

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

@@ -12,3 +12,5 @@ export * as reconcileSpan from "./span/reconcile-span.ts";
 export * as reconcileTextarea from "./textarea/reconcile-textarea.ts";
 export * as span from "./span/span.ts";
 export * as textarea from "./textarea/textarea.ts";
+export * as a from "./a/a.ts";
+export * as reconcileA from "./a/reconcile-a.ts";

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

@@ -12,3 +12,5 @@ export * as reconcileSpan from "./span/reconcile-span.js";
 export * as reconcileTextarea from "./textarea/reconcile-textarea.js";
 export * as span from "./span/span.js";
 export * as textarea from "./textarea/textarea.js";
+export * as a from "./a/a.js";
+export * as reconcileA from "./a/reconcile-a.js";

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

@@ -1,4 +1,5 @@
 import type { PaintElement, TextNode } from "paintcannon";
+import * as a from "./a/a.ts";
 import * as button from "./button/button.ts";
 import * as div from "./div/div.ts";
 import * as form from "./form/form.ts";
@@ -6,7 +7,7 @@ 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 HostProps = a.Props | 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;
@@ -19,7 +20,7 @@ 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 HostElement = MountedComponent<typeof a> | 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;
@@ -31,6 +32,7 @@ export type HostParent = {
     children: Set<HostNode>;
 };
 declare const hostPropsForType: {
+    "paintcannon.a": a.Props;
     "paintcannon.div": div.Props;
     "paintcannon.span": span.Props;
     "paintcannon.form": form.Props;

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

@@ -1,3 +1,4 @@
+import * as a from "./a/a.js";
 import * as button from "./button/button.js";
 import * as div from "./div/div.js";
 import * as form from "./form/form.js";
@@ -5,6 +6,7 @@ import * as input from "./input/input.js";
 import * as span from "./span/span.js";
 import * as textarea from "./textarea/textarea.js";
 const hostPropsForType = {
+    [a.type]: undefined,
     [div.type]: undefined,
     [span.type]: undefined,
     [form.type]: undefined,

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

@@ -5,4 +5,4 @@ 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;
+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

@@ -10,7 +10,7 @@ export function applyScrollableProps(node, props) {
         node.scrollTop = props.scrollTop;
     }
 }
-export function applyTextControlProps(node, oldProps, newProps) {
+export function applyTextControlProps(node, _oldProps, newProps) {
     if (newProps.value !== undefined) {
         node.value = newProps.value;
     }
@@ -20,7 +20,4 @@ export function applyTextControlProps(node, oldProps, newProps) {
     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

@@ -31,11 +31,11 @@ type ElementEventProps = {
 export type CommonProps = ElementEventProps & {
     children?: React.ReactNode;
     style?: CSSStyleProperties;
+    autoFocus?: boolean;
 };
 export type TextControlProps = CommonProps & {
     value?: string;
     placeholder?: string;
     cursorPosition?: number;
-    autoFocus?: boolean;
 };
 export {};

package/dist/src/index.d.ts

@@ -19,3 +19,6 @@ export declare const Input: hostComponents.HostComponent<hostComponents.input.Pr
 export type TextareaProps = hostComponents.textarea.Props;
 export type TextareaElement = hostComponents.textarea.Element;
 export declare const Textarea: hostComponents.HostComponent<hostComponents.textarea.Props, import("paintcannon").TextAreaElement>;
+export type AProps = hostComponents.a.Props;
+export type AnchorElement = hostComponents.a.Element;
+export declare const A: hostComponents.HostComponent<hostComponents.a.Props, import("paintcannon").AnchorElement>;

package/dist/src/index.js

@@ -7,3 +7,4 @@ export const Form = hostComponents.form.Component;
 export const Button = hostComponents.button.Component;
 export const Input = hostComponents.input.Component;
 export const Textarea = hostComponents.textarea.Component;
+export const A = hostComponents.a.Component;

package/dist/src/reconciler.js

@@ -70,7 +70,10 @@ const reconciler = createReconciler({
         removeVirtualChild(container, child);
         destroyHostNode(child);
     },
-    finalizeInitialChildren: () => false,
+    finalizeInitialChildren: (_instance, _type, props) => props.autoFocus === true,
+    commitMount(instance) {
+        instance.node.focus();
+    },
     resetTextContent: () => { },
     getPublicInstance(instance) {
         return instance.node;
@@ -229,6 +232,9 @@ function createHostElement(paintCannon, type, props) {
     if (type === hostComponents.div.type) {
         return hostComponents.reconcileDiv.create(paintCannon, hostComponents.castHostProps(type, props), applyCommonProps);
     }
+    if (type === hostComponents.a.type) {
+        return hostComponents.reconcileA.create(paintCannon, hostComponents.castHostProps(type, props), applyCommonProps);
+    }
     if (type === hostComponents.span.type) {
         return hostComponents.reconcileSpan.create(paintCannon, hostComponents.castHostProps(type, props), applyCommonProps);
     }
@@ -268,6 +274,11 @@ function applyHostElementProps(host, newProps) {
         hostComponents.reconcileDiv.applyProps(host.node, host.props, props, applyCommonProps);
         return props;
     }
+    if (host.type === hostComponents.a.type) {
+        const props = hostComponents.castHostProps(host.type, newProps);
+        hostComponents.reconcileA.applyProps(host.node, host.props, props, applyCommonProps);
+        return props;
+    }
     if (host.type === hostComponents.span.type) {
         const props = hostComponents.castHostProps(host.type, newProps);
         hostComponents.reconcileSpan.applyProps(host.node, host.props, props, applyCommonProps);
@@ -359,7 +370,7 @@ function reactEventListener(listener) {
     return wrapped;
 }
 function defaultDisplay(type) {
-    return type === hostComponents.span.type ? "inline" : "block";
+    return type === hostComponents.span.type || type === hostComponents.a.type ? "inline" : "block";
 }
 function reportReactError(error) {
     if (error !== null && error !== undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paintcannon-react",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -23,6 +23,7 @@
     "build": "tsc",
     "demo": "npm run build && node dist/examples/counter.js",
     "demo:controlled": "npm run build && node dist/examples/controlled.js",
+    "demo:emoji-width": "npm run build && node dist/examples/emoji-width.js",
     "demo:form": "npm run build && node dist/examples/form.js",
     "demo:keyboard": "npm run build && node dist/examples/keyboard.js",
     "demo:lifecycle": "npm run build && node dist/examples/lifecycle.js",
@@ -36,7 +37,7 @@
     "scheduler": "^0.25.0"
   },
   "peerDependencies": {
-    "paintcannon": "^0.0.41",
+    "paintcannon": "^0.0.43",
     "react": "^19.0.0"
   },
   "devDependencies": {