npm - @inglorious/ssx - Versions diffs - 0.1.1 - Mend

@inglorious/ssx 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/LICENSE +9 -0
package/README.md +883 -0
package/package.json +60 -0
package/src/__snapshots__/html.test.js.snap +193 -0
package/src/html.js +39 -0
package/src/html.test.js +375 -0

package/package.json ADDED Viewed

@@ -0,0 +1,60 @@
+{
+  "name": "@inglorious/ssx",
+  "version": "0.1.1",
+  "description": "Server-Side-X. Xecution? Xperience? Who knows.",
+  "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IngloriousCoderz/inglorious-forge.git",
+    "directory": "packages/store"
+  },
+  "homepage": "https://inglorious-engine.vercel.app/",
+  "bugs": {
+    "url": "https://github.com/IngloriousCoderz/inglorious-forge/issues"
+  },
+  "keywords": [
+    "ssg",
+    "ssr",
+    "server",
+    "inglorious",
+    "web",
+    "framework"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./src/store.js"
+    },
+    "./*": {
+      "types": "./types/*.d.ts",
+      "import": "./src/*"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "happy-dom": "^20.0.11",
+    "@inglorious/web": "2.4.0"
+  },
+  "devDependencies": {
+    "prettier": "^3.6.2",
+    "vite": "^7.1.3",
+    "vitest": "^1.6.1",
+    "@inglorious/eslint-config": "1.1.1"
+  },
+  "engines": {
+    "node": ">= 22"
+  },
+  "scripts": {
+    "format": "prettier --write '**/*.{js,jsx}'",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "test:watch": "vitest",
+    "test": "vitest run"
+  }
+}

package/src/__snapshots__/html.test.js.snap ADDED Viewed

@@ -0,0 +1,193 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`toHTML > API rendering within components > should support api.render() method in component render function 1`] = `"<div><div><span>Test Item</span></div></div>"`;
+exports[`toHTML > HTML wrapping > should default to empty title when not provided 1`] = `
+"<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+  <div id="root"><p>Content</p></div>
+</body>
+</html>"
+`;
+exports[`toHTML > HTML wrapping > should handle empty arrays for metas, styles, and scripts 1`] = `
+"<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+  <div id="root"><p>Content</p></div>
+</body>
+</html>"
+`;
+exports[`toHTML > HTML wrapping > should include all options in wrapped HTML 1`] = `
+"<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Complete Page</title>
+  <meta name="author" content="Test Author">
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <div id="root"><main>Main content</main></div>
+  <script type="module" src="/app.js"></script>
+</body>
+</html>"
+`;
+exports[`toHTML > HTML wrapping > should include meta tags in wrapped HTML 1`] = `
+"<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Test Page</title>
+  <meta name="description" content="Test description">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <div id="root"><p>Content</p></div>
+</body>
+</html>"
+`;
+exports[`toHTML > HTML wrapping > should include scripts in wrapped HTML 1`] = `
+"<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+  <div id="root"><p>Content</p></div>
+  <script type="module" src="/js/app.js"></script>
+<script type="module" src="/js/analytics.js"></script>
+</body>
+</html>"
+`;
+exports[`toHTML > HTML wrapping > should include stylesheets in wrapped HTML 1`] = `
+"<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+  <link rel="stylesheet" href="/css/style.css">
+<link rel="stylesheet" href="/css/theme.css">
+</head>
+<body>
+  <div id="root"><p>Content</p></div>
+</body>
+</html>"
+`;
+exports[`toHTML > HTML wrapping > should wrap HTML with basic DOCTYPE and structure 1`] = `
+"<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>My Page</title>
+</head>
+<body>
+  <div id="root"><h1>Page Title</h1></div>
+</body>
+</html>"
+`;
+exports[`toHTML > basic rendering > should render empty content 1`] = `""`;
+exports[`toHTML > basic rendering > should render nested elements 1`] = `
+"<div class="container">
+          <h1>Title</h1>
+          <p>Content</p>
+        </div>"
+`;
+exports[`toHTML > basic rendering > should render simple HTML without wrapping 1`] = `"<h1>Hello World</h1>"`;
+exports[`toHTML > basic rendering > should render with inline styles 1`] = `"<div style="color: red; font-size: 16px;">Styled</div>"`;
+exports[`toHTML > complex scenarios > should render a complete page structure with message list 1`] = `
+"<div class="app">
+          <header><h1>Messages</h1></header>
+          <main><div class="message"><p>First message</p></div> <div class="message"><p>Second message</p></div></main>
+          <footer>© 2024</footer>
+        </div>"
+`;
+exports[`toHTML > complex scenarios > should render wrapped complex page with all assets 1`] = `
+"<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>My Website</title>
+  <meta name="description" content="Welcome to my site">
+<meta name="viewport" content="width=device-width">
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <div id="root"><div>
+          <header><h1>My Website</h1></header>
+          <p>Welcome!</p>
+        </div></div>
+  <script type="module" src="/script.js"></script>
+</body>
+</html>"
+`;
+exports[`toHTML > edge cases > should handle special characters in content 1`] = `"<p>&lt;script&gt; &amp; "quotes"</p>"`;
+exports[`toHTML > edge cases > should not include wrap by default 1`] = `"<p>Content</p>"`;
+exports[`toHTML > edge cases > should return only inner HTML when wrap is false 1`] = `"<p>Inner</p>"`;
+exports[`toHTML > event handling > should render event handlers in templates 1`] = `
+"<div><div>
+                Click me
+              </div></div>"
+`;
+exports[`toHTML > event handling > should render multiple event handlers 1`] = `
+"<div><div>
+                <button>
+                  +
+                </button>
+                <span>5</span>
+                <button>
+                  -
+                </button>
+              </div></div>"
+`;
+exports[`toHTML > rendering with state > should evaluate conditional rendering based on state 1`] = `"<div><p>Visible content</p></div>"`;
+exports[`toHTML > rendering with state > should render entities from store 1`] = `"<div><span>Hello from store</span></div>"`;
+exports[`toHTML > rendering with state > should render multiple entities 1`] = `
+"<ul>
+          <li>First</li> <li>Second</li> <li>Third</li>
+        </ul>"
+`;

