@narrative/control-flow NPM

Narrative

Packages

Package	Badges
@narrative/control-flow
@narrative/babel-plugin-compiler
@narrative/swc-plugin-compiler
@narrative/vite-plugin-compiler

Introduction

Narrative(abbreviated as nt) is a compiler tool for create neater control flow tags such as <If>/<For>/<Switch> for JSX/TSX.

Live demo is here.

Features

⚡ No runtime code, 0kb size.

Installation

Using with Babel

npm i @narrative/control-flow @narrative/babel-plugin-compiler

.babelrc:

{
  "plugins": ["@narrative/compiler"]
}

Using with SWC

npm install @narrative/control-flow @narrative/swc-plugin-compiler

Configure swc

{
  "jsc": {
    "experimental": {
      "plugins": [["@narrative/swc-plugin-compiler", {}]]
    }
  }
}

Basic Overview

import { useState, FC } from 'react';
import { If, ElseIf, Else, For, Empty, Switch, Case, Default } from '@narrative/control-flow';

const App: FC = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = () => {
    setTodos(todos.concat(`Item ${todos.length}`));
  };

  return (
    <div className="app">
      <ul>
        <For of={todos}>
          {(todo, { index }) => (
            <If when={index > 5}>
              <li key={index}>{todo * 3}</li>
              <ElseIf when={index > 10}>
                <li key={index}>{todo * 4}</li>
              </ElseIf>
              <Else>
                <li key={index}>{todo * 5}</li>
              </Else>
            </If>
          )}
          <Empty>
            <li>No data</li>
          </Empty>
        </For>
      </ul>
      <ul>
        <For in={{ a: 1, b: 2, c: 3 }}>
          {(item, { key }) => <li key={key}>{item}</li>}
          <Empty>
            <li>No data</li>
          </Empty>
        </For>
      </ul>
      <Switch value={todos.length}>
        <Case is={1}>1</Case>
        <Case is={2}>2</Case>
        <Case in={[3, 4, 5]}>3/4/5</Case>
        <Default>More than 2</Default>
      </Switch>
    </div>
  );
};