@ cssints/反应

CSS - 第一次互动 点缀: state 是一个所有者元素上的自定义属性集, 一个写入 仅发生于一事件,一个条件或一块DOM输出是平坦 CSS. 一个小剧本代表了活动 写入属性;浏览器中没有其他操作.

这个模型是 反应CSS:在样式中声明为自定义属性,事件和条件. 内容 严格来自 Solid 2.0的规则 - 游戏 财务报告和审定财务报表 反应脚本:来源是唯一可写的东西,写在 绝对范围(一个事件),状态属于所有者元素,一个冲出涂上一个整帧.

反应 CSS 写入 :on(click) 在选择器中。 这不是有效的CSS, 而csints的船编译了类串,所以 事件程序作为数据在非继承自定义属性中行走,被授权的收听者读取.

import { cn, display, p } from "cssints" with { type: "cssints" };
import {
  bind,
  either,
  equals,
  inside,
  on,
  set,
  state,
  toggle,
  when,
} from "@cssints/reactive" with { type: "cssints" };

const ui = state({ open: false, tab: "one" }); // { owner, open, tab }
const card = cn(ui.owner, p(4)); // the owner element
const button = cn(
  on({ click: toggle(ui.open) }), // a write, only in an event
  bind({ "aria-expanded": ui.open }), // DOM output
);
const tab = cn(
  bind({
    "aria-selected": equals(ui.tab, "one"), // a comparison: "true" or "false"
    "aria-controls": "panel-one", // a literal, written as is
    tabindex: either(equals(ui.tab, "one"), "0", "-1"), // one of two literals
  }),
);
const panel = inside(ui.open)(display("block")); // a descendant of the owner
const tabPanel = inside(ui.tab, "two")(display("block"));
const own = when(ui.open)(display("block")); // the element itself

模型

• 一个来源是唯一可以写的东西. state() 唯一的来源; 来源是 CSS本身 (单位:千美元)calc(var(--reactive-count) * 2),一个条件). 没有 JavaScript 的衍生词可以写入,所以错误是 无相相相.
• 写作只在某种情况下发生. toggle() 财务报告和审定财务报表 set() 返回不透明 Action; 仅 on() 一个,所以写在 模块级别无法写入(类型错误).
• 国家属于所有者要素. state() 给一个主人的风格和每个状态一个来源。 一个事件写道: 该元素的最近拥有者 它的程序在(closest就像Solid的主人树.
• 一个事件,一个冲浪. 运行时间应用事件的每一动作,然后改写每个所有者的每个约束 触动。 CSS涂装一次;没有中间状态可见.
• V1中无同音. 没有取取取, 所以没有装入或出错的界限; Solid 2 的合成基础是参考 为后一版本.
• 一手执相. emit() 让一个事件离开 CSS 世界用于 JavaScript(listen() 在应用中,它没有写作状态, 没有东西会回来的, 州仍然没有从JS读取.

协议的昆特模型 packages/apg-specs/specs/patterns/reactive.qnt (豆色克辛-tm9j):两个 拥有者,一个巢穴,每个巢穴有四种捆绑, 最近的拥有者读取,一个冲出 作为无变化者. test/scenarios.mjs 重放其情景 和两个种子的差分行走 test/fixtures/model.js 在Chrome、Firefox和WebKit中,并检查 每个步骤之后的一页与模型相对,包括一个事件画了一次(一页在一个框前后读取) 不得改变.

API 密码

两通电话 on(), (中文(简体) ), bind() 或者说 state() 在一个 cn() 附加而不是替换: 元素的程序是 click toggle open,keydown set tab two,其属性 aria-expanded open,data-current tab及其所有者的国家 open,tabA级 <select> 驱动字符串状态 set(ui.tab, value()),一个复选框 一个布尔的,有一个 set(ui.open, checked())。 。 。 .

绑定是四件事之一: 源值(bind({ "aria-expanded": ui.open })),比较 (单位:千美元)equals(ui.tab, "one"), (中文(简体) ), "true" 或者说 "false"),可选取两字either(equals(ui.tab, "one"), "0", "-1"), (中文(简体) ), 狂欢 tabindex),或写作正文"aria-controls": "panel-one") (中文(简体) ). 比较就是一种表达方式 运行时间评估, 以及它可能的唯一地点: 来源仍然是唯一可写作的东西, a Comparison 或一个 Choice 无法是 set(), (中文(简体) ), toggle()ed, 用于 when()编号 :inside() 或存储于 persist()这是一个方程式,不是 状态 —— 它没有自己的价值, 所以运行时间读取它 约束 和州的价值 离最近的所有人 在同一个冲浪上。 问题本身就是为什么: attr() 是一个条件,读取一个属性, 它不计算一个属性 aria-selected 财务报告和审定财务报表 tabindex 坐在元素上, CSS 无法写入. aria-selected="one" 从字符串状态会 无效的 HTML, 因此比较就是使一个字符串状态足够制表符 。 字面内容在建筑中检查 时间( 无逗号, 无空格, 也没有线索) =, (中文(简体) ), ? 或者说 !,协议的标记),其属性和值在 呼叫站点出错 .

