Salix 已弃用:迁移到 salix-core 构建响应式 Web 应用

16次阅读

Salix 已弃用:迁移到 salix-core 构建响应式 Web 应用

salix 原项目已正式停更,推荐迁移至更活跃、api 更稳定的 `salix-core`;本文详解迁移步骤、关键差异及常见渲染失败(如 `cannot read properties of undefined (reading ‘edits’)`)的根本原因与解决方案。

如果你在使用旧版 Salix(如 gitHub 仓库 usethesource/salix)时遇到页面空白、控制台报错 Uncaught TypeError: Cannot read properties of undefined (reading ‘edits’) at patchdom (salix.js:257:30),这并非配置疏漏,而是根本性兼容问题——原 Salix 项目已于近年正式弃用,其核心逻辑(尤其是虚拟 DOM 补丁机制 patchDOM)在后续浏览器环境和构建流程中已不再可靠。

✅ 正确路径是迁移到官方维护的继任者:salix-core。它重构了运行时架构,移除了对 jquery 的依赖(你当前错误中出现的 jquery-1.11.0.min.js 正是过时集成的标志),采用纯函数式更新模型,并提供类型安全的 Rascal API。

以下是迁移关键步骤:

  1. 替换依赖
    删除旧 salix JAR,引入最新 salix-core(推荐 v0.12+):

    import salix::core::app; import salix::core::Dom;
  2. 重写应用入口
    makeApp 和 webApp 已废弃。新范式使用 App::start:

    module CounterApp import salix::core::App; import salix::core::Dom;  data Model = model(int count);  Model init() = model(0);  Dom view(Model m) =      div([         h1("Counter: "),         button(onClick({|=> update(m, "inc")}),"+"),         button(onClick({|=> update(m, "dec")}),"−")     ]);  Model update(Model m, str action) {     if (action == "inc") return model(m.count + 1);     if (action == "dec") return model(m.count - 1);     return m; }  // 启动应用(自动绑定到 id="counterApp" 的 div) App::start("counterApp", init, view, update);
  3. 精简 html 模板
    移除所有 jQuery 引用,仅保留 salix-core.js 和你的编译模块:

      Counter      

⚠️ 重要注意事项

  • salix-core 不再支持 |file:///…| 这类本地文件协议加载——必须通过 http 服务(如 rascal-shell 内置服务器或 python3 -m http.server 9051)访问;否则 fetch 初始化请求会因 CORS 被拒,导致 edits 为 undefined。
  • salix-contrib(如 ACE 编辑器、Mermaid 图表等扩展)需单独引入,且版本须与 salix-core 主版本对齐。
  • 所有事件处理器(如 onClick)必须返回 void闭包,不可返回 Dom ——这是旧版 view 函数误用引发 patchDOM 崩溃的常见诱因。

迁移后,http://localhost:9051/counterApp/init 将不再存在(无服务端路由),初始化完全在客户端完成,性能更高、调试更直观。建议同步查阅 salix-core 官方示例 获取完整工作流。

text=ZqhQzanResources