create-packer 1.39.4 → 1.41.0

package/template/web-app/react-webpack/shared/components/componentInstance.tsx

@@ -1,78 +0,0 @@
-import {
-    forwardRef,
-    ForwardRefExoticComponent,
-    FunctionComponent,
-    PropsWithChildren,
-    PropsWithoutRef,
-    RefAttributes,
-    useImperativeHandle,
-    useRef,
-    useState
-} from 'react'
-import { createRoot } from 'react-dom/client'
-
-const instanceMap: Record<string, { pending: Promise<any>; instance: any }> = {}
-
-export interface refsType<P> {
-    $setProps: (newProps: P) => void
-    $updateProps: (newProps: Partial<P>) => void
-}
-
-export function create(Context?: FunctionComponent<PropsWithChildren<any>>) {
-    return async function <P extends Record<string, any>, Refs extends Record<string, any>>(
-        key: string,
-        Component: ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<Refs>>,
-        props?: P
-    ) {
-        let current = instanceMap[key]
-        if (!current) {
-            const div = document.createElement('div')
-            document.body.appendChild(div)
-            const ApiComponent = forwardRef<Refs & refsType<P>>((__, refs) => {
-                const ref = useRef<Refs>(null)
-                const [state, setState] = useState<Partial<P>>(props || {})
-
-                useImperativeHandle(refs, () => {
-                    return {
-                        $setProps: newProps => {
-                            setState(() => newProps)
-                        },
-                        $updateProps: newProps => {
-                            if (newProps) {
-                                setState(state => ({ ...state, ...newProps }))
-                            }
-                        },
-                        ...ref.current
-                    } as Refs & refsType<P>
-                })
-                if (Context) {
-                    return (
-                        <Context>
-                            <Component ref={ref} {...(state as any)} />
-                        </Context>
-                    )
-                }
-                return <Component ref={ref} {...(state as any)} />
-            })
-            current = instanceMap[key] = {
-                instance: void 0,
-                pending: new Promise<void>(resolve => {
-                    createRoot(div).render(
-                        <ApiComponent
-                            ref={instance => {
-                                current.instance = instanceMap[key].instance = instance!
-                                resolve()
-                            }}
-                        />
-                    )
-                })
-            }
-        }
-        await current.pending
-        current.instance.$setProps(props)
-        // Delay return to avoid sync issue
-        // ------------------------------------------------------------------------
-        await new Promise(resolve => setTimeout(resolve))
-        return current.instance as Refs & refsType<P>
-    }
-}

package/template/web-app/react-webpack/shared/components/index.ts

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

package/template/web-app/react-webpack/shared/hooks/defineRouter/defineRouter.types.ts

@@ -1,33 +0,0 @@
-import { FunctionComponent, ReactNode } from 'react'
-import { RouteObject } from 'react-router-dom'
-
-export type routeType = Omit<RouteObject, 'children' | 'id'> & {
-    id: string
-    meta?: {
-        title?: string
-        /** 只在当前路由才显示的小提示 */
-        tip?: string
-    }
-    /** 静态配置，便于回退 */
-    unauthorizedOrigin?: boolean
-    /** 动态使用，用于程序校验 */
-    unauthorized?: boolean
-    query?: () => Record<string, any>
-    menu?: {
-        hidden?: boolean
-        icon?: FunctionComponent
-        label?: ReactNode
-    }
-    children?: routeType[]
-}
-
-export type editableRouteType = Omit<routeType, 'element' | 'errorElement' | 'children'>
-
-export interface routerFactoryArgType {
-    basename: string
-    routes: routeType[]
-}
-
-export type routeByIdType = Omit<routeType, 'children'> & {
-    pos: string
-}

package/template/web-app/react-webpack/shared/hooks/defineRouter/deineRouter.tsx

