create-packer 1.26.4 → 1.28.0

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

@@ -1,27 +1,38 @@
-{
-    "compilerOptions": {
-        "baseUrl": ".",
-        "target": "ESNext",
-        "useDefineForClassFields": true,
-        "lib": ["DOM", "DOM.Iterable", "ESNext"],
-        "allowJs": true,
-        "strictNullChecks": true,
-        "skipLibCheck": true,
-        "esModuleInterop": false,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "strictPropertyInitialization": false,
-        "module": "ESNext",
-        "moduleResolution": "Node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx",
-        "paths": {
-            "@/*": ["./*"]
-        }
-    },
-    "include": ["**/*.tsx", "**/*.ts"],
-    "exclude": ["scripts"]
-}
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": [
+            "DOM",
+            "DOM.Iterable",
+            "ESNext"
+        ],
+        "allowJs": true,
+        "strictNullChecks": true,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "strictPropertyInitialization": false,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "paths": {
+            "@/*": [
+                "./*"
+            ]
+        }
+    },
+    "include": [
+        "**/*.tsx",
+        "**/*.ts"
+    ],
+    "exclude": [
+        "scripts",
+    ]
+}

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

@@ -1,9 +1,9 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": []
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": []
+}

package/template/web-app/react-webpack/webpack.config.mjs

