{"id":20129365,"url":"https://github.com/ryanmorr/viewdoo","last_synced_at":"2026-01-20T18:56:00.828Z","repository":{"id":41672422,"uuid":"255400834","full_name":"ryanmorr/viewdoo","owner":"ryanmorr","description":"A crude Svelte-inspired UI library just because","archived":false,"fork":false,"pushed_at":"2024-06-16T11:19:29.000Z","size":520,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-13T13:24:45.318Z","etag":null,"topics":["javascript","proof-of-concept","reactive","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanmorr.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":"2020-04-13T17:46:40.000Z","updated_at":"2024-05-29T15:54:13.000Z","dependencies_parsed_at":"2024-05-29T18:32:19.803Z","dependency_job_id":"dfff77f7-a359-44fd-ad82-923055b61519","html_url":"https://github.com/ryanmorr/viewdoo","commit_stats":{"total_commits":66,"total_committers":2,"mean_commits":33.0,"dds":"0.21212121212121215","last_synced_commit":"fbb4383cf7cf14749bce2db006a60ee0eb3b630f"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fviewdoo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fviewdoo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fviewdoo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fviewdoo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanmorr","download_url":"https://codeload.github.com/ryanmorr/viewdoo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640509,"owners_count":20971553,"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":["javascript","proof-of-concept","reactive","ui"],"created_at":"2024-11-13T20:33:54.348Z","updated_at":"2026-01-20T18:56:00.811Z","avatar_url":"https://github.com/ryanmorr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# viewdoo\n\n[![Version Badge][version-image]][project-url]\n[![License][license-image]][license-url]\n[![Build Status][build-image]][build-url]\n\n\u003e A crude Svelte-inspired UI library just because\n\n## Description\n\nThis project is a proof of concept, built on the principles of another project of mine called [voodoo](https://github.com/ryanmorr/voodoo). Combined with the functionality of [stache](https://github.com/ryanmorr/stache) and [csscope](https://github.com/ryanmorr/csscope) to create a basic implementation that mimics the core features of Svelte.\n\n## Install\n\nDownload the [CJS](https://github.com/ryanmorr/viewdoo/raw/master/dist/cjs/viewdoo.js), [ESM](https://github.com/ryanmorr/viewdoo/raw/master/dist/esm/viewdoo.js), [UMD](https://github.com/ryanmorr/viewdoo/raw/master/dist/umd/viewdoo.js) versions or install via NPM:\n\n```sh\nnpm install @ryanmorr/viewdoo\n```\n\n## Usage\n\nA viewdoo component features similar composition and functionality to a Svelte component; encapsulating scoped styles, reactive scripting, and HTML templating to form reusable, self-contained views:\n\n```javascript\nimport viewdoo from '@ryanmorr/viewdoo';\n\nconst Counter = viewdoo(`\n    \u003cstyle\u003e\n        .counter {\n            padding: 1em;\n            border: 1px solid black;\n        }\n    \u003c/style\u003e\n\n    \u003cscript\u003e\n        this.count = 0;\n                \n        function increment() {\n            count += 1;\n        }\n    \u003c/script\u003e\n\n    \u003cdiv class=\"counter\"\u003e\n        \u003cp\u003eCount: {{count}}\u003c/p\u003e\n        \u003cbutton onclick={{increment}}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n`);\n```\n\nComponents are defined by providing the source as a string consisting of HTML markup with optional style and script tags. The script tag contains just regular JavaScript responsible for managing the state and behavior of a component instance in an isolated context. Any variables defined within the script are available to the template:\n\n```javascript\nconst HelloWorld = viewdoo(`\n    \u003cscript\u003e\n        const message = 'World';\n    \u003c/script\u003e\n\n    \u003ch1\u003eHello {{message}}\u003c/h1\u003e\n`);\n```\n\nA state variable can be defined by assigning properties to `this` within the script. These variables are reactive by nature, meaning they will automatically trigger an update of the component when the value is changed:\n\n```javascript\nconst Clock = viewdoo(`\n    \u003cscript\u003e\n        const getTime = () =\u003e new Date().toLocaleTimeString();\n\n        this.time = getTime();\n        \n        setInterval(() =\u003e (time = getTime()), 1000);\n    \u003c/script\u003e\n\n    \u003cdiv\u003eTime: {{time}}\u003c/div\u003e\n`);\n```\n\nThe HTML structure is formulated using mustache-style templating that supports simple value interpolation, expressions, loops, and if statements:\n\n```javascript\nconst Users = viewdoo(`\n    \u003cscript\u003e\n        this.users = [\n            {name: 'Joe', isLoggedIn: true},\n            {name: 'John', isLoggedIn: false},\n            {name: 'Jane', isLoggedIn: true},\n            {name: 'Jim', isLoggedIn: true},\n            {name: 'Jen', isLoggedIn: false}\n        ];\n    \u003c/script\u003e\n\n    \u003cul\u003e\n        {{each users as {name, isLoggedIn}, i}}\n            {{if isLoggedIn}}\n                \u003cli class=\"logged-in\"\u003e{{i + 1}}: {{name}}\u003c/li\u003e\n            {{else}}\n                \u003cli class=\"logged-out\"\u003e{{i + 1}}: {{name}}\u003c/li\u003e\n            {{/if}}\n        {{/each}}\n    \u003c/ul\u003e\n`);\n```\n\nIncluding a style tag allows you to declare CSS styles that are automatically scoped to the component, supporting all CSS selectors and media queries:\n\n```javascript\nconst Foo = viewdoo(`\n    \u003cstyle\u003e\n        .foo {\n            background-color: red;\n        }\n\n        @media screen and (max-width: 600px) {\n            .foo {\n                background-color: blue;\n            }\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"foo\"\u003e\u003c/div\u003e\n`);\n```\n\nThe source string of the component is compiled and returns a constructor function for creating instances. You can than create instances of the component with an optional initial state, the properties of which will become reactive state variables within the inner script of the component. It returns an array with the rendered component inside a document fragment at the first index and an external state object at the second index. The properties of this external state object and the internal reactive state variables of the same name will always remain in sync with one another because they are in fact one and the same:\n\n```javascript\n// Create an instance of a component\nconst [fragment, state] = Component({\n    foo: 1,\n    bar: 2,\n    baz: 3\n});\n\n// Mount the component instance to the DOM\ndocument.body.appendChild(fragment);\n\n// Changing the component instance state externally will trigger an update\nstate.foo = 20;\n```\n\n## License\n\nThis project is dedicated to the public domain as described by the [Unlicense](http://unlicense.org/).\n\n[project-url]: https://github.com/ryanmorr/viewdoo\n[version-image]: https://img.shields.io/github/package-json/v/ryanmorr/viewdoo?color=blue\u0026style=flat-square\n[build-url]: https://github.com/ryanmorr/viewdoo/actions\n[build-image]: https://img.shields.io/github/actions/workflow/status/ryanmorr/viewdoo/node.js.yml?style=flat-square\n[license-image]: https://img.shields.io/github/license/ryanmorr/viewdoo?color=blue\u0026style=flat-square\n[license-url]: UNLICENSE","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanmorr%2Fviewdoo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanmorr%2Fviewdoo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanmorr%2Fviewdoo/lists"}