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

@@ -61,12 +61,6 @@ 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.1",
+    "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",
@@ -13,7 +13,16 @@
         },
         "./style.css": "./dist/css/index.css",
         "./style.min.css": "./dist/css/index.min.css",
-        "./vite-plugin-pgs": "./plugins/vite-plugin-pgs.js"
+        "./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

@@ -1,14 +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: code.replace(/\bpgsHtml=/g, "pgs="),
+                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/assets/javascript/pgs.d.ts

@@ -1,76 +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 {}
-
-  namespace React {
-    interface HTMLAttributes<T> {
-      pgsHtml?: string;
-    }
-  }
-
-  var pgs: PgsFunction;
-}
-
-export function pgs(root: Document): PgsDocumentApi;
-export function pgs(root: Element): PgsElementApi;
-export function pgs(root: Document | Element): PgsApi;