first commit

Author: dashpilot

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

example.js

@@ -0,0 +1,69 @@
+import { compile } from "./index.js";
+
+const html = `
+   <div id="app" x-data="app()">
+     
+        <section class="header h-100">
+          <div class="container h-100">
+            <div class="row align-items-center h-100">
+              <div class="col-md-6">
+                <img src="/templates/homebase/img/planet.png" class="img-fluid">
+              </div>
+              <div class="col-md-6 mx-auto" data-edit="header">
+                <div>
+                  <h2 x-html="data.header.title"></h2>
+                  <p x-html="data.header.body"></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div class="row">
+        <template x-for="item in data.items">
+                <div class="col-md-4" data-edit="items" :id="item.id">
+                  <img :src="item.img" class="img-fluid w-50">
+                  <h3 x-html="item.title"></h3>
+                  <p x-html="item.body"></p>
+                </div>
+         </template>
+         </div>
+
+         <template x-if="data.header.subtitle">
+            <div x-text="data.header.subtitle"></div>
+        </template>
+
+  </div>
+`;
+
+const data = {
+  header: {
+    title: "Welcome to our site.",
+    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et lacus non turpis congue congue. Integer porttitor non leo.",
+  },
+  items: [
+    {
+      id: "item-1",
+      img: "/img/blobs1.png",
+      title: "Feature One",
+      body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id tortor neque.",
+      layout: "post",
+    },
+    {
+      id: "item-2",
+      img: "/img/blobs2.png",
+      title: "Feature Two",
+      body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id tortor neque.",
+      layout: "post",
+    },
+    {
+      id: "item-3",
+      img: "/img/blobs3.png",
+      title: "Feature Three",
+      body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id tortor neque.",
+      layout: "post",
+    },
+  ],
+};
+
+console.log(compile(html, data));

index.js

@@ -0,0 +1,89 @@
+import cheerio from "cheerio";
+import _ from "lodash";
+
+function compile(html, data) {
+  const $ = cheerio.load(html);
+
+  $("[x-for]").each(function () {
+    const key = $(this).attr("x-for").split(" in ")[1].slice(5); // Remove 'data.' from the start
+    const items = _.get(data, key);
+    const template = $(this).html();
+
+    let result = "";
+    items.forEach((item) => {
+      let itemHtml = cheerio.load(template);
+      for (const prop in item) {
+        const regex = new RegExp(`item.${prop}`, "g");
+        itemHtml("[x-html]").each(function () {
+          if ($(this).attr("x-html") === `item.${prop}`) {
+            $(this).html(item[prop]);
+          }
+        });
+        itemHtml("[x-text]").each(function () {
+          if ($(this).attr("x-text") === `item.${prop}`) {
+            $(this).text(item[prop]);
+          }
+        });
+        itemHtml("[:src]").each(function () {
+          if ($(this).attr(":src") === `item.${prop}`) {
+            $(this).attr("src", item[prop]);
+          }
+        });
+        itemHtml("[:id]").each(function () {
+          if ($(this).attr(":id") === `item.${prop}`) {
+            $(this).attr("id", item[prop]);
+          }
+        });
+      }
+      result += itemHtml.html();
+    });
+
+    $(this).replaceWith(result);
+  });
+
+  $("[x-html]").each(function () {
+    const key = $(this).attr("x-html").slice(5); // Remove 'data.' from the start
+    const value = _.get(data, key);
+    if (value) {
+      $(this).html(value);
+    }
+  });
+
+  $("[x-text]").each(function () {
+    const key = $(this).attr("x-text").slice(5); // Remove 'data.' from the start
+    const value = _.get(data, key);
+    if (value) {
+      $(this).text(value);
+    }
+  });
+
+  $("[:src]").each(function () {
+    const key = $(this).attr(":src").slice(5); // Remove 'data.' from the start
+    const value = _.get(data, key);
+    if (value) {
+      $(this).attr("src", value);
+    }
+  });
+
+  $("[:id]").each(function () {
+    const key = $(this).attr(":id").slice(5); // Remove 'data.' from the start
+    const value = _.get(data, key);
+    if (value) {
+      $(this).attr("id", value);
+    }
+  });
+
+  /*
+    $('[x-if]').each(function() {
+      const condition = $(this).attr('x-if').slice(5); // Remove 'data.' from the start
+      const value = _.get(data, condition);
+      if (!value) {
+        $(this).remove();
+      }
+    });
+    */
+
+  return $.html();
+}
+
+export { compile };

package-lock.json

@@ -0,0 +1,16 @@
+{
+  "name": "alpinejs-ssr",
+  "version": "1.0.0",
+  "description": "Simple server-side-rendering for Alpine.js.",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Dashpilot",
+  "license": "ISC",
+  "dependencies": {
+    "cheerio": "^1.0.0-rc.12",
+    "lodash": "^4.17.21"
+  }
+}