@massimo-cassandro/minimo 1.11.0 → 1.12.0

package/dev-tools/README.md

@@ -6,7 +6,7 @@ A collection of standalone Node.js CLI utilities to help manage a web project's
 * [Svg Icons Tools](./svg-icons-tools/README.md) — optimizes SVG icons and combines/converts them into symbols, JSX, or SCSS variables
 * [Create favicons](./create-favicons/README.md) — generates the full favicon set (SVG, PNG, ICO, webmanifest, HTML snippet) from a source image
 * [upd@m](./upd@m/README.md) — updates all `@massimo-cassandro/*` packages installed in `node_modules`
-
+* **webpack-setup** — script for installing minimo environment
 
 ## Usage of SVG adn favicons tools
 

package/dev-tools/update-version/index.mjs

@@ -79,7 +79,7 @@ async function run() {
       (params.logRow.descr
         ? ' - ' + params.logRow.descr
         : params.updateMode === 'patch'
-          ? ' - Upd / Fix / Dependencies upd'
+          ? ' - Fix / Dependencies upd'
           : '')
     );
 

package/dev-tools/update-version/src/chooser-inquirer.mjs

@@ -33,7 +33,7 @@ export async function chooser() {
       default: answer === 'init'
         ? 'Setup'
         : answer === 'patch'
-          ? 'Upd / Fix / Dependencies upd'
+          ? 'Fix / Dependencies upd'
           : ''
     });
     params.logRow.descr = descr.trim() || null;

package/dev-tools/webpack-setup/starter-install.sh

