x4js 2.3.2 → 2.3.4

package/cli/build-options.mjs

@@ -3,6 +3,7 @@ import { fileURLToPath } from "node:url";
 import { sassPlugin } from "esbuild-sass-plugin";
 import { lessPlugin } from "./less-plugin.mjs";
 import { copyPlugin } from "./copy-plugin.mjs";
+import { rawFilePlugin } from "./rawfile-plugin.mjs";
 
 const cliDir = path.dirname(fileURLToPath(import.meta.url));
 const devClient = path.join(cliDir, "dev-client.js");
@@ -28,7 +29,7 @@ export function createBuildOptions(config, mode) {
         format: "iife",
         target: "es2020",
         minify: production,
-        sourcemap: production ? false : "inline",
+        sourcemap: production ? false : "linked",
         logLevel: "info",
         external: config.external,
         assetNames: "assets/[name]-[hash]",
@@ -47,6 +48,10 @@ export function createBuildOptions(config, mode) {
             VERSION_ID: versionId(),
         },
         plugins: [
+			rawFilePlugin({
+				filter: /\.svg$/,
+				mime: "image/svg+xml",
+			}),
             sassPlugin({
                 type: "css",
                 filter: /\.s[ac]ss$/,

package/cli/config.mjs

@@ -132,7 +132,7 @@ export function loadConfig(root = process.cwd(), env = process.env) {
         })),
         external: [...external],
         define: { ...define },
-        dev: {
+		dev: {
             host,
             port,
             https,

package/cli/rawfile-plugin.mjs

@@ -0,0 +1,43 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+export function rawFilePlugin({ filter, mime }) {
+    const namespace = "x4-raw-file";
+
+    return {
+        name: "x4-raw-file",
+
+        setup(build) {
+            build.onResolve({ filter }, (args) => {
+                // Seulement les imports JS/TS.
+                if (
+                    args.kind !== "import-statement" &&
+                    args.kind !== "dynamic-import"
+                ) {
+                    return;
+                }
+
+                return {
+                    path: path.resolve(args.resolveDir, args.path),
+                    namespace,
+                };
+            });
+
+            build.onLoad(
+                { filter: /.*/, namespace },
+                async (args) => {
+                    const data = await fs.readFile(args.path);
+
+                    const value =
+                        `data:${mime};base64,${data.toString("base64")}`;
+
+                    return {
+                        contents:
+                            `export default ${JSON.stringify(value)};`,
+                        loader: "js",
+                    };
+                }
+            );
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/dialog/dialog.module.scss

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-@import "../shared.scss";
+@use "../shared";
 
 :root {
 	--color-dialog-caption: var( --color-primary-a80 );

package/src/components/icon/icon.ts

@@ -133,7 +133,6 @@ export class Icon extends Component<IconProps> {
      * import myicon from "./myicon.svg";
      * setIcon(myicon);
      */
-
 	setIcon( iconId: string ) {
 		this.clearContent( );
 			
@@ -148,6 +147,9 @@ export class Icon extends Component<IconProps> {
 			if( iconId.startsWith("data:image/svg+xml,<svg") ) {
 				this.dom.insertAdjacentHTML('beforeend', iconId.substring(19) );
 			}
+			else if( iconId.startsWith("data:image/svg+xml;base64,") ) {
+				this.dom.insertAdjacentHTML('beforeend', atob(iconId.substring(26)) );
+			}
 			else if( iconId.startsWith("<svg") ) {	// raw
 				this.dom.insertAdjacentHTML('beforeend', iconId );
 			}