feat: add framework - DLight.js

content/1-reactivity/1-declare-state/dlight/Name.view.js

@@ -0,0 +1,12 @@
+import { View } from '@dlightjs/dlight';
+
+@View
+class Name {
+  name = 'John';
+
+  Body() {
+    h1(`Hello ${this.name}`)
+  }
+}
+
+export default Name;

content/1-reactivity/2-update-state/dlight/Name.view.js

@@ -0,0 +1,15 @@
+import { View } from "@dlightjs/dlight";
+
+@View
+class Name {
+  name = "John";
+  willMount() {
+    this.name = "Jane";
+  }
+
+  Body() {
+    h1(`Hello ${this.name}`);
+  }
+}
+
+export default Name;

content/1-reactivity/3-computed-state/dlight/DoubleCount.view.js

@@ -0,0 +1,13 @@
+import { View } from '@dlightjs/dlight';
+
+@View
+class DoubleCount {
+  count = 10;
+  doubleCount = this.count * 2;
+
+  Body() {
+    div(this.doubleCount)
+  }
+}
+
+export default DoubleCount;

content/2-templating/1-minimal-template/dlight/HelloWorld.view.js

@@ -0,0 +1,10 @@
+import { View } from '@dlightjs/dlight';
+
+@View
+class HelloWorld {
+  Body() {
+    h1('Hello World')
+  }
+}
+
+export default HelloWorld;

content/2-templating/2-styling/dlight/CssStyle.view.js

@@ -0,0 +1,12 @@
+import { View } from "@dlightjs/dlight";
+import "./style.css";
+
+@View
+class CssStyle {
+  Body() {
+    h1("I am red").class("title");
+    button("I am a button").style({ fontSize: "10rem" });
+  }
+}
+
+export default CssStyle;

content/2-templating/2-styling/dlight/style.css

@@ -0,0 +1,3 @@
+.title {
+  color: red;
+}

content/2-templating/3-loop/dlight/Colors.view.js

@@ -0,0 +1,16 @@
+import { View } from '@dlightjs/dlight';
+
+@View
+class Colors {
+  colors = ['red', 'green', 'blue'];
+
+  Body() {
+    ul(); {
+      for (const color of this.colors) {
+        li(color);
+      }
+    }
+  }
+}
+
+export default Colors;

content/2-templating/4-event-click/dlight/Counter.view.js

@@ -0,0 +1,16 @@
+import { View } from "@dlightjs/dlight";
+
+@View
+class Counter {
+  count = 0;
+  incrementCount() {
+    this.count++;
+  }
+
+  Body() {
+    p(`Counter: ${this.count}`);
+    button("+1").onClick(this.incrementCount);
+  }
+}
+
+export default Counter;

content/2-templating/5-dom-ref/dlight/InputFocused.view.js

@@ -0,0 +1,15 @@
+import { View } from "@dlightjs/dlight";
+
+@View
+class InputFocused {
+  inputElement;
+  didMount() {
+    this.inputElement.focus();
+  }
+
+  Body() {
+    input().type("text").element(this.inputElement);
+  }
+}
+
+export default InputFocused;

content/2-templating/6-conditional/dlight/TrafficLight.view.js

@@ -0,0 +1,30 @@
+import { View } from "@dlightjs/dlight";
+
+const TRAFFIC_LIGHTS = ["red", "orange", "green"];
+
+@View
+class TrafficLight {
+  lightIndex = 0;
+  light = TRAFFIC_LIGHTS[this.lightIndex];
+  nextLight() {
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
+  }
+
+  Body() {
+    button("Next light").onClick(this.nextLight);
+    p(`Light is: ${this.light}`);
+    p();
+    {
+      ("You must");
+      if (this.light === "red") {
+        span("STOP");
+      } else if (this.light === "orange") {
+        span("SLOW DOWN");
+      } else if (this.light === "green") {
+        span("GO");
+      }
+    }
+  }
+}
+
+export default TrafficLight;

content/3-lifecycle/1-on-mount/dlight/PageTitle.view.js

@@ -0,0 +1,15 @@
+import { View } from "@dlightjs/dlight";
+
+@View
+class PageTitle {
+  pageTitle = "";
+  didMount() {
+    this.pageTitle = document.title;
+  }
+
+  Body() {
+    p(`Page title: ${this.pageTitle}`);
+  }
+}
+
+export default PageTitle;

content/3-lifecycle/2-on-unmount/dlight/Time.view.js

@@ -0,0 +1,18 @@
+import { View } from "@dlightjs/dlight";
+
+@View
+class Time {
+  time = new Date().toLocaleTimeString();
+  timer = setInterval(() => {
+    this.time = new Date().toLocaleTimeString();
+  }, 1000);
+  willUnmount() {
+    clearInterval(this.timer);
+  }
+
+  Body() {
+    p(`Current time: ${this.time}`);
+  }
+}
+
+export default Time;

content/4-component-composition/1-props/dlight/App.view.js

