{"id":16844814,"url":"https://github.com/stephanhoyer/tagl","last_synced_at":"2025-03-22T05:31:21.224Z","repository":{"id":66695875,"uuid":"141342606","full_name":"StephanHoyer/tagl","owner":"StephanHoyer","description":"universal hyperscript helper for fancy syntax","archived":false,"fork":false,"pushed_at":"2024-04-12T07:02:02.000Z","size":146,"stargazers_count":22,"open_issues_count":3,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-13T17:52:17.303Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/StephanHoyer.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}},"created_at":"2018-07-17T20:54:25.000Z","updated_at":"2024-04-15T10:33:13.751Z","dependencies_parsed_at":null,"dependency_job_id":"ee313b8a-3e19-469f-a840-23fa59413e83","html_url":"https://github.com/StephanHoyer/tagl","commit_stats":{"total_commits":26,"total_committers":2,"mean_commits":13.0,"dds":"0.11538461538461542","last_synced_commit":"fda49cf48c5dfd1e84e17b5d3b3458b36b123147"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephanHoyer%2Ftagl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephanHoyer%2Ftagl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephanHoyer%2Ftagl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephanHoyer%2Ftagl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StephanHoyer","download_url":"https://codeload.github.com/StephanHoyer/tagl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244912800,"owners_count":20530764,"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":"2024-10-13T12:56:44.146Z","updated_at":"2025-03-22T05:31:20.868Z","avatar_url":"https://github.com/StephanHoyer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tagl\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/StephanHoyer/tagl.svg)](https://greenkeeper.io/)\n![](http://img.badgesize.io/StephanHoyer/tagl/master/index.js.svg?compression=gzip)\n\nuniversal hyperscript helper for fancy syntax\n\n## why\n\nWriting hyperscript can be cumbersome. This might be an alternative to JSX and alike\n\n## what\n\nImagine instead of\n\n```jsx\n\u003cbutton className=\"btn\"\u003eClick Me\u003c/button\u003e\n```\n\nor this\n\n```js\nh('button.btn', 'Click Me')\n```\n\nyou can write\n\n```js\nbutton.btn('Click Me')\n```\n\nWell thats possible with _tagl_\n\n## how\n\nInit _tagl_ with your hyperscript lib, e. g. [mithril.js](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcICGAHLA6AVmCADQgBmAljEagNqgB2GAthGiLgBbzNQkiwA9g0Qj2AHiQUAbgAIKSALwAdTDlUA+cQHop0jSAC+xRizbp4GAOZQAtMwrxOAJyoEipISIhj0XsPCynLKKspY2ABRkAK4MCBTCEeEAcmbEsrBQGGCQYOm4BRjOVmAAlLLAygyyss4Q8NHO1cwRtClpsgW4mdm5ALoEghQMEQDkuKOl+YXFZVWGpfyQMPHCNCAATKgbRiYgTKzs2HiE-F6i8Oz+gcCyAEbR8PDC6XrpnACM6WBYGNWGISCVSq11k0goEAA7oCIuVFBpZHpcGBBKwAMJZHIRKo1T5jTjQKCCSbEHGImTY6o1WQ-P5jACeglkJLJNVpDGRqIgAHknBBnBjeviKCyqVMyXpKdT7o9nhy7vARpUqdLhJkKLAANaoWSwkIIjAwZzwfGE4mlVmyYzMyGcDDwSZki0MZ1VZi4ZiCWIm47pW7gqFWxaeVFYKj8tAMaJQKCkZZweAJBjrD4ABlQAE5dqZDuhujkzsILuwjH1SFBhpqaPR9mZ2A4nK4+KRGnx0Nx4FgwKhtNpYlhNVZuqjtA2XFQAAIfXDTgBso8c46g7n48HpWHM4Fgriwl2MOc34WbIFb7A7XZ7fYYA6HQmY2iPU5nuA22jvno5p1Ia437DA24oXdS1IA5D2sKBZEhRdZDHJsjCAA).\n\n```js\nconst t = tagl(function(tagName, classes, ...args) {\n  return m([tagName, ...classes].join('.'), ...args)\n})\n```\n\nor [react](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcICGAHLA6AVmCADQgBmAljEagNqgB2GAthGiLgBbzNQkiwA9g0Qj2AHiQUAbgAIKSALwAdTDlUA+cQHop0jSAC+xRizbp4GAOZQAtACcIGBASKkhIiGPQew8WZyyirKWNgAUZACuDAgUwmGhAHJmxLKwUBhgkGCpuHmwnFRIjgwAlLLAygyysjD+WPaCWGBBFYZVNb71jVitBUUltAAMALod8mSyYQ1NsgBkc1PwAJ5YEIKTM70AhIrBqn72FAxWquULU9tbuCtrpeWV1TWyWy3BW+OdhVDFXn3fvwYuDAUAosAgYQAjKVxu0no54JF7NUAEpOFywRwYRAAURgrBECWsyVYqQA8gAjfBweC4TJgChWBhhT5tYis17sp41YBpDJZEkQVCyWh5XDpekQHIvHpgcX8sCC2QAH2VsgA5OqRgRBMcwuqNeVjONSrl8gCSjCGIYrfxIDBYsIaCAAOyoABMABYjCYQExWOxsHhCPwPKJ4OwuhVZBTIvB4MJUnpUpxIakwFgMNVDK1OFUqlHpBQIAB3Vp6YGCVgAYQVLKeqf1nGgUEE6tN4z09eesgzWf1y0Ehq5Pb7QLAVYgZPgzfstfpTYo7ZHsg7Ty7rNj8eEuAp8GZjx7NWEtbBAGthWFyooNLIMDB7PAmy221ae8YNSXONj2yaqlaqjRZx4AAETJABZXASiQCB7DCItS1SINSlDKssCoWD2ApDAKWgO1oBpOIGGdSFUCGH1TADdBxSyVDPG8EAjBGUhQQYM8aHoP0zHYLEXBg6RoCaAlaRDUgkT4dBuHgZpUG0bRoiwM8rHFKttF4+B5OYJA1PRWl+MErBhNcfhbnMcBMQoLAI2MSizPU2wkCrXB9NbQyvBEtwQHE9gpJkuSFKUlTmB04CHNUyItJChAwuYZyIAE1yjNEkBTPYMALKsiiuKolLrD4MT7AkkBfLAWT5IYRTlKEYLQigAABSFcEa91tGq5gd2S1L0HSo5MsMZjsrM2rZBLCgZ1kdSjCAA)\n\n```js\nconst t = tagl(function(tagName, classes, ...children) {\n  let props = {}\n  const prop = children[0]\n  if (prop \u0026\u0026 typeof prop !== 'string' \u0026\u0026 !prop.type) {\n    props = prop\n    children = children.slice(1)\n  }\n  return React.createElement(\n    tagName,\n    Object.assign({}, props, {\n      className: [...classes, props.className || ''].join(' '),\n    }),\n    ...children\n  )\n})\n```\n\n```js\n// myView.js\nconst { div, span, button } = t\n\ndiv.someClass(\n  span.someOtherClass('hi'),\n  button.btn({ onclick: () =\u003e {} }, 'Click Me')\n)\n```\n\nsame in plain mithril would be\n\n```js\nconst m = require('mithril')\nm('div.someClass', [\n  m('span.someOtherClass', 'hi'),\n  m('button.btn', { onclick: () =\u003e {} }, 'Click Me'),\n])\n```\n\n## components\n\nThere are two ways to create and use components. One global and one local. Use global components for general reusable widgets like date picker or dropdowns and alike.\n\n```js\n// define it and set it on the tagl instance\n\n// `myDatePicker` must be a component definition that is supported by your vdom library\n// it will be used instead of the tag name\nt.datePicker = myDatePicker\n\n// use it\n\nconst { div, datePicker } = t\n\ndiv(\n  'choose date:',\n  datePicker({\n    value: new Date(),\n  })\n)\n```\n\nSometimes you just need sub-state at a specific point and you don't want to create a globaly available component. In this case you can use local components.\n\n```js\nconst { div } = t\n\n// define it and store it in a variable\n// `myDatePicker` must be a component definition that is supported by your vdom library\n// it will be used instead of the tag name\nconst myLocalComponent = t(localComponent)\n\n// use it\ndiv(\n  'fancy stuff:',\n  myLocalComponent(\n    {\n      someAttrs: 'someValue',\n    },\n    'some',\n    'child',\n    'content'\n  )\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephanhoyer%2Ftagl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstephanhoyer%2Ftagl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephanhoyer%2Ftagl/lists"}