create-packer 1.29.0 → 1.30.0

package/package.json

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

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

@@ -24,7 +24,6 @@
         "postcss": "8.4.35",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "tailwindcss": "3.3.3",
         "typescript": "5.3.3"
     },
     "devDependencies": {

package/template/web-app/next/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
     plugins: {
-        tailwindcss: {},
         autoprefixer: {}
     }
 }

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

@@ -1,7 +1,9 @@
 {
     "root": true,
     "parser": "@typescript-eslint/parser",
-    "plugins": ["prettier"],
+    "plugins": [
+        "prettier"
+    ],
     "extends": [
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
@@ -51,12 +53,32 @@
                     "type"
                 ],
                 "pathGroups": [
-                    { "pattern": "react", "group": "external", "position": "before" },
-                    { "pattern": "react-dom/*", "group": "external", "position": "before" },
-                    { "pattern": "react-router", "group": "external", "position": "before" },
-                    { "pattern": "react-router-dom", "group": "external", "position": "before" }
+                    {
+                        "pattern": "react",
+                        "group": "external",
+                        "position": "before"
+                    },
+                    {
+                        "pattern": "react-dom/*",
+                        "group": "external",
+                        "position": "before"
+                    },
+                    {
+                        "pattern": "react-router",
+                        "group": "external",
+                        "position": "before"
+                    },
+                    {
+                        "pattern": "react-router-dom",
+                        "group": "external",
+                        "position": "before"
+                    }
                 ],
-                "pathGroupsExcludedImportTypes": ["react", "react-router", "react-router-dom"]
+                "pathGroupsExcludedImportTypes": [
+                    "react",
+                    "react-router",
+                    "react-router-dom"
+                ]
             }
         ],
         "no-case-declarations": "off",
@@ -70,7 +92,12 @@
                 "ignoreParameters": true
             }
         ],
-        "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+                "argsIgnorePattern": "^_"
+            }
+        ],
         "@typescript-eslint/member-delimiter-style": 0,
         "@typescript-eslint/class-name-casing": 0,
         "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -89,4 +116,4 @@
         ],
         "no-constant-condition": "off"
     }
-}
+}

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

@@ -1,5 +1,6 @@
 import { StrictMode, useLayoutEffect } from 'react'
 import { RouterProvider } from 'react-router-dom'
+import { ThemeProvider } from '@/shared/theme'
 import { request } from '@/shared/service'
 import { routerInstance } from '@/domain/router'
 
@@ -15,7 +16,9 @@ const App = () => {
 
     return (
         <StrictMode>
-            <RouterProvider router={routerInstance} />
+            <ThemeProvider>
+                <RouterProvider router={routerInstance} />
+            </ThemeProvider>
         </StrictMode>
     )
 }

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

