Shopify 在 2022 年 10 月发布了 ShopifyQL Notebooks，这是一款第一方应用程序,可让商家分析其店铺数据以做出更好的决策。通过引导式代码编辑体验,ShopifyQL 的强大功能被交到商家手中。为了提供一流的编辑体验,Shopify 转向了 CodeMirror,这是一个为 Web 构建的代码编辑器框架。本文介绍了 Shopify 如何将 ShopifyQL 语言服务器连接到 CodeMirror,并提供了附加的语言功能,以打造更强大的编辑体验。

ShopifyQL 是一种易于使用、以商务为中心的查询语言,可用于客户端和服务器。该语言由 ANTLR 语法定义,用于为多个目标(目前为 Go 和 Typescript)生成代码。Shopify 用 Protobuf 编写了类型,因此类型也可以在目标之间共享。前端的所有 ShopifyQL 语言功能都封装在 Typescript 语言服务器中,该服务器建立在 ANTLR Typescript 目标之上。

将 ShopifyQL 语言服务器连接到 CodeMirror 时,Shopify 创建了一个符合 LSP 并与 Lezer 集成的适配器。这使他们能够将 ShopifyQL 查询传递给语言服务器,调整响应并返回 Lezer 解析树。为了将 ShopifyQL 查询转换为 Lezer 解析树,Shopify 需要解决标记偏移量的问题,并最终构建出解析树。

一旦生成解析树,CodeMirror 就可以"理解" ShopifyQL 并提供有用的语言功能,例如语法高亮、代码完成、linting 和工具提示。这种方法使 Shopify 能够为 CodeMirror 提供 ShopifyQL 功能,同时继续维护适用于客户端和服务器的语法。