@@ -1,160 +0,0 @@
-import { DependencyList, useEffect, useMemo } from 'react'
-import { useMatches, useSearchParams, NavigateOptions, createBrowserRouter } from 'react-router-dom'
-import { assign, isArray, reduce, get, map, split, omit, cloneDeep, last, forEach } from 'lodash-es'
-import { stringify, parse } from 'qs'
-import { defineStore } from 'define-zustand'
-import { routeByIdType, routeType, editableRouteType } from './defineRouter.types'
-
-export default function defineRouter(router: ReturnType<typeof createBrowserRouter>) {
-    const useRouter = defineStore({
-        state: () => ({
-            routes: cloneDeep(router.routes) as routeType[]
-        }),
-        getter: {
-            routesById: state => {
-                return (function flat(routes: routeType[], parentRoute?: routeByIdType) {
-                    return reduce(
-                        routes,
-                        (result, { children, ...route }, i) => {
-                            const $route: routeByIdType = {
-                                ...route,
-                                pos: parentRoute?.pos ? `${parentRoute?.pos}-${i}` : `${i}`
-                            }
-                            if (parentRoute) {
-                                $route.path = `${
-                                    parentRoute.path === '/' ? '' : parentRoute.path
-                                }/${$route.path}`
-                            }
-                            result[$route.id] = $route
-                            if (isArray(children)) {
-                                assign(result, flat(children, $route))
-                            }
-                            return result
-                        },
-                        {} as Record<string, routeByIdType>
-                    )
-                })(state.routes)
-            }
-        },
-        actions: (getState, action) => {
-            function posToLodashPath(pos: string) {
-                if (pos) {
-                    return `[${split(pos, '-').join('].children[')}]`
-                }
-                return ''
-            }
-
-            function updateRoute(id: routeType['id'], updator: (route: editableRouteType) => void) {
-                const { routesById, routes } = getState()
-                const newRoutes = cloneDeep(routes)
-                const path = posToLodashPath(routesById[id].pos)
-                const route: routeType = get(newRoutes, path)
-                const newRoute = cloneDeep(omit(route, ['element', 'errorElement', 'children']))
-                updator(newRoute)
-                assign(route, newRoute)
-                action.setState({ routes: newRoutes })
-            }
-            function getRoute(id: routeType['id'], path?: string | string[]) {
-                const { routesById } = getState()
-                const route = routesById[id]
-                if (path) {
-                    return get(route, path)
-                }
-                return route
-            }
-
-            function genRouteUrl(id: routeType['id'], query?: Record<string, any>) {
-                const path = getRoute(id, 'path')
-                if (path) {
-                    const { origin } = window.location
-                    let url = origin + router.basename + path
-                    url += query ? `?${stringify(query)}` : ''
-                    return url
-                }
-                return void 0
-            }
-
-            function openRoute(id: routeType['id'], query?: Record<string, any>) {
-                const url = genRouteUrl(id, query)
-                if (url) {
-                    window.open(url)
-                }
-            }
-
-            function reloadRoute(id: routeType['id'], query?: Record<string, any>) {
-                const url = genRouteUrl(id, query)
-                if (url) {
-                    window.location.replace(url)
-                }
-            }
-
-            function navigate(
-                to: { id: routeType['id']; query?: Record<string, any> },
-                opts?: NavigateOptions
-            ) {
-                return router.navigate(
-                    {
-                        pathname: getRoute(to.id, 'path'),
-                        search: to.query ? stringify(to.query) : ''
-                    },
-                    opts
-                )
-            }
-
-            return {
-                navigate,
-                getRoute,
-                genRouteUrl,
-                openRoute,
-                reloadRoute,
-                updateRoute
-            }
-        }
-    })
-    function useQuery<Q>() {
-        const [params] = useSearchParams()
-        const query = parse(params.toString())
-
-        return query as Q
-    }
-
-    function useMatchRoutes(): routeType[] {
-        const matches = useMatches()
-        const getRoute = useRouter(state => state.getRoute)
-        return useMemo(() => map(matches, o => getRoute(o.id)), [matches])
-    }
-
-    /**
-     * @description 验证器返回false则无权限
-     */
-    function useRoutePermission(
-        config: {
-            redirectRouteId: string
-            validator: (currentRoute?: routeType) => boolean
-        },
-        deps: DependencyList
-    ) {
-        const matchRoutes = useMatchRoutes()
-        const currentRoute = last(matchRoutes)
-        const updateRoute = useRouter(state => state.updateRoute)
-        const navigate = useRouter(state => state.navigate)
-        const routesById = useRouter(state => state.routesById)
-
-        useEffect(() => {
-            forEach(routesById, route => {
-                updateRoute(route.id, route => {
-                    route.unauthorized = !config.validator(route)
-                })
-            })
-        }, deps)
-
-        useEffect(() => {
-            const result = config.validator(currentRoute)
-            if (!result && config.redirectRouteId) {
-                navigate({ id: config.redirectRouteId }, { replace: true })
-            }
-        }, [currentRoute?.id, ...deps])
-    }
-
-    return { useRouter, useQuery, useMatchRoutes, useRoutePermission }
-}