一个值可能是 persist(value, key)数字 : state({ open: persist(false, "demo-open") }) 保持状态 localStorage 下级 "reactive:" + key中,当运行时间 通知所有者时,重新加载会恢复它——模块运行于 文档已解析,在第一次涂料之前,页面可以显示,但与初始值相同的警告(条件是 它可能画出一个框架后期, 浏览器在脚本运行前画。 存储值胜过构建值 声明 每一个州文库都存储它,所以点击不需要额外的呼叫. 两个国家可故意共享一个密钥: 存储槽,由他们的写作保持同步. 应用程序的密钥前缀其名( P)demo-open没有 open),所以两个 一个来源的申请不满足.

对JavaScript的一次交接是 emit()。 。 。 . 一种形式最终必须到达应用程序,状态从不离开CSS 事件确实如此. emit() 是一种动作 on() 喜欢 toggle() 财务报告和审定财务报表 set(),但它没有写: 运行时间调度 reactive:<name> 从原生事件射出 listen() 听见了吗

// the style
const form = cn(ui.owner, on({ submit: emit("save") }));

// the app: listen from the runtime module, not the build-time one
import { listen } from "@cssints/reactive/runtime";

listen(document.querySelector("form")!, "save", ({ detail }) => {
  detail.event.preventDefault(); // detail.event is the native submit
  save(detail.owner); // the nearest owner of the element the event fired on
});

listen() 从 @cssints/reactive/runtime 将引擎船装入浏览器的模块; @cssints/reactive 它本身只是建设时间。 它返回一个处置者。 名称是相同的字符串 emit() 和一个凹痕(小写) 字母、数字和 -与呼叫站点一起在建设时检查。 活动会喷出气泡 所以听众可以坐在表格上, 页面上,或元素上方的任何地方; detail 实值 { event, owner },本地事件和最近的被动所有者 (或 null 在任何业主之外). A 类 reactive: 事件不是一个运行时间 听,所以 程序无法回答, 并且没有重复 .

以上例子的 CSS( 类名为散列) :

