create-pnpm-cli 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-pnpm-cli",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "create pnpm cli",
   "type": "module",
   "main": "./lib/cli.cjs",

package/template/webpack-typescript-react/.env.development

@@ -0,0 +1 @@
+TEST='dev'

package/template/webpack-typescript-react/.env.production

@@ -0,0 +1 @@
+TEST='prod'

package/template/webpack-typescript-react/.eslintrc.js

@@ -0,0 +1,36 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:prettier/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  plugins: ['@typescript-eslint', 'react'],
+  rules: {
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'react/display-name': 'off',
+    'react/prop-types': 'off',
+  },
+}

package/template/webpack-typescript-react/babel.config.js

@@ -0,0 +1,38 @@
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+/** @type {import('@types/babel__core').TransformOptions} */
+module.exports = {
+  // 执行顺序由右往左
+  presets: [
+    [
+      '@babel/preset-react',
+      {
+        // react18可以自动导入react
+        runtime: 'automatic',
+        // 区分开发与生产
+        development: isDevelopment,
+      },
+    ],
+    [
+      '@babel/preset-env',
+      {
+        // TODO 启用将某些浏览器的bug转译为ES5，babel8之后会默认开启，记得改
+        bugfixes: true,
+        useBuiltIns: 'entry',
+        corejs: 3,
+      },
+    ],
+    [
+      '@babel/preset-typescript',
+      {
+        // 允许命名空间
+        allowNamespaces: true,
+        // 允许声明字段
+        allowDeclareFields: true,
+        // 优化枚举为对象
+        optimizeConstEnums: true,
+      },
+    ],
+  ],
+  plugins: [isDevelopment && 'react-refresh/babel'].filter(Boolean),
+}

package/template/webpack-typescript-react/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "micro-react",
+  "description": "",
+  "scripts": {
+    "lint": "eslint ./src/**/*.{ts,tsx}",
+    "dev": "cross-env NODE_ENV=development webpack serve",
+    "build": "cross-env NODE_ENV=production webpack",
+    "serve": "cross-env NODE_ENV=production webpack && npx serve ./dist"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "ahooks": "^3.7.10",
+    "high-order-ui": "^0.0.3",
+    "query-string": "^8.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
+    "viewerjs": "^1.11.6"
+  },
+  "devDependencies": {
+    "prettier": "^3.2.4",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "cross-env": "^7.0.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@types/eslint": "^8.56.2",
+    "@types/node": "^20.10.5",
+    "blurhash-webpack-plugin": "^0.0.5",
+    "html-webpack-plugin": "^5.6.0",
+    "react-refresh": "^0.14.0",
+    "style-loader": "^3.3.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "thread-loader": "^4.0.2",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "mini-css-extract-plugin": "^2.7.7",
+    "postcss": "^8.4.33",
+    "postcss-load-config": "^5.0.2",
+    "postcss-loader": "^8.0.0",
+    "postcss-preset-env": "^9.3.0",
+    "css-loader": "^6.9.1",
+    "cssnano": "^6.0.3",
+    "babel-loader": "^9.1.3",
+    "@types/babel__core": "^7.20.5",
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "tailwindcss": "^3.4.1",
+    "dotenv": "^16.3.2"
+  }
+}

package/template/webpack-typescript-react/postcss.config.js

@@ -0,0 +1,13 @@
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+/** @type {import('postcss-load-config').Config} */
+module.exports = {
+  plugins: [
+    // tailwindcss
+    require('tailwindcss'),
+    // 会自动添加polyfill和前缀，功能比autoprefix更全
+    require('postcss-preset-env'),
+    // 生产环境压缩css
+    !isDevelopment && require('cssnano'),
+  ].filter(Boolean),
+}

package/template/webpack-typescript-react/prettier.config.js

@@ -0,0 +1,8 @@
+/** @type {import("prettier").Config} */
+module.exports = {
+  trailingComma: 'all',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  plugins: ['@trivago/prettier-plugin-sort-imports'],
+}

package/template/webpack-typescript-react/scripts/data.js