package/template/web-app/react-webpack/shared/hooks/defineRouter/index.ts

@@ -1,2 +0,0 @@
-export { default as defineRouter } from './deineRouter'
-export * from './defineRouter.types'

package/template/web-app/react-webpack/shared/hooks/index.ts

@@ -1,6 +0,0 @@
-export { default as useLoadingAction } from './useLoadingAction'
-export { default as useInterval } from './useInterval'
-export { default as useVisible } from './useVisible'
-export { default as useLowPriorityState } from './useLowPriorityState'
-export * from './useSyncState'
-export * from './defineRouter'

package/template/web-app/react-webpack/shared/hooks/useInterval.ts

@@ -1,26 +0,0 @@
-import { useState } from 'react'
-import { useInterval as useRUInterval } from 'react-use'
-
-interface actionsType {
-    start: () => void
-    stop: () => void
-}
-export default function useInterval(
-    cb: (actions: actionsType) => Promise<void> | void,
-    delay: number
-): actionsType {
-    const [startInterval, setStartInterval] = useState(false)
-    const start: actionsType['start'] = () => {
-        setStartInterval(true)
-    }
-    const stop: actionsType['stop'] = () => {
-        setStartInterval(false)
-    }
-    useRUInterval(
-        async () => {
-            cb({ start, stop })
-        },
-        startInterval ? delay : null
-    )
-    return { start, stop }
-}

package/template/web-app/react-webpack/shared/hooks/useLoadingAction.ts

@@ -1,27 +0,0 @@
-import { useCallback, useState, DependencyList, useRef } from 'react'
-
-export default function useLoadingAction<C extends (...arg: any) => Promise<any> | any>(
-    callback: C,
-    deps: DependencyList,
-    debounce = true
-) {
-    const [loading, setLoading] = useState(false)
-    const loadingSync = useRef(loading)
-    function $setLoading(loading: boolean) {
-        setLoading(loading)
-        loadingSync.current = loading
-    }
-    const action = useCallback(async (...arg: any) => {
-        if (debounce && loadingSync.current) {
-            return
-        }
-        try {
-            $setLoading(true)
-            return await callback(...arg)
-        } finally {
-            $setLoading(false)
-        }
-    }, deps) as C
-
-    return [loading, action] as const
-}

package/template/web-app/react-webpack/shared/hooks/useLowPriorityState.ts

@@ -1,26 +0,0 @@
-import { useEffect, useState, useTransition, DependencyList } from 'react'
-
-/**
- *
- * @param callback
- * @param watches If set, it is autorun callback
- * @returns
- */
-export default function useLowPriorityState<V>(callback: () => V, watches?: DependencyList) {
-    const [value, setValue] = useState<V>(callback)
-    const [loading, startTransition] = useTransition()
-
-    function startLoad() {
-        startTransition(() => {
-            setValue(callback())
-        })
-    }
-
-    useEffect(() => {
-        if (watches) {
-            startLoad()
-        }
-    }, watches)
-
-    return [value, { loading, startLoad }] as const
-}

package/template/web-app/react-webpack/shared/hooks/useSyncState.ts

@@ -1,15 +0,0 @@
-import { useRef, useState, Dispatch, SetStateAction } from 'react'
-import { isFunction } from 'lodash-es'
-
-export function useSyncState<S>(initialState: S | (() => S)) {
-    const [state, setState] = useState(initialState)
-    const syncState = useRef<S>(state)
-
-    const $setState: Dispatch<SetStateAction<S>> = newState => {
-        const $newState = isFunction(newState) ? newState(state) : newState
-        setState($newState)
-        syncState.current = $newState
-    }
-
-    return [syncState, state, $setState] as const
-}

package/template/web-app/react-webpack/shared/service/home.ts

@@ -1,8 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-
-export function useHomeQuery() {
-    return useQuery({
-        queryKey: ['home_data'],
-        queryFn: () => Promise.resolve({ data: { data: [] } })
-    })
-}

package/template/web-app/react-webpack/shared/service/request.ts

@@ -1,5 +0,0 @@
-import axios from 'axios'
-
-export const request = axios.create({
-    baseURL: ENV_BASE_URL + ENV_API_HOST
-})

