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.
Features
- ⚡ No runtime code, 0kb size.
Table of Contents
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-compilerConfigure 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>
);
};The Origin of Name
🤖 RX-9 Narrative Gundam, ready to launch!
License
MIT