@@ -1,163 +1,162 @@
-import path from 'path'
-import webpack from 'webpack'
-import WebpackBar from 'webpackbar'
-import { EsbuildPlugin } from 'esbuild-loader'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import EslintWebpackPlugin from 'eslint-webpack-plugin'
-import StylelintWebpackPlugin from 'stylelint-webpack-plugin'
-import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
-import * as dotenv from 'dotenv'
-import { ROOT, OUTPUT, createCssLoader, createStyleLoader } from './webpack_config/index.mjs'
-
-/**
- *
- * @param {String} mode
- * @param {boolean} isProd
- * @returns {object}
- */
-function getEnvConfig(mode, isProd) {
-    const envConfig = dotenv.config({
-        path: isProd ? '.env' : `.env.${mode}`
-    }).parsed
-    Object.keys(envConfig).forEach(k => {
-        envConfig[k] = JSON.stringify(envConfig[k])
-    })
-    return envConfig
-}
-
-export default function (env) {
-    const isProd = ['prod', 'analyse'].includes(env.mode)
-    const envConfig = getEnvConfig(env.mode, isProd)
-    const publicPath = JSON.parse(envConfig.ENV_BASE_URL)
-
-    return {
-        entry: {
-            index: [path.join(ROOT, 'main.tsx')]
-        },
-        output: {
-            filename: isProd ? 'js/[name].[chunkhash].js' : 'js/[name].js',
-            chunkFilename: isProd ? 'js/[name].[chunkhash].js' : 'js/[name].js',
-            path: OUTPUT,
-            publicPath,
-            clean: true
-        },
-        experiments: {
-            lazyCompilation: true
-        },
-        mode: isProd ? 'production' : 'development',
-        stats: isProd ? 'normal' : 'errors-only',
-        performance: {
-            hints: false
-        },
-        devServer: {
-            host: '0.0.0.0',
-            hot: true,
-            open: publicPath,
-            static: {
-                publicPath
-            },
-            historyApiFallback: {
-                disableDotRule: true,
-                index: publicPath
-            },
-            devMiddleware: {
-                publicPath
-            },
-            proxy: {
-                '/api': {
-                    target: 'http://127.0.0.1:3000',
-                    changeOrigin: true,
-                    secure: false,
-                    pathRewrite: {
-                        '^/api': ''
-                    }
-                }
-            }
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.[jt]sx?$/,
-                    loader: 'esbuild-loader',
-                    options: {
-                        target: 'chrome82',
-                        drop: isProd ? ['console', 'debugger'] : []
-                    }
-                },
-                {
-                    test: /\.(png|jpg|jpeg|gif)$/i,
-                    type: 'asset/resource'
-                },
-                {
-                    test: /\.svg$/i,
-                    type: 'asset/resource',
-                    resourceQuery: /url/ // *.svg?url
-                },
-                {
-                    test: /\.svg$/i,
-                    issuer: /\.[jt]sx?$/,
-                    resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
-                    use: ['@svgr/webpack']
-                },
-                {
-                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
-                    type: 'asset/resource'
-                },
-                {
-                    test: /\.css$/,
-                    exclude: /\.module\.css$/,
-                    use: [createStyleLoader(isProd), createCssLoader(), 'postcss-loader']
-                },
-                {
-                    test: /\.module\.css$/,
-                    use: [createStyleLoader(isProd), createCssLoader(true), 'postcss-loader']
-                }
-            ]
-        },
-        plugins: [
-            new WebpackBar(),
-            new HtmlWebpackPlugin({
-                filename: 'index.html',
-                template: path.resolve(ROOT, 'index.html')
-            }),
-            new EslintWebpackPlugin(),
-            new StylelintWebpackPlugin(),
-            new ForkTsCheckerWebpackPlugin(),
-            new webpack.DefinePlugin(envConfig),
-            new MiniCssExtractPlugin({
-                filename: isProd ? 'css/[name].[contenthash].css' : 'css/[name].css',
-                chunkFilename: isProd ? 'css/[name].[contenthash].css' : 'css/[name].css'
-            }),
-            env.mode === 'analyzer' && new BundleAnalyzerPlugin()
-        ],
-        optimization: {
-            minimizer: [new EsbuildPlugin()],
-            splitChunks: {
-                minChunks: 1,
-                cacheGroups: {
-                    default: false,
-                    react: {
-                        test: /\/(react|react-dom)\//,
-                        chunks: 'all',
-                        name: 'react'
-                    },
-                    vendor: {
-                        test: /\/node_modules\//,
-                        chunks: 'all',
-                        name: 'vendor',
-                        priority: -1
-                    }
-                }
-            }
-        },
-        resolve: {
-            extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
-            alias: {
-                '@': ROOT
-            },
-            modules: ['node_modules']
-        }
-    }
-}
+import path from 'path'
+import webpack from 'webpack'
+import WebpackBar from 'webpackbar'
+import { EsbuildPlugin } from 'esbuild-loader'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import EslintWebpackPlugin from 'eslint-webpack-plugin'
+import StylelintWebpackPlugin from 'stylelint-webpack-plugin'
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+import * as dotenv from 'dotenv'
+import { ROOT, OUTPUT, createCssLoader, createStyleLoader } from './webpack_config/index.mjs'
+
+/**
+ *
+ * @param {String} mode
+ * @param {boolean} isProd
+ * @returns {object}
+ */
+function getEnvConfig(mode, isProd) {
+    const envConfig = dotenv.config({
+        path: isProd ? '.env' : `.env.${mode}`
+    }).parsed
+    Object.keys(envConfig).forEach(k => {
+        envConfig[k] = JSON.stringify(envConfig[k])
+    })
+    return envConfig
+}
+
+export default function (env) {
+    const isProd = ['prod', 'analyse'].includes(env.mode)
+    const envConfig = getEnvConfig(env.mode, isProd)
+    const publicPath = JSON.parse(envConfig.ENV_BASE_URL)
+
+    return {
+        entry: {
+            index: [path.join(ROOT, 'main.tsx')]
+        },
+        output: {
+            filename: isProd ? 'js/[name].[chunkhash].js' : 'js/[name].js',
+            chunkFilename: isProd ? 'js/[name].[chunkhash].js' : 'js/[name].js',
+            path: OUTPUT,
+            publicPath,
+            clean: true
+        },
+        mode: isProd ? 'production' : 'development',
+        stats: isProd ? 'normal' : 'errors-only',
+        performance: {
+            hints: false
+        },
+        devServer: {
+            host: '0.0.0.0',
+            hot: true,
+            open: publicPath,
+            static: {
+                publicPath
+            },
+            historyApiFallback: {
+                disableDotRule: true,
+                index: publicPath
+            },
+            devMiddleware: {
+                publicPath
+            },
+            proxy: [
+                {
+                    '/api': {
+                        target: 'http://127.0.0.1:3000',
+                        changeOrigin: true,
+                        secure: false,
+                        pathRewrite: {
+                            '^/api': ''
+                        }
+                    }
+                }
+            ]
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.[jt]sx?$/,
+                    loader: 'esbuild-loader',
+                    options: {
+                        target: 'chrome82',
+                        drop: isProd ? ['console', 'debugger'] : []
+                    }
+                },
+                {
+                    test: /\.(png|jpg|jpeg|gif)$/i,
+                    type: 'asset/resource'
+                },
+                {
+                    test: /\.svg$/i,
+                    type: 'asset/resource',
+                    resourceQuery: /url/ // *.svg?url
+                },
+                {
+                    test: /\.svg$/i,
+                    issuer: /\.[jt]sx?$/,
+                    resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+                    use: ['@svgr/webpack']
+                },
+                {
+                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
+                    type: 'asset/resource'
+                },
+                {
+                    test: /\.css$/,
+                    exclude: /\.module\.css$/,
+                    use: [createStyleLoader(isProd), createCssLoader(), 'postcss-loader']
+                },
+                {
+                    test: /\.module\.css$/,
+                    use: [createStyleLoader(isProd), createCssLoader(true), 'postcss-loader']
+                }
+            ]
+        },
+        plugins: [
+            new WebpackBar(),
+            new HtmlWebpackPlugin({
+                filename: 'index.html',
+                template: path.resolve(ROOT, 'index.html')
+            }),
+            new EslintWebpackPlugin(),
+            new StylelintWebpackPlugin(),
+            new ForkTsCheckerWebpackPlugin(),
+            new webpack.DefinePlugin(envConfig),
+            new MiniCssExtractPlugin({
+                filename: isProd ? 'css/[name].[contenthash].css' : 'css/[name].css',
+                chunkFilename: isProd ? 'css/[name].[contenthash].css' : 'css/[name].css'
+            }),
+            env.mode === 'analyzer' && new BundleAnalyzerPlugin()
+        ],
+        optimization: {
+            minimizer: [new EsbuildPlugin()],
+            splitChunks: {
+                minChunks: 1,
+                cacheGroups: {
+                    default: false,
+                    react: {
+                        test: /\/(react|react-dom)\//,
+                        chunks: 'all',
+                        name: 'react'
+                    },
+                    vendor: {
+                        test: /\/node_modules\//,
+                        chunks: 'all',
+                        name: 'vendor',
+                        priority: -1
+                    }
+                }
+            }
+        },
+        resolve: {
+            extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+            alias: {
+                '@': ROOT
+            },
+            modules: ['node_modules']
+        }
+    }
+}

