https://github.com/logux/client

Logux base components to build web client
https://github.com/logux/client

Last synced: about 2 months ago
JSON representation

Logux base components to build web client

• Host: GitHub
• URL: https://github.com/logux/client
• Owner: logux
• License: mit
• Created: 2016-11-16T01:39:51.000Z (almost 8 years ago)
• Default Branch: main
• Last Pushed: 2024-06-25T21:34:55.000Z (3 months ago)
• Last Synced: 2024-07-29T15:34:27.966Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://logux.org/
• Size: 5.89 MB
• Stars: 647
• Watchers: 12
• Forks: 42
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Logux Client [![Cult Of Martians][cult-img]][cult]



Logux is a new way to connect client and server. Instead of sending

HTTP requests (e.g., AJAX and GraphQL) it synchronizes log of operations

between client, server, and other clients.

* **[Guide, recipes, and API](https://logux.org/)**

* **[Issues](https://github.com/logux/logux/issues)**

  and **[roadmap](https://github.com/orgs/logux/projects/1)**

* **[Projects](https://logux.org/guide/architecture/parts/)**

  inside Logux ecosystem

This repository contains Logux base components to build web client:

* `CrossTabClient` and `Client` to create web client for Logux.

* `IndexedStore` to store Logux log in `IndexedDB`.

* `badge()` widget to show Logux synchronization status in UI.

* `status()` to write own UI to show Logux synchronization status in UI.

* `attention()`, `confirm()`, `favicon()` to improve UX in Logux web app.

* `log()` to print Logux synchronization status to browser DevTools.

Check **[demo page]** for widget UI.



  



[demo page]: https://logux.github.io/client/

[cult-img]: http://cultofmartians.com/assets/badges/badge.svg

[cult]: http://cultofmartians.com/done.html

## Install

```sh

npm install @logux/core @logux/client nanostores

```

## Usage

See [documentation] for Logux API.

```js

import { CrossTabClient, badge, badgeEn, log } from '@logux/client'

import { badgeStyles } from '@logux/client/badge/styles'

let userId = document.querySelector('meta[name=user]').content

let token = document.querySelector('meta[name=token]').content

const client = new CrossTabClient({

  subprotocol: '1.0.0',

  server: 'wss://example.com:1337',

  userId,

  token

})

badge(client, { messages: badgeEn, styles: badgeStyles })

log(client)

client.start()

```

[documentation]: https://github.com/logux/logux