From d28a8adcff2d0c9601b718450afb2ed0f251e5fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= <cipchk@qq.com>
Date: Thu, 14 Nov 2024 02:13:02 +0800
Subject: [PATCH] perf: optimizing `@let` (#1849)

---
 packages/abc/cell/cell.component.ts     |  7 ++--
 packages/abc/hotkey/hotkey.directive.ts |  4 +--
 packages/abc/hotkey/index.en-US.md      |  2 +-
 packages/abc/hotkey/index.zh-CN.md      |  2 +-
 packages/abc/st/st-td.component.html    | 47 ++++++++++++-------------
 packages/abc/st/st.component.html       |  9 ++---
 packages/abc/st/st.module.ts            |  2 --
 packages/form/src/sf.component.html     | 20 ++++++-----
 8 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/packages/abc/cell/cell.component.ts b/packages/abc/cell/cell.component.ts
index 4e8e96bbf4..724b8fea47 100644
--- a/packages/abc/cell/cell.component.ts
+++ b/packages/abc/cell/cell.component.ts
@@ -68,13 +68,14 @@ import type { CellDefaultText, CellOptions, CellTextResult, CellValue } from './
         }
         @case ('img') {
           @for (i of $any(_text); track $index) {
+            @let img = safeOpt.img;
             <img
               [attr.src]="i"
-              [attr.height]="safeOpt.img?.size"
-              [attr.width]="safeOpt.img?.size"
+              [attr.height]="img?.size"
+              [attr.width]="img?.size"
               (click)="_showImg(i)"
               class="img"
-              [class.point]="safeOpt.img?.big"
+              [class.point]="img?.big"
             />
           }
         }
