@agnos-ui/svelte-preprocess 0.3.0

package/README.md

@@ -0,0 +1,65 @@
+# @agnos-ui/svelte-preprocess
+
+[![npm](https://img.shields.io/npm/v/@agnos-ui/svelte-preprocess)](https://www.npmjs.com/package/@agnos-ui/svelte-preprocess)
+
+Preprocessor to run [Svelte](https://svelte.dev/) [actions](https://svelte.dev/docs/svelte-action) server-side, which are called [directives](https://amadeusitgroup.github.io/AgnosUI/latest/docs/angular/headless/directives) in AgnosUI.
+
+## Installation
+
+```sh
+npm install @agnos-ui/svelte-preprocess
+```
+
+## Usage
+
+Add the `directivesPreprocess()` preprocessor to your `svelte.config.js`:
+
+```js
+import {directivesPreprocess} from '@agnos-ui/svelte-preprocess';
+
+// ...
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// ...
+
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: [
+		// ... existing preprocessors
+
+		// Add the following line:
+		directivesPreprocess(),
+	],
+
+	// ...
+};
+
+export default config;
+```
+
+Given the following file:
+
+```svelte
+<script>
+	import {myDirective} from './myDirective';
+</script>
+
+<div use:myDirective></div>
+```
+
+The preprocessor will transform it into something like:
+
+```svelte
+<script>
+	import {ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
+	import {BROWSER} from 'esm-env';
+	import {myDirective} from './myDirective';
+</script>
+
+<div use:myDirective {...BROWSER ? {} : ssrAttributes(myDirective)}></div>
+```
+
+On the server, `ssrAttributes` runs all the provided directives with an [`SSRHTMLElement`](https://github.com/AmadeusITGroup/AgnosUI/blob/ffc1339eb60e02e07d3415efd3f6fac890c8a39d/core/src/types.ts#L94) that implements a subset of the full [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). The attributes added by the directives on this element are returned by `ssrAttributes` to be included in the SSR-generated markup.
+
+If the element has a `class` attribute, the preprocessor will replace it with the `classDirective` directive to make sure the value of the class attribute is correctly merged both on the server and on the client with any other class that may be added by some other directive.

package/index.cjs

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MagicString = require("magic-string");
+const compiler = require("svelte/compiler");
+const directivesPreprocess = () => {
+  return {
+    name: "AgnosUI",
+    markup: async ({ content, filename }) => {
+      const varPrefix = "__AgnosUISveltePreprocess__";
+      if (content.includes(varPrefix)) {
+        return;
+      }
+      const str = new MagicString(content, { filename });
+      const parsedCode = compiler.parse(content, { filename });
+      const requiredImports = /* @__PURE__ */ new Set();
+      const extractValue = (attribute) => {
+        const res = [];
+        const value = attribute.value;
+        for (const part of value) {
+          if (part.type === "Text") {
+            res.push(JSON.stringify(part.data));
+          } else if (part.type === "MustacheTag") {
+            res.push(`(${content.substring(part.expression.start, part.expression.end)})`);
+          } else {
+            throw new Error(`Unexpected part type: ${part.type}`);
+          }
+        }
+        return res.join("+");
+      };
+      const processItem = (item) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+        const actionAttributes = [];
+        const classAttributes = [];
+        if (item.attributes) {
+          for (const attribute of item.attributes) {
+            if (attribute.type === "Action") {
+              actionAttributes.push(attribute);
+            } else if (attribute.type === "Attribute" && attribute.name === "class") {
+              classAttributes.push(attribute);
+            }
+          }
+          if (actionAttributes.length > 0) {
+            const end = item.attributes[item.attributes.length - 1].end;
+            let first = true;
+            str.appendRight(end, ` {...${varPrefix}BROWSER ? {} : ${varPrefix}ssrAttributes(`);
+            requiredImports.add("ssrAttributes");
+            for (const attribute of actionAttributes) {
+              if (first) {
+                first = false;
+              } else {
+                str.appendRight(end, `, `);
+              }
+              if (attribute.expression) {
+                str.appendRight(end, `[${attribute.name}, ${content.substring(attribute.expression.start, attribute.expression.end)}]`);
+              } else {
+                str.appendRight(end, attribute.name);
+              }
+            }
+            for (const attribute of classAttributes) {
+              const value = extractValue(attribute);
+              str.overwrite(attribute.start, attribute.end, `use:${varPrefix}classDirective={${value}}`);
+              str.appendRight(end, `, [${varPrefix}classDirective, ${value}]`);
+              requiredImports.add("classDirective");
+            }
+            str.appendRight(end, `)}`);
+          }
+        }
+        (_a = item.children) == null ? void 0 : _a.forEach(processItem);
+        (_c = (_b = item.else) == null ? void 0 : _b.children) == null ? void 0 : _c.forEach(processItem);
+        (_e = (_d = item.pending) == null ? void 0 : _d.children) == null ? void 0 : _e.forEach(processItem);
+        (_g = (_f = item.then) == null ? void 0 : _f.children) == null ? void 0 : _g.forEach(processItem);
+        (_i = (_h = item.catch) == null ? void 0 : _h.children) == null ? void 0 : _i.forEach(processItem);
+      };
+      processItem(parsedCode.html);
+      if (requiredImports.size > 0) {
+        const importStatement = `
+import {${[...requiredImports].map((importName) => `${importName} as ${varPrefix}${importName}`).join(", ")}} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as ${varPrefix}BROWSER} from 'esm-env';
+`;
+        const moduleOrInstance = parsedCode.module ?? parsedCode.instance;
+        if (moduleOrInstance) {
+          const start = content.indexOf(">", moduleOrInstance.start) + 1;
+          str.prependLeft(start, importStatement);
+        } else {
+          str.prepend(`<script>${importStatement}<\/script>
+`);
+        }
+      }
+      return {
+        code: str.toString(),
+        map: str.generateMap()
+      };
+    }
+  };
+};
+exports.directivesPreprocess = directivesPreprocess;

package/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="svelte" />
+import type { PreprocessorGroup } from 'svelte/compiler';
+export declare const directivesPreprocess: () => PreprocessorGroup;

package/index.js

@@ -0,0 +1,96 @@
+import MagicString from "magic-string";
+import { parse } from "svelte/compiler";
+const directivesPreprocess = () => {
+  return {
+    name: "AgnosUI",
+    markup: async ({ content, filename }) => {
+      const varPrefix = "__AgnosUISveltePreprocess__";
+      if (content.includes(varPrefix)) {
+        return;
+      }
+      const str = new MagicString(content, { filename });
+      const parsedCode = parse(content, { filename });
+      const requiredImports = /* @__PURE__ */ new Set();
+      const extractValue = (attribute) => {
+        const res = [];
+        const value = attribute.value;
+        for (const part of value) {
+          if (part.type === "Text") {
+            res.push(JSON.stringify(part.data));
+          } else if (part.type === "MustacheTag") {
+            res.push(`(${content.substring(part.expression.start, part.expression.end)})`);
+          } else {
+            throw new Error(`Unexpected part type: ${part.type}`);
+          }
+        }
+        return res.join("+");
+      };
+      const processItem = (item) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+        const actionAttributes = [];
+        const classAttributes = [];
+        if (item.attributes) {
+          for (const attribute of item.attributes) {
+            if (attribute.type === "Action") {
+              actionAttributes.push(attribute);
+            } else if (attribute.type === "Attribute" && attribute.name === "class") {
+              classAttributes.push(attribute);
+            }
+          }
+          if (actionAttributes.length > 0) {
+            const end = item.attributes[item.attributes.length - 1].end;
+            let first = true;
+            str.appendRight(end, ` {...${varPrefix}BROWSER ? {} : ${varPrefix}ssrAttributes(`);
+            requiredImports.add("ssrAttributes");
+            for (const attribute of actionAttributes) {
+              if (first) {
+                first = false;
+              } else {
+                str.appendRight(end, `, `);
+              }
+              if (attribute.expression) {
+                str.appendRight(end, `[${attribute.name}, ${content.substring(attribute.expression.start, attribute.expression.end)}]`);
+              } else {
+                str.appendRight(end, attribute.name);
+              }
+            }
+            for (const attribute of classAttributes) {
+              const value = extractValue(attribute);
+              str.overwrite(attribute.start, attribute.end, `use:${varPrefix}classDirective={${value}}`);
+              str.appendRight(end, `, [${varPrefix}classDirective, ${value}]`);
+              requiredImports.add("classDirective");
+            }
+            str.appendRight(end, `)}`);
+          }
+        }
+        (_a = item.children) == null ? void 0 : _a.forEach(processItem);
+        (_c = (_b = item.else) == null ? void 0 : _b.children) == null ? void 0 : _c.forEach(processItem);
+        (_e = (_d = item.pending) == null ? void 0 : _d.children) == null ? void 0 : _e.forEach(processItem);
+        (_g = (_f = item.then) == null ? void 0 : _f.children) == null ? void 0 : _g.forEach(processItem);
+        (_i = (_h = item.catch) == null ? void 0 : _h.children) == null ? void 0 : _i.forEach(processItem);
+      };
+      processItem(parsedCode.html);
+      if (requiredImports.size > 0) {
+        const importStatement = `
+import {${[...requiredImports].map((importName) => `${importName} as ${varPrefix}${importName}`).join(", ")}} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as ${varPrefix}BROWSER} from 'esm-env';
+`;
+        const moduleOrInstance = parsedCode.module ?? parsedCode.instance;
+        if (moduleOrInstance) {
+          const start = content.indexOf(">", moduleOrInstance.start) + 1;
+          str.prependLeft(start, importStatement);
+        } else {
+          str.prepend(`<script>${importStatement}<\/script>
+`);
+        }
+      }
+      return {
+        code: str.toString(),
+        map: str.generateMap()
+      };
+    }
+  };
+};
+export {
+  directivesPreprocess
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+	"name": "@agnos-ui/svelte-preprocess",
+	"description": "Preprocessor to run Svelte directives server-side.",
+	"version": "0.3.0",
+	"type": "module",
+	"main": "./index.cjs",
+	"module": "./index.js",
+	"types": "./index.d.ts",
+	"exports": {
+		".": {
+			"types": "./index.d.ts",
+			"require": "./index.cjs",
+			"default": "./index.js"
+		}
+	},
+	"dependencies": {
+		"magic-string": "^0.30.10"
+	},
+	"peerDependencies": {
+		"svelte": "*"
+	},
+	"sideEffects": false,
+	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
+	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/AmadeusITGroup/AgnosUI.git",
+		"directory": "svelte/preprocess"
+	},
+	"keywords": [
+		"svelte",
+		"AgnosUI",
+		"accordion",
+		"alert",
+		"components",
+		"modal",
+		"pagination",
+		"progressbar",
+		"rating",
+		"slider",
+		"toast",
+		"widgets"
+	]
+}