{"id":15573600,"url":"https://github.com/jedireza/hapi-react-views","last_synced_at":"2025-04-05T01:04:25.515Z","repository":{"id":23838590,"uuid":"27215960","full_name":"jedireza/hapi-react-views","owner":"jedireza","description":":package: A hapi view engine for React components","archived":false,"fork":false,"pushed_at":"2022-12-16T16:09:09.000Z","size":91,"stargazers_count":230,"open_issues_count":2,"forks_count":32,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-29T00:05:49.300Z","etag":null,"topics":["hapi","javascript","nodejs","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jedireza.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}},"created_at":"2014-11-27T08:29:37.000Z","updated_at":"2024-11-24T01:15:40.000Z","dependencies_parsed_at":"2023-01-13T23:56:58.630Z","dependency_job_id":null,"html_url":"https://github.com/jedireza/hapi-react-views","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jedireza%2Fhapi-react-views","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jedireza%2Fhapi-react-views/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jedireza%2Fhapi-react-views/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jedireza%2Fhapi-react-views/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jedireza","download_url":"https://codeload.github.com/jedireza/hapi-react-views/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271519,"owners_count":20911587,"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":["hapi","javascript","nodejs","react"],"created_at":"2024-10-02T18:13:40.951Z","updated_at":"2025-04-05T01:04:25.496Z","avatar_url":"https://github.com/jedireza.png","language":"JavaScript","readme":"# hapi-react-views\n\nA hapi view engine for React components.\n\n[![Build Status](https://img.shields.io/travis/jedireza/hapi-react-views.svg)](https://travis-ci.org/jedireza/hapi-react-views)\n[![Dependency Status](https://img.shields.io/david/jedireza/hapi-react-views.svg)](https://david-dm.org/jedireza/hapi-react-views)\n[![Peer Dependency Status](https://img.shields.io/david/peer/jedireza/hapi-react-views.svg)](https://david-dm.org/jedireza/hapi-react-views?type=peer)\n[![Dev Dependency Status](https://img.shields.io/david/dev/jedireza/hapi-react-views.svg)](https://david-dm.org/jedireza/hapi-react-views?type=dev)\n\nBy default rendering is done using `ReactDOMServer.renderToStaticMarkup`. You\ncan also choose to use `ReactDOMServer.renderToString`, preserving the\n`data-react-id` attributes so re-mounting client side is possible.\n\n\n## Install\n\n```bash\n$ npm install hapi-react-views\n```\n\nNote: Your project should have it's own `react` and `react-dom` dependencies\ninstalled. We depend on these via `peerDependencies`.\n\n\n## Usage\n\nConfiguring the server manually:\n\n```js\nconst Hapi = require('@hapi/hapi');\nconst HapiReactViews = require('hapi-react-views');\nconst Vision = require('@hapi/vision');\n\nrequire('@babel/register')({\n    presets: ['@babel/preset-react', '@babel/preset-env']\n});\n\nconst main = async function () {\n    const server = Hapi.Server();\n\n    await server.register(Vision);\n\n    server.views({\n        engines: {\n            jsx: HapiReactViews\n        },\n        compileOptions: {}, // optional\n        relativeTo: __dirname,\n        path: 'views'\n    });\n\n    await server.start();\n\n    console.log(`Server is listening at ${server.info.uri}`);\n};\n\nmain();\n```\n\nNote: As of `hapi-react-views` v4.x your project must register a transpiler\nsuch as [`babel`][babel]. An alternative to this is to transpile ahead of time\nand save the result to file.\n\n[babel]: https://github.com/babel/babel\n\nNote: As of `hapi` v9.x, your project must register the [`vision`][vision]\nplugin in order for the `server.views()` and `server.render()` methods to be\navailable.\n\n[vision]: https://github.com/hapijs/vision\n\n\n## API\n\n### `server.views(options)`\n\n[Please refer to the `vision` docs on `server.views(options)` for complete\ndetails.][vision-docs]\n\n[vision-docs]: https://github.com/hapijs/vision/blob/master/API.md#serverviewsoptions\n\nWe'll be focusing on the `compileOptions` property that you can include when\npassing `options` to `server.views`.\n\nThe following `compileOptions` will customize how `hapi-react-views` works.\n\n- `compileOptions` - options object passed to the engine's compile function.\n  Defaults to `{}`.\n  - `doctype` - a simple string prepended to the response. Defaults to\n    `\u003c!DOCTYPE html\u003e`\n  - `renderMethod` - the method to invoke on `ReactDOMServer` to generate our\n    output. Available options are `renderToStaticMarkup` and `renderToString`.\n    Defaults to `renderToStaticMarkup`.\n  - `removeCache` - since transpilers tend to take a while to startup, we can\n    remove templates from the require cache so we don't need to restart the\n    server to see changes. Defaults to `'production' !== process.env.NODE_ENV`.\n  - `removeCacheRegExp` - a `RegExp` pattern string, matching modules in\n    require cache will be removed. Defaults to `undefined`.\n  - `layout` - the name of the layout file to use.\n  - `layoutPath` - the directory path of where layouts are stored.\n  - `layoutRenderMethod` - same as `renderMethod` but used for layouts.\n    Defaults to `renderToStaticMarkup`.\n\nYou can override all these `compileOptions` at runtime.\n\n```js\nconst context = { name: 'Steve' };\nconst renderOpts = {\n    runtimeOptions: {\n        doctype: '\u003c!DOCTYPE html\u003e',\n        renderMethod: 'renderToString'\n    }\n};\n\nconst output = await server.render('template', context, renderOpts);\n```\n\n[Please refer to `vision`'s docs on\n`server.render(template, context, [options], callback)` for complete details.](https://github.com/hapijs/vision/blob/master/API.md#serverrendertemplate-context-options-callback)\n\n\n## Examples\n\nBefore you can run the examples, you need to clone this repo and install the\ndependencies.\n\n```bash\n$ git clone https://github.com/jedireza/hapi-react-views.git\n$ cd hapi-react-views\n$ npm install\n```\n\n### Rendering a simple page\n\nThis example renders a component as HTML output. [View the code.][ex-simple]\n\n[ex-simple]: https://github.com/jedireza/hapi-react-views/tree/master/examples/simple\n\n```bash\n$ npm run simple-example\n```\n\n### Rendering with layouts\n\n#### Wrapper style layouts\n\nThis example renders components as HTML adding the idea of using wrapper\nlayouts. The wrapping is handled by this module, so it may feel like a bit of\nmagic since there is no direct dependency to the layout in your component\nviews. [View the code.][ex-layouts]\n\n[ex-layouts]: https://github.com/jedireza/hapi-react-views/tree/master/examples/layout\n\n```bash\n$ npm run layout-example\n```\n\n#### Component style layouts\n\nThis example renders components as HTML but adds the idea of using component\nlayouts. The component layout is a direct dependency of your view components\nwith no magic handling by this module. [View the code.][ex-comp-layouts]\n\n[ex-comp-layouts]: https://github.com/jedireza/hapi-react-views/tree/master/examples/layout-component\n\n```bash\n$ npm run layout-component-example\n```\n\n### Remounting on the client (universal/isomorphic)\n\nThis example demonstrates the idea of rendering the full page on the server and\nremounting the app view on the client side as a way to to create universal (aka\nisomorphic) applications.\n\nIt uses the wrapper layout feature, making it easy for the layout to be\nrendered without `data-react-id` attributes and the app view to be rendered\nwith them. [View the code.][ex-remount]\n\n[ex-remount]: https://github.com/jedireza/hapi-react-views/tree/master/examples/remount\n\n```bash\n$ npm run remount-example\n```\n\n\n## License\n\nMIT\n\n\n## Don't forget\n\nWhat you create with `hapi-react-views` is more important than `hapi-react-views`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjedireza%2Fhapi-react-views","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjedireza%2Fhapi-react-views","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjedireza%2Fhapi-react-views/lists"}