{"id":15377789,"url":"https://github.com/tbranyen/transform-tagged-diffhtml","last_synced_at":"2026-01-20T15:32:17.916Z","repository":{"id":140666556,"uuid":"59542852","full_name":"tbranyen/transform-tagged-diffhtml","owner":"tbranyen","description":"A Babel plugin transform for diffHTML tagged template strings","archived":false,"fork":false,"pushed_at":"2017-02-27T06:17:00.000Z","size":117,"stargazers_count":3,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T14:46:39.471Z","etag":null,"topics":["diffhtml"],"latest_commit_sha":null,"homepage":null,"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/tbranyen.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-05-24T05:26:04.000Z","updated_at":"2021-05-07T15:46:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"58dbac83-7caf-4d4e-a975-a67401247160","html_url":"https://github.com/tbranyen/transform-tagged-diffhtml","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"d35cc2985994aa5396491576ea3d4bdd7e8df60f"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/tbranyen/transform-tagged-diffhtml","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbranyen%2Ftransform-tagged-diffhtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbranyen%2Ftransform-tagged-diffhtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbranyen%2Ftransform-tagged-diffhtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbranyen%2Ftransform-tagged-diffhtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tbranyen","download_url":"https://codeload.github.com/tbranyen/transform-tagged-diffhtml/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbranyen%2Ftransform-tagged-diffhtml/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28606142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T14:45:23.139Z","status":"ssl_error","status_checked_at":"2026-01-20T14:44:16.929Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["diffhtml"],"created_at":"2024-10-01T14:13:48.957Z","updated_at":"2026-01-20T15:32:17.886Z","avatar_url":"https://github.com/tbranyen.png","language":"JavaScript","readme":"# diffHTML Babel Plugin\n\nLatest stable version: 1.0.0-rc.4\n\n[![Build Status](https://travis-ci.org/tbranyen/transform-tagged-diffhtml.svg?branch=master)](https://travis-ci.org/tbranyen/transform-tagged-diffhtml)\n\n\u003e Plugin for babel 6.x to enable tagged template compilation for diffHTML\n\nThis plugin transforms tagged template strings in your projects to\n[diffHTML](https://github.com/tbranyen/diffhtml) Virtual Tree's. \n\n**Note!* This plugin has been built for use in Babel 6.x environments, and will\nnot work with Babel 5.x ( *deprecated*) or older versions.**\n\n### How to install\n\n``` javascript\nnpm i --save-dev diffhtml transform-tagged-diffhtml\n```\n\n### How to use\n\nAdd the plugin to your `package.json` and update the plugin section in your\n`.babelrc` file. Or if your Babel settings are located inside the\n`package.json` - update the plugin section there.\n\nYou will then need to tag your diffHTML templates with the `html` function,\nexamples below. This will *only* optimize tagged templates, allowing you to\nuse the diffHTML runtime build avoiding runtime HTML parsing.\n\nExample on a `.babelrc` file that will work with diffHTML:\n\n\n``` javascript\n{   \n  \"plugins\": [\"transform-tagged-diffhtml\"]\n}\n```\n\nWrite a View `view.js`:\n\n``` javascript\n// Render a div with dynamic children and onclick\nfunction renderComponent(time) {\n  diff.innerHTML(document.body, html`\n    \u003cbutton onclick=${e =\u003e renderComponent(new Date())}\u003eGet time\u003c/button\u003e\n    \u003coutput\u003e${time}\u003c/output\u003e\n  `);\n}\n\nrenderComponent(new Date());\n```\n\nThen compile it:\n\n``` sh\nbabel view.js -o view.es5.js\n```\n\n\n### Specifying options\n\nYou can override three identifiers that are used within the transform:\n\n- **tagName** - The tagged template function name default is `html`.\n- **createElement** - The create element function default is `diff.createElement`\n- **createAttribute** - The create attribute function default is `diff.createAttribute`\n\n\nSpecifying the options in your `.babelrc`:\n\n``` javascript\n{\n  plugins: [\n    [\"transform-tagged-diffhtml\", {\n      \"tagName\": \"diff.html\",\n      \"createElement\": \"createEl\",\n      \"createAttribute\": \"createAttr\"\n    }]\n  ]\n}\n```\n\nHow your source would look reflecting the options:\n\n``` javascript\nimport {\n  createElement as createEl,\n  createAttribute as createAttr,\n} from 'diffhtml';\n\ndiff.html`\n  \u003cdiv\u003e\u003c/div\u003e\n`;\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftbranyen%2Ftransform-tagged-diffhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftbranyen%2Ftransform-tagged-diffhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftbranyen%2Ftransform-tagged-diffhtml/lists"}