lightning-2025-features

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

🚨 CRITICAL GUIDELINES

⚠️ 重要指南

Windows File Path Requirements

Windows文件路径要求

MANDATORY: Always Use Backslashes on Windows for File Paths

When using Edit or Write tools on Windows, you MUST use backslashes (

) in file paths, NOT forward slashes (

Examples:

❌ WRONG:
```
D:/repos/project/file.tsx
```
✅ CORRECT:
```
D:\repos\project\file.tsx
```

This applies to:

Edit tool file_path parameter
Write tool file_path parameter
All file operations on Windows systems

强制要求：在Windows系统上使用文件路径时始终使用反斜杠（
\
）

在Windows系统上使用编辑或写入工具时，文件路径必须使用反斜杠（

），而不能使用正斜杠（

）。

示例：

❌ 错误：
```
D:/repos/project/file.tsx
```
✅ 正确：
```
D:\repos\project\file.tsx
```

此要求适用于：

编辑工具的file_path参数
写入工具的file_path参数
Windows系统上的所有文件操作

Documentation Guidelines

文档编写指南

NEVER create new documentation files unless explicitly requested by the user.

Priority: Update existing README.md files rather than creating new documentation
Repository cleanliness: Keep repository root clean - only README.md unless user requests otherwise
Style: Documentation should be concise, direct, and professional - avoid AI-generated tone
User preference: Only create additional .md files when user specifically asks for documentation

除非用户明确要求，否则绝不要创建新的文档文件。

优先级：优先更新现有README.md文件，而非创建新文档
仓库整洁性：保持仓库根目录整洁——除非用户要求，否则仅保留README.md
风格：文档应简洁、直接、专业——避免AI生成式的语气
用户偏好：仅当用户明确要求文档时，才创建额外的.md文件

Lightning Web Components 2025 Features

Lightning Web Components 2025新功能

lightning/graphql Module (Winter '26)

lightning/graphql模块（Winter '26）

New module replaces deprecated

lightning/uiGraphQLApi

新模块取代已弃用的

lightning/uiGraphQLApi

：

Migration

迁移示例

javascript

// ❌ Old (deprecated)
import { gql, graphql } from 'lightning/uiGraphQLApi';

// ✅ New (Winter '26)
import { gql, graphql } from 'lightning/graphql';

export default class MyComponent extends LightningElement {
  @wire(graphql, {
    query: gql`
      query getAccount($id: ID!) {
        uiapi {
          query {
            Account(where: { Id: { eq: $id } }) {
              edges {
                node {
                  Id
                  Name
                  Industry
                }
              }
            }
          }
        }
      }
    `,
    variables: '$variables'
  })
  results;

  get variables() {
    return { id: this.recordId };
  }
}

javascript

// ❌ 旧版（已弃用）
import { gql, graphql } from 'lightning/uiGraphQLApi';

// ✅ 新版（Winter '26）
import { gql, graphql } from 'lightning/graphql';

export default class MyComponent extends LightningElement {
  @wire(graphql, {
    query: gql`
      query getAccount($id: ID!) {
        uiapi {
          query {
            Account(where: { Id: { eq: $id } }) {
              edges {
                node {
                  Id
                  Name
                  Industry
                }
              }
            }
          }
        }
      }
    `,
    variables: '$variables'
  })
  results;

  get variables() {
    return { id: this.recordId };
  }
}

Benefits

优势

Improved performance
Better error handling
Enhanced type safety
Future-proof API

性能提升
更完善的错误处理
增强的类型安全性
面向未来的API

Local Development (sf lightning dev component)

本地开发（sf lightning dev component）

Run LWC components locally without deploying:

bash

undefined

无需部署即可本地运行LWC组件：

bash

undefined

Start local dev server

启动本地开发服务器

sf lightning dev component

Opens browser at http://localhost:3333

在浏览器中打开 http://localhost:3333

Live reload on file changes

文件变更时实时重载

No deployment needed

无需部署

Faster development cycle

更快的开发周期

Specify component

指定组件

sf lightning dev component -n myComponent

Specify target org

指定目标组织

sf lightning dev component -o myOrg@example.com


**Benefits:**
- Instant feedback (no deployment wait)
- Debug in real browser DevTools
- Hot module replacement
- Work offline

sf lightning dev component -o myOrg@example.com


**优势：**
- 即时反馈（无需等待部署）
- 在真实浏览器开发者工具中调试
- 热模块替换
- 离线工作

Platform Module Access in Component Preview

组件预览中的平台模块访问权限

Access platform modules in single component preview:

javascript

// Works in local preview now
import { getRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

// Previously required full org deployment
// Now works in sf lightning dev component

在单组件预览中访问平台模块：

javascript

// 现在可在本地预览中使用
import { getRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

// 以前需要完整的组织部署
// 现在可在sf lightning dev component中使用

Agentforce Targets (Winter '26)

Agentforce目标（Winter '26）

New LWC targets for AI agents:

xml

<!-- meta.xml -->
<targets>
  <!-- Input component for Agentforce -->
  <target>lightning__AgentforceInput</target>

  <!-- Output component for Agentforce -->
  <target>lightning__AgentforceOutput</target>
</targets>

javascript

// agentInputComponent.js
import { LightningElement, api } from 'lwc';

export default class AgentInputComponent extends LightningElement {
  @api agentContext;  // Provided by Agentforce

  handleSubmit() {
    const userInput = this.template.querySelector('input').value;
    // Send to Agentforce
    this.dispatchEvent(new CustomEvent('agentinput', {
      detail: { input: userInput }
    }));
  }
}

针对AI代理的新LWC目标：

xml

<!-- meta.xml -->
<targets>
  <!-- Agentforce的输入组件 -->
  <target>lightning__AgentforceInput</target>

  <!-- Agentforce的输出组件 -->
  <target>lightning__AgentforceOutput</target>
</targets>

javascript

// agentInputComponent.js
import { LightningElement, api } from 'lwc';

export default class AgentInputComponent extends LightningElement {
  @api agentContext;  // 由Agentforce提供

  handleSubmit() {
    const userInput = this.template.querySelector('input').value;
    // 发送至Agentforce
    this.dispatchEvent(new CustomEvent('agentinput', {
      detail: { input: userInput }
    }));
  }
}

Lightning Out 2.0 (GA Winter '26)

Lightning Out 2.0（Winter '26正式发布）

Re-imagined embedding with web components:

基于Web组件重新设计的嵌入方案：

Traditional Lightning Out (Legacy)

传统Lightning Out（旧版）

html

<script src="https://MyDomain.lightning.force.com/lightning/lightning.out.js"></script>
<script>
  $Lightning.use("c:myApp", function() {
    $Lightning.createComponent("c:myComponent",
      { recordId: "001..." },
      "lightningContainer",
      function(cmp) { /* callback */ }
    );
  });
</script>
<div id="lightningContainer"></div>

html

<script src="https://MyDomain.lightning.force.com/lightning/lightning.out.js"></script>
<script>
  $Lightning.use("c:myApp", function() {
    $Lightning.createComponent("c:myComponent",
      { recordId: "001..." },
      "lightningContainer",
      function(cmp) { /* 回调函数 */ }
    );
  });
</script>
<div id="lightningContainer"></div>

Lightning Out 2.0 (Modern)

Lightning Out 2.0（新版）

html

<!-- Standards-based web components -->
<script src="https://MyDomain.lightning.force.com/c/myComponent.js" type="module"></script>

<!-- Use as web component -->
<c-my-component record-id="001..." ></c-my-component>

<!-- No Aura dependency -->
<!-- Powered by LWR (Lightning Web Runtime) -->
<!-- Lighter and faster -->

Benefits:

50-70% smaller bundle size
Faster load times
Standards-based (no proprietary framework)
Better browser compatibility
Simplified integration

html

<!-- 基于标准的Web组件 -->
<script src="https://MyDomain.lightning.force.com/c/myComponent.js" type="module"></script>

<!-- 作为Web组件使用 -->
<c-my-component record-id="001..." ></c-my-component>

<!-- 无Aura依赖 -->
<!-- 由LWR（Lightning Web Runtime）提供支持 -->
<!-- 更轻量、更快 -->

优势：

包体积缩小50-70%
加载速度更快
基于标准（无专有框架）
更好的浏览器兼容性
简化的集成流程

SLDS 2.0 with Dark Mode (GA Winter '26)

支持深色模式的SLDS 2.0（Winter '26正式发布）

Salesforce Lightning Design System 2.0:

css

/* Dark mode support in custom themes */
:host([data-theme="dark"]) {
  --lwc-colorBackground: #16325c;
  --lwc-colorTextPrimary: #ffffff;
  --lwc-brandPrimary: #1589ee;
}

/* Light mode */
:host([data-theme="light"]) {
  --lwc-colorBackground: #ffffff;
  --lwc-colorTextPrimary: #181818;
  --lwc-brandPrimary: #0176d3;
}

javascript

// Toggle dark mode
export default class ThemeToggle extends LightningElement {
  handleThemeChange(event) {
    const theme = event.target.checked ? 'dark' : 'light';
    this.template.host.setAttribute('data-theme', theme);
  }
}

Salesforce Lightning设计系统2.0：

css

/* 自定义主题中的深色模式支持 */
:host([data-theme="dark"]) {
  --lwc-colorBackground: #16325c;
  --lwc-colorTextPrimary: #ffffff;
  --lwc-brandPrimary: #1589ee;
}

/* 浅色模式 */
:host([data-theme="light"]) {
  --lwc-colorBackground: #ffffff;
  --lwc-colorTextPrimary: #181818;
  --lwc-brandPrimary: #0176d3;
}

javascript

// 切换深色模式
export default class ThemeToggle extends LightningElement {
  handleThemeChange(event) {
    const theme = event.target.checked ? 'dark' : 'light';
    this.template.host.setAttribute('data-theme', theme);
  }
}

SLDS Linter with Fix Option

带自动修复功能的SLDS代码检查工具

bash

undefined

bash

undefined

Install SLDS linter

安装SLDS代码检查工具

npm install -D @salesforce-ux/slds-linter

Lint with auto-fix

自动修复模式下检查代码

npx slds-linter --fix src/

CI/CD integration

CI/CD集成

npx slds-linter src/ --format json > slds-report.json

undefined

npx slds-linter src/ --format json > slds-report.json

undefined

Unified Testing APIs (Winter '26)

统一测试API（Winter '26）

Test Discovery and Test Runner APIs unify Apex and Flow testing:

apex

// Discover all tests
Test.DiscoveryResult discovery = Test.discoverTests();

// Get Apex tests
List<Test.ApexTestInfo> apexTests = discovery.getApexTests();

// Get Flow tests
List<Test.FlowTestInfo> flowTests = discovery.getFlowTests();

// Run all tests from single location
Test.RunResult result = Test.runTests(discovery);

// Check results
System.debug('Apex passed: ' + result.getApexTestsPassed());
System.debug('Flow passed: ' + result.getFlowTestsPassed());

Benefits:

Unified test execution
Single test report
Simplified CI/CD
Better test orchestration

测试发现和测试运行器API统一了Apex和Flow测试：

apex

// 发现所有测试
Test.DiscoveryResult discovery = Test.discoverTests();

// 获取Apex测试
List<Test.ApexTestInfo> apexTests = discovery.getApexTests();

// 获取Flow测试
List<Test.FlowTestInfo> flowTests = discovery.getFlowTests();

// 从单一位置运行所有测试
Test.RunResult result = Test.runTests(discovery);

// 检查结果
System.debug('Apex通过数量: ' + result.getApexTestsPassed());
System.debug('Flow通过数量: ' + result.getFlowTestsPassed());

优势：

统一的测试执行
单一测试报告
简化的CI/CD流程
更完善的测试编排

Lightning Web Security Enhancements

Lightning Web Security增强功能

New security protections with API distortions:

javascript

// Additional secure protections automatically applied
export default class SecureComponent extends LightningElement {
  connectedCallback() {
    // Web APIs now include security distortions
    // ESLint rules validate distortion compliance

    // Example: Secure window access
    const secureWindow = window;  // LWS-secured reference
  }
}

新增带API变形的安全防护：

javascript

// 自动应用额外的安全防护
export default class SecureComponent extends LightningElement {
  connectedCallback() {
    // Web API现在包含安全变形
    // ESLint规则验证变形合规性

    // 示例：安全访问window对象
    const secureWindow = window;  // LWS保护的引用
  }
}

ESLint Rules for Security

安全相关ESLint规则

json

// .eslintrc.json
{
  "extends": ["@salesforce/eslint-config-lwc/recommended"],
  "rules": {
    "@lwc/lwc/no-inner-html": "error",
    "@lwc/lwc/no-document-query": "error",
    "@salesforce/lwc-security/no-unsafe-references": "error"
  }
}

json

// .eslintrc.json
{
  "extends": ["@salesforce/eslint-config-lwc/recommended"],
  "rules": {
    "@lwc/lwc/no-inner-html": "error",
    "@lwc/lwc/no-document-query": "error",
    "@salesforce/lwc-security/no-unsafe-references": "error"
  }
}

Practical Migration Examples

实用迁移示例

GraphQL Module Update

GraphQL模块更新

javascript

// Before (Winter '25)
import { gql, graphql } from 'lightning/uiGraphQLApi';

@wire(graphql, { query: gql`...` })
results;

// After (Winter '26)
import { gql, graphql } from 'lightning/graphql';

@wire(graphql, { query: gql`...` })
results;

javascript

// 之前（Winter '25）
import { gql, graphql } from 'lightning/uiGraphQLApi';

@wire(graphql, { query: gql`...` })
results;

// 之后（Winter '26）
import { gql, graphql } from 'lightning/graphql';

@wire(graphql, { query: gql`...` })
results;

Local Development Workflow

本地开发工作流

bash

undefined

bash

undefined

Old workflow (deploy every change)

旧工作流（每次变更都需部署）

sf project deploy start

Wait 30-60 seconds

等待30-60秒

Test in org

在组织中测试

Repeat...

重复此过程...

New workflow (instant feedback)

新工作流（即时反馈）

sf lightning dev component

Changes reflect immediately

变更即时生效

No deployment

无需部署

Test in local browser

在本地浏览器中测试

Deploy only when ready

仅在准备就绪时部署

undefined

undefined

Embedding with Lightning Out 2.0

使用Lightning Out 2.0嵌入

html

<!-- Old (Lightning Out 1.0) -->
<script src="/lightning/lightning.out.js"></script>
<script>
  $Lightning.use("c:app", function() {
    $Lightning.createComponent("c:comp", {}, "div", callback);
  });
</script>

<!-- New (Lightning Out 2.0) -->
<script src="/c/comp.js" type="module"></script>
<c-comp></c-comp>

html

<!-- 旧版（Lightning Out 1.0） -->
<script src="/lightning/lightning.out.js"></script>
<script>
  $Lightning.use("c:app", function() {
    $Lightning.createComponent("c:comp", {}, "div", callback);
  });
</script>

<!-- 新版（Lightning Out 2.0） -->
<script src="/c/comp.js" type="module"></script>
<c-comp></c-comp>