Refactor: Transition to TypeScript and Webpack build system (#449)

## Target

<!--
  Why are you making this change?
 -->

#### Open Questions

<!-- OPTIONAL
- [ ] Use the GitHub checklists to spark discussion on issues that may
arise from your approach. Please tick the box and explain your answer.
-->

## Checklist

<!--
It serves as a gentle reminder for common tasks. Confirm it's done and
check everything that applies.
-->

- [x] Tests cover new or modified code
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the site documentation
- [x] I have made corresponding changes to the README, NuGet README file
- [x] My changes generate no new warnings
- [x] New dependencies added or updated
- [x] Includes breaking changes
- [x] Version bumped

## Visuals

<!-- OPTIONAL
Show results both before and after this change. When the output changes,
it can be a screenshot of a trace, metric, or log illustrating the
change.
-->

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: MaxymGorn

.editorconfig

@@ -1,24 +1,5 @@
 root = true
-
-# All files
-[*]
 indent_style = space
-csharp_indent_labels = no_change
-csharp_using_directive_placement = outside_namespace:silent
-csharp_prefer_simple_using_statement = true:suggestion
-csharp_prefer_braces = true:silent
-csharp_style_namespace_declarations = block_scoped:silent
-csharp_style_prefer_method_group_conversion = true:silent
-csharp_style_prefer_top_level_statements = true:silent
-csharp_style_prefer_primary_constructors = true:suggestion
-csharp_style_expression_bodied_methods = false:silent
-csharp_style_expression_bodied_constructors = false:silent
-csharp_style_expression_bodied_operators = false:silent
-csharp_style_expression_bodied_properties = true:silent
-csharp_style_expression_bodied_indexers = true:silent
-csharp_style_expression_bodied_accessors = true:silent
-csharp_style_expression_bodied_lambdas = true:silent
-csharp_style_expression_bodied_local_functions = false:silent
 
 [*.{csproj,sln,vcxproj,vcxproj.filters,proj,nativeproj,locproj}]
 indent_size = 4
@@ -44,7 +25,23 @@ indent_style = space
 indent_size = 2
 
 [*.{cs,vb}]
-#### Naming styles ####
+# Naming styles
+csharp_indent_labels = no_change
+csharp_using_directive_placement = outside_namespace:silent
+csharp_prefer_simple_using_statement = true:suggestion
+csharp_prefer_braces = true:silent
+csharp_style_namespace_declarations = block_scoped:silent
+csharp_style_prefer_method_group_conversion = true:silent
+csharp_style_prefer_top_level_statements = true:silent
+csharp_style_prefer_primary_constructors = true:suggestion
+csharp_style_expression_bodied_methods = false:silent
+csharp_style_expression_bodied_constructors = false:silent
+csharp_style_expression_bodied_operators = false:silent
+csharp_style_expression_bodied_properties = true:silent
+csharp_style_expression_bodied_indexers = true:silent
+csharp_style_expression_bodied_accessors = true:silent
+csharp_style_expression_bodied_lambdas = true:silent
+csharp_style_expression_bodied_local_functions = false:silent
 
 # Naming rules
 
@@ -64,33 +61,21 @@ dotnet_naming_rule.non_field_members_should_be_pascal_case.style = pascal_case
 
 dotnet_naming_symbols.interface.applicable_kinds = interface
 dotnet_naming_symbols.interface.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
-dotnet_naming_symbols.interface.required_modifiers = 
 
 dotnet_naming_symbols.types.applicable_kinds = class, struct, interface, enum
 dotnet_naming_symbols.types.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
-dotnet_naming_symbols.types.required_modifiers = 
 
 dotnet_naming_symbols.non_field_members.applicable_kinds = property, event, method
 dotnet_naming_symbols.non_field_members.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
-dotnet_naming_symbols.non_field_members.required_modifiers = 
 
 # Naming styles
 
 dotnet_naming_style.begins_with_i.required_prefix = I
-dotnet_naming_style.begins_with_i.required_suffix = 
-dotnet_naming_style.begins_with_i.word_separator = 
 dotnet_naming_style.begins_with_i.capitalization = pascal_case
-
-dotnet_naming_style.pascal_case.required_prefix = 
-dotnet_naming_style.pascal_case.required_suffix = 
-dotnet_naming_style.pascal_case.word_separator = 
 dotnet_naming_style.pascal_case.capitalization = pascal_case
-
-dotnet_naming_style.pascal_case.required_prefix = 
-dotnet_naming_style.pascal_case.required_suffix = 
-dotnet_naming_style.pascal_case.word_separator = 
 dotnet_naming_style.pascal_case.capitalization = pascal_case
 dotnet_style_operator_placement_when_wrapping = beginning_of_line
+
 tab_width = 4
 indent_size = 4
 end_of_line = crlf

.github/linters/.jscpd.json

@@ -7,7 +7,8 @@
     "**/*.md",
     "**/*excubowebcompiler.json",
     "**/bin/**",
-    "**/obj/**"
+    "**/obj/**",
+    "**/node_modules/**"
   ],
   "absolute": true,
   "minTokens": 75

