Add Comments to Your SolidJS App

npm install fastcomments-solidjs

import { FastCommentsCommentWidget } from 'fastcomments-solidjs';

export default function App() {
  return <FastCommentsCommentWidget tenantId="demo" urlId="some-page-id" />;
}

Solid 不会自动跟踪任意对象的深层变更，因此在首次渲染之后的配置更改必须显式推送。每个组件都接受返回一个句柄的 apiRef；在 createEffect 中调用 handle.update(partial) 以驱动响应性：

import { createEffect, createSignal } from 'solid-js';
import { FastCommentsCommentWidget, type FastCommentsCommentWidgetHandle } from 'fastcomments-solidjs';

export default function Paginated() {
  const [page, setPage] = createSignal(0);
  let handle: FastCommentsCommentWidgetHandle | undefined;
  createEffect(() => handle?.update({ urlId: `product-${page()}` }));

  return (
    <>
      <button onClick={() => setPage(page() + 1)}>next</button>
      <FastCommentsCommentWidget
        apiRef={(h) => (handle = h)}
        tenantId="demo"
        urlId={`product-${page()}`}
      />
    </>
  );
}

update() 在任何时候调用都是安全的：

• 在脚本加载之前：partial 会被暂存并在初始化时应用。
• 在异步初始化期间（reviews-summary、user-activity-feed）：partial 会被排队并在回调解析时应用。
• 初始化之后：它会直接转发到实时组件的 .update() 方法。

命令式句柄 API

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // 最新的活动实例（或挂载前为 null）
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // 实例准备好时触发一次
  update: (partial: Partial<Config>) => void; // 合并并推送配置
}

对于 .update() 未覆盖的命令式操作，例如 openProfile，请使用 getInstance()：

const openProfile = () =>
  (handle?.getInstance() as { openProfile?: (o: { userId: string }) => void } | null)
    ?.openProfile?.({ userId: 'demo' });

来自 fastcomments-react 的每个小部件都可使用相同的名称：

挂载到现有元素的组件

FastCommentsCollabChatWidget 和 FastCommentsImageChatWidget 会挂载到调用者提供的元素。传入一个 targetRef 访问器，该访问器在元素挂载后返回该元素：

import { FastCommentsImageChatWidget } from 'fastcomments-solidjs';

export default function ImageChat() {
  let img: HTMLImageElement | undefined;
  return (
    <>
      <img ref={img} src="/screenshot.png" alt="" />
      <FastCommentsImageChatWidget
        tenantId="demo"
        urlId="my-image"
        targetRef={() => img}
      />
    </>
  );
}

区域

传入 region="eu" 以将小部件流量通过欧盟集群路由。

完整的展示应用位于 examples/example-showcase/。它镜像 React showcase 并涵盖每个 小部件以及常见流程（暗色模式、分页、SSO、回调）。

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # 库 -> dist/
npm test            # vitest 冒烟测试
npm run build:demo  # 展示 -> demo-dist/