@feedlog-ai/react 0.0.32 → 0.0.34

package/README.md

@@ -132,7 +132,15 @@ export default defineConfig({
 });
 ```
 
-**Note:** The SSR plugin requires `@stencil/ssr`. With Vite 7, install it using `npm install @stencil/ssr --legacy-peer-deps` (Stencil SSR currently declares `vite@^6.x` as a peer dependency).
+**Note:** The SSR plugin requires `@stencil/ssr`, which declares `vite@^6.x` as a peer dependency. For Vite 7 projects, add this override to your `package.json` to avoid peer dependency conflicts:
+
+```json
+"overrides": {
+  "@stencil/ssr": {
+    "vite": "$vite"
+  }
+}
+```
 
 **Troubleshooting:** If you see `Expected ">" but found "{"` during the SSR build, the Stencil transform may be failing on complex TypeScript generics in files that import from `@feedlog-ai/react`. Refactor inline generics to type aliases, e.g.:
 
@@ -146,6 +154,54 @@ interface EventDetail { a: string; b: number }
 event: CustomEvent<EventDetail>
 ```
 
+### SSR Limitations
+
+The compiler-based SSR (used by Vite, Remix, and Next.js with `feedlogSSR` / `withFeedlogSSR`) performs **static AST analysis at build time** and cannot resolve runtime values. Dynamic props such as `apiKey={apiKey}` or `theme={theme}` are serialized as their identifier names instead of actual values, which causes broken API calls and incorrect display.
+
+- **SSR-safe components** (pre-rendered with Declarative Shadow DOM): `FeedlogBadge`, `FeedlogButton`, `FeedlogCard`
+- **Excluded from SSR** (rendered at request time by React; no pre-rendered DSD): `FeedlogIssuesClient`, `FeedlogIssueComponent`, `FeedlogIssues`, `FeedlogIssuesList` — these receive props correctly at runtime but may show a brief empty state before client hydration
+
+This is a [documented limitation](https://stenciljs.com/docs/server-side-rendering) of Stencil's compiler approach ("Static props only").
+
+### Copy Instructions: Full SSR for Issues
+
+If you need the issues list fully server-rendered (no flash of empty content), create a custom wrapper that fetches issues on the server and passes the data to `FeedlogIssues`.
+
+<details>
+<summary>LLM instructions: Build an SSR-compatible issues component</summary>
+
+Copy the following into your LLM to generate a custom SSR-compatible issues component:
+
+---
+
+**Context:** The `@stencil/ssr` compiler cannot resolve dynamic props at build time. For full SSR of the issues list, fetch data on the server and pass it to `FeedlogIssues`. Use `FeedlogSDK` from `@feedlog-ai/core` or direct `fetch()` to the Feedlog API.
+
+**Implementation patterns:**
+
+- **Next.js App Router:** Create an async Server Component that calls `new FeedlogSDK({ apiKey }).fetchIssues()`, then renders `<FeedlogIssues issues={issues} ... />`. Import `FeedlogIssues` from `@feedlog-ai/react`.
+- **Next.js Pages Router:** Use `getServerSideProps` or `getStaticProps` to fetch issues, pass to the page, and render `<FeedlogIssues issues={issues} />`.
+- **Vite / Remix:** Fetch in the route loader, pass data to the page component, and render `FeedlogIssues` with the fetched `issues` array.
+
+**Important:** The wrapper must run on the server so props are resolved at request time. Import from `@feedlog-ai/react` (not `@feedlog-ai/react/ssr-components` or `@feedlog-ai/react/next` for the issues components).
+
+**Example (Next.js App Router):**
+
+```tsx
+// app/issues/page.tsx
+import { FeedlogIssues } from '@feedlog-ai/react';
+import { FeedlogSDK } from '@feedlog-ai/core';
+
+export default async function IssuesPage() {
+  const sdk = new FeedlogSDK({ apiKey: process.env.FEEDLOG_API_KEY! });
+  const { issues } = await sdk.fetchIssues({ limit: 10 });
+  return <FeedlogIssues issues={issues} theme="light" />;
+}
+```
+
+---
+
+</details>
+
 ### Event Handling
 
 ```tsx

package/dist/ssr-components.d.ts

@@ -0,0 +1,8 @@
+/**
+ * SSR-safe components only.
+ * Use this entry point for @stencil/ssr to avoid serializing dynamic props
+ * (e.g. apiKey) as their identifier names. Components with complex/runtime
+ * props (FeedlogIssuesClient, FeedlogIssueComponent, etc.) are excluded.
+ */
+export { FeedlogBadge, FeedlogButton, FeedlogCard } from './index';
+//# sourceMappingURL=ssr-components.d.ts.map

package/dist/ssr-components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-components.d.ts","sourceRoot":"","sources":["../src/ssr-components.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/dist/ssr-components.js

@@ -0,0 +1,8 @@
+/**
+ * SSR-safe components only.
+ * Use this entry point for @stencil/ssr to avoid serializing dynamic props
+ * (e.g. apiKey) as their identifier names. Components with complex/runtime
+ * props (FeedlogIssuesClient, FeedlogIssueComponent, etc.) are excluded.
+ */
+export { FeedlogBadge, FeedlogButton, FeedlogCard } from './index';
+//# sourceMappingURL=ssr-components.js.map

package/dist/ssr-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-components.js","sourceRoot":"","sources":["../src/ssr-components.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/dist/start.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"start.d.ts","sourceRoot":"","sources":["../src/start.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;4DAKmB,CAAC;WAAe,CAAC;;CACvD,CAAC"}
+{"version":3,"file":"start.d.ts","sourceRoot":"","sources":["../src/start.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;4DAKI,CAAC;WAAe,CAAC;;CACxC,CAAC"}

package/dist/start.js

@@ -1,6 +1,6 @@
 import { stencilSSR } from '@stencil/ssr';
 export const feedlogSSR = () => stencilSSR({
-    module: import('@feedlog-ai/react'),
+    module: import('@feedlog-ai/react/ssr-components'),
     from: '@feedlog-ai/react',
     hydrateModule: import('@feedlog-ai/webcomponents/hydrate'),
     serializeShadowRoot: { default: 'declarative-shadow-dom' },

package/dist/start.js.map

@@ -1 +1 @@
-{"version":3,"file":"start.js","sourceRoot":"","sources":["../src/start.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAC7B,UAAU,CAAC;IACT,MAAM,EAAE,MAAM,CAAC,mBAAmB,CAAC;IACnC,IAAI,EAAE,mBAAmB;IACzB,aAAa,EAAE,MAAM,CAAC,mCAAmC,CAAC;IAC1D,mBAAmB,EAAE,EAAE,OAAO,EAAE,wBAAwB,EAAE;CAC3D,CAAC,CAAC"}
+{"version":3,"file":"start.js","sourceRoot":"","sources":["../src/start.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAC7B,UAAU,CAAC;IACT,MAAM,EAAE,MAAM,CAAC,kCAAkC,CAAC;IAClD,IAAI,EAAE,mBAAmB;IACzB,aAAa,EAAE,MAAM,CAAC,mCAAmC,CAAC;IAC1D,mBAAmB,EAAE,EAAE,OAAO,EAAE,wBAAwB,EAAE;CAC3D,CAAC,CAAC"}

package/dist/vite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;4DAKmB,CAAC;WAAe,CAAC;;CACvD,CAAC"}
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;4DAKI,CAAC;WAAe,CAAC;;CACxC,CAAC"}

package/dist/vite.js

@@ -1,6 +1,6 @@
 import { stencilSSR } from '@stencil/ssr';
 export const feedlogSSR = () => stencilSSR({
-    module: import('@feedlog-ai/react'),
+    module: import('@feedlog-ai/react/ssr-components'),
     from: '@feedlog-ai/react',
     hydrateModule: import('@feedlog-ai/webcomponents/hydrate'),
     serializeShadowRoot: { default: 'declarative-shadow-dom' },

package/dist/vite.js.map

@@ -1 +1 @@
-{"version":3,"file":"vite.js","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAC7B,UAAU,CAAC;IACT,MAAM,EAAE,MAAM,CAAC,mBAAmB,CAAC;IACnC,IAAI,EAAE,mBAAmB;IACzB,aAAa,EAAE,MAAM,CAAC,mCAAmC,CAAC;IAC1D,mBAAmB,EAAE,EAAE,OAAO,EAAE,wBAAwB,EAAE;CAC3D,CAAC,CAAC"}
+{"version":3,"file":"vite.js","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAC7B,UAAU,CAAC;IACT,MAAM,EAAE,MAAM,CAAC,kCAAkC,CAAC;IAClD,IAAI,EAAE,mBAAmB;IACzB,aAAa,EAAE,MAAM,CAAC,mCAAmC,CAAC;IAC1D,mBAAmB,EAAE,EAAE,OAAO,EAAE,wBAAwB,EAAE;CAC3D,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedlog-ai/react",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "description": "React bindings for Feedlog Toolkit Web Components",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -16,6 +16,11 @@
       "require": "./dist/next.js",
       "types": "./dist/next.d.ts"
     },
+    "./ssr-components": {
+      "import": "./dist/ssr-components.js",
+      "require": "./dist/ssr-components.js",
+      "types": "./dist/ssr-components.d.ts"
+    },
     "./vite": {
       "import": "./dist/vite.js",
       "require": "./dist/vite.js",
@@ -43,7 +48,7 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@feedlog-ai/webcomponents": "^0.0.32"
+    "@feedlog-ai/webcomponents": "^0.0.34"
   },
   "devDependencies": {
     "@jest/test-sequencer": "^29.7.0",