@@ -0,0 +1,149 @@
+#!/bin/zsh
+
+# Configurazione variabili
+# BASE_URL="https://raw.githubusercontent.com/massimo-cassandro/minimo/refs/heads/main"
+
+# in locale: cat ....
+# da remoto curl -s
+
+# %:A risolve il percorso assoluto (anche con link simbolici)
+# %:h estrae l'header (ovvero la directory, come 'dirname')
+BASE_URL=${0:A:h}
+
+echo "BASE_URL: ${BASE_URL}"
+
+TEMPLATES_DIR="${BASE_URL}/templates"
+# WEBPACK_SOURCE_DIR="$BASE_URL/webpack-setup"
+WEBPACK_SOURCE_DIR="$BASE_URL"
+
+RED='\033[0;31m'
+YELLOW='\033[0;33m'
+GREEN='\033[0;32m'
+NC='\033[0m' # No Color
+
+# protezione contro la sovrascrittura
+set -C
+
+# Array per tracciare le copie bloccati
+BLOCKED_FILES=()
+
+# Wrapper: copia solo se il file non esiste, altrimenti registra il blocco
+safe_cat() {
+  local src="$1"
+  local dest="$2"
+  if [ -e "$dest" ]; then
+    BLOCKED_FILES+=("$dest")
+  else
+    cat "$src" > "$dest"
+  fi
+}
+
+echo -e "${GREEN}...package.json${NC}"
+if [ ! -f package.json ]; then
+  safe_cat "${TEMPLATES_DIR}/package-tpl.json" package.json
+else
+  echo -e "${GREEN}package.json already exists${NC}"
+fi
+
+echo -e "${GREEN}...gitignore${NC}"
+if [ ! -f .gitignore ]; then
+  safe_cat "${TEMPLATES_DIR}/_gitignore" .gitignore
+else
+  echo -e "${GREEN}.gitignore already exists${NC}"
+fi
+
+echo -e "\n${GREEN}Where do you want to install the frontend configuration?${NC}"
+echo "1) Root directory"
+echo "2) 'frontend' Directory"
+read "?Choose (1 or 2) [default: 1]: " choice < /dev/tty
+choice=${choice:-1}
+
+if [ "$choice" = "2" ]; then
+  FRONTEND_INSTALL_PATH="./frontend"
+  echo -e "${GREEN}Files will be installed in: ./frontend${NC}"
+else
+  FRONTEND_INSTALL_PATH="."
+  echo -e "${GREEN}Files will be installed in: root directory${NC}"
+fi
+
+if [ "$FRONTEND_INSTALL_PATH" = "./frontend" ]; then
+  mkdir -p frontend
+fi
+
+
+echo -e "\n${GREEN}...config files & utilities${NC}"
+
+safe_cat "${TEMPLATES_DIR}/_browserslistrc"            .browserslistrc
+safe_cat "${TEMPLATES_DIR}/_editorconfig"              .editorconfig
+safe_cat "${TEMPLATES_DIR}/_prettierrc"                .prettierrc
+safe_cat "${TEMPLATES_DIR}/jsconfig.json"              jsconfig.json
+safe_cat "${TEMPLATES_DIR}/__project__.code-workspace" __project__.code-workspace
+
+
+echo -e "\n${GREEN}...eslint${NC}"
+npm i -D @massimo-cassandro/eslint-config
+safe_cat "${TEMPLATES_DIR}/eslint.config.mjs" eslint.config.mjs
+
+echo -e "\n${GREEN}...stylelint${NC}"
+npm i -D @massimo-cassandro/stylelint-config
+safe_cat "${TEMPLATES_DIR}/stylelint.config.mjs" stylelint.config.mjs
+
+echo -e "\n${GREEN}...webpack${NC}"
+npm i -D webpack-cli webpack-dev-server webpack-manifest-plugin webpack
+npm i -D @babel/core @babel/preset-env babel-loader terser-webpack-plugin
+npm i -D webpack-remove-empty-scripts copy-webpack-plugin html-loader html-webpack-plugin
+npm i -D postcss autoprefixer postcss-custom-media @csstools/postcss-global-data postcss-loader postcss-preset-env
+npm i -D cssnano mini-css-extract-plugin style-loader css-loader css-minimizer-webpack-plugin
+npm i -D responsive-loader
+npm i -D process dotenv-webpack
+npm i -D svgo svg-url-loader svgo-loader svgo-add-viewbox mini-svg-data-uri
+npm i -D ejs-loader
+npm i -D purgecss-webpack-plugin glob
+
+npm i -D style-dictionary
+
+safe_cat "${WEBPACK_SOURCE_DIR}/webpack.config.mjs"   "${FRONTEND_INSTALL_PATH}/webpack.config.mjs"
+safe_cat "${WEBPACK_SOURCE_DIR}/webpack-template.ejs" "${FRONTEND_INSTALL_PATH}/webpack-template.ejs"
+
+# cartella webpack
+WEBPACK_LOCAL_DIR="${FRONTEND_INSTALL_PATH}/webpack-modules"
+WEBPACK_MODULES_REMOTE_URL="${WEBPACK_SOURCE_DIR}/webpack-modules"
+FILES=(
+  'css-rules.mjs'
+  'get-jsConfig-aliases.mjs'
+  'mini-svg-data-uri-loader.cjs'
+  'svg-rules.mjs'
+  'svgo.config.mjs'
+  'postcss.config.mjs'
+)
+
+if [ ! -d "$WEBPACK_LOCAL_DIR" ]; then
+  mkdir -p "$WEBPACK_LOCAL_DIR"
+
+  for FILE in "${FILES[@]}"; do
+    # echo "Scaricamento di $FILE..."
+    safe_cat "${WEBPACK_MODULES_REMOTE_URL}/${FILE}" "${WEBPACK_LOCAL_DIR}/${FILE}"
+  done
+
+fi
+
+echo -e "\n${GREEN}Creating a template of your frontend application's folder structured${NC}"
+
+TEMPLATE_DIR_NAME="__frontend_app_dir_template__"
+mkdir -p "$TEMPLATE_DIR_NAME"
+cd "$TEMPLATE_DIR_NAME"
+mkdir -p error-pages imgs icons src src/css favicons design-tokens
+cd ..
+set +C
+
+# Riepilogo finale dei file bloccati
+if [ ${#BLOCKED_FILES[@]} -gt 0 ]; then
+  echo -e "\n${YELLOW}*** File non copiati (già esistenti): ***${NC}"
+  for F in "${BLOCKED_FILES[@]}"; do
+    echo -e "${YELLOW}  ✗ $F${NC}"
+  done
+else
+  echo -e "\n${GREEN}Nessun file bloccato.${NC}"
+fi
+
+echo -e "\n\n${GREEN}*** END ***${NC}"

package/dev-tools/webpack-setup/templates/__project__.code-workspace

@@ -0,0 +1,93 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+  ],
+  "settings": {
+
+    "cssvar.files": [
+      "frontend/css/custom-properties-list.css", // project props
+      
+      // OPEN PROPS
+      // "./node_modules/open-props/open-props.min.css", // all open-props
+
+      // "./node_modules/open-props/animations.min.css",
+      // "./node_modules/open-props/aspects.min.css",
+      // "./node_modules/open-props/borders.min.css",
+      // "./node_modules/open-props/buttons.dark.min.css",
+      // "./node_modules/open-props/buttons.light.min.css",
+      // "./node_modules/open-props/buttons.min.css",
+      // "./node_modules/open-props/durations.min.css",
+      // "./node_modules/open-props/easings.min.css",
+      // "./node_modules/open-props/fonts.min.css",
+      // "./node_modules/open-props/gradients.min.css",
+      // "./node_modules/open-props/masks.corner-cuts.min.css",
+      // "./node_modules/open-props/masks.edges.min.css",
+      // "./node_modules/open-props/media.min.css",
+      // "./node_modules/open-props/normalize.dark.min.css",
+      // "./node_modules/open-props/normalize.light.min.css",
+      // "./node_modules/open-props/normalize.min.css",
+      // "./node_modules/open-props/sizes.min.css",
+      // "./node_modules/open-props/supports.min.css",
+      // "./node_modules/open-props/theme.dark.switch.min.css",
+      // "./node_modules/open-props/theme.light.switch.min.css",
+      // "./node_modules/open-props/zindex.min.css",
+
+      // "./node_modules/open-props/colors.min.css",
+      // "./node_modules/open-props/colors-hsl.min.css",
+      // "./node_modules/open-props/colors-hsl.shadow.min.css",
+      // "./node_modules/open-props/colors-oklch.min.css",
+      // "./node_modules/open-props/colors-oklch.shadow.min.css",
+      // "./node_modules/open-props/oklch-hues.min.css",
+      // "./node_modules/open-props/oklch-hues.shadow.min.css",
+
+      // "./node_modules/open-props/shadows.min.css",
+      // "./node_modules/open-props/animations.shadow.min.css",
+      // "./node_modules/open-props/aspects.shadow.min.css",
+      // "./node_modules/open-props/borders.shadow.min.css",
+      // "./node_modules/open-props/colors.shadow.min.css",
+      // "./node_modules/open-props/easings.shadow.min.css",
+      // "./node_modules/open-props/fonts.shadow.min.css",
+      // "./node_modules/open-props/gradients.shadow.min.css",
+      // "./node_modules/open-props/normalize.shadow.min.css",
+      // "./node_modules/open-props/shadows.shadow.min.css",
+      // "./node_modules/open-props/sizes.shadow.min.css",
+      // "./node_modules/open-props/zindex.shadow.min.css",
+
+    ],
+    // Do not ignore node_modules css files, which is ignored by default
+    "cssvar.ignore": [],
+
+    // add support for autocomplete in JS or JS like files
+    "cssvar.extensions": [
+      "css", "postcss", "jsx", "tsx", "scss"
+    ],
+
+    "favorites.resources": [
+      {
+        "filePath": "node_modules/@fontsource-variable",
+        "group": "Default"
+      },
+      {
+        "filePath": "node_modules/@fontsource",
+        "group": "Default"
+      },
+      {
+        "filePath": "node_modules/@massimo-cassandro",
+        "group": "Default"
+      },
+      {
+        "filePath": "node_modules/open-props",
+        "group": "Default"
+      }
+    ],
+
+    "bootstrapIntelliSense": {
+      "enable": false,
+      "bsVersion": "5.3.7",
+      "showSuggestions": false,
+      "autoComplete": false
+    }
+  }
+}

