mypgs 1.4.0 → 1.5.0

package/README.md

@@ -39,6 +39,21 @@ import { pgs } from "mypgs";
 import "mypgs/style.css";
 ```
 
+In progetti React/TSX con Vite, abilita i tipi JSX e il plugin che converte `pgsHtml` in `pgs`:
+
+```ts
+import "mypgs/react";
+```
+
+```ts
+import react from "@vitejs/plugin-react";
+import pgsVite from "mypgs/vite-plugin-pgs";
+
+export default {
+  plugins: [pgsVite(), react()],
+};
+```
+
 Markup minimo consigliato:
 
 ```html
@@ -305,7 +320,17 @@ Il pacchetto espone:
     "default": "./dist/javascript/index.js"
   },
   "./style.css": "./dist/css/index.css",
-  "./style.min.css": "./dist/css/index.min.css"
+  "./style.min.css": "./dist/css/index.min.css",
+  "./react": {
+    "types": "./react.d.ts",
+    "import": "./react.js",
+    "default": "./react.js"
+  },
+  "./vite-plugin-pgs": {
+    "types": "./plugins/vite-plugin-pgs.d.ts",
+    "import": "./plugins/vite-plugin-pgs.js",
+    "default": "./plugins/vite-plugin-pgs.js"
+  }
 }
 ```
 

package/assets/javascript/index.js

@@ -20,6 +20,8 @@ import "./components/_notifications.js";
 //= IMPORT REGISTRY
 import "./_imports.js";
 
+//= LAYOUT 
+import "./layout/_header.js";
+
 //= PATTERNS 
-import "./patterns/_header.js";
 import "./patterns/_cookieConsent.js";

package/assets/scss/index.scss

@@ -23,6 +23,8 @@
     @include meta.load-css("layout/grid");
     @include meta.load-css("layout/pageShell");
     @include meta.load-css("layout/gap");
+    @include meta.load-css("layout/header");
+    @include meta.load-css("layout/footer");
 }
 
 /*
@@ -56,7 +58,5 @@
 |--------------------------------------------------------------------------
 */
 [pgs~=initP] {
-    @include meta.load-css("patterns/header");
-    @include meta.load-css("patterns/footer");
     @include meta.load-css("patterns/cookieConsent");
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mypgs",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "description": "MyPGS frontend theme and UI behaviors, with bundled JavaScript and CSS assets.",
     "main": "./dist/javascript/index.js",
     "module": "./assets/javascript/index.js",
@@ -12,7 +12,17 @@
             "default": "./dist/javascript/index.js"
         },
         "./style.css": "./dist/css/index.css",
-        "./style.min.css": "./dist/css/index.min.css"
+        "./style.min.css": "./dist/css/index.min.css",
+        "./react": {
+            "types": "./react.d.ts",
+            "import": "./react.js",
+            "default": "./react.js"
+        },
+        "./vite-plugin-pgs": {
+            "types": "./plugins/vite-plugin-pgs.d.ts",
+            "import": "./plugins/vite-plugin-pgs.js",
+            "default": "./plugins/vite-plugin-pgs.js"
+        }
     },
     "style": "./dist/css/index.css",
     "scripts": {

package/plugins/vite-plugin-pgs.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from "vite";
+
+export default function pgsVite(): Plugin;

package/plugins/vite-plugin-pgs.js

@@ -0,0 +1,19 @@
+export default function pgsVite() {
+    return {
+        name: "vite-plugin-pgs-html",
+        enforce: "pre",
+
+        transform(code, id) {
+            if (!/\.(jsx|tsx)$/.test(id)) return null;
+
+            const nextCode = code.replace(/\bpgsHtml(\s*)=/g, "pgs$1=");
+
+            if (nextCode === code) return null;
+
+            return {
+                code: nextCode,
+                map: null,
+            };
+        },
+    };
+}

package/react.d.ts

@@ -0,0 +1,11 @@
+import "react";
+
+declare module "react" {
+  interface HTMLAttributes<T> {
+    /** Use pgsHtml in JSX/TSX. The Vite plugin converts it to pgs. */
+    pgs?: never;
+    pgsHtml?: string;
+  }
+}
+
+export {};

package/react.js

@@ -0,0 +1 @@
+export {};

package/templates/html/demo.js

@@ -31,15 +31,13 @@ const templateFiles = [
     "layout/flex.html",
     "layout/grid.html",
     "layout/pageShell.html",
+    "layout/footer.html",
+    "layout/header.html",
     "patterns/cookieConsent.html",
-    "patterns/header.html",
-    "patterns/footer.html",
 ];
 
 function getTemplateTitle(path) {
-    return path
-        .replace(".html", "")
-        .replace("/", " / ")
+    return path.replace(".html", "").replace("/", " / ")
 }
 
 function renderSourceTemplate(section, html) {
@@ -72,9 +70,7 @@ function renderTitle(section, path) {
 
 async function loadTemplate(path) {
     const response = await fetch(path);
-    if (!response.ok) {
-        throw new Error(`${path}: ${response.status}`);
-    }
+    if (!response.ok) throw new Error(`${path}: ${response.status}`);
     return response.text();
 }
 
@@ -90,8 +86,8 @@ async function bootDemo() {
     const AFTER = document.getElementById("templates-demo-after");
 
     for (const path of templateFiles) {
-        const isHeader = path === "patterns/header.html";
-        const isfooter = path === "patterns/footer.html";
+        const isHeader = path === "layout/header.html";
+        const isfooter = path === "layout/footer.html";
         const isBody = path === "layout/body.html";
 
         if (isHeader || isfooter) {
@@ -103,7 +99,6 @@ async function bootDemo() {
                 message.textContent = `Template non caricato: ${error.message}`;
                 layoutRoot.append(message);
             }
-
             continue;
         }
 
@@ -116,7 +111,6 @@ async function bootDemo() {
             const html = await loadTemplate(path);
             renderSourceTemplate(section, html);
             MAIN.append(section);
-
             continue
         }
 
@@ -133,7 +127,6 @@ async function bootDemo() {
 
         if (path == "layout/section.html" || path == "layout/pageShell.html") {
             section.style.display = "contents";
-
             Array.from(section.children).forEach(c => c.style.width = "100%");
         }
     }

package/assets/javascript/pgs.d.ts

@@ -1,70 +0,0 @@
-declare global {
-  type PgsSelectorValue = string | string[];
-  type PgsStateValue = string | string[];
-
-  interface PgsQueryableApi {
-    querySelector(value: PgsSelectorValue): Element | null;
-    querySelectorAll(value: PgsSelectorValue): NodeListOf<Element>;
-  }
-
-  interface PgsStateApi {
-    (...values: PgsStateValue[]): PgsStateApi;
-    add(...values: PgsStateValue[]): PgsStateApi;
-    remove(...values: PgsStateValue[]): PgsStateApi;
-    toggle(value: string, force?: boolean): boolean;
-    contains(value: string): boolean;
-    value: string | null;
-  }
-
-  interface PgsOptionApi {
-    contains(key: string): boolean;
-    getValueBrackets(key: string): string | undefined;
-    value: string | null;
-  }
-
-  interface PgsElementApi extends PgsQueryableApi {
-    (): PgsElementApi;
-    add(...values: string[]): PgsElementApi;
-    remove(...values: string[]): PgsElementApi;
-    toggle(value: string, force?: boolean): boolean;
-    contains(value: string): boolean;
-    value: string | null;
-    state: PgsStateApi;
-    option: PgsOptionApi;
-  }
-
-  interface PgsDocumentApi extends PgsQueryableApi {
-    (): PgsDocumentApi;
-  }
-
-  type PgsApi = PgsElementApi | PgsDocumentApi;
-
-  interface PgsFunction {
-    (root: Document): PgsDocumentApi;
-    (root: Element): PgsElementApi;
-    (root: Document | Element): PgsApi;
-    registerImport(...modules: unknown[]): PgsFunction;
-    registerModules(modules: Record<string, any>): PgsFunction;
-    import(...names: string[]): Record<string, any>;
-    accordion?: any;
-    dropdown?: any;
-    menu?: any;
-    modal?: any;
-    notification?: any;
-    slides?: any;
-    stepTabs?: any;
-    steps?: any;
-    summary?: any;
-    formValidate?: any;
-    scrollHorizontal?: any;
-    [moduleName: string]: any;
-  }
-
-  interface PgsBag extends PgsElementApi {}
-
-  var pgs: PgsFunction;
-}
-
-export function pgs(root: Document): PgsDocumentApi;
-export function pgs(root: Element): PgsElementApi;
-export function pgs(root: Document | Element): PgsApi;