数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载本文以 tinybase 官方演示文档 01_ValuesInHtmlTable.md 为蓝本完整讲解如何在 Solid 应用中通过tinybase/ui-solid与tinybase/ui-solid-dom两个模块创建一个带示例数据的 Store并用ValuesInHtmlTable /组件将其中的 Values顶层键值对渲染成 HTML 表格。读完后你将掌握 TinyBase 的 Provider 上下文机制、headerRow/idColumn等属性行为以及该组件在 源码 中生成的 DOM 结构、editable/valueComponent等扩展能力。需要说明演示文档提示由于涉及表格渲染这组演示最好在桌面浏览器中查看。演示目标这个演示ui-components-solid 系列的第一篇做了三件事创建一个Store并写入若干静态 Values模拟应用的用户偏好设置通过Provider组件把 Store 注入上下文用ValuesInHtmlTable组件以“零 props”的方式把全部 Values 渲染成表格并演示如何关闭表头行与 Id 列。数据加载当前是同步的文档也说明后续演示会改为从远程服务器加载因此这里先搭好 loading 转圈的骨架。Boilerplateimportmap 与模块导入演示通过 importmap 直接引用 tinybase 与 Solid 的 ESM 构建script typeimportmap { imports: { tinybase: https://esm.sh/tinybase, tinybase/ui-solid: https://esm.sh/tinybase/ui-solid, tinybase/ui-solid-dom: https://esm.sh/tinybase/ui-solid-dom, solid-js: https://esm.sh/solid-js, solid-js/web: https://esm.sh/solid-js/web } } /script其中tinybase、tinybase/ui-solid、tinybase/ui-solid-dom三个子路径对应仓库中 src/ui-solid/index.ts、src/ui-solid-dom/index.tsx 等入口。需要的 API 如下import {createSignal, onMount} from solid-js; import {render} from solid-js/web; import {createStore} from tinybase; import {Provider, useCreateStore} from tinybase/ui-solid; import {ValuesInHtmlTable} from tinybase/ui-solid-dom;createStore创建响应式数据存储核心包ProvideruseCreateStoreui-solid提供的 Solid 上下文基础设施ValuesInHtmlTableui-solid-dom提供的 HTML 表格组件。App 容器Provider 上下文与 useCreateStore主容器是一个名为App的 Solid 组件。它实例化 Store并做 memoize 缓存然后在onMount中加载数据最后把 Store 通过Provider传给整棵组件树const App () { const store useCreateStore(createStore); const [isLoading, setIsLoading] createSignal(true); onMount(() { loadValues(store()); setIsLoading(false); }); return ( Provider store{store()}{isLoading() ? Loading / : Body /}/Provider ); }; addEventListener(load, () render(() App /, document.body));源码层面有两点值得注意useCreateStore的实现只有两行见 primitives.tsconst store createMemo(create); return store;。它用 Solid 的createMemo保证createStore()只执行一次Store 被“记忆化”组件重渲染不会重复创建。Provider在 Provider.tsx 中实现。它不仅传递store还以固定 offset 组织 Store、Metrics、Indexes、Relationships、Queries、Checkpoints、Persister、Synchronizer 八类对象Offsets 定义并通过mergeParentThings与父级上下文合并。这意味着下游组件可以通过props.store显式传 Store也可以完全省略store属性、直接消费上下文中的默认 Store——后一种用法正是ValuesInHtmlTable /零 props 的前提。默认样式演示对排版与颜色做了一些默认 CSS字体、flex 布局、字间距等这部分是纯展示层的样板font-face { font-family: Inter; src: url(https://tinybase.org/fonts/inter.woff2) format(woff2); } * { box-sizing: border-box; } body { align-items: flex-start; color: #333; display: flex; font-family: Inter, sans-serif; font-size: 0.8rem; min-height: 100vh; justify-content: space-around; letter-spacing: -0.04rem; line-height: 1.5rem; margin: 0; user-select: none; }加载数据事务中写入 Values为了让起点简单演示先向 Store 写入一组静态 Values可以理解为应用的用户偏好const loadValues (store) { store .startTransaction() .setValue(username, John Appleseed) .setValue(email address, john.appleseedexample.com) .setValue(dark mode, true) .setValue(font size, 14) .finishTransaction(); };startTransaction()链式调用把四次setValue合并为一次变更TinyBase 的 Store 是响应式的事务内只有finishTransaction()才会一次性通知监听者避免每次setValue都触发一轮 UI 更新。同时为后续异步加载预留一个加载中的转圈组件const Loading () div idloading /;#loading { animation: spin 1s infinite linear; height: 2rem; margin: 40vh auto; width: 2rem; ::before { content: url(data:image/svgxml,svg xmlnshttp://www.w3.org/2000/svg height2rem viewBox0 0 100 100path dM50 10A40 40 0 1 1 10 50 strokeblack fillnone stroke-width4 //svg); } } keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }使用 ValuesInHtmlTable 组件Store 已经在 Provider 上下文中且有了数据接下来就是正题const Body () { return ( ValuesInHtmlTable / ValuesInHtmlTable headerRow{false} idColumn{false} / / ); };第一个ValuesInHtmlTable /真的“零 props”——不传store时组件从 Provider 上下文解析默认 Store其余属性全部使用默认值。它输出的就是包含 Store 全部 Values 的普通 HTML 表格。第二个表格则演示了两个显示控制属性headerRow{false}关闭顶部表头行idColumn{false}关闭左侧 Id 列。配套的表格样式边框、表头、阴影table { background: white; border-collapse: collapse; box-shadow: 0 0 1rem #0004; font-size: inherit; line-height: inherit; margin: 2rem; table-layout: fixed; th, td { overflow: hidden; padding: 0.25rem 0.5rem; white-space: nowrap; border-width: 1px 0; border-style: solid; border-color: #eee; text-align: left; } thead th { border-bottom-color: #ccc; } button, input { border: 1px solid #ccc; } }源码剖析ValuesInHtmlTable 到底生成了什么组件实现位于 ValuesInHtmlTable.tsx核心逻辑可以概括为四步export const ValuesInHtmlTable: typeof ValuesInHtmlTableDecl ( props: ValuesInHtmlTableProps HtmlTableProps, ): JSXElement { const valueIds useValueIds(() props.store); return ( table class{props.className} {props.headerRow false ? null : ( thead tr {extraHeaders(props.extraCellsBefore as any)} {props.idColumn false ? null : thId/th} th{VALUE}/th {extraHeaders(props.extraCellsAfter as any)} /tr /thead )} tbody {arrayMap(valueIds(), (valueId) { const valueProps {valueId, store: props.store}; const Value props.valueComponent ?? (getValue(props.editable as any) true ? EditableValueView : ValueView); return ( tr {extraValueCells(props.extraCellsBefore as any, valueProps)} {isFalse(props.idColumn) ? null : ( th title{valueId}{valueId}/th )} td Value {...getProps(props.getValueComponentProps, valueId)} {...valueProps} / /td {extraValueCells(props.extraCellsAfter as any, valueProps)} /tr ); })} /tbody /table ); };取 id 列表useValueIds(() props.store)返回一个响应式的 Values id 数组 Accessor。它底层调用useListenableprimitives.ts先执行一次getValueIds()初始化再注册ValueIdsListener——Store 中任何 Value 的增删都会自动触发表格行重渲染无需手动订阅。表头仅当headerRow显式为false时省略theadthId/th同理受idColumn false控制。二者默认都显示。每行的值单元格默认使用 ValueView通过useValue读取并字符串化输出当editable{true}时切换为 EditableValueView后者基于useValueState提供“读取 写回”能力并依据store.hasValuesSchema()决定是否走带 schema 校验的编辑路径若传入valueComponent则完全由自定义组件接管。自定义 props 注入getProps(props.getValueComponentProps, valueId)实现在 solid.ts会把getValueComponentProps(valueId)的返回值展开到值组件上同时始终注入{valueId, store}。完整 Props 一览类型定义在 ui-solid-dom/index.d.ts实际生效的是ValuesInHtmlTableProps HtmlTableProps的合并Prop类型默认值说明storeStoreOrStoreId上下文中的默认 Store也可传 Store 实例或 idid 从上下文storesById解析editablebooleanfalsetrue时值单元格用EditableValueView渲染可点击编辑并写回 StorevalueComponentComponentValuePropsValueView或EditableValueView自定义每个值单元格的组件getValueComponentProps(valueId: Id) ExtraProps无按 valueId 动态计算传给值组件的额外 propsextraCellsBeforeExtraValueCell[][]在 Id 列之前插入自定义列{label, component}extraCellsAfterExtraValueCell[][]在 Value 列之后插入自定义列classNamestring无直接设置table的 classheaderRowbooleantrue是否渲染thead表头行idColumnbooleantrue是否渲染左侧 Value id 列表头为Id其中ExtraValueCell的定义是{label: string; component: ComponentValueProps}index.d.tslabel用作表头文字component接收{valueId, store}等 props 渲染单元格内容这些额外列的td会带上EXTRA类名以便样式区分见 ValuesInHtmlTable.tsx。用单元测试快照验证 DOM 输出仓库中的 ui-solid-dom.test.tsx 对ValuesInHtmlTable覆盖 basic / editable / custom / className / idColumn 五个用例快照文件 给出了确切输出测试用 Store 含v1: 1, v2: 2两个 Valuesbasic默认tabletheadtrthId/ththValue/th/tr/theadtbodytrth titlev1v1/thtd1/td/trtrth titlev2v2/thtd2/td/tr/tbody/tableeditable{true}值单元格变为可编辑控件并带类型按钮tddiv classeditableValuebutton titlenumber classnumbernumber/buttoninput typenumber/div/tdvalueComponent{Custom} getValueComponentProps{...}自定义组件原样收到{0: valueId, valueId}等合并后的 propsclassNamevaluestable classvaluesidColumn{false}只剩 Value 列th titlev1v1/th一列消失。这些快照与上文源码分析一一对应可以直接作为组件行为的可验证依据。E2E 层面ui-components.test.ts 还会启动该演示页面并断言ValuesInHtmlTable / (React)标题等页面元素确保演示站点本身可运行。小结与后续这个演示展示了 TinyBase Solid UI 层的最小闭环useCreateStore记忆化创建 Store →Provider注入上下文 →ValuesInHtmlTable零配置渲染 →headerRow/idColumn控制显示并且从源码可以确认其响应性来自useValueIds对ValueIdsListener的订阅任何 Values 变更都会自动反映到表格。ValuesInHtmlTable只处理 Store 顶层的 Values。要继续构建完整界面可以按演示系列的顺序往下走02_TableInHtmlTable.md渲染单张 Table03_SortedTableInHtmlTable.md、04_SliceInHtmlTable.md排序与索引切片05_RelationshipInHtmlTable.md、06_ResultTableInHtmlTable.mdRelationship 与 Query 结果表格08_EditableValueView.md、09_EditableCellView.md本文editable属性背后的可编辑视图组件。完整的组件 API 以类型声明为准可直接查阅 src/types/ui-solid-dom/index.d.ts演示文档中也提示了官方演示页下方有 StackBlitz 链接可以在线沙盒中尝试上述所有 props。赞分享数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载相关推荐TinyBase 实战指南使用 ValuesInHtmlTable 在 React 中渲染 Store 的 Values 数据表TinyBase 实战指南使用 ValuesInHtmlTable 在 React 中渲染 Store 的 Values 数据表 本文基于 TinyBase数据库后端前端tinybase React 实战用 SliceInHtmlTable 把 Index 的 Slice 渲染为 HTML 表格tinybase React 实战用 SliceInHtmlTable 把 Index 的 Slice 渲染为 HTML 表格 本文以 tinybase 官方数据库后端前端json-render 的 Solid 示例应用 example-solid版本演进、依赖升级与生成式 UI 渲染实战解析json render 的 Solid 示例应用 example solid版本演进、依赖升级与生成式 UI 渲染实战解析 example solid 是 j人工智能AI 应用前端MCP 服务上一篇CANN/amct大模型MINMAX量化下一篇MCinaBox完整指南如何在Android手机畅玩Minecraft Java版创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考