cx 26.4.0 → 26.4.1

package/src/widgets/HighlightedSearchText.tsx

@@ -1,54 +1,54 @@
-/** @jsxImportSource react */
-import { Instance } from "../ui/Instance";
-import type { RenderingContext } from "../ui/RenderingContext";
-import { Widget, WidgetConfig } from "../ui/Widget";
-import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
-import { StringProp, Prop } from "../ui/Prop";
-
-export interface HighlightedSearchTextConfig extends WidgetConfig {
-   /** Search query used to highlight matching text. */
-   query?: StringProp;
-
-   /** Text content to be searched and highlighted. */
-   text?: StringProp;
-
-   /** Pre-computed text chunks where odd-indexed chunks are highlighted. */
-   chunks?: Prop<string[]>;
-}
-
-export class HighlightedSearchText extends Widget<HighlightedSearchTextConfig> {
-   constructor(config?: HighlightedSearchTextConfig) {
-      super(config);
-   }
-
-   declareData(...args: Record<string, unknown>[]) {
-      super.declareData(...args, {
-         text: undefined,
-         chunks: undefined,
-         query: undefined,
-      });
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
-      let { data } = instance;
-      let { text, chunks, query, classNames, style } = data;
-
-      if (!chunks && text && query) {
-         let highlighter = getSearchQueryHighlighter(query, { cache: true });
-         chunks = highlighter(text);
-      }
-
-      if (!chunks) return text;
-      return chunks.map((text: string, i: number) => {
-         if (i % 2 == 0) return text;
-         return (
-            <span key={`${key}-${i}`} className={classNames} style={style}>
-               {text}
-            </span>
-         );
-      });
-   }
-}
-
-HighlightedSearchText.prototype.styled = true;
-HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";
+/** @jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import type { RenderingContext } from "../ui/RenderingContext";
+import { Widget, WidgetConfig } from "../ui/Widget";
+import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
+import { StringProp, Prop } from "../ui/Prop";
+
+export interface HighlightedSearchTextConfig extends WidgetConfig {
+   /** Search query used to highlight matching text. */
+   query?: StringProp;
+
+   /** Text content to be searched and highlighted. */
+   text?: StringProp;
+
+   /** Pre-computed text chunks where odd-indexed chunks are highlighted. */
+   chunks?: Prop<string[]>;
+}
+
+export class HighlightedSearchText extends Widget<HighlightedSearchTextConfig> {
+   constructor(config?: HighlightedSearchTextConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]) {
+      super.declareData(...args, {
+         text: undefined,
+         chunks: undefined,
+         query: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { data } = instance;
+      let { text, chunks, query, classNames, style } = data;
+
+      if (!chunks && text && query) {
+         let highlighter = getSearchQueryHighlighter(query, { cache: true });
+         chunks = highlighter(text);
+      }
+
+      if (!chunks) return text;
+      return chunks.map((text: string, i: number) => {
+         if (i % 2 == 0) return text;
+         return (
+            <span key={`${key}-${i}`} className={classNames} style={style}>
+               {text}
+            </span>
+         );
+      });
+   }
+}
+
+HighlightedSearchText.prototype.styled = true;
+HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";

package/src/widgets/HtmlElement.spec.helpers.tsx

@@ -1,108 +1,108 @@
-/** @jsxImportSource react */
-import React from "react";
-
-// Function component
-export function ReactFunctionComponent(props: { title: string; children?: React.ReactNode }) {
-   return (
-      <div className="react-function-component">
-         <h3>{props.title}</h3>
-         <div className="content">{props.children}</div>
-      </div>
-   );
-}
-
-// Function component with hooks
-export function ReactCounterComponent(props: { initialCount?: number }) {
-   const [count, setCount] = React.useState(props.initialCount ?? 0);
-   return (
-      <div className="react-counter">
-         <span className="count">{count}</span>
-         <button onClick={() => setCount(count + 1)}>Increment</button>
-      </div>
-   );
-}
-
-// Class component
-export class ReactClassComponent extends React.Component<
-   { label: string; children?: React.ReactNode },
-   { active: boolean }
-> {
-   constructor(props: { label: string; children?: React.ReactNode }) {
-      super(props);
-      this.state = { active: false };
-   }
-
-   render() {
-      return (
-         <div className={`react-class-component ${this.state.active ? "active" : ""}`}>
-            <label>{this.props.label}</label>
-            <div className="body">{this.props.children}</div>
-         </div>
-      );
-   }
-}
-
-// Pure component
-export class ReactPureComponent extends React.PureComponent<{ value: string }> {
-   render() {
-      return <span className="react-pure-component">{this.props.value}</span>;
-   }
-}
-
-// Function component with useRef and useEffect
-export function ReactRefEffectComponent(props: { onMount?: (element: HTMLDivElement | null) => void }) {
-   const divRef = React.useRef<HTMLDivElement>(null);
-   const mountedRef = React.useRef(false);
-
-   React.useEffect(() => {
-      mountedRef.current = true;
-      props.onMount?.(divRef.current);
-      return () => {
-         mountedRef.current = false;
-      };
-   }, []);
-
-   return (
-      <div ref={divRef} className="react-ref-effect-component" data-mounted={mountedRef.current ? "true" : "false"}>
-         Component with ref and effect
-      </div>
-   );
-}
-
-// Function component with useEffect that updates state
-export function ReactEffectStateComponent(props: { value: string }) {
-   const [processed, setProcessed] = React.useState<string>("");
-   const renderCountRef = React.useRef(0);
-
-   React.useEffect(() => {
-      setProcessed(`Processed: ${props.value}`);
-   }, [props.value]);
-
-   renderCountRef.current += 1;
-
-   return (
-      <div className="react-effect-state-component">
-         <span className="processed">{processed}</span>
-         <span className="render-count">{renderCountRef.current}</span>
-      </div>
-   );
-}
-
-// Component for testing prop translation
-export function ReactPropsComponent(props: {
-   text: string;
-   count: number;
-   enabled: boolean;
-   tags?: string[];
-   onClick?: () => void;
-}) {
-   return (
-      <div className="react-props-component">
-         <span className="text">{props.text}</span>
-         <span className="count">{props.count}</span>
-         <span className="enabled">{props.enabled ? "yes" : "no"}</span>
-         {props.tags && <span className="tags">{props.tags.join(", ")}</span>}
-         {props.onClick && <button onClick={props.onClick}>Click</button>}
-      </div>
-   );
-}
+/** @jsxImportSource react */
+import React from "react";
+
+// Function component
+export function ReactFunctionComponent(props: { title: string; children?: React.ReactNode }) {
+   return (
+      <div className="react-function-component">
+         <h3>{props.title}</h3>
+         <div className="content">{props.children}</div>
+      </div>
+   );
+}
+
+// Function component with hooks
+export function ReactCounterComponent(props: { initialCount?: number }) {
+   const [count, setCount] = React.useState(props.initialCount ?? 0);
+   return (
+      <div className="react-counter">
+         <span className="count">{count}</span>
+         <button onClick={() => setCount(count + 1)}>Increment</button>
+      </div>
+   );
+}
+
+// Class component
+export class ReactClassComponent extends React.Component<
+   { label: string; children?: React.ReactNode },
+   { active: boolean }
+> {
+   constructor(props: { label: string; children?: React.ReactNode }) {
+      super(props);
+      this.state = { active: false };
+   }
+
+   render() {
+      return (
+         <div className={`react-class-component ${this.state.active ? "active" : ""}`}>
+            <label>{this.props.label}</label>
+            <div className="body">{this.props.children}</div>
+         </div>
+      );
+   }
+}
+
+// Pure component
+export class ReactPureComponent extends React.PureComponent<{ value: string }> {
+   render() {
+      return <span className="react-pure-component">{this.props.value}</span>;
+   }
+}
+
+// Function component with useRef and useEffect
+export function ReactRefEffectComponent(props: { onMount?: (element: HTMLDivElement | null) => void }) {
+   const divRef = React.useRef<HTMLDivElement>(null);
+   const mountedRef = React.useRef(false);
+
+   React.useEffect(() => {
+      mountedRef.current = true;
+      props.onMount?.(divRef.current);
+      return () => {
+         mountedRef.current = false;
+      };
+   }, []);
+
+   return (
+      <div ref={divRef} className="react-ref-effect-component" data-mounted={mountedRef.current ? "true" : "false"}>
+         Component with ref and effect
+      </div>
+   );
+}
+
+// Function component with useEffect that updates state
+export function ReactEffectStateComponent(props: { value: string }) {
+   const [processed, setProcessed] = React.useState<string>("");
+   const renderCountRef = React.useRef(0);
+
+   React.useEffect(() => {
+      setProcessed(`Processed: ${props.value}`);
+   }, [props.value]);
+
+   renderCountRef.current += 1;
+
+   return (
+      <div className="react-effect-state-component">
+         <span className="processed">{processed}</span>
+         <span className="render-count">{renderCountRef.current}</span>
+      </div>
+   );
+}
+
+// Component for testing prop translation
+export function ReactPropsComponent(props: {
+   text: string;
+   count: number;
+   enabled: boolean;
+   tags?: string[];
+   onClick?: () => void;
+}) {
+   return (
+      <div className="react-props-component">
+         <span className="text">{props.text}</span>
+         <span className="count">{props.count}</span>
+         <span className="enabled">{props.enabled ? "yes" : "no"}</span>
+         {props.tags && <span className="tags">{props.tags.join(", ")}</span>}
+         {props.onClick && <button onClick={props.onClick}>Click</button>}
+      </div>
+   );
+}

package/src/widgets/HtmlElement.spec.tsx

@@ -1,117 +1,117 @@
-import { Store } from "../data/Store";
-import assert from "assert";
-import { createTestRenderer } from "../util/test/createTestRenderer";
-import { bind } from "../ui/bind";
-import { VDOM } from "../ui/Widget";
-import { Instance } from "../ui/Instance";
-
-describe("HtmlElement", () => {
-  it("renders textual content provided through the text property", async () => {
-    let widget = (
-      <cx>
-        <div text={bind("text")} />
-      </cx>
-    );
-
-    let store = new Store({
-      data: {
-        text: "Test",
-      },
-    });
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-    assert(tree && !Array.isArray(tree), "Expected single element");
-    assert.equal(tree.type, "div");
-    assert.deepEqual(tree.children, ["Test"]);
-  });
-
-  it("allows spread bindings", async () => {
-    let store = new Store({
-      data: {
-        title: "title",
-      },
-    });
-
-    const component = await createTestRenderer(
-      store,
-      <cx>
-        <a href="#" {...{ title: { bind: "title" } }}>
-          Link
-        </a>
-      </cx>,
-    );
-
-    let tree = component.toJSON();
-    assert(tree && !Array.isArray(tree), "Expected single element");
-    assert.deepEqual(tree, {
-      type: "a",
-      children: ["Link"],
-      props: {
-        href: "#",
-        title: "title",
-      },
-    });
-  });
-
-  it("supports SVG elements with camelCase attributes", async () => {
-    let store = new Store();
-
-    const component = await createTestRenderer(
-      store,
-      <cx>
-        <svg>
-          <path
-            d="M200,176V64a23.9,23.9,0,0,0-24-24H40"
-            fill="none"
-            stroke="#343434"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="12"
-          />
-        </svg>
-      </cx>,
-    );
-
-    let tree = component.toJSON();
-    assert(tree && !Array.isArray(tree), "Expected single element");
-    assert.equal(tree.type, "svg");
-    assert(tree.children && tree.children.length === 1, "Expected one child");
-    let path = tree.children[0] as any;
-    assert.equal(path.type, "path");
-    assert.equal(path.props.d, "M200,176V64a23.9,23.9,0,0,0-24-24H40");
-    assert.equal(path.props.fill, "none");
-    assert.equal(path.props.stroke, "#343434");
-    assert.equal(path.props.strokeLinecap, "round");
-    assert.equal(path.props.strokeLinejoin, "round");
-    assert.equal(path.props.strokeWidth, "12");
-  });
-
-  it("infers event handler parameter types", async () => {
-    let clickedWith: {
-      event: React.MouseEvent<HTMLButtonElement>;
-      instance: Instance;
-    } | null = null;
-
-    let store = new Store();
-
-    const component = await createTestRenderer(
-      store,
-      <cx>
-        <button
-          onClick={(e, instance) => {
-            // TypeScript should infer e as React.MouseEvent<HTMLButtonElement> and instance as Instance
-            clickedWith = { event: e, instance };
-          }}
-        >
-          Click me
-        </button>
-      </cx>,
-    );
-
-    let tree = component.toJSON();
-    assert(tree && !Array.isArray(tree), "Expected single element");
-    assert.equal(tree.type, "button");
-  });
-});
+import { Store } from "../data/Store";
+import assert from "assert";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { bind } from "../ui/bind";
+import { VDOM } from "../ui/Widget";
+import { Instance } from "../ui/Instance";
+
+describe("HtmlElement", () => {
+  it("renders textual content provided through the text property", async () => {
+    let widget = (
+      <cx>
+        <div text={bind("text")} />
+      </cx>
+    );
+
+    let store = new Store({
+      data: {
+        text: "Test",
+      },
+    });
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+    assert(tree && !Array.isArray(tree), "Expected single element");
+    assert.equal(tree.type, "div");
+    assert.deepEqual(tree.children, ["Test"]);
+  });
+
+  it("allows spread bindings", async () => {
+    let store = new Store({
+      data: {
+        title: "title",
+      },
+    });
+
+    const component = await createTestRenderer(
+      store,
+      <cx>
+        <a href="#" {...{ title: { bind: "title" } }}>
+          Link
+        </a>
+      </cx>,
+    );
+
+    let tree = component.toJSON();
+    assert(tree && !Array.isArray(tree), "Expected single element");
+    assert.deepEqual(tree, {
+      type: "a",
+      children: ["Link"],
+      props: {
+        href: "#",
+        title: "title",
+      },
+    });
+  });
+
+  it("supports SVG elements with camelCase attributes", async () => {
+    let store = new Store();
+
+    const component = await createTestRenderer(
+      store,
+      <cx>
+        <svg>
+          <path
+            d="M200,176V64a23.9,23.9,0,0,0-24-24H40"
+            fill="none"
+            stroke="#343434"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="12"
+          />
+        </svg>
+      </cx>,
+    );
+
+    let tree = component.toJSON();
+    assert(tree && !Array.isArray(tree), "Expected single element");
+    assert.equal(tree.type, "svg");
+    assert(tree.children && tree.children.length === 1, "Expected one child");
+    let path = tree.children[0] as any;
+    assert.equal(path.type, "path");
+    assert.equal(path.props.d, "M200,176V64a23.9,23.9,0,0,0-24-24H40");
+    assert.equal(path.props.fill, "none");
+    assert.equal(path.props.stroke, "#343434");
+    assert.equal(path.props.strokeLinecap, "round");
+    assert.equal(path.props.strokeLinejoin, "round");
+    assert.equal(path.props.strokeWidth, "12");
+  });
+
+  it("infers event handler parameter types", async () => {
+    let clickedWith: {
+      event: React.MouseEvent<HTMLButtonElement>;
+      instance: Instance;
+    } | null = null;
+
+    let store = new Store();
+
+    const component = await createTestRenderer(
+      store,
+      <cx>
+        <button
+          onClick={(e, instance) => {
+            // TypeScript should infer e as React.MouseEvent<HTMLButtonElement> and instance as Instance
+            clickedWith = { event: e, instance };
+          }}
+        >
+          Click me
+        </button>
+      </cx>,
+    );
+
+    let tree = component.toJSON();
+    assert(tree && !Array.isArray(tree), "Expected single element");
+    assert.equal(tree.type, "button");
+  });
+});