{"id":17177313,"url":"https://github.com/lexi-lambda/template-dom","last_synced_at":"2025-03-24T21:43:19.711Z","repository":{"id":145601664,"uuid":"67956725","full_name":"lexi-lambda/template-dom","owner":"lexi-lambda","description":"A library for creating (V)DOM nodes using ES2015 tagged template strings","archived":false,"fork":false,"pushed_at":"2016-09-11T22:38:52.000Z","size":6,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-30T02:10:03.720Z","etag":null,"topics":[],"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/lexi-lambda.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-11T22:01:54.000Z","updated_at":"2016-09-12T11:27:58.000Z","dependencies_parsed_at":"2023-06-05T14:31:01.277Z","dependency_job_id":null,"html_url":"https://github.com/lexi-lambda/template-dom","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"a0508ff329e77af4544eb61a5f44c4a19237c794"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lexi-lambda%2Ftemplate-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lexi-lambda%2Ftemplate-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lexi-lambda%2Ftemplate-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lexi-lambda%2Ftemplate-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lexi-lambda","download_url":"https://codeload.github.com/lexi-lambda/template-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245359253,"owners_count":20602322,"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-15T00:03:37.789Z","updated_at":"2025-03-24T21:43:19.670Z","avatar_url":"https://github.com/lexi-lambda.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# template-dom [![Build Status](https://travis-ci.org/lexi-lambda/template-dom.svg?branch=master)](https://travis-ci.org/lexi-lambda/template-dom)\n\nThis package provides a way to use ES2015 tagged template strings to create (virtual) DOM nodes without needing to use HTML syntax or any runtime parsing. It works with any (V)DOM library you want to use.\n\n## Installation\n\n```\n$ npm install template-dom\n```\n\n## Quick Start\n\n### With `virtual-dom`\n\n```js\nimport templateDom from 'template-dom';\nimport h from 'virtual-dom/h';\n\nconst D = templateDom(h);\n```\n\n### With `react`\n\n```js\nimport templateDom from 'template-dom';\nimport { createElement } from 'react';\n\nconst D = templateDom(createElement);\n```\n\n### Creating an element\n\n```js\nconst page =\n  D.div `\n    ${D.h1 `Hello, world!`}\n    ${D.p `This is a paragraph with some ${D.strong `bold`} text.`}\n    ${D.button({ class: 'big' }) `Click Me`}`\n```\n\n## More Details\n\nThe `template-dom` module’s default export is a function that expects a single argument. The provided argument should be a function with the following signature:\n\n```\n(tag, attrs, children) -\u003e any\n```\n\nThis function will be used by `template-dom` to create a node from a tagged template string.\n\nThe base function provided by `template-dom` is `element`, which allows creating nodes of a particular type. For example, using React:\n\n```js\nconst el = templateDom(React.createElement).element;\n\nconst PageHeader = ({ text }) =\u003e\n  el('h1', { className: 'page-header' }) `Page: ${text}`;\n```\n\nThe first argument to `element` does not need to be a string, so it can be used with React components, for example.\n\nIn addition to the `element` function, `template-dom` provides helper functions that are partially-applied versions of `element`, specialized to HTML tags. These can be used instead of passing a string to the `element` function:\n\n```js\nconst { div, h1, p } = templateDom(React.createElement);\n\nconst page = div `\n  ${h1 `Hello!`}\n  ${p `Here is some text.`}`;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flexi-lambda%2Ftemplate-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flexi-lambda%2Ftemplate-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flexi-lambda%2Ftemplate-dom/lists"}