6.10.94-stable
In this page
  1. Introduction
  2. How it works
  3. Components

SDK Web

Introduction

GreyCat’s Web SDK is available here @greycat/web and features:

  • Built on top of the Web Component standards and Shoelace
  • Tight integration with GreyCat std library
  • Provides several production-ready components for: charting, forms, virtual tables, etc.

How it works

When importing @greycat/web every Web Component that it defines will then be registered globally as Custom Elements.

Because some of those components communicate with GreyCat internally we need to tell them where to find the current instance. For this, the @greycat/sdk and more generally @greycat/web leverages global scope. All the functions and components that needs to communicate directly with GreyCat will look for a GreyCat instance at globalThis.greycat.default.

This implies that the only “initialization” that is needed is the following:

import { GreyCat, IndexedDbCache } from '@greycat/web';

const APP_VERSION = 1;

globalThis.greycat.default = await GreyCat.init({
  // 'cache' is optional
  // if present, it will cache all requests/responses
  // directly in the browser
  cache: new IndexedDbCache('greycat.default', APP_VERSION),
});

// here you can safely use all of @greycat/web

Components