@@ -20,7 +20,7 @@
     "dependencies": {
         "1k-types": "1.2.0",
         "axios": "1.3.6",
-        "define-zustand": "3.1.0",
+        "define-zustand": "3.1.1",
         "immer": "10.0.1",
         "lodash-es": "4.17.21",
         "qs": "6.11.2",
@@ -28,6 +28,7 @@
         "react-dom": "18.3.1",
         "react-router-dom": "6.14.0",
         "react-use": "17.5.0",
+        "styled-components": "6.1.11",
         "zustand": "4.4.1"
     },
     "devDependencies": {
@@ -63,7 +64,6 @@
         "rollup-plugin-visualizer": "5.9.2",
         "stylelint": "16.2.1",
         "stylelint-config-standard-scss": "13.0.0",
-        "tailwindcss": "3.3.1",
         "typescript": "5.3.3",
         "vite": "4.5.2",
         "vite-plugin-mock-dev-server": "1.4.7",

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

@@ -1,7 +1,13 @@
-import './home.css'
 import { useEffect } from 'react'
+import { styled } from 'styled-components'
 import { request, API } from '@/shared/service'
 
+const Wrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`
+
 export default function Home() {
     useEffect(() => {
         request.post(API.HOME_DATA).then(({ data }) => {
@@ -9,5 +15,5 @@ export default function Home() {
         })
     }, [])
 
-    return <div className={'flex justify-center items-center'}>sdfs</div>
+    return <Wrapper className={'flex justify-center items-center'}>sdfs</Wrapper>
 }

package/template/web-app/react/postcss.config.cjs

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

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

@@ -0,0 +1,2 @@
+export * from './theme.styles'
+export * from './theme.components'

package/template/web-app/react/shared/theme/theme.components.tsx

@@ -0,0 +1,7 @@
+import { FunctionComponent, ReactNode } from 'react'
+import { ThemeProvider as ThemeProviderComponent } from 'styled-components'
+import { theme } from './theme.styles'
+
+export const ThemeProvider: FunctionComponent<{ children: ReactNode }> = props => {
+    return <ThemeProviderComponent theme={theme}>{props.children}</ThemeProviderComponent>
+}

package/template/web-app/react/shared/theme/theme.d.ts

@@ -0,0 +1,8 @@
+// import original module declarations
+import 'styled-components'
+import { themeType } from './theme.styles'
+
+// and extend them!
+declare module 'styled-components' {
+    export interface DefaultTheme extends themeType {}
+}

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

@@ -0,0 +1,7 @@
+export const theme = {
+    color: {
+        black: '#000'
+    }
+}
+
+export type themeType = typeof theme

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

@@ -3,7 +3,11 @@
         "baseUrl": ".",
         "target": "ESNext",
         "useDefineForClassFields": true,
-        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "lib": [
+            "DOM",
+            "DOM.Iterable",
+            "ESNext"
+        ],
         "allowJs": false,
         "skipLibCheck": true,
         "esModuleInterop": false,
@@ -19,10 +23,22 @@
         "noEmit": true,
         "jsx": "react-jsx",
         "paths": {
-            "@/*": ["./*"]
+            "@/*": [
+                "./*"
+            ]
         }
     },
-    "include": ["**/*.ts", "**/*.tsx"],
-    "exclude": ["scripts", "vite.config.ts"],
-    "references": [{ "path": "./tsconfig.node.json" }]
-}
+    "include": [
+        "**/*.ts",
+        "**/*.tsx"
+    ],
+    "exclude": [
+        "scripts",
+        "vite.config.ts"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

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

@@ -1,5 +1,6 @@
 import { StrictMode, useLayoutEffect } from 'react'
 import { RouterProvider } from 'react-router-dom'
+import { ThemeProvider } from '@/shared/theme'
 import { request } from '@/shared/service'
 import { routerInstance } from '@/domain/router'
 
@@ -15,7 +16,9 @@ const App = () => {
 
     return (
         <StrictMode>
-            <RouterProvider router={routerInstance} />
+            <ThemeProvider>
+                <RouterProvider router={routerInstance} />
+            </ThemeProvider>
         </StrictMode>
     )
 }

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

@@ -21,7 +21,7 @@
     "dependencies": {
         "1k-types": "1.2.0",
         "axios": "1.6.7",
-        "define-zustand": "3.1.0",
+        "define-zustand": "3.1.1",
         "immer": "10.0.3",
         "lodash-es": "4.17.21",
         "qs": "6.11.2",
@@ -29,8 +29,8 @@
         "react-dom": "18.3.1",
         "react-router-dom": "6.14.0",
         "react-use": "17.5.0",
-        "tailwindcss": "3.4.1",
-        "zustand": "4.5.1"
+        "styled-components": "6.1.11",
+        "zustand": "4.4.1"
     },
     "devDependencies": {
         "@commitlint/cli": "18.6.1",

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

@@ -1,6 +1,11 @@
-import styles from './home.module.css'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`
 
 export default function Home() {
-    console.log('1', 1)
-    return <div className={styles.root}>sdsddds</div>
+    return <Wrapper>sdfs</Wrapper>
 }

package/template/web-app/react-webpack/postcss.config.js

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

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

@@ -0,0 +1,2 @@
+export * from './theme.styles'
+export * from './theme.components'

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

@@ -0,0 +1,7 @@
+import { FunctionComponent, ReactNode } from 'react'
+import { ThemeProvider as ThemeProviderComponent } from 'styled-components'
+import { theme } from './theme.styles'
+
+export const ThemeProvider: FunctionComponent<{ children: ReactNode }> = props => {
+    return <ThemeProviderComponent theme={theme}>{props.children}</ThemeProviderComponent>
+}

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

@@ -0,0 +1,8 @@
+// import original module declarations
+import 'styled-components'
+import { themeType } from './theme.styles'
+
+// and extend them!
+declare module 'styled-components' {
+    export interface DefaultTheme extends themeType {}
+}

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

@@ -0,0 +1,7 @@
+export const theme = {
+    color: {
+        black: '#000'
+    }
+}
+
+export type themeType = typeof theme

package/template/web-extension/content_script/content.tsx

@@ -1,5 +1,3 @@
-import './content.css'
-
 export default function Home() {
     return <div>dfdsf</div>
 }

package/template/web-extension/content_script/index.tsx

@@ -1,11 +1,14 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { AppContext } from '@/domain/app'
 import Content from './content'
 
 const app = document.createElement('div')
 createRoot(app).render(
     <StrictMode>
-        <Content />
+        <AppContext.Root>
+            <Content />
+        </AppContext.Root>
     </StrictMode>
 )
 

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

@@ -0,0 +1,6 @@
+import { FunctionComponent, ReactNode } from 'react'
+import { ThemeProvider } from '@/shared/theme'
+
+export const Root: FunctionComponent<{ children: ReactNode }> = props => {
+    return <ThemeProvider>{props.children}</ThemeProvider>
+}

package/template/web-extension/domain/app/components/index.ts

@@ -0,0 +1 @@
+export * as AppContext from './app-context'

package/template/web-extension/domain/app/index.ts

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

package/template/web-extension/package.json

@@ -17,13 +17,14 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
-        "define-zustand": "3.1.0",
+        "define-zustand": "3.1.1",
         "immer": "10.0.1",
         "ky": "1.1.3",
         "lodash-es": "4.17.21",
         "qs": "6.11.2",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "styled-components": "6.1.11",
         "zustand": "4.4.1"
     },
     "devDependencies": {
@@ -37,8 +38,8 @@
         "@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/react": "18.3.3",
+        "@types/react-dom": "18.3.0",
         "@typescript-eslint/eslint-plugin": "7.0.2",
         "@typescript-eslint/parser": "7.0.2",
         "@vitejs/plugin-react": "4.2.1",
@@ -62,7 +63,6 @@
         "sass": "1.63.4",
         "stylelint": "16.2.1",
         "stylelint-config-standard-scss": "13.0.0",
-        "tailwindcss": "3.3.7",
         "typescript": "5.3.3",
         "vite": "4.5.2",
         "vite-plugin-stylelint": "5.3.1",

package/template/web-extension/popup/index.tsx

@@ -1,9 +1,12 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { AppContext } from '@/domain/app'
 import Popup from './popup.container'
 
 createRoot(document.getElementById('root') as HTMLElement).render(
     <StrictMode>
-        <Popup />
+        <AppContext.Root>
+            <Popup />
+        </AppContext.Root>
     </StrictMode>
 )

package/template/web-extension/popup/popup.container.tsx

@@ -1,5 +1,3 @@
-import './popup.css'
-
 export default function Home() {
     return <div></div>
 }

package/template/web-extension/postcss.config.cjs

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

package/template/web-extension/shared/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './theme.styles'
+export * from './theme.components'

package/template/web-extension/shared/theme/theme.components.tsx

@@ -0,0 +1,7 @@
+import { FunctionComponent, ReactNode } from 'react'
+import { ThemeProvider as ThemeProviderComponent } from 'styled-components'
+import { theme } from './theme.styles'
+
+export const ThemeProvider: FunctionComponent<{ children: ReactNode }> = props => {
+    return <ThemeProviderComponent theme={theme}>{props.children}</ThemeProviderComponent>
+}

package/template/web-extension/shared/theme/theme.d.ts

@@ -0,0 +1,8 @@
+// import original module declarations
+import 'styled-components'
+import { themeType } from './theme.styles'
+
+// and extend them!
+declare module 'styled-components' {
+    export interface DefaultTheme extends themeType {}
+}

package/template/web-extension/shared/theme/theme.styles.ts

@@ -0,0 +1,7 @@
+export const theme = {
+    color: {
+        black: '#000'
+    }
+}
+
+export type themeType = typeof theme

package/template/web-app/next/tailwind.config.js

@@ -1,20 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [
-        './pages/**/*.{js,ts,jsx,tsx,mdx}',
-        './components/**/*.{js,ts,jsx,tsx,mdx}',
-        './app/**/*.{js,ts,jsx,tsx,mdx}'
-    ],
-    theme: {
-        extend: {
-            backgroundImage: {
-                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-                'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
-            }
-        }
-    },
-    plugins: [],
-    corePlugins: {
-        preflight: false
-    }
-}

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

