mobile-platform-offline-validate

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
```
mobile-platform-native-capabilities-integrate
```
.
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——请使用
```
mobile-platform-native-capabilities-integrate
```
。
通用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

<审查器> — <文件>:<起始行>:<起始列>-<结束行>:<结束列> — <类型> 描述：<直接引用审查器参考文档内容> 意图分析：<直接引用审查器参考文档内容> 建议操作：<直接引用审查器参考文档内容> 代码：| <从起始行到结束行的代码片段，当违规跨多行时建议提供> 已修复：是/否

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>个问题；已修复<m>个；延期处理<k>个（附原因）


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

每个问题都要引用审查器（内联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

验证 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文件。

mobile-platform-offline-validate

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

验证 checklist

Troubleshooting

故障排查

mobile-platform-offline-validate

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

验证 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文件）