New: First commit

Author: jonnitto

Configuration/Settings.yaml

@@ -0,0 +1,5 @@
+Neos:
+  Neos:
+    fusion:
+      autoInclude:
+        Garagist.Fontawesome.AlpineJS: true

Resources/Private/Fusion/Override/Icon.fusion

@@ -0,0 +1,9 @@
+prototype(Garagist.Fontawesome:Component.Icon) {
+    tagName = 'i'
+
+    iconParts = ${Garagist.Fontawesome.parts(this.style, this.icon)}
+    content >
+    @if.hasContent = ${this.iconParts}
+
+    renderer.overwriteAttributes.x-data = ${AlpineJS.xData('icon', props.iconParts)}
+}

Resources/Private/Fusion/Root.fusion

@@ -0,0 +1 @@
+include: **/*.fusion

Resources/Private/Main.js

@@ -0,0 +1,43 @@
+import lscache from "lscache";
+
+function replaceTag(element, markup) {
+    const attributes = [...element.attributes]
+        .filter((item) => item.name != "x-data")
+        .map((item) => [item.name, item.value]);
+    const div = document.createElement("div");
+    div.innerHTML = markup;
+    const newElement = div.firstElementChild;
+    attributes.forEach(([name, value]) => {
+        newElement.setAttribute(name, value);
+    });
+    element.replaceWith(newElement);
+}
+
+window.addEventListener("alpine:init", () => {
+    window.Alpine.data("icon", (segment) => ({
+        init() {
+            lscache.setBucket("icons");
+            const cache = lscache.get(segment);
+            if (cache && typeof cache === "string") {
+                replaceTag(this.$el, cache);
+                return;
+            }
+            fetch(`/garagist/fontawesome/${segment.replaceAll(":", "/")}.svg`)
+                .then((response) => {
+                    if (!response.ok) {
+                        throw new Error("Failed to load icon");
+                    }
+                    return response.text();
+                })
+                .then((data) => {
+                    // Store for 1 week 60 min * 24 hours * 7 days = 10080
+                    lscache.set(segment, data, 10080);
+                    replaceTag(this.$el, data);
+                })
+                .catch((error) => {
+                    console.warn(error);
+                    this.$el.remove();
+                });
+        },
+    }));
+});

composer.json

@@ -0,0 +1,19 @@
+{
+    "name": "garagist/fontawesome-alpinejs",
+    "description": "Fetch fontawesome icons with AlpineJS. Cached with LocalStorage",
+    "type": "neos-plugin",
+    "license": "GPL-3.0-or-later",
+    "require": {
+        "garagist/fontawesome": "^0.1"
+    },
+    "autoload": {
+        "psr-4": {
+            "Garagist\\Fontawesome\\AlpineJS\\": "Classes/"
+        }
+    },
+    "extra": {
+        "neos": {
+            "package-key": "Garagist.Fontawesome.AlpineJS"
+        }
+    }
+}