@layer _.k, _.a, _.b, _.c, _.d, _.e;
@property --reactive-owner {
  syntax: "*";
  inherits: false;
}
@property --reactive-on {
  syntax: "*";
  inherits: false;
}
@property --reactive-binding {
  syntax: "*";
  inherits: false;
}
@layer _.k {
  ._reactive-events {
  }
  ._reactive-binding {
  }
  ._reactive-owner {
  }
}
@layer _.a {
  ._1un0p5l {
    --reactive-owner: open, tab;
  }
  ._1gy1wuu {
    --reactive-open: false;
  }
  ._3z64sy {
    --reactive-tab: one;
  }
  ._1u5v0k0 {
    --reactive-on: click toggle open;
  }
  ._2qzz6u {
    --reactive-binding: aria-expanded open;
  }
  ._4h1t7s {
    --reactive-binding: aria-selected ?tab one, aria-controls =panel-one, tabindex ?tab one 0 -1;
  }
  ._lwugp7 {
    padding: 1rem;
  }
}
@layer _.b {
  :where(._g-reactive[data-reactive-tab="two"]) ._1x9gkmf {
    display: block;
  }
  :where(._g-reactive[data-reactive-open="true"]) ._edztjc {
    display: block;
  }
  ._23ymfi[data-reactive-open="true"] {
    display: block;
  }
}

--reactive-open 财务报告和审定财务报表 --reactive-tab 继承,所以任何后代都可以在CSS中读取 (单位:千美元)color: var(--reactive-tab)); 协议清单(--reactive-owner, (中文(简体) ), --reactive-on, (中文(简体) ), --reactive-binding, (中文(简体) ), --reactive-persist)不继承,因此一个元素只看到自己的程序,绑定和存储.

议定书

什么建筑发出,什么 ./runtime 读取( 对于调试):

运行时间写 data-reactive-<name>="<value>" 拥有者——什么 when() 财务报告和审定财务报表 inside() 改为——和同值 作为内线 --reactive-<name>,CSS衍生的读取。 装入时列出每个所有者( E)data-reactive-<name> 从 或从 localStorage 并写出其中的律例 目标向上, 将它发现的每个程序应用到该元素最近的所有者, 然后更新每个所有者的绑定 一次 一次吗 稍后添加的节点也关闭(a) MutationObserver) (中文(简体) ). 捆绑对是四种类型之一:源 (单位:千美元)aria-expanded open),为一字aria-controls =panel-one),比较(aria-selected ?tab one, (中文(简体) ), "true" 当 主人的状态 one并择取两字tabindex ?tab one 0 -1, (中文(简体) ), 0 虽然它做到了, -1 绝不然; 比较有其清单的三个符号,一个选择5。 无标记前缀选择的字元:自定义属性值 带有 ! 不解析( 它读作破碎 ) !important),故后行的两个符所携带. 设定部分的值 是一个字面,或 @value编号 :@checked: 运行时间读取 target.value (a) 字符串)或 target.checked (单位:千美元)"true", (中文(简体) ), "false"(中文(简体) ) 被击中的元素。 写成的相同部分两次应用一次,所以两个程序仍然是一个 切换。 A 类 submit emit save 片段没有写入状态: 它发送 reactive:save 从事件所发射的元素起, 弹出,与 { event, owner } 其细节——一种交接方式,即 listen() 附属于且没有程序 答话 持续状态被存储在每封信上,其存储值在初始化时取代已声明状态. 数值仅通过 setAttribute 财务报告和审定财务报表 style.setProperty,从不作为 HTML 或 CSS 的字符串,所以存储 值不能注入任何东西.

限制