package/dev-tools/webpack-setup/templates/_browserslistrc

@@ -0,0 +1,27 @@
+# https://github.com/browserslist/browserslist
+# https://browsersl.ist/
+
+last 2 major versions
+since 2023
+not dead
+
+not op_mini all
+not op_mob > 0
+not and_uc > 0
+not and_qq > 0
+not baidu > 0
+not kaios > 0
+not android > 0
+not ie > 0
+not ie_mob > 0
+not bb > 0
+
+safari >= 16
+ios_saf >= 16
+edge >= 109
+chrome >= 109
+firefox esr
+opera >= 95
+samsung >= 20
+
+> 3% in IT

package/dev-tools/webpack-setup/templates/_editorconfig

@@ -0,0 +1,17 @@
+# https://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
+

package/dev-tools/webpack-setup/templates/_gitignore

@@ -0,0 +1,21 @@
+*~
+.DS_Store
+**/*.mwb.bak
+**/*.mwb.beforefix
+
+vendor
+
+# local env
+# .env
+.env.dev
+.env.local
+.env.development
+.env.test
+.env.development.local
+.env.test.local
+.env.production.local
+
+# frontend
+node_modules
+_private
+public/_dev

package/dev-tools/webpack-setup/templates/_prettierrc

@@ -0,0 +1,9 @@
+{
+  "endOfLine": "lf",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true
+}

