jops-core 1.0.0

package/templates/hello-world/assets/jops-lifecycle.svg

@@ -0,0 +1,51 @@
+<svg viewBox="0 0 400 340" xmlns="http://www.w3.org/2000/svg" font-family="monospace">
+  <rect width="400" height="340" fill="#0f1117"/>
+
+  <text x="200" y="30" text-anchor="middle" fill="#7c8cf8" font-size="13" font-weight="bold" letter-spacing="2">VIEW LIFECYCLE</text>
+
+  <!-- Flow boxes -->
+  <!-- loadLayout -->
+  <rect x="130" y="50" width="140" height="38" rx="6" fill="#1e2235" stroke="#7c8cf8" stroke-width="1.5"/>
+  <text x="200" y="68" text-anchor="middle" fill="#7c8cf8" font-size="11">loadLayout()</text>
+  <text x="200" y="81" text-anchor="middle" fill="#3d4466" font-size="9">fetch layout module</text>
+
+  <line x1="200" y1="88" x2="200" y2="106" stroke="#3d4466" stroke-width="1.2" marker-end="url(#arrow)"/>
+
+  <!-- inflate -->
+  <rect x="130" y="106" width="140" height="38" rx="6" fill="#1e2235" stroke="#56cfb2" stroke-width="1.5"/>
+  <text x="200" y="124" text-anchor="middle" fill="#56cfb2" font-size="11">inflate()</text>
+  <text x="200" y="137" text-anchor="middle" fill="#3d4466" font-size="9">layout string → domNode</text>
+
+  <line x1="200" y1="144" x2="200" y2="162" stroke="#3d4466" stroke-width="1.2" marker-end="url(#arrow)"/>
+
+  <!-- onLayout -->
+  <rect x="130" y="162" width="140" height="38" rx="6" fill="#1e2235" stroke="#56cfb2" stroke-width="1.5"/>
+  <text x="200" y="180" text-anchor="middle" fill="#56cfb2" font-size="11">onLayout()</text>
+  <text x="200" y="193" text-anchor="middle" fill="#3d4466" font-size="9">DOM ready, add subviews</text>
+
+  <line x1="200" y1="200" x2="200" y2="218" stroke="#3d4466" stroke-width="1.2" marker-end="url(#arrow)"/>
+
+  <!-- onResume -->
+  <rect x="130" y="218" width="140" height="38" rx="6" fill="#1e2235" stroke="#f0a040" stroke-width="1.5"/>
+  <text x="200" y="236" text-anchor="middle" fill="#f0a040" font-size="11">onResume()</text>
+  <text x="200" y="249" text-anchor="middle" fill="#3d4466" font-size="9">view visible, read Store</text>
+
+  <line x1="200" y1="256" x2="200" y2="274" stroke="#3d4466" stroke-width="1.2" marker-end="url(#arrow)"/>
+
+  <!-- bindEvents -->
+  <rect x="130" y="274" width="140" height="38" rx="6" fill="#1e2235" stroke="#f0a040" stroke-width="1.5"/>
+  <text x="200" y="292" text-anchor="middle" fill="#f0a040" font-size="11">bindEvents()</text>
+  <text x="200" y="305" text-anchor="middle" fill="#3d4466" font-size="9">wire on* handlers</text>
+
+  <!-- onResume loop arrow -->
+  <path d="M 270 237 Q 340 237 340 275 Q 340 311 270 311" stroke="#f06292" stroke-width="1.2" fill="none" stroke-dasharray="4 3"/>
+  <text x="345" y="278" fill="#f06292" font-size="9" text-anchor="middle">back()</text>
+  <text x="345" y="290" fill="#f06292" font-size="9" text-anchor="middle">/ resume</text>
+
+  <!-- Arrow marker -->
+  <defs>
+    <marker id="arrow" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
+      <path d="M0,0 L6,3 L0,6 Z" fill="#3d4466"/>
+    </marker>
+  </defs>
+</svg>

package/templates/hello-world/assets/jops-navigation.svg