• 几个要求使用一个元素 state()s是一家的,两家 on()一个程序,两个 bind()一个 属性列表。 同一段两次被应用一次(运行时间取消),所以重复程序不会 切换两次.
• 字符串值没有逗号、空格和空格 @ (协议是逗号分隔的列表,以及 @value编号 :@checked 为: 有效载荷); 名称为idents(小写字母、数字和 -) (中文(简体) ). 都在呼叫站点制造错误 持久关键 是字母,数字, -, (中文(简体) ), _, (中文(简体) ), . 财务报告和审定财务报表 : (逗号或空格将分割协议列表),至少一个字符,以及 呼叫站点的建设错误; persist() 无值是类型级别和构建时间的值.
• 事件设置是固定的:点击,输入,更改,提交,按键,按键,指向,指向,聚焦,聚焦.
• 写作必须能够从元素的程序中达到:事件泡沫到 <document>,所以一个关于祖先的程序运行 因为它的后人的事件, 但一个按钮在主人之外 没有主人写.
• 绑定的属性和条件读取它们所在元素的最近所有者,所以它们必须坐在所有者内部 亚树. 不过,一个条件就是CSS: inside() 实值 :where(._g-reactive[data-reactive-<name>=<value>]) .el,一个祖先 匹配,所以一个巢中所有者宣布 与外所有者相同的状态 显示其后代的条件 而外 车主也火柴 运行时间将属性写在最接近的拥有者身上, 但是 CSS 不能表达“ 最接近的 ” ; 给予拥有者 不同的状态名称( 模式在 specs/patterns/reactive.qnt 表示此和重播检查.
• 一个比较点是状态,而不是所有者: equals(outer.tab, "one") 在内部拥有者内部的元素上比较 内地主人 tab,因为运行时间读取最近的主人像源。 对比只是平等:否 命令和不算术. equals(ui.count, 2) 是一个比较,但 count > 2 运行时间需要一个派生表达式 无需延期或延期.
• 初始状态由脚本所写: 在运行前, data-reactive-* 没有,所以一个条件 一个初始 值可能会画出框架后期,一旦解析出文档,运行时间就会写出。 恢复的持久性价值有: 同样的时间.
• 状态是构建时间数据:客户端获得所有者的类字符串和源名,永远不能读取. A 类 组件不能读取 ui.open 在 JavaScript 中——这就是点,状态是 CSS;一个值 JavaScript 需要是 框架本身的状态.
• emit() 是 JavaScript 的唯一出路: 它将事件交给应用程序(listen()从 @cssints/reactive/runtime),不是州,州仍然从未从JS读取. 没有回来,没有回报值, 没有确认, 也没有从 JavaScript 写入状态 .
• 没有计数器,手势,自动或 event() v1 中的调用: 状态是字符串、 数字或布尔, 由 a 编写 单击,键或窗体事件. calc() 超过一个状态值是 CSS, 不是源: 没有从 JavaScript 递增它 .
• 持久性是 localStorage 仅: 没有跨 tab 同步( 第二标签保存自己的副本直到重新装入), 没有版本 或过期(存储值是当前构建可能不再预期的字符串),存储失败——私有模式,a 配额,一个没有存储的页面——沉默:状态保持互动,只是无法活过重载.

浏览器

每个浏览器:运行时间是一个没有多填充的脚本,所以它将运至一个构建的每个目标(2.9 kB minfied, 1.4 kB) gzipped),并读取已注册的自定义属性 @property (单位:千美元)syntax: "*"; inherits: false; Chrome 85, 萨法里语 16.4,火狐128). 何处 @property 缺少列表继承,但标记类仍然保留一个元素到自己的 程序和存储。 持久性需求 localStorage;如果它缺失或拒绝写作,国家就起作用,而不是 幸存的重载.

测试

cd packages/reactive && bun run test            # the engine: class strings, the protocol, the @property rules, errors
cd packages/reactive && bun run test:browsers   # Chrome, Firefox, WebKit: two disclosures, an initial true state,
                                                # tabs, a computed tab strip (aria-selected, a literal aria-controls,
                                                # roving tabindex, aria-pressed), a nested owner, the flush of one click,
                                                # a <select> from value(), a checkbox from checked(), two programs on one
                                                # element, a repeated one, a persisted disclosure across a reload, a stored
                                                # value winning, a state that is not persisted, and a form submit heard by
                                                # listen() on the form and on the page (BROWSERS=chrome)
# the model's traces (needs the packages built: node reads their dist/):
bun run build:packages && cd packages/reactive && bun run test:scenarios
                                                # specs/patterns/reactive.qnt replayed on test/fixtures/model.js in
                                                # Chrome, Firefox and WebKit: the two scenario sets and two seeded
                                                # differential walks, every probed attribute and computed display
                                                # compared with the model after every step