package/dev-tools/webpack-setup/templates/eslint.config.mjs

@@ -0,0 +1,31 @@
+import eslint_config from '@massimo-cassandro/eslint-config';
+
+// https://github.com/cybozu/eslint-config
+// import cybozuEslintConfigBaseline from '@cybozu/eslint-config/flat/presets/css-baseline.js';
+
+
+export default [
+
+  // ...cybozuEslintConfigBaseline.map((config) => ({
+  //   ...config,
+  //   files: ['**/*.css']
+  // })),
+
+  ...eslint_config,
+  // {
+  //   files: ['src/**/*.js'],
+  //   ignores: [
+  //     'dist/',
+  //     'build/',
+  //     '**/vendor/'
+  //   ],
+  // }
+  // {
+  //   languageOptions: {
+  //     globals: {
+  //       jQuery: 'readonly',
+  //       $: 'readonly',
+  //     },
+  //   },
+  // },
+];

package/dev-tools/webpack-setup/templates/jsconfig.json

@@ -0,0 +1,22 @@
+{
+  "__help": "https://code.visualstudio.com/docs/languages/jsconfig",
+  "compilerOptions": {
+    "checkJs": true,
+    "target": "ES2023",
+    "module": "ESNext",
+    "baseUrl": ".",
+    "allowSyntheticDefaultImports": false,
+    "paths": {
+      "@frontend/*": ["./frontend/*"],
+      "@src/*": ["frontend/src/*"],
+      "@imgs/*": ["./frontend/imgs/*"],
+      "@icone/*": ["./frontend/icone/*"],
+      "@backoffice/*": ["./frontend/backoffice/*"],
+      "@minimo/*": ["./node_modules/@massimo-cassandro/minimo/src/*"]
+    }
+
+
+
+  },
+  "exclude": ["node_modules", "dist", "docs", "build", "public"]
+}

package/dev-tools/webpack-setup/templates/package-tpl.json