@@ -0,0 +1,60 @@
+function main() {
+  const data = []
+  let imports = ''
+
+  const arr = [
+    '今天在公园看到了儿童嬉戏，笑声洒满阳光。',
+    '漫步在街头，感受了都市的繁华与忙碌。',
+    '走进书店，被一本历史书籍深深吸引。',
+    '在咖啡馆看到了一对恋人的甜蜜。',
+    '去了海边，感受到了大海的浩渺与深邃。',
+    '在山顶看到了日出，被其壮观所震撼。',
+    '在夜市品尝了各种美食，感受到了人间烟火。',
+    '在画廊欣赏了一幅油画，被其色彩所吸引。',
+    '在博物馆看到了古代的文物，感受到了历史的厚重。',
+    '在花店看到了各种鲜花，被其美丽所吸引。',
+    '在街头看到了一只流浪猫，感到了生活的不易。',
+    '在电影院看了一部电影，被其剧情所吸引。',
+    '在湖边看到了天鹅的优雅，感受到了大自然的美丽。',
+    '在公园看到了一位老人的孤独，感到了生活的苍凉。',
+    '在动物园看到了各种动物，被其独特性格所吸引。',
+    '在超市看到了各种商品，感受到了生活的丰富。',
+    '在街头看到了一位街头艺人的表演，被其才华所吸引。',
+    '在图书馆看到了各种书籍，感受到了知识的深邃。',
+    '在体育场看到了一场篮球比赛，被其激烈所吸引。',
+    '在公园看到了春天的繁花，感受到了生命的活力。',
+    '在音乐会听到了美妙的旋律，被其魅力所吸引。',
+    '在街头看到了忙碌的人们，感受到了生活的节奏。',
+    '在公园看到了秋天的落叶，感受到了季节的变迁。',
+    '在游乐园看到了孩子们的快乐，感受到了童真的美好。',
+    '在山顶看到了星空，被其浩瀚所震撼。',
+    '在海边看到了日落，被其美丽所吸引。',
+    '在森林中看到了鸟儿的飞翔，感受到了自由的意义。',
+    '在湖边看到了鸭子的嬉戏，感受到了生活的乐趣。',
+    '在街头看到了夜晚的霓虹，感受到了城市的繁华。',
+    '在公园看到了雪景，被其纯净所吸引。',
+    '在图书馆看到了学生的努力，感受到了知识的力量。',
+    '在咖啡馆看到了一位写作者的专注，被其才华所吸引。',
+    '在公园看到了一位画家的创作，感受到了艺术的魅力。',
+    '在街头看到了一位老人的微笑，感受到了生活的温暖。',
+    '在电影院看到了一部经典电影，被其深度所吸引。',
+    '在超市看到了一位母亲的辛劳，感受到了母爱的伟大。',
+    '在公园看到了一位跑步的人，感受到了健康的重要。',
+    '在街头看到了一位警察的坚守，感受到了责任的重量。',
+  ]
+
+  arr.forEach((v, i) => {
+    data.push({
+      _id: `${i + 1}`,
+      name: v,
+      imgs: [`img${i + 1}`],
+    })
+
+    imports += `import img${i + 1} from '../../public/img/img${i + 1}.jpg';`
+  })
+
+  console.log(data)
+  console.log(imports)
+}
+
+main()

package/template/webpack-typescript-react/src/config/data.ts

@@ -0,0 +1,197 @@
+import img1 from '../../public/img/img1.jpg'
+import img2 from '../../public/img/img2.jpg'
+import img3 from '../../public/img/img3.jpg'
+import img4 from '../../public/img/img4.jpg'
+import img5 from '../../public/img/img5.jpg'
+import img6 from '../../public/img/img6.jpg'
+import img7 from '../../public/img/img7.jpg'
+import img8 from '../../public/img/img8.jpg'
+import img9 from '../../public/img/img9.jpg'
+import img10 from '../../public/img/img10.jpg'
+import img11 from '../../public/img/img11.jpg'
+import img12 from '../../public/img/img12.jpg'
+import img13 from '../../public/img/img13.jpg'
+import img14 from '../../public/img/img14.jpg'
+import img15 from '../../public/img/img15.jpg'
+import img16 from '../../public/img/img16.jpg'
+import img17 from '../../public/img/img17.jpg'
+import img18 from '../../public/img/img18.jpg'
+import img19 from '../../public/img/img19.jpg'
+import img20 from '../../public/img/img20.jpg'
+import img21 from '../../public/img/img21.jpg'
+import img22 from '../../public/img/img22.jpg'
+import img23 from '../../public/img/img23.jpg'
+import img24 from '../../public/img/img24.jpg'
+import img25 from '../../public/img/img25.jpg'
+import img26 from '../../public/img/img26.jpg'
+import img27 from '../../public/img/img27.jpg'
+import img28 from '../../public/img/img28.jpg'
+import img29 from '../../public/img/img29.jpg'
+import img30 from '../../public/img/img30.jpg'
+import img31 from '../../public/img/img31.jpg'
+import img32 from '../../public/img/img32.jpg'
+import img33 from '../../public/img/img33.jpg'
+import img34 from '../../public/img/img34.jpg'
+import img35 from '../../public/img/img35.jpg'
+import img36 from '../../public/img/img36.jpg'
+import img37 from '../../public/img/img37.jpg'
+import img38 from '../../public/img/img38.jpg'
+
+export const dataConfig = [
+  {
+    _id: '1',
+    name: '今天在公园看到了儿童嬉戏，笑声洒满阳光。',
+    imgs: [img1],
+  },
+  { _id: '2', name: '漫步在街头，感受了都市的繁华与忙碌。', imgs: [img2] },
+  { _id: '3', name: '走进书店，被一本历史书籍深深吸引。', imgs: [img3] },
+  { _id: '4', name: '在咖啡馆看到了一对恋人的甜蜜。', imgs: [img4] },
+  { _id: '5', name: '去了海边，感受到了大海的浩渺与深邃。', imgs: [img5] },
+  { _id: '6', name: '在山顶看到了日出，被其壮观所震撼。', imgs: [img6] },
+  {
+    _id: '7',
+    name: '在夜市品尝了各种美食，感受到了人间烟火。',
+    imgs: [img7],
+  },
+  { _id: '8', name: '在画廊欣赏了一幅油画，被其色彩所吸引。', imgs: [img8] },
+  {
+    _id: '9',
+    name: '在博物馆看到了古代的文物，感受到了历史的厚重。',
+    imgs: [img9],
+  },
+  {
+    _id: '10',
+    name: '在花店看到了各种鲜花，被其美丽所吸引。',
+    imgs: [img10],
+  },
+  {
+    _id: '11',
+    name: '在街头看到了一只流浪猫，感到了生活的不易。',
+    imgs: [img11],
+  },
+  {
+    _id: '12',
+    name: '在电影院看了一部电影，被其剧情所吸引。',
+    imgs: [img12],
+  },
+  {
+    _id: '13',
+    name: '在湖边看到了天鹅的优雅，感受到了大自然的美丽。',
+    imgs: [img13],
+  },
+  {
+    _id: '14',
+    name: '在公园看到了一位老人的孤独，感到了生活的苍凉。',
+    imgs: [img14],
+  },
+  {
+    _id: '15',
+    name: '在动物园看到了各种动物，被其独特性格所吸引。',
+    imgs: [img15],
+  },
+  {
+    _id: '16',
+    name: '在超市看到了各种商品，感受到了生活的丰富。',
+    imgs: [img16],
+  },
+  {
+    _id: '17',
+    name: '在街头看到了一位街头艺人的表演，被其才华所吸引。',
+    imgs: [img17],
+  },
+  {
+    _id: '18',
+    name: '在图书馆看到了各种书籍，感受到了知识的深邃。',
+    imgs: [img18],
+  },
+  {
+    _id: '19',
+    name: '在体育场看到了一场篮球比赛，被其激烈所吸引。',
+    imgs: [img19],
+  },
+  {
+    _id: '20',
+    name: '在公园看到了春天的繁花，感受到了生命的活力。',
+    imgs: [img20],
+  },
+  {
+    _id: '21',
+    name: '在音乐会听到了美妙的旋律，被其魅力所吸引。',
+    imgs: [img21],
+  },
+  {
+    _id: '22',
+    name: '在街头看到了忙碌的人们，感受到了生活的节奏。',
+    imgs: [img22],
+  },
+  {
+    _id: '23',
+    name: '在公园看到了秋天的落叶，感受到了季节的变迁。',
+    imgs: [img23],
+  },
+  {
+    _id: '24',
+    name: '在游乐园看到了孩子们的快乐，感受到了童真的美好。',
+    imgs: [img24],
+  },
+  { _id: '25', name: '在山顶看到了星空，被其浩瀚所震撼。', imgs: [img25] },
+  { _id: '26', name: '在海边看到了日落，被其美丽所吸引。', imgs: [img26] },
+  {
+    _id: '27',
+    name: '在森林中看到了鸟儿的飞翔，感受到了自由的意义。',
+    imgs: [img27],
+  },
+  {
+    _id: '28',
+    name: '在湖边看到了鸭子的嬉戏，感受到了生活的乐趣。',
+    imgs: [img28],
+  },
+  {
+    _id: '29',
+    name: '在街头看到了夜晚的霓虹，感受到了城市的繁华。',
+    imgs: [img29],
+  },
+  { _id: '30', name: '在公园看到了雪景，被其纯净所吸引。', imgs: [img30] },
+  {
+    _id: '31',
+    name: '在图书馆看到了学生的努力，感受到了知识的力量。',
+    imgs: [img31],
+  },
+  {
+    _id: '32',
+    name: '在咖啡馆看到了一位写作者的专注，被其才华所吸引。',
+    imgs: [img32],
+  },
+  {
+    _id: '33',
+    name: '在公园看到了一位画家的创作，感受到了艺术的魅力。',
+    imgs: [img33],
+  },
+  {
+    _id: '34',
+    name: '在街头看到了一位老人的微笑，感受到了生活的温暖。',
+    imgs: [img34],
+  },
+  {
+    _id: '35',
+    name: '在电影院看到了一部经典电影，被其深度所吸引。',
+    imgs: [img35],
+  },
+  {
+    _id: '36',
+    name: '在超市看到了一位母亲的辛劳，感受到了母爱的伟大。',
+    imgs: [img36],
+  },
+  {
+    _id: '37',
+    name: '在公园看到了一位跑步的人，感受到了健康的重要。',
+    imgs: [img37],
+  },
+  {
+    _id: '38',
+    name: '在街头看到了一位警察的坚守，感受到了责任的重量。',
+    imgs: [img38],
+  },
+]
+
+export type DataType = (typeof dataConfig)[0]

