feat: make the NodeJS dependency to optional (#93)

* update AntDesign to 0.9.0 * add `use-less` parameter to allow the user to choose whether to use nodejs * add styles parameter * add Directory.Build.props * fix hosted index.html * add docs * translate the welcome pages
ant-design-blazor · Aug 22, 2021 · 08ab432 · 08ab432
1 parent 6321849
commit 08ab432
Show file tree

Hide file tree

Showing 24 changed files with 341 additions and 168 deletions.
diff --git a/.gitignore b/.gitignore
@@ -339,4 +339,5 @@ ASALocalRun/
 # BeatPulse healthcheck temp database
 healthchecksdb
 /package-lock.json
-/src/AntDesign.Pro/wwwroot/css/site.css
+/src/AntDesign.Pro/wwwroot/css/*.css
+/src/AntDesign.Pro/**/*.css
diff --git a/.template.config/template.json b/.template.config/template.json
@@ -18,7 +18,8 @@
         "full": {
             "type": "parameter",
             "dataType": "bool",
-            "defaultValue": "false"
+            "defaultValue": "false",
+            "description": "create all pages"
         },
         "host": {
             "type": "parameter",
@@ -39,19 +40,31 @@
                 }
             ]
         },
+        "styles": {
+            "type": "parameter",
+            "dataType": "choice",
+            "description": "Whether use NodeJS and Less to compile your custom themes.",
+            "defaultValue": "css",
+            "choices": [
+                {
+                    "choice": "css",
+                    "description": "Use CSS without NodeJS."
+                },
+                {
+                    "choice": "less",
+                    "description": "Use Less and NodeJS."
+                }
+            ]
+        },
+        "UseNodeJS": {
+          "type": "computed",
+          "value": "(styles == 'less')"
+        },
         "skipRestore": {
             "type": "parameter",
             "datatype": "bool",
             "description": "If specified, skips the automatic restore of the project on create.",
             "defaultValue": "false"
-        },
-        "pro-layout": {
-            "type": "generated",
-            "generator": "constant",
-            "parameters": {
-                "value": "AntDesign.ProLayout"
-            },
-            "replaces": "{pro-layout}"
         }
     },
     "primaryOutputs": [
@@ -68,7 +81,62 @@
                 {
                     "exclude": [
                         "AntDesign.Pro.csproj",
-                        "AntDesign.Pro.csproj.DotSettings"
+                        "AntDesign.Pro.csproj.DotSettings",
+                        "gulpfile.js"
+                    ]
+                },
+                {
+                    "condition": "(!UseNodeJS)",
+                    "exclude": [
+                        "**/*.less",
+                        "package.json"
+                    ]
+                },
+                {
+                    "condition": "(UseNodeJS)",
+                    "exclude": [
+                        "**/*.css"
+                    ]
+                },
+                {
+                    "condition": "(!full)",
+                    "exclude": [
+                        "Components/**/*",
+                        "Extensions/**/*",
+                        "Layouts/**/*",
+                        "Models/**/*",
+                        "Pages/**/*",
+                        "Services/**/*",
+                        "Utils/**/*",
+                        "wwwroot/data/*"
+                    ]
+                }
+            ]
+        },
+        {
+            "condition": "(host == 'hosted')",
+            "source": "./src/AntDesign.Pro",
+            "target": "./src/Client/",
+            "modifiers": [
+                {
+                    "exclude": [
+                        "AntDesign.Pro.csproj",
+                        "AntDesign.Pro.csproj.DotSettings",
+                        "gulpfile.js"
+                    ]
+                },
+                {
+                    "condition": "(!UseNodeJS)",
+                    "exclude": [
+                        "**/*.less",
+                        "gulpfile.js",
+                        "package.json"
+                    ]
+                },
+                {
+                    "condition": "(UseNodeJS)",
+                    "exclude": [
+                        "**/*.css"
                     ]
                 },
                 {
@@ -81,14 +149,29 @@
                         "Pages/**/*",
                         "Services/**/*",
                         "Utils/**/*",
-                        "wwwroot/**/*"
+                        "wwwroot/data/*"
                     ]
                 }
             ]
         },
         {
             "source": "./.template.config/templates/assets",
-            "target": "./"
+            "target": "./",
+            "modifiers":[
+                {
+                    "condition": "(!UseNodeJS)",
+                    "exclude": [
+                        "package.json",
+                        "Directory.Build.props"
+                    ]
+                },
+                {
+                    "condition": "(host == 'hosted')",
+                    "exclude": [
+                        "Directory.Build.props"
+                    ]
+                }
+            ]
         },
         {
             "condition": "(host == 'wasm')",
@@ -98,8 +181,21 @@
                 {
                     "condition": "(full)",
                     "exclude": [
-                        "Pages/Welcome.razor",
-                        "Pages/Welcome.razor.less"
+                        "Pages/**/*"
+                    ]
+                },
+                {
+                    "condition": "(!UseNodeJS)",
+                    "exclude": [
+                        "**/*.less",
+                        "package.json",
+                        "gulpfile.js"
+                    ]
+                },
+                {
+                    "condition": "(UseNodeJS)",
+                    "exclude": [
+                        "**/*.css"
                     ]
                 }
             ]
