https://github.com/apollo-elements/leeway

`#leeway` is an example chat PWA that uses `lit-apollo` to make it easier for you to avoid doing actual work.
https://github.com/apollo-elements/leeway

Last synced: 1 day ago
JSON representation

`#leeway` is an example chat PWA that uses `lit-apollo` to make it easier for you to avoid doing actual work.

• Host: GitHub
• URL: https://github.com/apollo-elements/leeway
• Owner: apollo-elements
• License: isc
• Created: 2020-09-21T07:37:31.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-06-13T16:27:01.000Z (over 2 years ago)
• Last Synced: 2024-04-14T02:42:19.310Z (8 months ago)
• Language: HTML
• Size: 2.28 MB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[`#leeway`](https://leeway.apolloelements.dev) is an example chat PWA that uses `lit-apollo` to make it easier for you to avoid doing actual work. [Source Repository](https://github.com/apollo-elements/leeway)

This repo demonstrates how to build an app using Apollo Elements with minimal use of JavaScript and Shadow DOM. There are many ways to build an app with web components, for a more traditional component-oriented approach with stronger encapsulation, see [launchctl](https://github.com/apollo-elements/launchctl).

## Features

- Page loads offline via Service Worker

- SSR for initial data payload via Apollo Server

  - Component SSR with [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/)

- Code Splitting with Rollup

- Aggressive minification, including `lit-html` template literals

- CSS-in-CSS ( e.g. `import shared from '../shared-styles.css';`)

- GQL-in-GQL ( e.g. `import query from './my-component-query.graphql';`)

- GraphQL Subscriptions over websocket

![Lighthouse Scores: 98 (performance), 100 (accessibility), 93 (best practises), 100 (SEO), 12/12 (PWA)](./lighthouse-performance-sep-2020.png)

# Installation

```

npm ci

```

# Run Locally

```

npm run watch

```

## 3rd-Party Licenses

See [dependencies.txt](./dependencies.txt) for information about 3rd-party software licenses.