♻ refactor(swiper): wrap the update method for blazor compatibility (#2500)

* revert changes * ♻ refactor(swiper): wrap the update method for blazor compatibility * move numberhelper * remove gitlab-ci.yml * move numberhelper * package with -p:Version instead of -p:PackageVersion * Update src/Masa.Blazor.JS/src/wrappers/swiper/index.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-12-06 10:19:23 +08:00 · 2025-07-18 11:24:08 +08:00
parent 7eb781c5f4
commit 5041696427
20 changed files with 58 additions and 82 deletions
--- a/.github/workflows/push-nuget-package-manually.yml
+++ b/.github/workflows/push-nuget-package-manually.yml
@@ -25,6 +25,6 @@ jobs:
    - name: build
      run: dotnet build Masa.Blazor.Build.slnx -c Release /p:ContinuousIntegrationBuild=true
    - name: pack
-      run: dotnet pack Masa.Blazor.Build.slnx --no-build --include-symbols -c Release -p:PackageVersion=${{github.event.inputs.version}}
+      run: dotnet pack Masa.Blazor.Build.slnx --no-build --include-symbols -c Release -p:Version=${{github.event.inputs.version}}
    - name: package push
      run: dotnet nuget push "**/*.symbols.nupkg" --skip-duplicate -k ${{secrets.NUGET_TOKEN}}  -s https://api.nuget.org/v3/index.json
--- a/.github/workflows/push-nuget-package-on-release.yml
+++ b/.github/workflows/push-nuget-package-on-release.yml
@@ -21,6 +21,6 @@ jobs:
    - name: build
      run: dotnet build Masa.Blazor.Build.slnx -c Release /p:ContinuousIntegrationBuild=true
    - name: pack
-      run: dotnet pack Masa.Blazor.Build.slnx --no-build --include-symbols -c Release -p:PackageVersion=$GITHUB_REF_NAME
+      run: dotnet pack Masa.Blazor.Build.slnx --no-build --include-symbols -c Release -p:Version=$GITHUB_REF_NAME
    - name: package push
      run: dotnet nuget push "**/*.symbols.nupkg" --skip-duplicate -k ${{secrets.NUGET_TOKEN}} -s https://api.nuget.org/v3/index.json
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,22 +0,0 @@
-stages:
-  - packer-prd
-
-packer-prd:
-  image: registry.cn-hangzhou.aliyuncs.com/masa/dotnet_sdk:8.0.100
-  stage: packer-prd
-  only:
-    - tags
-  script:
-    - rm -rf ./docs/MASA.Docs
-    - git config --global https.https://github.com.proxy $PROXY_GATEWAY
-    - git config --global http.https://github.com.proxy $PROXY_GATEWAY
-    - git clone -b main https://github.com/masastack/MASA.Docs.git ./docs/MASA.Docs
-    - dotnet build src/Masa.Blazor.SomethingSkia/Masa.Blazor.SomethingSkia.csproj -c Release
-    - dotnet pack src/Masa.Blazor/Masa.Blazor.csproj --no-build  --include-symbols -p:PackageVersion=$CI_COMMIT_TAG
-    - dotnet pack src/Masa.Blazor.SomethingSkia/Masa.Blazor.SomethingSkia.csproj --no-build  --include-symbols -p:PackageVersion=$CI_COMMIT_TAG
-    - dotnet nuget push "**/*.symbols.nupkg" -k $nugetkey -s https://api.nuget.org/v3/index.json
-  after_script:
-    - git config --global --unset https.proxy
-    - git config --global --unset http.proxy
-    - echo "" >/home/gitlab-runner/.gitconfig
-  retry: 2
--- a/CleanBinAndObj.bat
+++ b/CleanBinAndObj.bat
--- a/Masa.Blazor.slnx
+++ b/Masa.Blazor.slnx
@@ -41,7 +41,6 @@
  </Folder>
  <Folder Name="/9 - Solution Itms/">
    <File Path=".gitignore" />
-    <File Path=".gitlab-ci.yml" />
    <File Path=".gitmodules" />
    <File Path="CONTRIBUTING.md" />
    <File Path="Dockerfile" />
--- a/docs/Masa.Blazor.Docs/wwwroot/pages/mobiles/swiper/en-US.md
+++ b/docs/Masa.Blazor.Docs/wwwroot/pages/mobiles/swiper/en-US.md
@@ -15,11 +15,11 @@ dotnet add package Masa.Blazor.JSComponents.Swiper
 ```

 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
 ```

 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 ```

 ## Usage
@@ -47,17 +47,8 @@ dotnet add package Masa.Blazor.JSComponents.Swiper
 By default, the highest slide determines the height of the Swiper.
 If you need to adapt the height, you can set the `AutoHeight` property.

-For scenarios where the content in the **MSwiperSlide** is loaded asynchronously, 
-it is recommended to add a conditional judgment outside the **MSwiperSlide** component
-to recalculate the height after the content is loaded.
-
-```razor
-<MSwiper AutoHeight>
-    @if (content is not null) {
-        <MSwiperSlide>@content</MSwiperSlide>
-    } 
-</MSwiper>
-```
+> For scenarios where the content in **MSwiperSlide** is loaded asynchronously,
+> you need to manually call `_swiper.UpdateAsync()` to notify Swiper to recalculate the height when the height does not adapt.

 <masa-example file="Examples.mobiles.swiper.AutoHeight"></masa-example>

--- a/docs/Masa.Blazor.Docs/wwwroot/pages/mobiles/swiper/zh-CN.md
+++ b/docs/Masa.Blazor.Docs/wwwroot/pages/mobiles/swiper/zh-CN.md
@@ -15,11 +15,11 @@ dotnet add package Masa.Blazor.JSComponents.Swiper
 ```

 ```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css"/>
 ```

 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
 ```

 ## 使用 {#usage}
@@ -46,15 +46,7 @@ dotnet add package Masa.Blazor.JSComponents.Swiper

 默认情况下，Swiper 的高度是由高度最高的 slide 决定的，如果需要自适应高度，可以设置 `AutoHeight` 属性。

-对于 **MSwiperSlide** 中的内容是异步加载的场景，建议在 **MSwiperSlide** 组件外加一个条件判断，以便在内容加载完成后重新计算高度。
-
-```razor
-<MSwiper AutoHeight>
-    @if (content is not null) {
-        <MSwiperSlide>@content</MSwiperSlide>
-    }
-</MSwiper>
-```
+> 对于 **MSwiperSlide** 中的内容是异步加载的场景，高度没有自适应时需要手动调用 `_swiper.UpdateAsync()` 方法通知 Swiper 重新计算高度。

 <masa-example file="Examples.mobiles.swiper.AutoHeight"></masa-example>

--- a/docs/Masa.Docs.Server/Pages/_Host.cshtml
+++ b/docs/Masa.Docs.Server/Pages/_Host.cshtml
@@ -28,7 +28,7 @@
    <link href="https://cdn.masastack.com/npm/docsearch/v3/docsearch.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/gridstack.js/12.2.1/gridstack.min.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/drawflow/0.0.59/drawflow.min.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/xgplayer/3.0.11/xgplayer.min.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/pdfjs-dist/4.5.136/web/pdf_viewer.min.css" rel="stylesheet">
    <link href="_content/Masa.Docs.Shared/prism/prism-material-dark-for-masa.css" rel="stylesheet">
@@ -70,7 +70,7 @@
    <script src="https://cdn.masastack.com/npm/docsearch/v3/docsearch.js"></script>
    <script src="https://cdn.masastack.com/npm/sortable/Sortable.min.js"></script>
    <script src="_content/Masa.Docs.Shared/prism/prism.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
    <script src="https://cdn.masastack.com/npm/drawflow/0.0.59/drawflow.min.js"></script>
    <script src="https://api.map.baidu.com/getscript?v=1.0&&type=webgl&ak=QahcSGCkRzIVXBkKhWHt3vGhNyYGdk3t"></script>
    <script>
--- a/docs/Masa.Docs.WebAssembly/wwwroot/index.html
+++ b/docs/Masa.Docs.WebAssembly/wwwroot/index.html
@@ -24,7 +24,7 @@
    <link href="https://cdn.masastack.com/npm/docsearch/v3/docsearch.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/gridstack.js/12.2.1/gridstack.min.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/drawflow/0.0.59/drawflow.min.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/xgplayer/3.0.11/xgplayer.min.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/pdfjs-dist/4.5.136/web/pdf_viewer.min.css" rel="stylesheet">
    <link href="_content/Masa.Docs.Shared/prism/prism-material-dark-for-masa.css" rel="stylesheet">
@@ -136,7 +136,7 @@
    <script src="_content/Masa.Docs.Shared/quill/quill-blot-formatter.min.js"></script>
    <script src="https://cdn.masastack.com/npm/docsearch/v3/docsearch.js"></script>
    <script src="https://cdn.masastack.com/npm/sortable/Sortable.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
    <script src="https://cdn.masastack.com/npm/drawflow/0.0.59/drawflow.min.js"></script>
    <script src="https://api.map.baidu.com/getscript?v=1.0&&type=webgl&ak=QahcSGCkRzIVXBkKhWHt3vGhNyYGdk3t"></script>
    <script src="_content/Masa.Docs.Shared/prism/prism.min.js"></script>
--- a/src/Masa.Blazor.JS/package.json
+++ b/src/Masa.Blazor.JS/package.json
@@ -70,7 +70,7 @@
    "rollup-plugin-output-manifest": "^2.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "sortablejs": "^1.15.2",
-    "swiper": "^10.2.0",
+    "swiper": "^11.2.10",
    "tslib": "^2.4.0",
    "typescript": "^4.8.2",
    "xgplayer": "^3.0.10",
--- a/src/Masa.Blazor.JS/pnpm-lock.yaml
+++ b/src/Masa.Blazor.JS/pnpm-lock.yaml
@@ -135,8 +135,8 @@ importers:
        specifier: ^1.15.2
        version: 1.15.6
      swiper:
-        specifier: ^10.2.0
-        version: 10.3.1
+        specifier: ^11.2.10
+        version: 11.2.10
      tslib:
        specifier: ^2.4.0
        version: 2.8.1
@@ -1661,8 +1661,8 @@ packages:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}

-  swiper@10.3.1:
-    resolution: {integrity: sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==}
+  swiper@11.2.10:
+    resolution: {integrity: sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==}
    engines: {node: '>= 4.7.0'}

  terser@5.43.1:
@@ -3424,7 +3424,7 @@ snapshots:

  supports-preserve-symlinks-flag@1.0.0: {}

-  swiper@10.3.1: {}
+  swiper@11.2.10: {}

  terser@5.43.1:
    dependencies:
--- a/src/Masa.Blazor.JS/src/wrappers/swiper/index.ts
+++ b/src/Masa.Blazor.JS/src/wrappers/swiper/index.ts
@@ -7,6 +7,14 @@ class SwiperProxy {
  handle: DotNet.DotNetObject;
  swiper: SwiperClass;

+  /**
+   * A flag used to address the issue where Blazor has not finished rendering when the `update` method is called,
+   * resulting in no UI changes after the update. When set to `true`, the `slidesUpdated` event triggers an additional
+   * call to the `update` method. This eliminates the need for a manual delay (e.g., `await Task.Delay(1000);`) before
+   * calling `update`.
+   */
+  updateAgainInSlidesUpdatedEvent: boolean;
+
  constructor(
    el: HTMLElement,
    swiperOptions: SwiperOptions,
@@ -36,7 +44,13 @@ class SwiperProxy {
    const swiper = new (Swiper as any)(el, swiperOptions);
    this.swiper = swiper;
    this.handle = handle;
-    this.swiper.on("activeIndexChange", (e) => this.onRealIndexChange(e, this));
+    this.swiper.on("activeIndexChange", e => this.onRealIndexChange(e, this));
+    this.swiper.on("slidesUpdated", e => {
+      if (this.updateAgainInSlidesUpdatedEvent) {
+        this.updateAgainInSlidesUpdatedEvent = false;
+        this.swiper.update();
+      }
+    });

    el._swiper = {
      instance: this.swiper,
@@ -56,6 +70,11 @@ class SwiperProxy {
    this.swiper.slidePrev(speed);
  }

+  update() {
+    this.updateAgainInSlidesUpdatedEvent = true;
+    this.swiper.update();
+  }
+
  dispose() {
    this.swiper && this.swiper.destroy(true);
    this.handle.dispose();
@@ -69,7 +88,10 @@ class SwiperProxy {

  async onRealIndexChange(e: SwiperClass, that: SwiperProxy) {
    if (that.handle) {
-      await that.handle.invokeMethodAsync("OnIndexChanged", e.originalParams.loop ? e.realIndex : e.activeIndex);
+      await that.handle.invokeMethodAsync(
+        "OnIndexChanged",
+        e.originalParams.loop ? e.realIndex : e.activeIndex
+      );
    }
  }
 }
--- a/src/Masa.Blazor.JSComponents.Swiper/Swiper/MSwiper.razor.cs
+++ b/src/Masa.Blazor.JSComponents.Swiper/Swiper/MSwiper.razor.cs
@@ -239,10 +239,7 @@ public partial class MSwiper : MasaComponentBase
        _ctsForUpdateSlides.Cancel();
        _ctsForUpdateSlides = new CancellationTokenSource();

-        await RunTaskInMicrosecondsAsync(
-            () => _ = _swiperProxy.InvokeInstanceVoidAsync("update"),
-            16,
-            _ctsForUpdateSlides.Token);
+        await RunTaskInMicrosecondsAsync(_swiperProxy.UpdateAsync, 16, _ctsForUpdateSlides.Token);
    }

    /// <summary>
@@ -265,4 +262,4 @@ public partial class MSwiper : MasaComponentBase

        await _swiperProxy.InvokeInstanceVoidAsync(funcName, args);
    }
-}
+}
--- a/src/Masa.Blazor.JSComponents.Swiper/Swiper/SwiperJSObjectReferenceProxy.cs
+++ b/src/Masa.Blazor.JSComponents.Swiper/Swiper/SwiperJSObjectReferenceProxy.cs
@@ -20,6 +20,11 @@ public class SwiperJSObjectReferenceProxy(IJSObjectReference jsObjectReference)
        await JSObjectReference.InvokeVoidAsync("slidePrev", speed);
    }

+    public async Task UpdateAsync()
+    {
+        await JSObjectReference.InvokeVoidAsync("update");
+    }
+
    protected override ValueTask DisposeAsyncCore()
    {
        return JSObjectReference.InvokeVoidAsync("dispose");
--- a/src/Masa.Blazor.JSComponents.Swiper/wwwroot/swiper.js
+++ b/src/Masa.Blazor.JSComponents.Swiper/wwwroot/swiper.js
@@ -1,2 +1,2 @@
-function e(e,n,i,t){return new(i||(i=Promise))((function(s,o){function r(e){try{p(t.next(e))}catch(e){o(e)}}function a(e){try{p(t.throw(e))}catch(e){o(e)}}function p(e){var n;e.done?s(e.value):(n=e.value,n instanceof i?n:new i((function(e){e(n)}))).then(r,a)}p((t=t.apply(e,n||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class n{constructor(e,n,i){if(!i)throw new Error("the handle from .NET cannot be null");if(!e)return void i.dispose();e._swiper&&(e._swiper.instance.destroy(!0),delete e._swiper),null!=n||(n={}),n.pagination&&(n.pagination.type=n.pagination.type.toLowerCase());const t=new Swiper(e,n);this.swiper=t,this.handle=i,this.swiper.on("activeIndexChange",(e=>this.onRealIndexChange(e,this))),e._swiper={instance:this.swiper,handle:i}}slideTo(e,n,i){this.swiper.slideToLoop(e,n,i)}slideNext(e){this.swiper.slideNext(e)}slidePrev(e){this.swiper.slidePrev(e)}dispose(){this.swiper&&this.swiper.destroy(!0),this.handle.dispose()}invokeVoid(e,...n){this.swiper[e]&&"function"==typeof this.swiper[e]&&this.swiper[e](...n)}onRealIndexChange(n,i){return e(this,void 0,void 0,(function*(){i.handle&&(yield i.handle.invokeMethodAsync("OnIndexChanged",n.originalParams.loop?n.realIndex:n.activeIndex))}))}}function i(e,i,t){return new n(e,i,t)}export{i as init};
+function e(e,i,n,t){return new(n||(n=Promise))(function(s,r){function o(e){try{a(t.next(e))}catch(e){r(e)}}function d(e){try{a(t.throw(e))}catch(e){r(e)}}function a(e){var i;e.done?s(e.value):(i=e.value,i instanceof n?i:new n(function(e){e(i)})).then(o,d)}a((t=t.apply(e,i||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class i{constructor(e,i,n){if(!n)throw new Error("the handle from .NET cannot be null");if(!e)return void n.dispose();e._swiper&&(e._swiper.instance.destroy(!0),delete e._swiper),null!=i||(i={}),i.pagination&&(i.pagination.type=i.pagination.type.toLowerCase());const t=new Swiper(e,i);this.swiper=t,this.handle=n,this.swiper.on("activeIndexChange",e=>this.onRealIndexChange(e,this)),this.swiper.on("slidesUpdated",e=>{this.updateAgainInSlidesUpdatedEvent&&(this.updateAgainInSlidesUpdatedEvent=!1,this.swiper.update())}),e._swiper={instance:this.swiper,handle:n}}slideTo(e,i,n){this.swiper.slideToLoop(e,i,n)}slideNext(e){this.swiper.slideNext(e)}slidePrev(e){this.swiper.slidePrev(e)}update(){this.updateAgainInSlidesUpdatedEvent=!0,this.swiper.update()}dispose(){this.swiper&&this.swiper.destroy(!0),this.handle.dispose()}invokeVoid(e,...i){this.swiper[e]&&"function"==typeof this.swiper[e]&&this.swiper[e](...i)}onRealIndexChange(i,n){return e(this,void 0,void 0,function*(){n.handle&&(yield n.handle.invokeMethodAsync("OnIndexChanged",i.originalParams.loop?i.realIndex:i.activeIndex))})}}function n(e,n,t){return new i(e,n,t)}export{n as init};
 //# sourceMappingURL=swiper.js.map
--- a/src/Masa.Blazor.JSComponents.Swiper/wwwroot/swiper.js.map
+++ b/src/Masa.Blazor.JSComponents.Swiper/wwwroot/swiper.js.map
--- a/src/Masa.Blazor.Playground/Masa.Blazor.Playground.csproj
+++ b/src/Masa.Blazor.Playground/Masa.Blazor.Playground.csproj
@@ -8,14 +8,7 @@
  </PropertyGroup>

  <ItemGroup>
-<!--    <ProjectReference Include="..\Masa.Blazor.MasaTable\Masa.Blazor.MasaTable.csproj" />-->
-    <ProjectReference Include="..\Masa.Blazor.Components.TemplateTable\Masa.Blazor.Components.TemplateTable.csproj" />
    <ProjectReference Include="..\Masa.Blazor\Masa.Blazor.csproj" />
  </ItemGroup>

-  <ItemGroup>
-    <PackageReference Include="GraphQL.Client" Version="6.1.0" />
-    <PackageReference Include="GraphQL.Client.Serializer.SystemTextJson" Version="6.1.0" />
-  </ItemGroup>
-
 </Project>
--- a/src/Masa.Blazor.Playground/Program.cs
+++ b/src/Masa.Blazor.Playground/Program.cs
@@ -1,16 +1,9 @@
-using System.Text.Json;
-using GraphQL.Client.Http;
-using GraphQL.Client.Serializer.SystemTextJson;
-
 var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor(opts => opts.DetailedErrors = true);
 builder.Services.AddMasaBlazor();
 builder.Services.AddHttpClient();

-builder.Services.AddSingleton<GraphQLHttpClient>(_ => new GraphQLHttpClient("http://localhost:5297/graphql",
-    new SystemTextJsonSerializer(new JsonSerializerOptions(JsonSerializerDefaults.Web))));
-
 builder.WebHost.UseSetting(WebHostDefaults.DetailedErrorsKey, "true");

 var app = builder.Build();
--- a/src/Masa.Blazor/Utils/Metadata.cs
+++ b/src/Masa.Blazor/Utils/Metadata.cs
@@ -0,0 +1,6 @@
+namespace Masa.Blazor.Utils;
+
+public class Metadata
+{
+    public static string Version { get; } = typeof(Metadata).Assembly.GetName().Version?.ToString(3) ?? "0.0.0";
+}
--- a/src/Masa.Blazor/Helpers/NumberHelper.cs
+++ b/src/Masa.Blazor/Helpers/NumberHelper.cs