create-packer 1.45.18 → 1.45.20

package/template/electron-vue/postcss.config.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        '@tailwindcss/postcss': {},
+        'postcss-nesting': {},
+        autoprefixer: {},
+        ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
+    }
+}

package/template/electron-vue/preload/index.ts

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

package/template/electron-vue/preload/toolr.ts

@@ -0,0 +1,26 @@
+import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron'
+
+export type Channels = 'ipc-example'
+
+const electronHandler = {
+    ipcRenderer: {
+        sendMessage(channel: Channels, ...args: unknown[]) {
+            ipcRenderer.send(channel, ...args)
+        },
+        on(channel: Channels, func: (...args: unknown[]) => void) {
+            const subscription = (_event: IpcRendererEvent, ...args: unknown[]) => func(...args)
+            ipcRenderer.on(channel, subscription)
+
+            return () => {
+                ipcRenderer.removeListener(channel, subscription)
+            }
+        },
+        once(channel: Channels, func: (...args: unknown[]) => void) {
+            ipcRenderer.once(channel, (_event, ...args) => func(...args))
+        }
+    }
+}
+
+contextBridge.exposeInMainWorld('electron', electronHandler)
+
+export type ElectronHandler = typeof electronHandler

package/template/electron-vue/renderer/domain/app/app.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import { App } from './components'
+
+export default createApp(App)

package/template/electron-vue/renderer/domain/app/components/app.vue

@@ -0,0 +1,18 @@
+<template>
+    <router-view />
+</template>
+
+<script setup lang="ts">
+import { router, routerNames } from '@/renderer/domain/router'
+
+router.beforeEach(async to => {
+    if (!Object.values(routerNames).includes(to.name as string)) {
+        return {
+            replace: true,
+            name: routerNames.notFound
+        }
+    }
+})
+</script>
+
+<style scoped></style>

package/template/electron-vue/renderer/domain/app/components/index.ts

@@ -0,0 +1 @@
+export { default as App } from './app.vue'

package/template/electron-vue/renderer/domain/app/createComponentInstance.ts

@@ -0,0 +1,43 @@
+import { createVNode, render, VNodeChild } from 'vue'
+import app from './app'
+
+const store = new Map()
+
+function reset(oldObj: Record<string, any>, newObj: Record<string, any>) {
+    Object.keys(oldObj).forEach(k => {
+        oldObj[k] = void 0
+    })
+    Object.assign(oldObj, newObj)
+}
+
+export function createComponentInstance<
+    P extends Record<string, any>,
+    E extends Record<string, any>,
+    Slots extends Record<string, () => VNodeChild> = Record<string, () => VNodeChild>
+>(name: string, component: any, props?: P, slots?: Slots) {
+    let vNode = store.get(name)
+    function updateProps(props: Partial<P>) {
+        reset(vNode.component.props, props)
+    }
+
+    function updateSlots(slots: Partial<Record<string, () => VNodeChild>>) {
+        reset(vNode.component.slots, slots)
+    }
+
+    if (!vNode) {
+        const container = document.createElement('div')
+        vNode = createVNode(component, props, slots)
+        vNode.appContext = app._context || {}
+        store.set(name, vNode)
+        render(vNode, container)
+    } else {
+        updateProps(props || {})
+        updateSlots(slots || {})
+    }
+    return {
+        instance: vNode,
+        updateProps,
+        updateSlots,
+        ...(vNode.component?.exposed as E)
+    }
+}

package/template/electron-vue/renderer/domain/app/index.ts

@@ -0,0 +1,3 @@
+export { default as app } from './app'
+export * from './components'
+export * from './createComponentInstance'

package/template/electron-vue/renderer/domain/router/home/index.ts

@@ -0,0 +1,2 @@
+export { default as names } from './names'
+export { default as routes } from './routes'

package/template/electron-vue/renderer/domain/router/home/names.ts

@@ -0,0 +1,3 @@
+export default {
+    home: 'home'
+}

package/template/electron-vue/renderer/domain/router/home/routes.ts

@@ -0,0 +1,8 @@
+import { RouteRecordRaw } from 'vue-router'
+import names from './names'
+
+const routes: RouteRecordRaw[] = [
+    { path: '/home', name: names.home, component: () => import('@/renderer/pages/home') }
+]
+
+export default routes

package/template/electron-vue/renderer/domain/router/index.ts

