1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { BrowserOAuthClient } from '@atproto/oauth-client-browser'
import './hello-count.js'
import './hello-status.js'
import { HelloCubit, POLICY } from './hello-cubit.js'
import { pageClientId, requestScope } from 'atlibs/oauth/index.js'
import { createPluginContext } from 'atlibs/plugin-context/index.js'
import { localModule } from 'atlibs/run-module/index.js'
const modules = new URL('./modules/', import.meta.url)
const local = (name) => localModule(new URL(`${name}.wasm`, modules), new URL(`${name}.json`, modules))
// On 127.0.0.1 the loopback client; deployed, the client `atlibs stage --target spa` wrote beside the page.
const clientId = pageClientId(requestScope(POLICY, ['statusphere']))
const cubit = new HelloCubit({
ctx: createPluginContext({ id: 'hello' }),
client: clientId.then((clientId) => BrowserOAuthClient.load({ clientId, handleResolver: 'https://bsky.social' })),
hello: local('hello'),
statusphere: local('statusphere'),
})
// Wiring only: component events go to the cubit, cubit state goes to the components.
const views = document.querySelectorAll('hello-count, hello-status')
document.addEventListener('count', (e) => cubit.count(e.detail))
document.addEventListener('login', (e) => cubit.login(e.detail))
document.addEventListener('status', (e) => cubit.setStatus(e.detail))
document.addEventListener('logout', () => cubit.logout())
cubit.subscribe((state) => views.forEach((view) => view.render(state)))
await cubit.init()
