@baseline-ui/blocks - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

dist/index.d.ts

@@ -1,5 +0,5 @@
-import { B as Block, C as Child } from './Block-5hlkvI8i.js';
+import { B as Block, C as Child } from './Block-NQajTT3d.js';
 import React from 'react';
 
-type BlockJSX<T extends Record<any, any> = {}> = (props: T) => Block;
+type BlockJSX<T = object> = (props: T) => Block;
 
@@ -17,6 +17,6 @@ type Any = any;
  */
-declare function createBlock<const T extends keyof React.ReactHTML>(component: T, props: Omit<React.ComponentPropsWithRef<T>, "children"> & BlockId, ...children: Child[]): Block<T>;
-declare function createBlock<T extends React.ForwardRefExoticComponent<any>>(component: T, props: Omit<React.ComponentPropsWithRef<T>, "children"> & BlockId, ...children: Child[]): Block<T>;
-declare function createBlock<T extends (...args: Any[]) => Any>(component: T, props: Omit<Parameters<T>[0], "children"> & BlockId, ...children: Child[]): Block<T>;
+declare function createBlock<const T extends keyof React.ReactHTML>(component: T, props?: Omit<React.ComponentPropsWithRef<T>, "children"> & BlockId, ...children: Child[]): Block<T>;
+declare function createBlock<T extends React.ForwardRefExoticComponent<any>>(component: T, props?: Omit<React.ComponentPropsWithRef<T>, "children"> & BlockId, ...children: Child[]): Block<T>;
+declare function createBlock<T extends (...args: Any[]) => Any>(component: T, props?: Omit<Parameters<T>[0], "children"> & BlockId, ...children: Child[]): Block<T>;
 
 export { Block, type BlockJSX, createBlock };

dist/index.js

@@ -58,3 +58,2 @@ "use strict";
   constructor(component, props, options = {}) {
-    const id = props[blockIdKey];
     if (options?.container) {
@@ -71,3 +70,3 @@ this.#container = options.container;
     this.#props = _props;
-    this.id = id;
+    this.id = props[blockIdKey] || `__@Block@__${crypto.getRandomValues(new Uint32Array(1))[0].toString(16)}`;
     this.children = _children || [];
@@ -78,2 +77,11 @@ }
   }