@@ -0,0 +1,26 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import names from './names'
+import * as homeRouter from './home'
+
+const routes: RouteRecordRaw[] = [
+    {
+        path: '/',
+        component: () => import('@/renderer/pages'),
+        redirect: { name: names.home },
+        children: [
+            ...homeRouter.routes,
+            {
+                path: '/404',
+                name: names.notFound,
+                component: () => import('@/renderer/pages/not-found.vue')
+            }
+        ]
+    }
+]
+
+export { default as routerNames } from './names'
+
+export const router = createRouter({
+    history: createWebHashHistory(import.meta.env.PUBLIC_BASE_URL),
+    routes
+})

package/template/electron-vue/renderer/domain/router/names.ts

@@ -0,0 +1,5 @@
+import * as homeRouter from './home'
+export default {
+    ...homeRouter.names,
+    notFound: '404'
+}

package/template/electron-vue/renderer/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="app"></div>
+    </body>
+</html>

package/template/electron-vue/renderer/main.css

@@ -0,0 +1,4 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" prefix(tw) layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+

package/template/electron-vue/renderer/main.ts

@@ -0,0 +1,6 @@
+import { createPinia } from 'pinia'
+import { router } from '@/renderer/domain/router'
+import { app } from '@/renderer/domain/app'
+import './main.css'
+
+app.use(createPinia()).use(router).mount('#app')

package/template/electron-vue/renderer/pages/home/index.ts

@@ -0,0 +1 @@
+export { default } from './view.vue'

package/template/electron-vue/renderer/pages/home/view.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { fetchHomeData } from '@/renderer/shared/service'
+
+const data = fetchHomeData()
+console.log('data', data)
+</script>
+
+<template>
+    <div class="tw:flex tw:justify-center tw:align-middle">Home</div>
+</template>
+
+<style scoped></style>

package/template/electron-vue/renderer/pages/index.ts

@@ -0,0 +1 @@
+export { default } from './index.vue'

package/template/electron-vue/renderer/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <div><router-view /></div>
+</template>

package/template/electron-vue/renderer/pages/not-found.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>404</div>
+</template>

package/template/electron-vue/renderer/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/electron-vue/renderer/shared/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template/electron-vue/renderer/shared/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useVisible } from './useVisible'
+export { default as useList } from './useList'

package/template/electron-vue/renderer/shared/hooks/useList.ts

@@ -0,0 +1,86 @@
+import { ref, reactive, computed, unref } from 'vue'
+import { cloneDeep, pick, isNil } from 'es-toolkit'
+import { assign, size, max } from 'es-toolkit/compat'
+
+export interface configType<ListItem, P> {
+    /**
+     * @description 默认请求参数
+     */
+    defaultParams: P
+    /** 列表请求 */
+    fetch: (state: { params: P }) => Promise<{
+        list: ListItem[]
+        page?: number
+        pageSize?: number
+        total?: number
+        sum?: Record<string, any>
+    }>
+    /** 初始化列表时的配置 */
+    initConfig?: {
+        /** 初始化的时候需要保留值的字段 */
+        keepParamsKeys?: Array<keyof P>
+    }
+}
+
+export default function createListStore<
+    P extends { page?: number; pageSize?: number; [key: string]: any },
+    ListItem extends Record<string, any> = Record<string, any>
+>(config: configType<ListItem, P>) {
+    const loading = ref(true)
+    const total = ref(0)
+    const params = reactive(cloneDeep(config.defaultParams))
+    const list = ref<ListItem[]>([])
+    const sum = reactive<Record<string, any>>({})
+    const selected = ref<ListItem[]>([])
+    const selectedKeys = ref<(string | number)[]>([])
+    const pagination = computed(() => ({
+        current: params.page || 0,
+        pageSize: params.pageSize || 0,
+        total: total.value
+    }))
+    const selectedLen = computed(() => {
+        return max([size(selected.value), size(selectedKeys.value)]) || 0
+    })
+    function resetParams() {
+        assign(params, cloneDeep(config.defaultParams))
+    }
+    async function fetchList(arg?: { params?: Partial<P>; isConcat?: boolean; isInit?: boolean }) {
+        loading.value = true
+        try {
+            if (arg?.isInit) {
+                assign(
+                    params,
+                    cloneDeep(config.defaultParams),
+                    pick(params, (config?.initConfig?.keepParamsKeys || []) as never)
+                )
+            }
+            assign(params, arg?.params)
+            const result = await config.fetch({ params: unref(params) })
+            if (!isNil(result.page) && arg?.isConcat) {
+                list.value = [...list.value, ...result.list] as ListItem[]
+            } else {
+                list.value = result.list
+            }
+            sum.value = result.sum || {}
+            total.value = result.total || total.value
+            params.page = result.page || params.page
+            params.pageSize = result.pageSize || params.pageSize
+        } finally {
+            loading.value = false
+        }
+    }
+
+    return {
+        loading,
+        total,
+        params,
+        list,
+        sum,
+        selected,
+        selectedKeys,
+        pagination,
+        selectedLen,
+        resetParams,
+        fetchList
+    }
+}

