{"id":26943685,"url":"https://github.com/stackpress/reactus","last_synced_at":"2025-04-02T17:16:44.659Z","repository":{"id":282512500,"uuid":"948476873","full_name":"stackpress/reactus","owner":"stackpress","description":"Reactive React Template Engine","archived":false,"fork":false,"pushed_at":"2025-03-30T07:48:02.000Z","size":505,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T07:51:14.207Z","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":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stackpress.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-14T12:06:05.000Z","updated_at":"2025-03-30T07:48:05.000Z","dependencies_parsed_at":"2025-03-15T05:24:12.933Z","dependency_job_id":"1e0b0224-8443-4b0f-bbf7-4662f27f39c0","html_url":"https://github.com/stackpress/reactus","commit_stats":null,"previous_names":["stackpress/reactus"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackpress%2Freactus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackpress%2Freactus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackpress%2Freactus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackpress%2Freactus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackpress","download_url":"https://codeload.github.com/stackpress/reactus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246856664,"owners_count":20844974,"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-04-02T17:16:43.943Z","updated_at":"2025-04-02T17:16:44.650Z","avatar_url":"https://github.com/stackpress.png","language":"TypeScript","readme":"# ☢️ Reactus\n\n[![NPM Package](https://img.shields.io/npm/v/reactus.svg?style=flat)](https://www.npmjs.com/package/reactus)\n[![Commits](https://img.shields.io/github/last-commit/stackpress/reactus)](https://github.com/stackpress/reactus/commits/main/)\n[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat)](https://github.com/stackpress/reactus/blob/main/LICENSE)\n\nReactive React Template Engine\n\n## Install\n\n```bash\nnpm i -D typescript ts-node tsx @types/node @types/react @types/react-dom\nnpm i reactus react react-dom\n```\n\n## Development Server\n\nThe following example shows how to use reactus in development mode \nwith `node:http`. Create a `server.ts` file in your project root \nwith the following code.\n\n```js\nimport { createServer } from 'node:http';\nimport { dev } from 'reactus';\n\nconst engine = dev({ cwd: process.cwd() });\n\nconst server = createServer(async (req, res) =\u003e {\n  //handles public, assets and hmr\n  await engine.http(req, res);\n  //if middleware was triggered\n  if (res.headersSent) return;\n  // home page\n  if (req.url === '/') {\n    res.setHeader('Content-Type', 'text/html');\n    res.end(await engine.render('@/home', { title: 'Home' }));\n    return;\n  }\n  res.end('404 Not Found');\n});\n\nserver.listen(3000, () =\u003e {\n  console.log('Server running at http://localhost:3000/');\n});\n```\n\nThen create a `home.tsx` file in your project root \nwith the following code.\n\n```js\nexport default function HomePage() {\n  return (\n    \u003c\u003e\n      \u003ch1\u003eReactus\u003c/h1\u003e\n      \u003cp\u003eThis is the Reactus template engine\u003c/p\u003e\n    \u003c/\u003e\n  )\n}\n```\n\nNext start the server and visit `http://localhost:3000/`.\n\n```bash\n$ npx tsx server.ts\n```\n\n\n### Development Configuration\n\nThe following are valid options you can use during development.\n\n```js\ntype DevelopConfig = {\n  //base path (used in vite)\n  basePath: string,\n  //client script route prefix used in the document markup\n  //ie. /client/[id][extname]\n  //\u003cscript type=\"module\" src=\"/client/[id][extname]\"\u003e\u003c/script\u003e\n  //\u003cscript type=\"module\" src=\"/client/abc123.tsx\"\u003e\u003c/script\u003e\n  clientRoute: string,\n  //template wrapper for the client script (tsx)\n  clientTemplate: string,\n  //filepath to a global css file\n  cssFile?: string,\n  //current working directory\n  cwd: string,\n  //template wrapper for the document markup (html)\n  documentTemplate: string,\n  //file system\n  fs?: FileSystem,\n  //vite plugins\n  plugins: PluginOption[],\n  //original vite options (overrides other settings related to vite)\n  vite?: ViteConfig,\n  //ignore files in watch mode\n  watchIgnore?: string[]\n}\n```\n\n\n## Building Files\n\nThe following example shows how to use reactus to build your files \nfor production use. Create a `build.ts` file in your project root \nwith the following code.\n\n```js\nimport path from 'node:path';\nimport { build } from 'reactus';\n\nconst cwd = process.cwd();\nconst engine = build({\n  cwd,\n  //path where to save assets (css, images, etc)\n  assetPath: path.join(cwd, 'public/assets'),\n  //path where to save and load (live) the client scripts (js)\n  clientPath: path.join(cwd, 'public/client'),\n  //path where to save and load (live) the server script (js)\n  pagePath: path.join(cwd, '.build/pages')\n});\n\n//add page templates to build\nawait engine.set('@/home');\n\n//build everything\nconst responses = [\n  ...await engine.buildAllClients(),\n  ...await engine.buildAllAssets(),\n  ...await engine.buildAllPages()\n].map(response =\u003e {\n  const results = response.results;\n  if (typeof results?.contents === 'string') {\n    results.contents = results.contents.substring(0, 100) + ' ...';\n  }\n  return results;\n});\n\nconsole.log(responses);\n```\n\nNext run the build.\n\n```bash\n$ npx tsx build.ts\n```\n\n### Build Configuration\n\nThe following are valid options you can use during build.\n\n```js\ntype BuildConfig = {\n  //path where to save assets (css, images, etc)\n  assetPath: string,\n  //base path (used in vite)\n  basePath: string,\n  //path where to save the client scripts (js)\n  clientPath: string,\n  //template wrapper for the client script (tsx)\n  clientTemplate: string,\n  //filepath to a global css file\n  cssFile?: string,\n  //current working directory\n  cwd: string,\n  //file system\n  fs?: FileSystem,\n  //path where to save and load (live) the server script (js)\n  pagePath: string,\n  //template wrapper for the page script (tsx)\n  pageTemplate: string,\n  //vite plugins\n  plugins: PluginOption[],\n}\n```\n\n## Previewing Production\n\nThe following example shows how to use reactus to preview your build \nfiles with `node:http`, that will be used in production before you \ndeploy. Install `sirv` to serve static assets.\n\n```bash\n$ npm i sirv\n```\n\nNext, create a `preview.ts` file in your project root with the \nfollowing code.\n\n```js\nimport { createServer } from 'node:http';\nimport path from 'node:path';\nimport sirv from 'sirv';\nimport { serve } from 'reactus';\n\nconst cwd = process.cwd();\nconst engine = serve({\n  cwd,\n  //ie. /client/[id][extname]\n  //\u003cscript type=\"module\" src=\"/client/[id][extname]\"\u003e\u003c/script\u003e\n  //\u003cscript type=\"module\" src=\"/client/abc123.tsx\"\u003e\u003c/script\u003e\n  clientRoute: '/client',\n  //css route prefix used in the document markup\n  //ie. /assets/[id][extname]\n  //\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/client/[id][extname]\" /\u003e\n  //\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/assets/abc123.css\" /\u003e\n  cssRoute: '/assets',\n  //path where to load the server script (js)\n  pagePath: path.join(cwd, '.build/pages')\n});\n// Init `sirv` handler\nconst assets = sirv(path.join(cwd, 'public'), {\n  maxAge: 31536000, // 1Y\n  immutable: true\n});\n\nconst server = createServer(async (req, res) =\u003e {\n  // home page\n  if (req.url === '/') {\n    res.setHeader('Content-Type', 'text/html');\n    res.end(await engine.render('@/home'));\n    return;\n  }\n  //static asset server\n  assets(req, res);\n  //if static asset was triggered\n  if (res.headersSent) return;\n  res.end('404 Not Found');\n});\n\nserver.listen(3000, () =\u003e {\n  console.log('Server running at http://localhost:3000/');\n});\n```\n\nNext start the server and visit `http://localhost:3000/`.\n\n```bash\n$ npx tsx preview.ts\n```\n\n### Preview Configuration\n\nThe following are valid options you can use during preview.\n\n```js\ntype ProductionConfig = {\n  //client script route prefix used in the document markup\n  //ie. /client/[id][extname]\n  //\u003cscript type=\"module\" src=\"/client/[id][extname]\"\u003e\u003c/script\u003e\n  //\u003cscript type=\"module\" src=\"/client/abc123.tsx\"\u003e\u003c/script\u003e\n  clientRoute: string,\n  //style route prefix used in the document markup\n  //ie. /assets/[id][extname]\n  //\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/client/[id][extname]\" /\u003e\n  //\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/assets/abc123.css\" /\u003e\n  cssRoute: string,\n  //current working directory\n  cwd: string,\n  //template wrapper for the document markup (html)\n  documentTemplate: string,\n  //file system\n  fs?: FileSystem,\n  //path where to save and load (live) the server script (js)\n  pagePath: string,\n  //template wrapper for the page script (tsx)\n  //vite plugins\n  plugins: PluginOption[]\n}\n```\n\nSee [examples](https://github.com/stackpress/reactus/tree/main/examples)\nfor more examples with **TailwindCSS** and **UnoCSS**.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackpress%2Freactus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackpress%2Freactus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackpress%2Freactus/lists"}