@holochain-playground/elements NPM

Holochain Playground

This is an experimental ongoing effort to build a holochain playground simulation. It's trying to follow as accurately as possible the internal mechanisms of holochain, displaying the DHT and enabling detailed inspection.

This package is distributed as an NPM package component library, in the form of a collection of web-components build with the Custom Elements API.

Library Usage

Install the package with npm i holochain-playground .
Import the holochain-playground-provider in your application like this:

import "holochain-playground/elements/holochain-playground-provider";

Declare the <holochain-playground-provider></holochain-playground-provider> element:

<body>
    <holochain-playground-provider id="playground"></holochain-playground-provider>
</body>

This is the fundamental element for the playground to work, as it provides the state for all other elements you declare inside it.

Import any elements you want from the library, and declare them inside the holochain-playground-provider :

import 'holochain-playground/elements/holochain-playground-dht-graph'

<body>
    <holochain-playground-provider id="playground">
        <holochain-playground-dht-graph></holochain-playground-dht-graph>
    </holochain-playground-provider>
</body>

Optionally, set the conductor urls to the nodes you want to bind the playground to:

<body>
    <holochain-playground-provider id="playground"></holochain-playground-provider>

    <script>
        const playground = document.getElementById("playground");
        playground.initialPlayground = {
            conductorUrls: ["ws://localhost:33000"];
        };
    </script>
</body>

Elements Library

In the future, this will be shown with storybook.

Technical data display

holochain-playground-dht-graph
holochain-playground-dht-stats
holochain-playground-dht-shard
holochain-playground-entry-detail
holochain-playground-entry-graph
holochain-playground-source-chain

Utilities

holochain-playground-conductor-detail
holochain-playground-create-entries
holochain-playground-import-export
holochain-playground-connect-to-nodes
holochain-playground-select-dna

@holochain-open-dev/core-types @holochain-open-dev/elements @holochain-open-dev/stores @holochain-open-dev/utils @holochain-playground/simulator @holochain/client @lit-labs/context @msgpack/msgpack @open-wc/scoped-elements @power-elements/json-viewer @scoped-elements/cytoscape @scoped-elements/material-web @vaadin/grid cytoscape js-base64 lit lodash-es

@everything-registry/sub-chunk-399 @holochain-playground/golden-layout devcamp-8

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago