{"id":20513858,"url":"https://github.com/webreflection/jsdon","last_synced_at":"2026-03-08T12:34:31.152Z","repository":{"id":57284294,"uuid":"337089624","full_name":"WebReflection/jsdon","owner":"WebReflection","description":"A DOM serializer based on LinkeDOM idea","archived":false,"fork":false,"pushed_at":"2023-11-16T08:31:44.000Z","size":1791,"stargazers_count":56,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-02-17T11:49:07.429Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/WebReflection.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}},"created_at":"2021-02-08T13:44:23.000Z","updated_at":"2025-02-02T08:46:25.000Z","dependencies_parsed_at":"2024-02-17T08:43:38.099Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/jsdon","commit_stats":{"total_commits":50,"total_committers":1,"mean_commits":50.0,"dds":0.0,"last_synced_commit":"676a1c7e5985454718b696482eba3beaad1ec0fe"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fjsdon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fjsdon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fjsdon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fjsdon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/jsdon/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242117718,"owners_count":20074438,"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-11-15T21:13:32.412Z","updated_at":"2026-03-08T12:34:31.106Z","avatar_url":"https://github.com/WebReflection.png","language":"HTML","readme":"# JSDON\n\n[![Build Status](https://travis-ci.com/WebReflection/jsdon.svg?branch=main)](https://travis-ci.com/WebReflection/jsdon) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/jsdon/badge.svg?branch=main)](https://coveralls.io/github/WebReflection/jsdon?branch=main)\n\n\u003csup\u003e**Social Media Photo by [Reign Abarintos](https://unsplash.com/@jareeign) on [Unsplash](https://unsplash.com/)**\u003c/sup\u003e\n\nA DOM de/serializer based on [LinkeDOM](https://github.com/WebReflection/linkedom#readme) idea and the *JSDON* specification \u003csup\u003e\u003csub\u003e(which is something I've just made up)\u003c/sub\u003e\u003c/sup\u003e.\n\n## Why\n\nI like the idea we can represent the *DOM* linearly, and we can travel via `postMessage` or any other capable *JSON* PL anything we like, simplifying diffing, when needed, updates, changes, and so on.\n\nThis module just provides the basics to transform back and forward any document as JSON, enabling new ways to deal with Web pages, SVG images, or XML documents.\n\n## JavaScript DOM Object Notation\n\nThis notation considers two kinds of representations, plus one:\n\n  * a **leaf** is a *node* that cannot contain anything else\n  * a **branch** is a *node* that can contain either branches or leafs\n  * a **tree** is a *branch* extension that represents a whole *document*\n\n### Leaf\n\nA leaf is represented by its type, and at least one, or more, *string* values, representing data the leaf carries with it.\n\n```js\n// attribute node\n[2,\"name\"]\n[2,\"name\",\"value\"]\n\n// text node\n[3,\"content\"]\n\n// comment node\n[8,\"content\"]\n\n// document type node (either html or svg)\n[10,\"html\"]\n```\n\n### Branch\n\nA branch is represented by its type, followed by zero, one, or more leafs, or branches. A branch has a delimiter too, but multiple delimiters get merged as summary of their value.\n\n```js\n// element\n// \u003cdiv\u003e\u003c/div\u003e\n[1,\"div\",-1]\n\n// element with attributes\n// \u003cdiv id=\"unique\" contenteditable\u003e!\u003c/div\u003e\n[1,\"div\",2,\"id\",\"unique\",2,\"contenteditable\",3,\"!\",-1]\n\n// element with a branch\n// \u003cdiv\u003e\u003cp\u003e\u003c/p\u003e\u003c/div\u003e\n[1,\"div\",1,\"p\",-2]\n\n// element with mixed content\n// \u003cdiv\u003ebefore\u003cp\u003ebetween\u003c/p\u003eafter\u003c/div\u003e\n[1,\"div\",3,\"before\",1,\"p\",3,\"between\",-1,3,\"after\",-1]\n\n// fragment\n[11,3,\"text\",-1]\n```\n\n### Tree\n\nA tree is just a branch, but it starts with a document type, and it returns a new document.\n\n```js\n// most basic document with no doctype\n[9,-1]\n\n// most basic html with a \u003c!doctype html\u003e\n[9,10,\"html\",-1]\n\n// most basic html with a doctype and an html node\n// \u003c!doctype html\u003e\u003chtml lang=\"en\"\u003e\u003c/html\u003e\n[9,10,\"html\",1,\"html\",2,\"lang\",\"en\",-2]\n```\n\n## How To\n```js\nimport {fromJSON, toJSON} from 'jsdon';\n\n// create a single array with nodes details\nconst array = toJSON(document);\n\n// restore either JSON string form array or array itself\nconst doc = fromJSON(array);\n```\n\nThis module makes it possible to shrink *HTML* into a linear, stream-able, representation of the tree, linearized via *linkedom* logic, to transport any kind of layout without extra bloat, also preserving *Custom Elements builtin extends*.\n\n## API\n\n### toJSON(node[, filter])\n\nBy default, it puts in the output every node as is, but if there is a *filter* callback, each node passes through such callback and, if it returns `false`, such node won't be added to the final output.\n\nA common use case could be avoiding empty text nodes:\n```js\ntoJSON(document, node =\u003e {\n  if (\n    node.nodeType === node.TEXT_NODE \u0026\u0026\n    node.textContent.trim().length === 0\n  ) {\n    // drop all unnecessary empty text nodes\n    return false;\n  }\n  // accepts all others\n  return true;\n});\n```\n\n### fromJSON(value[, document])\n\nThe `value` can be either a string, that will be parsed via `JSON.parse`, or an array representing serialized markup.\n\nThe extra, optional, `document` parameter, is to let environments not running within a browser provide their own `document`, assuming this also has a `defaultView` property that exposes a `DOMParser` global, so that it's possible to create new *HTML*, *SVG*, or even *XML*, documents with it.\n\n### Serialized Nodes\n\n  * ELEMENT_NODE\n  * ATTRIBUTE_NODE\n  * TEXT_NODE\n  * COMMENT_NODE\n  * DOCUMENT_NODE\n  * DOCUMENT_TYPE_NODE\n  * DOCUMENT_FRAGMENT_NODE\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fjsdon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fjsdon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fjsdon/lists"}