nsbp-cli 0.2.46 → 0.2.47

package/README.md

@@ -147,7 +147,7 @@ node ./bin/nsbp.js --help  # Test CLI locally
 
 - **Package Name**: `nsbp-cli`
 - **Bin Command**: `nsbp` (install globally and run `nsbp --help`)
-- **Version**: `0.2.46`
+- **Version**: `0.2.47`
 - **Dependencies**: chalk, commander, fs-extra, inquirer
 - **Package Manager**: Uses pnpm (also compatible with npm)
 - **Node Version**: >=16.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsbp-cli",
-  "version": "0.2.46",
+  "version": "0.2.47",
   "description": "CLI tool for creating NSBP (Node React SSR by Webpack) projects",
   "main": "index.js",
   "homepage": "https://nsbp.erishen.cn/",

package/templates/basic/.husky/commit-msg

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 # Validate commit message format
 commit_regex='^(feat|fix|docs|style|refactor|test|chore|build|ci|perf|revert|BREAKING CHANGE)(\(.+\))?: .{1,50}'
 

package/templates/basic/.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged

package/templates/basic/.husky/pre-push

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 pnpm run lint

package/templates/basic/package.json

@@ -65,13 +65,13 @@
     "@babel/preset-react": "^7.24.0",
     "@babel/preset-typescript": "^7.25.0",
     "@eslint/js": "^9.39.2",
-    "@jest/globals": "^30.2.0",
+    "@jest/globals": "^30.0.5",
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/webpack-plugin": "^5.15.0",
     "@playwright/test": "^1.44.0",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/express": "^5.0.6",
     "@types/jest": "^30.0.0",
     "@types/loadable__component": "^5.13.3",
@@ -81,7 +81,6 @@
     "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@types/react-helmet": "^6.1.10",
-    "@types/react-router-dom": "^5.3.3",
     "@types/serialize-javascript": "^5.0.3",
     "@types/styled-components": "^5.1.36",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
@@ -102,8 +101,8 @@
     "globals": "^17.0.0",
     "html-webpack-plugin": "^5.6.0",
     "husky": "^9.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^30.0.5",
+    "jest-environment-jsdom": "^30.0.5",
     "less": "^4.2.0",
     "less-loader": "^12.0.0",
     "lint-staged": "^15.0.0",
@@ -118,9 +117,9 @@
     "sass-loader": "^16.0.0",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.0",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.4.6",
     "ts-loader": "^9.5.0",
-    "typescript": "^5.0.0",
+    "typescript": "^5.8.3",
     "typescript-loadable-components-plugin": "^1.0.2",
     "webpack": "^5.96.0",
     "webpack-cli": "^6.0.1",

package/templates/basic/src/containers/Login.tsx

@@ -8,7 +8,7 @@ import '../css/test2.sass'
 import '../css/test3.scss'
 import { Container } from '@styled/test'
 
