Small module to create and see calendar events, in holochain RSM.
This module is designed to be included in other DNAs, assuming as little as possible from those. It is packaged as a holochain zome, and an npm package that offers native Web Components that can be used across browsers and frameworks.
Please note, this module is in its early infancy, right now more usable as a reference for building reusable modules. Help is appreciated and much needed!
See our storybook.
- Create a new folder in the
zomesof the consuming DNA, with the name you want to give to this zome in your DNA. - Add a new
Cargo.tomlin that folder. In its content, paste theCargo.tomlcontent from any zome. - Change the
nameproperties of theCargo.tomlfile to the name you want to give to this zome in your DNA. - Add this zome as a dependency in the
Cargo.tomlfile:
[dependencies]
hc_zome_calendar_events = {git = "https://github.com/holochain-open-dev/calendar-events", package = "hc_zome_calendar_events"}- Create a
srcfolder besides theCargo.tomlwith this content:
extern crate hc_zome_calendar_events;- Add the zome into your
dna.yamlfile with the namecalendar_events. - Compile the DNA with the usual
CARGO_TARGET=target cargo build --release --target wasm32-unknown-unknown.
See the list of available elements here.
-
Install the module with
npm install "https://github.com/holochain-open-dev/calendar-events#ui-build". -
Import and define the the elements you want to include:
import ConductorApi from "@holochain/client";
import {
MyCalendar,
CalendarEventsService,
CALENDAR_EVENTS_SERVICE_CONTEXT,
} from "@holochain-open-dev/calendar-events";
import { ContextProviderElement } from "@holochain-open-dev/context";
async function setupCalendarEvents() {
const appWebsocket = await ConductorApi.AppWebsocket.connect(
"ws://localhost:8888"
);
const appInfo = await appWebsocket.appInfo({
installed_app_id: "test-app",
});
const cellId = appInfo.cell_data[0].cell_id;
const service = new CalendarEventsService(appWebsocket, cellId);
customElements.define("context-provider", ContextProviderElement);
const provider = document.getElementById("provider");
provider.name = CALENDAR_EVENTS_SERVICE_CONTEXT;
provider.value = service;
customElements.define("my-calendar", MyCalendar);
}- Include the elements in your html:
<body>
<context-provider id="provider">
<my-calendar> </my-calendar>
</context-provider>
</body>Take into account that at this point the elements already expect a holochain conductor running at ws://localhost:8888.
You can see a full working example here.
Visit the developer setup.