package/template/web-app/react-webpack/shared/theme/index.ts

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

package/template/web-app/react-webpack/shared/theme/theme.styled.ts

@@ -1,56 +0,0 @@
-import { CSSProperties } from 'react'
-
-import { isString } from 'lodash-es'
-
-export const theme = {
-    tools: {
-        ellipsis: () => ({
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-        }),
-        lineClamp: (n: number) => ({
-            '-webkit-line-clamp': `${n}`,
-            '-webkit-box-orient': 'vertical',
-            overflow: 'hidden',
-            display: '-webkit-box'
-        }),
-        size: (s: string) => ({ width: s, height: s }),
-        py: (s: string) => ({ paddingTop: s, paddingBottom: s }),
-        px: (s: string) => ({ paddingLeft: s, paddingRight: s }),
-        my: (s: string) => ({ marginTop: s, marginBottom: s }),
-        mx: (s: string) => ({ marginLeft: s, marginRight: s }),
-        flex: (
-            align: CSSProperties['alignItems'],
-            justify: CSSProperties['justifyContent'],
-            vertical?: boolean
-        ) => {
-            return {
-                display: 'flex',
-                alignItems: align,
-                justifyContent: justify,
-                flexDirection: vertical ? 'column' : 'row'
-            } satisfies CSSProperties
-        },
-        /** 数字为元素数量，字符串为对应css的值  */
-        grid: {
-            grid: (rows: number | string, cols: number | string, gap?: number) => ({
-                display: 'grid',
-                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
-                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
-                gap: gap ? `${gap}px` : void 0
-            }),
-            rows: (rows: number | string, gap?: number) => ({
-                display: 'grid',
-                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
-                rowGap: gap ? `${gap}px` : void 0
-            }),
-            cols: (cols: number | string, gap?: number) => ({
-                display: 'grid',
-                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
-                columnGap: gap ? `${gap}px` : void 0
-            })
-        } satisfies Record<string, (...args: any) => CSSProperties>
-    }
-}
-export type themeType = typeof theme

package/template/web-app/react-webpack/shared/types/index.ts

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

package/template/web-app/react-webpack/shared/types/utils.ts

@@ -1,2 +0,0 @@
-import type { UseBoundStore, StoreApi } from 'zustand'
-export type ExtractModelType<T> = T extends UseBoundStore<StoreApi<infer S>> ? S : unknown

package/template/web-app/react-webpack/tsconfig.node.json

@@ -1,9 +0,0 @@
-{
-    "compilerOptions": {
-        "composite": true,
-        "module": "ESNext",
-        "moduleResolution": "Node",
-        "allowSyntheticDefaultImports": true
-    },
-    "include": []
-}

package/template/web-app/react-webpack/webpack.config.mjs

