Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

🚀🌛 Use the Launch Platform 👩‍🚀👨‍🚀
https://github.com/apollo-elements/apollo-elements

apollo-elements gluon graphql hacktoberfest hybrids lit-element lit-html mixins polymer webcomponents

Last synced: 25 days ago
JSON representation

🚀🌛 Use the Launch Platform 👩‍🚀👨‍🚀

Host: GitHub
URL: https://github.com/apollo-elements/apollo-elements
Owner: apollo-elements
License: isc
Created: 2018-05-27T05:42:06.000Z (over 6 years ago)
Default Branch: main
Last Pushed: 2024-02-22T05:25:13.000Z (9 months ago)
Last Synced: 2024-05-21T07:27:59.584Z (6 months ago)
Topics: apollo-elements, gluon, graphql, hacktoberfest, hybrids, lit-element, lit-html, mixins, polymer, webcomponents
Language: TypeScript
Homepage: https://apolloelements.dev
Size: 41.5 MB
Stars: 416
Watchers: 6
Forks: 25
Open Issues: 29
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome - apollo-elements/apollo-elements - 🚀🌛 Use the Launch Platform 👩‍🚀👨‍🚀 (TypeScript)
awesome-graphql - apollo-elements - GraphQL web components that work in any frontend framework. (Implementations / JavaScript/TypeScript)
awesome-list - apollo-elements - elements | 321 | (TypeScript)
awesome-lit - Apollo Elements - Custom elements meet Apollo GraphQL. (Component Libraries)
awesome-web-components - Apollo Elements - Custom elements for using Apollo GraphQL with various web components libraries. (Real World / Component Libraries)

README

        ![Am Yisrael Chai - עם ישראל חי](https://bennypowers.dev/assets/flag.am.yisrael.chai.png)



  

  🚀 Apollo Elements 👩‍🚀

  🌑 Custom elements meet Apollo GraphQL 🌜

  👩‍🚀 It's one small step for a dev, one giant leap for the web platform! 👨‍🚀



[![Made with open-wc](https://img.shields.io/badge/made%20with-open--wc-blue)](https://open-wc.org)

[![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/apollo-elements/apollo-elements/issues)

[![ISC License](https://img.shields.io/npm/l/@apollo-elements/polymer)](https://github.com/apollo-elements/apollo-elements/blob/master/LICENCE.md)

[![Maintainability](https://api.codeclimate.com/v1/badges/9766ab3cacfe5bfeab25/maintainability)](https://codeclimate.com/github/apollo-elements/apollo-elements/maintainability)

[![Test Coverage](https://api.codeclimate.com/v1/badges/9766ab3cacfe5bfeab25/test_coverage)](https://codeclimate.com/github/apollo-elements/apollo-elements/test_coverage)

[![Release](https://github.com/apollo-elements/apollo-elements/workflows/Release/badge.svg)](https://github.com/apollo-elements/apollo-elements/actions)

Apollo Elements offers packages based on a variety of underlying web component authoring libraries. You can pick the one that suits your project in order to keep your app sizes small.

```bash

npm init @apollo-elements

```

## 🤖 Demos

- [`#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)

- [`LaunchCTL`](https://launchctl.apolloelements.dev) is a simple PWA that displays info about [SpaceX](https://spacex.com) launches. It uses the unofficial [spacex.land](https://spacex.land) GraphQL API. [Source Repository](https://github.com/apollo-elements/launchctl)

## 🗺 Guides and Docs

If you just want to see the API Docs, check them out for all our packages at [apolloelements.dev](https://apolloelements.dev)

- [🥑 Core](https://apolloelements.dev/api/core/)

- [🧱 Components](https://apolloelements.dev/api/components/)

- [🍸 Mixins](https://apolloelements.dev/api/libraries/mixins/)

- [🔥 Lit](https://apolloelements.dev/api/libraries/lit-apollo/)

- [🏁 FAST](https://apolloelements.dev/api/libraries/fast/)

- [👻 Haunted](https://apolloelements.dev/api/libraries/haunted/)

- [⚛️ Atomico](https://apolloelements.dev/api/libraries/atomico/)

- [🦄 Hybrids](https://apolloelements.dev/api/libraries/hybrids/)

- [🔬 Gluon](https://apolloelements.dev/api/libraries/gluon/)

- [🧬 Polymer](https://apolloelements.dev/api/libraries/polymer/)

## Use in any Framework

Elements created with Apollo Elements work in any framework. Write GraphQL components once and use them in page with ease, even Angular, Preact, React, Svelte, or Vue apps.

- [Angular ❤️ Apollo Elements](https://codesandbox.io/s/apollo-elements-in-angular-9smgl?file=/src/app/app.component.html)

- [Preact 💙 Apollo Elements](https://codesandbox.io/s/apollo-elements-in-preact-yowom?file=/src/index.js)

- [React 💜 Apollo Elements](https://codesandbox.io/s/apollo-elements-in-react-00ev3?file=/src/LaunchesDemo.js)

- [Svelte 🧡 Apollo Elements](https://codesandbox.io/s/apollo-elements-in-svelte-u6js9?file=/LaunchesDemo.svelte)

- [Vue 💚 Apollo Elements](https://codesandbox.io/s/apollo-elements-in-vue-cq769?file=/src/components/ApolloElementsDemo.vue)

## 📦 Packages

Apollo Elements offers packages based on a variety of underlying web component authoring libraries. You can pick the one that suits your project and keep your bundle size small, or mix and match different libraries and approaches in the same app.

### 🥑 Core

Reactive GraphQL controllers contain sharable, reusable, and stackable logic.

```bash

npm i -S @apollo-elements/core@next

```

```js

import { ApolloQueryController } from '@apollo-elements/core/apollo-query-controller';

import { ApolloMutationController } from '@apollo-elements/core/apollo-mutation-controller';

import { ApolloSubscriptionController } from '@apollo-elements/core/apollo-subscription-controller';

```

### 🧱 Components

Write GraphQL apps in HTML.

- `` provides all it's children (even across open shadow roots) with a client instance.

- `` write GraphQL queries and their templates in HTML.

- `` declarative mutation components in HTML.

- `` write realtime GraphQL subscriptions and their templates in HTML.

```bash

npm i -S @apollo-elements/components@next

```

```html

  

    

    

      

      


        

          

            {{ item.name }}

            

          

        

      

    

  

  

    

    

      

      User Name

      

      Avatar Image

      

      {{ data.addUser.name }} added!

    

  

```

[Read More](https://apolloelements.dev/api/components/)

### 🍸 Mixins

These custom element [class mixins](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/) give you all the features you need to connect your components to your Apollo cache without imposing a specific component library.

```bash

npm i -S @apollo-elements/mixins@next

```

```js

import { ApolloQueryMixin } from '@apollo-elements/mixins/apollo-query-mixin';

import { ApolloMutationMixin } from '@apollo-elements/mixins/apollo-mutation-mixin';

import { ApolloSubscriptionMixin } from '@apollo-elements/mixins/apollo-subscription-mixin';

```

[Read More](https://apolloelements.dev/api/libraries/mixins/)

### 🔥 lit-apollo

These base classes extend from [`LitElement`](https://lit.dev), so you can quickly get up and running creating declarative front-ends with Apollo GraphQL.

```bash

npm i -S @apollo-elements/lit-apollo@next

```

```js

import { ApolloQuery } from '@apollo-elements/lit-apollo/apollo-query';

import { ApolloMutation } from '@apollo-elements/lit-apollo/apollo-mutation';

import { ApolloSubscription } from '@apollo-elements/lit-apollo/apollo-subscription';

```

[Read More](https://apolloelements.dev/api/libraries/lit-apollo/)

### 🏁 FAST

These base classes extend from [`FASTElement`](https://fast.design), with all it's ergonomics and reactivity.

```bash

npm i -S @apollo-elements/fast@next

```

```js

import { ApolloQuery } from '@apollo-elements/fast/apollo-query';

import { ApolloMutation } from '@apollo-elements/fast/apollo-mutation';

import { ApolloSubscription } from '@apollo-elements/fast/apollo-subscription';

```

[Read More](https://apolloelements.dev/api/libraries/fast/)

### 👻 Haunted

Apollo hooks for web components, with [haunted](https://github.com/matthewp/haunted)!

```bash

npm i -S @apollo-elements/haunted@next

```

```js

import { useQuery } from '@apollo-elements/haunted/useQuery';

import { useMutation } from '@apollo-elements/haunted/useMutation';

import { useSubscription } from '@apollo-elements/haunted/useSubscription';

```

[Read More](https://apolloelements.dev/api/libraries/haunted/)

### ⚛️ Atomico

Alternate hooks implementation for web components, with [atomico](https://atomico.gitbook.io/doc/)!

```bash

npm i -S @apollo-elements/atomico@next

```

```js

import { useQuery } from '@apollo-elements/atomico/useQuery';

import { useMutation } from '@apollo-elements/atomico/useMutation';

import { useSubscription } from '@apollo-elements/atomico/useSubscription';

```

[Read More](https://apolloelements.dev/api/libraries/atomico/)

### 🦄 Hybrids

Descriptor factories and object spreads you can roll into your [hybrids](https://hybrids.js.org) to make it easier to connect to your Apollo cache.

```bash

npm i -S @apollo-elements/hybrids@next

```

```js

import { query, mutation, subscription } from '@apollo-elements/hybrids';

```

[Read More](https://apolloelements.dev/api/libraries/hybrids/)

### 👩‍🔬 Gluon

These base classes extend from [`GluonElement`](https://github.com/ruphin/gluonjs), a simplified wc library that uses `lit-html` for templating while keeping component state and lifecycle concerns 'close to the metal'.

```bash

npm i -S @apollo-elements/gluon@next

```

```js

import { ApolloQuery } from '@apollo-elements/gluon/apollo-query';

import { ApolloMutation } from '@apollo-elements/gluon/apollo-mutation';

import { ApolloSubscription } from '@apollo-elements/gluon/apollo-subscription';

```

[Read More](https://apolloelements.dev/api/libraries/gluon/)

### 🧬 Polymer

These custom elements fire [polymer](https://polymer-library.polymer-project.org)-style `*-changed` events when the Apollo cache updates their state. They extend directly from `HTMLElement` so they're small in size, and their notifying properties make them perfect for use in Polymer templates.

```bash

npm i -S @apollo-elements/polymer@next

```

```js

import '@apollo-elements/polymer/polymer-apollo-query';

import '@apollo-elements/polymer/polymer-apollo-mutation';

import '@apollo-elements/polymer/polymer-apollo-subscription';

```

[Read More](https://apolloelements.dev/api/libraries/polymer/)

## ‍🙏️ Acknowledgements

`apollo-elements` is a community project maintained by Benny Powers. We proudly use [Open Web Components](https://open-wc.org) and [Modern Web](https://modern-web.dev) tools. Thanks to [Netlify](https://netlify.com) and [Heroku](https://heroku.com) for hosting our documentation and demos.

[![Contact me on Codementor](https://cdn.codementor.io/badges/contact_me_github.svg)](https://www.codementor.io/bennyp?utm_source=github&utm_medium=button&utm_term=bennyp&utm_campaign=github)