ad4m-connect-common
v0.0.6
Published
A web component to connect with AD4M
Downloads
10
Readme
AD4M Connect Web Component
Usage
Install AD4M Connect from npm,
npm install ad4m-connect-commonHTML
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>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-commonin the app rootmain.tsorapp.ts,
import "ad4m-connect-common";- Use the custom tag
ad4m-connectwherever you want,
<ad4m-connect
.app='{"name":"testapp","description":"test app","url":"my-url"}'
endpoint="ws://localhost:12000/graphql"
.capabilities='[{"with":{"domain":"*","pointers":["*"]},"can":["*"]}]'
/>