package/template/webpack-typescript-react/src/config/index.ts

@@ -0,0 +1 @@
+export * from './data'

package/template/webpack-typescript-react/src/hooks/useImagesViewer.ts

@@ -0,0 +1,80 @@
+import { isBrowser } from '@/utils'
+import { useCallback, useEffect, useRef } from 'react'
+import Viewer from 'viewerjs'
+
+interface Props {
+  /**
+   * 预估最大图片数量，用于提前渲染dom
+   */
+  max: number
+  /**
+   * viewer配置
+   */
+  options?: Viewer.Options
+}
+/**
+ * 使用viewerjs库展示图集
+ */
+export const useImagesViewer = ({ max, options }: Props) => {
+  // 单实例单dom，并复用img的dom
+  const parentRef = useRef<HTMLDivElement | null>(null)
+  const imgArrRef = useRef<HTMLImageElement[]>([])
+  const viewerRef = useRef<Viewer | null>(null)
+
+  // 每次图片变化更新parent下面img的src
+  const handleView = useCallback(
+    (imgs: string[]) => {
+      if (!isBrowser) return
+
+      const len = imgs.length
+
+      // 将对应imgs数量的img的dom加载到parent下面
+      Array.from({ length: len }).forEach((_, index) => {
+        parentRef.current?.appendChild(imgArrRef.current[index])
+      })
+
+      // 加载新imgs
+      const childrenArr = Array.from(
+        parentRef.current?.children ?? [],
+      ) as HTMLImageElement[]
+
+      childrenArr.forEach((child, index) => {
+        child.src = imgs[index]
+      })
+
+      // 更新viewer
+      viewerRef.current?.update()
+
+      // 打开viewer
+      viewerRef.current?.show()
+    },
+    [parentRef.current, imgArrRef.current],
+  )
+
+  // 初始化parent
+  useEffect(() => {
+    if (!parentRef.current) {
+      parentRef.current = document.createElement('div')
+    }
+  }, [])
+
+  // 初始化imgArr
+  useEffect(() => {
+    if (imgArrRef.current.length < max) {
+      Array.from({ length: max }).forEach(() => {
+        imgArrRef.current.push(new Image())
+      })
+    }
+  }, [max])
+
+  // 初始化viewer
+  useEffect(() => {
+    if (parentRef.current) {
+      viewerRef.current = new Viewer(parentRef.current, options)
+    }
+  }, [parentRef.current])
+
+  return {
+    view: handleView,
+  }
+}

