风毛菊

编译器-内在反应框架. 编译器知道什么是反应性的,所以会写出普通的TypeScript.

大多数反应性框架要求您在脑中保留一个语言不共享的模型:读取的被跟踪,你可能无法解构,一个值必须保留一个函数. 编译器无济于事,因为它不知道你的价值观是什么:所以负担是你的,而失败是安静的.

Fluixi的编译器知道. 它解决了一种反应性原始 由它来自绑定, 而不是通过名称的读取, 通过JSX和 html 模板,它生成的DOM,SSR,水分和路由作为一个模型.

特征

• 🧠 编译器理解反应 - 通过捆绑而不是名称解决原始人的问题;一个别名被承认,一个同名的本地函数不是
• ✂️ 调整道具结构 - 说吧 function Card({ title }) 不断更新; ...rest 成为 splitProps 打电话给你,你会写
• ✍️ 两个语法,一个模型 - 联合来文X和 html 将模板编译成相同的被动表示
• 🚀 直接DOM - 更改会运行依赖于它的约束; 没有组件重递, 没有 diff, 没有虚拟树
• ⏳ 装入策略 - 说吧 load:visible, (中文(简体) ), load:idle, (中文(简体) ), load:interaction, (中文(简体) ), load:media 将一个组件分割为自己的块
• 🛣️ 路由器、安全部门改革和水分 - 相同的反应图端到端,边缘没有商定
• 📡 资源+悬浮 - 在安全部门改革期间等待和播种的装入/误入状态同步数据
• 🏗️ 先输入脚本 - 全部类型和语言服务插件 html 模板

安装

npm install @fluixi/core @fluixi/reactive
# or
pnpm add @fluixi/core @fluixi/reactive
# or
yarn add @fluixi/core @fluixi/reactive

快速启动

创建新工程

npm create fluixi my-app
# or: pnpm create fluixi my-app

基本示例

import { render } from '@fluixi/core';

const Counter = () => {
  const count = $signal(0);

  return (
    <div>
      <h1>Count: {count()}</h1>
      <button onClick={() => count.set(count() + 1)}>Increment</button>
      <button onClick={() => count.set(count() - 1)}>Decrement</button>
      <button onClick={() => count.set(0)}>Reset</button>
    </div>
  );
};

render(() => <Counter />, document.getElementById('app')!);

$signal 不需要导入: 编译器解决并添加所需的内容. signal(0) 从 @fluixi/reactive/signal 当您宁愿导入它的时候, 它也是原始的, 在一个从未运行过这个编译器的软件包中工作.

联合来文X汇编人: @fluixi/vite-plugin脚手架上的即时操作应用程序 npm create fluixi。 。 。 .

核心概念

信号

信号是反应状态。 在某种效果中读取一种效果或JSX认同它;设定它只更新取决于它的内容.

const count = $signal(0);
const name = $signal('Alice');

$effect(() => {
  console.log(`${name()} counted to ${count()}`);
});

count.set(5);      // "Alice counted to 5"
name.set('Bob');   // "Bob counted to 5"

把它叫来读, .set() 写作. $memo 产生, $store 持有您读取的对象 属性关闭, $resource 包裹合成数据。 每个都有一个可导入的双胞胎: signal, (中文(简体) ), memo, (中文(简体) ), effect, (中文(简体) ), store, (中文(简体) ), resource 从 @fluixi/reactive/signal他们就是 同样的原始语,所以两种拼写自由混合在一个文件中.

createSignal 联 合 国 [read, write] 配对不变, 并且写了很多代码 对付他们.

构成部分

组件是返回JSX的平面功能. 一个组件运行 一次;道具为直播 读取而非调用时移交的值.

function Greeting(props: { name: string }) {
  return <h1>Hello, {props.name}!</h1>;
}

解析它们的结构是好的:编译器将绑定物重写为读取,所以它们保存 更新,以及 ...rest 成为 splitProps 打电话你会写:

function Card({ title, tone = 'calm', ...rest }) {
  return <article data-tone={tone} {...rest}><h2>{title}</h2></article>;
}

无法证明重写是安全的: 重新配置的绑定, 计算出来的密钥, 默认 它必须重新运行在每一个读数上: 它留下你的代码 完全按照书面,并说 为什么在建设时间.

控制流量