package/template/electron-vue/renderer/shared/hooks/useVisible.ts

@@ -0,0 +1,27 @@
+import { ref } from 'vue'
+import { isFunction } from 'es-toolkit'
+
+export interface useVisibleConfigType {
+    defaultVisible?: boolean
+    onBeforeShow?: () => Promise<boolean | void>
+    onBeforeHide?: () => Promise<boolean | void>
+}
+export default function useVisible(config?: useVisibleConfigType) {
+    const visible = ref(config?.defaultVisible ?? false)
+    const onShow = async () => {
+        let isShow: boolean | void = true
+        if (isFunction(config?.onBeforeShow)) {
+            isShow = await config?.onBeforeShow?.()
+        }
+        visible.value = isShow !== false
+    }
+    const onClose = async () => {
+        let isHide: boolean | void = true
+        if (isFunction(config?.onBeforeHide)) {
+            isHide = await config?.onBeforeHide?.()
+        }
+        visible.value = isHide === false
+    }
+
+    return { visible, onShow, onClose }
+}

package/template/electron-vue/renderer/shared/service/api.ts

@@ -0,0 +1 @@
+export const HOME_DATA = '/homeData'

package/template/electron-vue/renderer/shared/service/home.ts

@@ -0,0 +1,7 @@
+import { request } from './request'
+import { HOME_DATA } from './api'
+
+export async function fetchHomeData() {
+    const { data } = await request(HOME_DATA)
+    return data
+}

package/template/electron-vue/renderer/shared/service/index.ts

@@ -0,0 +1,3 @@
+export * from './request'
+export * as API from './api'
+export * from './home'

package/template/electron-vue/renderer/shared/service/request.ts

@@ -0,0 +1,5 @@
+import axios from 'axios'
+
+export const request = axios.create({
+    baseURL: import.meta.env.PUBLIC_BASE_URL + import.meta.env.PUBLIC_API_HOST
+})

package/template/electron-vue/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "jsx": "preserve",
+        "jsxImportSource": "vue",
+        "sourceMap": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "strictPropertyInitialization": false,
+        "esModuleInterop": true,
+        "lib": ["ESNext", "DOM"],
+        "skipLibCheck": true,
+        "paths": {
+            "@/*": ["./*"],
+        },
+    },
+    "include": ["**/*.tsx", "**/*.ts", "**/*.vue"],
+    "exclude": ["scripts", "rsbuild.config.ts"],
+    "references": [{ "path": "./tsconfig.node.json" }],
+}

package/template/electron-vue/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "resolveJsonModule": true
+    },
+    "include": ["scripts", "rsbuild.config.ts", "package.json"]
+}

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