@@ -0,0 +1,72 @@
+<svg viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" font-family="monospace">
+  <rect width="400" height="320" fill="#0f1117"/>
+
+  <text x="200" y="30" text-anchor="middle" fill="#7c8cf8" font-size="13" font-weight="bold" letter-spacing="2">NAVIGATION MODEL</text>
+
+  <!-- Flat tab row -->
+  <text x="20" y="60" fill="#5a6080" font-size="10">FLAT  (hashchange)</text>
+
+  <rect x="20" y="68" width="70" height="34" rx="5" fill="#1a2a1a" stroke="#56cfb2" stroke-width="2"/>
+  <text x="55" y="90" text-anchor="middle" fill="#56cfb2" font-size="11">Home</text>
+
+  <rect x="100" y="68" width="70" height="34" rx="5" fill="#1e2235" stroke="#3d4466" stroke-width="1"/>
+  <text x="135" y="90" text-anchor="middle" fill="#3d4466" font-size="11">Media</text>
+
+  <rect x="180" y="68" width="70" height="34" rx="5" fill="#1e2235" stroke="#3d4466" stroke-width="1"/>
+  <text x="215" y="90" text-anchor="middle" fill="#3d4466" font-size="11">Form</text>
+
+  <rect x="260" y="68" width="70" height="34" rx="5" fill="#1e2235" stroke="#3d4466" stroke-width="1"/>
+  <text x="295" y="90" text-anchor="middle" fill="#3d4466" font-size="11">Contact</text>
+
+  <!-- Tab switch arrows -->
+  <line x1="90" y1="85" x2="100" y2="85" stroke="#56cfb2" stroke-width="1.2"/>
+  <line x1="170" y1="85" x2="180" y2="85" stroke="#3d4466" stroke-width="1" stroke-dasharray="3 2"/>
+  <line x1="250" y1="85" x2="260" y2="85" stroke="#3d4466" stroke-width="1" stroke-dasharray="3 2"/>
+
+  <line x1="20" y1="116" x2="380" y2="116" stroke="#1e2235" stroke-width="1"/>
+
+  <!-- Stack navigation -->
+  <text x="20" y="136" fill="#5a6080" font-size="10">HIERARCHICAL  (navigate / back)</text>
+
+  <!-- Stack frames -->
+  <rect x="20" y="148" width="110" height="50" rx="5" fill="#1a2a1a" stroke="#56cfb2" stroke-width="1.5"/>
+  <text x="75" y="168" text-anchor="middle" fill="#56cfb2" font-size="10">Home  ← _baseView</text>
+  <text x="75" y="183" text-anchor="middle" fill="#3d4466" font-size="9">flat route instance</text>
+
+  <!-- navigate arrow -->
+  <line x1="130" y1="173" x2="158" y2="173" stroke="#7c8cf8" stroke-width="1.5" marker-end="url(#arrow2)"/>
+  <text x="144" y="167" text-anchor="middle" fill="#7c8cf8" font-size="9">navigate()</text>
+
+  <rect x="160" y="148" width="110" height="50" rx="5" fill="#1e2235" stroke="#f0a040" stroke-width="1.5"/>
+  <text x="215" y="168" text-anchor="middle" fill="#f0a040" font-size="10">DetailView</text>
+  <text x="215" y="183" text-anchor="middle" fill="#3d4466" font-size="9">new instance</text>
+
+  <!-- navigate arrow 2 -->
+  <line x1="270" y1="173" x2="298" y2="173" stroke="#7c8cf8" stroke-width="1.5" marker-end="url(#arrow2)"/>
+  <text x="284" y="167" text-anchor="middle" fill="#7c8cf8" font-size="9">navigate()</text>
+
+  <rect x="300" y="148" width="80" height="50" rx="5" fill="#1e2235" stroke="#f06292" stroke-width="2"/>
+  <text x="340" y="168" text-anchor="middle" fill="#f06292" font-size="10">FormView</text>
+  <text x="340" y="183" text-anchor="middle" fill="#3d4466" font-size="9">← current</text>
+
+  <!-- Stack label -->
+  <text x="200" y="220" text-anchor="middle" fill="#3d4466" font-size="9">_navStack  [ DetailView, FormView ]</text>
+
+  <!-- back arrow -->
+  <path d="M 340 198 Q 340 230 215 230 Q 90 230 90 198" stroke="#f06292" stroke-width="1.5" fill="none" marker-end="url(#arrow3)" stroke-dasharray="5 3"/>
+  <text x="200" y="246" text-anchor="middle" fill="#f06292" font-size="10">back()  →  destroy() popped view</text>
+
+  <!-- replace -->
+  <rect x="60" y="268" width="280" height="34" rx="5" fill="#1e2235" stroke="#7c8cf8" stroke-width="1" stroke-dasharray="5 3"/>
+  <text x="200" y="282" text-anchor="middle" fill="#7c8cf8" font-size="10">replace()  →  clears stack, switches route</text>
+  <text x="200" y="295" text-anchor="middle" fill="#3d4466" font-size="9">FLAG_CLEAR_TOP equivalent</text>
+
+  <defs>
+    <marker id="arrow2" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+      <path d="M0,0 L6,3 L0,6 Z" fill="#7c8cf8"/>
+    </marker>
+    <marker id="arrow3" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+      <path d="M0,0 L6,3 L0,6 Z" fill="#f06292"/>
+    </marker>
+  </defs>
+</svg>