+  /**
+   * This getter returns the props of the block.
+   *
+   * ```tsx
+   * const block = new Block("div", { className: "test" });
+   *
+   * block.props; // { className: "test" }
+   * ```
+   */
   get props() {
@@ -87,8 +95,7 @@ return this.#props;
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test" });
+   * ```tsx
+   * const block = new Block("div", { className: "test" });
    *
-   *   block.props = { className: "test2" };
-   *   ```;
+   * block.props = { className: "test2" };
+   * ```
    *
@@ -104,3 +111,3 @@ * @param props
     this.#props = props;
-    this.id = this.#props[blockIdKey];
+    this.id = this.#props[blockIdKey] || this.id;
   }
@@ -111,10 +118,9 @@ /**
    *
-   * @example
-   *   ```ts
-   *   const App = () => {
-   *    const block = new Block("div", { className: "test" });
-   *    return block.createComponent();
-   *    // <div className="test" />
-   *   }
-   *   ```;
+   * ```ts
+   * const App = () => {
+   *   const block = new Block("div", { className: "test" });
+   *   return block.createComponent();
+   *   // <div className="test" />
+   * };
+   * ```
    *
@@ -142,9 +148,8 @@ * @param key The key to use for the component.
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test" });
+   * ```ts
+   * const block = new Block("div", { className: "test" });
    *
-   *   block.children = ["test"];
-   *   block.children; // ["test"]
-   *   ```;
+   * block.children = ["test"];
+   * block.children; // ["test"]
+   * ```
    */
@@ -158,9 +163,8 @@ get children() {
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test" });
+   * ```ts
+   * const block = new Block("div", { className: "test" });
    *
-   *   block.children = ["test"];
-   *   block.children; // ["test"]
-   *   ```;
+   * block.children = ["test"];
+   * block.children; // ["test"]
+   * ```
    *
@@ -183,17 +187,17 @@ * @param children The new children to use.
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [
-   *    child1,
-   *    child2,
-   *   ]});
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [
+   *  child1,
+   *  child2,
+   * ]});
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
-   *   block.prependChildren(child3);
-   *   block.children; // [child3, child1, child2]
-   *   ```;
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * block.prependChildren(child3);
+   * block.children; // [child3, child1, child2]
+   * ```
    *
-   * @param children
+   * @param children The children to prepend.
+   * @returns The Block instance.
    */
@@ -209,18 +213,18 @@ prependChildren(...children) {
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [
-   *    child1,
-   *    child2,
-   *   ]});
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [
+   *  child1,
+   *  child2,
+   * ]});
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
    *
-   *   block.appendChildren(child3);
-   *   block.children; // [child1, child2, child3]
-   *   ```;
+   * block.appendChildren(child3);
+   * block.children; // [child1, child2, child3]
+   * ```
    *
    * @param children
+   * @returns The Block instance.
    */
@@ -238,16 +242,15 @@ appendChildren(...children) {
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
    *
-   *   const block = new Block("div", { className: "test", children: [
-   *    child1,
-   *    child2,
-   *   ]});
+   * const block = new Block("div", { className: "test", children: [
+   *  child1,
+   *  child2,
+   * ]});
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
-   *   block.insertAfter(child2.id, child3);
-   *   block.children; // [child1, child2, child3]
-   *   ```;
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * block.insertAfter(child2.id, child3);
+   * block.children; // [child1, child2, child3]
+   * ```
    *
@@ -257,2 +260,3 @@ * @param block The id of the child block or the block to insert the children
    * @param children The children to insert.
+   * @returns The Block instance.
    */
@@ -262,3 +266,3 @@ insertBefore(block, ...children) {
     (0, import_utils.invariant)(id, "The block must have an id.");
-    const child = this.findById(id);
+    const child = this.getBlockById(id);
     if (child instanceof _Block) {
@@ -273,2 +277,3 @@ const parent = child.parent;
     }
+    return this;
   }
@@ -281,16 +286,16 @@ /**
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [child1, child2] });
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [child1, child2] });
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
    *
-   *   block.insertAfter(child1.id, child3);
-   *   block.children; // [child1, child3, child2]
-   *   ```;
+   * block.insertAfter(child1.id, child3);
+   * block.children; // [child1, child3, child2]
+   * ```
    *
    * @param block
    * @param children The children to insert.
+   * @returns The Block instance.
    */
@@ -300,3 +305,3 @@ insertAfter(block, ...children) {
     (0, import_utils.invariant)(id, "The block must have an id.");
-    const child = this.findById(id);
+    const child = this.getBlockById(id);
     if (child instanceof _Block) {
@@ -311,7 +316,29 @@ const parent = child.parent;
     }
+    return this;
   }
+  /**
+   * This method will search the entire tree of children and then replaces the
+   * child with the given id with the new children. This method will replace the
+   * first child with the given id. If the child is not found, the children will
+   * not be inserted.
+   *
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [child1, child2] });
+   *
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   *
+   * block.replace(child1.id, child3);
+   * block.children; // [child3, child2]
+   * ```
+   *
+   * @param block The id of the child block or the block to replace.
+   * @param children The children to insert.
+   * @returns The Block instance.
+   */
   replace(block, ...children) {
     const id = typeof block === "string" ? block : block.id;
     (0, import_utils.invariant)(id, "The block must have an id.");
-    const child = this.findById(id);
+    const child = this.getBlockById(id);
     if (child instanceof _Block) {
@@ -326,2 +353,3 @@ const parent = child.parent;
     }
+    return this;
   }
@@ -332,14 +360,20 @@ /**
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [child1, child2] });
+   * ```ts
+   * const child1 = new Block("div", {
+   *   className: "test1",
+   *   "data-blockid": "test1",
+   * });
+   * const child2 = new Block("div", {
+   *   className: "test2",
+   *   "data-blockid": "test2",
+   * });
+   * const block = new Block("div", { className: "test" }, child1, child2);
    *
-   *   block.findById(child2.id); // child2
-   *   ```;
+   * block.getBlockById(child2.id); // child2
+   * ```
    *
    * @param id The id of the child to find.
+   * @returns The child block or undefined.
    */
-  findById(id) {
+  getBlockById(id) {
     const child = this.#getChild(id);
@@ -351,3 +385,3 @@ if (child instanceof _Block) {
       if (child2 instanceof _Block) {
-        const result = child2.findById(id);
+        const result = child2.getBlockById(id);
         if (result) {
@@ -359,2 +393,49 @@ return result;
   }
+  /**
+   * Finds the blocks by the component. This method will search the entire tree
+   * of children. If the child is not found, undefined is returned.
+   *
+   * ```ts
+   * const child1 = new Block("div", {
+   *   className: "test1",
+   *   "data-blockid": "test1",
+   * });
+   * const child2 = new Block("div", {
+   *   className: "test2",
+   *   "data-blockid": "test2",
+   * });
+   * const slider = new Block(Slider, {
+   *   className: "test",
+   *   "data-blockid": "test",
+   * });
+   *
+   * const block = new Block(
+   *   "div",
+   *   { className: "test" },
+   *   child1,
+   *   child2,
+   *   slider,
+   * );
+   *
+   * block.getBlocksByComponent(Slider); // [slider]
+   * ```
+   *
+   * @param component
+   * @returns An array of blocks.
+   */
+  getBlocksByComponent(component) {
+    const blocks = [];
+    if (this.#component === component) {
+      blocks.push(this);
+    }
+    for (const child of this.#children) {
+      if (child instanceof _Block) {
+        const result = child.getBlocksByComponent(component);
+        if (result) {
+          blocks.push(...result);
+        }
+      }
+    }
+    return blocks;
+  }
   #getChild(id) {
@@ -377,12 +458,11 @@ return id instanceof _Block ? this.#children.find((child) => child instanceof _Block && child === id) : this.#children.find(
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
    *
-   *   const block = new Block("div", { className: "test", children: [child1, child2] });
+   * const block = new Block("div", { className: "test", children: [child1, child2] });
    *
-   *   block.removeChildById(child2.id);
-   *   block.children; // [child1]
-   *   ```;
+   * block.removeChildById(child2.id);
+   * block.children; // [child1]
+   * ```
    *
@@ -403,5 +483,5 @@ * @param id
    */
-  createDOMNode() {
+  createDOMNode(container) {
     const element = this.createComponent();
-    import_react_dom.default.render(element, this.#container);
+    import_react_dom.default.render(element, container || this.#container);
     return this.#container;
@@ -412,9 +492,8 @@ }
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test", id: "testid" });
+   * ```ts
+   * const block = new Block("div", { className: "test", id: "testid" });
    *
-   *   block.mergeProps({ className: "test2" });
-   *   block.props; // { className: "test2", id: "testid" }
-   *   ```;
+   * block.mergeProps({ className: "test2" });
+   * block.props; // { className: "test2", id: "testid" }
+   * ```
    *
@@ -426,3 +505,3 @@ * @param props The new props to use.
     this.#props = { ...this.#props, ...props };
-    this.id = this.#props[blockIdKey];
+    this.id = this.#props[blockIdKey] || this.id;
     return this;
@@ -434,16 +513,16 @@ }
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test", id: "testid" });
+   * ```ts
+   * const block = new Block("div", { className: "test", id: "testid" });
    *
-   *   block.setProp("className", "test2");
-   *   block.props; // { className: "test2", id: "testid" }
-   *   ```;
+   * block.setProp("className", "test2");
+   * block.props; // { className: "test2", id: "testid" }
+   * ```
    *
    * @param key
    * @param value
+   * @returns The Block instance.
    */
   setProp(key, value) {
     this.#props = { ...this.#props, [key]: value };
-    this.id = this.#props[blockIdKey];
+    this.id = this.#props[blockIdKey] || this.id;
     return this;
@@ -469,3 +548,3 @@ }
 // src/createBlock.ts
-function createBlock(component, props, ...children) {
+function createBlock(component, props = {}, ...children) {
   return new Block(component, { ...props, children });
@@ -472,0 +551,0 @@ }

dist/jsx-dev-runtime/index.d.ts

@@ -1,3 +0,3 @@
-export { jsx, jsx as jsxDEV, jsxs } from '../jsx-runtime/index.js';
-import '../Block-5hlkvI8i.js';
+export { Fragment, jsx, jsx as jsxDEV, jsxs } from '../jsx-runtime/index.js';
 import 'react';
+import '../Block-NQajTT3d.js';

dist/jsx-dev-runtime/index.js

@@ -33,2 +33,3 @@ "use strict";
 __export(jsx_dev_runtime_exports, {
+  Fragment: () => Fragment,
   jsx: () => jsx2,
@@ -40,2 +41,5 @@ jsxDEV: () => jsx2,
 
+// src/jsx-runtime.ts
+var import_react = __toESM(require("react"));
+
 // src/Block.tsx
@@ -62,3 +66,2 @@ var import_utils = require("@baseline-ui/utils");
   constructor(component, props, options = {}) {
-    const id = props[blockIdKey];
     if (options?.container) {
@@ -75,3 +78,3 @@ this.#container = options.container;
     this.#props = _props;
-    this.id = id;
+    this.id = props[blockIdKey] || `__@Block@__${crypto.getRandomValues(new Uint32Array(1))[0].toString(16)}`;
     this.children = _children || [];
@@ -82,2 +85,11 @@ }
   }
+  /**
+   * This getter returns the props of the block.
+   *
+   * ```tsx
+   * const block = new Block("div", { className: "test" });
+   *
+   * block.props; // { className: "test" }
+   * ```
+   */
   get props() {
@@ -91,8 +103,7 @@ return this.#props;
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test" });
+   * ```tsx
+   * const block = new Block("div", { className: "test" });
    *
-   *   block.props = { className: "test2" };
-   *   ```;
+   * block.props = { className: "test2" };
+   * ```
    *
@@ -108,3 +119,3 @@ * @param props
     this.#props = props;
-    this.id = this.#props[blockIdKey];
+    this.id = this.#props[blockIdKey] || this.id;
   }
@@ -115,10 +126,9 @@ /**
    *
-   * @example
-   *   ```ts
-   *   const App = () => {
-   *    const block = new Block("div", { className: "test" });
-   *    return block.createComponent();
-   *    // <div className="test" />
-   *   }
-   *   ```;
+   * ```ts
+   * const App = () => {
+   *   const block = new Block("div", { className: "test" });
+   *   return block.createComponent();
+   *   // <div className="test" />
+   * };
+   * ```
    *
@@ -146,9 +156,8 @@ * @param key The key to use for the component.
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test" });
+   * ```ts
+   * const block = new Block("div", { className: "test" });
    *
-   *   block.children = ["test"];
-   *   block.children; // ["test"]
-   *   ```;
+   * block.children = ["test"];
+   * block.children; // ["test"]
+   * ```
    */
@@ -162,9 +171,8 @@ get children() {
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test" });
+   * ```ts
+   * const block = new Block("div", { className: "test" });
    *
-   *   block.children = ["test"];
-   *   block.children; // ["test"]
-   *   ```;
+   * block.children = ["test"];
+   * block.children; // ["test"]
+   * ```
    *
@@ -187,17 +195,17 @@ * @param children The new children to use.
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [
-   *    child1,
-   *    child2,
-   *   ]});
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [
+   *  child1,
+   *  child2,
+   * ]});
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
-   *   block.prependChildren(child3);
-   *   block.children; // [child3, child1, child2]
-   *   ```;
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * block.prependChildren(child3);
+   * block.children; // [child3, child1, child2]
+   * ```
    *
-   * @param children
+   * @param children The children to prepend.
+   * @returns The Block instance.
    */
@@ -213,18 +221,18 @@ prependChildren(...children) {
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [
-   *    child1,
-   *    child2,
-   *   ]});
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [
+   *  child1,
+   *  child2,
+   * ]});
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
    *
-   *   block.appendChildren(child3);
-   *   block.children; // [child1, child2, child3]
-   *   ```;
+   * block.appendChildren(child3);
+   * block.children; // [child1, child2, child3]
+   * ```
    *
    * @param children
+   * @returns The Block instance.
    */
@@ -242,16 +250,15 @@ appendChildren(...children) {
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
    *
-   *   const block = new Block("div", { className: "test", children: [
-   *    child1,
-   *    child2,
-   *   ]});
+   * const block = new Block("div", { className: "test", children: [
+   *  child1,
+   *  child2,
+   * ]});
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
-   *   block.insertAfter(child2.id, child3);
-   *   block.children; // [child1, child2, child3]
-   *   ```;
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * block.insertAfter(child2.id, child3);
+   * block.children; // [child1, child2, child3]
+   * ```
    *
@@ -261,2 +268,3 @@ * @param block The id of the child block or the block to insert the children
    * @param children The children to insert.
+   * @returns The Block instance.
    */
@@ -266,3 +274,3 @@ insertBefore(block, ...children) {
     (0, import_utils.invariant)(id, "The block must have an id.");
-    const child = this.findById(id);
+    const child = this.getBlockById(id);
     if (child instanceof _Block) {
@@ -277,2 +285,3 @@ const parent = child.parent;
     }
+    return this;
   }
@@ -285,16 +294,16 @@ /**
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [child1, child2] });
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [child1, child2] });
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
    *
-   *   block.insertAfter(child1.id, child3);
-   *   block.children; // [child1, child3, child2]
-   *   ```;
+   * block.insertAfter(child1.id, child3);
+   * block.children; // [child1, child3, child2]
+   * ```
    *
    * @param block
    * @param children The children to insert.
+   * @returns The Block instance.
    */
@@ -304,3 +313,3 @@ insertAfter(block, ...children) {
     (0, import_utils.invariant)(id, "The block must have an id.");
-    const child = this.findById(id);
+    const child = this.getBlockById(id);
     if (child instanceof _Block) {
@@ -315,7 +324,29 @@ const parent = child.parent;
     }
+    return this;
   }
+  /**
+   * This method will search the entire tree of children and then replaces the
+   * child with the given id with the new children. This method will replace the
+   * first child with the given id. If the child is not found, the children will
+   * not be inserted.
+   *
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [child1, child2] });
+   *
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   *
+   * block.replace(child1.id, child3);
+   * block.children; // [child3, child2]
+   * ```
+   *
+   * @param block The id of the child block or the block to replace.
+   * @param children The children to insert.
+   * @returns The Block instance.
+   */
   replace(block, ...children) {
     const id = typeof block === "string" ? block : block.id;
     (0, import_utils.invariant)(id, "The block must have an id.");
-    const child = this.findById(id);
+    const child = this.getBlockById(id);
     if (child instanceof _Block) {
@@ -330,2 +361,3 @@ const parent = child.parent;
     }
+    return this;
   }
@@ -336,14 +368,20 @@ /**
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [child1, child2] });
+   * ```ts
+   * const child1 = new Block("div", {
+   *   className: "test1",
+   *   "data-blockid": "test1",
+   * });
+   * const child2 = new Block("div", {
+   *   className: "test2",
+   *   "data-blockid": "test2",
+   * });
+   * const block = new Block("div", { className: "test" }, child1, child2);
    *
-   *   block.findById(child2.id); // child2
-   *   ```;
+   * block.getBlockById(child2.id); // child2
+   * ```
    *
    * @param id The id of the child to find.
+   * @returns The child block or undefined.
    */
-  findById(id) {
+  getBlockById(id) {
     const child = this.#getChild(id);
@@ -355,3 +393,3 @@ if (child instanceof _Block) {
       if (child2 instanceof _Block) {
-        const result = child2.findById(id);
+        const result = child2.getBlockById(id);
         if (result) {
@@ -363,2 +401,49 @@ return result;
   }
+  /**
+   * Finds the blocks by the component. This method will search the entire tree
+   * of children. If the child is not found, undefined is returned.
+   *
+   * ```ts
+   * const child1 = new Block("div", {
+   *   className: "test1",
+   *   "data-blockid": "test1",
+   * });
+   * const child2 = new Block("div", {
+   *   className: "test2",
+   *   "data-blockid": "test2",
+   * });
+   * const slider = new Block(Slider, {
+   *   className: "test",
+   *   "data-blockid": "test",
+   * });
+   *
+   * const block = new Block(
+   *   "div",
+   *   { className: "test" },
+   *   child1,
+   *   child2,
+   *   slider,
+   * );
+   *
+   * block.getBlocksByComponent(Slider); // [slider]
+   * ```
+   *
+   * @param component
+   * @returns An array of blocks.
+   */
+  getBlocksByComponent(component) {
+    const blocks = [];
+    if (this.#component === component) {
+      blocks.push(this);
+    }
+    for (const child of this.#children) {
+      if (child instanceof _Block) {
+        const result = child.getBlocksByComponent(component);
+        if (result) {
+          blocks.push(...result);
+        }
+      }
+    }
+    return blocks;
+  }
   #getChild(id) {
@@ -381,12 +466,11 @@ return id instanceof _Block ? this.#children.find((child) => child instanceof _Block && child === id) : this.#children.find(
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
    *
-   *   const block = new Block("div", { className: "test", children: [child1, child2] });
+   * const block = new Block("div", { className: "test", children: [child1, child2] });
    *
-   *   block.removeChildById(child2.id);
-   *   block.children; // [child1]
-   *   ```;
+   * block.removeChildById(child2.id);
+   * block.children; // [child1]
+   * ```
    *
@@ -407,5 +491,5 @@ * @param id
    */
-  createDOMNode() {
+  createDOMNode(container) {
     const element = this.createComponent();
-    import_react_dom.default.render(element, this.#container);
+    import_react_dom.default.render(element, container || this.#container);
     return this.#container;
@@ -416,9 +500,8 @@ }
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test", id: "testid" });
+   * ```ts
+   * const block = new Block("div", { className: "test", id: "testid" });
    *
-   *   block.mergeProps({ className: "test2" });
-   *   block.props; // { className: "test2", id: "testid" }
-   *   ```;
+   * block.mergeProps({ className: "test2" });
+   * block.props; // { className: "test2", id: "testid" }
+   * ```
    *
@@ -430,3 +513,3 @@ * @param props The new props to use.
     this.#props = { ...this.#props, ...props };
-    this.id = this.#props[blockIdKey];
+    this.id = this.#props[blockIdKey] || this.id;
     return this;
@@ -438,16 +521,16 @@ }
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test", id: "testid" });
+   * ```ts
+   * const block = new Block("div", { className: "test", id: "testid" });
    *
-   *   block.setProp("className", "test2");
-   *   block.props; // { className: "test2", id: "testid" }
-   *   ```;
+   * block.setProp("className", "test2");
+   * block.props; // { className: "test2", id: "testid" }
+   * ```
    *
    * @param key
    * @param value
+   * @returns The Block instance.
    */
   setProp(key, value) {
     this.#props = { ...this.#props, [key]: value };
-    this.id = this.#props[blockIdKey];
+    this.id = this.#props[blockIdKey] || this.id;
     return this;
@@ -473,3 +556,3 @@ }
 // src/createBlock.ts
-function createBlock(component, props, ...children) {
+function createBlock(component, props = {}, ...children) {
   return new Block(component, { ...props, children });
@@ -488,4 +571,6 @@ }
 var jsxs = jsx2;
+var Fragment = import_react.default.Fragment;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Fragment,
   jsx,
@@ -492,0 +577,0 @@ jsxDEV,

dist/jsx-runtime/index.d.ts

@@ -1,3 +0,3 @@
-import { B as Block } from '../Block-5hlkvI8i.js';
 import React from 'react';
+import { B as Block } from '../Block-NQajTT3d.js';
 
@@ -9,3 +9,6 @@ type Child = Block | string | number;
 declare const jsxs: typeof jsx;
+declare const Fragment: React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
 
-export { jsx, jsxs };
+export { Fragment, jsx, jsxs };

dist/jsx-runtime/index.js

@@ -33,2 +33,3 @@ "use strict";
 __export(jsx_runtime_exports, {
+  Fragment: () => Fragment,
   jsx: () => jsx2,
@@ -38,2 +39,3 @@ jsxs: () => jsxs
 module.exports = __toCommonJS(jsx_runtime_exports);
+var import_react = __toESM(require("react"));
 
@@ -61,3 +63,2 @@ // src/Block.tsx
   constructor(component, props, options = {}) {
-    const id = props[blockIdKey];
     if (options?.container) {
@@ -74,3 +75,3 @@ this.#container = options.container;
     this.#props = _props;
-    this.id = id;
+    this.id = props[blockIdKey] || `__@Block@__${crypto.getRandomValues(new Uint32Array(1))[0].toString(16)}`;
     this.children = _children || [];
@@ -81,2 +82,11 @@ }
   }
+  /**
+   * This getter returns the props of the block.
+   *
+   * ```tsx
+   * const block = new Block("div", { className: "test" });
+   *
+   * block.props; // { className: "test" }
+   * ```
+   */
   get props() {
@@ -90,8 +100,7 @@ return this.#props;
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test" });
+   * ```tsx
+   * const block = new Block("div", { className: "test" });
    *
-   *   block.props = { className: "test2" };
-   *   ```;
+   * block.props = { className: "test2" };
+   * ```
    *
@@ -107,3 +116,3 @@ * @param props
     this.#props = props;
-    this.id = this.#props[blockIdKey];
+    this.id = this.#props[blockIdKey] || this.id;
   }
@@ -114,10 +123,9 @@ /**
    *
-   * @example
-   *   ```ts
-   *   const App = () => {
-   *    const block = new Block("div", { className: "test" });
-   *    return block.createComponent();
-   *    // <div className="test" />
-   *   }
-   *   ```;
+   * ```ts
+   * const App = () => {
+   *   const block = new Block("div", { className: "test" });
+   *   return block.createComponent();
+   *   // <div className="test" />
+   * };
+   * ```
    *
@@ -145,9 +153,8 @@ * @param key The key to use for the component.
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test" });
+   * ```ts
+   * const block = new Block("div", { className: "test" });
    *
-   *   block.children = ["test"];
-   *   block.children; // ["test"]
-   *   ```;
+   * block.children = ["test"];
+   * block.children; // ["test"]
+   * ```
    */
@@ -161,9 +168,8 @@ get children() {
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test" });
+   * ```ts
+   * const block = new Block("div", { className: "test" });
    *
-   *   block.children = ["test"];
-   *   block.children; // ["test"]
-   *   ```;
+   * block.children = ["test"];
+   * block.children; // ["test"]
+   * ```
    *
@@ -186,17 +192,17 @@ * @param children The new children to use.
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [
-   *    child1,
-   *    child2,
-   *   ]});
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [
+   *  child1,
+   *  child2,
+   * ]});
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
-   *   block.prependChildren(child3);
-   *   block.children; // [child3, child1, child2]
-   *   ```;
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * block.prependChildren(child3);
+   * block.children; // [child3, child1, child2]
+   * ```
    *
-   * @param children
+   * @param children The children to prepend.
+   * @returns The Block instance.
    */
@@ -212,18 +218,18 @@ prependChildren(...children) {
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [
-   *    child1,
-   *    child2,
-   *   ]});
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [
+   *  child1,
+   *  child2,
+   * ]});
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
    *
-   *   block.appendChildren(child3);
-   *   block.children; // [child1, child2, child3]
-   *   ```;
+   * block.appendChildren(child3);
+   * block.children; // [child1, child2, child3]
+   * ```
    *
    * @param children
+   * @returns The Block instance.
    */
@@ -241,16 +247,15 @@ appendChildren(...children) {
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
    *
-   *   const block = new Block("div", { className: "test", children: [
-   *    child1,
-   *    child2,
-   *   ]});
+   * const block = new Block("div", { className: "test", children: [
+   *  child1,
+   *  child2,
+   * ]});
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
-   *   block.insertAfter(child2.id, child3);
-   *   block.children; // [child1, child2, child3]
-   *   ```;
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * block.insertAfter(child2.id, child3);
+   * block.children; // [child1, child2, child3]
+   * ```
    *
@@ -260,2 +265,3 @@ * @param block The id of the child block or the block to insert the children
    * @param children The children to insert.
+   * @returns The Block instance.
    */
@@ -265,3 +271,3 @@ insertBefore(block, ...children) {
     (0, import_utils.invariant)(id, "The block must have an id.");
-    const child = this.findById(id);
+    const child = this.getBlockById(id);
     if (child instanceof _Block) {
@@ -276,2 +282,3 @@ const parent = child.parent;
     }
+    return this;
   }
@@ -284,16 +291,16 @@ /**
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [child1, child2] });
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [child1, child2] });
    *
-   *   const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
    *
-   *   block.insertAfter(child1.id, child3);
-   *   block.children; // [child1, child3, child2]
-   *   ```;
+   * block.insertAfter(child1.id, child3);
+   * block.children; // [child1, child3, child2]
+   * ```
    *
    * @param block
    * @param children The children to insert.
+   * @returns The Block instance.
    */
@@ -303,3 +310,3 @@ insertAfter(block, ...children) {
     (0, import_utils.invariant)(id, "The block must have an id.");
-    const child = this.findById(id);
+    const child = this.getBlockById(id);
     if (child instanceof _Block) {
@@ -314,7 +321,29 @@ const parent = child.parent;
     }
+    return this;
   }
+  /**
+   * This method will search the entire tree of children and then replaces the
+   * child with the given id with the new children. This method will replace the
+   * first child with the given id. If the child is not found, the children will
+   * not be inserted.
+   *
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * const block = new Block("div", { className: "test", children: [child1, child2] });
+   *
+   * const child3 = new Block("div", { className: "test3", data-blockid: "test3" });
+   *
+   * block.replace(child1.id, child3);
+   * block.children; // [child3, child2]
+   * ```
+   *
+   * @param block The id of the child block or the block to replace.
+   * @param children The children to insert.
+   * @returns The Block instance.
+   */
   replace(block, ...children) {
     const id = typeof block === "string" ? block : block.id;
     (0, import_utils.invariant)(id, "The block must have an id.");
-    const child = this.findById(id);
+    const child = this.getBlockById(id);
     if (child instanceof _Block) {
@@ -329,2 +358,3 @@ const parent = child.parent;
     }
+    return this;
   }
@@ -335,14 +365,20 @@ /**
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
-   *   const block = new Block("div", { className: "test", children: [child1, child2] });
+   * ```ts
+   * const child1 = new Block("div", {
+   *   className: "test1",
+   *   "data-blockid": "test1",
+   * });
+   * const child2 = new Block("div", {
+   *   className: "test2",
+   *   "data-blockid": "test2",
+   * });
+   * const block = new Block("div", { className: "test" }, child1, child2);
    *
-   *   block.findById(child2.id); // child2
-   *   ```;
+   * block.getBlockById(child2.id); // child2
+   * ```
    *
    * @param id The id of the child to find.
+   * @returns The child block or undefined.
    */
-  findById(id) {
+  getBlockById(id) {
     const child = this.#getChild(id);
@@ -354,3 +390,3 @@ if (child instanceof _Block) {
       if (child2 instanceof _Block) {
-        const result = child2.findById(id);
+        const result = child2.getBlockById(id);
         if (result) {
@@ -362,2 +398,49 @@ return result;
   }
+  /**
+   * Finds the blocks by the component. This method will search the entire tree
+   * of children. If the child is not found, undefined is returned.
+   *
+   * ```ts
+   * const child1 = new Block("div", {
+   *   className: "test1",
+   *   "data-blockid": "test1",
+   * });
+   * const child2 = new Block("div", {
+   *   className: "test2",
+   *   "data-blockid": "test2",
+   * });
+   * const slider = new Block(Slider, {
+   *   className: "test",
+   *   "data-blockid": "test",
+   * });
+   *
+   * const block = new Block(
+   *   "div",
+   *   { className: "test" },
+   *   child1,
+   *   child2,
+   *   slider,
+   * );
+   *
+   * block.getBlocksByComponent(Slider); // [slider]
+   * ```
+   *
+   * @param component
+   * @returns An array of blocks.
+   */
+  getBlocksByComponent(component) {
+    const blocks = [];
+    if (this.#component === component) {
+      blocks.push(this);
+    }
+    for (const child of this.#children) {
+      if (child instanceof _Block) {
+        const result = child.getBlocksByComponent(component);
+        if (result) {
+          blocks.push(...result);
+        }
+      }
+    }
+    return blocks;
+  }
   #getChild(id) {
@@ -380,12 +463,11 @@ return id instanceof _Block ? this.#children.find((child) => child instanceof _Block && child === id) : this.#children.find(
    *
-   * @example
-   *   ```ts
-   *   const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
-   *   const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
+   * ```ts
+   * const child1 = new Block("div", { className: "test1", data-blockid: "test1" });
+   * const child2 = new Block("div", { className: "test2", data-blockid: "test2" });
    *
-   *   const block = new Block("div", { className: "test", children: [child1, child2] });
+   * const block = new Block("div", { className: "test", children: [child1, child2] });
    *
-   *   block.removeChildById(child2.id);
-   *   block.children; // [child1]
-   *   ```;
+   * block.removeChildById(child2.id);
+   * block.children; // [child1]
+   * ```
    *
@@ -406,5 +488,5 @@ * @param id
    */
-  createDOMNode() {
+  createDOMNode(container) {
     const element = this.createComponent();
-    import_react_dom.default.render(element, this.#container);
+    import_react_dom.default.render(element, container || this.#container);
     return this.#container;
@@ -415,9 +497,8 @@ }
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test", id: "testid" });
+   * ```ts
+   * const block = new Block("div", { className: "test", id: "testid" });
    *
-   *   block.mergeProps({ className: "test2" });
-   *   block.props; // { className: "test2", id: "testid" }
-   *   ```;
+   * block.mergeProps({ className: "test2" });
+   * block.props; // { className: "test2", id: "testid" }
+   * ```
    *
@@ -429,3 +510,3 @@ * @param props The new props to use.
     this.#props = { ...this.#props, ...props };
-    this.id = this.#props[blockIdKey];
+    this.id = this.#props[blockIdKey] || this.id;
     return this;
@@ -437,16 +518,16 @@ }
    *
-   * @example
-   *   ```ts
-   *   const block = new Block("div", { className: "test", id: "testid" });
+   * ```ts
+   * const block = new Block("div", { className: "test", id: "testid" });
    *
-   *   block.setProp("className", "test2");
-   *   block.props; // { className: "test2", id: "testid" }
-   *   ```;
+   * block.setProp("className", "test2");
+   * block.props; // { className: "test2", id: "testid" }
+   * ```
    *
    * @param key
    * @param value
+   * @returns The Block instance.
    */
   setProp(key, value) {
     this.#props = { ...this.#props, [key]: value };
-    this.id = this.#props[blockIdKey];
+    this.id = this.#props[blockIdKey] || this.id;
     return this;
@@ -472,3 +553,3 @@ }
 // src/createBlock.ts
-function createBlock(component, props, ...children) {
+function createBlock(component, props = {}, ...children) {
   return new Block(component, { ...props, children });
@@ -487,6 +568,8 @@ }
 var jsxs = jsx2;
+var Fragment = import_react.default.Fragment;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Fragment,
   jsx,
   jsxs
 });

package.json

 {
   "name": "@baseline-ui/blocks",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "",
@@ -31,4 +31,4 @@ "main": "dist/index.js",
   "dependencies": {
-    "@baseline-ui/utils": "0.5.1",
-    "@baseline-ui/tokens": "0.5.1"
+    "@baseline-ui/utils": "0.6.0",
+    "@baseline-ui/tokens": "0.6.0"
   },
@@ -43,5 +43,9 @@ "peerDependencies": {
   "license": "SEE LICENSE IN https://pspdfkit.com/legal/License.pdf",
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "build:docs": "typedoc --useCodeBlocks --enumMembersFormat table --hidePageTitle --parametersFormat table --propertiesFormat table --hidePageHeader --indexFormat table --typeDeclarationFormat table --hideBreadcrumbs --outputFileStrategy modules"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

93853

decreased by-73.21%

Number of package files

18

decreased by-67.86%

Lines of code

2503

decreased by-70.49%

Dependency changes

• + Added@baseline-ui/tokens@0.6.0(transitive)

• + Added@baseline-ui/utils@0.6.0(transitive)

• - Removed@baseline-ui/tokens@0.5.1(transitive)

• - Removed@baseline-ui/utils@0.5.1(transitive)

• Updated@baseline-ui/tokens@0.6.0

• Updated@baseline-ui/utils@0.6.0