使用控制流组件而不是三角形和 .map() 所以,更新保持精细.

import { Show, For, Switch, Match } from '@fluixi/core';

// Show — conditional rendering (child callback receives the narrowed value)
<Show when={() => user()} fallback={<p>Please log in</p>}>
  {(u) => <p>Welcome, {u.name}!</p>}
</Show>

// For — keyed list rendering (index is an accessor)
<For each={todos()}>
  {(todo, i) => <li>{i() + 1}. {todo.text}</li>}
</For>

// Switch / Match — multi-branch
<Switch fallback={<p>Idle</p>}>
  <Match when={() => status() === 'loading'}><p>Loading…</p></Match>
  <Match when={() => status() === 'success'}><p>Done!</p></Match>
  <Match when={() => status() === 'error'}><p>Error</p></Match>
</Switch>

Portal, (中文(简体) ), Dynamic, (中文(简体) ), Index,以及 ErrorBoundary 也被导出.

装入策略

A 类 load: 指令决定 何时 一个组件的模块被取出,并移动到它的 自有块 :

import { RevenueChart } from './RevenueChart';

<RevenueChart load:visible="200px" />   // when it scrolls near the viewport
<ExportDialog load:interaction />       // on first pointer, focus or key
<AuditLog load:media="(min-width: 1024px)" />
<Panel load:idle />

推迟用动态导入取代您的静态导入, 因此当名称为 仅用作标记。 把它也当作一个值,进口就留下了: 而不是静静地运输 块热心.

html 模板

同一反应模式而不配置JSX:在图书馆、剧本或 plain-TypeScript 代码库 :

import { html } from '@fluixi/core';

function Counter() {
  const n = $signal(0);
  return html`<button @click=${() => n.set(n() + 1)}>${n()}</button>`;
}

两种语法都汇编成相同的表述; @fluixi/ts-plugin 给出模板 在编辑器中盘旋、完成和打字检查.

资源暂停( S)

createResource 获取同步数据和轨道加载/错误. <Suspense> 显示待决时的倒计时(关于客户端的工作和SSR期间).

import { Suspense } from '@fluixi/core';

function UserCard() {
  const id = $signal(1);
  const user = $resource(id, (id) =>
    fetch(`/api/users/${id}`).then((r) => r.json())
  );

  return (
    <Suspense fallback={<p>Loading…</p>}>
      <p>{user()?.name}</p>
    </Suspense>
  );
}

A. 背景情况

共享状态在树下 没有道具钻孔.

import { createContext, useContext } from '@fluixi/core';

const ThemeContext = createContext<'light' | 'dark'>('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div class={theme}>…</div>;
}

路由器

路由器要一个 routes 配置; 嵌入路线渲染通过 <Outlet />,以及 lazy() 密码片.

import { render } from '@fluixi/core';
import { Router, Outlet, lazy } from '@fluixi/core/router';

const routes = [
  {
    path: '/',
    component: () => (
      <div class="app">
        <nav>…</nav>
        <Outlet />
      </div>
    ),
    children: [
      { path: '', component: () => <h1>Home</h1> },
      { path: 'about', component: lazy(() => import('./About')) },
    ],
  },
];

render(() => <Router routes={routes} />, document.getElementById('app')!);

生命周期钩

import { onMount, onCleanup } from '@fluixi/core';

function Clock() {
  const now = $signal(Date.now());

  onMount(() => {
    const id = setInterval(() => now.set(Date.now()), 1000);
    onCleanup(() => clearInterval(id));
  });

  return <time>{new Date(now()).toLocaleTimeString()}</time>;
}

衍生状态( B)

import { batch } from '@fluixi/core';

const first = $signal('Ada');
const last = $signal('Lovelace');

// Memo — cached, recomputes only when a dependency changes
const fullName = $memo(() => `${first()} ${last()}`);

// Batch — coalesce multiple writes into one update
batch(() => {
  first.set('Grace');
  last.set('Hopper');
});

安全部门改革

服务器渲染、水合、基于文件的路由和编发/构建工具在 @fluixi/start使用 npm create fluixi 并选择 SSR 模板.

类型脚本

Fluixi以TypeScript和船只全型写成. 在您中配置 JSX tsconfig.json数字 :

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@fluixi/jsx"
  }
}

生态系统

许可证

麻省理工学院

链接

• 无