package/templates/hello-world/src/App.js

@@ -0,0 +1,21 @@
+import { View } from "jops-core";
+import mainLayout from "./layout/mainlayout.js";
+
+export default class App {
+  constructor() {
+    console.log("JOPS App mounted");
+
+    const mainContainer = new View();
+    mainContainer.setStyle("./src/css/styles.css");
+
+    /*(async () => {
+      await mainContainer.loadLayout("/src/layout/mainlayout.js");
+      mainContainer.render();
+    })();*/
+
+    // "/src/layout/mainlayout.js"
+    mainContainer.loadLayout(mainLayout).then(() => {
+      mainContainer.render();
+    });
+  }
+}

package/templates/hello-world/src/Contact.js

@@ -0,0 +1,20 @@
+import { View } from "jops-core";
+
+export default class Contact extends View {
+  constructor() {
+    super();
+  }
+
+  async loadLayout() {
+    await super.loadLayout("/src/layout/layout_contact.js");
+  }
+
+  onSubmit(event) {
+    event.preventDefault();
+    const data = Object.fromEntries(new FormData(event.target));
+    const message = Object.entries(data)
+      .map(([key, value]) => `${key}: ${value}`)
+      .join("\n");
+    alert(`Message Sent:\n\n${message}`);
+  }
+}

package/templates/hello-world/src/DataSection.js

@@ -0,0 +1,99 @@
+import { View, layout } from "jops-core";
+
+export default class DataSection extends View {
+  constructor() {
+    super();
+  }
+
+  async loadLayout() {
+    await super.loadLayout("/src/layout/layout_data.js");
+  }
+
+  async onLayout() {
+    for (const row of rowsData) {
+      const { col1, col2, col3, col4 } = row;
+      await this.addSubView(
+        "tableBody",
+        new DataTableItem(col1, col2, col3, col4),
+      );
+    }
+
+    for (const item of listData) {
+      await this.addSubView("list", new ListItem(item));
+    }
+  }
+}
+
+class DataTableItem extends View {
+  constructor(col1, col2, col3, col4) {
+    super();
+    this.col1 = col1;
+    this.col2 = col2;
+    this.col3 = col3;
+    this.col4 = col4;
+    this.layout = layout`
+       <tr>
+        <td id="col1"></td>
+        <td id="col2"></td>
+        <td id="col3"></td>
+        <td id="col4"></td>
+      </tr>
+    `;
+    this.inflate();
+  }
+
+  onLayout() {
+    this.get("col1").set(this.col1);
+    this.get("col2").set(this.col2);
+    this.get("col3").set(this.col3);
+    this.get("col4").set(this.col4);
+  }
+}
+
+class ListItem extends View {
+  constructor(text) {
+    super();
+    this.layout = layout`<li id="text" class="list__item"></li>`;
+    this.text = text;
+    this.inflate();
+  }
+
+  async onLayout() {
+    this.get("text").set(this.text);
+  }
+}
+
+const listData = [
+  "Native ES6 module system",
+  "Android-style view lifecycle",
+  "Proxy-based reactive store",
+  "Two-way data binding",
+  "Hash-based SPA routing",
+];
+
+const rowsData = [
+  {
+    col1: "001",
+    col2: "Alice Johnson",
+    col3: "Frontend Developer",
+    col4: `<span class="badge badge--active">Active</span>`,
+  },
+  {
+    col1: "002",
+    col2: "Bob Smith",
+    col3: "Backend Developer",
+    col4: `<span class="badge badge--active">Active</span>`,
+  },
+  {
+    col1: "003",
+    col2: "Carol White",
+    col3: "Mobile Developer",
+    col4: `<span class="badge badge--inactive">Inactive</span>`,
+  },
+  {
+    col1: "004",
+    col2: "David Lee",
+    col3: "Full Stack Developer",
+    col4: `<span class="badge badge--active">Active</span>`,
+  },
+];

package/templates/hello-world/src/Features.js

