refactor: scripts

.gitignore

@@ -1,7 +1,10 @@
 node_modules/**/*
 .vs/**/*
+**/.vs
 src/AntDesign.Components/wwwroot/**/*
 src/AntDesign.Components/CodeEditor/obj/**/*
 src/AntDesign.Components/CodeEditor/bin/**/*
 src/**/dist/*
 src/**/wwwroot/src/*
+dist/**/*
+src/AntDesign.Components/bundle/**/*

package.json

@@ -5,21 +5,22 @@
   "main": "exampleJsInterop.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "generate:themes": "node scripts/generate-themes.js",
-    "generate:js": "node scripts/generate-js.js",
-    "generate": "npm run generate:themes && npm run generate:js",
-    "build-dev:css": "npm run generate:themes && vite build --config vite.config.build.css.ts --mode development",
-    "build-dev:js": "npm run generate:js && vite build --config vite.config.build.js.ts --mode development",
-    "build:css": "npm run generate:themes && vite build --config vite.config.build.css.ts --mode production",
-    "build:js": "npm run generate:js && vite build --config vite.config.build.js.ts --mode production",
-    "build-dev": "npm run build-dev:js && npm run build-dev:css",
-    "build": "npm run generate && vite build --config vite.config.build.ts --mode production -- --theme=defaultt",
+
+    "generate:bundle:css": "node scripts/bundle-copy-css.js",
+    "generate:bundle:js": "node scripts/bundle-copy-js.js",
+    "generate:bundle": "npm run generate:bundle:css && npm run generate:bundle:js",
+    "build:css": "npm run generate:bundle:css && vite build --config vite.config.build.css.ts --mode development",
+    "build:js":  "npm run generate:bundle:js  && vite build --config vite.config.build.js.ts  --mode development",
+    "build-prod:css": "npm run generate:bundle:css && vite build --config vite.config.build.css.ts --mode production",
+    "build-prod:js":  "npm run generate:bundle:js  && vite build --config vite.config.build.js.ts --mode production",
+    "build": "npm run build:js && npm run build:css",
+    "build-prod": "npm run generate:bundle && vite build --config vite.config.build.ts --mode production",
 
-    "generate:proj:css": "node scripts/copy-component-css.js",
-    "generate:proj:js": "node scripts/copy-component-js.js",
+    "generate:proj:css": "node scripts/component-copy-css.js",
+    "generate:proj:js": "node scripts/component-copy-js.js",
     "generate:proj": "npm run generate:proj:css && npm run generate:proj:js",
-    "build-proj:css": "npm run generate:proj:css && node scripts/build-component-css.js --mode development",
-    "build-proj:js": "npm run generate:proj:js && node scripts/build-component-js.js --mode development",
+    "build-proj:css": "npm run generate:proj:css && node scripts/component-build-css.js --mode development",
+    "build-proj:js": "npm run generate:proj:js && node scripts/component-build-js.js --mode development",
     "build-proj": "npm run build-proj:css && npm run build-proj:js"
   },
   "author": "",

scripts/bundle-copy-css.js

@@ -0,0 +1,8 @@
+const { getAllComponentsName } = require("./common")
+const {  bundleCopyScss } = require('./component-copy-base')
+
+
+getAllComponentsName().forEach(function (componentName, index) {
+  console.log("bundle copy scss", componentName);
+  bundleCopyScss(componentName, theme="default")
+})

scripts/bundle-copy-js.js

@@ -0,0 +1,8 @@
+const { getAllComponentsName } = require("./common")
+const {  bundleCopyTs } = require('./component-copy-base')
+
+
+getAllComponentsName().forEach(function (componentName, index) {
+  console.log("bundle copy ts", componentName);
+  bundleCopyTs(componentName)
+})

scripts/common.js

@@ -2,25 +2,34 @@
 
 const path = require('path')
 const fs = require('fs')
+const config = require('../package.json')
 
 const projRootDirName = "AntDesign.Components"
 const projRootDir = `src/${projRootDirName}`;
