🔤

docs/components/examples/elements/dde-dom-create.js

@@ -0,0 +1,14 @@
+import { el } from "deka-dom-el";
+
+// Create element with properties
+const button = el("button", {
+  textContent: "Click me",
+  className: "primary",
+  disabled: true
+});
+
+// Shorter and more expressive
+// than the native approach
+
+// Add to DOM
+document.body.append(button);

docs/components/examples/elements/dde-dom-tree.js

@@ -0,0 +1,11 @@
+import { el } from "deka-dom-el";
+
+// Chainable, natural nesting
+// append() returns parent element
+// making chains easy and intuitive
+document.body.append(
+	el("div").append(
+		el("h1", "Title"),
+		el("p", "Paragraph")
+	)
+);

docs/components/examples/elements/native-dom-create.js

@@ -0,0 +1,19 @@
+// Create element with properties
+const button = document.createElement('button');
+button.textContent = "Click me";
+button.className = "primary";
+button.disabled = true;
+
+// Or using Object.assign()
+const button2 = Object.assign(
+  document.createElement('button'),
+  {
+    textContent: "Click me",
+    className: "primary",
+    disabled: true
+  }
+);
+
+// Add to DOM
+document.body.appendChild(button);
+document.body.appendChild(button2);

docs/components/examples/elements/native-dom-tree.js

@@ -0,0 +1,15 @@
+// Verbose, needs temp variables
+const div = document.createElement('div');
+const h1 = document.createElement('h1');
+h1.textContent = 'Title';
+div.appendChild(h1);
+
+const p = document.createElement('p');
+p.textContent = 'Paragraph';
+div.appendChild(p);
+
+// appendChild doesn't return parent
+// so chaining is not possible
+
+// Add to DOM
+document.body.appendChild(div);

docs/components/examples/events/append-event.js

@@ -0,0 +1,8 @@
+import { el, on } from "deka-dom-el";
+
+// Third approach - append with on addon
+el("button", {
+  textContent: "click me"
+}).append(
+  on("click", (e) => console.log("Clicked!", e))
+);

docs/components/examples/events/attribute-event.js

@@ -0,0 +1,7 @@
+import { el } from "deka-dom-el";
+
+// Using events with HTML attribute style
+el("button", {
+  textContent: "click me",
+  "=onclick": "console.log(event)"
+});

docs/components/examples/events/chain-event.js

@@ -0,0 +1,8 @@
+import { el, on } from "deka-dom-el";
+
+// Using events as addons - chainable approach
+el("button", {
+  textContent: "click me",
+}, 
+  on("click", (e) => console.log("Clicked!", e))
+);

docs/components/examples/events/native-event.js

@@ -0,0 +1,2 @@
+// Standard DOM event listener approach
+element.addEventListener('click', callback, options);

docs/components/examples/events/property-event.js

@@ -0,0 +1,7 @@
+import { el } from "deka-dom-el";
+
+// Using events with property assignment
+el("button", {
+  textContent: "click me",
+  onclick: console.log
+});

docs/components/examples/scopes/custom-scope.js

@@ -0,0 +1,14 @@
+import { scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+function customSignalLogic() {
+  // Create an isolated scope for a specific operation
+  scope.push(); // Start new scope
+
+  // These signals are in the new scope
+  const isolatedCount = S(0);
+  const isolatedDerived = S(() => isolatedCount.get() * 2);
+
+  // Clean up by returning to previous scope
+  scope.pop();
+}

docs/components/examples/scopes/with-scope.js

@@ -0,0 +1,45 @@
+import { el, scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+function CounterWithIsolatedTimer() {
+  const { host } = scope;
+
+  // Main component state
+  const count = S(0);
+
+  // Create a timer in an isolated scope
+  scope.isolate(() => {
+    // These subscriptions won't be tied to the component lifecycle
+    // They would continue to run even if the component was removed
+    const timer = S(0);
+
+    // Not recommended for real applications!
+    // Just demonstrating scope isolation
+    setInterval(() => {
+      timer.set(timer.get() + 1);
+      console.log(`Timer: ${timer.get()}`);
+    }, 1000);
+  });
+
+  // Normal component functionality within main scope
+  function increment() {
+    count.set(count.get() + 1);
+  }
+
+  return el("div").append(
+    el("p").append(
+      "Count: ",
+      el("#text", S(() => count.get()))
+    ),
+    el("button", {
+      textContent: "Increment",
+      onclick: increment
+    }),
+    el("p", "An isolated timer runs in console")
+  );
+}
+
+// Usage
+document.body.append(
+  el(CounterWithIsolatedTimer)
+);