@@ -0,0 +1,15 @@
+import { View } from "@dlightjs/dlight";
+import UserProfile from "./UserProfile.view";
+
+@View
+class App {
+  Body() {
+    UserProfile()
+      .name("John")
+      .age(20)
+      .favouriteColors(["green", "blue", "red"])
+      .isAvailable(true);
+  }
+}
+
+export default App;

content/4-component-composition/1-props/dlight/UserProfile.view.js

@@ -0,0 +1,18 @@
+import { View } from '@dlightjs/dlight';
+
+@View
+class UserProfile {
+  @Prop name = '';
+  @Prop age = null;
+  @Prop favouriteColors = [];
+  @Prop isAvailable = false;
+
+  Body() {
+    p(`My name is ${this.name}!`)
+    p(`My age is ${this.age}!`)
+    p(`My favourite colors are ${this.favouriteColors.join(', ')}!`)
+    p(`I am ${this.isAvailable ? 'available' : 'not available'}`)
+  }
+}
+
+export default UserProfile;

content/4-component-composition/2-emit-to-parent/dlight/App.view.js

@@ -0,0 +1,21 @@
+import { View } from "@dlightjs/dlight";
+import AnswerButton from "./HelloWorld.view";
+
+@View
+class App {
+  isHappy = true;
+  onAnswerNo() {
+    this.isHappy = false;
+  }
+  onAnswerYes() {
+    this.isHappy = true;
+  }
+
+  Body() {
+    p("Are you happy?");
+    AnswerButton().onYes(this.onAnswerYes).onNo(this.onAnswerNo);
+    p(this.isHappy ? "😀" : "😥").style({ fontSize: "50px" });
+  }
+}
+
+export default App;

content/4-component-composition/2-emit-to-parent/dlight/HelloWorld.view.js

@@ -0,0 +1,16 @@
+import { View } from '@dlightjs/dlight';
+
+@View
+class AnswerButton {
+  @Prop onYes;
+  @Prop onNo;
+
+  Body() {
+    button('Yes')
+      .onClick(this.onYes)
+    button('No')
+      .onClick(this.onNo)
+  }
+}
+
+export default AnswerButton;

content/4-component-composition/3-slot/dlight/App.view.js

@@ -0,0 +1,13 @@
+import { View } from '@dlightjs/dlight';
+import FunnyButton from './FunnyButton.view';
+
+@View
+class App {
+  Body() {
+    FunnyButton(); {
+      "Click me!"
+    }
+  }
+}
+
+export default App;

content/4-component-composition/3-slot/dlight/FunnyButton.view.js

@@ -0,0 +1,27 @@
+import { View } from '@dlightjs/dlight';
+
+@View
+class FunnyButton {
+  @Children children
+
+  Body() {
+    button()
+      .style({
+        background: "rgba(0, 0, 0, 0.4)",
+        color: "#fff",
+        padding: "10px 20px",
+        fontSize: "30px",
+        border: "2px solid #fff",
+        margin: "8px",
+        transform: "scale(0.9)",
+        boxShadow: "4px 4px rgba(0, 0, 0, 0.4)",
+        transition: "transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s",
+        outline: "0",
+      })
+    {
+      this.children
+    }
+  }
+}
+
+export default FunnyButton;

content/4-component-composition/4-slot-fallback/dlight/App.view.js

@@ -0,0 +1,14 @@
+import { View } from '@dlightjs/dlight';
+import FunnyButton from './FunnyButton.view';
+
+@View
+class App {
+  Body() {
+    FunnyButton()
+    FunnyButton(); {
+      "I got content!"
+    }
+  }
+}
+
+export default App;

content/4-component-composition/4-slot-fallback/dlight/FunnyButton.view.js

@@ -0,0 +1,31 @@
+import { View } from '@dlightjs/dlight';
+
+@View
+class FunnyButton {
+  @Children children
+
+  Body() {
+    button()
+      .style({
+        background: "rgba(0, 0, 0, 0.4)",
+        color: "#fff",
+        padding: "10px 20px",
+        fontSize: "30px",
+        border: "2px solid #fff",
+        margin: "8px",
+        transform: "scale(0.9)",
+        boxShadow: "4px 4px rgba(0, 0, 0, 0.4)",
+        transition: "transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s",
+        outline: "0",
+      })
+    {
+      if (this.children) {
+        this.children
+      } else {
+        span('No content found')
+      }
+    }
+  }
+}
+
+export default FunnyButton;

content/4-component-composition/5-context/dlight/App.view.js

@@ -0,0 +1,24 @@
+import { View } from "@dlightjs/dlight";
+import UserProfile from "./UserProfile.view";
+
+@View
+class App {
+  user = {
+    id: 1,
+    username: "unicorn42",
+    email: "[email protected]",
+  };
+  updateUserName(newUsername) {
+    this.user.username = newUsername;
+  }
+
+  Body() {
+    h1(`Welcome back, ${this.user.username}`);
+    env().user(this.user).updateUserName(this.updateUserName);
+    {
+      UserProfile();
+    }
+  }
+}
+
+export default App;