create-packer 1.46.4 → 1.47.1

package/template/web-app/react-vite/shared/hooks/useLazyRender.ts

@@ -0,0 +1,30 @@
+import { RefObject, useEffect, useRef } from 'react'
+import { useIntersection } from 'react-use'
+import { useSyncState } from './useSyncState'
+
+interface optionsType extends IntersectionObserverInit {
+    dynamicRender?: boolean
+    isClose?: boolean
+}
+export function useLazyRender(ref: RefObject<HTMLElement>, options: optionsType) {
+    const emptyRef = useRef(null)
+    const intersection = useIntersection(options.isClose ? emptyRef : ref, {
+        root: options.root,
+        rootMargin: options.rootMargin,
+        threshold: options.threshold
+    })
+    const [isRenderRef, isRender, setIsRender] = useSyncState(false)
+
+    useEffect(() => {
+        if (options.isClose) {
+            setIsRender(true)
+            return
+        }
+        if (!options.dynamicRender && isRenderRef.current) {
+            return
+        }
+        setIsRender(!!intersection?.isIntersecting)
+    }, [intersection?.isIntersecting, options.isClose, options.dynamicRender])
+
+    return isRender
+}

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

@@ -1,26 +1,26 @@
-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
-}
+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-vite/shared/hooks/useSyncState.ts

@@ -1,15 +1,15 @@
-import { useRef, useState, Dispatch, SetStateAction } from 'react'
-import { isFunction } from 'es-toolkit'
-
-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) as S
-        setState($newState)
-        syncState.current = $newState
-    }
-
-    return [syncState, state, $setState] as const
-}
+import { useRef, useState, Dispatch, SetStateAction } from 'react'
+import { isFunction } from 'es-toolkit'
+
+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) as S
+        setState($newState)
+        syncState.current = $newState
+    }
+
+    return [syncState, state, $setState] as const
+}

package/template/web-app/react-vite/shared/hooks/useVisible.ts

@@ -1,27 +1,27 @@
-import { useState } from 'react'
-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, setVisible] = useState(config?.defaultVisible ?? false)
-    const onShow = async () => {
-        let isShow: boolean | void = true
-        if (isFunction(config?.onBeforeShow)) {
-            isShow = await config?.onBeforeShow?.()
-        }
-        setVisible(isShow !== false)
-    }
-    const onClose = async () => {
-        let isHide: boolean | void = true
-        if (isFunction(config?.onBeforeHide)) {
-            isHide = await config?.onBeforeHide?.()
-        }
-        setVisible(isHide === false)
-    }
-
-    return { visible, onShow, onClose }
-}
+import { useState } from 'react'
+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, setVisible] = useState(config?.defaultVisible ?? false)
+    const onShow = async () => {
+        let isShow: boolean | void = true
+        if (isFunction(config?.onBeforeShow)) {
+            isShow = await config?.onBeforeShow?.()
+        }
+        setVisible(isShow !== false)
+    }
+    const onClose = async () => {
+        let isHide: boolean | void = true
+        if (isFunction(config?.onBeforeHide)) {
+            isHide = await config?.onBeforeHide?.()
+        }
+        setVisible(isHide === false)
+    }
+
+    return { visible, onShow, onClose }
+}

package/template/web-app/react-vite/shared/service/api.ts

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

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

@@ -1,9 +1,9 @@
-import { useQuery, QueryOptions } from '@tanstack/react-query'
-import { HOME_DATA } from './api'
-
-export const useHomeData = (options?: QueryOptions) => {
-    return useQuery({
-        ...options,
-        queryKey: [HOME_DATA, ...(options?.queryKey || [])]
-    })
-}
+import { useQuery, QueryOptions } from '@tanstack/react-query'
+import { HOME_DATA } from './api'
+
+export const useHomeData = (options?: QueryOptions) => {
+    return useQuery({
+        ...options,
+        queryKey: [HOME_DATA, ...(options?.queryKey || [])]
+    })
+}

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

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

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

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

package/template/web-app/react-vite/shared/styles/theme.ts

