reviewing-lwc-mobile-offline

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Reviewing LWC Mobile Offline

审查LWC移动离线兼容性

Run a structured offline-priming compliance pass over a Lightning Web Component, producing a report of issues found and code-level fixes to bring the component into compliance with Komaci's static analysis requirements for the Salesforce Mobile App Plus and Field Service Mobile App.

对Lightning Web Component执行结构化的离线预准备合规性检查，生成问题报告及代码级修复方案，使组件符合Komaci针对Salesforce Mobile App Plus和Field Service Mobile App的静态分析要求。

When to Use

使用场景

The user asks for a "mobile offline review", "Komaci check", or "offline priming audit" on a specific LWC.
Preparing a component to ship in Salesforce Mobile App Plus or Field Service Mobile App offline mode.
Investigating priming failures reported by the offline analyzer.

Do NOT use this skill for:

Building an LWC that uses native mobile capabilities (barcode scanner, biometrics, location, etc.) — use
```
using-mobile-native-capabilities
```
.
Generic LWC code review — use the appropriate domain skill (
```
reviewing-lws-security
```
,
```
reviewing-lwc-rtl
```
,
```
accessibility-code-review
```
).

用户要求对特定LWC进行「移动离线审查」「Komaci检查」或「离线预准备审计」。
准备将组件部署到Salesforce Mobile App Plus或Field Service Mobile App的离线模式中。
排查离线分析器报告的预准备失败问题。

请勿将本技能用于：

构建使用原生移动能力（条形码扫描器、生物识别、定位等）的LWC——请使用
```
using-mobile-native-capabilities
```
。
通用LWC代码审查——请使用对应领域的技能（
```
reviewing-lws-security
```
、
```
reviewing-lwc-rtl
```
、
```
accessibility-code-review
```
）。

Prerequisites

前提条件

Component path (LWC bundle under
```
modules/…
```
).
Access to the component's JS/TS and HTML templates.

Local Node + npm; ability to run

npx eslint

with the

@salesforce/eslint-plugin-lwc-graph-analyzer

plugin.

组件路径（
```
modules/…
```
下的LWC包）。
可访问组件的JS/TS和HTML模板文件。
本地安装Node + npm；能够运行带有
```
@salesforce/eslint-plugin-lwc-graph-analyzer
```
插件的
```
npx eslint
```
。

Knowledge Base

知识库

Mobile Offline Grounding explains the three violation categories and why each blocks offline priming. Read it before judging. The per-reviewer references below are the source of truth for the rules and remediations:

Inline GraphQL wire configuration: Inline GraphQL Reviewer
```
lwc:if
```
conditional rendering compatibility: lwc:if Reviewer
Komaci ESLint static analysis: Komaci ESLint Reviewer

移动离线基础解释了三类违规问题及其阻碍离线预准备的原因。在判断前请先阅读该文档。以下每个审查器参考文档是规则和修复方案的权威来源：

内联GraphQL wire配置：内联GraphQL审查器
```
lwc:if
```
条件渲染兼容性：lwc:if审查器
Komaci ESLint静态分析：Komaci ESLint审查器

Workflow

工作流程

Step 1 — Scope the review

步骤1 — 确定审查范围

Identify the component bundle:

.html

.js

.ts

. CSS and meta files are not in scope for offline priming. If the bundle has multiple HTML templates, all are reviewed.

识别组件包：

.html

、

.js

.ts

文件。CSS和meta文件不在离线预准备的审查范围内。如果包包含多个HTML模板，所有模板都将被审查。

Step 2 — Read the grounding and per-reviewer references

步骤2 — 阅读基础文档和各审查器参考文档

Read Mobile Offline Grounding and the three per-reviewer references end-to-end before judging. Cite the specific reviewer when emitting each finding so the report is auditable.

完整阅读移动离线基础和三个审查器参考文档后再进行判断。在输出每个问题时引用对应的审查器，使报告可审计。

Step 3 —

lwc:if

lwc:elseif

lwc:else

(HTML)

步骤3 —

lwc:if

lwc:elseif

lwc:else

（HTML）

Walk every

.html

file in the bundle and apply the rules in lwc:if Reviewer. For each occurrence of

lwc:if={…}

lwc:elseif={…}

, or

lwc:else

, emit a finding with the exact

if:true

if:false

rewrite — including the nesting required to preserve

lwc:elseif

and

lwc:else

semantics.

遍历包中的每个

.html

文件，应用lwc:if审查器中的规则。对于每个

lwc:if={…}

、

lwc:elseif={…}

或

lwc:else

，输出一个问题，包含精确的

if:true

if:false

重写方案——包括为保留

lwc:elseif

和

lwc:else

语义所需的嵌套结构。

Step 4 — Inline GraphQL in

@wire

(JS)

步骤4 —

@wire

中的内联GraphQL（JS）

Walk every

.js

.ts

file in the bundle and apply the rules in Inline GraphQL Reviewer. For each

@wire

that references a

gql

template literal directly (or via a top-level constant), emit a finding that names a concrete getter and shows the rewritten