package/template/webpack-typescript-react/src/hooks/useWindowWidth.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * 获取窗口宽度
+ * @description 暂不考虑ssr
+ */
+export const useWindowWidth = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth)
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    // 清除事件监听器
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return windowWidth
+}

package/template/webpack-typescript-react/src/index.tsx

@@ -0,0 +1,19 @@
+import { routesConfig } from './routes/config'
+import '@/styles/global.css'
+import 'high-order-ui/lib/index.css'
+import { Suspense } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider, createHashRouter } from 'react-router-dom'
+import 'viewerjs/dist/viewer.css'
+
+const root = document.getElementById('root')
+
+const router = createHashRouter(routesConfig)
+
+if (root) {
+  createRoot(root).render(
+    <Suspense fallback={<div>Loading...</div>}>
+      <RouterProvider router={router}></RouterProvider>
+    </Suspense>,
+  )
+}

package/template/webpack-typescript-react/src/layouts/MainLayout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from 'react-router-dom'
+
+export const MainLayout = () => {
+  return (
+    <div className="">
+      <Outlet></Outlet>
+    </div>
+  )
+}

package/template/webpack-typescript-react/src/layouts/index.ts

@@ -0,0 +1 @@
+export * from './MainLayout'

package/template/webpack-typescript-react/src/pages/home.tsx

@@ -0,0 +1,17 @@
+import { routesConfig } from '@/routes/config'
+import { Link } from 'react-router-dom'
+
+export default function HomePage() {
+  return (
+    <div className="flex flex-col">
+      {routesConfig[0].children?.map(
+        (route) =>
+          route.path !== '/' && (
+            <Link key={route.path} to={route.path || '/'}>
+              {route.path?.slice(1)}
+            </Link>
+          ),
+      )}
+    </div>
+  )
+}

package/template/webpack-typescript-react/src/pages/image.tsx

@@ -0,0 +1,24 @@
+import { dataConfig } from '@/config'
+import { getImageData } from '@/utils'
+import { Image } from 'high-order-ui'
+
+export default function ImagePage() {
+  const img = dataConfig[0].imgs[0]
+  const { width, height, blurhash } = getImageData(img)
+
+  return (
+    <>
+      hash占位
+      <Image
+        width={width}
+        height={height}
+        blurhash={blurhash}
+        src={img}
+      ></Image>
+      图片占位
+      <Image width={width} height={height} src={img}>
+        <div className="w-full h-full bg-gradient-to-r from-purple-500 to-pink-500"></div>
+      </Image>
+    </>
+  )
+}

package/template/webpack-typescript-react/src/pages/masonry.tsx

