@pulsor/core

Virtual DOM unleashed

Usage no npm install needed!

<script type="module">
  import pulsorCore from 'https://cdn.skypack.dev/@pulsor/core';
</script>

README

@puslor/core

Core runtime for the pulsor framework

Installation

npm install @pulsor/core

Basic usage

import { run } from '@pulsor/core';

const app = // app definition ...

run(app);

The app is a single tree of vNodes describing the whole app.

Raw hello world 
import { run } from '@pulsor/core';

// App definition
const app = {
  type: 'div',
  children: [
    {
      type: 'h1',
      children: 'Hello world'
    }
  ]
};

// Run app
run(app);
Using the h helper directly 
import { run, h } from '@pulsor/core';

// App definition
const app = (
  h('div', {}, [
    h('h1', {}, 'Hello world')
  ])
);

// Run app
run(app);

h stands for HyperScript: h(type, props, ...children)

Using JSX 
import { run } from '@pulsor/core';

// App definition
const app = (
  <div>
    <h1>Hello world</h1>
  </div>
)

// Run app
run(app);

Counter

import { run } from '@pulsor/core';

const Init = { count: 0 };
const Decrement = (state) => ({ count: state.count - 1 });
const Increment = (state) => ({ count: state.count + 1 });

const app = (
  <main init={Init}>
    <h1>{(state) => state.count}</h1>
    <button onclick={Decrement}>-</button>
    <button onclick={Increment}>+</button>
  </main>
);

run(app);

Docs coming soon!