ui/demo/index.html

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <style>
      body {
        background: #fafafa;
      }
    </style>
    <link
      href="http://fonts.googleapis.com/css?family=Roboto"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body>
    <calendar-events-context id="provider">
      <all-events-calendar></all-events-calendar>
    </calendar-events-context>

    <script type="module">
      import {
        AllEventsCalendar,
        CalendarEventsContext,
        CalendarEventsService,
      } from '../dist';
      import { AppWebsocket } from '@holochain/client';

      (async function () {
        const appWebsocket = await AppWebsocket.connect(`ws://localhost:${process.env.HC_PORT}`);
        const appInfo = await appWebsocket.appInfo({
          installed_app_id: 'calendar_events',
        });

        const cellId = appInfo.cell_data[0].cell_id;

        const service = new CalendarEventsService(appWebsocket, cellId);

        customElements.define('calendar-events-context', CalendarEventsContext);

        const provider = document.getElementById('provider');
        provider.service = service;

        customElements.define('all-events-calendar', AllEventsCalendar);
      })();
    </script>
  </body>
</html>