@@ -0,0 +1,37 @@
+{
+  "name": "xxxxx",
+  "description": "",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "Massimo Cassandro",
+  "main": "index.js",
+  "type":"module",
+  "sideEffects": [
+    "*.css",
+    "*.js",
+    "*.svg",
+    "*.jpg",
+    "*.jpeg",
+    "*.png",
+    "*.webp",
+    "*.avif"
+  ],
+  "scripts": {
+    "progetto JS webpack DEV": "npm 'launchChrome' && NODE_ENV=development webpack serve --config ./webpack.config.mjs #--open-app-name 'Google Chrome'",
+    "progettop sf webpack DEV": "rm -rf ./public/_dev && NODE_ENV=development webpack --config ./frontend/webpack.config.mjs",
+    "webpack PROD": "NODE_ENV=production webpack --config ./webpack.config.mjs --stats minimal",
+    "create-favicons INIT": "npx create-favicons init",
+    "create-favicons": "npx create-favicons --dir=./src/favicons",
+    "UPD-version": "npx update-version  # --log-file=./frontend/changelog.md --log-patch --pkg=alt/path/to/package.json",
+    "upd@m": "npx upd@m",
+    "launchChrome": "open -n -a 'Google Chrome' --args --profile-directory='Profile 3'",
+    "python server": "python3 -m http.server 8000 # --directory __dirname__ # 8000 = default port",
+    "php server": "php -S localhost:8000 # -t root_dir/",
+    "symfony local server": "symfony serve -d",
+    "node server": "node serve # richiede ‘npm i serve’",
+    "build tokens": "npx buildTokens --config ./path/to/tokens-config.mjs",
+    "check unresolved props": "npx checkUnresolvedProps --config ./path/to/tokens-config.mjs"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

package/dev-tools/webpack-setup/templates/stylelint.config.mjs

@@ -0,0 +1,32 @@
+export default {
+  extends: [
+    '@massimo-cassandro/stylelint-config',
+  ],
+
+  // File da ignorare durante l'analisi
+  ignoreFiles: [
+    'node_modules/**/*.{css,scss}',
+    'vendor/**/*.{css,scss}',
+    'templates/**/*.{css,scss}',
+    'dist/**/*.css',
+    'build/**/*.css',
+    'public/**/*.css',
+    'test/**/*.css',
+    'docs/**/*.css',
+    'demo/**/*.css',
+  ],
+
+  // Overrides
+  rules: {
+
+    // 'color-function-notation': null,
+
+    //********************** optionally for tailwind:
+    // 'at-rule-no-unknown': [
+    //   true,
+    //   'value-keyword-case': null,
+    //   '@stylistic/number-no-trailing-zeros': null
+    // ],
+    //********************** /tailwind
+  }
+};

package/dev-tools/webpack-setup/webpack-modules/css-rules.mjs

@@ -0,0 +1,177 @@
+// import path from 'path';
+// import { fileURLToPath } from 'url';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname = path.dirname(__filename);
+
+
+
+const postcssLoader = (isDevelopment, postcssConfig_path) => ({
+  loader: 'postcss-loader',
+  options: {
+    sourceMap: isDevelopment,
+    postcssOptions: {
+      // 'config' accetta un percorso assoluto (stringa) o un booleano
+      config: postcssConfig_path,
+    },
+  }
+});
+
+export function cssRules({
+  isDevelopment = false,
+  useSass = false,
+  inlineCssInDevMode = true,
+  postcssConfig_path
+}) {
+  const configOptions = { isDevelopment, useSass, inlineCssInDevMode, postcssConfig_path };
+
+
+  return [
+    // CSS modules
+    {
+      test: /\.module\.(sass|scss|css)$/i,
+      oneOf: [
+
+        // inserimento critical css con tag style al momento della build
+        {
+          test: /\.critical\.module\./i,
+          use: css_loaders({ ...configOptions, critical: true, css_modules: true }),
+        },
+
+        // inserimento css con tag style nel runtime
+        {
+          resourceQuery: /inline/,
+          use: css_loaders({ ...configOptions, inline: true, css_modules: true }),
+        },
+        // comportamento standard
+        {
+          use: css_loaders({ ...configOptions, css_modules: true }),
+        },
+      ]
+    },
+    // CSS standard
+    {
+      test: /\.(sass|scss|css)$/i,
+      exclude: /\.module\.(sass|scss|css)$/i,
+      sideEffects: true,
+      oneOf: [
+
+        // raw content per web-components
+        {
+          resourceQuery: /raw/,
+          use: [
+            // exportType: 'string' sostituisce raw-loader deprecato
+            {
+              loader: 'css-loader',
+              options: {
+                exportType: 'string',
+                sourceMap: isDevelopment,
+                importLoaders: useSass? 2 : 1
+              }
+            },
+
+            postcssLoader(isDevelopment, postcssConfig_path),
+
+            ...(useSass ? [{
+              loader: 'sass-loader',
+              options: { sourceMap: isDevelopment }
+            }] : [])
+          ]
+        },
+
+        {
+          test: /\.critical\.(sass|scss|css)$/i,
+          use: css_loaders({ ...configOptions, critical: true }),
+        },
+        {
+          resourceQuery: /inline/,
+          use: css_loaders({ ...configOptions, inline: true }),
+        },
+        {
+
+          use: css_loaders({ ...configOptions }),
+        }
+      ]
+    }
+  ];
+}
+
+function css_loaders({
+  isDevelopment = false,
+  useSass = false,
+  inlineCssInDevMode = true,
+  postcssConfig_path = postcssConfig_path,
+  css_modules = false,
+  critical = false,     // Iniezione statica nell'HTML
+  inline = false        // Iniezione dinamica via JS
+}) {
+
+  let mainLoader;
+
+  if (inline) {
+    // usa style-loader per la query string ?inline
+    mainLoader = {
+      loader: 'style-loader',
+      options: {
+        injectType: 'singletonStyleTag',
+        esModule: css_modules
+      }
+    };
+
+  } else if (critical) {
+    // usa MiniCssExtractPlugin per permettere al plugin HTML di leggerlo
+    mainLoader = MiniCssExtractPlugin.loader;
+
+  } else {
+    // compartamento standard
+    mainLoader = (isDevelopment && inlineCssInDevMode)
+      ? {
+        loader: 'style-loader',
+        options: {
+          injectType: 'singletonStyleTag',
+          // esModule: css_modules
+        }
+      }
+      : MiniCssExtractPlugin.loader;
+  }
+
+
+  return [
+    mainLoader,
+
+    {
+      loader: 'css-loader',
+      options: {
+        modules: css_modules
+          ? {
+            auto: true,
+            localIdentName: isDevelopment ? '[local]_[hash:base64:6]' : '[hash:base64:10]',
+            exportLocalsConvention: 'as-is',
+
+            // namedExport: false,
+            // exportOnlyLocals: false
+          }
+          : false,
+        sourceMap: isDevelopment,
+        importLoaders: useSass ? 2 : 1,
+      }
+    },
+
+    postcssLoader(isDevelopment, postcssConfig_path),
+
+    ...(useSass
+      ? [ {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: isDevelopment,
+          sassOptions: {
+            quietDeps: true,
+            silenceDeprecations: [ 'legacy-js-api', 'mixed-decls', 'color-functions', 'global-builtin', 'import' ],
+          }
+        }
+      } ]
+      : []
+    )
+  ];
+}

package/dev-tools/webpack-setup/webpack-modules/get-jsConfig-aliases.mjs

@@ -0,0 +1,33 @@
+import path from 'path';
+import fs from 'fs';
+
+/**
+ * Funzione per ottenere gli alias direttamente leggendo il file jsconfig.json
+ * @param {string} jsconfigAbsPath - Il percorso assoluto del file jsconfig.json
+ * @returns {Record<string, string>}
+ */
+
+export function getJsConfigAliases(jsconfigAbsPath) {
+
+  const baseDir = path.dirname(jsconfigAbsPath);
+
+  const fileContent = fs.readFileSync(jsconfigAbsPath, 'utf-8');
+  const jsconfig = JSON.parse(fileContent);
+
+  const aliases = {};
+  const paths = jsconfig.compilerOptions?.paths || {};
+
+  for (const item in paths) {
+    // Rimuove la wildcard /* alla fine della chiave (alias)
+    const key = item.replace(/(\/\*)$/, '');
+
+    // Prende il primo valore (path) e rimuove la wildcard /*
+    const targetPath = paths[item][0].replace(/(\/\*)$/, '');
+
+    const absolutePath = path.resolve(baseDir, targetPath);
+
+    aliases[key] = absolutePath;
+  }
+
+  return aliases;
+}