nsbp-cli 0.2.25 → 0.2.27

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.25`
+- **Version**: `0.2.27`
 - **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.25",
+  "version": "0.2.27",
   "description": "CLI tool for creating NSBP (Node React SSR by Webpack) projects",
   "main": "index.js",
   "homepage": "https://nsbp.erishen.cn/",

package/templates/basic/config/webpack.base.js

@@ -17,7 +17,21 @@ module.exports = ({ mode, entry, server, init }) => {
     entry,
     devtool: 'source-map',
     resolve: {
-      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
+      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+      alias: {
+        '@': path.resolve(__dirname, '../src'),
+        '@components': path.resolve(__dirname, '../src/component'),
+        '@utils': path.resolve(__dirname, '../src/utils'),
+        '@services': path.resolve(__dirname, '../src/services'),
+        '@styled': path.resolve(__dirname, '../src/styled'),
+        '@store': path.resolve(__dirname, '../src/store'),
+        '@reducers': path.resolve(__dirname, '../src/reducers'),
+        '@containers': path.resolve(__dirname, '../src/containers'),
+        '@server': path.resolve(__dirname, '../src/server'),
+        '@client': path.resolve(__dirname, '../src/client'),
+        '@css': path.resolve(__dirname, '../src/css'),
+        '@externals': path.resolve(__dirname, '../src/externals')
+      }
     },
     module: {
       rules: [

package/templates/basic/gitignore

@@ -3,9 +3,6 @@ Thumbs.db
 
 # Dependencies
 node_modules
-package-lock.json
-yarn.lock
-pnpm-lock.yaml
 
 # Build outputs
 build

package/templates/basic/src/Routers.tsx

@@ -1,21 +1,21 @@
 import React from 'react'
-import { loadData as homeLoadData } from './services/home'
-import { loadData as photoLoadData } from './services/photo'
+import { loadData as homeLoadData } from '@services/home'
+import { loadData as photoLoadData } from '@services/photo'
 import loadable from "@loadable/component"
 
 const Loading = () => {
   return <div>Loading...</div>
 }
 
-const Home = loadable(() => import("./containers/Home"), {
+const Home = loadable(() => import("@containers/Home"), {
   fallback: <Loading />
 })
 
-const Login = loadable(() => import("./containers/Login"), {
+const Login = loadable(() => import("@containers/Login"), {
   fallback: <Loading />
 })
 
-const Photo = loadable(() => import("./containers/Photo"), {
+const Photo = loadable(() => import("@containers/Photo"), {
   fallback: <Loading />
 })
 

package/templates/basic/src/client/index.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import routers from '../Routers'
+import routers from '@/Routers'
 import { Provider } from 'react-redux'
-import getStore from '../store'
-import { isSEO } from '../utils'
-import Theme from '../component/Theme'
+import getStore from '@/store'
+import { isSEO } from '@/utils'
+import Theme from '@components/Theme'
 import { loadableReady } from '@loadable/component'
 
 const App = () => {
@@ -33,5 +33,5 @@ const App = () => {
 }
 
 loadableReady(() => {
-  const root = hydrateRoot(document.getElementById('root')!, <App />)
+  hydrateRoot(document.getElementById('root')!, <App />)
 })

package/templates/basic/src/component/Header.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link, useLocation } from 'react-router-dom'
-import { Container, LogoWrapper as Logo, Nav, NavLink, Brand } from '../styled/component/header'
+import { Container, LogoWrapper as Logo, Nav, NavLink, Brand } from '@styled/component/header'
 
 const Header = () => {
   const location = useLocation()

package/templates/basic/src/component/Layout.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Container } from '../styled/component/layout'
+import { Container } from '@styled/component/layout'
 import Loading from './Loading'
 
 const Layout = ({ children, query }: any) => {

package/templates/basic/src/component/Theme.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ThemeProvider } from 'styled-components'
-import { GlobalStyle, theme, theme2 } from '../styled/common'
+import { GlobalStyle, theme2 } from '@styled/common'
 
 const Theme = ({ children }: any) => {
   return (

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import Layout from '../component/Layout'
+import Layout from '@components/Layout'
 import { Helmet } from 'react-helmet'
 import {
   GlobalStyle,

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

@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react'
-import Header from '../component/Header'
-import Layout from '../component/Layout'
+import Header from '@components/Header'
+import Layout from '@components/Layout'
 import { Helmet } from 'react-helmet'
 import '../css/test.css'
 import '../css/test.less'
 import '../css/test2.sass'
 import '../css/test3.scss'
-import { Container } from '../styled/test'
+import { Container } from '@styled/test'
 
 const Login = ({ query }: any) => {
   return (

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

@@ -1,22 +1,22 @@
 import React, { Fragment, useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 import { Link, useLocation } from 'react-router-dom'
-import Header from '../component/Header'
-import Layout from '../component/Layout'
+import Header from '@components/Header'
+import Layout from '@components/Layout'
 import { Helmet } from 'react-helmet'
-import { Container, Row } from '../styled/photo'
+import { Container, Row } from '@styled/photo'
 import { motion } from 'framer-motion'
-import { isSEO, getLocationParams } from '../utils'
-import { useCurrentFlag } from '../utils/clientConfig'
+import { isSEO, getLocationParams } from '@/utils'
+import { useCurrentFlag } from '@utils/clientConfig'
 import _ from 'lodash'
-import { loadData } from '../services/photo'
+import { loadData } from '@services/photo'
 
-const springSettings = { type: "spring", stiffness: 170, damping: 26 }
+const springSettings = { type: "spring" as const, stiffness: 170, damping: 26 }
 const NEXT = 'show-next'
 
 const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
   const location = useLocation()
-  let { dic, from } = query
+  let { from } = query
   const photos = Array.isArray(data) ? data : []
   const [currPhoto, setCurrPhoto] = useState(0)
 
@@ -38,7 +38,7 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
     .reduce((sum:any, width:any) => sum - width, 0)
 
   // Calculate position for each photo
-  const photoPositions = photos.reduce((acc:any, [origW, origH]:any, i:any, arr:any) => {
+  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,

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

@@ -1,4 +1,4 @@
-import { GITHUB_ZEITNEXT_GET } from '../store/constants'
+import { GITHUB_ZEITNEXT_GET } from '@store/constants'
 
 export const homeReducer = (state = { data: {} }, action: any) => {
   const { type, data } = action

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

@@ -1,6 +1,6 @@
 import { homeReducer } from './home'
 import { photoReducer } from './photo'
-import { REQUEST_QUERY } from '../store/constants'
+import { REQUEST_QUERY } from '@store/constants'
 
 const queryReducer = (state = {}, action: any) => {
   const { type, query } = action

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

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

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

@@ -1,9 +1,9 @@
 import express from 'express'
 import helmet from 'helmet'
 import rateLimit from 'express-rate-limit'
-import { render } from './utils'
-import { getPhotoWH, getPhotoMenu } from './photo'
-import { useCurrentFlag, outPhotoDicPath } from '../utils/config'
+import { render } from '@server/utils'
+import { getPhotoWH, getPhotoMenu } from '@server/photo'
+import { useCurrentFlag, outPhotoDicPath } from '@utils/config'
 
 const app = express()
 

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

@@ -1,19 +1,15 @@
 import React from 'react'
 import { renderToString } from 'react-dom/server'
 import { StaticRouter, Route, matchPath } from 'react-router-dom'
-// @ts-ignore - Routes is available in react-router-dom v7 but not in types
 import { Routes } from 'react-router-dom'
-import routers from '../Routers'
-// @ts-ignore
+import routers from '@/Routers'
 import { Provider } from 'react-redux'
-// @ts-ignore
-import getStore from '../store'
+import getStore from '@store'
 import serialize from 'serialize-javascript'
-// @ts-ignore
-import { REQUEST_QUERY } from '../store/constants'
+import { REQUEST_QUERY } from '@store/constants'
 import { Helmet } from 'react-helmet'
 import { ServerStyleSheet } from 'styled-components'
-import Theme from '../component/Theme'
+import Theme from '@components/Theme'
 import path from 'path'
 import { ChunkExtractor } from '@loadable/server'
 

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

@@ -1,30 +1,5 @@
-import { doGet } from '../utils/fetch'
-import { GITHUB_ZEITNEXT_GET, GET_PHOTO_MENU } from '../store/constants'
-
-const getData = (callback: any) => {
-
-  return (dispatch: any) => {
-    doGet('https://api.apiopen.top/getJoke?page=1&count=2&type=video')
-      .then((res:any) => {
-        // console.log('res', res)
-        dispatch({
-          type: GITHUB_ZEITNEXT_GET,
-          data: res?.data
-        })
-
-        callback && callback()
-      })
-      .catch((e:any) => {
-        // console.log('e', e.response)
-        dispatch({
-          type: GITHUB_ZEITNEXT_GET,
-          data: e?.response?.data
-        })
-
-        callback && callback()
-      })
-  }
-}
+import { doGet } from '@utils/fetch'
+import { GET_PHOTO_MENU } from '@store/constants'
 
 export const loadData = (resolve: any = null) => {
   return (dispatch: any) => {

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

@@ -1,5 +1,5 @@
-import { doGet } from '../utils/fetch'
-import { GET_PHOTO_MENU, GET_PHOTO_WIDTH_HEIGHT } from '../store/constants'
+import { doGet } from '@utils/fetch'
+import { GET_PHOTO_MENU, GET_PHOTO_WIDTH_HEIGHT } from '@store/constants'
 
 
 const getPhotoWH = (dispatch: any, callback: any, dic = '') => {
@@ -18,7 +18,7 @@ const getPhotoWH = (dispatch: any, callback: any, dic = '') => {
         })
         callback && callback()
       })
-      .catch((e:any) => {
+      .catch((_e:any) => {
         callback && callback()
       })
 }
@@ -36,7 +36,7 @@ const getPhotoMenu = (dispatch:any, callback:any) => {
 
         callback && callback(data)
       })
-      .catch((e:any) => {
+      .catch((_e:any) => {
         callback && callback()
       })
 }

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

@@ -1,5 +1,5 @@
 import { configureStore, combineReducers } from '@reduxjs/toolkit'
-import reducers from '../reducers'
+import reducers from '@reducers'
 
 const combineReducer = combineReducers({ ...reducers })
 

package/templates/basic/tsconfig.json

@@ -13,7 +13,27 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "preserveConstEnums": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/component/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@services/*": ["./src/services/*"],
+      "@styled/*": ["./src/styled/*"],
+      "@store/*": ["./src/store/*"],
+      "@reducers/*": ["./src/reducers/*"],
+      "@containers/*": ["./src/containers/*"],
+      "@server/*": ["./src/server/*"],
+      "@client/*": ["./src/client/*"],
+      "@css/*": ["./src/css/*"],
+      "@externals/*": ["./src/externals/*"],
+      "@reducers": ["./src/reducers/index"],
+      "@store": ["./src/store/index"],
+      "@utils": ["./src/utils/index"],
+      "@client": ["./src/client/index"],
+      "@server": ["./src/server/index"]
+    }
   },
   "include":[
     "./src/**/*",