{"id":39344890,"url":"https://github.com/coxmi/ssr-tools","last_synced_at":"2026-01-18T02:20:40.178Z","repository":{"id":208662689,"uuid":"722183770","full_name":"coxmi/ssr-tools","owner":"coxmi","description":"A collection of tools to use in SSR rendering","archived":false,"fork":false,"pushed_at":"2025-10-20T15:50:22.000Z","size":699,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-22T13:24:57.167Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coxmi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-11-22T16:00:39.000Z","updated_at":"2025-10-20T15:50:26.000Z","dependencies_parsed_at":"2023-11-23T21:21:40.292Z","dependency_job_id":"19b664d9-6341-42ba-b8da-cc38ddc3b1ca","html_url":"https://github.com/coxmi/ssr-tools","commit_stats":null,"previous_names":["coxmi/ssr-tools"],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/coxmi/ssr-tools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coxmi%2Fssr-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coxmi%2Fssr-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coxmi%2Fssr-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coxmi%2Fssr-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coxmi","download_url":"https://codeload.github.com/coxmi/ssr-tools/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coxmi%2Fssr-tools/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28526569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-18T02:20:39.160Z","updated_at":"2026-01-18T02:20:40.166Z","avatar_url":"https://github.com/coxmi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cpre\u003eNote: This library is a work in progress\u003c/pre\u003e\n\n# ssr-tools\n\nSome tools to use in SSR-rendered apps, designed primarily around islands, vite, and a next-style file router.\n\n\n\n\n### Using vite:\n\n```js\nimport preact from '@preact/preset-vite'\nimport { islands, fileRouter, client } from 'ssr-tools'\n\ndefineConfig({\n   plugins: [\n      preact(),\n      islands(),\n      fileRouter(),\n      client(),\n   ],\n   build: {\n      ssr: true \n   }\n})\n```\n\n## Plugins\n\n### `islands()`\n\nImport components as islands with a simple import:\n\n```ts\nimport { ComplexComponent } from './button.ts?island'\n\n// basic props are automatically serialised and a client-side bundle is \n// added to the manifest, with only the used island components\n\u003cComplexComponent name={'my-component'} /\u003e\n```\n\nBy default this works with Preact only, but the provider interface is simple enough that you can build one yourself for other frameworks ([see Preact example](https://github.com/coxmi/ssr-tools/tree/main/src/islands/providers/preact)). Just pass in your provider in `vite.config.ts`:\n\n```ts\nislands({\n   provider: {\n     ssr: {\n       name: 'name-of-export',\n       importFrom: 'path/that/resolves/to/ssr/wrapper',\n       importNamed: true || false\n     },\n     bundle: ({ imports, variables, code }) =\u003e `\n       // client bundle content goes here\n     `\n   }\n})\n```\n\n\n### `client()`\n\nImport anything directly into the client bundle:\n\n```ts\nimport './client.ts?client'\n```\n\n### `fileRouter()`\n\nA Next-style file router. To start, add the plugin and define a route:\n\n`vite.config.ts`\n\n```ts\ndefineConfig({\n   plugins: [\n      fileRouter({\n      \t  // default options\n         dir: 'src/pages',\n         glob: '**/*.{ts,tsx,js,jsx}',\n         removeTrailingSlash: true\n      }),\n   ],\n   build: {\n      ssr: true \n   }\n})\n\n```\n\n`src/pages/[slug].tsx`\n\n```ts\n\nexport default function page(ctx) {\n   return `\u003chtml\u003e\n      \u003cbody\u003e\n         \u003ch1\u003e${ctx.params.slug}\u003c/h1\u003e\n      \u003c/body\u003e\n   \u003c/html\u003e`\n}\n```\n\nThen add the file router middleware to your server:\n\n```ts\nimport http from 'node:http'\nimport { fileRouterMiddleware } from 'ssr-tools'\n\nconst fileRouter = await fileRouterMiddleware()\nconst app = http.createServer((req, res) =\u003e {\n   fileRouter(req, res, () =\u003e res.end())\n})\napp.listen(port)\t\n\t\n```\n\n\n#### Supported filename patterns:\n\n| File name | Route pattern | Matching paths |\n| :-- | :-- | :-- |\n| `/index.ts` | `/`| `/` |\n| `/about.ts` | `/about`| `/about` |\n| `/books/[slug].ts` | `/books/:slug`| `/books/foo`\u003cbr\u003e `/books/bar` |\n| `/books/[slug]/reviews` | `/blog/:slug/reviews`| `/blog/foo/reviews`|\n| `/api/[...all].ts` | `/api/*all`| `/api/search`\u003cbr\u003e `/api/docs/foo`\u003cbr\u003e `/api/docs/bar`|\n\n\n#### `ctx` \n\nContext is an object passed to each route handler, with the following properties:\n\n| Property | Description | Example/usage |\n| :-- | :-- | :-- |\n| `params` | Any route params from request | `{ slug: 'hello-world' }` |\n| `path` | The relative path to the requested page | `/blog/hello-world` |\n| `query` | [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object | `query.get('category')` |\n\n#### Static rendering\n\nTo render static pages, Export a `build` object to your route:\n\n`src/pages/[slug].tsx`\n\n```ts\n\nexport default build = {\n   // return an iterable, and a page will be generated for each entry\n   from: () =\u003e await getPages()\n   \n   // specify your url params\n   // (`props` is each entry from the `from` function)\n   url: props =\u003e ({\n      slug: slugify(props.title)\n   })\n}\n\n// render the content from `ctx.props`\nexport default function page(ctx) {\n   return `\u003chtml\u003e\n      \u003cbody\u003e\n         \u003ch1\u003e${ctx.props.title}\u003c/h1\u003e\n      \u003c/body\u003e\n   \u003c/html\u003e`\n}\n```\n\n### Still to complete\n\n- Custom handlers for `GET`/`HEAD`/`POST`/`PUT`/`DELETE`/`OPTIONS`/`PATCH`\n- Web-standard `Request`/`Response` arguments in all middleware and route handlers\n- `FormData` handling\n- Set props for single pages in `build.props`\n- Route path override for custom routes\n- Render statically-generated pages from middleware\n- Ability to render routes outside of Vite\n- Multi-platform support\n- And more…\n\n\n\n# Contributing\n\nContributions welcome!\n\n\n# Acknowledgements \nislands plugin adapted from [vite-plugin-voie](https://github.com/brattonross/vite-plugin-voie), and [barelyhuman](https://github.com/barelyhuman)'s [preact-island-plugins](https://github.com/barelyhuman/preact-island-plugins).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoxmi%2Fssr-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoxmi%2Fssr-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoxmi%2Fssr-tools/lists"}