# ad4m-connect-common

> A web component to connect with AD4M

Latest version **0.0.6** (published 2022-08-22) · CAL-1.0 license · 0 weekly downloads

## Install

```sh
npm install ad4m-connect-common
pnpm add ad4m-connect-common
yarn add ad4m-connect-common
bun add ad4m-connect-common
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2022-08-22 |
| First published | 2022-08-18 |
| Weekly downloads | 0 |
| License | CAL-1.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kaichao Sun |
| Maintainers | kaichaosun |

## Links

- npm: https://www.npmjs.com/package/ad4m-connect-common
- npm.io page: https://npm.io/package/ad4m-connect-common

## Dependencies (4)

- [lit](https://npm.io/package/lit.md) ^2.3.0
- [graphql-ws](https://npm.io/package/graphql-ws.md) ^5.9.1
- [@apollo/client](https://npm.io/package/@apollo/client.md) ^3.6.9
- [@perspect3vism/ad4m](https://npm.io/package/@perspect3vism/ad4m.md) 0.1.34

## Recent versions

- 0.0.6 (latest) — 2022-08-22
- 0.0.5 — 2022-08-22
- 0.0.4 — 2022-08-22
- 0.0.3 — 2022-08-22
- 0.0.2 — 2022-08-18
- 0.0.1 — 2022-08-18

## README

# AD4M Connect Web Component

## Usage

Install AD4M Connect from npm,

```shell
npm install ad4m-connect-common
```
### HTML

You need to include the bundled file as a script,

```html
<script type="module" src="../dist/ad4m-connect.bundled.js"></script>
```

Then use the custom element,

```html
<body>
  <ad4m-connect
    app='{"name":"kaichaoapp","description":"test app","url":"my-url"}'
    endpoint="ws://localhost:12000/graphql"
    capabilities='[{"with":{"domain":"*","pointers":["*"]},"can":["*"]}]'
  />
</body>
```

Listen to the custom `jwt-received` event for generated JWT,

```html
<script>
  window.addEventListener('jwt-received', (e) => {
    console.log("jwt received");
    console.log(e.detail.jwt);
  });
</script>
```

[Example](https://github.com/kaichaosun/ad4m-connect-poc/blob/main/common/dev/index.html)

### Vue

1. Config vite by following the doc [Vue and Web Components](https://vuejs.org/guide/extras/web-components.html), adding one line of code `tag === "ad4m-connect"`,

```typescript
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => {
            return (
              tag === "ad4m-connect"
            );
          },
        },
      },
    }),
    vueJsx(),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});
```

2. Import `ad4m-connect-common` in the app root `main.ts` or `app.ts`,

```typescript
import "ad4m-connect-common";
```

3. Use the custom tag `ad4m-connect` wherever you want,

```typescript
<ad4m-connect
  .app='{"name":"testapp","description":"test app","url":"my-url"}'
  endpoint="ws://localhost:12000/graphql"
  .capabilities='[{"with":{"domain":"*","pointers":["*"]},"can":["*"]}]'
/>
```

---
_Source: https://npm.io/package/ad4m-connect-common · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._