@@ -1,8 +1,8 @@
 import { FunctionComponent, ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { GlobalStyles } from 'tss-react'
+import { Global, ThemeProvider } from '@emotion/react'
 import { request } from '@/shared/service'
-import { globalCss } from '@/shared/styles'
+import { globalCss, theme } from '@/shared/styles'
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -21,9 +21,11 @@ export interface propsType {
 }
 export const Root: FunctionComponent<propsType> = props => {
     return (
-        <QueryClientProvider client={queryClient}>
-            <GlobalStyles styles={globalCss} />
-            {props.children}
-        </QueryClientProvider>
+        <ThemeProvider theme={theme}>
+            <QueryClientProvider client={queryClient}>
+                <Global styles={globalCss} />
+                {props.children}
+            </QueryClientProvider>
+        </ThemeProvider>
     )
 }

package/template/web-app/react-rsbuild/env.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="@rsbuild/core/types" />
 
+import '@emotion/react'
+import { type themeType } from '@/shared/styles'
+
 declare global {
     interface ImportMetaEnv {
         readonly PUBLIC_BASE_URL: string
@@ -19,3 +22,7 @@ declare module '*.svg?react' {
     const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement>>
     export default ReactComponent
 }
+
+declare module '@emotion/react' {
+    export interface Theme extends themeType {}
+}

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

@@ -20,6 +20,7 @@
     },
     "dependencies": {
         "@emotion/react": "11.14.0",
+        "@emotion/styled": "11.14.1",
         "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
         "define-zustand": "3.4.0",
@@ -30,7 +31,6 @@
         "react-dom": "18.3.1",
         "react-router": "7.5.0",
         "react-use": "17.5.0",
-        "tss-react": "4.9.19",
         "type-fest": "4.33.0",
         "zustand": "5.0.3"
     },
@@ -39,12 +39,13 @@
         "@commitlint/config-conventional": "17.6.1",
         "@commitlint/cz-commitlint": "17.5.0",
         "@eslint/js": "9.15.0",
-        "@rsbuild/core": "1.5.2",
+        "@rsbuild/core": "1.5.10",
         "@rsbuild/plugin-eslint": "1.1.2",
         "@rsbuild/plugin-react": "1.4.0",
         "@rsbuild/plugin-svgr": "1.2.2",
         "@rsbuild/plugin-type-check": "1.2.4",
         "@rsdoctor/rspack-plugin": "1.2.3",
+        "@swc/plugin-emotion": "11.1.0",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",

package/template/web-app/react-rsbuild/pages/home/view.styled.ts

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled'
+
+export const StyledRoot = styled.div`
+    ${({ theme }) => theme.tools.flex('center', 'center')}
+`

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

@@ -1,11 +1,10 @@
 import { useHomeData } from '@/shared/service'
-import { useStyles } from './view.css'
+import { StyledRoot } from './view.styled'
 
 export default function Home() {
     const { data } = useHomeData()
-    const { classes } = useStyles()
 
     console.log('data', data)
 
-    return <div className={classes.root}>sdfs</div>
+    return <StyledRoot>sdfs</StyledRoot>
 }

package/template/web-app/react-rsbuild/rsbuild.config.ts

@@ -41,6 +41,13 @@ export default defineConfig(({ envMode, command }) => {
                     new StylelintWebpackPlugin(),
                     process.env.RSDOCTOR && new RsdoctorRspackPlugin()
                 ]
+            },
+            swc: {
+                jsc: {
+                    experimental: {
+                        plugins: [['@swc/plugin-emotion', {}]]
+                    }
+                }
             }
         },
         plugins: [
@@ -52,7 +59,11 @@ export default defineConfig(({ envMode, command }) => {
                     }
                 }),
             pluginSvgr(),
-            pluginReact()
+            pluginReact({
+                swcReactOptions: {
+                    importSource: '@emotion/react'
+                }
+            })
         ],
         performance: {
             removeConsole: command === 'build' ? ['log'] : false,

package/template/web-app/react-rsbuild/shared/styles/global.ts

@@ -1,7 +1,7 @@
-import { CSSInterpolation } from 'tss-react'
+import { css } from '@emotion/react'
 
-export const globalCss: CSSInterpolation = {
-    body: {
-        margin: 0
+export const globalCss = css`
+    body {
+        margin: 0;
     }
-}
+`

package/template/web-app/react-rsbuild/shared/styles/index.ts

@@ -1,2 +1,2 @@
 export * from './global'
-export * from './tss'
+export * from './theme'

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

@@ -18,6 +18,7 @@
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react",
         "paths": {
             "@/*": ["./*"]
         }

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

@@ -1,8 +1,8 @@
 import { FunctionComponent, ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { GlobalStyles } from 'tss-react'
+import { Global, ThemeProvider } from '@emotion/react'
 import { request } from '@/shared/service'
-import { globalCss } from '@/shared/styles'
+import { globalCss, theme } from '@/shared/styles'
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -21,9 +21,11 @@ export interface propsType {
 }
 export const Root: FunctionComponent<propsType> = props => {
     return (
-        <QueryClientProvider client={queryClient}>
-            <GlobalStyles styles={globalCss} />
-            {props.children}
-        </QueryClientProvider>
+        <ThemeProvider theme={theme}>
+            <QueryClientProvider client={queryClient}>
+                <Global styles={globalCss} />
+                {props.children}
+            </QueryClientProvider>
+        </ThemeProvider>
     )
 }

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

@@ -19,6 +19,7 @@
     },
     "dependencies": {
         "@emotion/react": "11.14.0",
+        "@emotion/styled": "11.14.1",
         "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
         "define-zustand": "3.4.0",
@@ -29,7 +30,6 @@
         "react-dom": "18.3.1",
         "react-router": "7.5.0",
         "react-use": "17.5.0",
-        "tss-react": "4.9.19",
         "type-fest": "4.33.0",
         "zustand": "5.0.3"
     },
@@ -37,6 +37,7 @@
         "@commitlint/cli": "17.6.1",
         "@commitlint/config-conventional": "17.6.1",
         "@commitlint/cz-commitlint": "17.5.0",
+        "@emotion/babel-plugin": "11.13.5",
         "@eslint/js": "9.15.0",
         "@faker-js/faker": "8.4.1",
         "@types/node": "18.16.0",

package/template/web-app/react-vite/pages/home/view.styled.ts

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled'
+
+export const StyledRoot = styled.div`
+    ${({ theme }) => theme.tools.flex('center', 'center')}
+`