@@ -0,0 +1,92 @@
+import { DataType, dataConfig } from '@/config'
+import { useImagesViewer } from '@/hooks/useImagesViewer'
+import { useWindowWidth } from '@/hooks/useWindowWidth'
+import { getImageData } from '@/utils'
+import { Image, Masonry } from 'high-order-ui'
+import { FunctionComponent, HtmlHTMLAttributes, memo, useState } from 'react'
+
+const initialData = dataConfig.map((i) => {
+  const { height, width } = getImageData(i.imgs[0])
+
+  return {
+    data: i,
+    itemHeight: ((height ?? 0) / (width ?? 0)) * 100, //  需求精准排列时再计算文字高度
+  }
+})
+
+export default function MasonryPage() {
+  const [data, setData] = useState(initialData)
+
+  // TODO 使用ResizeObserver api
+  const windowWidth = useWindowWidth()
+
+  const getColumn = (
+    windowWidth: number,
+    response: [number, number, number],
+  ) => {
+    if (windowWidth < response[0]) {
+      return 2
+    } else if (windowWidth < response[1]) {
+      return 3
+    } else if (windowWidth < response[2]) {
+      return 4
+    } else {
+      return 5
+    }
+  }
+
+  return (
+    <Masonry
+      className="p-[20px] h-screen"
+      scrollCallbackRange={700}
+      onScrollToFooter={() => {
+        setData((pre) => [...pre, ...initialData])
+      }}
+      items={data}
+      renderItem={(item) => (
+        <Card key={item._id} className="mb-[15px]" value={item}></Card>
+      )}
+      columnCount={getColumn(windowWidth, [400, 800, 1200])}
+      columnSpace={14}
+    ></Masonry>
+  )
+}
+
+// ---
+
+type CardProps = HtmlHTMLAttributes<HTMLDivElement> & {
+  value: DataType
+}
+
+const Card: FunctionComponent<CardProps> = memo(({ value, ...rest }) => {
+  const { height, width, blurhash } = getImageData(value.imgs[0])
+
+  const { view } = useImagesViewer({
+    max: 10,
+    options: {
+      title: false,
+      toggleOnDblclick: false,
+      slideOnTouch: false,
+    },
+  })
+
+  return (
+    <div {...rest}>
+      <Image
+        onClick={() => {
+          view(value.imgs)
+        }}
+        className="w-full rounded-[16px] mb-[10px] overflow-hidden"
+        src={value.imgs[0]}
+        alt="封面图"
+        width={width}
+        height={height}
+        blurhash={blurhash}
+      ></Image>
+
+      <span className="text-[#333333] text-[14px] leading-[20px] font-normal">
+        {value.name}
+      </span>
+    </div>
+  )
+})

package/template/webpack-typescript-react/src/pages/scroll-view.tsx

@@ -0,0 +1,36 @@
+import { ScrollView } from 'high-order-ui'
+
+export default function ScrollViewPage() {
+  return (
+    <>
+      ↑↓
+      <ScrollView
+        className="w-full h-[200px]"
+        isSmooth
+        scrollToPosition={1000}
+        onScrollToFooter={() => {
+          alert('footer')
+        }}
+        onScrollToHeader={() => {
+          alert('header')
+        }}
+      >
+        <div className="border-4 border-dashed w-full h-[5000px] bg-gradient-to-b from-cyan-500 to-blue-500"></div>
+      </ScrollView>
+      ←→
+      <ScrollView
+        scrollDirection="horizontal"
+        scrollToPosition={1000}
+        onScrollToFooter={() => {
+          alert('footer')
+        }}
+        onScrollToHeader={() => {
+          alert('header')
+        }}
+        className="w-full h-[200px]"
+      >
+        <div className="border-4 border-dashed w-[5000px] h-full bg-gradient-to-r from-purple-500 to-pink-500"></div>
+      </ScrollView>
+    </>
+  )
+}

package/template/webpack-typescript-react/src/pages/virtual-list.tsx

@@ -0,0 +1,27 @@
+import { dataConfig } from '@/config'
+import { VirtualList } from 'high-order-ui'
+
+export default function VirtualListPage() {
+  return (
+    <VirtualList
+      className="h-screen"
+      onScrollToFooter={() => {
+        alert('footer')
+      }}
+      onScrollToHeader={() => {
+        alert('header')
+      }}
+      items={dataConfig.map((item, index) => ({
+        data: item,
+        itemHeight: 40 + index * 3,
+      }))}
+      renderItem={(item) => {
+        return (
+          <div key={item._id} className="border-b border-black h-full">
+            {item.name}
+          </div>
+        )
+      }}
+    ></VirtualList>
+  )
+}

package/template/webpack-typescript-react/src/routes/config.tsx

@@ -0,0 +1,39 @@
+import { MainLayout } from '@/layouts'
+import { lazy } from 'react'
+import { RouteObject } from 'react-router-dom'
+
+// 使用普通lazy写法 https://github.com/remix-run/react-router/tree/main/examples/lazy-loading，虽然用了RouterProvider，但是RouterProvider写法比较杂乱且有类型风险，暂时不采用https://github.com/remix-run/react-router/issues/10475
+const HomePage = lazy(() => import('@/pages/home'))
+const ImagePage = lazy(() => import('@/pages/image'))
+const MasonryPage = lazy(() => import('@/pages/masonry'))
+const ScrollViewPage = lazy(() => import('@/pages/scroll-view'))
+const VirtualListPage = lazy(() => import('@/pages/virtual-list'))
+
+export const routesConfig: RouteObject[] = [
+  {
+    path: '/',
+    element: <MainLayout></MainLayout>,
+    children: [
+      {
+        path: '/',
+        element: <HomePage></HomePage>,
+      },
+      {
+        path: '/masonry',
+        element: <MasonryPage></MasonryPage>,
+      },
+      {
+        path: '/scroll-view',
+        element: <ScrollViewPage></ScrollViewPage>,
+      },
+      {
+        path: '/image',
+        element: <ImagePage></ImagePage>,
+      },
+      {
+        path: '/virtual-list',
+        element: <VirtualListPage></VirtualListPage>,
+      },
+    ],
+  },
+]

