@massimo-cassandro/minimo 1.21.7 → 1.21.9

package/dev-tools/starter-kit/starter-install.sh

@@ -19,11 +19,16 @@ if [ -z "$ZSH_VERSION" ]; then
 fi
 
 # --no-npm: salta le installazioni npm (utile per testare rapidamente lo script)
+# --root / --frontend: posizione della configurazione frontend (salta il prompt,
+#   utile per esecuzioni non interattive)
 SKIP_NPM=0
+FRONTEND_CHOICE=""
 for ARG in "$@"; do
-  if [ "$ARG" = "--no-npm" ]; then
-    SKIP_NPM=1
-  fi
+  case "$ARG" in
+    --no-npm) SKIP_NPM=1 ;;
+    --root) FRONTEND_CHOICE=1 ;;
+    --frontend) FRONTEND_CHOICE=2 ;;
+  esac
 done
 
 # Wrapper: esegue "npm i ..." a meno che SKIP_NPM sia attivo
@@ -105,11 +110,15 @@ fi
 echo -e "${GREEN}...gitignore${NC}"
 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"
-echo "2) 'frontend' Directory"
-read "?Choose (1 or 2) [default: 1]: " choice < /dev/tty
-choice=${choice:-1}
+if [ -n "$FRONTEND_CHOICE" ]; then
+  choice="$FRONTEND_CHOICE"
+else
+  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}
+fi
 
 if [ "$choice" = "2" ]; then
   FRONTEND_INSTALL_PATH="./frontend"
@@ -129,11 +138,27 @@ echo -e "\n${GREEN}...config files & utilities${NC}"
 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
-safe_cat "${BASE_URL}/../../design-tokens/tokens-config-sample.mjs" tokens-config.mjs new
 safe_cat "${TEMPLATES_DIR}/_root_htaccess"             _root_htaccess
 safe_cat "${TEMPLATES_DIR}/_root_robots.txt"           _root_robots.txt
 
+# jsconfig.json: va installato ACCANTO a webpack.config.mjs (che legge gli alias
+# con `path.resolve(__dirname, './jsconfig.json')`), non necessariamente in root.
+# Il placeholder __NODE_MODULES__ viene risolto in base alla posizione scelta.
+if [ "$FRONTEND_INSTALL_PATH" = "." ]; then
+  NODE_MODULES_REL="./node_modules"
+else
+  NODE_MODULES_REL="../node_modules"
+fi
+JSCONFIG_TPL="${TEMPLATES_DIR}/jsconfig.json"
+if [ ! -f "$JSCONFIG_TPL" ]; then
+  echo -e "${RED}Sorgente mancante: ${JSCONFIG_TPL}${NC}"
+else
+  JSCONFIG_TMP="$(mktemp)"
+  sed "s|__NODE_MODULES__|${NODE_MODULES_REL}|g" "$JSCONFIG_TPL" >| "$JSCONFIG_TMP"
+  safe_cat "$JSCONFIG_TMP" "${FRONTEND_INSTALL_PATH}/jsconfig.json" new
+  rm -f "$JSCONFIG_TMP"
+fi
+
 # 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"
@@ -155,6 +180,9 @@ else
 fi
 
 
+echo -e "\n${GREEN}...minimo${NC}"
+npm_i -S @massimo-cassandro/minimo
+
 echo -e "\n${GREEN}...eslint${NC}"
 npm_i -D @massimo-cassandro/eslint-config
 safe_cat "${TEMPLATES_DIR}/eslint.config.mjs" eslint.config.mjs new
@@ -167,6 +195,7 @@ 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 @principalstudio/html-webpack-inject-preload file-loader # da installare solo se necessario
 npm_i -D postcss autoprefixer postcss-custom-media @csstools/postcss-global-data postcss-loader postcss-preset-env
 # NB: niente cssnano: la minificazione è di css-minimizer-webpack-plugin e cssnano
 # nel loader postcss eliminerebbe i commenti `purgecss ignore` prima di PurgeCSS
