create-pnpm-cli 0.0.7 → 0.0.9

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/zeropress/README.md

@@ -0,0 +1,11 @@
+# zeropress模板
+
+在docs文件夹中直接新建文件夹
+
+第一层为nav，第二层为sidebar，第三层为md文件
+
+支持全中文路径
+
+使用1或者1.自动排序
+
+预览暂时使用npm run serve

package/template/zeropress/docs/1./347/254/224/350/256/260/1./347/254/254/344/270/200/345/244/251/1./346/226/207/347/253/240.md

@@ -0,0 +1,3 @@
+# 文章
+
+温故知新

package/template/zeropress/docs/1./347/254/224/350/256/260/2./347/254/254/344/272/214/345/244/251/1./346/226/207/347/253/240.md

@@ -0,0 +1,3 @@
+# 文章
+
+学海无涯

package/template/zeropress/docs/index.mdx

@@ -0,0 +1,3 @@
+---
+pageType: home
+---

package/template/zeropress/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "zeropress",
+  "description": "",
+  "scripts": {
+    "build": "zeropress build",
+    "serve": "npm run build && serve ./dist"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "zeropress": "^0.0.24",
+    "serve": "^14.2.1"
+  }
+}

package/template/zeropress/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+  },
+}

package/template/zeropress/zeropress.config.ts

@@ -0,0 +1,22 @@
+import { UserConfig } from 'zeropress'
+
+const config: UserConfig = {
+  themeConfig: {
+    nav: [
+      {
+        img: '/logo.jpg',
+        link: '/',
+        position: 'left',
+      },
+      {
+        dark: true,
+      },
+      {
+        logo: 'github',
+        link: 'https://github.com/houhongxu/hhxpress',
+      },
+    ],
+  },
+}
+
+export default config

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
-  }
-}