-const Login = ({ query }: any) => {
+const Login = ({ query }: { query?: Record<string, string> }) => {
   return (
     <Fragment>
       <Helmet>

package/templates/basic/src/containers/Photo.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useState, useEffect, useRef } from 'react'
+import React, { Fragment, useState, useEffect, useRef, useMemo } from 'react'
 import { connect } from 'react-redux'
 import { Link, useLocation } from 'react-router-dom'
 import Header from '@components/Header'
@@ -7,29 +7,44 @@ import { Helmet } from 'react-helmet'
 import { Container, Row } from '@styled/photo'
 import { motion } from 'framer-motion'
 import { isSEO, getLocationParams, usePreserveNSBP } from '@/utils'
-import { useCurrentFlag } from '@utils/clientConfig'
 import _ from 'lodash'
 import { loadDataForContainer } from '@services/photo'
 
 const springSettings = { type: 'spring' as const, stiffness: 170, damping: 26 }
 const NEXT = 'show-next'
 
-const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
+interface QueryParams {
+  from?: string
+  nsbp?: string | number
+}
+
+interface PhotoProps {
+  query: QueryParams
+  data: [number, number, string][]
+  menu: Array<{ name: string; cover?: string; count?: number }>
+  getPhotoMenu: (dic: string) => void
+}
+
+const Photo = ({ query, data, menu, getPhotoMenu }: PhotoProps) => {
   const location = useLocation()
   let { from } = query
   const { withNSBP } = usePreserveNSBP()
-  const photos = Array.isArray(data) ? data : []
+  // 使用 useMemo 缓存 photos，避免每次渲染都创建新数组
+  const photos = useMemo(() => (Array.isArray(data) ? data : []), [data])
   const [currPhoto, setCurrPhoto] = useState(0)
   // 使用 ref 来跟踪初始的 dic 值，用于区分首次加载和分类切换
   const initialDicRef = useRef<string | null>(null)
 
-  const [currPhotoData, setCurrPhotoData] = useState(photos[0] || [0, 0, ''])
+  const [currPhotoData, setCurrPhotoData] = useState<[number, number, string]>(
+    photos[0] || [0, 0, '']
+  )
 
   const [currWidth, currHeight] = currPhotoData
 
-  const widths = photos.map(
-    ([origW, origH]: any) => (currHeight / origH) * origW
-  )
+  const widths = photos.map((photo) => {
+    const [origW, origH] = photo
+    return (currHeight / origH) * origW
+  })
 
   // 同步 currPhoto 和 currPhotoData
   useEffect(() => {
@@ -40,30 +55,33 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
 
   const leftStartCoords = widths
     .slice(0, currPhoto)
-    .reduce((sum: any, width: any) => sum - width, 0)
+    .reduce((sum: number, width: number) => sum - width, 0)
 
   // Calculate position for each photo
-  const photoPositions = photos.reduce(
-    (acc: any, [_origW, _origH]: any, i: any, _arr: any) => {
-      const prevLeft =
-        i === 0 ? leftStartCoords : acc[i - 1].left + acc[i - 1].width
-      acc.push({
-        left: prevLeft,
-        height: currHeight,
-        width: widths[i] || 0
-      })
-      return acc
-    },
-    []
-  )
+  interface PhotoPosition {
+    left: number
+    height: number
+    width: number
+  }
+
+  const photoPositions = photos.reduce<PhotoPosition[]>((acc, _item, i) => {
+    const prevLeft =
+      i === 0 ? leftStartCoords : acc[i - 1].left + acc[i - 1].width
+    acc.push({
+      left: prevLeft,
+      height: currHeight,
+      width: widths[i] || 0
+    })
+    return acc
+  }, [])
 
   // console.log('photoPositions', photoPositions)
 
-  const handleChange = ({ target: { value } }: any) => {
-    setCurrPhoto(value)
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCurrPhoto(Number(e.target.value))
   }
 
-  const clickHandler = (btn: any) => {
+  const clickHandler = (btn: string) => {
     let photoIndex = btn === NEXT ? currPhoto + 1 : currPhoto - 1
 
     photoIndex = photoIndex >= 0 ? photoIndex : photos.length - 1
@@ -101,6 +119,7 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
 
     // 重置到第一张
     setCurrPhoto(0)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location?.search, from])
 
   return (
@@ -114,7 +133,7 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
       <Layout query={query}>
         <Container>
           <Row>
-            {_.map(menu, (item: any, index: number) => {
+            {_.map(menu, (item: { name: string }, index: number) => {
               return (
                 <Link
                   key={`menu${index}`}
@@ -143,7 +162,7 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
               animate={{ height: currHeight, width: currWidth }}
               transition={springSettings}
             >
-              {photoPositions.map((pos: any, i: any) => (
+              {photoPositions.map((pos, i) => (
                 <motion.img
                   key={i}
                   className="demo4-photo"
@@ -175,7 +194,15 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
   )
 }
 
-const mapStateToProps = (state: any) => {
+interface RootState {
+  query: QueryParams
+  photo: {
+    menu: Array<{ name: string; cover?: string; count?: number }>
+    data: [number, number, string][]
+  }
+}
+
+const mapStateToProps = (state: RootState) => {
   return {
     query: state?.query,
     menu: state?.photo?.menu,
@@ -183,10 +210,8 @@ const mapStateToProps = (state: any) => {
   }
 }
 
-const mapDispatchToProps = (dispatch: any) => ({
-  getPhotoMenu: (dic: any) => {
-    dispatch(loadDataForContainer(null, dic))
-  }
-})
+const mapDispatchToProps = {
+  getPhotoMenu: (dic: string) => loadDataForContainer(null, dic)
+}
 
 export default connect(mapStateToProps, mapDispatchToProps)(Photo)

package/templates/basic/src/externals/window.d.ts

@@ -2,10 +2,10 @@ interface ServerState {
   photo?: {
     data?: [number, number, string][]
     menu?:
-      | Record<string, any>
+      | Record<string, unknown>
       | Array<{ name: string; cover?: string; count?: number }>
   }
-  query?: Record<string, any>
+  query?: Record<string, unknown>
 }
 
 declare interface Window {

package/templates/basic/src/reducers/home.ts

@@ -1,6 +1,11 @@
 import { GITHUB_ZEITNEXT_GET } from '@store/constants'
 
-export const homeReducer = (state = { data: {} }, action: any) => {
+interface HomeAction {
+  type: string
+  data?: unknown
+}
+
+export const homeReducer = (state = { data: {} }, action: HomeAction) => {
   const { type, data } = action
 
   switch (type) {

package/templates/basic/src/reducers/index.ts

@@ -2,7 +2,12 @@ import { homeReducer } from './home'
 import { photoReducer } from './photo'
 import { REQUEST_QUERY } from '@store/constants'
 
-const queryReducer = (state = {}, action: any) => {
+interface QueryAction {
+  type: string
+  query?: Record<string, unknown>
+}
+
+const queryReducer = (state = {}, action: QueryAction) => {
   const { type, query } = action
 
   switch (type) {

package/templates/basic/src/reducers/photo.ts

@@ -3,13 +3,19 @@ import { GET_PHOTO_MENU, GET_PHOTO_WIDTH_HEIGHT } from '@store/constants'
 interface PhotoState {
   data: [number, number, string][]
   menu:
-    | Record<string, any>
+    | Record<string, unknown>
     | Array<{ name: string; cover?: string; count?: number }>
 }
 
+interface PhotoAction {
+  type: string
+  data?: [number, number, string][]
+  menu?: PhotoState['menu']
+}
+
 export const photoReducer = (
   state: PhotoState = { data: [], menu: {} },
-  action: any
+  action: PhotoAction
 ) => {
   const { type, data, menu } = action
 

package/templates/basic/src/server/photo.ts

@@ -62,7 +62,16 @@ const getFileMenu = (
   return result
 }
 
-export const getPhotoWH = (req: any, res: any) => {
+interface Request {
+  query: { dic?: string }
+}
+
+interface Response {
+  status: (code: number) => Response
+  json: (data: unknown) => void
+}
+
+export const getPhotoWH = (req: Request, res: Response) => {
   try {
     const dic = req.query.dic || ''
     const photosDicPath = getPhotosDicPath()
@@ -72,7 +81,7 @@ export const getPhotoWH = (req: any, res: any) => {
       return res.status(400).json({ error: 'Invalid directory name' })
     }
 
-    const fileList: any = []
+    const fileList: string[] = []
     let photoPath = photosDicPath
     if (dic) {
       photoPath = path.join(photosDicPath, dic)
@@ -108,25 +117,28 @@ export const getPhotoWH = (req: any, res: any) => {
 
     getFileList(photoPath, fileList)
 
-    const whArr: any = []
-    fileList.forEach((item: any, index: number) => {
+    const whArr: [number, number, string][] = []
+    fileList.forEach((item: string, index: number) => {
       const data = fs.readFileSync(item)
       let fileName = path.relative(photosDicPath, fileList[index])
-      const { width, height }: any = probe.sync(data)
+      const result = probe.sync(data)
+      const width = result?.width ?? 0
+      const height = result?.height ?? 0
       whArr.push([width, height, fileName])
     })
 
     // 按前端期望的格式包装
     res.json({ data: whArr })
-  } catch (err: any) {
-    console.error('getPhotoWH error:', err)
+  } catch (err) {
+    const error = err as Error
+    console.error('getPhotoWH error:', error)
     res
       .status(500)
-      .json({ error: 'Internal Server Error', details: err.message })
+      .json({ error: 'Internal Server Error', details: error.message })
   }
 }
 
-export const getPhotoMenu = (_req: any, res: any) => {
+export const getPhotoMenu = (_req: Request, res: Response) => {
   try {
     const photosDicPath = getPhotosDicPath()
 
@@ -134,10 +146,11 @@ export const getPhotoMenu = (_req: any, res: any) => {
 
     // 按前端期望的格式包装
     res.json({ data: fileMenu })
-  } catch (err: any) {
-    console.error('getPhotoMenu error:', err)
+  } catch (err) {
+    const error = err as Error
+    console.error('getPhotoMenu error:', error)
     res
       .status(500)
-      .json({ error: 'Internal Server Error', details: err.message })
+      .json({ error: 'Internal Server Error', details: error.message })
   }
 }

package/templates/basic/src/server/utils.tsx

@@ -13,10 +13,25 @@ import Theme from '@components/Theme'
 import path from 'path'
 import { ChunkExtractor } from '@loadable/server'
 
-export const render = (req: any, res: any) => {
+interface Request {
+  path: string
+  query: Record<string, string | undefined>
+}
+
+interface Response {
+  send: (html: string) => void
+  status: (code: number) => { send: (msg: string) => void }
+}
+
+export const render = (req: Request, res: Response) => {
   const store = getStore()
   const { path: reqPath, query } = req
-  const matchRoutes: any = []
+  const matchRoutes: {
+    loadData?: (
+      resolve: (data?: unknown) => void,
+      query: Request['query']
+    ) => unknown
+  }[] = []
   const promises = []
 
   let { nsbp } = query
@@ -29,13 +44,13 @@ export const render = (req: any, res: any) => {
     matchPath(reqPath, route.path) ? matchRoutes.push(route) : ''
   })
 
-  matchRoutes.forEach((item: any) => {
+  matchRoutes.forEach((item) => {
     if (item?.loadData) {
       const promise = new Promise((resolve, reject) => {
         try {
           // 将 query 参数传递给 loadData，确保能正确预取数据
           store.dispatch(item?.loadData(resolve, query))
-        } catch (e) {
+        } catch {
           reject()
         }
       })
@@ -44,8 +59,10 @@ export const render = (req: any, res: any) => {
     }
   })
 
-  const queryDispatch = (callback: any) => {
-    return (dispatch: any) => {
+  const queryDispatch = (callback: (() => void) | null) => {
+    return (
+      dispatch: (action: { type: string; query: Request['query'] }) => void
+    ) => {
       // 直接同步执行，避免 setTimeout 导致的竞态条件
       dispatch({ type: REQUEST_QUERY, query })
       callback && callback()
@@ -54,8 +71,8 @@ export const render = (req: any, res: any) => {
 
   const queryPromise = new Promise((resolve, reject) => {
     try {
-      store.dispatch(queryDispatch(resolve))
-    } catch (e) {
+      store.dispatch(queryDispatch(() => resolve()))
+    } catch {
       reject()
     }
   })
@@ -68,7 +85,7 @@ export const render = (req: any, res: any) => {
       const sheet = new ServerStyleSheet()
       const serverState = store.getState()
 
-      const helmet: any = Helmet.renderStatic()
+      const helmet = Helmet.renderStatic()
 
       const webStats = path.resolve(__dirname, '../public/loadable-stats.json')
 
@@ -138,14 +155,14 @@ export const render = (req: any, res: any) => {
           `
 
         res.send(html)
-      } catch (e: any) {
-        console.error('SSR rendering error:', e)
+      } catch (e: Error) {
+        console.error('SSR rendering error:', e.message)
         sheet.seal()
         res.status(500).send('Internal Server Error')
       }
     })
-    .catch((e: any) => {
-      console.error('Data loading error:', e)
+    .catch((e: Error) => {
+      console.error('Data loading error:', e.message)
       res.status(500).send('Data loading failed')
     })
 }

package/templates/basic/src/services/home.ts

@@ -1,11 +1,17 @@
 import { doGet } from '@utils/fetch'
 import { GET_PHOTO_MENU } from '@store/constants'
+import type { Dispatch } from 'redux'
+import type { AxiosResponse } from 'axios'
 
-export const loadData = (resolve: any = null) => {
-  return (dispatch: any) => {
+interface PhotoMenuResponse {
+  data?: unknown[]
+}
+
+export const loadData = (resolve: ((data?: unknown) => void) | null = null) => {
+  return (dispatch: Dispatch) => {
     // 预取图片菜单数据
     doGet('/getPhotoMenu')
-      .then((res: any) => {
+      .then((res: AxiosResponse<PhotoMenuResponse>) => {
         // axios 响应结构: { data, status, statusText, headers, config, request }
         if (res.status >= 200 && res.status < 300) {
           // 请求成功，data 已经是解析后的 JSON 对象
@@ -18,7 +24,7 @@ export const loadData = (resolve: any = null) => {
           throw new Error(`Status ${res.status}`)
         }
       })
-      .catch((err: any) => {
+      .catch((err: Error) => {
         console.error('Failed to preload photos:', err)
         // 预取失败但不影响主流程
         resolve && resolve()

package/templates/basic/src/services/photo.ts

@@ -1,14 +1,26 @@
 import { doGet } from '@utils/fetch'
 import { GET_PHOTO_MENU, GET_PHOTO_WIDTH_HEIGHT } from '@store/constants'
 
-const getPhotoWH = (dispatch: any, callback: any, dic = '') => {
+type DispatchFunction = (action: {
+  type: string
+  data?: unknown
+  menu?: unknown
+}) => void
+
+type CallbackFunction = (data?: unknown) => void
+
+const getPhotoWH = (
+  dispatch: DispatchFunction,
+  callback: CallbackFunction,
+  dic = ''
+) => {
   let action = 'getPhotoWH'
   if (dic) {
     action += `?dic=${dic}`
   }
 
   doGet(action)
-    .then((res: any) => {
+    .then((res: { data?: { data?: unknown } }) => {
       // console.log('getPhotoWH_res', res)
       // axios 响应格式是 { data: { data: [...] }, status: ... }，需要取 res.data.data
       dispatch({
@@ -17,14 +29,17 @@ const getPhotoWH = (dispatch: any, callback: any, dic = '') => {
       })
       callback && callback()
     })
-    .catch((_e: any) => {
+    .catch(() => {
       callback && callback()
     })
 }
 
-const getPhotoMenu = (dispatch: any, callback: any) => {
+const getPhotoMenu = (
+  dispatch: DispatchFunction,
+  callback: CallbackFunction
+) => {
   doGet('getPhotoMenu')
-    .then((res: any) => {
+    .then((res: { data?: { data?: unknown } }) => {
       // console.log('getPhotoMenu_res', res)
       // axios 响应格式是 { data: { data: [...] }, status: ... }，需要取 res.data.data
       const { data } = res?.data || {}
@@ -35,22 +50,28 @@ const getPhotoMenu = (dispatch: any, callback: any) => {
 
       callback && callback(data)
     })
-    .catch((_e: any) => {
+    .catch(() => {
       callback && callback()
     })
 }
 
-const getData = (callback: any, dic: any) => {
-  return (dispatch: any) => {
+interface MenuItem {
+  name: string
+  cover?: string
+}
+
+const getData = (callback: CallbackFunction, dic: string) => {
+  return (dispatch: DispatchFunction) => {
     if (dic) {
       getPhotoMenu(dispatch, () => {
         getPhotoWH(dispatch, callback, dic)
       })
     } else {
-      getPhotoMenu(dispatch, (data: any) => {
-        if (data && data.length > 0) {
+      getPhotoMenu(dispatch, (data) => {
+        const menuData = data as MenuItem[] | undefined
+        if (menuData && menuData.length > 0) {
           // data[0] 是对象 {name, cover}，需要取 name
-          getPhotoWH(dispatch, callback, data[0].name)
+          getPhotoWH(dispatch, callback, menuData[0].name)
         }
       })
     }
@@ -58,13 +79,19 @@ const getData = (callback: any, dic: any) => {
 }
 
 // 用于路由预取数据的 loadData 函数
-export const loadData = (resolve: any = null, query: any = {}) => {
+export const loadData = (
+  resolve: CallbackFunction | null = null,
+  query: { dic?: string } = {}
+) => {
   // 从 URL 查询参数中获取 dic
   const { dic } = query
   return getData(resolve, dic || '')
 }
 
 // 用于容器内部调用的 loadData 函数（保持向后兼容）
-export const loadDataForContainer = (resolve: any = null, dic = '') => {
+export const loadDataForContainer = (
+  resolve: CallbackFunction | null = null,
+  dic = ''
+) => {
   return getData(resolve, dic)
 }

package/templates/basic/src/styled/common.ts

@@ -1,4 +1,4 @@
-import styled, { createGlobalStyle } from 'styled-components'
+import { createGlobalStyle } from 'styled-components'
 
 export const GlobalStyle = createGlobalStyle`
   html,body,#__next {
@@ -7,7 +7,7 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   body {
-    background-color: ${(props: any) => (props.whiteColor ? 'white' : 'black')};
+    background-color: ${(props: { whiteColor?: boolean }) => (props.whiteColor ? 'white' : 'black')};
     font-family: Helvetica;
     margin: 0;
   }

package/templates/basic/src/utils/fetch.ts

@@ -2,7 +2,7 @@ import axios from 'axios'
 
 let prefix = 'http://localhost:3001'
 
-export const doGet = (action: any) => {
+export const doGet = (action: string) => {
   return new Promise((resolve, reject) => {
     if (typeof window !== 'undefined') {
       prefix = window.location.origin