@massimo-cassandro/minimo 1.15.0 → 1.16.0

package/dev-tools/README.md

@@ -6,9 +6,31 @@ 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
+* [webpack-setup](#webpack-setup) — script for installing minimo environment
 
-## Usage of SVG adn favicons tools
+## webpack-setup
+
+`webpack-setup/starter-install.sh` bootstraps a new frontend project: it copies the starter config files (`package.json`, `.gitignore`, `jsconfig.json`, eslint/stylelint configs, webpack config and modules, ...) and installs all the required dev dependencies.
+
+The script **requires zsh** (it exits with an error if launched with `sh` or `bash`). Existing files are never overwritten: root config files are copied with a `NEW-` prefix, while `package.json` and the `*.code-workspace` file are merged (template keys are appended at the end, prefixed with `_`).
+
+### If minimo is already installed
+
+```bash
+zsh node_modules/@massimo-cassandro/minimo/dev-tools/webpack-setup/starter-install.sh
+```
+
+### Without installing minimo
+
+To bootstrap a project **before** (or without) installing the whole package, download only the `webpack-setup` folder from the npm tarball and run the script from there:
+
+```bash
+curl -sL "$(npm view @massimo-cassandro/minimo dist.tarball)" | tar xz package/dev-tools/webpack-setup
+zsh package/dev-tools/webpack-setup/starter-install.sh
+rm -rf package
+```
+
+## SVG adn favicons tools
 
 ```bash
 ## SVG Icons Tools

package/dev-tools/webpack-setup/merge-jsonc.cjs

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+// Merge JSONC: aggiunge in fondo al file di destinazione le chiavi di primo
+// livello del template, prefissate con '_', preservando commenti e
+// formattazione di entrambi i file.
+// Uso: node merge-jsonc.cjs <template> <destinazione>
+
+const fs = require('fs');
+
+// Analizza un testo JSONC ignorando stringhe e commenti: individua
+// l'oggetto principale, le virgole a profondità 1 e la posizione
+// dell'ultimo carattere significativo (non spazio, non commento)
+function scan(text) {
+  let depth = 0;
+  let open = -1;
+  let close = -1;
+  let last = -1;
+  const commas = [];
+  let i = 0;
+  while (i < text.length) {
+    const c = text[i];
+    const next = text[i + 1];
+    if (c === '"') {
+      i++;
+      while (i < text.length && text[i] !== '"') {
+        if (text[i] === '\\') i++;
+        i++;
+      }
+      last = i;
+    } else if (c === '/' && next === '/') {
+      while (i < text.length && text[i] !== '\n') i++;
+      continue;
+    } else if (c === '/' && next === '*') {
+      i += 2;
+      while (i < text.length && !(text[i] === '*' && text[i + 1] === '/')) i++;
+      i++;
+    } else {
+      if (c === '{' || c === '[') {
+        if (depth === 0 && open === -1 && c === '{') open = i;
+        depth++;
+      } else if (c === '}' || c === ']') {
+        depth--;
+        if (depth === 0 && close === -1) close = i;
+      } else if (c === ',' && depth === 1) {
+        commas.push(i);
+      }
+      if (!/\s/.test(c)) last = i;
+    }
+    i++;
+  }
+  return { open, close, commas, last };
+}
+
+// Posizione della prima doppia virgoletta fuori dai commenti
+function firstQuotePos(text) {
+  let i = 0;
+  while (i < text.length) {
+    const c = text[i];
+    const next = text[i + 1];
+    if (c === '/' && next === '/') {
+      while (i < text.length && text[i] !== '\n') i++;
+    } else if (c === '/' && next === '*') {
+      i += 2;
+      while (i < text.length && !(text[i] === '*' && text[i + 1] === '/')) i++;
+      i += 2;
+    } else if (c === '"') {
+      return i;
+    } else {
+      i++;
+    }
+  }
+  return -1;
+}
+
+const [tplPath, destPath] = process.argv.slice(2);
+
+try {
+  const tpl = fs.readFileSync(tplPath, 'utf8');
+  const dest = fs.readFileSync(destPath, 'utf8');
+  const t = scan(tpl);
+  const d = scan(dest);
+  if (t.open < 0 || t.close < 0) throw new Error(tplPath + ': oggetto JSON non trovato');
+  if (d.open < 0 || d.close < 0) throw new Error(destPath + ': oggetto JSON non trovato');
+
+  // voci di primo livello del template (spezzate sulle virgole a profondità 1)
+  const body = tpl.slice(t.open + 1, t.close);
+  const offset = t.open + 1;
+  const bounds = t.commas.map((p) => p - offset).concat(body.length);
+  const entries = [];
+  let prev = 0;
+  for (const b of bounds) {
+    entries.push(body.slice(prev, b));
+    prev = b + 1;
+  }
+
+  // prefissa con '_' la chiave di ogni voce (voci di soli commenti/spazi escluse)
+  const renamed = [];
+  for (const entry of entries) {
+    const cleaned = entry.replace(/^\s+/, '').replace(/\s+$/, '');
+    const q = firstQuotePos(cleaned);
+    if (q < 0) continue;
+    renamed.push('\n  ' + cleaned.slice(0, q + 1) + '_' + cleaned.slice(q + 1));
+  }
+  if (renamed.length === 0) process.exit(0);
+
+  // aggiunge le voci prima della chiusura dell'oggetto principale della
+  // destinazione, inserendo una virgola dopo l'ultima voce esistente se serve
+  const dBody = dest.slice(d.open + 1, d.close);
+  const b = scan(dBody);
+  const needsComma = b.last >= 0 && dBody[b.last] !== ',';
+  const insertAt = d.open + 1 + b.last + 1;
+  const out = needsComma
+    ? dest.slice(0, insertAt) + ',' + dest.slice(insertAt, d.close) + renamed.join(',') + '\n' + dest.slice(d.close)
+    : dest.slice(0, d.close) + renamed.join(',') + '\n' + dest.slice(d.close);
+
+  fs.writeFileSync(destPath, out);
+} catch (err) {
+  console.error('merge-jsonc: ' + err.message);
+  process.exit(1);
+}

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

@@ -1,5 +1,16 @@
 #!/bin/zsh
 
+RED='\033[0;31m'
+YELLOW='\033[0;33m'
+GREEN='\033[0;32m'
+NC='\033[0m' # No Color
+
+# Questo script richiede zsh: se lanciato con sh/bash blocca l'esecuzione
+if [ -z "$ZSH_VERSION" ]; then
+  printf "${RED}Errore: lanciare con 'zsh starter-install.sh', non con sh/bash.${NC}\n" >&2
+  exit 1
+fi
+
 # Configurazione variabili
 # BASE_URL="https://raw.githubusercontent.com/massimo-cassandro/minimo/refs/heads/main"
 
@@ -16,23 +27,31 @@ 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
+# Array per tracciare i file già esistenti
 BLOCKED_FILES=()
 
-# Wrapper: copia solo se il file non esiste, altrimenti registra il blocco
+# Wrapper: copia solo se il file non esiste, altrimenti registra il blocco.
+# Con terzo argomento "new", se la destinazione esiste già la copia viene
+# comunque creata con prefisso NEW- (da integrare manualmente o rimuovere)
 safe_cat() {
   local src="$1"
   local dest="$2"
+  local mode="$3"
+  if [ ! -f "$src" ]; then
+    echo -e "${RED}Sorgente mancante: $src${NC}"
+    return 1
+  fi
   if [ -e "$dest" ]; then
-    BLOCKED_FILES+=("$dest")
+    if [ "$mode" = "new" ]; then
+      local new_dest="$(dirname "$dest")/NEW-$(basename "$dest")"
+      cat "$src" >| "$new_dest"
+      BLOCKED_FILES+=("$dest → copiato come $new_dest")
+    else
+      BLOCKED_FILES+=("$dest")
+    fi
   else
     cat "$src" > "$dest"
   fi
@@ -41,16 +60,26 @@ safe_cat() {
 echo -e "${GREEN}...package.json${NC}"
 if [ ! -f package.json ]; then
   safe_cat "${TEMPLATES_DIR}/package-tpl.json" package.json
+elif [ ! -f "${TEMPLATES_DIR}/package-tpl.json" ]; then
+  echo -e "${RED}Sorgente mancante: ${TEMPLATES_DIR}/package-tpl.json${NC}"
 else
-  echo -e "${GREEN}package.json already exists${NC}"
+  # package.json esistente: merge con il template, aggiungendo in fondo
+  # le chiavi del template prefissate con '_' (ordine originale preservato)
+  node -e '
+    const fs = require("fs");
+    const existing = JSON.parse(fs.readFileSync("package.json", "utf8"));
+    const tpl = JSON.parse(fs.readFileSync(process.argv[1], "utf8"));
+    for (const [key, value] of Object.entries(tpl)) {
+      existing["_" + key] = value;
+    }
+    fs.writeFileSync("package.json", JSON.stringify(existing, null, 2) + "\n");
+  ' "${TEMPLATES_DIR}/package-tpl.json"
+  echo -e "${YELLOW}package.json esistente: chiavi del template aggiunte in fondo con prefisso '_' (da integrare o rimuovere)${NC}"
+  BLOCKED_FILES+=("package.json → merge: chiavi template aggiunte con prefisso \`_\`")
 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
+safe_cat "${TEMPLATES_DIR}/_gitignore" .gitignore new
 
 echo -e "\n${GREEN}Where do you want to install the frontend configuration?${NC}"
 echo "1) Root directory"
@@ -73,20 +102,39 @@ 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
+safe_cat "${TEMPLATES_DIR}/_browserslistrc"            .browserslistrc new
+safe_cat "${TEMPLATES_DIR}/_editorconfig"              .editorconfig new
+safe_cat "${TEMPLATES_DIR}/_prettierrc"                .prettierrc new
+safe_cat "${TEMPLATES_DIR}/jsconfig.json"              jsconfig.json new
+
+# code-workspace: se un file .code-workspace esiste già (qualunque sia il nome),
+# le chiavi del template vengono aggiunte in fondo con prefisso '_'
+WORKSPACE_TPL="${TEMPLATES_DIR}/__project__.code-workspace"
+WORKSPACE_FILES=( *.code-workspace(N) )
+if [ ${#WORKSPACE_FILES[@]} -gt 1 ]; then
+  echo -e "${RED}Trovati più file .code-workspace (${WORKSPACE_FILES[*]}): merge non eseguito${NC}"
+elif [ ${#WORKSPACE_FILES[@]} -eq 0 ]; then
+  safe_cat "$WORKSPACE_TPL" __project__.code-workspace
+elif [ ! -f "$WORKSPACE_TPL" ]; then
+  echo -e "${RED}Sorgente mancante: ${WORKSPACE_TPL}${NC}"
+else
+  WORKSPACE_FILE="${WORKSPACE_FILES[1]}"
+  if node "${BASE_URL}/merge-jsonc.cjs" "$WORKSPACE_TPL" "$WORKSPACE_FILE"; then
+    echo -e "${YELLOW}${WORKSPACE_FILE} esistente: chiavi del template aggiunte in fondo con prefisso '_' (da integrare o rimuovere)${NC}"
+    BLOCKED_FILES+=("${WORKSPACE_FILE} → merge: chiavi template aggiunte con prefisso \`_\`")
+  else
+    echo -e "${RED}Merge di ${WORKSPACE_FILE} non riuscito${NC}"
+  fi
+fi
 
 
 echo -e "\n${GREEN}...eslint${NC}"
 npm i -D @massimo-cassandro/eslint-config
-safe_cat "${TEMPLATES_DIR}/eslint.config.mjs" eslint.config.mjs
+safe_cat "${TEMPLATES_DIR}/eslint.config.mjs" eslint.config.mjs new
 
 echo -e "\n${GREEN}...stylelint${NC}"
 npm i -D @massimo-cassandro/stylelint-config
-safe_cat "${TEMPLATES_DIR}/stylelint.config.mjs" stylelint.config.mjs
+safe_cat "${TEMPLATES_DIR}/stylelint.config.mjs" stylelint.config.mjs new
 
 echo -e "\n${GREEN}...webpack${NC}"
 npm i -D webpack-cli webpack-dev-server webpack-manifest-plugin webpack
@@ -117,15 +165,19 @@ FILES=(
   'postcss.config.mjs'
 )
 
-if [ ! -d "$WEBPACK_LOCAL_DIR" ]; then
-  mkdir -p "$WEBPACK_LOCAL_DIR"
+# se la cartella esiste già, i moduli vengono copiati in NEW-webpack-modules
+# (da integrare manualmente o rimuovere)
+if [ -d "$WEBPACK_LOCAL_DIR" ]; then
+  NEW_WEBPACK_LOCAL_DIR="$(dirname "$WEBPACK_LOCAL_DIR")/NEW-$(basename "$WEBPACK_LOCAL_DIR")"
+  BLOCKED_FILES+=("$WEBPACK_LOCAL_DIR → copiata come $NEW_WEBPACK_LOCAL_DIR")
+  WEBPACK_LOCAL_DIR="$NEW_WEBPACK_LOCAL_DIR"
+fi
 
-  for FILE in "${FILES[@]}"; do
-    # echo "Scaricamento di $FILE..."
-    safe_cat "${WEBPACK_MODULES_REMOTE_URL}/${FILE}" "${WEBPACK_LOCAL_DIR}/${FILE}"
-  done
+mkdir -p "$WEBPACK_LOCAL_DIR"
 
-fi
+for FILE in "${FILES[@]}"; do
+  safe_cat "${WEBPACK_MODULES_REMOTE_URL}/${FILE}" "${WEBPACK_LOCAL_DIR}/${FILE}"
+done
 
 echo -e "\n${GREEN}Creating a template of your frontend application's folder structured${NC}"
 
@@ -136,9 +188,9 @@ mkdir -p error-pages imgs icons src src/css favicons design-tokens
 cd ..
 set +C
 
-# Riepilogo finale dei file bloccati
+# Riepilogo finale dei file già esistenti
 if [ ${#BLOCKED_FILES[@]} -gt 0 ]; then
-  echo -e "\n${YELLOW}*** File non copiati (già esistenti): ***${NC}"
+  echo -e "\n${YELLOW}*** File già esistenti (non copiati o copiati con prefisso NEW-): ***${NC}"
   for F in "${BLOCKED_FILES[@]}"; do
     echo -e "${YELLOW}  ✗ $F${NC}"
   done

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

@@ -32,6 +32,6 @@
     "build tokens": "npx buildTokens --config ./path/to/tokens-config.mjs",
     "check unresolved props": "npx checkUnresolvedProps --config ./path/to/tokens-config.mjs"
   },
-  "dependencies": {},
-  "devDependencies": {}
+  "devDependencies": {},
+  "dependencies": {}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/components/snackbar/snackbar.js

@@ -15,6 +15,7 @@ References
 
 // TODO snackbar action
 // TODO handle multiple simultaneous snackbars (no stacking)
+// TODO test con prefers-reduced-motion
 
 /**
  * Displays a snackbar / toast notification using the Popover API.
@@ -53,12 +54,22 @@ export function snackbar(message, options = {}){
 
     if (_timeoutID) clearTimeout(_timeoutID);
 
-    _popover?.classList.add(styles.isHiding);
-
-    _popover?.addEventListener('animationend', () => {
+    const remove = () => {
       _popover?.hidePopover();
       _popover?.remove();
-    }, { once: true }); // 'once' prevents duplicate listeners; the flag guards against calls before animation ends
+    };
+
+    _popover?.classList.add(styles.isHiding);
+
+    // with `prefers-reduced-motion` (or any override disabling animations) no animation
+    // runs and `animationend` would never fire: in that case remove immediately
+    if (_popover?.getAnimations().length) {
+      // 'once' prevents duplicate listeners; the flag guards against calls before animation ends
+      _popover.addEventListener('animationend', remove, { once: true });
+    }
+    else {
+      remove();
+    }
   };
 
   _popover = domBuilder([