@@ -0,0 +1,68 @@
+import { View, layout } from "jops-core";
+// import Card from "./Card.js";
+
+export default class Features extends View {
+  constructor() {
+    super();
+    this.layout = layout`
+        <section id="features" class="features">
+            <h2 class="section__title">Features</h2>
+            <div id="grid" class="cards">
+            </div>
+        </section>
+    `;
+    this.inflate();
+  }
+
+  //async loadLayout() {
+  //  await super.loadLayout("/src/layout/layout_features.js");
+  //}
+
+  async onLayout() {
+    for (const item of data) {
+      await this.addSubView("grid", new Card(item.title, item.content));
+    }
+  }
+}
+
+class Card extends View {
+  constructor(title, content) {
+    super();
+    this.title = title;
+    this.content = content;
+    this.layout = layout`
+      <article class="card">
+         <h3 id="title" class="card__title"></h3>
+         <p  id="content" class="card__body"></p>
+      </article>
+    `;
+    this.inflate();
+  }
+
+  // async loadLayout() {
+  //  await super.loadLayout("/src/layout/card.js");
+  // }
+
+  onLayout() {
+    this.get("title").set(this.title);
+    this.get("content").set(this.content);
+  }
+}
+
+const data = [
+  {
+    title: "No Bundler",
+    content:
+      "Native ES6 modules loaded directly in the browser. No Webpack, no Babel, no build step.",
+  },
+  {
+    title: "OOP First",
+    content:
+      "Real class inheritance with extends and super(). Write JavaScript the way it was meant to be written.",
+  },
+  {
+    title: "View Composition",
+    content:
+      "Android-style declarative nested view composition. Break layouts into reusable sub-modules.",
+  },
+];

package/templates/hello-world/src/Form.js

@@ -0,0 +1,21 @@
+import { View, Store } from "jops-core";
+
+export default class Form extends View {
+  constructor() {
+    super();
+  }
+
+  async loadLayout() {
+    await super.loadLayout("/src/layout/layout_form.js");
+  }
+
+  onSubmit(event) {
+    event.preventDefault();
+    const data = Object.fromEntries(new FormData(event.target));
+    Store.singleton().set("form.submission", data);
+    const message = Object.entries(data)
+      .map(([key, value]) => `${key}: ${value}`)
+      .join("\n");
+    alert(`Form Submitted:\n\n${message}`);
+  }
+}

package/templates/hello-world/src/Media.js

@@ -0,0 +1,93 @@
+import { View, layout, raw, Router } from "jops-core";
+
+export default class Media extends View {
+  constructor() {
+    super();
+    this.layout = layout`
+      <section id="media" class="media-section">
+        <h2 class="section__title">Media</h2>
+        <div id="grid" class="media-grid"></div>
+      </section>
+    `;
+    this.inflate();
+  }
+
+  async onLayout() {
+    for (const item of data) {
+      await this.addSubView("grid", new MediaCard(item.imgSrc, item.caption));
+    }
+  }
+}
+
+class MediaCard extends View {
+  constructor(imgSrc, caption) {
+    super();
+    this.imgSrc = imgSrc;
+    this.caption = caption;
+    this.layout = layout`
+        <div class="media-card" type="jops-event-bind" onclick="showMedia">
+          <div id="imgSrc" class="media-card__img-placeholder"></div>
+          <p id="caption" class="media-card__caption"></p>
+        </div>
+    `;
+    this.inflate();
+  }
+
+  onLayout() {
+    this.get("imgSrc").set(
+      `<img src="${this.imgSrc}" style="width:100%;border-radius:6px">`,
+    );
+    this.get("caption").set(this.caption);
+  }
+
+  showMedia(event) {
+    Router.singleton().navigate(
+      `/mediadialog?imgSrc=${encodeURIComponent(this.imgSrc)}&caption=${encodeURIComponent(this.caption)}`,
+      MediaDialog,
+    );
+  }
+}
+
+class MediaDialog extends View {
+  constructor() {
+    super();
+    this.layout = layout`
+      <div class="media-dialog">
+        <button class="media-dialog__back btn btn--secondary" type="jops-event-bind" onclick="onBack">← Back</button>
+        <div id="dialogImage" class="media-dialog__image"></div>
+        <p id="dialogCaption" class="media-dialog__caption"></p>
+      </div>
+    `;
+    this.inflate();
+  }
+
+  onLayout() {
+    setTimeout(() => {
+      const { imgSrc, caption } = Router.singleton().getParams();
+      if (!imgSrc) return;
+      this.get("dialogImage").set(
+        `<img src="${imgSrc}" style="width:100%;height:100%;object-fit:contain">`,
+      );
+      this.get("dialogCaption").set(caption ?? "");
+    }, 0);
+  }
+
+  onBack() {
+    Router.singleton().back();
+  }
+}
+
+const data = [
+  {
+    imgSrc: "/assets/jops-hierarchy.svg",
+    caption: "View Hierarchy — composable tree of Views",
+  },
+  {
+    imgSrc: "/assets/jops-lifecycle.svg",
+    caption: "View Lifecycle — loadLayout → inflate → onLayout → onResume",
+  },
+  {
+    imgSrc: "/assets/jops-navigation.svg",
+    caption: "Navigation Model — flat tabs + hierarchical stack",
+  },
+];