create-packer 1.17.32 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-packer",
-  "version": "1.17.32",
+  "version": "1.18.0",
   "main": "index.js",
   "repository": "https://github.com/kevily/create-packer",
   "author": "1k <bug_zero@163.com>",

package/template/chrome-extension/{src/manifest.json → manifest.json}

@@ -4,12 +4,12 @@
     "description": "Base Level Extension",
     "version": "1.0",
     "action": {
-        "default_popup": "popup/popup.html",
-        "default_icon": "assets/vite.svg"
+        "default_popup": "src/popup/popup.html",
+        "default_icon": "vite.svg"
     },
     "content_scripts": [
         {
-            "js": ["content_script/index.tsx"],
+            "js": ["src/content_script/index.tsx"],
             "matches": [
                 "https://developer.chrome.com/docs/extensions/*",
                 "https://developer.chrome.com/docs/webstore/*"

package/template/chrome-extension/package.json

@@ -5,8 +5,8 @@
     "type": "module",
     "scripts": {
         "prepare": "husky install",
-        "dev": "vite build --mode developmemnt",
-        "build": "tsc && vite build",
+        "dev": "vite",
+        "build": "tsc --noEmit && vite build",
         "preview": "vite preview",
         "up:vite": "pnpm up vite @vitejs/* -L",
         "format": "prettier --write \"src/**/*.{ts,js,tsx,jsx,css,scss,less}\" \"./package.json\"",
@@ -20,9 +20,9 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
-        "axios": "1.3.6",
         "immer": "10.0.1",
         "lodash-es": "4.17.21",
+        "qs": "6.11.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "zustand": "4.3.7"
@@ -31,6 +31,7 @@
         "@commitlint/cli": "17.6.1",
         "@commitlint/config-conventional": "17.6.1",
         "@commitlint/cz-commitlint": "17.5.0",
+        "@crxjs/vite-plugin": "2.0.0-beta.18",
         "@testing-library/dom": "9.2.0",
         "@testing-library/jest-dom": "5.16.5",
         "@testing-library/react": "14.0.0",
@@ -38,6 +39,7 @@
         "@types/jest": "29.5.1",
         "@types/lodash-es": "4.17.7",
         "@types/node": "18.16.0",
+        "@types/qs": "6.9.7",
         "@types/react": "18.0.38",
         "@types/react-dom": "18.0.11",
         "@types/testing-library__jest-dom": "5.14.5",
@@ -66,7 +68,6 @@
         "tailwindcss": "3.3.1",
         "typescript": "5.0.4",
         "vite": "4.3.1",
-        "vite-plugin-chrome-extension": "0.0.7",
         "vite-plugin-eslint": "1.8.1"
     },
     "config": {

package/template/chrome-extension/src/providers/index.ts

@@ -1,2 +1,2 @@
-export * from './defineStore'
-export { default as request } from './request'
+export * from './modelUtils'
+export * from './request'

package/template/chrome-extension/src/providers/modelUtils.ts

@@ -0,0 +1,52 @@
+import { create, StoreApi, UseBoundStore } from 'zustand'
+import { combine } from 'zustand/middleware'
+import { produce } from 'immer'
+import { ExtractModelType } from '@/types'
+
+export interface insideActionsType<S> {
+    reset: () => void
+    setState: (updater: (state: S) => void) => void
+}
+export type actionsType<S, OptionAction, InsideActions = unknown> = (
+    getState: () => S,
+    actions: insideActionsType<S> & InsideActions,
+    store: StoreApi<S>
+) => OptionAction
+export interface optionsType<S, OptionAction> {
+    state: () => S
+    actions: actionsType<S, OptionAction>
+}
+
+export function define<S extends Record<string, any>, OptionActions extends Record<string, any>>(
+    options: optionsType<S, OptionActions>
+) {
+    return create(
+        combine(options.state(), (set, get, store) => {
+            const setState: insideActionsType<S>['setState'] = updater => {
+                set(
+                    produce((store: S) => {
+                        updater(store)
+                    }) as any
+                )
+            }
+            const reset: insideActionsType<S>['reset'] = () => {
+                set(() => options.state() as never)
+            }
+            return {
+                ...options.state(),
+                reset,
+                setState,
+                subscribe: store.subscribe,
+                ...options.actions(get, { reset, setState }, store)
+            }
+        })
+    )
+}
+
+export function defineComputed<
+    Model extends UseBoundStore<StoreApi<any>>,
+    K extends string,
+    R = any
+>(useStore: Model, computed: Record<K, (state: ExtractModelType<Model>) => R>) {
+    return (field: K) => useStore(computed[field])
+}

package/template/chrome-extension/src/providers/request.ts

@@ -1,7 +1,60 @@
-import axios from 'axios'
+import { isFunction, size } from 'lodash-es'
+import { stringify } from 'qs'
 
-const request = axios.create({
+type fetchConfigType = Required<Parameters<typeof fetch>>[1]
+
+interface configType {
+    baseURL: string
+    headers?: {
+        'Content-Type'?: string
+        [key: string]: string | undefined
+    }
+    onError?: (e: Error) => void
+}
+
+const DEFAULT_CONFIG: Partial<configType> = {
+    headers: {
+        'Content-Type': 'application/json'
+    }
+}
+
+class Request {
+    baseURL: configType['baseURL']
+    constructor(config: configType) {
+        this.baseURL = config.baseURL
+    }
+    async request(url: string, config?: fetchConfigType) {
+        try {
+            const response = await fetch(this.baseURL + url, {
+                headers: DEFAULT_CONFIG.headers as never,
+                ...config
+            })
+            if (response.status !== 200) {
+                const errMsg = `服务器错误状态：${response.status}`
+                throw new Error(errMsg)
+            }
+            return await response.json()
+        } catch (error: any) {
+            if (isFunction(DEFAULT_CONFIG.onError)) {
+                DEFAULT_CONFIG.onError(error)
+            }
+            throw new Error(error.message)
+        }
+    }
+    get(url: string, data?: Record<string, any> | any[]) {
+        const query = size(data) > 0 ? `?${stringify(data)}` : ''
+        return this.request(url + query, {
+            method: 'GET'
+        })
+    }
+    post(url: string, body?: any) {
+        return this.request(url, {
+            method: 'POST',
+            body: JSON.stringify(body)
+        })
+    }
+}
+
+export const request = new Request({
     baseURL: import.meta.env.VITE_API_HOST
 })
-
-export default request

package/template/chrome-extension/src/types/index.ts

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

package/template/chrome-extension/src/types/utils.ts

@@ -0,0 +1,19 @@
+import type { UseBoundStore, StoreApi } from 'zustand'
+export type ExtractArrayElType<T> = T extends Array<infer E> ? E : unknown
+export type ExtractReadonlyArrayElType<T> = T extends ReadonlyArray<infer E> ? E : unknown
+export type ExtractReadonlyArrayFieldType<T, K extends keyof any> = T extends ReadonlyArray<infer V>
+    ? V extends { [key in K]: infer V2 }
+        ? V2
+        : any
+    : any
+export type ExtractArrayFieldType<T, K extends keyof any> = T extends Array<infer V>
+    ? V extends { [key in K]: infer V2 }
+        ? V2
+        : any
+    : any
+
+export type UnReadonly<R extends Record<string, any>> = {
+    -readonly [K in keyof R]: R[K]
+}
+export type ValueType<R extends Record<string, any>> = R extends Record<string, infer V> ? V : R
+export type ExtractModelType<T> = T extends UseBoundStore<StoreApi<infer S>> ? S : unknown

package/template/chrome-extension/vite.config.ts

@@ -2,25 +2,19 @@ import path from 'path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import eslint from 'vite-plugin-eslint'
-import { chromeExtension } from 'vite-plugin-chrome-extension'
+import { crx } from '@crxjs/vite-plugin'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
     return {
-        plugins: [eslint(), react(), chromeExtension() as any],
+        plugins: [eslint(), react(), crx({ manifest: require('./manifest.json') })],
         resolve: {
             alias: {
                 '@': path.join(__dirname, 'src')
             }
         },
         esbuild: {
-            drop: mode === 'developmemnt' ? [] : ['console', 'debugger']
-        },
-        build: {
-            rollupOptions: {
-                input: 'src/manifest.json'
-            },
-            minify: mode === 'developmemnt' ? false : 'esbuild'
+            drop: mode === 'development' ? [] : ['console', 'debugger']
         }
     }
 })

package/template/react/src/layout/layout.container.tsx

@@ -1,8 +1,17 @@
-import { Suspense } from 'react'
-import { Outlet } from 'react-router-dom'
+import { Suspense, useLayoutEffect } from 'react'
+import { Outlet, useLocation } from 'react-router-dom'
+import { navigate, routerIds } from '@/router'
 import { Loading } from './components'
 
 export default function Layout() {
+    const location = useLocation()
+
+    useLayoutEffect(() => {
+        if (location.pathname === '/') {
+            navigate({ id: routerIds.home })
+        }
+    }, [location])
+
     return (
         <Suspense fallback={<Loading />}>
             <Outlet />

package/template/react/src/pages/home/home.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import Home from './home.container'
+import Home from './home'
 
 describe('HelloWorld', () => {
     it('should renders a msg', () => {

package/template/react/src/pages/home/index.ts

@@ -1 +1 @@
-export { default } from './home.container'
+export { default } from './home'

package/template/react/src/pages/notFound/index.ts

@@ -1 +1 @@
-export { default } from './notFound.container'
+export { default } from './notFound'

package/template/react/src/router/home/routes.tsx

@@ -4,7 +4,7 @@ import type { routeType } from '../router.types'
 
 const routes: routeType[] = [
     {
-        index: true,
+        path: '/home',
         id: ids.home,
         Component: lazy(() => import('@/pages/home'))
     }

package/template/react/src/router/index.ts

@@ -1,3 +1,3 @@
-export { default as ids } from './ids'
+export { default as routerIds } from './ids'
 export * from './router'
 export * from './router.provider'

package/template/react/src/router/router.provider.ts

@@ -1,11 +1,11 @@
-import { find, get } from 'lodash-es'
+import { get } from 'lodash-es'
 import { stringify } from 'qs'
 import { NavigateOptions } from 'react-router-dom'
 import { routeType } from '@/router/router.types'
-import { router, routesList } from './router'
+import { router, routesById } from './router'
 
 export function getRoute(id: routeType['id'], path?: string | string[]) {
-    const route = find(routesList, o => o.id === id)
+    const route = routesById[id]
     if (path) {
         return get(route, path)
     }

package/template/react/src/router/router.tsx

@@ -1,7 +1,9 @@
 import { lazy } from 'react'
 import { createBrowserRouter } from 'react-router-dom'
-import { concat, isArray, reduce } from 'lodash-es'
+import { assign, isArray, reduce } from 'lodash-es'
+import { ValueType } from '@/types'
 import ids from './ids'
+import * as home from './home'
 import type { routeType } from './router.types'
 
 const routes: routeType[] = [
@@ -9,7 +11,7 @@ const routes: routeType[] = [
         path: '/',
         id: ids.root,
         Component: lazy(() => import('@/layout')),
-        children: []
+        children: [...home.routes]
     },
     {
         path: '*',
@@ -18,22 +20,23 @@ const routes: routeType[] = [
     }
 ]
 
-export const routesList = (function flat(routes: routeType[], parentRoute?: routeType) {
+export const routesById = (function flat(routes: routeType[], parentRoute?: routeType) {
     return reduce(
         routes,
         (result, route) => {
             if (parentRoute) {
                 route.path = `${parentRoute.path === '/' ? '' : parentRoute.path}/${route.path}`
             }
-            result.push(route)
+            result[route.id] = route
             if (isArray(route.children)) {
-                result = concat(result, flat(route.children, route))
+                assign(result, flat(route.children, route))
             }
             return result
         },
-        [] as routeType[]
+        {} as Record<ValueType<typeof ids>, routeType>
     )
 })(routes)
+
 export const router = createBrowserRouter(routes as never, {
     basename: import.meta.env.VITE_BASE_URL
 })

package/template/react/src/router/router.types.ts

@@ -1,3 +1,6 @@
 import { RouteObject } from 'react-router-dom'
 
-export type routeType = RouteObject
+export type routeType = Omit<RouteObject, 'children' | 'id'> & {
+    id: string
+    children?: routeType[]
+}

package/template/chrome-extension/src/providers/defineStore.ts

@@ -1,42 +0,0 @@
-import { create } from 'zustand'
-import { combine } from 'zustand/middleware'
-import { produce } from 'immer'
-
-type setStateType<S> = (updater: (state: S) => void) => void
-export interface defineStoreOptionsType<S extends object, A extends object> {
-    state: () => S
-    actions: (
-        setState: setStateType<S>,
-        getState: () => S,
-        getActions: () => Record<string, any>
-    ) => A
-}
-
-export function defineStore<S extends object, A extends object>(
-    options: defineStoreOptionsType<S, A>
-) {
-    return create(
-        combine({ state: options.state() }, (setState, getState, store) => {
-            const _setState: setStateType<S> = updater => {
-                setState(
-                    produce((store: { state: S }) => {
-                        updater(store.state)
-                    }) as any
-                )
-            }
-            const _getState = () => getState().state
-            const _getActions = () => (getState() as any).actions
-            return {
-                actions: {
-                    reset: () => {
-                        setState({ state: options.state() })
-                    },
-                    setState: _setState,
-                    destroy: store.destroy,
-                    subscribe: store.subscribe,
-                    ...options.actions(_setState, _getState, _getActions)
-                }
-            }
-        })
-    )
-}