Skip to content

feat: add path params support to HTML loader API - #132

Open
field123 wants to merge 1 commit into
masterfrom
feat/html-loader-path-params
Open

feat: add path params support to HTML loader API#132
field123 wants to merge 1 commit into
masterfrom
feat/html-loader-path-params

Conversation

@field123

Copy link
Copy Markdown
Collaborator

Summary

  • Add support for dynamic route parameters ($ctx.params, $ctx.query) in the HTML Render API
  • Enables SSR of dynamically-routed pages via the HTML loader

New Query Parameters

Parameter Type Description Example
pageRoute string Route pattern with dynamic segments /products/[slug]
pageParams JSON Path parameter values {"slug":"my-product"}
pageQuery JSON Query string parameters {"utm_source":"google"}

Changes

  • Add page-params.ts module with pure validation/parsing functions
  • Update gen-html-bundle.ts to accept and pass params to render functions
  • Update loader.ts route handlers to parse new query params
  • Update hydrater.ts to read data attributes and pass to hydrate

Known Limitations

  • $ctx.pageRoute and $ctx.pagePath won't work after hydration due to limitations in the @plasmicapp/loader-react npm package
  • $ctx.params and $ctx.query will work correctly

Test plan

  • Test SSR with pageParams renders $ctx.params.slug correctly
  • Test hydration preserves params
  • Test backward compatibility (requests without new params still work)
  • Test error handling for invalid JSON
Add support for dynamic route parameters ($ctx.params, $ctx.query) in the
HTML Render API, enabling SSR of dynamically-routed pages.

New query parameters:
- pageRoute: Route pattern (e.g., /products/[slug])
- pageParams: JSON object of param values (e.g., {"slug":"hello"})
- pageQuery: JSON object of query string values

Changes:
- Add page-params.ts module with pure validation/parsing functions
- Update gen-html-bundle.ts to accept and pass params to render
- Update loader.ts route handlers to parse new query params
- Update hydrater.ts to read data attributes and pass to hydrate

Note: $ctx.pageRoute and $ctx.pagePath won't work after hydration due to
limitations in the @plasmicapp/loader-react npm package.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant