{"id":26422361,"url":"https://github.com/jollytoad/deno_http_render_fns","last_synced_at":"2025-03-18T02:05:13.106Z","repository":{"id":153049268,"uuid":"621770466","full_name":"jollytoad/deno_http_render_fns","owner":"jollytoad","description":"Functions to help render content, accompanies deno_http_fns","archived":false,"fork":false,"pushed_at":"2023-11-29T16:47:35.000Z","size":32,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-15T22:12:17.000Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jollytoad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-03-31T10:54:09.000Z","updated_at":"2024-04-15T22:12:17.000Z","dependencies_parsed_at":"2023-11-29T17:51:22.368Z","dependency_job_id":null,"html_url":"https://github.com/jollytoad/deno_http_render_fns","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jollytoad%2Fdeno_http_render_fns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jollytoad%2Fdeno_http_render_fns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jollytoad%2Fdeno_http_render_fns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jollytoad%2Fdeno_http_render_fns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jollytoad","download_url":"https://codeload.github.com/jollytoad/deno_http_render_fns/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244141437,"owners_count":20404836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2025-03-18T02:04:00.769Z","updated_at":"2025-03-18T02:05:13.099Z","avatar_url":"https://github.com/jollytoad.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTTP Rendering Functions\n\nA collection of functions for rendering documents from a HTTP server, designed\nto complement `http_fns`, but can be used with other routers.\n\n## Request Handlers\n\nAll functions create a Request handler function of roughly the form:\n\n`(req: Request, data: unknown) =\u003e Response | Promise\u003cResponse\u003e`\n\nThey are intended to be used with [http_fns](https://deno.land/x/http_fns)\nfunctions.\n\n```ts\nDeno.serve(\n  handle([\n    byPattern(\n      [\"/\", \"/:path*\"],\n      byMethod({\n        GET: mapData(asHomePageProps, renderHTML(HomePage)),\n      }),\n    ),\n  ]),\n);\n\nfunction asHomePageProps(req: Request, match: URLPatternResult): HomePageProps {\n  return {\n    // Props for the HomePage component\n  };\n}\n```\n\nSee the [demo](./demo/serve.tsx) for a full example, which you can also run\nusing a choice of JSX framework:\n\n```sh\ndeno task demo:preact\ndeno task demo:hast\ndeno task demo:stream\n```\n\n### renderJSON\n\n`renderJSON() =\u003e (req: Request, data: unknown) =\u003e Response`\n\nRenders the given `data` as a JSON body in a Response with the content type of\n`application/json`.\n\n### renderHTML\n\n`renderHTML(component: FunctionComponent) =\u003e (req: Request, props: unknown) =\u003e Response`\n\nRenders a JSX function `component` with the given `props` as a HTML body in a\nResponse with the content type of `text/html`.\n\nNOTE: This treats JSX purely as a templating language, it only support function\ncomponents (ie. not class based), and doesn't support hooks, hydration or other\nexotic features beyond the scope of JSX itself.\n\nThe choice of JSX runtime and serialization is determined via your import map.\n\n`renderHTML` requires a couple of bare module specifiers to be mapped:\n\n- `\"$jsx/serialize.ts\"` - module that perform serialization of the JSX runtime\n  nodes\n- `\"$jsx/types.ts\"` - provides a `ComponentType` type\n- `\"$jsx/jsx-runtime\"` - the regular JSX runtime module\n\nYour `deno.json` must also be configure to make use of the runtime:\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"$jsx\"\n  }\n}\n```\n\n(NOTE: the dollar prefix `$jsx` is just to avoid any potential confusion with as\nexisting npm module).\n\nWe provide three flavours of JSX framework here:\n\n#### Preact\n\nMakes use of [Preact](https://preactjs.com/) JSX runtime to build a vdom, and\n[preact-render-to-string](https://github.com/preactjs/preact-render-to-string)\nto serialize to HTML.\n\nThis requires further bare module specifiers, here's an example of a import map\nto support this:\n\n```json\n{\n  \"imports\": {\n    \"$jsx/\": \"https://deno.land/x/http_render_fns@v0.1.0/jsx-preact/\",\n    \"$jsx/jsx-runtime\": \"https://deno.land/x/http_render_fns@v0.1.0/jsx-preact/jsx-runtime.ts\",\n\n    \"preact\": \"https://esm.sh/preact@10.19.2\",\n    \"preact/\": \"https://esm.sh/*preact@10.19.2/\",\n    \"preact-render-to-string\": \"https://esm.sh/*preact-render-to-string@6.3.1\"\n  }\n}\n```\n\n#### Hast\n\nMakes use of the [hastscript](https://github.com/syntax-tree/hastscript) JSX\nruntime to build a [hast](https://github.com/syntax-tree/hast) syntax tree, and\n[hast-util-to-html](https://github.com/syntax-tree/hast-util-to-html) to\nserialize to HTML.\n\nThis requires further bare module specifiers, here's an example of a import map\nto support this:\n\n```json\n{\n  \"imports\": {\n    \"$jsx/\": \"https://deno.land/x/http_render_fns@v0.1.0/jsx-hast/\",\n    \"$jsx/jsx-runtime\": \"https://deno.land/x/http_render_fns@v0.1.0/jsx-hast/jsx-runtime.ts\",\n\n    \"hastscript\": \"https://esm.sh/hastscript@8.0.0\",\n    \"hastscript/\": \"https://esm.sh/hastscript@8.0.0/\",\n    \"hast-util-to-html\": \"https://esm.sh/hast-util-to-html@9.0.0\"\n  }\n}\n```\n\n#### Async Streaming\n\nThis is a JSX runtime that renders directly to a stream of strings. It also\nsupports asynchronous components.\n\nThis has been moved into it's own [module](https://deno.land/x/jsx_stream), and\njust requires the jsx mappings:\n\n```json\n{\n  \"imports\": {\n    \"$jsx/\": \"https://deno.land/x/jsx_stream@v0.0.13/\",\n    \"$jsx/jsx-runtime\": \"https://deno.land/x/jsx_stream@v0.0.13/jsx-runtime.ts\"\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjollytoad%2Fdeno_http_render_fns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjollytoad%2Fdeno_http_render_fns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjollytoad%2Fdeno_http_render_fns/lists"}