diff --git a/packages/abc/hotkey/hotkey.directive.ts b/packages/abc/hotkey/hotkey.directive.ts
index 487a0c686c..0d256c9222 100644
--- a/packages/abc/hotkey/hotkey.directive.ts
+++ b/packages/abc/hotkey/hotkey.directive.ts
@@ -10,9 +10,9 @@ export class HotkeyDirective implements OnDestroy {
   private readonly platform = inject(Platform);
 
   /**
-   * Specify [hotkey format](https://github.com/github/hotkey#hotkey-string-format)
+   * Specify [hotkey format](https://github.com/github/hotkey#hotkey-string-format), you can get the code through [Hotkey Code](https://github.github.com/hotkey/hotkey_mapper.html)
    *
-   * 指定[热键格式](https://github.com/github/hotkey#hotkey-string-format)
+   * 指定[热键格式](https://github.com/github/hotkey#hotkey-string-format)，可以通过 [Hotkey Code](https://github.github.com/hotkey/hotkey_mapper.html) 来获取代码。
    */
   @Input('hotkey')
   set hotkey(key: string) {
diff --git a/packages/abc/hotkey/index.en-US.md b/packages/abc/hotkey/index.en-US.md
index 49891134d0..6cb52abbdc 100644
--- a/packages/abc/hotkey/index.en-US.md
+++ b/packages/abc/hotkey/index.en-US.md
@@ -9,7 +9,7 @@ module: import { HotkeyModule } from '@delon/abc/hotkey';
 
 Based on the [@github/hotke](https://github.com/github/hotkey) hotkey library.
 
-> If you don't know the hotkey value, you can get it through [Hotkey Code](https://github.github.io/hotkey/hotkey_mapper.html).
+> If you don't know the hotkey value, you can get it through [Hotkey Code](https://github.github.com/hotkey/hotkey_mapper.html).
 
 ## API
 
diff --git a/packages/abc/hotkey/index.zh-CN.md b/packages/abc/hotkey/index.zh-CN.md
index b015854e54..2fc532b53c 100644
--- a/packages/abc/hotkey/index.zh-CN.md
+++ b/packages/abc/hotkey/index.zh-CN.md
@@ -9,7 +9,7 @@ module: import { HotkeyModule } from '@delon/abc/hotkey';
 
 基于 [@github/hotke](https://github.com/github/hotkey) 热键库。
 
-> 如果不清楚热键值，可通过[热键代码](https://github.github.io/hotkey/hotkey_mapper.html)来获取。
+> 如果不清楚热键值，可通过[热键代码](https://github.github.com/hotkey/hotkey_mapper.html)来获取。
 
 ## API
 
diff --git a/packages/abc/st/st-td.component.html b/packages/abc/st/st-td.component.html
index 0d9f60fb7b..7589610d4a 100644
--- a/packages/abc/st/st-td.component.html
+++ b/packages/abc/st/st-td.component.html
@@ -9,14 +9,15 @@
 </ng-template>
 <ng-template #btnItemTpl let-i>
   @if (i.pop) {
+    @let pop = i.pop;
     <a
       nz-popconfirm
-      [nzPopconfirmTitle]="i.pop.title"
-      [nzIcon]="i.pop.icon"
-      [nzCondition]="i.pop.condition(i)"
-      [nzCancelText]="i.pop.cancelText"
-      [nzOkText]="i.pop.okText"
-      [nzOkType]="i.pop.okType"
+      [nzPopconfirmTitle]="pop.title"
+      [nzIcon]="pop.icon"
+      [nzCondition]="pop.condition(i)"
+      [nzCancelText]="pop.cancelText"
+      [nzOkText]="pop.okText"
+      [nzOkType]="pop.okType"
       (nzOnConfirm)="_btn(i)"
       class="st__btn-text"
       [ngClass]="i._className"
@@ -32,15 +33,16 @@
 </ng-template>
 <ng-template #btnTextTpl let-i>
   @if (i._icon) {
-    @if (i._icon.iconfont) {
-      <i nz-icon [nzIconfont]="i._icon.iconfont"></i>
+    @let icon = i._icon;
+    @if (icon.iconfont) {
+      <i nz-icon [nzIconfont]="icon.iconfont"></i>
     } @else {
       <i
         nz-icon
-        [nzType]="i._icon.type"
-        [nzTheme]="i._icon.theme"
-        [nzSpin]="i._icon.spin"
-        [nzTwotoneColor]="i._icon.twoToneColor"
+        [nzType]="icon.type"
+        [nzTheme]="icon.theme"
+        [nzSpin]="icon.spin"
+        [nzTwotoneColor]="icon.twoToneColor"
       ></i>
     }
   }
@@ -49,6 +51,7 @@
 @if (c.__render) {
   <ng-template [ngTemplateOutlet]="c.__render!" [ngTemplateOutletContext]="{ $implicit: i, index: index, column: c }" />
 } @else {
+  @let col = i._values[cIdx];
   @switch (c.type) {
     @case ('checkbox') {
       <label nz-checkbox [nzDisabled]="i.disabled" [ngModel]="i.checked" (ngModelChange)="_checkbox($event)"></label>
@@ -57,35 +60,31 @@
       <label nz-radio [nzDisabled]="i.disabled" [ngModel]="i.checked" (ngModelChange)="_radio()"></label>
     }
     @case ('link') {
-      <a (click)="_link($event)" [innerHTML]="i._values[cIdx]._text" [attr.title]="i._values[cIdx].text"></a>
+      <a (click)="_link($event)" [innerHTML]="col._text" [attr.title]="col.text"></a>
     }
     @case ('tag') {
-      <nz-tag [nzColor]="i._values[cIdx].color" [nz-tooltip]="i._values[cIdx].tooltip">
-        <span [innerHTML]="i._values[cIdx]._text"></span>
+      <nz-tag [nzColor]="col.color" [nz-tooltip]="col.tooltip">
+        <span [innerHTML]="col._text"></span>
       </nz-tag>
     }
     @case ('badge') {
-      <nz-badge
-        [nzStatus]="i._values[cIdx].color"
-        [nzText]="i._values[cIdx].text"
-        [nz-tooltip]="i._values[cIdx].tooltip"
-      />
+      <nz-badge [nzStatus]="col.color" [nzText]="col.text" [nz-tooltip]="col.tooltip" />
     }
     @case ('cell') {
-      <cell [value]="i._values[cIdx].text" [options]="i._values[cIdx].cell ?? c.cell" />
+      <cell [value]="col.text" [options]="col.cell ?? c.cell" />
     }
     @case ('widget') {
       <ng-template st-widget-host [record]="i" [column]="c" />
     }
     @default {
       @if (c.safeType === 'text') {
-        <span [innerText]="i._values[cIdx]._text" [attr.title]="c._isTruncate ? i._values[cIdx].text : null"></span>
+        <span [innerText]="col._text" [attr.title]="c._isTruncate ? col.text : null"></span>
       } @else {
-        <span [innerHTML]="i._values[cIdx]._text" [attr.title]="c._isTruncate ? i._values[cIdx].text : null"></span>
+        <span [innerHTML]="col._text" [attr.title]="c._isTruncate ? col.text : null"></span>
       }
     }
   }
-  @for (btn of i._values[cIdx].buttons; track $index) {
+  @for (btn of col.buttons; track $index) {
     @if (btn.children!.length > 0) {
       <a nz-dropdown [nzDropdownMenu]="btnMenu" nzOverlayClassName="st__btn-sub">
         <span [innerHTML]="btn._text"></span>
diff --git a/packages/abc/st/st.component.html b/packages/abc/st/st.component.html
index 1f0b3f7fa5..e943156b70 100644
--- a/packages/abc/st/st.component.html
+++ b/packages/abc/st/st.component.html
@@ -61,8 +61,8 @@
             <th nzWidth="50px" [rowSpan]="_headers.length"></th>
           }
           @for (h of row; track h; let index = $index; let last = $last) {
+            @let _c = h.column;
             <th
-              *let="h.column as _c"
               [colSpan]="h.colSpan"
               [rowSpan]="h.rowSpan"
               [nzWidth]="$any(_c).width"
@@ -172,14 +172,15 @@
           </ng-template>
         }
         @for (c of _columns; track cIdx; let cIdx = $index) {
-          @if (i._values[cIdx].props?.colSpan > 0 && i._values[cIdx].props?.rowSpan > 0) {
+          @let props = i._values[cIdx].props;
+          @if (props?.colSpan > 0 && props?.rowSpan > 0) {
             <td
               [nzLeft]="!!c._left"
               [nzRight]="!!c._right"
               [attr.data-col-index]="cIdx"
               [ngClass]="c._className"
-              [attr.colspan]="i._values[cIdx].props?.colSpan === 1 ? null : i._values[cIdx].props?.colSpan"
-              [attr.rowspan]="i._values[cIdx].props?.rowSpan === 1 ? null : i._values[cIdx].props?.rowSpan"
+              [attr.colspan]="props?.colSpan === 1 ? null : props?.colSpan"
+              [attr.rowspan]="props?.rowSpan === 1 ? null : props?.rowSpan"
             >
               @if (responsive) {
                 <span class="ant-table-rep__title">
diff --git a/packages/abc/st/st.module.ts b/packages/abc/st/st.module.ts
index f74d37cc4f..d7cc671683 100644
--- a/packages/abc/st/st.module.ts
+++ b/packages/abc/st/st.module.ts
@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { CellModule } from '@delon/abc/cell';
-import { LetModule } from '@delon/abc/let';
 import { DelonACLModule } from '@delon/acl';
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
@@ -33,7 +32,6 @@ const COMPONENTS = [STComponent, STRowDirective, STWidgetHostDirective];
     CommonModule,
     FormsModule,
     DelonACLModule,
-    LetModule,
     CellModule,
     NzPopconfirmModule,
     NzTableModule,
diff --git a/packages/form/src/sf.component.html b/packages/form/src/sf.component.html
index b69d1457ce..876618ae3d 100644
--- a/packages/form/src/sf.component.html
+++ b/packages/form/src/sf.component.html
@@ -3,8 +3,9 @@
 </ng-template>
 <ng-template #btnTpl>
   @if (button !== 'none') {
-    @if (_btn && _btn.render) {
-      <nz-form-item [ngClass]="_btn.render!.class!" class="sf-btns" [fixed-label]="_btn.render!.spanLabelFixed!">
+    @let btnRender = _btn.render;
+    @if (btnRender) {
+      <nz-form-item [ngClass]="btnRender.class!" class="sf-btns" [fixed-label]="btnRender.spanLabelFixed!">
         <div
           nz-col
           class="ant-form-item-control"
@@ -25,7 +26,7 @@
                   nz-button
                   data-type="submit"
                   [nzType]="_btn.submit_type!"
-                  [nzSize]="_btn.render!.size!"
+                  [nzSize]="btnRender.size!"
                   [nzLoading]="loading"
                   [disabled]="liveValidate && !valid"
                 >
@@ -46,17 +47,18 @@
                     nz-button
                     data-type="reset"
                     [nzType]="_btn.reset_type!"
-                    [nzSize]="_btn.render!.size!"
+                    [nzSize]="btnRender.size!"
                     [disabled]="loading"
                     (click)="reset(true)"
                   >
-                    @if (_btn.reset_icon) {
+                    @let resetIcon = _btn.reset_icon;
+                    @if (resetIcon) {
                       <i
                         nz-icon
-                        [nzType]="_btn.reset_icon.type!"
-                        [nzTheme]="_btn.reset_icon.theme!"
-                        [nzTwotoneColor]="_btn.reset_icon.twoToneColor!"
-                        [nzIconfont]="_btn.reset_icon.iconfont!"
+                        [nzType]="resetIcon.type!"
+                        [nzTheme]="resetIcon.theme!"
+                        [nzTwotoneColor]="resetIcon.twoToneColor!"
+                        [nzIconfont]="resetIcon.iconfont!"
                       ></i>
                     }
                     {{ _btn.reset }}