🔤 3PS

docs/p04-signals.html

@@ -4,7 +4,7 @@ S===signal
 /** @type {ddeSignal} */
 /** @type {ddeAction} */
 /** @type {ddeActions} */
-</code></div><h3 id="h-introducing-signals"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-signals" tabindex="-1">#</a> Introducing signals</h3><p>Using signals, we split program logic into the&nbsp;three parts. Firstly (α), we create a&nbsp;variable (constant) representing reactive value. Somewhere later, we can register (β) a&nbsp;logic reacting to the&nbsp;signal value changes. Similarly, in a&nbsp;remaining part (γ), we can update the&nbsp;signal value. </p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1gy5flu0x85c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "./esm-with-signals.js";
+</code></div><h3 id="h-introducing-signals"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-signals" tabindex="-1">#</a> Introducing signals</h3><p>Let’s re-introduce <a href="./#h-event-driven-programming--parts-separation--ps">3PS principle</a>.</p><p>Using signals, we split program logic into the&nbsp;three parts. Firstly (α), we create a&nbsp;variable (constant) representing reactive value. Somewhere later, we can register (β) a&nbsp;logic reacting to the&nbsp;signal value changes. Similarly, in a&nbsp;remaining part (γ), we can update the&nbsp;signal value. </p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1gy5flu0x85c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "./esm-with-signals.js";
 // α — `signal` represents a&nbsp;reactive value
 const signal= S(0);
 // β — just reacts on signal changes

docs_src/components/examples/introducing/3ps.js

@@ -1,3 +1,4 @@
+// pseudo code!
 const onchage=
 	event=>
 		console.log("Reacting to the:", event); // A

docs_src/components/examples/introducing/helloWorld.js

@@ -1,15 +1,15 @@
 import { el } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
-const clicks= S(0);
+const clicks= S(0); // A
 document.body.append(
 	el().append(
 		el("p", S(()=>
-			"Hello World "+"🎉".repeat(clicks())
+			"Hello World "+"🎉".repeat(clicks()) // B
 		)),
 		el("button", {
 			type: "button",
-			onclick: ()=> clicks(clicks()+1),
+			onclick: ()=> clicks(clicks()+1), // C
-			textContent: "Fire"
+			textContent: "Fire",
 		})
 	)
 );

docs_src/index.html.js

@@ -13,6 +13,14 @@ import { code } from "./components/code.html.js";
 /** @param {string} url */
 const fileURL= url=> new URL(url, import.meta.url);
 const references= {
+	w_mvv:{
+		title: t`Wikipedia: Model–view–viewmodel`,
+		href: "https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel",
+	},
+	w_mvc: {
+		title: t`Wikipedia: Model–view–controller`,
+		href: "https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller",
+	},
 };
 /** @param {import("./types.d.ts").PageAttrs} attrs */
 export function page({ pkg, info }){
@@ -25,29 +33,27 @@ export function page({ pkg, info }){
 			a starting point.
 		`),
 		el(code, { src: fileURL("./components/examples/introducing/3ps.js"), page_id }),
-		el("p").append(t`
-			As we can see, in the code at location “A” we define how to react when the function is called with
-			any event as an argument. At that moment, we don't care who/why/how the function was called. Similarly,
-			at point “B”, we reference to a function to be called on the event without caring what the function will
-			do at that time. Finally, at point “C”, we tell the application that a change has occurred, in the input,
-			and we don't care if/how someone is listening for the event.
-		`),
-		
 		el("p").append(...T`
-			We start with creating and modifying a static elements and end up with UI templates.
+			As we can see, in the code at location “A” we define ${el("em", t`how to react`)} when the function
-			${el("em").append(...T`From ${el("code", "document.createElement")} to ${el("code", "el")}.`)}.
+			is called with any event as an argument. At that moment, we ${el("em", t`don't care who/why/how`)}
-			Then we go through the native events system and the way to include it declaratively in UI templates.
+			the function was called. Similarly, at point “B”, we reference to a function to be called on the event
-			${el("em").append(...T`From ${el("code", "element.addEventListener")} to ${el("code", "on")}.`)}
+			${el("em", t`without caring`)} what the function will do at that time. Finally, at point “C”, we tell
-		`),
+			the application that a change has occurred, in the input, and we ${el("em", t`don't care if/how someone`)}
-		el("p").append(...T`
+			is listening for the event.
-			Next step is providing interactivity not only for our UI templates.
-			We introduce signals (${el("code", "S")}) and how them incorporate to UI templates.
-		`),
-		el("p").append(...T`
-			Now we will clarify how the signals are incorporated into our templates with regard to application
-			performance. This is not the only reason the library uses ${el("code", "scope")}s. We will look at
-			how they work in components represented in JavaScript by functions.
 		`),
 		el(example, { src: fileURL("./components/examples/introducing/helloWorld.js"), page_id }),
+		el("p").append(...T`
+			The library introduces a new “type” of variable/constant called ${el("em", t`signal`)} allowing us to
+			to use introduced 3PS pattern in our applications. As you can see it in the example above.
+		`),
+		el("p").append(...T`
+			Also please notice that there is very similar 3PS pattern used for separate creation of UI and business logic.
+		`),
+		el("p").append(...T`
+			The 3PS is very simplified definition of the pattern. There are more deep/academic definitions more precisely
+			describe usage in specific situations, see for example ${el("a", { textContent: t`MVVM`, ...references.w_mvv })}
+			or ${el("a", { textContent: t`MVC`, ...references.w_mvc })}.
+		`),
+		el(h3, t`Organization of the documentation`),
 	);
 }

