@blogmcp/community 0.0.0-stage → 0.2.0

package/src/vue.ts

@@ -0,0 +1,242 @@
+/**
+ * `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>` and (M2) `<KbNotificationCentre>`, `<KbBadge>`,
+ * `<KbMemberSettings>`, `<KbProfile>`, `<KbWelcome>` for Vue / Nuxt: each mounts its element on the
+ * client, after hydration, and removes it on unmount. Each renders one empty `<div>` as the mount point —
+ * nothing else, on the server or the client — so the element sits where the component does and the page's
+ * markup is otherwise the site's alone.
+ *
+ *   <KbDiscussion :article-id="article.id" :sign-in-href="localePath('/login')" />
+ *
+ * A site served under a path names it: `site-base="/blog"` on a managed blog (its proxy is `/blog/api/community`;
+ * the host's own `/api/` there is kb-api, which no element may call).
+ */
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch, type PropType } from 'vue'
+import type { CommunityTransport } from '@blogmcp/sdk/community'
+import type { CommunityRoutes } from './core/attrs'
+import type { DiscussionRealtime } from './core/realtime'
+import type {
+  MountBadgeOptions,
+  MountDiscussionOptions,
+  MountMemberSettingsOptions,
+  MountMyCommunityOptions,
+  MountNoticeFormOptions,
+  MountNotificationCentreOptions,
+  MountProfileOptions,
+  MountWelcomeOptions,
+} from './mount'
+
+type Mounter<O> = (o: O & { container: Element }) => () => void
+
+/** The shared life of a wrapper: mount after hydration, remount when an option changes, unmount with it. */
+function useMount<O extends object>(kind: string, options: () => O, load: () => Promise<Mounter<O>>) {
+  const host = ref<HTMLElement | null>(null)
+  let unmount: (() => void) | null = null
+  let gone = false
+  let ticket = 0
+  async function mount(): Promise<void> {
+    const mine = ++ticket
+    const mountFn = await load()
+    if (gone || mine !== ticket || !host.value) return
+    unmount?.()
+    unmount = mountFn({ ...options(), container: host.value })
+  }
+  onMounted(() => void mount())
+  watch(
+    () => JSON.stringify(options(), (_k, v: unknown) => (typeof v === 'function' ? '[fn]' : v)),
+    () => void mount(),
+  )
+  onBeforeUnmount(() => {
+    gone = true
+    unmount?.()
+    unmount = null
+  })
+  return () => h('div', { ref: host, 'data-blogmcp-community': kind })
+}
+
+function defined<T extends object>(o: T): T {
+  const out = {} as T
+  for (const [k, v] of Object.entries(o)) if (v !== undefined && v !== null) (out as Record<string, unknown>)[k] = v
+  return out
+}
+
+export const KbDiscussion = defineComponent({
+  name: 'KbDiscussion',
+  props: {
+    articleId: { type: String, required: true },
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    pollMs: Number,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+    /** M2: `createRealtimeSession` of `@blogmcp/sdk/community/realtime`. */
+    realtime: Function as PropType<DiscussionRealtime>,
+  },
+  setup(props) {
+    return useMount<MountDiscussionOptions>(
+      'discussion',
+      () => defined({ ...props }) as MountDiscussionOptions,
+      async () => (await import('./mount')).mountDiscussion as Mounter<MountDiscussionOptions>,
+    )
+  },
+})
+
+export const KbNoticeForm = defineComponent({
+  name: 'KbNoticeForm',
+  props: {
+    target: Object as PropType<MountNoticeFormOptions['target']>,
+    articleId: String,
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    turnstileSiteKey: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountNoticeFormOptions>(
+      'notice-form',
+      () => defined({ ...props }) as MountNoticeFormOptions,
+      async () => (await import('./mount')).mountNoticeForm as Mounter<MountNoticeFormOptions>,
+    )
+  },
+})
+
+export const KbMyCommunity = defineComponent({
+  name: 'KbMyCommunity',
+  props: {
+    decisionId: String,
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountMyCommunityOptions>(
+      'my-community',
+      () => defined({ ...props }) as MountMyCommunityOptions,
+      async () => (await import('./mount')).mountMyCommunity as Mounter<MountMyCommunityOptions>,
+    )
+  },
+})
+
+export const KbNotificationCentre = defineComponent({
+  name: 'KbNotificationCentre',
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountNotificationCentreOptions>(
+      'notification-centre',
+      () => defined({ ...props }) as MountNotificationCentreOptions,
+      async () => (await import('./mount')).mountNotificationCentre as Mounter<MountNotificationCentreOptions>,
+    )
+  },
+})
+
+export const KbBadge = defineComponent({
+  name: 'KbBadge',
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    routes: Object as PropType<CommunityRoutes>,
+    pollMs: Number,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountBadgeOptions>(
+      'badge',
+      () => defined({ ...props }) as MountBadgeOptions,
+      async () => (await import('./mount')).mountBadge as Mounter<MountBadgeOptions>,
+    )
+  },
+})
+
+export const KbMemberSettings = defineComponent({
+  name: 'KbMemberSettings',
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    swPath: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountMemberSettingsOptions>(
+      'member-settings',
+      () => defined({ ...props }) as MountMemberSettingsOptions,
+      async () => (await import('./mount')).mountMemberSettings as Mounter<MountMemberSettingsOptions>,
+    )
+  },
+})
+
+export const KbProfile = defineComponent({
+  name: 'KbProfile',
+  props: {
+    handle: { type: String, required: true },
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountProfileOptions>(
+      'profile',
+      () => defined({ ...props }) as MountProfileOptions,
+      async () => (await import('./mount')).mountProfile as Mounter<MountProfileOptions>,
+    )
+  },
+})
+
+export const KbWelcome = defineComponent({
+  name: 'KbWelcome',
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountWelcomeOptions>(
+      'welcome',
+      () => defined({ ...props }) as MountWelcomeOptions,
+      async () => (await import('./mount')).mountWelcome as Mounter<MountWelcomeOptions>,
+    )
+  },
+})
+
+export type {
+  MountDiscussionOptions,
+  MountNoticeFormOptions,
+  MountMyCommunityOptions,
+  MountNotificationCentreOptions,
+  MountBadgeOptions,
+  MountMemberSettingsOptions,
+  MountProfileOptions,
+  MountWelcomeOptions,
+  CommunityRoutes,
+  DiscussionRealtime,
+}