@@ -180,7 +209,6 @@ 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"
@@ -202,28 +230,39 @@ for FILE in "${WEBPACK_MODULES_REMOTE_URL}"/*; do
   safe_cat "$FILE" "${WEBPACK_LOCAL_DIR}/$(basename "$FILE")"
 done
 
-echo -e "\n${GREEN}Creating a template of your frontend application's folder structured${NC}"
-
-TEMPLATE_DIR_NAME="__frontend_dir__"
-mkdir -p "$TEMPLATE_DIR_NAME"
-cd "$TEMPLATE_DIR_NAME"
-mkdir -p error-pages imgs icons src css favicons design-tokens
-cd ..
-
-# copia dei file css presenti nella root di minimo/src
-# (custom-properties.css, custom-media.css, fonts.css, minimo.css, ...):
+echo -e "\n${GREEN}Creating your frontend application's folder structure${NC}"
+
+# La struttura viene creata nella posizione scelta a inizio script, coerente con
+# i percorsi attesi da webpack.config.mjs (`./src/...`, `./favicons/output`,
+# `./error-pages/...`), da jsconfig.json (@css, @src, @icons, @imgs) e da
+# postcss.config.mjs (`../src/css/custom-media.css`)
+mkdir -p \
+  "${FRONTEND_INSTALL_PATH}/src/css" \
+  "${FRONTEND_INSTALL_PATH}/src/tpl" \
+  "${FRONTEND_INSTALL_PATH}/icons" \
+  "${FRONTEND_INSTALL_PATH}/imgs" \
+  "${FRONTEND_INSTALL_PATH}/favicons" \
+  "${FRONTEND_INSTALL_PATH}/error-pages"
+
+# template html di webpack (HtmlWebpackPlugin: `./src/tpl/index.ejs`)
+safe_cat "${WEBPACK_SOURCE_DIR}/webpack-template.ejs" "${FRONTEND_INSTALL_PATH}/src/tpl/index.ejs"
+
+# css di partenza del progetto: solo i file destinati a essere personalizzati.
+# minimo.css NON viene copiato: i moduli css del framework vanno importati dal
+# pacchetto (`@import '@minimo/css/...'`, vedi entry-tpl.css)
 MINIMO_ROOT_CSS_DIR="${BASE_URL}/../../src"
-for FILE in "${MINIMO_ROOT_CSS_DIR}"/*.css; do
-  safe_cat "$FILE" "${TEMPLATE_DIR_NAME}/css/$(basename "$FILE")"
+for FILE in custom-properties.css custom-media.css fonts.css; do
+  safe_cat "${MINIMO_ROOT_CSS_DIR}/${FILE}" "${FRONTEND_INSTALL_PATH}/src/css/${FILE}"
 done
 
-# copia tokens.config.mjs
-safe_cat "${BASE_URL}/../../design-tokens/tokens-config-sample.mjs" "${TEMPLATE_DIR_NAME}/css/tokens-config.mjs"
+# config di build-tokens: collocato accanto al css generato (custom-properties.css).
+# NB: i percorsi relativi nel file vanno adattati alla sua posizione effettiva
+safe_cat "${BASE_URL}/../../design-tokens/tokens-config-sample.mjs" "${FRONTEND_INSTALL_PATH}/src/css/tokens-config.mjs"
 
 # template delle entry css (globale/di pagina e critical): ogni entry deve
 # importare direttamente custom-properties.css (vedi commenti nei file stessi)
-safe_cat "${TEMPLATES_DIR}/entry-tpl.css"          "${TEMPLATE_DIR_NAME}/src/entry-tpl.css"
-safe_cat "${TEMPLATES_DIR}/entry-tpl.critical.css" "${TEMPLATE_DIR_NAME}/src/entry-tpl.critical.css"
+safe_cat "${TEMPLATES_DIR}/entry-tpl.css"          "${FRONTEND_INSTALL_PATH}/src/entry-tpl.css"
+safe_cat "${TEMPLATES_DIR}/entry-tpl.critical.css" "${FRONTEND_INSTALL_PATH}/src/entry-tpl.critical.css"
 
 set +C
 

package/dev-tools/starter-kit/templates/__project__.code-workspace

@@ -7,7 +7,8 @@
   "settings": {
 
     "cssvar.files": [
-      "frontend/css/custom-properties.css", // project props
+      "frontend/src/css/custom-properties.css", // project props (frontend in sottodirectory)
+      // "src/css/custom-properties.css", // project props (frontend nella root)
 
       // OPEN PROPS
       // "./node_modules/open-props/open-props.min.css", // all open-props

package/dev-tools/starter-kit/templates/jsconfig.json

@@ -1,5 +1,6 @@
 {
   "__help": "https://code.visualstudio.com/docs/languages/jsconfig",
+  "__note": "Tenere questo file ACCANTO a webpack.config.mjs: gli alias webpack sono ricavati da qui (get-jsConfig-aliases.mjs) e risolti a partire dalla posizione di questo file",
   "compilerOptions": {
     "ignoreDeprecations": "6.0",
     "baseUrl": ".",
@@ -8,14 +9,14 @@
     "target": "es2023",
     "module": "ES6",
     "paths": {
-      "@css/*": ["./frontend/src/css/*"],
-      "@src/*": ["./frontend/src/*"],
-      "@icons/*": ["./frontend/icons/*"],
-      "@imgs/*": ["./frontend/imgs/*"],
-      "@frontend/*": ["./frontend/*"],
-      "@minimo/*": ["./node_modules/@massimo-cassandro/minimo/src/*"],
-      "@minimoCharts/*": ["./node_modules/@massimo-cassandro/minimo/charts/*"]
+      "@css/*": ["./src/css/*"],
+      "@src/*": ["./src/*"],
+      "@icons/*": ["./icons/*"],
+      "@imgs/*": ["./imgs/*"],
+      "@frontend/*": ["./*"],
+      "@minimo/*": ["__NODE_MODULES__/@massimo-cassandro/minimo/src/*"],
+      "@minimoCharts/*": ["__NODE_MODULES__/@massimo-cassandro/minimo/charts/*"]
     }
   },
-  "exclude": ["node_modules", "dist", "docs", "build", "public"]
+  "exclude": ["__NODE_MODULES__", "dist", "docs", "build", "public"]
 }

package/dev-tools/starter-kit/templates/package-tpl.json

@@ -22,7 +22,7 @@
     "webpack PROD": "npm run 'UPD-version' && NODE_ENV=production webpack --config ./webpack.config.mjs --stats minimal",
     "eslint-check": "npx eslint app/ # or src/, frontend/src/ ...",
     "create-favicons INIT": "npx create-favicons init",
-    "create-favicons": "npx create-favicons --dir=./src/favicons",
+    "create-favicons": "npx create-favicons --dir=./favicons # o ./frontend/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'",
@@ -30,8 +30,8 @@
     "php server": "php -S localhost:8000 # -t root_dir/",
     "symfony server": "symfony serve --port=8100 --listen-ip=0.0.0.0 # symfony server:stop # http://192.168.1.135:8100 # -d (deamon): rimane aperto anche dopo la chiusra del terminale",
     "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",
+    "build tokens": "npx buildTokens --config ./src/css/tokens-config.mjs # o ./frontend/src/css/tokens-config.mjs",
+    "check unresolved props": "npx checkUnresolvedProps --config ./src/css/tokens-config.mjs # o ./frontend/src/css/tokens-config.mjs",
     "npm-outdated": "npm outdated",
     "npm-upd": "npm update --save"
   },

package/dev-tools/starter-kit/webpack-template.ejs

@@ -1,14 +1,15 @@
 <!DOCTYPE html>
+<!-- template html di webpack: installato in <frontend>/src/tpl/index.ejs
+     (vedi HtmlWebpackPlugin in webpack.config.mjs).
+     I require sono relativi a QUESTO file. -->
 <html lang="it">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-    <!-- favicons -->
-    <%= require('./favicons/output/favicons.incl.ejs')({}) %>
-    <!-- <%= require('./app/favicons/output/favicons.incl.ejs')({}) %> -->
-    <!-- <%= require('./frontend/favicons/output/favicons.incl.ejs')({}) %> -->
+    <!-- favicons (generate da `npx create-favicons`, vedi package.json) -->
+    <%= require('../../favicons/output/favicons.incl.ejs')({}) %>
 
     <title><%= htmlWebpackPlugin.options.title %></title>
     <!-- <base href="<%= htmlWebpackPlugin.options.base %>"> -->

package/dev-tools/starter-kit/webpack.config.mjs

@@ -24,21 +24,41 @@ import { getJsConfigAliases } from './webpack-modules/get-jsConfig-aliases.mjs';
 import { svgRules } from './webpack-modules/svg-rules.mjs';
 
 // --- config ---
+const __filename = fileURLToPath(import.meta.url)
+  ,__dirname = path.dirname(__filename);
+
+// Risolve un percorso a partire dalla root del progetto, che coincide con la dir
+// di questo file solo se il frontend NON è in una sottodirectory (es. ./frontend):
+// vengono provate entrambe le posizioni, in fallback la prima
+const fromProjectRoot = (relPath) => {
+  const candidates = ['./', '../'].map(p => path.resolve(__dirname, p, relPath));
+  return candidates.find(p => fs.existsSync(p)) ?? candidates[0];
+};
+
 const isDevelopment = process.env.NODE_ENV === 'development'
-  ,__filename = fileURLToPath(import.meta.url)
-  ,__dirname = path.dirname(__filename)
   ,useSass = false
   ,inlineCssInDevMode = true
   ,useSvgo = true
   ,useSvgr = false // svg per react
   ,svgoConfig = useSvgo? (await import('./webpack-modules/svgo.config.mjs')).default : null
   ,postcssConfig_path = path.resolve(__dirname, './webpack-modules/postcss.config.mjs')
+  // dir di output: relativa a QUESTO file ('../build' se il frontend è in una
+  // sottodirectory, './build' se webpack.config.mjs è nella root del progetto)
   ,output_dir = path.resolve(__dirname, '../build')
   // ,output_dir = isDevelopment? '_dev' : 'build' // symfony
-  ,favicons_path = 'frontend/favicons/output'
-  ,favicons_path_regexp = new RegExp(favicons_path) // source pattern per le favicons (regexp o null)
+  // dir delle favicons generate da `npx create-favicons` (vedi package.json):
+  // il path assoluto serve a CopyWebpackPlugin/HtmlWebpackPlugin (i path
+  // relativi sarebbero risolti dal cwd, non da questo file), mentre la regexp
+  // resta relativa perché viene confrontata con i path dei moduli
+  ,favicons_path = path.resolve(__dirname, './favicons/output')
+  ,favicons_path_regexp = /favicons\/output/ // source pattern per le favicons (regexp o null)
+  // NB: jsconfig.json va tenuto in questa stessa dir (gli alias sono risolti
+  // a partire dalla sua posizione)
   ,jsConfigAliases = getJsConfigAliases(path.resolve(__dirname, './jsconfig.json'))
-  ,packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, './package.json'), 'utf-8')),usePurgeCss = true // false per disattivare PurgeCSS (debug rapido di problemi legati al purge)
+  ,packageJson = JSON.parse(fs.readFileSync(fromProjectRoot('package.json'), 'utf-8'))
+  // path del pacchetto minimo (il suo js genera markup con classi proprie e il
+  // suo css dichiara custom properties: entrambi vanno visti da PurgeCSS)
+  ,minimo_path = fromProjectRoot('node_modules/@massimo-cassandro/minimo')
   ,usePurgeCss = true // false per disattivare PurgeCSS (debug rapido di problemi legati al purge)
   ,purgeCSSOptions = {
     variables: false, // rimuove le custom properties non usate (sostituisce jit-props)
@@ -91,7 +111,7 @@ const shared_chunk_paths = (module) => {
 // https://github.com/webpack/copy-webpack-plugin/tree/main?tab=readme-ov-file#copy-webpack-plugin
 const CopyWebpackPluginPatterns = [
   {
-    from: 'src/favicons/output/icon-*.png',
+    from: `${favicons_path}/icon-*.png`,
     to: '[name][ext]'
   },
   // {
@@ -115,110 +135,9 @@ const CopyWebpackPluginPatterns = [
   // }
 ];
 
-// =>> PurgeCSS: opzioni e istanze (usate nei plugins e dal log di debug)
-//
-// Vengono create DUE istanze, attive in ENTRAMBE le modalità (dev e prod),
-// così i problemi di purge emergono subito durante lo sviluppo:
-// - `purgeCSSPluginCritical`: solo le entry `*.critical` (purge stretto, gli asset
-//   devono essere autosufficienti e minimi perché inlinati nei template html)
-// - `purgeCSSPlugin`: tutti gli asset (il doppio passaggio sui critical è idempotente)
-//
-// NB (watch mode): i template twig NON sono osservati da webpack: dopo aver
-// aggiunto una classe solo in un twig occorre rilanciare la build (o toccare
-// un file js/css) perché il purge venga ricalcolato.
-// NB (dev): il plugin agisce solo sugli asset css emessi; con
-// `inlineCssInDevMode: true` i css non-critical in dev sono iniettati da
-// style-loader e non vengono purgati (i critical passano comunque da
-// MiniCssExtract e sono sempre purgati)
-
-// `paths`: SOLO file che generano markup o classi (html/ejs, twig, php, js);
-// NIENTE file css tra i paths: verrebbero letti come "contenuto" e ogni selettore
-// risulterebbe usato, vanificando il purge
-const purgeCSSCommonOptions = {
-  paths: () => globSync(
-    [
-      path.resolve(__dirname, './src/**/*.{js,mjs,jsx}'),
-      path.resolve(__dirname, './*.ejs'), // template html di webpack
-      path.resolve(__dirname, './src/**/*.ejs'),
-      // progetti symfony: template twig e classi generate lato php
-      // path.resolve(__dirname, '../templates/**/*.twig'),
-      // path.resolve(__dirname, '../src/**/*.php'),
-      // il js di minimo genera markup con classi proprie (snackbar, unsplash-page, ecc.)
-      // NB: adattare il percorso di node_modules se questo config è in una
-      // sottodirectory del progetto (es. frontend/ → '../node_modules/...')
-      path.resolve(__dirname, './node_modules/@massimo-cassandro/minimo/src/**/*.{js,mjs}'),
-    ],
-    { nodir: true }
-  ),
-
-  // extractor di default (/[A-Za-z0-9_-]+/g): adeguato a classi/tag/id,
-  // NON definire extractors custom (il vecchio /[A-z0-9-:/]+/ era buggato:
-  // il range [A-z] include caratteri non voluti come `[`, `\`, `^`, ...)
-
-  variables: true, // rimuove le custom properties non usate (sostituisce postcss-jit-props)
-  keyframes: true, // rimuove i @keyframes non referenziati
-  // fontFace resta false (default): i font sono referenziati solo tramite
-  // var(--font-family) e purgecss non risolve le custom properties nei valori,
-  // quindi con `true` i @font-face verrebbero rimossi anche se usati
-
-  rejected: purgeCSSDebug // popola purgedStats per il log di debug
-};
-
-// safelist base minima, comune alle due istanze
-const purgeCSSSafelistBase = {
-  standard: [
-    // classi costruite dinamicamente nei template o lato server, invisibili
-    // all'analisi statica dei paths. Esempio (da adattare al progetto):
-    // flash messages twig con class="alert alert-{{ label }}"
-    /^alert-(success|notice|error|warning)$/
-  ],
-  deep: [
-    // css modules: prefisso `m_` presente in dev e prod (vedi css-rules.mjs),
-    // le classi hashate non possono comparire nei file scansionati
-    /^m_/
-  ],
-  greedy: [
-    // INDISPENSABILE: purgecss non riconosce il nesting selector nativo e senza
-    // questo pattern i selettori annidati composti solo da `&` + pseudo classi
-    // (&:hover, &:focus-visible, `&` semplice, ecc.) verrebbero SEMPRE rimossi
-    /^&$/
-  ]
-};
-
-// css della pagina critici (inlinati nei template): purge stretto,
-// devono essere autosufficienti e minimi
-const purgeCSSPluginCritical = new PurgeCSSPlugin({
-  ...purgeCSSCommonOptions,
-  only: ['.critical'],
-  safelist: purgeCSSSafelistBase
-});
-
-// tutti gli altri asset (il purge è idempotente: il secondo passaggio
-// sui critical non rimuove altro)
-const purgeCSSPlugin = new PurgeCSSPlugin({
-  ...purgeCSSCommonOptions,
-  safelist: {
-    ...purgeCSSSafelistBase,
-    // elenco generato: usi di var() nei blocchi `purgecss ignore` e nei css
-    // shadow-DOM/`?raw`, override cross-asset (seeds), con chiusura transitiva
-    // delle dipendenze (vedi webpack-modules/purgecss-variables-safelist.mjs)
-    variables: purgecssVariablesSafelist({
-      declarationGlobs: [
-        path.resolve(__dirname, './src/**/*.css'),
-        path.resolve(__dirname, './node_modules/@massimo-cassandro/minimo/src/**/*.css'),
-      ],
-      shadowGlobs: [
-        path.resolve(__dirname, './src/web-components/**/*.css'),
-        path.resolve(__dirname, './node_modules/@massimo-cassandro/minimo/src/web-components/**/*.css'),
-      ],
-      seeds: [
-        // props dichiarate in un asset ma consumate in un altro (es. override
-        // di tema definiti nel css di una pagina e consumati dal css globale):
-        // indicarle qui per nome ('--btn-primary-bg') o pattern (/^--btn-/)
-      ]
-    })
-  }
-});
+// =>> PurgeCSS
+// Istanze e opzioni sono in webpack-modules/purgecss-setup.mjs: qui restano
+// solo i flag e i dati di progetto (vedi createPurgeCSSPlugins nei `plugins`).
 
 // recupero metadata immagini
 // const require = createRequire(import.meta.url);
