{"id":21221384,"url":"https://github.com/nearmap/react-entry-loader","last_synced_at":"2025-07-10T12:31:53.099Z","repository":{"id":33016972,"uuid":"149593513","full_name":"nearmap/react-entry-loader","owner":"nearmap","description":"Use webpack entry modules as templates for generating HTML assets.","archived":false,"fork":false,"pushed_at":"2023-10-16T15:47:06.000Z","size":863,"stargazers_count":3,"open_issues_count":30,"forks_count":2,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-11-16T07:20:48.813Z","etag":null,"topics":["loader","react","webpack","webpack-plugin"],"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/nearmap.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":"2018-09-20T10:39:58.000Z","updated_at":"2023-08-14T22:35:30.000Z","dependencies_parsed_at":"2023-01-14T23:04:17.654Z","dependency_job_id":null,"html_url":"https://github.com/nearmap/react-entry-loader","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nearmap%2Freact-entry-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nearmap%2Freact-entry-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nearmap%2Freact-entry-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nearmap%2Freact-entry-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nearmap","download_url":"https://codeload.github.com/nearmap/react-entry-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225638718,"owners_count":17500619,"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":["loader","react","webpack","webpack-plugin"],"created_at":"2024-11-20T22:27:23.035Z","updated_at":"2024-11-20T22:27:25.239Z","avatar_url":"https://github.com/nearmap.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @nearmap/react-entry-loader\n\nUse webpack entry modules as templates for generating HTML assets.\n\n## Installation\n\n```bash\nnpm install --save-dev react-entry-loader\n```\n\n## Usage\n\nYou need to include a single [ReactEntryLoaderPlugin](./src/plugin.js) in your\nwebpack config to handle the HTML asset generation.\n\nThe loader itself can be used like any other loader in webpack.\nThere is a little [helper function](./src/entry.js) for defining entry modules,\nwhich makes it a bit more readable than using plain strings with query params.\nAll options that is are not a loader option are interpreted as template props.\nThey will be forwarded to the template during compile time.\n\n[webpack.config.babel.js](./examples/webpack.config.babel.js):\n\n```js\nimport ReactEntryLoaderPlugin from 'react-entry-loader/plugin';\nimport reactEntry from 'react-entry-loader/entry';\n\nexport default ()=\u003e ({\n  entry: {\n    page1: reactEntry({output: 'page1.html', title: 'test'})('./src/page1.js'),\n    page2: 'react-entry-loader?output=page2.html!./src/page2.js'\n  },\n  plugins: {\n    new ReactEntryLoaderPlugin()\n  }\n});\n```\n\nThe loader expects a JS module that has a React component as the default export.\nThis component is a mix of template and entry module code.\n\n[./examples/page1.js](./examples/page1.js):\n\n```js\nimport React from \"react\";\n\nimport { render } from \"react-entry-loader/render\";\nimport { Module, Styles, Scripts } from \"react-entry-loader/injectors\";\n\nimport App from \"./app\";\nimport theme from \"./page1.css\";\n\nconst Html = ({ scripts, styles, title }) =\u003e (\n  \u003chtml\u003e\n    \u003chead\u003e\n      \u003ctitle\u003e{title}\u003c/title\u003e\n      \u003cStyles files={styles} /\u003e\n      \u003cScripts files={scripts} async /\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003cdiv id=\"page1-app\" className={theme.root}\u003e\n        \u003cModule onLoad={render(\"page1-app\")}\u003e\n          \u003cApp theme={theme} /\u003e\n        \u003c/Module\u003e\n      \u003c/div\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n);\n\nexport default Html;\n```\n\nThe child components of `\u003cModule onLoad={...}\u003e` and any code that they depend on\nis treated as the webpack entry module code, as is the code being called in `onLoad={some-render-or-init-function}`.\n\nThe entry module code will be extracted along with the `some-render-or-init-function`.\nThe latter should be a function with the interface `render(...children)` that\nrenders the `children` into the DOM at run-time.\nYou can use [react-entry-loader/render](./src/render.js)'s `render(elementId)` or `hydrate(elementId)` render function factories for this or write your own.\n\nExtracted Entry Module:\n\n```js\nimport React from \"react\";\nimport { render } from \"react-entry-loader/render\";\nimport App from \"./app\";\nimport theme from \"./page1.css\";\nrender(\"page1-app\")(\u003cApp theme={theme} /\u003e);\n```\n\nThe template code is everything left over after the child components and `some-render-or-init-function` code has been removed.\n\nExtracted Template:\n\n```js\nimport React from \"react\";\nimport { Module, Styles, Scripts } from \"react-entry-loader/injectors\";\nimport theme from \"./page1.css\";\n\nconst Html = ({ scripts, styles, title }) =\u003e (\n  \u003chtml\u003e\n    \u003chead\u003e\n      \u003ctitle\u003e{title}\u003c/title\u003e\n      \u003cStyles files={styles} /\u003e\n      \u003cScripts files={scripts} async /\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003cdiv id=\"page1-app\" className={theme.root}\u003e\n        \u003cModule /\u003e\n      \u003c/div\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n);\nexport default Html;\n```\n\nNote when using `\u003cModule hydratable ... /\u003e` the child components and their\ndependencies will be left in place for compile time rendering.\n\nThe loader will return the entry module code to webpack and will\nsend the extracted template code to the [ReactEntryLoaderPlugin](./src/plugin.js).\n\nThe plugin will render every entry module's template at the end of\nthe webpack compilation process to generate HTML assets.\n\nThe final chunks that an entry module depends on will be passed as\n`scripts` and `styles` props to the template components.\nThese can then be passed to the `\u003cScripts\u003e` and `\u003cStyles\u003e` components that come\nwith the [injectors](./src/injectors.js) module to reference the files in generated HTML.\n\n## Running the Examples\n\n```bash\nnpm ci\nnpx run\n```\n\nThis starts a webserver and you can see the running app at http://localhost:8080/page1.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnearmap%2Freact-entry-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnearmap%2Freact-entry-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnearmap%2Freact-entry-loader/lists"}