-const ignoreDir = [ "_scripts", "_styles", "wwwroot"]
+const ignoreDir = ["_scripts", "_styles", "wwwroot", "bundle"]
 
-const getAllComponentsName = ()=>{
+const getAllComponentsName = () => {
   const files = fs.readdirSync(projRootDir);
-  return files.filter(componentName =>{
+  return files.filter(componentName => {
     let componentDir = path.join(projRootDir, componentName);
     if (!fs.statSync(componentDir).isDirectory()) {
       return false
     }
-    if(!componentName || ignoreDir.indexOf(componentName) > -1){
+    if (!componentName || ignoreDir.indexOf(componentName) > -1) {
       return false
     }
     return true
   })
 }
 
-console.log("getAllComponentsName", getAllComponentsName());
+// console.log("getAllComponentsName", getAllComponentsName());
 
-module.exports = { getAllComponentsName, projRootDirName, projRootDir  }
+const org = "ant-design-blazor"
+const banner = `/*!
+* ${config.name} v${config.version} ${new Date()}
+* (c) 2023 @${org}
+* Released under the MIT License.
+*/`;
+
+
+module.exports = {  getAllComponentsName, projRootDirName, projRootDir, banner }

scripts/build-component-base.js → scripts/component-build-base.js

@@ -1,21 +1,10 @@
 // build.js
 
-// import { build } from 'vite';
-const {build} = require('vite')
 const path = require('path')
-const fs = require('fs')
 const atImport = require('postcss-import')
-const config = require('../package.json')
 
-const { getAllComponentsName, projRootDir  }  = require("./common")
+const { getAllComponentsName, projRootDir, banner }  = require("./common")
 
-const libName = "ant-design-blazor"
-
-const banner = `/*!
-* ${config.name} v${config.version} ${new Date()}
-* (c) 2023 @${libName}
-* Released under the MIT License.
-*/`;
 
 // gene component info
 const getAllComponentsEntryFiles = (entryFileName)=>{
@@ -37,19 +26,16 @@ const getAllComponentsEntryFiles = (entryFileName)=>{
 const createScssConfig = (libItem) => {
   return {
     configFile: false,
-    resolve: {
-        alias: [{ find: '@', replacement: path.resolve(__dirname, `./${projRootDir}/wwwroot/src/scss`) }],
-    },
     css: {
-        preprocessorOptions: {
-            // scss: {
-            //     charset: false,
-            //     additionalData: `@import "@/variables.scss";`,
-            // },
-            postcss: {
-                plugins: [atImport({ path: path.join(__dirname, 'src`') })],
-            },
+      preprocessorOptions: {
+        scss: {
+          charset: false,
+          additionalData: `@import "./styles/variables.scss";`,
+        },
+        postcss: {
+          plugins: [atImport({ path: path.join(__dirname, "src`") })],
         },
+      },
     },
     plugins: [],
     build: {
@@ -80,9 +66,6 @@ const createScssConfig = (libItem) => {
 const createTsConfig = libItem => {
   return {
     configFile: false,
-      resolve: {
-        alias: [{ find: '@', replacement: path.resolve(__dirname, `./${projRootDir}/wwwroot/src/ts`) }],
-    },
     plugins: [],
     build: {
       emptyOutDir: false, 

scripts/build-component-css.js → scripts/component-build-css.js

@@ -1,6 +1,6 @@
 // import { build } from 'vite';
 const {build} = require('vite')
-const {getAllComponentsEntryFiles, createScssConfig} = require('./build-component-base')
+const {getAllComponentsEntryFiles, createScssConfig} = require('./component-build-base')
 
 
 const allEntryFiles = getAllComponentsEntryFiles("default.scss")
@@ -9,5 +9,6 @@ const allEntryFiles = getAllComponentsEntryFiles("default.scss")
 allEntryFiles.forEach(async (libItem) => {
   console.log("build ", libItem.entry);
   const viteConfig = createScssConfig(libItem);
+  console.log("build viteConfig", viteConfig);
   await build(viteConfig);
 });

scripts/build-component-js.js → scripts/component-build-js.js

@@ -1,6 +1,6 @@
 // import { build } from 'vite';
 const {build} = require('vite')
-const {getAllComponentsEntryFiles, createTsConfig} = require('./build-component-base')
+const {getAllComponentsEntryFiles, createTsConfig} = require('./component-build-base')
 
 
 const allEntryFiles = getAllComponentsEntryFiles("index.ts")

scripts/copy-component-base.js → scripts/component-copy-base.js

@@ -2,47 +2,58 @@ const path = require('path')
 const fs = require('fs-extra')
 const glob = require('glob')
 
-const { getAllComponentsName, projRootDir  }  = require("./common")
+const { getAllComponentsName, projRootDir } = require("./common")
 
 
-
-const copyOneComponentTs = (componentName) =>{
-  copyOneComponent(componentName, "_scripts", "ts");
+const bundleCopyTs = (componentName) => {
+  const outputBaseDir = path.join(projRootDir, "bundle/src");
+  copyOneComponent(componentName, "_scripts", outputBaseDir, "ts");
 }
 
-const copyOneComponentScss = (componentName, theme="default") =>{
-  copyOneComponent(componentName, "_styles", "scss");
+const bundleCopyScss = (componentName, theme = "default") => {
+  const outputBaseDir = path.join(projRootDir, "bundle/src");
+  copyOneComponent(componentName, "_styles", outputBaseDir, "scss", theme);
 }
 
-const copyOneComponent = (componentName, commonDir, type, theme="default")=> {
-  const tasks = [];
+const componentCopyTs = (componentName) => {
+  const componentDir = path.join(projRootDir, componentName);
+  const outputBaseDir = `${componentDir}/wwwroot/src`;
+  copyOneComponent(componentName, "_scripts", outputBaseDir, "ts");
+}
 
+const componentCopyScss = (componentName, theme = "default") => {
   const componentDir = path.join(projRootDir, componentName);
   const outputBaseDir = `${componentDir}/wwwroot/src`;
 
+  copyOneComponent(componentName, "_styles", outputBaseDir, "scss", theme);
+}
+
+const copyOneComponent = (componentName, commonDir, outputBaseDir, type, theme = "default") => {
+  const tasks = [];
+
   // index.ts or default.scss file content
-  let tsFileStr = `import AntDesign from "./ts/main";\nimport * as common from "./ts/common";\n\n`
   let tsInterop = "AntDesign.common = common;\n";
-  let scssFileStr = `@import './scss/theme-default.scss';\n@import './scss/variables.scss';\n\n`
+  let tsFileStr = `import AntDesign from "./scripts/main";\nimport * as common from "./scripts/common";\n\n`
+  let scssFileStr = `@import './styles/theme-default.scss';\n@import './styles/variables.scss';\n\n`
 
   // copy common scss and ts
   copyCommonToComponentWwwroot(tasks, outputBaseDir, commonDir, type)
 
 
   // copy all component scss and ts
   copyToComponentWwwroot(tasks, outputBaseDir, componentName, type)
-  if(type == "ts"){
+  if (type == "ts") {
     tsFileStr += `import * as ${componentName} from './ts/${componentName}';\n`;
     tsInterop += `AntDesign.interop.${componentName} = ${componentName};\n`;
-  }else if(type == "scss"){
+  } else if (type == "scss") {
     scssFileStr += `@import './scss/${componentName}/index.scss';\n`
   }
 
   // write index.ts or default scss
-  if(type == "ts"){
-    createIndexFile(tasks, outputBaseDir,  tsFileStr += `\n\n` + tsInterop, "index.ts")
-  }else if(type == "scss"){
-    createIndexFile(tasks, outputBaseDir,  scssFileStr, "default.scss")
+  if (type == "ts") {
+    createIndexFile(tasks, outputBaseDir, tsFileStr += `\n\n` + tsInterop, "index.ts")
+  } else if (type == "scss") {
+    createIndexFile(tasks, outputBaseDir, scssFileStr, "default.scss")
   }
 }
 
@@ -53,7 +64,7 @@ function copyToComponentWwwroot(tasks, outputBaseDir, componentName, type) {
   fs.ensureDirSync(componentDirAbs)
 
   // output dir
-  const outputDir = `${outputBaseDir}/${type}/${componentName}` 
+  const outputDir = `${outputBaseDir}/${type}/${componentName}`
   const outputDirAbs = path.resolve(__dirname, `../${outputDir}`);
   fs.ensureDirSync(outputDirAbs)
 
@@ -62,7 +73,7 @@ function copyToComponentWwwroot(tasks, outputBaseDir, componentName, type) {
   componentFiles.map((cs) => {
     // cs: code source, example: ${projRootDir}\{ComponentName}\index.ts
     // __dirname: /repo/scripts
-    if(cs.indexOf("wwwroot") > -1){
+    if (cs.indexOf("wwwroot") > -1) {
       return
     }
     const srcFile = path.resolve(__dirname, `../${cs}`);
@@ -75,9 +86,9 @@ function copyToComponentWwwroot(tasks, outputBaseDir, componentName, type) {
         srcFile,
         targetFile
       )
-      .catch((error) => {
-        console.log(error);
-      })
+        .catch((error) => {
+          console.log(error);
+        })
     )
 
     if (!fileName.endsWith("index.ts") || !fileName.endsWith("index.scss")) {
@@ -88,17 +99,25 @@ function copyToComponentWwwroot(tasks, outputBaseDir, componentName, type) {
 
 
 function copyCommonToComponentWwwroot(tasks, outputDir, dirName, type) {
+  let commonDir = "";
+  if (type.toLowerCase() == "ts") {
+    commonDir = "scripts"
+  } else if (type.toLowerCase() == "scss") {
+    commonDir = "styles"
+  } else {
+    return
+  }
   // 将 _scripts 文件夹下的文件拷贝到 src
   const commonScriptDir = path.resolve(__dirname, `../${projRootDir}/${dirName}`);
   if (fs.existsSync(commonScriptDir)) {
     tasks.push(
       fs.copy(
         commonScriptDir,
-        path.resolve(__dirname, `../${outputDir}/${type}`)
+        path.resolve(__dirname, `../${outputDir}/${commonDir}`)
       )
-      .catch((error) => {
-        console.log(error);
-      })
+        .catch((error) => {
+          console.log(error);
+        })
     )
   }
 }
@@ -118,4 +137,10 @@ function createIndexFile(tasks, outputDir, fileContent, fileNameWithExt) {
 
 
 
-module.exports = { copyOneComponentTs, copyOneComponentScss, copyOneComponent }
+module.exports = {
+  bundleCopyTs,
+  bundleCopyScss,
+  componentCopyTs,
+  componentCopyScss,
+  copyOneComponent
+}

scripts/copy-component-css.js → scripts/component-copy-css.js

@@ -1,8 +1,8 @@
 const { getAllComponentsName }  = require("./common")
-const {copyOneComponentScss} = require('./copy-component-base')
+const {componentCopyScss} = require('./component-copy-base')
 
 
 getAllComponentsName().forEach(function (componentName, index) {
   console.log("copy scss", componentName);
-  copyOneComponentScss(componentName, theme="default")
+  componentCopyScss(componentName, theme="default")
 })

scripts/copy-component-js.js → scripts/component-copy-js.js

@@ -1,7 +1,7 @@
 const { getAllComponentsName }  = require("./common")
-const {copyOneComponentTs} = require('./copy-component-base')
+const {componentCopyTs} = require('./component-copy-base')
 
 getAllComponentsName().forEach(function (componentName, index) {
   console.log("copy scss", componentName);
-  copyOneComponentTs(componentName)
+  componentCopyTs(componentName)
 })