@@ -235,7 +154,7 @@ const entries = {
 
   // css critici inlinati nei template html: il suffisso `.critical` nel nome
   // della entry attiva l'istanza PurgeCSS dedicata con purge stretto
-  // (vedi purgeCSSPluginCritical) e la regola dedicata in css-rules.mjs
+  // (vedi purgecss-setup.mjs) e la regola dedicata in css-rules.mjs
   // ,'xxxxxx.critical': './src/xxxxxx.critical.css'
 };
 
@@ -393,7 +312,7 @@ const config = {
     // =>> plugins: HtmlWebpackPlugin (manifest)
     new HtmlWebpackPlugin({
       filename: 'manifest.webmanifest',
-      template: path.resolve(__dirname, './src/favicons/output/manifest.webmanifest.ejs'),
+      template: path.resolve(favicons_path, './manifest.webmanifest.ejs'),
       inject: false,
       minify: false //!isDevelopment
     }),
@@ -487,12 +406,16 @@ const config = {
         // SOLO file che generano markup o classi (twig, php, js);
         // i file di stile vengono comunque scartati dal plugin
         contentGlobs: [
-          path.resolve(__dirname, '../templates/**/*.twig'),
-          path.resolve(__dirname, '../src/**/*.php'),
+          // progetti symfony: template twig e classi generate lato php
+          // (percorsi relativi alla root del progetto: adattare il `../` se
+          // webpack.config.mjs NON è in una sottodirectory)
+          // path.resolve(__dirname, '../templates/**/*.twig'),
+          // path.resolve(__dirname, '../src/**/*.php'),
           path.resolve(__dirname, './src/**/*.{js,mjs,jsx}'),
+          path.resolve(__dirname, './src/**/*.ejs'), // template html di webpack
           path.resolve(__dirname, './error-pages/**/*.js'),
           // il js di minimo genera markup con classi proprie (snackbar, unsplash-page, ecc.)
-          path.resolve(__dirname, '../node_modules/@massimo-cassandro/minimo/src/**/*.{js,mjs}'),
+          `${minimo_path}/src/**/*.{js,mjs}`,
         ],
 
         safelist: {
@@ -529,11 +452,11 @@ const config = {
           declarationGlobs: [
             path.resolve(__dirname, './src/**/*.css'),
             path.resolve(__dirname, './error-pages/**/*.css'),
-            path.resolve(__dirname, '../node_modules/@massimo-cassandro/minimo/src/**/*.css'),
+            `${minimo_path}/src/**/*.css`,
           ],
           shadowGlobs: [
             path.resolve(__dirname, './src/web-components/**/*.css'),
-            path.resolve(__dirname, '../node_modules/@massimo-cassandro/minimo/src/web-components/**/*.css'),
+            `${minimo_path}/src/web-components/**/*.css`,
           ],
           seeds: [
             // override di .login-group (login.css) consumati dai buttons minimo (css globale)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.21.7",
+  "version": "1.21.9",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -74,6 +74,7 @@
   "peerDependencies": {
     "@svgdotjs/svg.js": "^3.2.7",
     "blurhash": "^2.0.5",
+    "simple-datatables": "^10.3.0",
     "style-dictionary": "^5.0.0"
   },
   "peerDependenciesMeta": {
@@ -83,6 +84,9 @@
     "blurhash": {
       "optional": true
     },
+    "simple-datatables": {
+      "optional": true
+    },
     "style-dictionary": {
       "optional": true
     }

package/src/web-components/s-datatable-component/docs.md

@@ -2,6 +2,14 @@
 
 <https://fiduswriter.github.io/simple-datatables/documentation/>
 
+## Installazione
+
+`simple-datatables` è una **peer dependency opzionale** di minimo: va installata
+solo nei progetti che usano questo componente.
+
+```bash
+npm i simple-datatables
+```
 
 ## Utilizzo da markup
 
@@ -211,13 +219,29 @@ cols: [
                    //   _sortValue: 'owner.cognome'  → ordina per cognome
 
     _searchValue,  // Percorso/i del campo da usare per la RICERCA al posto del contenuto
-                   // visualizzato. Accetta uno o più percorsi separati da spazio.
+                   // visualizzato. Accetta uno o più percorsi separati da spazio,
+                   // oppure una funzione (row) => string|number|boolean.
                    // Supporta notazione punto.
-                   // Implementato tramite searchMethod di colonna (API simple-datatables)
-                   // e attributo data-search sulla cella.
+                   // Implementato tramite searchMethod di colonna (API simple-datatables):
+                   // il valore viene scritto in attributes['data-search'] della cella e
+                   // la searchMethod lo legge dall'OGGETTO DATI INTERNO di
+                   // simple-datatables (cellType: { data, text?, order?, attributes? }),
+                   // NON dal nodo DOM <td> (la libreria passa alla callback
+                   // `searchRow[index]`, non l'elemento renderizzato).
+                   // Ordine di lettura: attributes['data-search'] → text → data.
+                   // Il valore viene convertito con String(), quindi sono ammessi
+                   // numeri e booleani (es. `_searchValue: row => row.id`).
                    // La ricerca è di tipo AND: tutti i termini digitati devono essere
                    // presenti nel valore del campo (o dei campi) indicati.
                    //
+                   // Normalizzazione: simple-datatables normalizza solo i termini
+                   // digitati (default `sensitivity: 'base'`, `ignorePunctuation: true`).
+                   // La searchMethod applica la stessa catena anche al contenuto della
+                   // cella (minuscole + NFD senza diacritici + rimozione punteggiatura),
+                   // così "citta" trova "Città" e "spa" trova "S.p.A.".
+                   // Se sulla colonna sono impostate `sensitivity` / `ignorePunctuation`,
+                   // vengono rispettate.
+                   //
                    // Esempio: _searchValue: 'owner.cognome owner.nome'
                    //   cerca su entrambi i campi concatenati; "rossi mario" trova solo
                    //   le righe che contengono entrambe le parole, in qualsiasi ordine.

package/src/web-components/s-datatable-component/s-datatable-component.js

@@ -5,6 +5,7 @@
 import { DataTable } from 'simple-datatables';
 
 import { parseCols } from './src/parse-cols.js';
+import { makeSearchMethod } from './src/search-method.js';
 
 import * as styles from './s-datatable-component.module.css';
 
@@ -640,10 +641,13 @@ class SimpleDatatableAdapter extends HTMLElement {
             value = nullAs;
           }
 
-          // _searchValue: valore alternativo per la ricerca
-          // Viene scritto come testo nascosto nella cella così la funzione
-          // search personalizzata della colonna può leggerlo direttamente
-          // dal contenuto, senza dipendere da attributi non supportati.
+          // _searchValue: valore alternativo per la ricerca.
+          // Viene scritto in `attributes['data-search']` della cella: la
+          // searchMethod di colonna lo legge dall'oggetto dati interno di
+          // simple-datatables (cellType), non dal DOM.
+          // Accetta un percorso (o più percorsi separati da spazio) oppure una
+          // funzione (row) => string|number: il valore viene normalizzato con
+          // String() al momento del confronto.
           const searchValue = col_item._searchValue
             ? typeof col_item._searchValue === 'function'
               ? (col_item._searchValue(row) ?? '')
@@ -702,20 +706,14 @@ class SimpleDatatableAdapter extends HTMLElement {
         // data-search invece che sul testo visualizzato.
         // L'API simple-datatables prevede: (terms, cell, row, colIdx, source)
         // - terms: array di stringhe (uno per parola cercata)
-        // - cell:  nodo DOM <td> della riga renderizzata
+        // - cell:  oggetto dati interno `cellType` ({ data, text?, order?, attributes? }),
+        //          NON il nodo DOM <td>: la libreria passa `searchRow[index]`
+        //          (vedi `multiSearch` in src/datatable.ts).
         // La funzione deve restituire true se la riga è da includere.
-        // NOTA: `cell` è un nodo DOM, quindi va usato cell.getAttribute()
-        // e NON cell.attributes?.['data-search'] (che leggerebbe la NamedNodeMap
-        // come plain object, restituendo sempre undefined).
-        // Comportamento AND: tutti i termini devono essere presenti (come
-        // nella demo https://fiduswriter.github.io/simple-datatables/demos/22-and-search/).
+        // Vedi ./src/search-method.js per la lettura del valore e la
+        // normalizzazione (allineata a quella che la libreria applica ai termini).
         if (col_settings._searchValue) {
-          colObj.searchMethod = (terms, cell) => {
-            const haystack = (
-              cell.getAttribute?.('data-search') ?? cell.textContent ?? ''
-            ).toLowerCase();
-            return terms.every(term => haystack.includes(term.toLowerCase()));
-          };
+          colObj.searchMethod = makeSearchMethod(col_settings);
         }
 
         return colObj;

package/src/web-components/s-datatable-component/src/parse-cols.js

@@ -121,13 +121,15 @@ export function parseCols(col_obj){
 
     } else if(col_obj._renderMode === 'numeric') {
       return {
-// TODO implementare merge con classi presenti nei parametri definiti dall'utente
-        cellClass: 'text-end text-numeric',
-        headerClass: 'text-end text-numeric', // NB: usata anche per il footer
+        ...col_obj,
+        // le classi definite dall'utente vengono unite, non sostituite
+        cellClass: classnames('text-end text-numeric', col_obj.cellClass),
+        headerClass: classnames('text-end text-numeric', col_obj.headerClass), // NB: usata anche per il footer
       };
 
     } else if(col_obj._renderMode === 'euro_no_dec') {
       return {
+        ...col_obj,
         render: (value, cell) => {
           // console.log(value);
           if(value == null || isNaN(value)) {
@@ -143,8 +145,9 @@ export function parseCols(col_obj){
             });
           }
         },
-        cellClass: 'text-nowrap text-end text-numeric',
-        headerClass: 'text-nowrap text-end text-numeric', // NB: usata anche per il footer
+        // le classi definite dall'utente vengono unite, non sostituite
+        cellClass: classnames('text-nowrap text-end text-numeric', col_obj.cellClass),
+        headerClass: classnames('text-nowrap text-end text-numeric', col_obj.headerClass), // NB: usata anche per il footer
         type: 'number'
       };
 

package/src/web-components/s-datatable-component/src/search-method.js

@@ -0,0 +1,84 @@
+// @ts-nocheck
+
+// Generazione della `searchMethod` di colonna usata da `_searchValue`.
+//
+// simple-datatables NON passa alla searchMethod il nodo DOM della cella, ma
+// l'oggetto dati interno `cellType` ({ data, text?, order?, attributes? }):
+// vedi `multiSearch` in `src/datatable.ts` (`customSearchMethod(queryColumnWord,
+// searchRow[index], row, index, source)`). Gli `attributes` sono conservati
+// nell'oggetto dati (`readDataCell` in `src/read_data.ts` ammette le chiavi
+// "text", "order", "data", "attributes"), quindi `data-search` va letto da
+// `cell.attributes['data-search']`, non con `cell.getAttribute()`.
+
+// Punteggiatura rimossa quando `ignorePunctuation` è attivo
+const PUNCTUATION_RX = /[.,/#!$%^&*;:{}=\-_`~()]/g;
+
+/**
+ * Normalizza una stringa replicando il trattamento che simple-datatables
+ * applica ai termini di ricerca quando è attiva una `searchMethod` personalizzata.
+ *
+ * La libreria normalizza solo i termini digitati (non il contenuto della cella),
+ * con i default `sensitivity: 'base'` e `ignorePunctuation: true`: se l'haystack
+ * non riceve lo stesso trattamento, "citta" non troverebbe "Città" e "spa" non
+ * troverebbe "S.p.A.".
+ *
+ * @param {*} str Valore da normalizzare (convertito con String()).
+ * @param {object} [opts]
+ * @param {'base'|'accent'|'case'|'variant'} [opts.sensitivity='base']
+ *        'base'    → ignora maiuscole/minuscole e diacritici
+ *        'accent'  → ignora maiuscole/minuscole, mantiene i diacritici
+ *        'case'    → distingue maiuscole/minuscole, ignora i diacritici
+ *        'variant' → distingue tutto
+ * @param {boolean} [opts.ignorePunctuation=true]
+ * @returns {string}
+ */
+export function normalizeSearchString(str, opts = {}) {
+  const sensitivity       = opts.sensitivity       ?? 'base';
+  const ignorePunctuation = opts.ignorePunctuation ?? true;
+
+  // String() anche su numeri/booleani: `_searchValue` come funzione può
+  // restituire un id numerico o un flag
+  let out = String(str ?? '');
+
+  if (sensitivity === 'base' || sensitivity === 'accent') {
+    out = out.toLowerCase();
+  }
+  if (sensitivity === 'base' || sensitivity === 'case') {
+    out = out.normalize('NFD').replace(/\p{Diacritic}/gu, '');
+  }
+  if (ignorePunctuation) {
+    out = out.replace(PUNCTUATION_RX, '');
+  }
+
+  return out;
+}
+
+/**
+ * Restituisce la `searchMethod` di colonna per le colonne con `_searchValue`.
+ *
+ * API simple-datatables: (terms, cell, row, colIdx, source) => boolean
+ * - `terms` array di stringhe (una per parola cercata), già normalizzate dalla libreria
+ * - `cell`  oggetto dati `cellType` ({ data, text?, order?, attributes? })
+ *
+ * Comportamento AND: tutti i termini devono essere presenti
+ * (come nella demo https://fiduswriter.github.io/simple-datatables/demos/22-and-search/).
+ *
+ * @param {object} [colSettings] Definizione della colonna (per `sensitivity` / `ignorePunctuation`).
+ * @returns {(terms: string[], cell: object) => boolean}
+ */
+export function makeSearchMethod(colSettings = {}) {
+  const opts = {
+    sensitivity:       colSettings.sensitivity,
+    ignorePunctuation: colSettings.ignorePunctuation,
+  };
+
+  return (terms, cell) => {
+    const raw = cell?.attributes?.['data-search']
+      ?? cell?.text
+      ?? (typeof cell?.data === 'string' || typeof cell?.data === 'number' ? cell.data : '');
+
+    const haystack = normalizeSearchString(raw, opts);
+
+    return terms.every(term => haystack.includes(normalizeSearchString(term, opts)));
+  };
+}