.github/workflows/cd.yml

@@ -20,6 +20,8 @@ jobs:
     uses: CropperBlazor/Cropper.Blazor/.github/workflows/build-test-template.yml@dev
     secrets:
       CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+    with:
+      run-js-tests: true
 
   deploy-to-github-pages:
     permissions:

.github/workflows/ci.yml

@@ -21,6 +21,28 @@ jobs:
     uses: CropperBlazor/Cropper.Blazor/.github/workflows/build-test-template.yml@dev
     secrets:
       CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+    with:
+      run-js-tests: true
+
+  es-linting:
+    permissions:
+      contents: read
+    needs: code-quality-check
+    name: ESLint - TypeScript Linting
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+        with:
+          persist-credentials: false
+
+      - name: Install npm dependencies
+        run: npm install
+        working-directory: src/Cropper.Blazor/Cropper.Blazor
+
+      - name: Run ESLint
+        run: npm run lint
+        working-directory: src/Cropper.Blazor/Cropper.Blazor
 
   code-linting:
     permissions:
@@ -63,8 +85,10 @@ jobs:
           VALIDATE_MARKDOWN_PRETTIER: false
           VALIDATE_YAML_PRETTIER: false
           VALIDATE_JSON_PRETTIER: false
+          VALIDATE_TYPESCRIPT_PRETTIER: false
+          VALIDATE_TYPESCRIPT_ES: false
 
-          FILTER_REGEX_EXCLUDE: '(\W|^)(obj/|bin/)|(\W|^)(.*([.]min[.]css))($)|(\W|^)(.*([.]min[.]js))($)'
+          FILTER_REGEX_EXCLUDE: '(\W|^)(obj/|bin/|node_modules/|webpack\.config\.js)|(\W|^).*([.]min[.]css)($)|(\W|^).*([.]min[.]js)($)'
           FILTER_REGEX_INCLUDE: "/github/workspace/src/Cropper.Blazor/.*|/github/workspace/.github/.*"
 
           JSCPD_CONFIG_FILE: ".jscpd.json"

.github/workflows/release.yml

@@ -18,6 +18,7 @@ jobs:
     with:
       configuration: "Release"
       publish-coverage: true
+      run-js-tests: true
 
   deploy-to-nuget:
     name: Deploy to NuGet
@@ -73,6 +74,15 @@ jobs:
               if ! jq -e '.Root.Children["cropper.min.js"]' "$json_path" > /dev/null; then
                 error_messages+="For .NET $net_version: Key 'cropper.min.js' does not exist.\n"
               fi
+              if ! jq -e '.Root.Children["blob-helper.d.ts"]' "$json_path" > /dev/null; then
+                error_messages+="For .NET $net_version: Key 'blob-helper.d.ts' does not exist.\n"
+              fi
+              if ! jq -e '.Root.Children["cropperJsInterop.d.ts"]' "$json_path" > /dev/null; then
+                error_messages+="For .NET $net_version: Key 'cropperJsInterop.d.ts' does not exist.\n"
+              fi
+              if ! jq -e '.Root.Children["cropper-url-image-helper.d.ts"]' "$json_path" > /dev/null; then
+                error_messages+="For .NET $net_version: Key 'cropper-url-image-helper.d.ts' does not exist.\n"
+              fi
             else
               error_messages+="File $json_path does not exist for .NET $net_version.\n"
             fi

.gitignore

@@ -29,5 +29,10 @@ _ReSharper*/
 [Tt]est[Rr]esult*
 .vs/
 .idea/
+*.cobertura.xml
 #Nuget packages folder
 packages/
+# Node.js
+node_modules/
+coverage/
+package-lock.json

NuGet_README.md

