Skip to main content

get start

Get start xnew in less than 10 minutes.

setup​

via cdn​

<script src="https://unpkg.com/xnew@2.3.x/dist/xnew.js"></script>

via cdn (ESM)​

<script type="importmap">
{
  "imports": {
    "xnew": "https://unpkg.com/xnew@2.3.x/dist/xnew.module.js"
  }
}
</script>

<script type="module">
import xnew from 'xnew'

// ...
</script>

via npm​

npm install xnew@2.3.x
import xnew from 'xnew'

tutorial​

basic usage​

By calling xnew, an unit (self) will be created.
If you set a component function to xnew, you will implement various features.

const unit = xnew(Component, ...args);    

function Component(self, ...args) {
  // ...
  // implement features
}

You can also create a html element using xnew.

const unit = xnew({ className: '...', style: '...', ... }, 'inner html');

unit.element;

example 1​

You can create html elements using xnew and xnew.nest.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/xnew@2.3.x/dist/xnew.js"></script>
</head>
<body>
  <script>
    xnew(Div);

    function Div(self) {
      xnew.nest({ style: { margin: '4px', padding: '4px', border: 'solid 1px #222' } });

      xnew({ tagName: 'p' }, 'my div');
      xnew(Divs);
    }

    function Divs(self) {
      xnew.nest({ style: { display: 'flex' } });

      xnew({ style: { width: '160px', height: '36px', background: '#d66'} }, '1');
      xnew({ style: { width: '160px', height: '36px', background: '#6d6'} }, '2');
      xnew({ style: { width: '160px', height: '36px', background: '#66d'} }, '3');
    }
  </script>
</body>
</html>

example 2​

You can implement various process in the componet function.
In the following example, we set up an event listener and animation.

<body>
  <script>
    xnew(Component);

    function Component(self) {
      xnew.nest({
        style: {
          position: 'absolute',
          width: '200px',
          height: '200px',
          inset: 0,
          margin: 'auto',
          background: '#08F'
        }
      });
      
      xnew({ tagName: 'span' }, 'click me');
      
      self.on('click', (event) => {
        self.state === 'running' ? self.stop() : self.start();
      });

      let counter = 0;
      return {
        update() {
          self.element.style.transform = `rotate(${counter++}deg)`;
        },
      };
    }
  </script>
</body>

example 3​

If you call xnew inside a component function, a parent-child relationship is connected.
The conencted xnodes will work together.
For example, when the parent component stop, its children also stop.

<body>
  <script>
    xnew(Parent);

    function Parent(self) {
      xnew.nest({
        style: {
          position: 'absolute',
          width: '200px',
          height: '200px',
          inset: 0,
          margin: 'auto',
          background: '#08F'
        }
      });
      
      const text = xnew({ tagName: 'span' });

      xnew(Child);

      self.on('click', () => {
        self.state === 'running' ? self.stop() : self.start();
      });

      let counter = 0;
      return {
        start() {
          text.element.textContent = 'parent: start';
        },
        update() {
          self.element.style.transform = `rotate(${counter++}deg)`;
        },
        stop() {
          text.element.textContent = 'parent: stop';
        },
      };
    }

    function Child(self) {
      xnew.nest({
        style: {
          position: 'absolute',
          width: '100px',
          height: '100px',
          inset: 0,
          margin: 'auto',
          background: '#F80'
        }
      });
      
      const text = xnew({ tagName: 'span' });

      self.on('click', (event) => {
        event.stopPropagation(); // cancel propagation to the parent element
        self.state === 'running' ? self.stop() : self.start();
      });

      let counter = 0;
      return {
        start() {
          text.element.textContent = 'child: start';
        },
        update() {
          self.element.style.transform = `rotate(${counter++}deg)`;
        },
        stop() {
          text.element.textContent = 'child: stop';
        },
      };
    }
  </script>
</body>