Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
@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 13,632 weekly downloads. As such, @blockprotocol/graph popularity was classified as popular.
We found that @blockprotocol/graph demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.