package/template/web-app/react-webpack/webpack_config/constant.mjs

@@ -1,5 +1,5 @@
-import path from 'path'
-
-export const ROOT = process.cwd()
-export const OUTPUT = path.join(ROOT, 'dist')
-export const SCOPE_CLASS_NAME = '[name]__[local]--[hash:base64:5]'
+import path from 'path'
+
+export const ROOT = process.cwd()
+export const OUTPUT = path.join(ROOT, 'dist')
+export const SCOPE_CLASS_NAME = '[name]__[local]--[hash:base64:5]'

package/template/web-app/solid/.gitignore

@@ -1,2 +1,2 @@
-node_modules
+node_modules
 dist

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

@@ -1,23 +1,29 @@
-{
-    "extends": "stylelint-config-standard",
-    "rules": {
-        "comment-empty-line-before": "never",
-        "no-empty-source": null,
-        "alpha-value-notation": null,
-        "color-function-notation": null,
-        "no-descending-specificity": null,
-        "at-rule-no-unknown": [
-            true,
-            {
-                "ignoreAtRules": ["tailwind", "apply", "use"]
-            }
-        ],
-        "selector-pseudo-class-no-unknown": [
-            true,
-            {
-                "ignorePseudoClasses": ["global"]
-            }
-        ],
-        "selector-class-pattern": null
-    }
-}
+{
+    "extends": "stylelint-config-standard-scss",
+    "rules": {
+        "comment-empty-line-before": "never",
+        "no-empty-source": null,
+        "alpha-value-notation": null,
+        "color-function-notation": null,
+        "at-rule-no-unknown": [
+            true,
+            {
+                "ignoreAtRules": ["tailwind", "apply", "use"]
+            }
+        ],
+        "declaration-block-no-redundant-longhand-properties": null,
+        "selector-pseudo-class-no-unknown": [
+            true,
+            {
+                "ignorePseudoClasses": ["global"]
+            }
+        ],
+        "selector-class-pattern": null,
+        "scss/at-rule-no-unknown": [
+            true,
+            {
+                "ignoreAtRules": ["tailwind", "a    pply"]
+            }
+        ]
+    }
+}

package/template/web-app/solid/README.md

@@ -1,34 +1,34 @@
-## Usage
-
-Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
-
-This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
-
-```bash
-$ npm install # or pnpm install or yarn install
-```
-
-### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm dev` or `npm start`
-
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br>
-
-### `npm run build`
-
-Builds the app for production to the `dist` folder.<br>
-It correctly bundles Solid in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
-
-## Deployment
-
-You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
+## Usage
+
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

package/template/web-app/solid/index.html

@@ -1,16 +1,16 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
-    <title>Solid App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-
-    <script src="/src/index.tsx" type="module"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>