@@ -1 +0,0 @@
-

package/template/web-app/react/tailwind.config.cjs

@@ -1,17 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [
-        './index.html',
-        './main.tsx',
-        './pages/**/*.{ts,tsx,js,jsx}',
-        './domain/**/*.{ts,tsx,js,jsx}',
-        './shared/**/*.{ts,tsx,js,jsx}'
-    ],
-    theme: {
-        extend: {}
-    },
-    plugins: [],
-    corePlugins: {
-        preflight: false
-    }
-}

package/template/web-app/react-webpack/pages/home/home.module.css

@@ -1,3 +0,0 @@
-.root {
-    @apply flex justify-center items-center;
-}

package/template/web-app/react-webpack/tailwind.config.js

@@ -1,17 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [
-        './index.html',
-        './main.tsx',
-        './pages/**/*.{ts,tsx,js,jsx}',
-        './domain/**/*.{ts,tsx,js,jsx}',
-        './shared/**/*.{ts,tsx,js,jsx}'
-    ],
-    theme: {
-        extend: {}
-    },
-    plugins: [],
-    corePlugins: {
-        preflight: false
-    }
-}

package/template/web-extension/content_script/content.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/template/web-extension/popup/popup.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/template/web-extension/tailwind.config.cjs

@@ -1,13 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [
-        './index.html',
-        './popup/**/*.{ts,tsx,js,jsx}',
-        './background/**/*.{ts,tsx,js,jsx}',
-        './content_script/**/*.{ts,tsx,js,jsx}'
-    ],
-    theme: {
-        extend: {}
-    },
-    plugins: []
-}