https://github.com/ryanmorr/viewdoo
A crude Svelte-inspired UI library just because
https://github.com/ryanmorr/viewdoo
javascript proof-of-concept reactive ui
Last synced: 5 months ago
JSON representation
A crude Svelte-inspired UI library just because
- Host: GitHub
- URL: https://github.com/ryanmorr/viewdoo
- Owner: ryanmorr
- License: unlicense
- Created: 2020-04-13T17:46:40.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-16T11:19:29.000Z (about 2 years ago)
- Last Synced: 2025-02-13T13:24:45.318Z (over 1 year ago)
- Topics: javascript, proof-of-concept, reactive, ui
- Language: JavaScript
- Homepage:
- Size: 508 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# viewdoo
[![Version Badge][version-image]][project-url]
[![License][license-image]][license-url]
[![Build Status][build-image]][build-url]
> A crude Svelte-inspired UI library just because
## Description
This 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.
## Install
Download 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:
```sh
npm install @ryanmorr/viewdoo
```
## Usage
A 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:
```javascript
import viewdoo from '@ryanmorr/viewdoo';
const Counter = viewdoo(`
.counter {
padding: 1em;
border: 1px solid black;
}
this.count = 0;
function increment() {
count += 1;
}
Count: {{count}}
Increment
`);
```
Components 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:
```javascript
const HelloWorld = viewdoo(`
const message = 'World';
Hello {{message}}
`);
```
A 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:
```javascript
const Clock = viewdoo(`
const getTime = () => new Date().toLocaleTimeString();
this.time = getTime();
setInterval(() => (time = getTime()), 1000);
Time: {{time}}
`);
```
The HTML structure is formulated using mustache-style templating that supports simple value interpolation, expressions, loops, and if statements:
```javascript
const Users = viewdoo(`
this.users = [
{name: 'Joe', isLoggedIn: true},
{name: 'John', isLoggedIn: false},
{name: 'Jane', isLoggedIn: true},
{name: 'Jim', isLoggedIn: true},
{name: 'Jen', isLoggedIn: false}
];
- {{i + 1}}: {{name}}
- {{i + 1}}: {{name}}
{{each users as {name, isLoggedIn}, i}}
{{if isLoggedIn}}
{{else}}
{{/if}}
{{/each}}
`);
```
Including a style tag allows you to declare CSS styles that are automatically scoped to the component, supporting all CSS selectors and media queries:
```javascript
const Foo = viewdoo(`
.foo {
background-color: red;
}
@media screen and (max-width: 600px) {
.foo {
background-color: blue;
}
}
`);
```
The 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:
```javascript
// Create an instance of a component
const [fragment, state] = Component({
foo: 1,
bar: 2,
baz: 3
});
// Mount the component instance to the DOM
document.body.appendChild(fragment);
// Changing the component instance state externally will trigger an update
state.foo = 20;
```
## License
This project is dedicated to the public domain as described by the [Unlicense](http://unlicense.org/).
[project-url]: https://github.com/ryanmorr/viewdoo
[version-image]: https://img.shields.io/github/package-json/v/ryanmorr/viewdoo?color=blue&style=flat-square
[build-url]: https://github.com/ryanmorr/viewdoo/actions
[build-image]: https://img.shields.io/github/actions/workflow/status/ryanmorr/viewdoo/node.js.yml?style=flat-square
[license-image]: https://img.shields.io/github/license/ryanmorr/viewdoo?color=blue&style=flat-square
[license-url]: UNLICENSE