{"id":15397290,"url":"https://github.com/bloomca/welgo","last_synced_at":"2025-04-15T22:30:51.569Z","repository":{"id":65520299,"uuid":"111141074","full_name":"Bloomca/welgo","owner":"Bloomca","description":"Library to render your server-side templates using react-like components","archived":false,"fork":false,"pushed_at":"2019-01-19T06:46:07.000Z","size":96,"stargazers_count":23,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T03:41:29.188Z","etag":null,"topics":["jsx","node","react-like","server-side-rendering","ui-library"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bloomca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-17T19:09:18.000Z","updated_at":"2021-05-18T21:24:17.000Z","dependencies_parsed_at":"2023-01-27T02:45:15.884Z","dependency_job_id":null,"html_url":"https://github.com/Bloomca/welgo","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bloomca%2Fwelgo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bloomca%2Fwelgo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bloomca%2Fwelgo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bloomca%2Fwelgo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bloomca","download_url":"https://codeload.github.com/Bloomca/welgo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249165881,"owners_count":21223343,"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":["jsx","node","react-like","server-side-rendering","ui-library"],"created_at":"2024-10-01T15:36:55.116Z","updated_at":"2025-04-15T22:30:51.223Z","avatar_url":"https://github.com/Bloomca.png","language":"JavaScript","readme":"# Welgo\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![Build Status](https://travis-ci.org/Bloomca/welgo.svg?branch=master)](https://travis-ci.org/Bloomca/welgo)\n\nServer-side library with react-like components (JSX supported), which is supposed to be used instead of traditional templating language, like Jade/Pug, Handlebars, etc.\n\n- Zero dependencies\n- React-inspired components\n- Async components (fetch data where you need it)\n\n## Getting started\n\n```js\nconst Welgo = require(\"welgo\");\nconst htm = require(\"htm\");\n\nconst html = htm.bind(Welgo.createElement);\n\nconst express = require(\"express\");\n\nconst app = express();\n\nasync function Page(props, { getTopics }) {\n  // you can call async functions inside components\n  const topics = await getTopics();\n\n  return html`\n    \u003cul\u003e\n      ${topics.map(\n          topic =\u003e html`\n            \u003cli\u003e\u003c${Topic} ...${topic} /\u003e\u003c/li\u003e\n          `)}\n    \u003c/ul\u003e\n  `;\n}\n\nfunction Topic({ title, description }) {\n  return html`\n    \u003c${Welgo.Fragment}\u003e\n      \u003ch3\u003e${title}\u003c/h3\u003e\n      \u003cp\u003e${description}\u003c/p\u003e\n    \u003c//\u003e\n  `;\n}\n\napp.get(\"*\", async (req, res) =\u003e {\n  const page = await Welgo.render(\n    html`\u003c${Page} /\u003e`,\n    {\n      getTopics: () =\u003e {\n        return new Promise(resolve =\u003e\n          setTimeout(resolve, 100, [\n            { title: \"some title\", description: \"some description\" }\n          ])\n        );\n      }\n    }\n  );\n  res.send(page);\n});\n\napp.listen(3000, () =\u003e console.log('I am up and running at port 3000!'));\n```\n\nI used library [htm](https://github.com/developit/htm), which is especially nifty since you don't need to transpile your code (we don't do it very often in Node.js codebase). However, you can use both `Welgo.createElement()` and JSX setup, if it works better for you.\n\n\u003e see a full [example](https://github.com/Bloomca/welgo-example)\n\n## Installation\n\n`welgo` is published on npm, you will need to save it into your dependencies:\n\n```sh\nnpm i --save welgo\n```\n\nYou'll need to use Node 9+ in order to use it. If you want to use it on the client-side, you can do, but keep in mind that source code is not transpiled to ES5.\n\n## API\n\nIf you are familiar with [React](https://reactjs.org/docs/getting-started.html), then you know pretty much all of it. Since there is no lifecycle on the server, all components are _functions only_, with two parameters:\n\n- passed properties\n- resolvers\n\nSecond parameter, named `resolvers` is data which was passed at the root of the rendering. You can treat it as a context, and keep in mind that after we render the page, you still can use this data to do something before sending the reply (e.g. tweak the metadata).\n\nAnother big difference is that all components are asynchronous by default, so you can easily do the following:\n\n```js\nasync function Movie(props, { getMovie }) {\n  const movie = await getMovie(props.id);\n}\n```\n\nTo render your page, you should use `render` function, which is asynchronous by default as well (since any component can be asynchronous):\n\n```js\nconst { render, createElement } from 'welgo';\n\nasync function handle(req, res) {\n  const page = await render(createElement(Page), {\n    query: req.query,\n    user: {\n      id: 'qw21cgl'\n    },\n    getMovie: ...\n  });\n\n  res.send(page);\n}\n```\n\nThe whole API is:\n\n- createElement\n- render\n- Fragment\n\n## Caveats\n\nThere are several caveats to be aware of:\n\n- you can use both `class` and `className` properties, they work the same\n- you can pass a string to the `style` property\n- if you pass an object to the `style` property, you have to use hyphen-case, **not camelCase**!\n\n## Testing\n\nFor testing, you have two choices. You can just use `render` method to render HTML string and search through it by yourself, or you can use [weltest](https://github.com/Bloomca/weltest) library. This library provides capabilities to search by components, and wraps your queries in [jsdom](https://github.com/jsdom/jsdom), so you can use regular DOM API.\n\n## Limitations\n\nComponents have no lifecycle hooks: there is no real \"life\" on the server, we get a request, form a reply and send it to the user, done. If you want to do anything on the client-side, you should do it in your JavaScript files using query selectors in the browser. This library has zero runtime and it is designed to be so.\n\n## Babel configuration\n\nIf you want to use this library with Babel, the main trick here is to set up a custom pragma in [react preset](https://babeljs.io/docs/en/babel-preset-react):\n\n```js\n{\n  presets: [\n    [\n      \"@babel/preset-react\",\n      {\n        pragma: \"Welgo.createElement\",\n        pragmaFrag: \"Welgo.Fragment\"\n      }\n    ]\n  ]\n}\n```\n\n## Rationale\n\nRecently client-side frameworks achieved a lot, namely components became a standard approach. One of the biggest advantage is composition, so that we can move our components around our app without big pain.\n\nOn the server, though, we usually have a lot of templates, and after some time it becomes extremely fragile to move partials around. The biggest problem is that templates have no idea about data, so we need to pass from the top-level, and therefore it is hard to explain after some time, do we need to fetch all this data in order to render this exact view?\n\nThis approach makes all templates functions, which are asynchronous by default, and you can fetch data in them before rendering. Also, all components can share the same data which can be injected at the top level, so you don't have to pass the data all the way down manually.\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbloomca%2Fwelgo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbloomca%2Fwelgo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbloomca%2Fwelgo/lists"}