{"id":18041622,"url":"https://github.com/katyo/snabbdom-edge","last_synced_at":"2025-04-09T19:21:30.307Z","repository":{"id":10017189,"uuid":"64104729","full_name":"katyo/snabbdom-edge","owner":"katyo","description":"Client/Server support for Snabbdom","archived":false,"fork":false,"pushed_at":"2023-04-17T09:05:33.000Z","size":541,"stargazers_count":2,"open_issues_count":7,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T12:01:41.909Z","etag":null,"topics":[],"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/katyo.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":"2016-07-25T04:57:54.000Z","updated_at":"2023-08-21T16:59:47.000Z","dependencies_parsed_at":"2024-09-26T06:49:34.270Z","dependency_job_id":null,"html_url":"https://github.com/katyo/snabbdom-edge","commit_stats":{"total_commits":45,"total_committers":4,"mean_commits":11.25,"dds":0.5333333333333333,"last_synced_commit":"a6fc575eeeaf884c2e572f73034446bea5bccfc8"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katyo%2Fsnabbdom-edge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katyo%2Fsnabbdom-edge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katyo%2Fsnabbdom-edge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katyo%2Fsnabbdom-edge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/katyo","download_url":"https://codeload.github.com/katyo/snabbdom-edge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248095205,"owners_count":21046809,"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-30T16:11:04.216Z","updated_at":"2025-04-09T19:21:30.285Z","avatar_url":"https://github.com/katyo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Snabbdom Edge\n\n[![npm version](https://badge.fury.io/js/snabbdom-edge.svg)](https://badge.fury.io/js/snabbdom-edge)\n[![npm downloads](https://img.shields.io/npm/dm/snabbdom-edge.svg)](https://www.npmjs.com/package/snabbdom-edge)\n[![Build Status](https://travis-ci.com/katyo/snabbdom-edge.svg?branch=master)](https://travis-ci.com/katyo/snabbdom-edge)\n\nThis package includes two functions, which useful for client-server applications built with **snabbdom**.\nLike the **snabbdom** this library is focused on simplicity, modularity, powerful features and performance.\n\n## Modules\n\nThis package implements next **snabbdom** modules:\n\n* Element attributes (*snabbdom-edge/__component__/attributes.js*)\n* Embedded styles (*snabbdom-edge/__component__/style.js*)\n* Toggleable classes (*snabbdom-edge/__component__/class.js*)\n* Dataset attributes (*snabbdom-edge/__component__/dataset.js*)\n\nThe element properties module (snabbdom-edge/__component__/*props.js*) does not\nimplemented here because properties exists exclusively on client-side.\n\n## Write HTML\n\nOn the server side you usually want produce HTML output from virtual nodes.\nThe `writeHTML` function does this thing for you.\n\nThe supported features includes attributes, style and class.\n\nThe another way to do this is using `snabbdom-to-html` package.\nThis package is a simple and clean alternative for it.\n\nTypical usage:\n\n**TypeScript**:\n\n```typescript\n\nimport {init as initHTMLWriter} from 'snabbdom-edge/write-html';\nimport {classModule} from 'snabbdom-edge/write-html/class';\nimport {styleModule} from 'snabbdom-edge/write-html/style';\nimport {datasetModule} from 'snabbdom-edge/write-html/dataset';\nimport {attributesModule} from 'snabbdom-edge/write-html/attributes';\n\n// Init HTML render function with all available modules\nconst writeHTML = initHTMLWriter([\n  classModule, // makes it support toggled classes\n  // the props is only on client-side\n  styleModule, // handles styling on elements\n  datasetModule, // handles data-attributes\n  attributesModule // handles all other attributes\n]);\n\n// in request handler we generate virtual DOM\nlet vnode = render_tree();\n\n// write HTML to response body directly to use lesser RAM\nwriteHTML(vnode, response);\n\n// OR generate HTML string to write\nconst html = writeHTML(vnode);\nresponse.write(html);\n\n```\n\n**JavaScript**:\n\n```javascript\n\n// Init HTML render function with all available modules\nvar writeHTML = require('snabbdom-edge/write-html').init([\n  require('snabbdom-edge/write-html/class').default, // makes it support toggled classes\n  // the props is only on client-side\n  require('snabbdom-edge/write-html/style').default, // handles styling on elements\n  require('snabbdom-edge/write-html/dataset').default, // handles data-attributes\n  require('snabbdom-edge/write-html/attributes').default // handles all other attributes\n]);\n\n// in request handler we generate virtual DOM\nvar vnode = render_tree();\n\n// write HTML to response body directly to use lesser RAM\nwriteHTML(vnode, response);\n\n// OR generate HTML string to write\nvar html = writeHTML(vnode);\nresponse.write(html);\n\n```\n\n## Read DOM\n\nOn the client side you may read initial DOM before first `patch` when initializing your application.\nThe `readDOM` function does this thing.\n\nThis piece of code has been ported from `snabbdom-virtualize` with key differences:\n\n1. Event listeners has been removed because this is useless for our purposes.\n2. Decoding HTML entities using `html-entities` package instead of DOM API calls.\n3. Added support of the single text child in non-text vnode.\n\nUsage example:\n\n**TypeScript**:\n\n```typescript\n\nimport {init as initDOMReader} from 'snabbdom-edge/read-dom';\nimport {classModule} from 'snabbdom-edge/read-dom/class';\nimport {styleModule} from 'snabbdom-edge/read-dom/style';\nimport {datasetModule} from 'snabbdom-edge/read-dom/dataset';\nimport {attributesModule} from 'snabbdom-edge/read-dom/attributes';\n\n// Init DOM reader function with all available modules\nconst readDOM = initDOMReader([\n  classModule, // makes it support toggled classes\n  // the props is only on client-side\n  styleModule, // handles styling on elements\n  datasetModule, // handles data-attributes\n  attributesModule() // handles all other attributes\n]);\n\n//before starting application on client\n// we would like to read initial DOM\n\n// now we can read global DOM node (i.e. \u003chtml\u003e)\nconst _vnode = readDOM(document.documentElement);\n\n// OR we can read only \u003cbody\u003e as soon\nconst _vnode = readDOM(document.body);\n\n// render the first virtual DOM\nconst vnode = render_tree();\n\n// initiate the first patch\npatch(_vnode, vnode);\n\n```\n\n**JavaScript**:\n\n```javascript\n\n// Init DOM reader function with all available modules\nvar readDOM = require('snabbdom-edge/read-dom').init([\n  require('snabbdom-edge/read-dom/class'), // makes it support toggled classes\n  // the props is only on client-side\n  require('snabbdom-edge/read-dom/style'), // handles styling on elements\n  require('snabbdom-edge/read-dom/dataset'), // handles data-attributes\n  require('snabbdom-edge/read-dom/attributes')() // handles all other attributes\n]);\n\n//before starting application on client\n// we would like to read initial DOM\n\n// now we can read global DOM node (i.e. \u003chtml\u003e)\nvar _vnode = readDOM(document.documentElement);\n\n// OR we can read only \u003cbody\u003e as soon\nvar _vnode = readDOM(document.body);\n\n// render the first virtual DOM\nvar vnode = render_tree();\n\n// initiate the first patch\npatch(_vnode, vnode);\n\n```\n\n### Attributes module options\n\nAs you seen above the attributes module instantiated by calling as function. It implemented so in order to have possibility of transferring options to it. Available options is below:\n\n* Use *style: true* to read style attribute to `attrs` field.\n* Use *class: true* to read class attribute to `attrs` field.\n* Use *dataset: true* to read data- attributes to `attrs` field.\n\n**TypeScript**:\n\n```typescript\n\nimport {init as initDOMReader} from 'snabbdom-edge/read-dom';\nimport {attributesModule} from 'snabbdom-edge/read-dom/attributes';\n\n// Init DOM reader function with all available modules\nconst readDOM = initDOMReader([\n  attributesModule({ // handles all attributes\n    style: true,\n    class: true,\n    dataset: true\n  })\n]);\n  \n```\n\n**JavaScript**:\n\n```typescript\n\n// Init DOM reader function with all available modules\nconst readDOM = require('snabbdom-edge/read-dom').init([\n  require('snabbdom-edge/read-dom/attributes').default({ // handles all attributes\n    style: true,\n    class: true,\n    dataset: true\n  })\n]);\n  \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatyo%2Fsnabbdom-edge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkatyo%2Fsnabbdom-edge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatyo%2Fsnabbdom-edge/lists"}