mypgs 1.4.0 → 1.4.1

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/javascript/pgs.d.ts

@@ -62,6 +62,12 @@ declare global {
 
   interface PgsBag extends PgsElementApi {}
 
+  namespace React {
+    interface HTMLAttributes<T> {
+      pgsHtml?: string;
+    }
+  }
+
   var pgs: PgsFunction;
 }
 

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/dist/index.d.ts

@@ -61,6 +61,12 @@ declare global {
 
   interface PgsBag extends PgsElementApi {}
 
+  namespace React {
+    interface HTMLAttributes<T> {
+      pgsHtml?: string;
+    }
+  }
+
   var pgs: PgsFunction;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mypgs",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "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,8 @@
             "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",
+        "./vite-plugin-pgs": "./plugins/vite-plugin-pgs.js"
     },
     "style": "./dist/css/index.css",
     "scripts": {

package/plugins/vite-plugin-pgs.js

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

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%");
         }
     }