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);