docs_src/p04-signals.html.js

@@ -51,6 +51,10 @@ export function page({ pkg, info }){
 		el(code, { src: fileURL("./components/examples/signals/intro.js"), page_id }),
 		
 		el(h3, t`Introducing signals`),
+		el("p").append(...T`
+			Let’s re-introduce
+			${el("a", { textContent: t`3PS principle`, href: "./#h-event-driven-programming--parts-separation--ps" })}.
+		`),
 		el("p").append(...T`
 			Using signals, we split program logic into the three parts. Firstly (α), we create a variable (constant)
 			representing reactive value. Somewhere later, we can register (β) a logic reacting to the signal value

docs_src/p06-customElement.html.js

@@ -1,6 +1,7 @@
+import { T, t } from "./utils/index.js";
 export const info= {
-	title: "Custom elements",
+	title: t`Custom elements`,
-	description: "Using custom elements in combinantion with DDE",
+	description: t`Using custom elements in combinantion with DDE`,
 };
 
 import { el } from "deka-dom-el";
@@ -14,12 +15,12 @@ const fileURL= url=> new URL(url, import.meta.url);
 const references= {
 	/** Custom Elements on MDN */
 	custom_elements: {
-		title: "MDN documentation page for Custom Elements",
+		title: t`MDN documentation page for Custom Elements`,
 		href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements",
 	},
 	/** Custom Elements tips from WebReflection */
 	custom_elements_tips: {
-		title: "Ideas and tips from WebReflection",
+		title: t`Ideas and tips from WebReflection`,
 		href: "https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4",
 	}
 };
@@ -27,20 +28,19 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", "Using custom elements in combinantion with DDE"),
+		el("h2", t`Using custom elements in combinantion with DDE`),
-		el("p").append(
+		el("p").append(...T`
-
+		`),
-		),
 		el(code, { src: fileURL("./components/examples/customElement/intro.js"), page_id }),
 
-		el(h3, "Custom Elements Introduction"),
+		el(h3, t`Custom Elements Introduction`),
-		el("p").append(
+		el("p").append(...T`
-			el("a", { textContent: "Using custom elements", ...references.custom_elements })
+			${el("a", { textContent: t`Using custom elements`, ...references.custom_elements })}
-		),
+		`),
 		el(code, { src: fileURL("./components/examples/customElement/native-basic.js"), page_id }),
-		el("p").append(
+		el("p").append(...T`
-			el("a", { textContent: "Handy Custom Elements' Patterns", ...references.custom_elements_tips })
+			${el("a", { textContent: t`Handy Custom Elements' Patterns`, ...references.custom_elements_tips })}
-		),
+		`),
 
 		el(mnemonic)
 	);