New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

clientchannel

Package Overview
Dependencies
Maintainers
1
Versions
116
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

clientchannel

Persist objects and sync them between tabs via IndexedDB or LocalStorage.

  • 0.38.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
36
decreased by-72.93%
Maintainers
1
Weekly downloads
 
Created
Source

ClientChannel

CI

Persist objects and sync them between tabs via IndexedDB or LocalStorage.

Features

  • Persist objects using IndexedDB or LocalStorage.
  • Sync objects between tabs.
  • Limit the number of objects.
  • Expire each object.

Demos

Persist and sync a text and a canvas between tabs.

https://falsandtru.github.io/clientchannel/

APIs

index.d.ts

Usage

Persist data

A schema is constructed by object properties created from the given schemas. Property names having a prefix or a suffix of an underscore(_) or a dollar($) are excluded from schema. Property values of linked objects are saved when updating. Linked objects are automatically updated when a linked object is updated on another thread(tab).

import { StoreChannel } from 'clientchannel';

interface SettingsSchemas {
  'theme/v1': ThemeSettings;
  'editor/v1': EditorSettings;
}

interface ThemeSettings extends StoreChannel.Value {
}
class ThemeSettings {
  // Only properties having a valid name and a storable value consist schema.
  // /^(?=[a-z])[0-9a-zA-Z_]*[0-9a-zA-Z]$/
  name = 'default';
}

interface EditorSettings extends StoreChannel.Value {
}
class EditorSettings {
  // Getter and setter names are excluded from schema.
  get key() {
    return this[StoreChannel.Value.key];
  }
  // Properties having an invalid value are excluded from schema.
  event() {
    return this[StoreChannel.Value.event];
  }
  // Properties having an invalid name are excluded from schema.
  protected prop_ = '';
  protected $prop = '';
  revision = 0;
  mode = 'default';
  settings = {
    indent: 'space',
  };
}

// Appropriate for settings, updates, backups, etc...
const chan = new StoreChannel<SettingsSchemas>('settings', {
  schemas: {
    'theme/v1': () => new ThemeSettings(),
    'editor/v1': () => new EditorSettings(),
  },
  // Limit the number of stored objects.
  capacity: 1000,
  // Delete stored objects 365 days later since the last access.
  age: 365 * 24 * 60 * 60 * 1e3,
});

// Load an object from IndexedDB, and link it to the same objects of all the tabs.
const theme = chan.link('theme/v1');
// Save the changes of property values to IndexedDB, and sync them between all the tabs.
theme.name = 'black';
// Schemas are selected by keys.
const editor = chan.link('editor/v1');
editor.mode = 'vim';
editor.event().on(['recv', 'mode'], ev =>
  console.log(`"${ev.prop}" value is changed to "${ev.newValue}" from "${ev.oldValue}".`));

Communication and Synchronization

Linked objects provede the send and the recv events. The send event is emitted when a linked object is changed by own thread(tab). The recv event is emitted when a linked object is changed by another thread(tab).

import { StorageChannel } from 'clientchannel';

interface Value extends StorageChannel.Value {
}
class Value {
  event() {
    return this[StorageChannel.Value.event];
  }
  version = 0;
}

const chan = new StorageChannel('config/version', {
  schema: () => new Value(),
});
const link = chan.link();
const VERSION = 1;
link.event().on(['recv', 'version'], ({ newValue }) => {
  switch (true) {
    case newValue === VERSION:
      return;
    case newValue > VERSION:
      return location.reload();
    default:
      return;
  }
});
link.version = VERSION;

Browsers

  • Chrome
  • Firefox
  • Edge (Chromium edition only)
  • Safari

Keywords

FAQs

Package last updated on 06 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc