Ad4m-connect-common NPM

AD4M Connect Web Component

Usage

Install AD4M Connect from npm,

npm install ad4m-connect-common

HTML

You need to include the bundled file as a script,

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

Then use the custom element,

<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,

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

Example

Vue

Config vite by following the doc Vue and Web Components, adding one line of code tag === "ad4m-connect",

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

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

import "ad4m-connect-common";

Use the custom tag ad4m-connect wherever you want,

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

@apollo/client @perspect3vism/ad4m graphql-ws lit

@everything-registry/sub-chunk-1096

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago