Browser

Browser SDK — Full Usage

This quick start covers all browser source modules in packages/core/browser with realistic usage snippets.

1) Single entry-point bootstrap

import {
  createEphemeClient,
  createEphemeDeviceDbBootstrap,
  IdbDatabase,
  EphemeLicenseController,
  EphemePluginRegistry,
  resolveEphemeHubBaseUrl,
  buildEphemeHubDeviceRegistrationUrl,
} from '@epheme/core/browser';

const epheme = createEphemeClient({ hubUrl: 'https://hub.example.com' });

const appDb = new IdbDatabase('my-tool', 1, [
  { name: 'settings', keyPath: 'id' },
]);

const bootstrap = createEphemeDeviceDbBootstrap(epheme.device, appDb);
await bootstrap();

console.log('hub:', resolveEphemeHubBaseUrl());
console.log('registration url:', buildEphemeHubDeviceRegistrationUrl('/tool'));

if (!epheme.device.isRegistered) {
  epheme.redirectToHub('/tool');
}

2) Device + sync + IDB KV

import { EphemeHubSync, IdbKeyValueStore } from '@epheme/core/browser';

const sync = new EphemeHubSync();
sync.ensureAutoConfigured();

await sync.push('mytool', { theme: 'light', seenOnboarding: true });
const remote = await sync.pull('mytool');
console.log(remote);

const kv = new IdbKeyValueStore('mytool-kv', 1, 'kv');
await kv.put('ui:last-tab', 'settings');
const lastTab = await kv.get('ui:last-tab');

3) License + plugin registry

import { EphemeLicenseController, EphemePluginRegistry } from '@epheme/core/browser';

type Feature = 'mytool/export' | 'mytool/backup';

const license = new EphemeLicenseController<Feature>({
  storageKey: 'mytool:license',
  publicKeyUrl: '/api/license/public-key',
  publicKeyCacheKey: 'mytool:license-pub',
});

const ok = await license.activate('JWT_TOKEN');
console.log('premium?', ok, license.isPremium, 'backup?', license.hasFeature('mytool/backup'));

const plugins = new EphemePluginRegistry();
plugins.register({
  id: 'demo-plugin',
  panels: [{ slot: 'tool.sidebar', component: class DemoPanel {} }],
});
console.log(plugins.getSlotComponents('tool.sidebar', ['mytool/backup']).length);

Angular-specific plugin-slot.component.ts is intentionally not exported from core browser index; copy it into host app where Angular deps exist.