@wire

configuration.

遍历包中的每个

.js

.ts

文件，应用内联GraphQL审查器中的规则。对于每个直接引用

gql

模板字面量（或通过顶级常量引用）的

@wire

，输出一个问题，指明具体的getter并展示重写后的

@wire

配置。

Step 5 — Komaci ESLint pass (JS)

步骤5 — Komaci ESLint检查（JS）

Run the Komaci ESLint analyzer over the bundle's JS file using the bundled script. It applies the

@salesforce/eslint-plugin-lwc-graph-analyzer

recommended ruleset with the

bundleAnalyzer

processor enabled.

bash

scripts/run-komaci.sh path/to/component.js

The script requires

@salesforce/eslint-plugin-lwc-graph-analyzer

to be resolvable from the working directory, and the component's sibling HTML templates must live next to the JS file (the plugin's

bundleAnalyzer

processor uses them to resolve the offline data graph). Output is ESLint

--format json

on stdout.

For each

messages[*]

entry in the output, group by

ruleId

and look up the per-rule remediation in Komaci ESLint Reviewer. Emit a finding per (rule, line) pair with the exact remediation text from the reference; do not invent new advice. See the reference for the manual

npx eslint ...

invocation if the script is unavailable in the runtime environment.

使用捆绑脚本对包中的JS文件运行Komaci ESLint分析器。它会启用

bundleAnalyzer

处理器，应用

@salesforce/eslint-plugin-lwc-graph-analyzer

推荐规则集。

bash

scripts/run-komaci.sh path/to/component.js

该脚本要求

@salesforce/eslint-plugin-lwc-graph-analyzer

可从工作目录解析，且组件的同级HTML模板必须与JS文件放在一起（插件的

bundleAnalyzer

处理器会使用这些模板解析离线数据图）。输出为ESLint的

--format json

格式，输出到标准输出。

对于输出中的每个

messages[*]

条目，按

ruleId

分组，并在Komaci ESLint审查器中查找对应规则的修复方案。针对每个（规则、行）对输出一个问题，使用参考文档中的精确修复文本；请勿自行编造建议。如果运行环境中没有该脚本，请参考文档中的手动

npx eslint ...

调用方式。

Step 6 — Produce the report

步骤6 — 生成报告

Emit a report in this shape:

undefined

输出如下格式的报告：

undefined

Mobile Offline (Komaci priming)

移动离线（Komaci预准备）

<reviewer> — <file>:<startLine>:<startColumn>-<endLine>:<endColumn> — <type> Description: <verbatim from the reviewer reference> Intent analysis: <verbatim from the reviewer reference> Suggested action: <verbatim from the reviewer reference> Code: | <source snippet from startLine through endLine, optional but recommended when the violation spans multiple lines> Applied: yes/no

<审查器> — <file>:<startLine>:<startColumn>-<endLine>:<endColumn> — <type> 描述：<直接引用审查器参考文档中的内容> 意图分析：<直接引用审查器参考文档中的内容> 建议操作：<直接引用审查器参考文档中的内容> 代码：| <source snippet from startLine through endLine, optional but recommended when the violation spans multiple lines> 已应用：是/否

Summary

总结

<n> issues found; <m> fixed; <k> deferred (with reason)


For Komaci ESLint findings, take `startLine`/`startColumn`/`endLine`/
`endColumn` from the ESLint message's `line`/`column`/`endLine`/`endColumn`.
For Inline GraphQL and `lwc:if` findings, supply the line/column range you
observed in the source. If `endLine`/`endColumn` are not available for a
finding, fall back to `<file>:<startLine>` and omit the trailing range.

Cite the reviewer (Inline GraphQL / lwc:if / Komaci ESLint rule id) on every
finding.

<n> issues found; <m> fixed; <k> deferred (with reason)


对于Komaci ESLint问题，从ESLint消息的`line`/`column`/`endLine`/`endColumn`获取`起始行`/`起始列`/`结束行`/`结束列`。对于内联GraphQL和`lwc:if`问题，提供你在源代码中观察到的行/列范围。如果某个问题没有`结束行`/`结束列`，则回退到`<file>:<起始行>`，省略末尾的范围。

每个问题都要引用审查器（内联GraphQL / lwc:if / Komaci ESLint规则ID）。

Step 7 — Apply fixes

步骤7 — 应用修复方案

Apply the remediations directly when the user asked for fixes. If a remediation conflicts with the component's behavior outside offline (e.g. the developer relies on

lwc:elseif

for readability and the user is not yet shipping to mobile offline), surface the conflict in the deferred list rather than silently rewriting.

当用户要求修复时，直接应用修复方案。如果修复方案与组件在离线环境外的行为冲突（例如，开发人员依赖

lwc:elseif

提高可读性，且用户尚未将组件部署到移动离线环境），请在延期列表中指出该冲突，而非静默重写代码。

Verification Checklist

验证清单