package/template/webpack-typescript-react/src/styles/global.css

@@ -0,0 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+}

package/template/webpack-typescript-react/src/templates/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>examples</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/template/webpack-typescript-react/src/types/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.jpg' {
+  const value: string
+  export = value
+}

package/template/webpack-typescript-react/src/utils/index.ts

@@ -0,0 +1,17 @@
+import queryString from 'query-string'
+
+export const isBrowser = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+)
+
+export const getImageData = (str: string) => {
+  const { query } = queryString.parseUrl(str, { decode: false })
+
+  return {
+    width: parseInt(query.width as string),
+    height: parseInt(query.height as string),
+    blurhash: decodeURIComponent(query.blurhash as string),
+  }
+}

package/template/webpack-typescript-react/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{tsx,ts,jsx,js}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/template/webpack-typescript-react/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  /* ts-node为webpack提供webpack.config.ts的打包产物webpack.config.js https://webpack.js.org/configuration/configuration-languages/*/
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS"
+    }
+  },
+  "compilerOptions": {
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "target": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/template/webpack-typescript-react/webpack.config.ts

@@ -0,0 +1,94 @@
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
+import BlurhashWebpackPlugin from 'blurhash-webpack-plugin'
+import { config } from 'dotenv'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
+import { DefinePlugin } from 'webpack'
+import { WebpackConfiguration } from 'webpack-dev-server'
+
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+const env = config({
+  path: path.join(__dirname, `./.env.${process.env.NODE_ENV}`),
+})
+
+if (env.error) {
+  console.error('环境变量读取失败')
+  process.exit(1)
+}
+
+// 用WebpackConfiguration是因为配置中配置了devServer
+const webpackConfig: WebpackConfiguration = {
+  mode: isDevelopment ? 'development' : 'production',
+  entry: path.join(__dirname, './src/index.tsx'),
+  output: {
+    path: path.join(__dirname, './dist'),
+    filename: '[name].[contenthash:8].js',
+    chunkFilename: '[id].[contenthash:8].js',
+    clean: true,
+    hashFunction: 'xxhash64',
+  },
+  resolve: {
+    extensions: ['.js', '.mjs', '.cjs', '.jsx', '.ts', '.tsx'],
+    plugins: [new TsconfigPathsPlugin()],
+  },
+
+  optimization: {
+    // 最小化 __webpack_require__.u 内容改变的影响，分离webpack runtime文件
+    runtimeChunk: {
+      name: 'runtime',
+    },
+    // 分包
+    splitChunks: {
+      chunks: 'all',
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
+        ],
+      },
+      {
+        test: /\.(jsx?|mjs|cjs|tsx?)$/,
+        exclude: /node_modules/,
+        include: path.join(__dirname, 'src'),
+        use: ['babel-loader', 'thread-loader'],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|webp)$/,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  plugins: [
+    new DefinePlugin({ 'process.env': JSON.stringify(env.parsed) }),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, './src/templates/index.html'),
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash:8].css',
+    }),
+    isDevelopment && new ReactRefreshWebpackPlugin(),
+    new BlurhashWebpackPlugin(),
+  ].filter(Boolean),
+  devServer: {
+    static: {
+      directory: path.join(__dirname, './public'), //托管静态资源public文件夹
+    },
+    port: 9001,
+    compress: false,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    historyApiFallback: true,
+  },
+}
+
+export default webpackConfig

package/template/todo-react-typescript/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-    "module": "ESNext",
-    "target": "ESNext",
-    "resolveJsonModule": true,
-    "moduleResolution": "node",
-    "esModuleInterop": true
-  }
-}