fix: address PR review feedback for changelog widget

- Scope wildcard CORS to only widget-consumed routes (/changelogs, /products)
- Restrict remaining public API routes to app origin via getCorsOrigins()
- Fix Swagger doc: rename pageSize → limit to match actual query param
- Fix Swagger doc: use valid product slug example (insights, not security)
- Encode entry slug/id in widget URLs to prevent path injection
- Remove unsafe `as object` cast in Prisma productSlug filter
- Handle stale content when product attribute is removed from widget
- Pin npm@10.9.2 in publish workflow for reproducibility
- Use SemVer 2.0 compliant regex for version validation
- Add keywords to widget package.json for npm discoverability
- Add .gitignore for widget dist/ directory
- Add local development section to widget README

Signed-off-by: Asitha de Silva <asithade@gmail.com>

Author: asithade

.github/workflows/npm-publish-widget.yml

@@ -30,7 +30,7 @@ jobs:
           INPUT_VERSION: ${{ inputs.version }}
         run: |
           set -euo pipefail
-          if ! echo "$INPUT_VERSION" | grep -qE '^[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9._-]+)?(\+[a-zA-Z0-9._-]+)?$'; then
+          if ! echo "$INPUT_VERSION" | grep -qE '^(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)(-((0|[1-9][0-9]*|[0-9A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9][0-9]*|[0-9A-Za-z-][0-9A-Za-z-]*))*))?(\+([0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*))?$'; then
             echo "::error::Invalid semver: $INPUT_VERSION (expected format: X.Y.Z, X.Y.Z-prerelease, or X.Y.Z+build)"
             exit 1
           fi
@@ -88,7 +88,7 @@ jobs:
         run: npm pack --dry-run
 
       - name: Upgrade npm for OIDC publishing
-        run: npm install -g npm@latest && npm --version
+        run: npm install -g npm@10.9.2 && npm --version
 
       - name: Publish to NPM
         if: ${{ !inputs.dry_run }}

apps/lfx-changelog/src/server/services/changelog.service.ts

@@ -24,7 +24,7 @@ export class ChangelogService {
 
     const where: Prisma.ChangelogEntryWhereInput = { status: 'published', product: { isActive: true } };
     if (params.productId) where.productId = params.productId;
-    if (params.productSlug) where.product = { ...(where.product as object), slug: params.productSlug };
+    if (params.productSlug) where.product = { isActive: true, slug: params.productSlug };
     if (params.query) {
       where.OR = [{ title: { contains: params.query, mode: 'insensitive' } }, { description: { contains: params.query, mode: 'insensitive' } }];
     }

apps/lfx-changelog/src/server/setup/cors.ts

@@ -14,14 +14,20 @@ import type { Express, NextFunction, Request, Response } from 'express';
  * - `/api` — conditional CORS for API-key requests (excluding chat)
  */
 export function setupCors(app: Express): void {
-  // Public API — open CORS for embeddable widget consumers; chat routes are same-origin only
+  // Widget-consumed routes — open CORS for embeddable widget on any origin
+  const widgetCors = cors({ origin: '*', methods: ['GET', 'HEAD', 'OPTIONS'], maxAge: 86400 });
+  app.use('/public/api/changelogs', widgetCors);
+  app.use('/public/api/products', widgetCors);
+
+  // Remaining public API routes (search, blogs, chat, etc.) — restricted to app origin
   app.use('/public/api', (req: Request, res: Response, next: NextFunction) => {
-    if (req.path.startsWith('/chat')) {
+    // Skip paths already handled by widgetCors above to avoid double-applying
+    if (req.path.startsWith('/changelogs') || req.path.startsWith('/products')) {
       next();
       return;
     }
     cors({
-      origin: '*',
+      origin: getCorsOrigins(),
       methods: ['GET', 'HEAD', 'OPTIONS'],
       maxAge: 86400,
     })(req, res, next);

apps/lfx-changelog/src/server/swagger/paths/public-changelogs.path.ts

@@ -17,9 +17,9 @@ publicChangelogRegistry.registerPath({
   request: {
     query: z.object({
       page: z.coerce.number().optional().openapi({ description: 'Page number (default: 1)' }),
-      pageSize: z.coerce.number().optional().openapi({ description: 'Items per page (default: 10)' }),
+      limit: z.coerce.number().optional().openapi({ description: 'Items per page (default: 10)' }),
       productId: z.string().optional().openapi({ description: 'Filter by product ID' }),
-      productSlug: z.string().optional().openapi({ description: 'Filter by product slug (e.g., "security", "easycla")' }),
+      productSlug: z.string().optional().openapi({ description: 'Filter by product slug (e.g., "insights", "easycla")' }),
     }),
   },
   responses: {

packages/changelog-widget/.gitignore

@@ -0,0 +1,4 @@
+# Copyright The Linux Foundation and each contributor to LFX.
+# SPDX-License-Identifier: MIT
+
+dist/

packages/changelog-widget/README.md

@@ -220,6 +220,29 @@ lfx-changelog::part(date) {
 }
 ```
 
+## Local Development
+
+To test the widget locally against your dev server:
+
+1. Start the backend:
+
+   ```bash
+   yarn start
+   ```
+
+2. Build the widget (from the widget package directory):
+
+   ```bash
+   cd packages/changelog-widget
+   yarn build
+   ```
+
+3. Open `packages/changelog-widget/test.html` in your browser.
+
+The test page includes light/dark theme demos, CSS custom property overrides, and an error state scenario — all pointed at `http://localhost:4204`.
+
+For live-reload during development, run `yarn dev` in the widget package to watch for source changes and rebuild automatically.
+
 ## SSR Compatibility
 
 The widget is SSR-safe. On the server, `customElements.define()` is skipped (guarded by `typeof window !== 'undefined'`). The element renders nothing during SSR and hydrates on the client.

packages/changelog-widget/package.json

@@ -18,6 +18,13 @@
   "files": [
     "dist"
   ],
+  "keywords": [
+    "changelog",
+    "widget",
+    "web-component",
+    "lfx",
+    "linux-foundation"
+  ],
   "sideEffects": true,
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

packages/changelog-widget/src/lfx-changelog.ts

@@ -74,8 +74,12 @@ export class LfxChangelogElement extends SafeHTMLElement {
     if (oldValue === newValue) return;
 
     if (name === 'product' || name === 'limit' || name === 'base-url') {
-      if (this.isConnected && this.product) {
+      if (!this.isConnected) return;
+      if (this.product) {
         this.loadChangelogs();
+      } else {
+        this.abortController?.abort();
+        this.showError('Missing required "product" attribute');
       }
     }
     // Theme changes are handled via CSS :host([theme="dark"]) — no re-render needed

packages/changelog-widget/src/renderer.ts

@@ -58,7 +58,7 @@ function el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs?: Record<string
 }
 
 export function renderCard(entry: ChangelogEntry, baseUrl: string): HTMLElement {
-  const entryUrl = `${baseUrl}/entry/${entry.slug || entry.id}`;
+  const entryUrl = `${baseUrl}/entry/${encodeURIComponent(entry.slug || entry.id)}`;
   const date = entry.publishedAt ? formatDate(entry.publishedAt) : formatDate(entry.createdAt);
 
   const metaChildren: (Node | string)[] = [];