@@ -1,161 +0,0 @@
-import path from 'path'
-import webpack from 'webpack'
-import WebpackBar from 'webpackbar'
-import { EsbuildPlugin } from 'esbuild-loader'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import EslintWebpackPlugin from 'eslint-webpack-plugin'
-import StylelintWebpackPlugin from 'stylelint-webpack-plugin'
-import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
-import * as dotenv from 'dotenv'
-import { ROOT, OUTPUT, createCssLoader, createStyleLoader } from './webpack_config/index.mjs'
-
-/**
- *
- * @param {String} mode
- * @param {boolean} isProd
- * @returns {object}
- */
-function getEnvConfig(mode, isProd) {
-    const envConfig = dotenv.config({
-        path: isProd ? '.env' : `.env.${mode}`
-    }).parsed
-    Object.keys(envConfig).forEach(k => {
-        envConfig[k] = JSON.stringify(envConfig[k])
-    })
-    return envConfig
-}
-
-export default function (env) {
-    const isProd = ['prod', 'analyse'].includes(env.mode)
-    const envConfig = getEnvConfig(env.mode, isProd)
-    const publicPath = JSON.parse(envConfig.ENV_BASE_URL)
-
-    return {
-        entry: {
-            index: [path.join(ROOT, 'main.tsx')]
-        },
-        output: {
-            filename: isProd ? 'js/[name].[chunkhash].js' : 'js/[name].js',
-            chunkFilename: isProd ? 'js/[name].[chunkhash].js' : 'js/[name].js',
-            path: OUTPUT,
-            publicPath,
-            clean: true
-        },
-        mode: isProd ? 'production' : 'development',
-        stats: isProd ? 'normal' : 'errors-only',
-        performance: {
-            hints: false
-        },
-        devServer: {
-            host: '0.0.0.0',
-            hot: true,
-            open: publicPath,
-            static: {
-                publicPath
-            },
-            historyApiFallback: {
-                disableDotRule: true,
-                index: publicPath
-            },
-            devMiddleware: {
-                publicPath
-            },
-            proxy: [
-                {
-                    '/api': {
-                        target: 'http://127.0.0.1:3000',
-                        changeOrigin: true,
-                        secure: false,
-                        pathRewrite: {
-                            '^/api': ''
-                        }
-                    }
-                }
-            ]
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.[jt]sx?$/,
-                    loader: 'esbuild-loader',
-                    options: {
-                        target: 'chrome82',
-                        drop: isProd ? ['console', 'debugger'] : []
-                    }
-                },
-                {
-                    test: /\.(png|jpg|jpeg|gif)$/i,
-                    type: 'asset/resource'
-                },
-                {
-                    test: /\.svg$/i,
-                    type: 'asset/resource',
-                    resourceQuery: /url/ // *.svg?url
-                },
-                {
-                    test: /\.svg$/i,
-                    issuer: /\.[jt]sx?$/,
-                    resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
-                    use: ['@svgr/webpack']
-                },
-                {
-                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
-                    type: 'asset/resource'
-                },
-                {
-                    test: /\.css$/,
-                    exclude: /\.module\.css$/,
-                    use: [createStyleLoader(isProd), createCssLoader(), 'postcss-loader']
-                },
-                {
-                    test: /\.module\.css$/,
-                    use: [createStyleLoader(isProd), createCssLoader(true), 'postcss-loader']
-                }
-            ]
-        },
-        plugins: [
-            new WebpackBar(),
-            new HtmlWebpackPlugin({
-                filename: 'index.html',
-                template: path.resolve(ROOT, 'index.html')
-            }),
-            new EslintWebpackPlugin(),
-            new StylelintWebpackPlugin(),
-            new ForkTsCheckerWebpackPlugin(),
-            new webpack.DefinePlugin(envConfig),
-            new MiniCssExtractPlugin({
-                filename: isProd ? 'css/[name].[contenthash].css' : 'css/[name].css',
-                chunkFilename: isProd ? 'css/[name].[contenthash].css' : 'css/[name].css'
-            }),
-            env.mode === 'analyzer' && new BundleAnalyzerPlugin()
-        ],
-        optimization: {
-            minimizer: [new EsbuildPlugin()],
-            splitChunks: {
-                minChunks: 1,
-                cacheGroups: {
-                    react: {
-                        test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
-                        chunks: 'all',
-                        name: 'react'
-                    },
-                    vendors: {
-                        test: /[\\/]node_modules[\\/]/,
-                        chunks: 'all',
-                        name: 'vendors',
-                        priority: -1
-                    }
-                }
-            }
-        },
-        resolve: {
-            extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
-            alias: {
-                '@': ROOT
-            },
-            modules: ['node_modules']
-        }
-    }
-}

package/template/web-app/react-webpack/webpack_config/constant.mjs

@@ -1,5 +0,0 @@
-import path from 'path'
-
-export const ROOT = process.cwd()
-export const OUTPUT = path.join(ROOT, 'dist')
-export const SCOPE_CLASS_NAME = '[name]__[local]--[hash:base64:5]'

package/template/web-app/react-webpack/webpack_config/index.mjs

@@ -1,2 +0,0 @@
-export * from './constant.mjs'
-export * from './styles.mjs'

package/template/web-app/react-webpack/webpack_config/styles.mjs

@@ -1,22 +0,0 @@
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import { SCOPE_CLASS_NAME } from './constant.mjs'
-
-export function createStyleLoader(build) {
-    return build ? MiniCssExtractPlugin.loader : 'style-loader'
-}
-
-export function createCssLoader(module) {
-    if (module) {
-        return {
-            loader: 'css-loader',
-            options: {
-                importLoaders: 1,
-                modules: {
-                    mode: 'local',
-                    localIdentName: SCOPE_CLASS_NAME
-                }
-            }
-        }
-    }
-    return 'css-loader'
-}