@@ -112,34 +208,21 @@
                 {
                     "condition": "(full)",
                     "exclude": [
-                        "Pages/Welcome.razor",
-                        "Pages/Welcome.razor.less"
+                       "Pages/**/*"
                     ]
-                }
-            ]
-        },
-        {
-            "condition": "(host == 'hosted')",
-            "source": "./src/AntDesign.Pro",
-            "target": "./src/Client/",
-            "modifiers": [
+                },
                 {
+                    "condition": "(!UseNodeJS)",
                     "exclude": [
-                        "AntDesign.Pro.csproj",
-                        "AntDesign.Pro.csproj.DotSettings"
+                        "**/*.less",
+                        "package.json",
+                        "gulpfile.js"
                     ]
                 },
                 {
-                    "condition": "(!full)",
+                    "condition": "(UseNodeJS)",
                     "exclude": [
-                        "Components/**/*",
-                        "Extensions/**/*",
-                        "Layouts/**/*",
-                        "Models/**/*",
-                        "Pages/**/*",
-                        "Services/**/*",
-                        "Utils/**/*",
-                        "wwwroot/**/*"
+                        "**/*.css"
                     ]
                 }
             ]
@@ -157,8 +240,21 @@
                 {
                     "condition": "(full)",
                     "exclude": [
-                        "Pages/Welcome.razor",
-                        "Pages/Welcome.razor.less"
+                       "Pages/**/*"
+                    ]
+                },
+                {
+                    "condition": "(!UseNodeJS)",
+                    "exclude": [
+                        "**/*.less",
+                        "package.json",
+                        "gulpfile.js"
+                    ]
+                },
+                {
+                    "condition": "(UseNodeJS)",
+                    "exclude": [
+                        "**/*.css"
                     ]
                 }
             ]
@@ -171,8 +267,21 @@
                 {
                     "condition": "(full)",
                     "exclude": [
-                        "src/Client/Pages/Welcome.razor",
-                        "src/Client/Pages/Welcome.razor.less"
+                        "src/Client/Pages/**/*"
+                    ]
+                },
+                {
+                    "condition": "(!UseNodeJS)",
+                    "exclude": [
+                        "**/*.less",
+                        "package.json",
+                        "gulpfile.js"
+                    ]
+                },
+                {
+                    "condition": "(UseNodeJS)",
+                    "exclude": [
+                        "**/*.css"
                     ]
                 }
             ]