@@ -8,7 +8,7 @@
 [![NuGet Downloads](https://img.shields.io/nuget/dt/Cropper.Blazor?logo=nuget&label=nuget%20downloads&color=ff5c9b)](https://www.nuget.org/packages/Cropper.Blazor)
 [![NuGet Version](https://img.shields.io/nuget/v/Cropper.Blazor?logo=nuget&label=nuget%20version&color=009DEA)](https://www.nuget.org/packages/Cropper.Blazor)
 
-The most powerful image cropping tool for Blazor WebAssembly / Server, Hybrid with MAUI, MVC and
+The most powerful image cropping tool for Blazor Web App / WebAssembly / Server, Hybrid with MAUI, MVC and
 other frameworks.
 
 Cropper.Blazor is an essential component for building interactive image cropping and manipulation features in Blazor web applications. This versatile Blazor library empowers developers to integrate intuitive image cropping functionality directly into their Blazor projects, offering users a seamless and responsive image editing experience.
@@ -33,6 +33,7 @@ Cropper.Blazor is an essential component for building interactive image cropping
 | 1.5.x | [.NET 6](https://dotnet.microsoft.com/download/dotnet/6.0), [.NET 7](https://dotnet.microsoft.com/en-us/download/dotnet/7.0), [.NET 8](https://dotnet.microsoft.com/en-us/download/dotnet/8.0), [.NET 9](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 10](https://dotnet.microsoft.com/en-us/download/dotnet/10.0) | :heavy_check_mark: |
 
 - Supported .NET 10.0, .NET 9.0, .NET 8.0, .NET 7.0, .NET 6.0 versions for these web platforms:
+  - Blazor Web App
   - Blazor WebAssembly
   - Blazor Server
   - Blazor Server Hybrid with MVC

README.md

@@ -18,7 +18,7 @@
 [![NuGet Downloads](https://img.shields.io/nuget/dt/Cropper.Blazor?logo=nuget&label=nuget%20downloads&color=ff5c9b)](https://www.nuget.org/packages/Cropper.Blazor)
 [![NuGet Version](https://img.shields.io/nuget/v/Cropper.Blazor?logo=nuget&label=nuget%20version&color=009DEA)](https://www.nuget.org/packages/Cropper.Blazor)
 
-The most powerful image cropping tool for Blazor WebAssembly / Server, Hybrid with MAUI, MVC and
+The most powerful image cropping tool for Blazor Web App / WebAssembly / Server, Hybrid with MAUI, MVC and
 other frameworks.
 
 Cropper.Blazor is an essential component for building interactive image cropping and manipulation features in Blazor web applications. This versatile Blazor library empowers developers to integrate intuitive image cropping functionality directly into their Blazor projects, offering users a seamless and responsive image editing experience.
@@ -36,6 +36,7 @@ Cropper.Blazor is an essential component for building interactive image cropping
 | 1.5.x | [.NET 6](https://dotnet.microsoft.com/download/dotnet/6.0), [.NET 7](https://dotnet.microsoft.com/en-us/download/dotnet/7.0), [.NET 8](https://dotnet.microsoft.com/en-us/download/dotnet/8.0), [.NET 9](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 10](https://dotnet.microsoft.com/en-us/download/dotnet/10.0) | :heavy_check_mark: |
 
 - Supported .NET 10.0, .NET 9.0, .NET 8.0, .NET 7.0, .NET 6.0 versions for these web platforms:
+  - Blazor Web App
   - Blazor WebAssembly
   - Blazor Server
   - Blazor Server Hybrid with MVC

examples/Cropper.Blazor.MAUI.Net9/Cropper.Blazor.MAUI.Net9.csproj

@@ -60,8 +60,8 @@
 	<ItemGroup>
 		<PackageReference Include="Microsoft.Maui.Controls" Version="9.0.120" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="9.0.120" />
-		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="9.0.11" />
-		<PackageReference Include="MudBlazor" Version="8.14.0" />
+		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="9.0.12" />
+		<PackageReference Include="MudBlazor" Version="8.15.0" />
 	</ItemGroup>
 
 	<ItemGroup>

examples/Cropper.Blazor.Server.Net8/Cropper.Blazor.Server.Net8.csproj

@@ -7,7 +7,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="MudBlazor" Version="8.14.0" />
+    <PackageReference Include="MudBlazor" Version="8.15.0" />
   </ItemGroup>
 
 	<ItemGroup>