Every
```
lwc:if
```
/
```
lwc:elseif
```
/
```
lwc:else
```
flagged or absent.
Every
```
@wire
```
referencing
```
gql
```
checked; inline queries extracted to a getter.
Komaci ESLint analyzer was actually run; findings cite real rule ids, not invented ones.
Each finding cites the originating reviewer or rule id.
No remediation outside the three categories above (other concerns belong to other skills).

所有
```
lwc:if
```
/
```
lwc:elseif
```
/
```
lwc:else
```
均已标记或不存在。
所有引用
```
gql
```
的
```
@wire
```
均已检查；内联查询已提取到getter中。
已实际运行Komaci ESLint分析器；问题引用真实的规则ID，而非编造的ID。
每个问题都引用了对应的审查器或规则ID。
未出现上述三类之外的修复建议（其他问题属于其他技能的范畴）。

Troubleshooting

故障排除

npx eslint
cannot find the plugin — install
```
@salesforce/eslint-plugin-lwc-graph-analyzer
```
in the workspace, or use a pinned local install path. The plugin is the canonical source of Komaci rules.
bundleAnalyzer
related errors — the recommended config drives the bundle processor; do not strip it. The processor expects sibling HTML files to be discoverable. If running on a stripped-down JS file, supply the matching HTML in the temp directory.
No findings for a component you expect to fail — confirm the recommended ruleset is applied (not just
```
bundleAnalyzer
```
with empty rules). Some rules require the HTML to be present alongside the JS.
Findings duplicate
lwc:if
from the dedicated reviewer — the Komaci plugin does not check templates; the
```
lwc:if
```
check is HTML-only and comes from Step 3. Findings from Step 5 are JS-only.

npx eslint
无法找到插件——在工作区中安装
```
@salesforce/eslint-plugin-lwc-graph-analyzer
```
，或使用固定的本地安装路径。该插件是Komaci规则的权威来源。
bundleAnalyzer
相关的错误——推荐配置驱动包处理器；请勿移除该配置。处理器要求可找到同级HTML文件。如果在精简的JS文件上运行，请在临时目录中提供匹配的HTML文件。
预期会失败的组件未发现问题——确认已应用推荐规则集（不只是启用
```
bundleAnalyzer
```
但规则为空）。部分规则要求HTML文件与JS文件放在一起。
问题重复了专用审查器中的
lwc:if
检查结果——Komaci插件不检查模板；
```
lwc:if
```
检查仅针对HTML，来自步骤3。步骤5的问题仅针对JS。

reviewing-lwc-mobile-offline

Original

Translation

Reviewing LWC Mobile Offline

审查LWC移动离线兼容性

When to Use

使用场景

Prerequisites

前提条件

Knowledge Base

知识库

Workflow

工作流程

Step 1 — Scope the review

步骤1 — 确定审查范围

Step 2 — Read the grounding and per-reviewer references

步骤2 — 阅读基础文档和各审查器参考文档

Step 3 —
`lwc:if`
/
`lwc:elseif`
/
`lwc:else`
(HTML)

步骤3 —
`lwc:if`
/
`lwc:elseif`
/
`lwc:else`
（HTML）

Step 4 — Inline GraphQL in
`@wire`
(JS)

步骤4 —
`@wire`
中的内联GraphQL（JS）

Step 5 — Komaci ESLint pass (JS)

步骤5 — Komaci ESLint检查（JS）

Step 6 — Produce the report

步骤6 — 生成报告

Mobile Offline (Komaci priming)

移动离线（Komaci预准备）

Summary

总结

Step 7 — Apply fixes

步骤7 — 应用修复方案

Verification Checklist

验证清单

Troubleshooting

故障排除

reviewing-lwc-mobile-offline

Original

Translation

Reviewing LWC Mobile Offline

审查LWC移动离线兼容性

When to Use

使用场景

Prerequisites

前提条件

Knowledge Base

知识库

Workflow

工作流程

Step 1 — Scope the review

步骤1 — 确定审查范围

Step 2 — Read the grounding and per-reviewer references

步骤2 — 阅读基础文档和各审查器参考文档

Step 3 — lwc:if / lwc:elseif / lwc:else (HTML)

步骤3 — lwc:if / lwc:elseif / lwc:else（HTML）

Step 4 — Inline GraphQL in @wire (JS)

步骤4 — @wire中的内联GraphQL（JS）

Step 5 — Komaci ESLint pass (JS)

步骤5 — Komaci ESLint检查（JS）

Step 6 — Produce the report

步骤6 — 生成报告

Mobile Offline (Komaci priming)

移动离线（Komaci预准备）

Summary

总结

Step 7 — Apply fixes

步骤7 — 应用修复方案

Verification Checklist

验证清单

Troubleshooting

故障排除

Step 3 —
`lwc:if`
/
`lwc:elseif`
/
`lwc:else`
(HTML)

步骤3 —
`lwc:if`
/
`lwc:elseif`
/
`lwc:else`
（HTML）

Step 4 — Inline GraphQL in
`@wire`
(JS)

步骤4 —
`@wire`
中的内联GraphQL（JS）