{"id":18347888,"url":"https://github.com/ngasull/classic","last_synced_at":"2025-04-06T09:31:31.908Z","repository":{"id":220553211,"uuid":"749730974","full_name":"ngasull/classic","owner":"ngasull","description":"Classic web apps on modern standards","archived":false,"fork":false,"pushed_at":"2025-03-19T13:31:29.000Z","size":488,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-19T14:24:03.526Z","etag":null,"topics":["bundler","deno","js","jsx","nodejs","ts","web"],"latest_commit_sha":null,"homepage":"","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/ngasull.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":"2024-01-29T09:32:16.000Z","updated_at":"2025-03-19T13:31:32.000Z","dependencies_parsed_at":"2024-05-29T11:48:58.945Z","dependency_job_id":"d256f61d-dece-4b5b-a6cb-fbcbe4902fb1","html_url":"https://github.com/ngasull/classic","commit_stats":null,"previous_names":["ngasull/jsx-machine","ngasull/classic"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngasull%2Fclassic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngasull%2Fclassic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngasull%2Fclassic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngasull%2Fclassic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngasull","download_url":"https://codeload.github.com/ngasull/classic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247463744,"owners_count":20942935,"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":["bundler","deno","js","jsx","nodejs","ts","web"],"created_at":"2024-11-05T21:15:30.184Z","updated_at":"2025-04-06T09:31:31.705Z","avatar_url":"https://github.com/ngasull.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Classic web apps on modern standards\n\nServer-side middle-end prioritizing page load times and simplicity.\n\n## Features\n\n- **Reactive resources**\n- **Server-side async JSX**\n  - Generate dynamic HTML thanks to resources and JS\n- **Explicit client-side JavaScript boundaries**\n  - Manipulate and attach JS to sent HTML through JSX refs\n- **TypeScript-first**\n  - Even for JS manipulation\n- **Industrial-grade navigation** *(à la Remix)*\n  - Dynamic nested routes\n  - Actions through `form`s to update reactive resources\n  - Minimum amount of bytes sent over the wire\n- **Modular design**\n  - Share modules exposing HTML|JS|CSS thanks to the programmatic bundling API\n  - Extend functionalities and integrate in larger frameworks\n- **Programmatic workflow**\n  - Optimized bundling *([esbuild](https://esbuild.github.io/) under the hood)*\n  - Buildless development\n  - Simple explicit production build\n\n**Classic is not a UI library and depends on none**, but you can optionally use some.\nClassic integrates with existing technologies rather than reinventing them.\n\nTypical Classic stack:\n- [Deno](https://deno.com/) - Runtime, LSP, lint, test, DB...\n- [Hono](https://hono.dev/) - Backend router\n- Classic - Reactive HTML/JS/CSS generation\n\nNodeJS support is planned, however we strongly recommend Deno in general.\n\n## Get started\n\n```sh\n# Prompts a folder name and creates the template\ndeno run -r --allow-write=. --allow-net https://raw.githubusercontent.com/ngasull/classic/master/init.ts\n```\n\n## Code examples\n\n_Remember: everything runs server-side except what is explicitly wrapped in JS types!_\n\n### JSX Components\n\n```tsx\nimport { db } from \"./my-db.ts\";\n\nexport const YourName = async ({ userId }: { userId: string }) =\u003e {\n  const user = await db.user.find(userId);\n  return (\n    \u003cdiv\u003e\n      Your name will be {user.name}\n    \u003c/div\u003e\n  );\n};\n```\n\n### Add client-side JS bits\n\n```tsx\nimport { js } from \"classic-web/js.ts\"\n\nexport const YourName = () =\u003e {\n  return (\n    \u003cdiv\n      ref={(div) =\u003e js`${div}.innerText = \"Your name will be H4CK3D!\"`}\n    \u003e\n      Your name will be ...\n    \u003c/div\u003e\n  );\n};\n```\n\n### Bundle a JS/TS file\n\n```tsx\nimport { bundle } from \"./bundle.ts\";\n\n/*\n * Proxied to keep client code explicitly client-side and typed.\n * Check the development workflow for more info.\n */\nconst yourName = bundle.add(\"./your-name.web.ts\");\n\nexport const YourName = () =\u003e {\n  return (\n    \u003cdiv ref={(div) =\u003e yourName.hack(div, \"H4CK3D\")}\u003e\n      Your name will be ...\n    \u003c/div\u003e\n  );\n};\n```\n\n```ts\n// your-name.web.ts\n\nexport const hack = (el: HTMLElement, name: string) =\u003e {\n  el.innerText = `Your name will be ${name}`;\n};\n```\n\n### As a sharable module, for library developers\n\n```tsx\nimport type { Bundle } from \"classic-web/bundle.ts\";\n\nexport const yourName = (bundle: Bundle): JSX.Component =\u003e {\n  const yourName = bundle.add\u003ctypeof import(\"./your-name.web.ts\")\u003e(\n    \"./your-name.web.ts\",\n  );\n  return () =\u003e {\n    return (\n      \u003cdiv ref={yourName.hack}\u003e\n        Your name will be ...\n      \u003c/div\u003e\n    );\n  };\n};\n```\n\n### Hello world\n\nYou may check [hello-world example](./examples/hello-world)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngasull%2Fclassic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngasull%2Fclassic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngasull%2Fclassic/lists"}