{"id":13432786,"url":"https://github.com/snabbdom/snabbdom","last_synced_at":"2026-01-12T00:03:52.387Z","repository":{"id":31777684,"uuid":"35344046","full_name":"snabbdom/snabbdom","owner":"snabbdom","description":"A virtual DOM library with focus on simplicity, modularity, powerful features and performance.","archived":false,"fork":false,"pushed_at":"2025-10-23T07:50:51.000Z","size":4964,"stargazers_count":12289,"open_issues_count":81,"forks_count":1112,"subscribers_count":154,"default_branch":"master","last_synced_at":"2025-12-10T10:39:27.078Z","etag":null,"topics":["hacktoberfest","snabbdom","virtual-dom-library"],"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/snabbdom.png","metadata":{"files":{"readme":"README-in_HN.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2015-05-09T20:25:10.000Z","updated_at":"2025-12-10T08:17:10.000Z","dependencies_parsed_at":"2024-02-16T12:09:34.529Z","dependency_job_id":"29b362e7-269e-4e58-a732-73787a87dcbc","html_url":"https://github.com/snabbdom/snabbdom","commit_stats":{"total_commits":820,"total_committers":126,"mean_commits":6.507936507936508,"dds":0.8121951219512196,"last_synced_commit":"1f6b68255f6c6ac2813df166cb7216be40763900"},"previous_names":["paldepind/snabbdom"],"tags_count":52,"template":false,"template_full_name":null,"purl":"pkg:github/snabbdom/snabbdom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snabbdom%2Fsnabbdom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snabbdom%2Fsnabbdom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snabbdom%2Fsnabbdom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snabbdom%2Fsnabbdom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snabbdom","download_url":"https://codeload.github.com/snabbdom/snabbdom/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snabbdom%2Fsnabbdom/sbom","scorecard":{"id":718272,"data":{"date":"2025-08-11","repo":{"name":"github.com/snabbdom/snabbdom","commit":"1f6b68255f6c6ac2813df166cb7216be40763900"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.6,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":5,"reason":"Found 14/28 approved changesets -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/lint.yml:1","Warn: no topLevel permission defined: .github/workflows/test.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":5,"reason":"dependency not pinned by hash detected -- score normalized to 5","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/snabbdom/snabbdom/lint.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/snabbdom/snabbdom/test.yml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   2 out of   2 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 23 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"21 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-28mc-g557-92m7","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m","Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-22T10:25:09.373Z","repository_id":31777684,"created_at":"2025-08-22T10:25:09.373Z","updated_at":"2025-08-22T10:25:09.373Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28328757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-11T22:11:01.104Z","status":"ssl_error","status_checked_at":"2026-01-11T22:10:58.990Z","response_time":60,"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":["hacktoberfest","snabbdom","virtual-dom-library"],"created_at":"2024-07-31T02:01:16.558Z","updated_at":"2026-01-12T00:03:52.373Z","avatar_url":"https://github.com/snabbdom.png","language":"TypeScript","funding_links":["https://opencollective.com/snabbdom"],"categories":["TypeScript","JavaScript","前端开发框架及项目","hacktoberfest"],"sub_categories":["其他_文本生成、文本对话"],"readme":"\u003cimg alt=\"Snabbdom\" src=\"readme-title.svg\" width=\"356px\"\u003e\n\nसरलता, प्रतिरूपकता, शक्तिशाली सुविधाओं और प्रदर्शन पर ध्यान देने वाली एक वर्चुअल DOM लाइब्रेरी।\n\n---\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)\n[![Build Status](https://github.com/snabbdom/snabbdom/actions/workflows/test.yml/badge.svg)](https://github.com/snabbdom/snabbdom/actions/workflows/test.yml)\n[![npm version](https://badge.fury.io/js/snabbdom.svg)](https://badge.fury.io/js/snabbdom)\n[![npm downloads](https://img.shields.io/npm/dm/snabbdom.svg)](https://www.npmjs.com/package/snabbdom)\n[![Join the chat at https://gitter.im/snabbdom/snabbdom](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/snabbdom/snabbdom?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n[![हमारे सामूहिक को दान करें](https://opencollective.com/snabbdom/donate/button@2x.png?color=blue)](https://opencollective.com/snabbdom#section-contribute)\n\nपहुंच प्रदान करने के लिए [Browserstack](https://www.browserstack.com/) को धन्यवाद\nउनके महान क्रॉस-ब्राउज़र परीक्षण उपकरण।\n\n---\n\nHindi | [简体中文](./README-zh_CN.md) | [English](./README.md)\n\n## परिचय\n\nवर्चुअल डोम अद्भुत है. यह हमें अपने एप्लिकेशन के दृष्टिकोण को व्यक्त करने की अनुमति देता है\nअपने राज्य के एक कार्य के रूप में। लेकिन मौजूदा समाधान भी बहुत अच्छे थे\nफूला हुआ, बहुत धीमा, सुविधाओं का अभाव, एपीआई OOP के प्रति पक्षपाती था\nऔर/या मेरे लिए आवश्यक सुविधाओं का अभाव है।\n\nस्नैबडोम में अत्यंत सरल, निष्पादन योग्य और एक्स्टेंसिबल शामिल है\nकोर जो केवल ≈ 200 SLOC है। यह एक मॉड्यूलर आर्किटेक्चर प्रदान करता है\nकस्टम मॉड्यूल के माध्यम से एक्सटेंशन के लिए समृद्ध कार्यक्षमता। रखने के लिए\nमूल सरल, सभी गैर-आवश्यक कार्यक्षमता मॉड्यूल को सौंपी गई है।\n\nआप स्नैबडोम को अपनी इच्छानुसार ढाल सकते हैं! चुनें, चुनें और\nअपनी इच्छित कार्यक्षमता को अनुकूलित करें। वैकल्पिक रूप से आप बस उपयोग कर सकते हैं\nडिफ़ॉल्ट एक्सटेंशन और उच्च के साथ एक वर्चुअल DOM लाइब्रेरी प्राप्त करें\nप्रदर्शन, छोटा आकार और नीचे सूचीबद्ध सभी सुविधाएँ।\n\n## विशेषताएँ\n\n- सब से महत्वपूर्ण विशेषता\n  - लगभग 200 एसएलओसी - आप आसानी से संपूर्ण कोर और पूरी तरह से पढ़ सकते हैं\n    समझें कि यह कैसे काम करता है.\n  - मॉड्यूल के माध्यम से विस्तार योग्य।\n  - मॉड्यूल के लिए प्रति वीनोड और विश्व स्तर पर हुक का एक समृद्ध सेट उपलब्ध है,\n    अंतर और पैच प्रक्रिया के किसी भी भाग में शामिल होने के लिए।\n  - शानदार प्रदर्शन. स्नैबडॉम सबसे तेज़ वर्चुअल DOM लाइब्रेरीज़ में से एक है।\n  - रिड्यूस/स्कैन के समतुल्य फ़ंक्शन हस्ताक्षर के साथ पैच फ़ंक्शन\n    समारोह। एफआरपी लाइब्रेरी के साथ आसान एकीकरण की अनुमति देता है।\n- मॉड्यूल में सुविधाएँ\n  - आसानी से वर्चुअल DOM नोड बनाने के लिए `h` फ़ंक्शन।\n  - [SVG _just works_ with the `h` helper](#svg)।\n  - जटिल सीएसएस एनिमेशन करने की सुविधाएँ।\n  - शक्तिशाली घटना श्रोता कार्यक्षमता।\n  - [Thunks](#thunks) अंतर और पैच प्रक्रिया को और भी अधिक अनुकूलित करने के लिए।\n  - [JSX support, including TypeScript types](#jsx)\n- तृतीय पक्ष सुविधाएँ\n  - सर्वर-साइड HTML आउटपुट [snabbdom-to-html](https://github.com/acstll/snabbdom-to-html) द्वारा प्रदान किया जाता है।\n  - [snabbdom-helpers](https://github.com/krainboltgreene/snabbdom-helpers) के साथ कॉम्पैक्ट वर्चुअल DOM निर्माण।\n  - [snabby](https://github.com/jamen/snabby) का उपयोग करके टेम्पलेट स्ट्रिंग समर्थन।\n  - [snabbdom-looks-like](https://github.com/jvanbruegge/snabbdom-looks-लाइक) के साथ वर्चुअल डोम अभिकथन\n\n## उदाहरण\n\n```mjs\nimport {\n  init,\n  classModule,\n  propsModule,\n  styleModule,\n  eventListenersModule,\n  h\n} from \"snabbdom\";\n\nconst patch = init([\n  // Init patch function with chosen modules\n  classModule, // makes it easy to toggle classes\n  propsModule, // for setting properties on DOM elements\n  styleModule, // handles styling on elements with support for animations\n  eventListenersModule // attaches event listeners\n]);\n\nconst container = document.getElementById(\"container\");\n\nconst vnode = h(\n  \"div#container.two.classes\",\n  { on: { click: () =\u003e console.log(\"div clicked\") } },\n  [\n    h(\"span\", { style: { fontWeight: \"bold\" } }, \"This is bold\"),\n    \" and this is just normal text\",\n    h(\"a\", { props: { href: \"/foo\" } }, \"I'll take you places!\")\n  ]\n);\n// Patch into empty DOM element – this modifies the DOM as a side effect\npatch(container, vnode);\n\nconst newVnode = h(\n  \"div#container.two.classes\",\n  { on: { click: () =\u003e console.log(\"updated div clicked\") } },\n  [\n    h(\n      \"span\",\n      { style: { fontWeight: \"normal\", fontStyle: \"italic\" } },\n      \"This is now italic type\"\n    ),\n    \" and this is still just normal text\",\n    h(\"a\", { props: { href: \"/bar\" } }, \"I'll take you places!\")\n  ]\n);\n// Second `patch` invocation\npatch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state\n```\n\n## अधिक उदाहरण\n\n- [Animated reordering of elements](http://snabbdom.github.io/snabbdom/examples/reorder-animation/)\n- [Hero transitions](http://snabbdom.github.io/snabbdom/examples/hero/)\n- [SVG Carousel](http://snabbdom.github.io/snabbdom/examples/carousel-svg/)\n\n---\n\n## विषयसूची\n\n- [Core documentation](#core-documentation)\n  - [`init`](#init)\n  - [`patch`](#patch)\n    - [Unmounting](#unmounting)\n  - [`h`](#h)\n  - [`fragment`](#fragment-experimental) (experimental)\n  - [`tovnode`](#tovnode)\n  - [Hooks](#hooks)\n    - [Overview](#overview)\n    - [Usage](#usage)\n    - [The `init` hook](#the-init-hook)\n    - [The `insert` hook](#the-insert-hook)\n    - [The `remove` hook](#the-remove-hook)\n    - [The `destroy` hook](#the-destroy-hook)\n  - [Creating modules](#creating-modules)\n- [Modules documentation](#modules-documentation)\n  - [The class module](#the-class-module)\n  - [The props module](#the-props-module)\n  - [The attributes module](#the-attributes-module)\n  - [The dataset module](#the-dataset-module)\n  - [The style module](#the-style-module)\n    - [Custom properties (CSS variables)](#custom-properties-css-variables)\n    - [Delayed properties](#delayed-properties)\n    - [Set properties on `remove`](#set-properties-on-remove)\n    - [Set properties on `destroy`](#set-properties-on-destroy)\n  - [The eventlisteners module](#the-eventlisteners-module)\n- [SVG](#svg)\n  - [Classes in SVG Elements](#classes-in-svg-elements)\n- [Thunks](#thunks)\n- [JSX](#jsx)\n  - [TypeScript](#typescript)\n  - [Babel](#babel)\n- [Virtual Node](#virtual-node)\n  - [sel : String](#sel--string)\n  - [data : Object](#data--object)\n  - [children : Array\u003cvnode\u003e](#children--arrayvnode)\n  - [text : string](#text--string)\n  - [elm : Element](#elm--element)\n  - [key : string | number](#key--string--number)\n- [Structuring applications](#structuring-applications)\n- [Common errors](#common-errors)\n- [Opportunity for community feedback](#opportunity-for-community-feedback)\n\n## मूल दस्तावेज़ीकरण\n\nस्नैबडॉम का मूल केवल सबसे आवश्यक कार्यक्षमता प्रदान करता है।\nइसे तेज़ होने के साथ-साथ यथासंभव सरल बनाने के लिए डिज़ाइन किया गया है\nविस्तार योग्य.\n\n### `init`\n\nकोर केवल एक एकल फ़ंक्शन `init` को उजागर करता है। यह `init`\nमॉड्यूल की एक सूची लेता है और एक `patch` फ़ंक्शन लौटाता है जो इसका उपयोग करता है\nमॉड्यूल का निर्दिष्ट सेट।\n\n```mjs\nimport { classModule, styleModule } from \"snabbdom\";\n\nconst patch = init([classModule, styleModule]);\n```\n\n### `patch`\n\n`init` द्वारा लौटाया गया `patch` फ़ंक्शन दो तर्क लेता है। पहला\nएक DOM तत्व या एक vnode है जो वर्तमान दृश्य का प्रतिनिधित्व करता है। दूसरा\nएक vnode नए, अद्यतन दृश्य का प्रतिनिधित्व करता है।\n\nयदि पैरेंट वाला DOM तत्व पास हो जाता है, तो `newVnode` चालू हो जाएगा\nएक DOM नोड में, और पारित तत्व को प्रतिस्थापित कर दिया जाएगा\nDOM नोड बनाया गया. यदि कोई पुराना vnode पारित किया जाता है, तो Snabbdom कुशलतापूर्वक पारित हो जाएगा\nनए vnode में विवरण से मेल खाने के लिए इसे संशोधित करें।\n\nपास किया गया कोई भी पुराना वीनोड पिछली कॉल का परिणामी वीनोड होना चाहिए\n`patch` करने के लिए. यह आवश्यक है क्योंकि स्नैबडॉम जानकारी संग्रहीत करता है\nvnode. इससे सरल और अधिक कार्यान्वित करना संभव हो जाता है\nनिष्पादक वास्तुकला. इससे नये पुराने के निर्माण से भी बचा जा सकता है\nव्नोड वृक्ष.\n\n```mjs\npatch(oldVnode, newVnode);\n```\n\n#### `अनमाउंट`\n\nहालाँकि इसके माउंट पॉइंट तत्व से VNode ट्री को हटाने के लिए विशेष रूप से कोई API नहीं है, इसे लगभग प्राप्त करने का एक तरीका `patch` के दूसरे तर्क के रूप में एक टिप्पणी VNode प्रदान करना है, जैसे:\n\n```mjs\npatch(\n  oldVnode,\n  h(\"!\", {\n    hooks: {\n      post: () =\u003e {\n        /* patch complete */\n      }\n    }\n  })\n);\n```\n\nनिःसंदेह, माउंट बिंदु पर अभी भी एक टिप्पणी नोड है।\n\n### `h`\n\nयह अनुशंसा की जाती है कि आप vnodes बनाने के लिए `h` का उपयोग करें। यह एक स्वीकार करता है\nएक स्ट्रिंग के रूप में टैग/चयनकर्ता, एक वैकल्पिक डेटा ऑब्जेक्ट और एक वैकल्पिक स्ट्रिंग या बच्चों की सरणी।\n\n```mjs\nimport { h } from \"snabbdom\";\n\nconst vnode = h(\"div\", { style: { color: \"#000\" } }, [\n  h(\"h1\", \"Headline\"),\n  h(\"p\", \"A paragraph\")\n]);\n```\n\n### `fragment` (प्रयोगात्मक)\n\nसावधानी: यह सुविधा अभी प्रायोगिक है और इसे शामिल किया जाना चाहिए।\nइसके एपीआई को बिना किसी बड़े संस्करण के बदलाव के बदला जा सकता है।\n\n```mjs\nconst patch = init(modules, undefined, {\n  experimental: {\n    fragments: true\n  }\n});\n```\n\nएक वर्चुअल नोड बनाता है जिसे दिए गए बच्चों वाले दस्तावेज़ खंड में परिवर्तित किया जाएगा।\n\n```mjs\nimport { fragment, h } from \"snabbdom\";\n\nconst vnode = fragment([\"I am\", h(\"span\", [\" a\", \" fragment\"])]);\n```\n\n### `tovnode`\n\nDOM नोड को वर्चुअल नोड में परिवर्तित करता है। पहले से मौजूद, सर्वर-साइड जेनरेट की गई सामग्री पर पैचिंग के लिए विशेष रूप से अच्छा है।\n\n```mjs\nimport {\n  init,\n  classModule,\n  propsModule,\n  styleModule,\n  eventListenersModule,\n  h,\n  toVNode\n} from \"snabbdom\";\n\nconst patch = init([\n  // Init patch function with chosen modules\n  classModule, // makes it easy to toggle classes\n  propsModule, // for setting properties on DOM elements\n  styleModule, // handles styling on elements with support for animations\n  eventListenersModule // attaches event listeners\n]);\n\nconst newVNode = h(\"div\", { style: { color: \"#000\" } }, [\n  h(\"h1\", \"Headline\"),\n  h(\"p\", \"A paragraph\")\n]);\n\npatch(toVNode(document.querySelector(\".container\")), newVNode);\n```\n\n### Hooks (हुक्स)\n\nहुक DOM नोड्स के जीवनचक्र से जुड़ने का एक तरीका है। छीना-झपटी\nहुक का एक समृद्ध चयन प्रदान करता है। हुक का उपयोग मॉड्यूल द्वारा दोनों के लिए किया जाता है\nSnabbdom का विस्तार करें, और सामान्य कोड में मनमाना कोड निष्पादित करने के लिए\nवर्चुअल नोड के जीवन में वांछित बिंदु।\n\n#### Overview\n\n| Name        | Triggered when                                              | Arguments to callback   |\n| ----------- | ----------------------------------------------------------- | ----------------------- |\n| `pre`       | पैच प्रक्रिया शुरू होती है                                  | none                    |\n| `init`      | एक vnode जोड़ा गया है                                       | `vnode`                 |\n| `create`    | Vnode के आधार पर एक DOM तत्व(element) बनाया गया है          | `emptyVnode, vnode`     |\n| `insert`    | DOM में एक तत्व डाला गया है                                 | `vnode`                 |\n| `prepatch`  | एक तत्व पैच होने वाला है                                    | `oldVnode, vnode`       |\n| `update`    | एक तत्व अद्यतन किया जा रहा है                               | `oldVnode, vnode`       |\n| `postpatch` | एक तत्व को पैच कर दिया गया है                               | `oldVnode, vnode`       |\n| `destroy`   | किसी तत्व को प्रत्यक्ष या अप्रत्यक्ष रूप से हटाया जा रहा है | `vnode`                 |\n| `remove`    | एक तत्व को सीधे DOM से हटाया जा रहा है                      | `vnode, removeCallback` |\n| `post`      | पैच प्रक्रिया पूरी हो गई है                                 | none                    |\n\nमॉड्यूल के लिए निम्नलिखित हुक उपलब्ध हैं: `pre`, `create`,\n`update`, `destroy`, `remove`, `post`।\n\nनिम्नलिखित हुक व्यक्ति की `hook` संपत्ति में उपलब्ध हैं\nतत्व: `init`, `create`, `insert`, `prepatch`, `update`,\n`postpatch`, `destroy`, `remove`।\n\n#### Usage (प्रयोग)\n\nहुक का उपयोग करने के लिए, उन्हें डेटा के `hook` फ़ील्ड में एक ऑब्जेक्ट के रूप में पास करें\nवस्तु तर्क.\n\n```mjs\nh(\"div.row\", {\n  key: movie.rank,\n  hook: {\n    insert: (vnode) =\u003e {\n      movie.elmHeight = vnode.elm.offsetHeight;\n    }\n  }\n});\n```\n\n#### The `init` hook (`init` हुक)\n\nयह हुक पैच प्रक्रिया के दौरान लागू किया जाता है जब एक नया वर्चुअल नोड होता है\nमिल गया है। Snabbdom द्वारा नोड को किसी भी तरह से संसाधित करने से पहले हुक को कॉल किया जाता है। यानी, इससे पहले इसने vnode के आधार पर एक DOM नोड बनाया है।\n\n#### The `insert` hook (`insert` हुक)\n\nएक बार vnode के लिए DOM तत्व हो जाने के बाद यह हुक लागू हो जाता है\nदस्तावेज़ में डाला गया _और_ शेष पैच चक्र पूरा हो गया है।\nइसका मतलब है कि आप DOM मापन (जैसे उपयोग करना) कर सकते हैं\n[getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)\nइस हुक में सुरक्षित रूप से, यह जानते हुए कि कोई भी तत्व नहीं बदला जाएगा\nबाद में यह सम्मिलित तत्वों की स्थिति को प्रभावित कर सकता है।\n\n#### The `remove` hook (`remove` हुक)\n\nआपको किसी तत्व को हटाने में शामिल होने की अनुमति देता है। हुक कहा जाता है\nएक बार एक vnode को DOM से हटाया जाना है। हैंडलिंग फ़ंक्शन\nvnode और कॉलबैक दोनों प्राप्त करता है। आप इसे नियंत्रित और विलंबित कर सकते हैं\nकॉलबैक के साथ हटाना. कॉलबैक एक बार लागू किया जाना चाहिए\nहुक ने अपना काम पूरा कर लिया है, और तत्व केवल हटा दिया जाएगा\nएक बार सभी `remove` हुक ने अपना कॉलबैक लागू कर दिया।\n\nहुक केवल तभी चालू होता है जब किसी तत्व को उससे हटाया जाना हो\nअभिभावक - यदि यह हटाए गए तत्व का बच्चा है तो नहीं। के लिए\nवह, `destroy` हुक देखें।\n\n#### The `destroy` hook (`destroy` हुक)\n\nयह हुक वर्चुअल नोड पर तब लागू होता है जब इसका DOM तत्व हटा दिया जाता है\nDOM से या यदि उसके पैरेंट को DOM से हटाया जा रहा है।\n\nइस हुक और `remove` हुक के बीच अंतर देखने के लिए,\nएक उदाहरण पर विचार करें.\n\n```mjs\nconst vnode1 = h(\"div\", [h(\"div\", [h(\"span\", \"Hello\")])]);\nconst vnode2 = h(\"div\", []);\npatch(container, vnode1);\npatch(vnode1, vnode2);\n```\n\nयहां `नष्ट` को आंतरिक `div` तत्व _और_ दोनों के लिए ट्रिगर किया गया है\nइसमें `span` तत्व शामिल है। दूसरी ओर, 'हटाएं' ही है\n`div` तत्व पर ट्रिगर किया गया क्योंकि यह एकमात्र तत्व है\nअपने माता-पिता से अलग हो गया।\n\nउदाहरण के लिए, आप किसी एनीमेशन को ट्रिगर करने के लिए `remove` का उपयोग कर सकते हैं\nतत्व को हटाया जा रहा है और अतिरिक्त रूप से `destroy` हुक का उपयोग करें\nहटाए गए तत्व के बच्चों के गायब होने को चेतन करें।\n\n### Creating modules (मॉड्यूल बनाना)\n\nमॉड्यूल [hooks](#hooks) के लिए वैश्विक श्रोताओं को पंजीकृत करके काम करता है। एक मॉड्यूल बस एक शब्दकोश है जो कार्यों के लिए हुक नामों को मैप करता है।\n\n```mjs\nconst myModule = {\n  create: (oldVnode, vnode) =\u003e {\n    // invoked whenever a new virtual node is created\n  },\n  update: (oldVnode, vnode) =\u003e {\n    // invoked whenever a virtual node is updated\n  }\n};\n```\n\nइस तंत्र से आप आसानी से स्नैबडॉम के व्यवहार को बढ़ा सकते हैं।\nप्रदर्शन के लिए, डिफ़ॉल्ट के कार्यान्वयन पर एक नज़र डालें\nमॉड्यूल.\n\n## Modules documentation (मॉड्यूल दस्तावेज़ीकरण)\n\nयह मुख्य मॉड्यूल का वर्णन करता है। सभी मॉड्यूल वैकल्पिक हैं. JSX उदाहरण मानते हैं कि आप इस लाइब्रेरी द्वारा प्रदान किए गए [`jsx` pragma](#jsx) का उपयोग कर रहे हैं।\n\n### The class module (क्लास मॉड्यूल)\n\nक्लास मॉड्यूल तत्वों पर कक्षाओं को गतिशील रूप से टॉगल करने का एक आसान तरीका प्रदान करता है। यह `class` डेटा प्रॉपर्टी में एक ऑब्जेक्ट की अपेक्षा करता है।\n\nऑब्जेक्ट को क्लास नामों को बूलियन में मैप करना चाहिए जो इंगित करता है कि या\nक्लास को वीनोड पर रुकना या जाना नहीं चाहिए।\n\n```mjs\nh(\"a\", { class: { active: true, selected: false } }, \"Toggle\");\n```\n\nIn JSX, you can use `class` like this:\n\n```jsx\n\u003cdiv class={{ foo: true, bar: true }} /\u003e\n// Renders as: \u003cdiv class=\"foo bar\"\u003e\u003c/div\u003e\n```\n\n### The props module (प्रॉप्स मॉड्यूल)\n\nAllows you to set properties on DOM elements.\n\n```mjs\nh(\"a\", { props: { href: \"/foo\" } }, \"Go to Foo\");\n```\n\nIn JSX, you can use `props` like this:\n\n```jsx\n\u003cinput props={{ name: \"foo\" }} /\u003e\n// Renders as: \u003cinput name=\"foo\" /\u003e with input.name === \"foo\"\n```\n\nगुण केवल सेट किए जा सकते हैं, हटाए नहीं जा सकते. भले ही ब्राउज़र कस्टम गुणों को जोड़ने और हटाने की अनुमति देते हैं, यह मॉड्यूल हटाने का प्रयास नहीं करेगा।\nयह समझ में आता है क्योंकि मूल DOM गुणों को हटाया नहीं जा सकता। और यदि आप DOM पर मूल्यों को संग्रहीत करने या ऑब्जेक्ट को संदर्भित करने के लिए कस्टम गुणों का उपयोग कर रहे हैं, तो कृपया उपयोग करने पर विचार करें\n[data-\\* attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)\nबजाय। शायद [the dataset module](#the-dataset-module) के माध्यम से।\n\n### The attributes module (गुण मॉड्यूल)\n\nप्रॉप्स के समान, लेकिन DOM तत्वों पर गुणों के बजाय विशेषताएँ सेट करें।\n\n```mjs\nh(\"a\", { attrs: { href: \"/foo\" } }, \"Go to Foo\");\n```\n\nIn JSX, you can use `attrs` like this:\n\n```jsx\n\u003cdiv attrs={{ \"aria-label\": \"I'm a div\" }} /\u003e\n// Renders as: \u003cdiv aria-label=\"I'm a div\"\u003e\u003c/div\u003e\n```\n\nविशेषताएँ `setAttribute` का उपयोग करके जोड़ी और अद्यतन की जाती हैं। एक के मामले में\nवह विशेषता जो पहले जोड़ी/सेट की गई थी और अब मौजूद नहीं है\n`attrs` ऑब्जेक्ट में, इसे DOM तत्व की विशेषता से हटा दिया जाता है\n`removeAttribute` का उपयोग करके सूची बनाएं।\n\nबूलियन विशेषताओं के मामले में (उदाहरण के लिए `disabled`, `hidden`,\n`selected` ...), अर्थ विशेषता मान पर निर्भर नहीं करता है\n('सही' या 'गलत') लेकिन इसके बजाय की उपस्थिति/अनुपस्थिति पर निर्भर करता है\nDOM तत्व में स्वयं को विशेषता दें। उन विशेषताओं को संभाला जाता है\nमॉड्यूल द्वारा अलग-अलग: यदि एक बूलियन विशेषता को सेट किया गया है\n[falsy value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)\n('0', '-0', 'शून्य', 'गलत', 'NaN', 'अपरिभाषित', या खाली स्ट्रिंग\n(`````)), तो विशेषता को विशेषता सूची से हटा दिया जाएगा\nDOM तत्व.\n\n### The dataset module (डेटासेट मॉड्यूल)\n\nआपको DOM तत्वों पर कस्टम डेटा विशेषताएँ (`data-*`) सेट करने की अनुमति देता है। फिर इन्हें [HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) प्रॉपर्टी से एक्सेस किया जा सकता है।\n\n```mjs\nh(\"button\", { dataset: { action: \"reset\" } }, \"Reset\");\n```\n\nIn JSX, you can use `dataset` like this:\n\n```jsx\n\u003cdiv dataset={{ foo: \"bar\" }} /\u003e\n// Renders as: \u003cdiv data-foo=\"bar\"\u003e\u003c/div\u003e\n```\n\n### The style module (स्टाइल मॉड्यूल)\n\nस्टाइल मॉड्यूल आपके HTML को आकर्षक और सुचारू रूप से जीवंत बनाने के लिए है। पर\nइसका मूल यह आपको तत्वों पर सीएसएस गुण सेट करने की अनुमति देता है।\n\n```mjs\nh(\n  \"span\",\n  {\n    style: {\n      border: \"1px solid #bada55\",\n      color: \"#c0ffee\",\n      fontWeight: \"bold\"\n    }\n  },\n  \"Say my name, and every colour illuminates\"\n);\n```\n\nIn JSX, you can use `style` like this:\n\n```jsx\n\u003cdiv\n  style={{\n    border: \"1px solid #bada55\",\n    color: \"#c0ffee\",\n    fontWeight: \"bold\"\n  }}\n/\u003e\n// Renders as: \u003cdiv style=\"border: 1px solid #bada55; color: #c0ffee; font-weight: bold\"\u003e\u003c/div\u003e\n```\n\n#### Custom properties (कस्टम गुण) (CSS variables)\n\nसीएसएस कस्टम गुण (उर्फ सीएसएस चर) समर्थित हैं, उन्हें उपसर्ग किया जाना चाहिए\n`--` के साथ\n\n```mjs\nh(\n  \"div\",\n  {\n    style: { \"--warnColor\": \"yellow\" }\n  },\n  \"Warning\"\n);\n```\n\n#### Delayed properties (विलंबित गुण)\n\nआप संपत्तियों को विलंबित होने के रूप में निर्दिष्ट कर सकते हैं। जब भी ये गुण बदलते हैं, तो परिवर्तन अगले फ़्रेम के बाद तक लागू नहीं होता है।\n\n```mjs\nh(\n  \"span\",\n  {\n    style: {\n      opacity: \"0\",\n      transition: \"opacity 1s\",\n      delayed: { opacity: \"1\" }\n    }\n  },\n  \"Imma fade right in!\"\n);\n```\n\nइससे तत्वों की प्रविष्टि को घोषणात्मक रूप से एनिमेट करना आसान हो जाता है।\n\n`transition-property` का `all` मान समर्थित नहीं है।\n\n#### गुणों को `remove` पर सेट करें\n\n`remove` गुण में सेट की गई शैलियाँ तत्व के समाप्त होते ही प्रभावी हो जाएंगी\nDOM से हटाया जाने वाला है. लागू शैलियाँ होनी चाहिए\nसीएसएस बदलावों के साथ एनिमेटेड। केवल एक बार सभी शैलियाँ पूरी हो जाती हैं\nएनिमेट करने पर तत्व DOM से हटा दिया जाएगा।\n\n```mjs\nh(\n  \"span\",\n  {\n    style: {\n      opacity: \"1\",\n      transition: \"opacity 1s\",\n      remove: { opacity: \"0\" }\n    }\n  },\n  \"It's better to fade out than to burn away\"\n);\n```\n\nThis makes it easy to declaratively animate the removal of elements.\nइससे तत्वों को हटाने को घोषणात्मक रूप से एनिमेट करना आसान हो जाता है।\n\n`transition-property` का `all` मान समर्थित नहीं है।\n\n#### गुणों को `destroy` पर सेट करें\n\n```mjs\nh(\n  \"span\",\n  {\n    style: {\n      opacity: \"1\",\n      transition: \"opacity 1s\",\n      destroy: { opacity: \"0\" }\n    }\n  },\n  \"It's better to fade out than to burn away\"\n);\n```\n\n`transition-property` का `all` मान समर्थित नहीं है।\n\n### इवेंटलिस्टर्स मॉड्यूल\n\nइवेंट श्रोता मॉड्यूल संलग्न करने के लिए शक्तिशाली क्षमताएं देता है\nघटना श्रोता.\n\nआप एक आपूर्ति करके vnode पर किसी ईवेंट में एक फ़ंक्शन संलग्न कर सकते हैं\nइवेंट के नाम के अनुरूप गुण के साथ `on` पर ऑब्जेक्ट\nआप सुनना चाहते हैं. इवेंट होने पर फ़ंक्शन बुलाया जाएगा\nहोता है और उस ईवेंट ऑब्जेक्ट को पास कर दिया जाएगा जो उससे संबंधित है।\n\n```mjs\nfunction clickHandler(ev) {\n  console.log(\"got clicked\");\n}\nh(\"div\", { on: { click: clickHandler } });\n```\n\nIn JSX, you can use `on` like this:\n\n```js\n\u003cdiv on={{ click: clickHandler }} /\u003e\n```\n\nSnabbdom रेंडरर्स के बीच ईवेंट हैंडलर की अदला-बदली की अनुमति देता है। ऐसा बिना होता है\nवास्तव में DOM से जुड़े इवेंट हैंडलर को छूना।\n\nहालाँकि, ध्यान दें कि **ईवेंट साझा करते समय आपको सावधान रहना चाहिए\nइस मॉड्यूल द्वारा उपयोग की जाने वाली तकनीक के कारण, vnodes** के बीच हैंडलर\nईवेंट हैंडलर को DOM से पुनः बाइंडिंग से बचने के लिए। (और सामान्य तौर पर,\nVnodes के बीच डेटा साझा करना काम करने की गारंटी नहीं है, क्योंकि मॉड्यूल\nदिए गए डेटा को बदलने की अनुमति है)।\n\nIn particular, you should **not** do something like this:\n\n```mjs\n// Does not work\nconst sharedHandler = {\n  change: (e) =\u003e {\n    console.log(\"you chose: \" + e.target.value);\n  }\n};\nh(\"div\", [\n  h(\"input\", {\n    props: { type: \"radio\", name: \"test\", value: \"0\" },\n    on: sharedHandler\n  }),\n  h(\"input\", {\n    props: { type: \"radio\", name: \"test\", value: \"1\" },\n    on: sharedHandler\n  }),\n  h(\"input\", {\n    props: { type: \"radio\", name: \"test\", value: \"2\" },\n    on: sharedHandler\n  })\n]);\n```\n\nऐसे कई मामलों के लिए, आप इसके बजाय सरणी-आधारित हैंडलर का उपयोग कर सकते हैं (ऊपर वर्णित)।\nवैकल्पिक रूप से, बस यह सुनिश्चित करें कि प्रत्येक नोड को अद्वितीय `on` मान पारित किया गया है:\n\n```mjs\n// Works\nconst sharedHandler = (e) =\u003e {\n  console.log(\"you chose: \" + e.target.value);\n};\nh(\"div\", [\n  h(\"input\", {\n    props: { type: \"radio\", name: \"test\", value: \"0\" },\n    on: { change: sharedHandler }\n  }),\n  h(\"input\", {\n    props: { type: \"radio\", name: \"test\", value: \"1\" },\n    on: { change: sharedHandler }\n  }),\n  h(\"input\", {\n    props: { type: \"radio\", name: \"test\", value: \"2\" },\n    on: { change: sharedHandler }\n  })\n]);\n```\n\n## SVG\n\nवर्चुअल बनाने के लिए `h` फ़ंक्शन का उपयोग करते समय एसवीजी बस काम करता है\nनोड्स एसवीजी तत्व स्वचालित रूप से उपयुक्त के साथ बनाए जाते हैं\nनामस्थान.\n\n```mjs\nconst vnode = h(\"div\", [\n  h(\"svg\", { attrs: { width: 100, height: 100 } }, [\n    h(\"circle\", {\n      attrs: {\n        cx: 50,\n        cy: 50,\n        r: 40,\n        stroke: \"green\",\n        \"stroke-width\": 4,\n        fill: \"yellow\"\n      }\n    })\n  ])\n]);\n```\n\n[SVG example](./examples/svg) और [SVG Carousel example](./examples/carousel-svg/) भी देखें।\n\n### SVG तत्वों में Classes\n\nकुछ ब्राउज़र (जैसे IE \u0026lt;=11) [SVG तत्वों में `classList` प्रॉपर्टी का समर्थन नहीं करते](http://caniuse.com/#feat=classlist)।\nक्योंकि _class_ मॉड्यूल आंतरिक रूप से `classList` का उपयोग करता है, यह इस मामले में तब तक काम नहीं करेगा जब तक कि आप [classList polyfill](https://www.npmjs.com/package/classlist-polyfill) का उपयोग नहीं करते।\n(यदि आप पॉलीफ़िल का उपयोग नहीं करना चाहते हैं, तो आप _attributes_ मॉड्यूल के साथ `क्लास' विशेषता का उपयोग कर सकते हैं)।\n\n## Thunks\n\n`thunk` फ़ंक्शन एक चयनकर्ता लेता है, एक थंक की पहचान करने के लिए एक कुंजी,\nएक फ़ंक्शन जो एक vnode और स्थिति की एक परिवर्तनीय मात्रा लौटाता है\nपैरामीटर. यदि लागू किया जाता है, तो रेंडर फ़ंक्शन राज्य प्राप्त करेगा\nतर्क.\n\n`thunk(selector, key, renderFn, [stateArguments])`\n\n`renderFn` को केवल तभी लागू किया जाता है जब `renderFn` को बदल दिया जाता है या `[stateArguments]` सरणी की लंबाई या उसके तत्वों को बदल दिया जाता है।\n\n`key` वैकल्पिक है. इसकी आपूर्ति तब की जानी चाहिए जब `selector` हो\nथंक्स भाई-बहनों के बीच अद्वितीय नहीं। यह सुनिश्चित करता है कि थंक है\nअंतर करते समय हमेशा सही ढंग से मेल खाता है।\n\nथंक्स एक अनुकूलन रणनीति है जिसका उपयोग तब किया जा सकता है जब कोई हो\nअपरिवर्तनीय डेटा से निपटना।\n\nकिसी संख्या के आधार पर वर्चुअल नोड बनाने के लिए एक सरल फ़ंक्शन पर विचार करें।\n\n```mjs\nfunction numberView(n) {\n  return h(\"div\", \"Number is: \" + n);\n}\n```\n\nदृश्य केवल `n` पर निर्भर करता है। इसका मतलब यह है कि यदि `n` अपरिवर्तित है,\nफिर वर्चुअल DOM नोड बनाना और उसे पुराने के विरुद्ध पैच करना\nvnode बेकार है. ओवरहेड से बचने के लिए हम `thunk` सहायक का उपयोग कर सकते हैं\nसमारोह।\n\n```mjs\nfunction render(state) {\n  return thunk(\"num\", numberView, [state.number]);\n}\n```\n\nवास्तव में `numberView` फ़ंक्शन को लागू करने के बजाय यह केवल होगा\nवर्चुअल ट्री में एक डमी वीनोड रखें। जब स्नैबडॉम इसे पैच करता है\nपिछले vnode के विरुद्ध डमी vnode, यह के मूल्य की तुलना करेगा\n`n`. यदि `n` अपरिवर्तित है तो यह पुराने vnode का पुन: उपयोग करेगा। यह\nसंख्या दृश्य और भिन्न प्रक्रिया को पूरी तरह से दोबारा बनाने से बचा जाता है।\n\nयहां व्यू फ़ंक्शन केवल एक उदाहरण है। व्यवहार में थंक्स ही होते हैं\nयदि आप एक जटिल दृश्य प्रस्तुत कर रहे हैं तो यह प्रासंगिक है\nउत्पन्न करने के लिए महत्वपूर्ण कम्प्यूटेशनल समय।\n\n## JSX\n\nध्यान दें कि JSX टुकड़े अभी भी प्रयोगात्मक हैं और इन्हें चुना जाना चाहिए।\nविवरण के लिए [`fragment`](#fragment-experimental) अनुभाग देखें।\n\n### TypeScript\n\nअपने `tsconfig.json` में निम्नलिखित विकल्प जोड़ें:\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"jsx\",\n    \"jsxFragmentFactory\": \"Fragment\"\n  }\n}\n```\n\nफिर सुनिश्चित करें कि आप `.tsx` फ़ाइल एक्सटेंशन का उपयोग करें और फ़ाइल के शीर्ष पर `jsx` फ़ंक्शन और `Fragment` फ़ंक्शन आयात करें:\n\n```tsx\nimport { Fragment, jsx, VNode } from \"snabbdom\";\n\nconst node: VNode = (\n  \u003cdiv\u003e\n    \u003cspan\u003eI was created with JSX\u003c/span\u003e\n  \u003c/div\u003e\n);\n\nconst fragment: VNode = (\n  \u003c\u003e\n    \u003cspan\u003eJSX fragments\u003c/span\u003e\n    are experimentally supported\n  \u003c/\u003e\n);\n```\n\n### Babel\n\nअपने बेबल कॉन्फ़िगरेशन में निम्नलिखित विकल्प जोड़ें:\n\n```json\n{\n  \"plugins\": [\n    [\n      \"@babel/plugin-transform-react-jsx\",\n      {\n        \"pragma\": \"jsx\",\n        \"pragmaFrag\": \"Fragment\"\n      }\n    ]\n  ]\n}\n```\n\nफिर फ़ाइल के शीर्ष पर `jsx` फ़ंक्शन और `Fragment` फ़ंक्शन आयात करें:\n\n```jsx\nimport { Fragment, jsx } from \"snabbdom\";\n\nconst node = (\n  \u003cdiv\u003e\n    \u003cspan\u003eI was created with JSX\u003c/span\u003e\n  \u003c/div\u003e\n);\n\nconst fragment = (\n  \u003c\u003e\n    \u003cspan\u003eJSX fragments\u003c/span\u003e\n    are experimentally supported\n  \u003c/\u003e\n);\n```\n\n## Virtual Node\n\n**गुण**\n\n- [sel](#sel--string)\n- [data](#data--object)\n- [children](#children--array)\n- [text](#text--string)\n- [elm](#elm--element)\n- [key](#key--string--number)\n\n### sel : String\n\nवर्चुअल नोड की `.sel` संपत्ति सीएसएस चयनकर्ता को दी जाती है\n[`h()`](#snabbdomh) निर्माण के दौरान। उदाहरण के लिए: `h('div#container', {}, [...])` एक वर्चुअल नोड बनाएगा जिसमें `div#container` होगा\nइसकी `.sel` संपत्ति।\n\n### data : Object\n\nवर्चुअल नोड की `.data` प्रॉपर्टी जानकारी जोड़ने का स्थान है\n[modules](#modules-documentation) तक पहुंचने और हेरफेर करने के लिए\nवास्तविक DOM तत्व जब इसे बनाया जाता है; शैलियाँ, सीएसएस कक्षाएं जोड़ें,\nगुण, आदि\n\nडेटा ऑब्जेक्ट [`h()`](#snabbdomh) का (वैकल्पिक) दूसरा पैरामीटर है\n\nउदाहरण के लिए `h('div', {props: {className: 'container'}}, [...])` एक वर्चुअल नोड तैयार करेगा\n\n```mjs\n({\n  props: {\n    className: \"container\"\n  }\n});\n```\n\nas its `.data` object.\n\n### children : Array\u003cvnode\u003e\n\nवर्चुअल नोड की `.children` संपत्ति तीसरी (वैकल्पिक) है\nनिर्माण के दौरान [`h()`](#snabbdomh) का पैरामीटर। `.children` है\nबस आभासी नोड्स की एक सरणी जिसे बच्चों के रूप में जोड़ा जाना चाहिए\nनिर्माण पर मूल DOM नोड।\n\nउदाहरण के लिए `h('div', {}, [ h('h1', {}, 'Hello, World') ])` होगा\nके साथ एक वर्चुअल नोड बनाएं\n\n```mjs\n[\n  {\n    sel: \"h1\",\n    data: {},\n    children: undefined,\n    text: \"Hello, World\",\n    elm: Element,\n    key: undefined\n  }\n];\n```\n\nas its `.children` property.\n\n### text : string\n\n`.text` प्रॉपर्टी तब बनाई जाती है जब एक वर्चुअल नोड बनाया जाता है\nकेवल एक ही बच्चा जिसके पास पाठ है और केवल उसकी आवश्यकता है\n`document.createTextNode()` का उपयोग किया जाना है।\n\nउदाहरण के लिए: `h('h1', {}, 'Hello')` एक वर्चुअल नोड बनाएगा\n`हैलो` इसकी `.text` संपत्ति के रूप में।\n\n### elm : Element\n\nवर्चुअल नोड की `.elm` संपत्ति वास्तविक DOM का सूचक है\nस्नैबडोम द्वारा बनाया गया नोड। यह संपत्ति करने में बहुत उपयोगी है\n[hooks](#hooks) में गणना के साथ-साथ\n[modules](#modules-documentation).।\n\n### key : string | number\n\n`.key` प्रॉपर्टी तब बनती है जब आपके अंदर एक कुंजी प्रदान की जाती है\n[`.data`](#data--object) ऑब्जेक्ट। `.key` प्रॉपर्टी का उपयोग रखने के लिए किया जाता है\nDOM नोड्स की ओर संकेत जो पहले से मौजूद थे ताकि उन्हें दोबारा बनाने से बचा जा सके\nयदि यह अनावश्यक है. यह सूची जैसी चीजों के लिए बहुत उपयोगी है\nपुन: व्यवस्थित करना। अनुमति देने के लिए कुंजी या तो एक स्ट्रिंग या एक संख्या होनी चाहिए\nउचित लुकअप क्योंकि इसे आंतरिक रूप से कुंजी/मूल्य जोड़ी के रूप में संग्रहीत किया जाता है\nएक ऑब्जेक्ट, जहां `.key` कुंजी है और मान है\n[`.elm`](#elm--element) संपत्ति बनाई गई।\n\nयदि प्रदान किया गया है, तो `.key` संपत्ति सहोदर तत्वों के बीच अद्वितीय होनी चाहिए।\n\nउदाहरण के लिए: `h('div', {key: 1}, [])` एक वर्चुअल नोड बनाएगा\n`.key` गुण वाली वस्तु जिसका मान `1` है।\n\n## अनुप्रयोगों की संरचना करना\n\nस्नैबडॉम एक निम्न-स्तरीय वर्चुअल DOM लाइब्रेरी है। इसके साथ कोई राय नहीं है आपको अपने आवेदन की संरचना किस प्रकार करनी चाहिए इसके संबंध में।\n\nयहां स्नैबडॉम के साथ एप्लिकेशन बनाने के कुछ दृष्टिकोण दिए गए हैं।\n\n- [functional-frontend-architecture](https://github.com/paldepind/functional-frontend-architecture) –\n  एक भंडार जिसमें कई उदाहरण अनुप्रयोग शामिल हैं\n  एक ऐसी वास्तुकला को प्रदर्शित करता है जो स्नैबडॉम का उपयोग करती है।\n- [Cycle.js](https://cycle.js.org/) –\n  \"क्लीनर कोड के लिए एक कार्यात्मक और प्रतिक्रियाशील जावास्क्रिप्ट ढांचा\"\n  स्नैबडोम का उपयोग करता है\n- [Vue.js](http://vuejs.org/) use a fork of snabbdom.\n- [scheme-todomvc](https://github.com/amirouche/scheme-todomvc/) स्नैबडॉम बाइंडिंग के शीर्ष पर रिडक्स-जैसी वास्तुकला का निर्माण करें।\n- [kaiju](https://github.com/AlexGalays/kaiju) -\n  स्नैबडॉम के शीर्ष पर स्टेटफुल घटक और अवलोकन\n- [Tweed](https://tweedjs.github.io) –\n  प्रतिक्रियाशील इंटरफेस के लिए एक ऑब्जेक्ट ओरिएंटेड दृष्टिकोण।\n- [Cyclow](http://cyclow.js.org) -\n  \"जावास्क्रिप्ट के लिए एक प्रतिक्रियाशील फ्रंटएंड ढांचा\"\n  स्नैबडोम का उपयोग करता है\n- [Tung](https://github.com/Reon90/tung) –\n  HTML प्रस्तुत करने के लिए एक जावास्क्रिप्ट लाइब्रेरी। तुंग एचटीएमएल और जावास्क्रिप्ट विकास को विभाजित करने में मदद करता है।\n- [sprotty](https://github.com/theia-ide/sprotty) - \"एक वेब-आधारित आरेखण ढाँचा\" स्नैबडॉम का उपयोग करता है।\n- [Mark Text](https://github.com/marktext/marktext) - \"रियलटाइम प्रीव्यू मार्कडाउन एडिटर\" स्नैबडॉम पर निर्मित है।\n- [puddles](https://github.com/flintinatux/puddles) - \"छोटा वीडोम ऐप फ्रेमवर्क। शुद्ध रिडक्स। कोई बॉयलरप्लेट नहीं।\" - दिल से निर्मित: स्नैबडॉम पर।\n- [Backbone.VDOMView](https://github.com/jcbrand/backbone.vdomview) - A [Backbone](http://backbonejs.org/) स्नैबडॉम के माध्यम से वर्चुअलडोम क्षमता के साथ देखें।\n- [Rosmaro Snabbdom starter](https://github.com/lukaszmakuch/rosmaro-snabbdom-starter) - राज्य मशीनों और स्नैबडोम के साथ यूजर इंटरफेस का निर्माण।\n- [Pureact](https://github.com/irony/pureact) - \"रिएक्ट का 65 लाइनों का कार्यान्वयन जिसमें केवल एक निर्भरता के साथ Redux और हुक शामिल हैं - Snabbdom\"\n- [Snabberb](https://github.com/tobymao/snabberb) - प्रतिक्रियाशील विचारों के निर्माण के लिए [Opal](https://github.com/opal/opal) और स्नैबडोम का उपयोग करते हुए एक न्यूनतम रूबी ढांचा।\n- [WebCell](https://github.com/EasyWebApp/WebCell) - JSX और TypeScript पर आधारित वेब कंपोनेंट इंजन\n\nयदि आप किसी अन्य तरीके से एप्लिकेशन बना रहे हैं तो इसे साझा करना सुनिश्चित करें\nस्नैबडोम का उपयोग करना।\n\n## आम त्रुटियों\n\n```text\nUncaught NotFoundError: Failed to execute 'insertBefore' on 'Node':\n    The node before which the new node is to be inserted is not a child of this node.\n```\n\nइस त्रुटि का कारण पैच के बीच वीनोड्स का पुन: उपयोग करना है (कोड उदाहरण देखें), स्नैबडॉम प्रदर्शन में सुधार के रूप में पास किए गए वर्चुअल डोम नोड्स के अंदर वास्तविक डोम नोड्स को संग्रहीत करता है, इसलिए पैच के बीच नोड्स का पुन: उपयोग समर्थित नहीं है।\n\n```mjs\nconst sharedNode = h(\"div\", {}, \"Selected\");\nconst vnode1 = h(\"div\", [\n  h(\"div\", {}, [\"One\"]),\n  h(\"div\", {}, [\"Two\"]),\n  h(\"div\", {}, [sharedNode])\n]);\nconst vnode2 = h(\"div\", [\n  h(\"div\", {}, [\"One\"]),\n  h(\"div\", {}, [sharedNode]),\n  h(\"div\", {}, [\"Three\"])\n]);\npatch(container, vnode1);\npatch(vnode1, vnode2);\n```\n\nआप ऑब्जेक्ट की एक उथली प्रतिलिपि बनाकर इस समस्या को ठीक कर सकते हैं (यहां ऑब्जेक्ट स्प्रेड सिंटैक्स के साथ):\n\n```mjs\nconst vnode2 = h(\"div\", [\n  h(\"div\", {}, [\"One\"]),\n  h(\"div\", {}, [{ ...sharedNode }]),\n  h(\"div\", {}, [\"Three\"])\n]);\n```\n\nएक अन्य समाधान फ़ैक्टरी फ़ंक्शन में साझा vnodes को लपेटना होगा:\n\n```mjs\nconst sharedNode = () =\u003e h(\"div\", {}, \"Selected\");\nconst vnode1 = h(\"div\", [\n  h(\"div\", {}, [\"One\"]),\n  h(\"div\", {}, [\"Two\"]),\n  h(\"div\", {}, [sharedNode()])\n]);\n```\n\n## सामुदायिक प्रतिक्रिया का अवसर\n\nपुल अनुरोध, जिन पर समुदाय प्रतिक्रिया देने में रुचि रखता है, उन्हें कुछ दिनों का अवसर प्रदान किए जाने के बाद विलय कर दिया जाना चाहिए।\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnabbdom%2Fsnabbdom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnabbdom%2Fsnabbdom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnabbdom%2Fsnabbdom/lists"}