package/src/html.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { mount } from "@inglorious/web"
+import { Window } from "happy-dom"
+export function toHTML(store, renderFn, options = {}) {
+  const window = new Window()
+  const document = window.document
+  document.body.innerHTML = '<div id="root"></div>'
+  const root = document.getElementById("root")
+  mount(store, renderFn, root)
+  const html = stripLitMarkers(root.innerHTML)
+  window.close()
+  return options.wrap ? wrapHTML(html, options) : html
+}
+function stripLitMarkers(html) {
+  return html
+    .replace(/<!--\?[^>]*-->/g, "") // All lit-html markers
+    .replace(/<!--\s*-->/g, "") // Empty comments
+}
+function wrapHTML(body, options) {
+  const { title = "", metas = [], styles = [], scripts = [] } = options
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>${title}</title>
+  ${metas.map((meta) => `<meta name="${meta.name}" content="${meta.content}">`).join("\n")}
+  ${styles.map((href) => `<link rel="stylesheet" href="${href}">`).join("\n")}
+</head>
+<body>
+  <div id="root">${body}</div>
+  ${scripts.map((src) => `<script type="module" src="${src}"></script>`).join("\n")}
+</body>
+</html>`
+}

package/src/html.test.js ADDED Viewed

@@ -0,0 +1,375 @@
+import { createStore, html } from "@inglorious/web"
+import { describe, expect, it } from "vitest"
+import { toHTML } from "./html.js"
+describe("toHTML", () => {
+  describe("basic rendering", () => {
+    it("should render simple HTML without wrapping", () => {
+      const store = createStore()
+      const renderFn = () => html`<h1>Hello World</h1>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+    it("should render empty content", () => {
+      const store = createStore()
+      const renderFn = () => html``
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+    it("should render nested elements", () => {
+      const store = createStore()
+      const renderFn = () =>
+        html`<div class="container">
+          <h1>Title</h1>
+          <p>Content</p>
+        </div>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+    it("should render with inline styles", () => {
+      const store = createStore()
+      const renderFn = () =>
+        html`<div style="color: red; font-size: 16px;">Styled</div>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+  })
+  describe("rendering with state", () => {
+    it("should render entities from store", () => {
+      const store = createStore({
+        types: {
+          message: {
+            render: (entity) => html`<span>${entity.text}</span>`,
+          },
+        },
+        entities: {
+          greeting: { type: "message", text: "Hello from store" },
+        },
+      })
+      const renderFn = (api) => html`<div>${api.render("greeting")}</div>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+    it("should render multiple entities", () => {
+      const store = createStore({
+        types: {
+          item: {
+            render: (entity) => html`<li>${entity.name}</li>`,
+          },
+        },
+        entities: {
+          item1: { type: "item", name: "First" },
+          item2: { type: "item", name: "Second" },
+          item3: { type: "item", name: "Third" },
+        },
+      })
+      const renderFn = (api) =>
+        html`<ul>
+          ${api.render("item1")} ${api.render("item2")} ${api.render("item3")}
+        </ul>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+    it("should evaluate conditional rendering based on state", () => {
+      const store = createStore({
+        types: {
+          content: {
+            render: (entity) =>
+              entity.isVisible
+                ? html`<p>Visible content</p>`
+                : html`<p>Hidden</p>`,
+          },
+        },
+        entities: {
+          content: { type: "content", isVisible: true },
+        },
+      })
+      const renderFn = (api) => html`<div>${api.render("content")}</div>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+  })
+  describe("HTML wrapping", () => {
+    it("should wrap HTML with basic DOCTYPE and structure", () => {
+      const store = createStore()
+      const renderFn = () => html`<h1>Page Title</h1>`
+      const result = toHTML(store, renderFn, { wrap: true, title: "My Page" })
+      expect(result).toMatchSnapshot()
+    })
+    it("should include meta tags in wrapped HTML", () => {
+      const store = createStore()
+      const renderFn = () => html`<p>Content</p>`
+      const result = toHTML(store, renderFn, {
+        wrap: true,
+        title: "Test Page",
+        metas: [
+          { name: "description", content: "Test description" },
+          { name: "viewport", content: "width=device-width, initial-scale=1" },
+        ],
+      })
+      expect(result).toMatchSnapshot()
+    })
+    it("should include stylesheets in wrapped HTML", () => {
+      const store = createStore()
+      const renderFn = () => html`<p>Content</p>`
+      const result = toHTML(store, renderFn, {
+        wrap: true,
+        styles: ["/css/style.css", "/css/theme.css"],
+      })
+      expect(result).toMatchSnapshot()
+    })
+    it("should include scripts in wrapped HTML", () => {
+      const store = createStore()
+      const renderFn = () => html`<p>Content</p>`
+      const result = toHTML(store, renderFn, {
+        wrap: true,
+        scripts: ["/js/app.js", "/js/analytics.js"],
+      })
+      expect(result).toMatchSnapshot()
+    })
+    it("should include all options in wrapped HTML", () => {
+      const store = createStore()
+      const renderFn = () => html`<main>Main content</main>`
+      const result = toHTML(store, renderFn, {
+        wrap: true,
+        title: "Complete Page",
+        metas: [{ name: "author", content: "Test Author" }],
+        styles: ["/style.css"],
+        scripts: ["/app.js"],
+      })
+      expect(result).toMatchSnapshot()
+    })
+    it("should default to empty title when not provided", () => {
+      const store = createStore()
+      const renderFn = () => html`<p>Content</p>`
+      const result = toHTML(store, renderFn, { wrap: true })
+      expect(result).toMatchSnapshot()
+    })
+    it("should handle empty arrays for metas, styles, and scripts", () => {
+      const store = createStore()
+      const renderFn = () => html`<p>Content</p>`
+      const result = toHTML(store, renderFn, {
+        wrap: true,
+        metas: [],
+        styles: [],
+        scripts: [],
+      })
+      expect(result).toMatchSnapshot()
+    })
+  })
+  describe("API rendering within components", () => {
+    it("should support api.render() method in component render function", () => {
+      const store = createStore({
+        types: {
+          wrapper: {
+            render: (entity, api) => html`<div>${api.render("myItem")}</div>`,
+          },
+          item: { render: (entity) => html`<span>${entity.label}</span>` },
+        },
+        entities: {
+          myWrapper: { type: "wrapper" },
+          myItem: { type: "item", label: "Test Item" },
+        },
+      })
+      const renderFn = (api) => html`<div>${api.render("myWrapper")}</div>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+  })
+  describe("complex scenarios", () => {
+    it("should render a complete page structure with message list", () => {
+      const store = createStore({
+        types: {
+          message: {
+            render: (entity) =>
+              html`<div class="message"><p>${entity.text}</p></div>`,
+          },
+        },
+        entities: {
+          msg1: { type: "message", text: "First message" },
+          msg2: { type: "message", text: "Second message" },
+        },
+      })
+      const renderFn = (api) =>
+        html`<div class="app">
+          <header><h1>Messages</h1></header>
+          <main>${api.render("msg1")} ${api.render("msg2")}</main>
+          <footer>© 2024</footer>
+        </div>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+    it("should render wrapped complex page with all assets", () => {
+      const store = createStore({
+        types: {
+          header: { render: () => html`<header><h1>My Website</h1></header>` },
+        },
+        entities: { header: { type: "header" } },
+      })
+      const renderFn = (api) =>
+        html`<div>
+          ${api.render("header")}
+          <p>Welcome!</p>
+        </div>`
+      const result = toHTML(store, renderFn, {
+        wrap: true,
+        title: "My Website",
+        metas: [
+          { name: "description", content: "Welcome to my site" },
+          { name: "viewport", content: "width=device-width" },
+        ],
+        styles: ["/style.css"],
+        scripts: ["/script.js"],
+      })
+      expect(result).toMatchSnapshot()
+    })
+  })
+  describe("event handling", () => {
+    it("should render event handlers in templates", () => {
+      const store = createStore({
+        types: {
+          button: {
+            render: (entity, api) =>
+              html`<div @click=${() => api.notify(`#${entity.id}:click`)}>
+                Click me
+              </div>`,
+          },
+        },
+        entities: {
+          myButton: { type: "button", id: "myButton" },
+        },
+      })
+      const renderFn = (api) => html`<div>${api.render("myButton")}</div>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+    it("should render multiple event handlers", () => {
+      const store = createStore({
+        types: {
+          counter: {
+            render: (entity, api) =>
+              html`<div>
+                <button @click=${() => api.notify(`#${entity.id}:increment`)}>
+                  +
+                </button>
+                <span>${entity.count}</span>
+                <button @click=${() => api.notify(`#${entity.id}:decrement`)}>
+                  -
+                </button>
+              </div>`,
+          },
+        },
+        entities: {
+          counter1: { type: "counter", id: "counter1", count: 5 },
+        },
+      })
+      const renderFn = (api) => html`<div>${api.render("counter1")}</div>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+  })
+  describe("edge cases", () => {
+    it("should handle special characters in content", () => {
+      const store = createStore()
+      const renderFn = () => html`<p>&lt;script&gt; &amp; "quotes"</p>`
+      const result = toHTML(store, renderFn)
+      expect(result).toMatchSnapshot()
+    })
+    it("should not include wrap by default", () => {
+      const store = createStore()
+      const renderFn = () => html`<p>Content</p>`
+      const result = toHTML(store, renderFn, {})
+      expect(result).toMatchSnapshot()
+    })
+    it("should return only inner HTML when wrap is false", () => {
+      const store = createStore()
+      const renderFn = () => html`<p>Inner</p>`
+      const result = toHTML(store, renderFn, { wrap: false })
+      expect(result).toMatchSnapshot()
+    })
+    it("should close DOM window properly", () => {
+      const store = createStore()
+      const renderFn = () => html`<p>Test</p>`
+      const result = toHTML(store, renderFn)
+      expect(result).toBeDefined()
+      expect(result).not.toBeNull()
+    })
+  })
+})