@stackone/hub 1.7.1 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -4
- package/dist/webcomponent.js +2 -2
- package/dist/webcomponent.js.map +1 -1
- package/package.json +11 -2
package/README.md
CHANGED
|
@@ -129,21 +129,149 @@ The build generates multiple bundles in the `dist/` directory:
|
|
|
129
129
|
|
|
130
130
|
### 🌐 Web Component Integration
|
|
131
131
|
|
|
132
|
-
|
|
132
|
+
`@stackone/hub` also ships a framework-agnostic custom element (`<stackone-hub>`) that works in **plain HTML, Vue, Angular, Svelte, or any other framework**. React + ReactDOM are bundled into the web-component bundle, so consumers do **not** need React installed.
|
|
133
|
+
|
|
134
|
+
#### Loading the bundle
|
|
135
|
+
|
|
136
|
+
Install the package and import the web-component subpath once at app startup. The import is side-effecting — it registers `<stackone-hub>` on `customElements`:
|
|
137
|
+
|
|
138
|
+
```ts
|
|
139
|
+
// main.ts / main.js — anywhere that runs once on app boot
|
|
140
|
+
import '@stackone/hub/webcomponent';
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
If you'd rather drop a `<script>` tag in plain HTML, point it at the IIFE bundle in `node_modules` (or your own static host):
|
|
144
|
+
|
|
145
|
+
```html
|
|
146
|
+
<script src="/node_modules/@stackone/hub/dist/webcomponent.js"></script>
|
|
147
|
+
<stackone-hub token="..."></stackone-hub>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
#### Attributes
|
|
151
|
+
|
|
152
|
+
All scalar `StackOneHub` props are exposed as kebab-case HTML attributes:
|
|
153
|
+
|
|
154
|
+
| Attribute | Type | Notes |
|
|
155
|
+
|---|---|---|
|
|
156
|
+
| `token` | string | Connect-session token (required to render the picker). |
|
|
157
|
+
| `base-url` | string | API base URL. Defaults to `https://api.stackone.com`. |
|
|
158
|
+
| `app-url` | string | Dashboard URL. Defaults to `https://app.stackone.com`. |
|
|
159
|
+
| `mode` | string | Currently only `integration-picker`. |
|
|
160
|
+
| `height` | string | CSS height (e.g. `600px`). Defaults to `500px`. |
|
|
161
|
+
| `theme` | `light` \| `dark` \| JSON | Either the keyword or a JSON-encoded `PartialMalachiteTheme` object. |
|
|
162
|
+
| `account-id` | string | Optional account filter. |
|
|
163
|
+
| `on-close-label` | string | Override the close-button label. |
|
|
164
|
+
| `show-footer-links` | boolean attr | Presence = `true`, value `"false"` = `false`. |
|
|
165
|
+
| `debug` | boolean attr | Enables debug logging. |
|
|
166
|
+
|
|
167
|
+
#### Events
|
|
168
|
+
|
|
169
|
+
Callbacks are dispatched as `CustomEvent`s on the host element:
|
|
170
|
+
|
|
171
|
+
| Event | `event.detail` |
|
|
172
|
+
|---|---|
|
|
173
|
+
| `success` | `{ id: string; provider: string }` — emitted when an account is connected. |
|
|
174
|
+
| `close` | `undefined` — emitted when the user closes the picker. |
|
|
175
|
+
|
|
176
|
+
Both events are dispatched with `bubbles: true` and `composed: true`, so they bubble and cross shadow-DOM boundaries.
|
|
177
|
+
|
|
178
|
+
#### JS-only properties
|
|
179
|
+
|
|
180
|
+
For values that don't fit in HTML attributes, set them as JS properties on the element:
|
|
181
|
+
|
|
182
|
+
| Property | Type | Purpose |
|
|
183
|
+
|---|---|---|
|
|
184
|
+
| `el.onSuccess` | `(account) => void` | Function alternative to the `success` event. |
|
|
185
|
+
| `el.onClose` | `() => void` | Function alternative to the `close` event. |
|
|
186
|
+
| `el.themeObject` | `PartialMalachiteTheme` | Structured theme; overrides the `theme` attribute. |
|
|
187
|
+
|
|
188
|
+
#### Vanilla HTML
|
|
133
189
|
|
|
134
190
|
```html
|
|
135
191
|
<!DOCTYPE html>
|
|
136
192
|
<html>
|
|
137
193
|
<head>
|
|
138
|
-
|
|
194
|
+
<script src="/node_modules/@stackone/hub/dist/webcomponent.js"></script>
|
|
139
195
|
</head>
|
|
140
196
|
<body>
|
|
141
|
-
|
|
142
|
-
|
|
197
|
+
<stackone-hub id="hub" token="..." mode="integration-picker" height="600px"></stackone-hub>
|
|
198
|
+
<script>
|
|
199
|
+
const el = document.getElementById('hub');
|
|
200
|
+
el.addEventListener('success', (e) => console.log('connected', e.detail));
|
|
201
|
+
el.addEventListener('close', () => console.log('closed'));
|
|
202
|
+
</script>
|
|
143
203
|
</body>
|
|
144
204
|
</html>
|
|
145
205
|
```
|
|
146
206
|
|
|
207
|
+
#### Vue 3
|
|
208
|
+
|
|
209
|
+
Tell Vue that `<stackone-hub>` is a custom element so the compiler doesn't try to resolve it as a Vue component:
|
|
210
|
+
|
|
211
|
+
```ts
|
|
212
|
+
// main.ts
|
|
213
|
+
import { createApp } from 'vue';
|
|
214
|
+
import App from './App.vue';
|
|
215
|
+
import '@stackone/hub/webcomponent';
|
|
216
|
+
|
|
217
|
+
const app = createApp(App);
|
|
218
|
+
app.config.compilerOptions.isCustomElement = (tag) => tag === 'stackone-hub';
|
|
219
|
+
app.mount('#app');
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
```vue
|
|
223
|
+
<!-- App.vue -->
|
|
224
|
+
<script setup lang="ts">
|
|
225
|
+
import { ref } from 'vue';
|
|
226
|
+
const token = ref('...');
|
|
227
|
+
const onSuccess = (event: CustomEvent<{ id: string; provider: string }>) => {
|
|
228
|
+
console.log('connected', event.detail);
|
|
229
|
+
};
|
|
230
|
+
</script>
|
|
231
|
+
|
|
232
|
+
<template>
|
|
233
|
+
<stackone-hub :token="token" mode="integration-picker" @success="onSuccess" @close="() => {}" />
|
|
234
|
+
</template>
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
#### Angular
|
|
238
|
+
|
|
239
|
+
Add `CUSTOM_ELEMENTS_SCHEMA` to the module (or standalone component) that uses `<stackone-hub>` so Angular treats unknown tags as custom elements:
|
|
240
|
+
|
|
241
|
+
```ts
|
|
242
|
+
// app.module.ts
|
|
243
|
+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
244
|
+
import '@stackone/hub/webcomponent';
|
|
245
|
+
|
|
246
|
+
@NgModule({
|
|
247
|
+
declarations: [AppComponent],
|
|
248
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
249
|
+
bootstrap: [AppComponent],
|
|
250
|
+
})
|
|
251
|
+
export class AppModule {}
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
```html
|
|
255
|
+
<!-- app.component.html -->
|
|
256
|
+
<stackone-hub
|
|
257
|
+
[attr.token]="token"
|
|
258
|
+
mode="integration-picker"
|
|
259
|
+
(success)="onSuccess($event)"
|
|
260
|
+
(close)="onClose()"
|
|
261
|
+
></stackone-hub>
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
```ts
|
|
265
|
+
// app.component.ts
|
|
266
|
+
onSuccess(event: Event) {
|
|
267
|
+
const { id, provider } = (event as CustomEvent<{ id: string; provider: string }>).detail;
|
|
268
|
+
console.log('connected', id, provider);
|
|
269
|
+
}
|
|
270
|
+
onClose() {
|
|
271
|
+
console.log('closed');
|
|
272
|
+
}
|
|
273
|
+
```
|
|
274
|
+
|
|
147
275
|
### ⚛️ React Component Integration
|
|
148
276
|
|
|
149
277
|
For React applications (CSR — Vite, CRA, etc.):
|