create-packer 1.32.0 → 1.32.1

package/package.json

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

package/template/web-app/react/domain/app/components/app-context.tsx

@@ -1,14 +1,17 @@
-import { FunctionComponent, StrictMode } from 'react'
+import { FunctionComponent } from 'react'
 import { ThemeProvider } from 'styled-components'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { theme } from '@/shared/theme'
 
+const queryClient = new QueryClient()
+
 export interface propsType {
     children: React.ReactNode
 }
 export const Root: FunctionComponent<propsType> = props => {
     return (
-        <StrictMode>
+        <QueryClientProvider client={queryClient}>
             <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
-        </StrictMode>
+        </QueryClientProvider>
     )
 }

package/template/web-app/react/package.json

@@ -19,6 +19,7 @@
     },
     "dependencies": {
         "1k-types": "1.2.0",
+        "@tanstack/react-query": "5.51.15",
         "axios": "1.3.6",
         "define-zustand": "3.1.1",
         "immer": "10.0.1",

package/template/web-app/react/pages/home/home.tsx

@@ -1,13 +1,10 @@
-import { useEffect } from 'react'
-import { request, API } from '@/shared/service'
+import { useHomeQuery } from '@/shared/service'
 import { StyledRoot } from './home.styled'
 
 export default function Home() {
-    useEffect(() => {
-        request.post(API.HOME_DATA).then(({ data }) => {
-            console.log('data', data)
-        })
-    }, [])
+    const query = useHomeQuery()
+
+    console.log('data', query.data)
 
     return <StyledRoot>sdfs</StyledRoot>
 }

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

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query'
+import { request } from './request'
+import { HOME_DATA } from './api'
+
+export function useHomeQuery() {
+    return useQuery({
+        queryKey: ['home_data'],
+        queryFn: () => request.post(HOME_DATA)
+    })
+}

package/template/web-app/react/shared/service/index.ts

@@ -1,2 +1,3 @@
-export { default as request } from './request'
+export * from './request'
 export * as API from './api'
+export * from './home'

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

@@ -1,7 +1,5 @@
 import axios from 'axios'
 
-const request = axios.create({
+export const request = axios.create({
     baseURL: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_HOST
 })
-
-export default request

package/template/web-app/react-webpack/domain/app/components/app-context.tsx

@@ -1,14 +1,17 @@
-import { FunctionComponent, StrictMode } from 'react'
+import { FunctionComponent } from 'react'
 import { ThemeProvider } from 'styled-components'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { theme } from '@/shared/theme'
 
+const queryClient = new QueryClient()
+
 export interface propsType {
     children: React.ReactNode
 }
 export const Root: FunctionComponent<propsType> = props => {
     return (
-        <StrictMode>
+        <QueryClientProvider client={queryClient}>
             <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
-        </StrictMode>
+        </QueryClientProvider>
     )
 }

package/template/web-app/react-webpack/global.d.ts

@@ -1,8 +1,10 @@
 import 'styled-components'
 import { themeType } from './shared/theme'
 
-declare const ENV_BASE_URL: string
-declare const ENV_API_HOST: string
+declare global {
+    const ENV_BASE_URL: string
+    const ENV_API_HOST: string
+}
 
 declare module '*.css'
 declare module '*.less'

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

@@ -20,6 +20,7 @@
     },
     "dependencies": {
         "1k-types": "1.2.0",
+        "@tanstack/react-query": "5.51.15",
         "axios": "1.6.7",
         "define-zustand": "3.1.1",
         "immer": "10.0.3",

package/template/web-app/react-webpack/pages/home/home.tsx

@@ -1,5 +1,10 @@
+import { useHomeQuery } from '@/shared/service'
 import { StyledRoot } from './home.styled'
 
 export default function Home() {
+    const homeQuery = useHomeQuery()
+
+    console.log('data', homeQuery.data?.data)
+
     return <StyledRoot>sdsddds</StyledRoot>
 }

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

@@ -0,0 +1,8 @@
+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/index.ts

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

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

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

package/template/web-app/vue/main.ts

@@ -1,6 +1,7 @@
 import { createPinia } from 'pinia'
+import { VueQueryPlugin } from '@tanstack/vue-query'
 import { router } from '@/router'
 import { app } from '@/domain/app'
 import './style.css'
 
-app.use(createPinia()).use(router).mount('#app')
+app.use(VueQueryPlugin).use(createPinia()).use(router).mount('#app')

package/template/web-app/vue/package.json

@@ -19,6 +19,7 @@
     },
     "dependencies": {
         "1k-types": "1.2.0",
+        "@tanstack/vue-query": "5.51.15",
         "axios": "1.3.6",
         "lodash-es": "4.17.21",
         "pinia": "2.1.7",

package/template/web-app/vue/pages/home/home.vue

@@ -1,13 +1,16 @@
-<template>
-    <div>Home</div>
-</template>
-
 <script setup lang="ts">
-import { request, API } from '@/shared/service'
+import { watch } from 'vue'
+import { useHomeQuery } from '@/shared/service'
+
+const { data } = useHomeQuery()
 
-request.post(API.HOME_DATA).then(({ data }) => {
-    console.log('data', data)
+watch(data, data => {
+    console.log('data', data?.data)
 })
 </script>
 
+<template>
+    <div>Home</div>
+</template>
+
 <style scoped></style>

package/template/web-app/vue/shared/service/home.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/vue-query'
+import { request } from './request'
+import { HOME_DATA } from './api'
+
+export function useHomeQuery() {
+    return useQuery({
+        queryKey: ['home_data'],
+        queryFn: () => request.post(HOME_DATA)
+    })
+}

package/template/web-app/vue/shared/service/index.ts

@@ -1,2 +1,3 @@
-export { default as request } from './request'
+export * from './request'
 export * as API from './api'
+export * from './home'

package/template/web-app/vue/shared/service/request.ts

@@ -1,7 +1,5 @@
 import axios from 'axios'
 
-const request = axios.create({
+export const request = axios.create({
     baseURL: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_HOST
 })
-
-export default request

package/template/web-extension/package.json

@@ -17,6 +17,7 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
+        "@tanstack/react-query": "5.51.15",
         "axios": "^1.7.2",
         "define-zustand": "3.1.1",
         "immer": "10.0.1",

package/template/web-extension/shared/components/app-context.tsx

@@ -1,7 +1,14 @@
 import { FunctionComponent, ReactNode } from 'react'
 import { ThemeProvider } from 'styled-components'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { theme } from 'shared/styles'
 
+const queryClient = new QueryClient()
+
 export const AppContext: FunctionComponent<{ children: ReactNode }> = props => {
-    return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+        </QueryClientProvider>
+    )
 }