
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
@blockprotocol/graph
Advanced tools
Implementation of the Block Protocol Graph service specification for blocks and embedding applications
This package implements the Block Protocol Graph module for blocks and embedding applications.
If you are a block author, we have several block templates available which use this package
npx create-block-app@latest --help
The best way to get started is to read the docs.
The package exports a standard library of helper functions for interacting with a Subgraph
, available from "@blockprotocol/graph/stdlib"
. For example
import { getOutgoingLinkAndTargetEntities } from "@blockprotocol/graph/stdlib";
// find the outgoing links and target entities for a given entity
const linkAndTargetEntities = getOutgoingLinkAndTargetEntities(
subgraph,
"entity-123",
);
for (const { linkEntity, rightEntity } of linkAndTargetEntities) {
// do something with each link and the entity it points to
}
For a full list of available functions see src/stdlib.ts
If you want to roll your own block template or embedding application, you can use this package to construct a handler for graph module messages.
yarn add @blockprotocol/graph
or npm install @blockprotocol/graph
To create a GraphBlockHandler
, pass the constructor an element in your block, along with any callbacks you wish to register to handle incoming messages.
For React, we provide a useGraphBlockModule
hook, which accepts a ref
to an element, and optionally any callbacks
you wish to provide on initialization.
See npx create-block-app@latest my-block --template react
for an example.
For custom elements, this package exports a BlockElementBase
class
which uses the Lit framework, and sets graphModule
on the instance for sending graph-related messages to the embedding application.
See npx create-block-app@latest my-block --template custom-element
for an example.
You should construct one GraphEmbedderHandler
per block.
It is not currently possible to wrap multiple blocks with a single handler.
To create a GraphEmbedderHandler
, pass the constructor:
element
wrapping your blockcallbacks
to respond to messages from the blockblockEntitySubgraph
: the graph rooted at the block entityreadonly
: whether or not the block should be in 'readonly' modeThese starting values should also be passed in a graph
property object, if the block can be passed or assigned properties.
See the here or check the TypeScript types for message signatures.
import { GraphEmbedderHandler } from "@blockprotocol/graph";
const graphModule = new GraphEmbedderHandler({
blockEntitySubgraph: { ... }, // subgraph containing vertices, edges, and 'roots' which should be a reference to the block entity
readonly: false,
callbacks: {
updateEntity: ({ data }) => updateEntityInYourDatastore(data),
},
element: elementWrappingTheBlock,
});
For React embedding applications, we provide a useGraphEmbedderModule
hook, which accepts a ref
to an element, and optionally any additional constructor arguments you wish to pass.
import { useGraphEmbedderModule } from "@blockprotocol/graph";
import { useRef } from "react";
export const App = () => {
const wrappingRef = useRef<HTMLDivElement>(null);
const blockEntitySubgraph = { ... }; // subgraph containing vertices, edges, and 'roots' which should be a reference to the block entity
const { graphModule } = useGraphEmbedderModule(blockRef, {
blockEntitySubgraph,
});
return (
<div ref={wrappingRef}>
<Block graph={{ blockEntitySubgraph }} />
</div>
);
};
FAQs
Implementation of the Block Protocol Graph service specification for blocks and embedding applications
The npm package @blockprotocol/graph receives a total of 2,218 weekly downloads. As such, @blockprotocol/graph popularity was classified as popular.
We found that @blockprotocol/graph demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.