@blockprotocol/hook - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/types.d.ts

@@ -15,3 +15,3 @@ import { MessageCallback, MessageReturn } from "@blockprotocol/core";
 export type HookEmbedderMessages = {};
-export type HookError = "INVALID_INPUT" | "NOT_FOUND" | "NOT_IMPLEMENTED";
+export type HookError = "INTERNAL_ERROR" | "INVALID_INPUT" | "NOT_FOUND" | "NOT_IMPLEMENTED";
 /**
@@ -18,0 +18,0 @@ * @todo Generate these types from the JSON definition, to avoid manually keeping the JSON and types in sync

package.json

 {
   "name": "@blockprotocol/hook",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Implementation of the Block Protocol Hook module specification for blocks and embedding applications",
@@ -55,4 +55,4 @@ "keywords": [
   "dependencies": {
-    "@blockprotocol/core": "0.1.0",
-    "@blockprotocol/graph": "0.1.0"
+    "@blockprotocol/core": "0.1.1",
+    "@blockprotocol/graph": "0.2.0"
   },
@@ -59,0 +59,0 @@ "devDependencies": {

README.md

@@ -58,6 +58,40 @@ ## Block Protocol – Hook Module
 
-### Custom elements
+### Custom element example
 
-There are no helpers for custom elements yet.
+You can use the `firstUpdate` Lit [lifecycle hook](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle-completing) to request that the embedding application take over control of a DOM node.
 
+```typescript
+export class MyBlock extends BlockElementBase {
+  private hookModule?: HookBlockHandler;
+
+  firstUpdated() {
+    if (!this.hookModule || this.hookModule.destroyed) {
+      this.hookModule = new HookBlockHandler({
+        element: this,
+      });
+    }
+
+    const paragraph = this.renderRoot.querySelector(`#my-hook-paragraph`);
+    if (!paragraph || !(paragraph instanceof HTMLParagraphElement)) {
+      throw new Error("No paragraph element for hook module found in element DOM");
+    }
+
+    void this.hookModule.hook({
+      data: {
+        node: paragraph,
+        entityId: this.getBlockEntity()?.metadata.recordId.entityId,
+        hookId: null,
+        path: [extractBaseUrl(propertyTypes.description.$id)],
+        type: "text",
+      },
+    });
+  }
+
+  render() {
+    return html`
+      <p id="my-hook-paragraph"></p>
+    `;
+  }
+```
+
 ## Embedding applications
@@ -64,0 +98,0 @@

No alert changes

Improved metrics

Total package byte prevSize

92625

increased by1.79%

Number of lines in readme file

162

increased by26.56%

Dependency changes

• + Added@blockprotocol/core@0.1.1(transitive)

• + Added@blockprotocol/graph@0.2.0(transitive)

• + Addedtypescript@4.9.4(transitive)

• - Removed@blockprotocol/core@0.1.0(transitive)

• - Removed@blockprotocol/graph@0.1.0(transitive)

• Updated@blockprotocol/core@0.1.1

• Updated@blockprotocol/graph@0.2.0