diff --git a/.template.config/templates/assets/Directory.Build.props b/.template.config/templates/assets/Directory.Build.props
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Please keep this file and keep it in the same directory as package.json. 
+This ensures that the WorkingDirectory of the build command in AntDesign.Pro.Template.csproj is correctly located to the current directory.  -->
+<Project>
+  <PropertyGroup Label="BasePath">
+    <SolutionDir Condition="'$(SolutionDir)'==''">$(MSBuildThisFileDirectory)</SolutionDir>
+  </PropertyGroup>
+</Project>
diff --git a/.template.config/templates/hosted/Directory.Build.props b/.template.config/templates/hosted/Directory.Build.props
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Please keep this file and keep it in the same directory as package.json. 
+This ensures that the WorkingDirectory of the build command in AntDesign.Pro.Template.Client.csproj is correctly located to the current directory.  -->
+<Project>
+  <PropertyGroup Label="BasePath">
+    <SolutionDir Condition="'$(SolutionDir)'==''">$(MSBuildThisFileDirectory)</SolutionDir>
+  </PropertyGroup>
+</Project>
diff --git a/.template.config/templates/hosted/src/Client/AntDesign.Pro.Template.Client.csproj b/.template.config/templates/hosted/src/Client/AntDesign.Pro.Template.Client.csproj
@@ -13,10 +13,7 @@
     <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
   </ItemGroup>
 
-  <PropertyGroup Condition=" '$(SolutionDir)'==''">
-    <SolutionDir>../../</SolutionDir>
-  </PropertyGroup>
-
+  <!--#if (UseNodeJS) -->
   <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SolutionDir)node_modules') ">
     <!-- Ensure Node.js is installed -->
     <Exec Command="node --version" ContinueOnError="true">
@@ -35,4 +32,5 @@
     <Exec WorkingDirectory="$(SolutionDir)" Command="npm install" />
     <Exec WorkingDirectory="$(SolutionDir)" Command="npm run gulp:pro" />
   </Target>
+  <!--#endif -->
 </Project>
diff --git a/.template.config/templates/hosted/src/Client/Pages/Welcome.razor b/.template.config/templates/hosted/src/Client/Pages/Welcome.razor
@@ -1,32 +1,32 @@
 @page "/"
 
-<PageContainer Title="欢迎">
+<PageContainer Title="Welcome">
     <Card>
         <Alert
-            Message="AntDesign.Templates 已经发布到nuget，可以直接下载使用"
+            Message="AntDesign.Templates have been published to nuget, you can download and use them directly."
             Type="success"
-            ShowIcon
+            ShowIcon="true"
             Banner
             Style="margin: -12px; margin-bottom: 24px"/>
         <Text Strong>
             <a target="_blank" rel="noopener noreferrer" href="https://www.nuget.org/packages/AntDesign.Templates">
-                使用dotnet快速安装最新模板
+                Use .NET CLI to install the latest template quickly.
             </a>
         </Text>
         <pre class="pre"><code><Text Copyable> dotnet new --install AntDesign.Templates::0.1.0-*</Text></code></pre>
         <Text
             Strong
             Style="margin-bottom: 12px">
             <a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design-blazor/ant-design-pro-blazor">
-                创建hosted空项目
+                Create hosted empty project.
             </a>
         </Text>
         <pre class="pre"><code><Text Copyable> dotnet new antdesign --host=hosted</Text></code></pre>
         <Text
             Strong
             Style="margin-bottom: 12px">
             <a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design-blazor/ant-design-pro-blazor">
-                创建包含所有页面的hosted项目
+                Create a hosted project with all pages.
             </a>
         </Text>
         <pre class="pre"><code><Text Copyable> dotnet new antdesign --host=hosted --full</Text></code></pre>
@@ -36,6 +36,6 @@
         <a href="https://github.com/ant-design-blazor/ant-design-pro-blazor" target="_blank" rel="noopener noreferrer">
             ant-design-pro-blazor project
         </a>
-        。
+        .
     </p>
 </PageContainer>
diff --git a/.template.config/templates/hosted/src/Client/Pages/Welcome.razor.css b/.template.config/templates/hosted/src/Client/Pages/Welcome.razor.css
@@ -0,0 +1,7 @@
+.pre {
+  margin: 12px 0;
+  padding: 12px 20px;
+  background: #fff;
+  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
+    0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+}