Skip to content

Latest commit

 

History

History
213 lines (154 loc) · 4.19 KB

tutorial.md

File metadata and controls

213 lines (154 loc) · 4.19 KB
Raw

Fusor Tutorial

Install

npm install @fusorjs/dom

You can completely go without JSX or any build tools by using functional notation that is interchangeable with JSX

FN Playground

Configure JSX

If you going to use JSX, you will need a build tool. For example, TypeScript compiler will suffice

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "jsx"
  }
}

JSX Playground

Creating DOM

let value = 0;

const htmlDivElement = (
  <div>
    <p>Static {value} content</p>
  </div>
);

document.body.append(htmlDivElement);

Updating DOM

let value = 0;

const fusorComponent = (
  <div>
    <p>Dynamic {() => value} content</p>
  </div>
);

document.body.append(fusorComponent.element);

setInterval(() => {
  value += 1;
  fusorComponent.update();
}, 1000);

Fusor component

class Component {
  // Return DOM Element of this Component
  get element();

  // Update the Element's attributes and children recursively
  update();
}

Static vs dynamic

What makes a static DOM tree

const htmlDivElement1 = <div>Children that are not functions</div>;

const htmlDivElement2 = (
  <div>
    Children made of other <b>static</b> DOM elements {htmlDivElement1}
  </div>
);

const htmlDivElement3 = (
  <div class="name">Attributes or properties that are not functions</div>
);

const htmlDivElement4 = <div click$e={(event) => 'Event handlers'} />;

What makes a dynamic Fusor component

const fusorComponent1 = <div>{() => count} child is a function </div>;

const fusorComponent2 = <div>{fusorComponent1} child is a component</div>;

const fusorComponent3 = (
  <div class={() => name}>attribute or property is a function</div>
);

Keys: attributes, properties, events

<div
  name="set property or attribute automatically"
  name$a="set attribute"
  name$p="set property"
  name$e={() => 'set event handler'}
/>

See full reference on keys

Making reusable components

Create components by encapsulating Fusor components with properties and state in functions

Playground

const CountingButton = (props) => {
  let state = props.init || 0;

  const component = (
    <button
      click$e={() => {
        state += 1;
        component.update();
      }}
    >
      Clicked {() => state} times
    </button>
  );

  return component;
};

The above could be shortened to:

const CountingButton = ({init: count = 0}) => (
  <button click$e$update={() => (count += 1)}>
    Clicked {() => count} times
  </button>
);

Component rules

  • Fusor component names (HTML/SVG) start with lowercase letters
  • Your component names must be capitalized
  • Your components can take a single props object argument

Component lifecycle

  1. Initialization of component
  2. Mount to DOM
  3. Update DOM
  4. Unmount from DOM
const CounterComponent = (count = 0) => (
  <div
    // 2. Mount
    mount={(self) => {
      const timerId = setInterval(() => {
        count++;
        self.update(); // 3. Update
      }, 1000);

      // 4. Unmount
      return () => clearInterval(timerId);
    }}
  >
    Since mounted {() => count} seconds elapsed
  </div>
);

// 1. Initialization
const component = CounterComponent();

document.body.append(component.element);

Lifecycle example

SVG analog clock

Next

This is all you need to start developing with Fusor.

For more detailed information read:

Also check these demo applications: