{"id":17956410,"url":"https://github.com/o0101/vanillaview","last_synced_at":"2025-03-25T02:31:21.451Z","repository":{"id":71110090,"uuid":"357433500","full_name":"o0101/vanillaview","owner":"o0101","description":"Easy to use views with vanilla JS semantics","archived":false,"fork":false,"pushed_at":"2022-03-18T02:38:28.000Z","size":162,"stargazers_count":12,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T11:56:57.903Z","etag":null,"topics":["frontend","html","javascript","javascript-library","view"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/o0101.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"crislin2046","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-04-13T05:24:15.000Z","updated_at":"2022-05-11T15:03:17.000Z","dependencies_parsed_at":"2023-02-25T09:00:46.895Z","dependency_job_id":null,"html_url":"https://github.com/o0101/vanillaview","commit_stats":null,"previous_names":["o0101/vanillaview"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o0101%2Fvanillaview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o0101%2Fvanillaview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o0101%2Fvanillaview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o0101%2Fvanillaview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/o0101","download_url":"https://codeload.github.com/o0101/vanillaview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245385457,"owners_count":20606651,"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":["frontend","html","javascript","javascript-library","view"],"created_at":"2024-10-29T10:37:43.540Z","updated_at":"2025-03-25T02:31:21.116Z","avatar_url":"https://github.com/o0101.png","language":"JavaScript","funding_links":["https://github.com/sponsors/crislin2046"],"categories":[],"sub_categories":[],"readme":"# [VanillaView](https://github.com/i5ik/vanillaview/) \u0026middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/i5ik/vanillaview/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/vanillaviewjs.svg?style=flat)](https://www.npmjs.com/package/vanillaviewjs) ![npm](https://img.shields.io/npm/dt/brutalist-web?label=brutalist-web%20downloads) ![npm](https://img.shields.io/npm/dt/dumbass?label=dumbass%20downloads) ![npm](https://img.shields.io/npm/dt/vanillaviewjs?label=vanillaview%20downloads)\n\nVanillaView is a vanilla JS module for UI.\n\n- No build-step\n- DOM-based, mutates in place\n\n[Learn how to use VanillaView in your own project](#Learn).\n\n*Why are there 3 names above in the NPM downloads badges? **Because** these are the 3 (so far) iterations of this project and their respective names. ;P ;)xx*\n\n## Features\n\n- minimal updates with no vDOM overhead\n- zero dependencies\n- no toolchain required\n- no switching context, no switching conceptual model needed. Use the existing \nvanilla JavaScript semantics you already know\nand HTML semantics you're already familiar with\n- use as much or as little as you want\n\n## Learn\n\nNow you can add a container to the HTML:\n\n```html\n\n  \u003c!-- ... existing HTML ... --\u003e\n\n  \u003cdiv id=container\u003e\u003c/div\u003e\n\n  \u003c!-- ... existing HTML ... --\u003e\n\n```\n\nSecond, add some `\u003cscript\u003e` tags:\n\n```html\n\n  \u003c!-- Load VanillaView. --\u003e\n  \u003cscript src=https://unpkg.com/vanillaviewjs@latest/dist/vanillaview.js crossorigin\u003e\u003c/script\u003e\n\n  \u003c!-- Load our VanillaView component. --\u003e\n  \u003cscript src=button.js\u003e\u003c/script\u003e\n\n```\n\nThird, add code to `button.js`:\n\n```js\n\n  const State = { clicked: false };\n  const domContainer = document.querySelector('#container');\n\n  Button().to(domContainer, 'innerhtml');\n\n  function Button() {\n    return vanillaview.s`\n      \u003cbutton click=${() =\u003e State.clicked = true}\u003e\n        Click\n      \u003c/button\u003e\n    `;\n  }\n\n```\n\nAnd you're done!\n\nYou'll notice that we added an event listener for the `click` event simply by adding a function to the click attribute in the HTML. All event handlers are added this way, using the events name, without any capitalization. If you want to add flags (like 'passive', or 'once') you can separate them with `:`, like \n\n```js\nconst PassiveScroller = () =\u003e c`\n  \u003cdiv scroll:passive:once=${ ev =\u003e console.log('I scrolled', ev) }\u003e\u003c/div\u003e\n`;\n```\n\n## Installation\n\nVanillaView has been designed for gradual adoption from the start, and **you can use as little or as much VanillaView as you need**\n\n```console\n$ npm i --save vanillaviewjs\n```\n\nor use a CDN, like in the above Learn section.\n\n## Examples\n\nHere is the first one to get you started:\n\n```js\nfunction HelloMessage({ name }) {\n  return s`\u003cdiv\u003eHello ${name}\u003c/div\u003e`;\n}\n\nHelloMessage({name:'Tay-anne'}).to(\n  document.getElementById('container'),\n  'afterbegin'\n);\n```\n\nThis example will render \"Hello Tay-anne\" into a container on the page. \n\nYou'll notice that we used an HTML syntax; [we call it HTML](https://www.w3schools.com/html/). HTML is required to use VanillaView, it makes code more readable, and writing it feels like writing HTML. If you're using VanillaView as a `\u003cscript\u003e` tag, you're all good; otherwise, and you'll never need a toolchain to handle it automatically.\n\nThe `to` function places your component where you want it on the page. It [supports all the locations that insertAdjacentHTML does](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) as well as 'replace' (which removes the location and replaces it with your component), and 'innerhtml' (which sets the `.innerHTML` property of the location to your component's HTML).\n\n## [Advanced Topic] s vs c\n\nVanillaView provides two render functions: `s` and `c`. \n\n`s` is for singleton components. These are things that you expect to have a single identity, and show up in only one location in your document. But note that these singletons can be keyed, a keyed singleton can show up in more than one location, but *only where its keys are different.* The singleton for each key will only exist in one place. \n\nThe benefits of singletons are effortless updates. Every time you call them, they will repaint their corresponding widget, with the minimal number of changes necessary. If you want to move a singleton to a new location in the document, you need to the `to` method on it again, like `Button().to(newLocation)`.\n\nWith all these benefits why would you ever want to use `c` components? `c` components are for components (or clones). Every time you call a `c` component, it creates new nodes. You might want to use this where you need a lot of widgets but you don't need or want to add keys to them to keep track of them. You need to place those nodes in the document, either using `to` or via nesting, like,\n\n```js\nconst Child = count =\u003e c`\u003cspan\u003e${count}\u003c/span\u003e`;\nconst Parent = lastCount =\u003e s`\u003cdiv\u003e${Child(0)}, ${Child(lastCount)}\u003c/div\u003e`;\n```\n\nBoth `s` and `c` components can be arbitrarily nested inside each other. To add a key to an `s` component, simply do like so,\n\n```js\n\n// add the key as the first slot in your component\n\nconst KeyedSingleton = (key, name) =\u003e s`\n  ${{key}}\n  \u003cdiv\u003e\n    I'm unique. My name is now ${name}\n  \u003c/div\u003e\n`;\n\n// initial insert\nKeyedSingleton('0', 'larry').to('body','afterbegin');\nKeyedSingleton('1', 'laura').to('body','afterbegin');\n\n// update\nKeyedSingleton('0', 'laura');\nKeyedSingleton('1', 'larry');\n\n```\n\nKeys always need to be strings. Any other type will throw an error.\n\n## Contributing\n\nThe main purpose of this repository is to continue evolving VanillaView core, making it faster and easier to use. Development of VanillaView happens in the common wealth of GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving VanillaView.\n\n### Code of Conduct\n\nDosyago has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://github.com/i5ik/vanillaviewjs/blob/main/docs/coc.md) so that you can understand what actions will and will not be tolerated.\n\n### Contributing Guide\n\nOpen a issue to propose a PR, get it approved, sign the [CLA](https://github.com/i5ik/vanillaviewjs/blob/main/docs/CLA.md), and submit a PR.\n\n### License\n\nVanillaView is [MIT licensed](./LICENSE).\n\n## Haiku\n\n\u003e When you get around\n\u003e\n\u003e To taking over the world\n\u003e\n\u003e The humble vanillaview\n\u003e\n\u003e Will be your steadfast friend\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fo0101%2Fvanillaview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fo0101%2Fvanillaview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fo0101%2Fvanillaview/lists"}