@@ -3,16 +3,6 @@ import { isString } from 'es-toolkit'
 import { isNumber } from 'es-toolkit/compat'
 
 export const theme = {
-    text: {
-        xs: { fontSize: '12px', lineHeight: '20px' },
-        sm: { fontSize: '14px', lineHeight: '22px' },
-        base: { fontSize: '16px', lineHeight: '24px' },
-        lg: { fontSize: '18px', lineHeight: '26px' },
-        xl: { fontSize: '20px', lineHeight: '28px' },
-        '2xl': { fontSize: '24px', lineHeight: '32px' },
-        '3xl': { fontSize: '28px', lineHeight: '40px' },
-        '4xl': { fontSize: '32px', lineHeight: '44px' }
-    } satisfies Record<string, CSSProperties>,
     tools: {
         ellipsis: () => ({
             overflow: 'hidden',

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

@@ -1,33 +1,33 @@
-{
-    "compilerOptions": {
-        "baseUrl": ".",
-        "target": "ESNext",
-        "useDefineForClassFields": true,
-        "lib": ["DOM", "DOM.Iterable", "ESNext"],
-        "allowJs": false,
-        "skipLibCheck": true,
-        "esModuleInterop": false,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "strictPropertyInitialization": false,
-        "strictNullChecks": true,
-        "module": "ESNext",
-        "moduleResolution": "bundler",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx",
-        "jsxImportSource": "@emotion/react",
-        "paths": {
-            "@/*": ["./*"]
-        }
-    },
-    "include": ["**/*.ts", "**/*.tsx"],
-    "exclude": ["scripts", "vite.config.ts"],
-    "references": [
-        {
-            "path": "./tsconfig.node.json"
-        }
-    ]
-}
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "strictPropertyInitialization": false,
+        "strictNullChecks": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react",
+        "paths": {
+            "@/*": ["./*"]
+        }
+    },
+    "include": ["**/*.ts", "**/*.tsx"],
+    "exclude": ["scripts", "vite.config.ts"],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

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

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

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

@@ -14,7 +14,7 @@
         "at-rule-no-unknown": [
             true,
             {
-                "ignoreAtRules": ["tailwind", "apply", "use"]
+                "ignoreAtRules": ["tailwind", "apply", "use", "reference"]
             }
         ],
         "declaration-block-no-redundant-longhand-properties": null,
@@ -28,7 +28,7 @@
         "scss/at-rule-no-unknown": [
             true,
             {
-                "ignoreAtRules": ["tailwind", "apply"]
+                "ignoreAtRules": ["tailwind", "apply", "reference"]
             }
         ]
     }

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

@@ -1,9 +1,9 @@
-{
-    "recommendations": [
-        "vue.volar",
-        "vue.vscode-typescript-vue-plugin",
-        "dbaeumer.vscode-eslint",
-        "stylelint.vscode-stylelint",
-        "esbenp.prettier-vscode"
-    ]
-}
+{
+    "recommendations": [
+        "vue.volar",
+        "vue.vscode-typescript-vue-plugin",
+        "dbaeumer.vscode-eslint",
+        "stylelint.vscode-stylelint",
+        "esbenp.prettier-vscode"
+    ]
+}

package/template/web-app/vue/domain/components/app.vue

@@ -1,18 +1,18 @@
-<template>
-    <router-view />
-</template>
-
-<script setup lang="ts">
-import { router, routerNames } from '@/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>
+<template>
+    <router-view />
+</template>
+
+<script setup lang="ts">
+import { router, routerNames } from '@/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/web-app/vue/domain/components/createComponentInstance.ts

@@ -1,43 +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)
-    }
-}
+import { createVNode, render, VNodeChild } from 'vue'
+import app from './app.vue'
+
+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/web-app/vue/domain/components/index.ts

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

package/template/web-app/vue/domain/router/home/index.ts

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

package/template/web-app/vue/domain/router/home/names.ts

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

package/template/web-app/vue/domain/router/home/routes.ts

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

package/template/web-app/vue/domain/router/index.ts

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

package/template/web-app/vue/domain/router/names.ts

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