@twobirds/microcomponents 0.0.16 → 0.0.19

package/README.md

@@ -4,23 +4,9 @@
 
 **This code aims at improving Javascript modularity and encapsulation**.
 
-Importing a custom MC in your client side code:
-```javascript
-import MyButton from '@mySampleLib/Button';
-```
-... is equivalent to:
-```shell
-npm i  @mySampleLib/Button
-```
-... on the server side.
-
-Imagine your micro components to be organized like a "node_modules" directory that is attached to a DOM node.
-
 The MC() class acts as a **Javascript repository on a DOM node** and as a **selector and communication tool across the DOM**.
 
-**On the client side** MCs reside inside DOM nodes in a "_mc" property, or inside each other recursively. Usually they provide a direct interface to their inner code.
-
-**On the server side** MCs can be used to organize your code, too.
+Using micro components enforces **DRY, KISS and SOLID** principles in Javascript programming. Read this [RFC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/proposal_draft.md?ref_type=heads) for the shortest info, and [click here to see why you may want to use it](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/why.md?ref_type=heads).
 
 ## Status
 WIP. Should be done soon. In [manual testing](http://twobirds.gitlab.io/microcomponents/test.html), also working a lot on the documentation.
@@ -28,18 +14,10 @@ WIP. Should be done soon. In [manual testing](http://twobirds.gitlab.io/microcom
 ## Disclaimer
 I decided to extract this functionality from the [twoBirds framework](https://www.npmjs.com/package/twobirds-core), since it is framework agnostic, and relies solely on the standard DOM and native javascript or typescript, and is a useful tool in itself. Later this will be backported into twoBirds as a dependency, and twoBirds will become completely modularized on the base of MCs.
 
-Read the [history](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/history.md) to see how it all started in 2004. It contains some fun stuff.
-
-This is a massive undertaking. MCs are just the foundation of what I do. **I am about to dump** [20+ years of javascript programming](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/magic.md?ref_type=heads#things-i-already-did-with-this-in-my-own-framework-twobirds-or-in-apps-that-i-developed-with-it) **into open source libraries**, so feel free to [fund this](https://gofund.me/076c614c). The better this is funded, the faster it will be done. Given enough resources, I will start a crowdfunded company that will develop a new ecosystem for javascript/typescript programming.
-
-By **"Open Source"** I mean **really free and open**, as **you get all my inner source code with it**. Once you understand the Micro Component principle, you are back in command of your software, no matter what MC functionality you import in your system. Since **Micro Components** are encapsuled, off-shoring and near-shoring is no problem, and reusability is guaranteed. Your external coders do not need to access your code repository or your toolchain. They only need to understand MCs.
-
-**Established frameworks**, as opposed to MCs, **provide a documented interface to a hidden layer of closed source inner functionality**. MCs can be used to **add an interface to components you developed using other frameworks**. So you can still use your existing code, and MCs in it. But you be tempted to migrate it ASAP, since MCs work with any FW.
+This is a massive undertaking. MCs are just the foundation of what I do. **I am about to dump** [20+ years of javascript programming](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/magic.md?ref_type=heads#things-i-already-did-with-this-in-my-own-framework-twobirds-or-in-apps-that-i-developed-with-it) **into open source libraries**, so feel free to [fund this](https://gofund.me/076c614c). The better this is funded, the faster it will be done. Given enough resources, I will start a crowdfunded company that will develop a new open source ecosystem for javascript/typescript programming. By **"Open Source"** I mean **really free and open**, as **you get all my inner source code with it**. Once you understand the Micro Component principle, you are back in command of your software, no matter what MC functionality you import in your system. Since **Micro Components** are encapsuled, off-shoring and near-shoring is no problem, and reusability is guaranteed. Your external coders do not need to access your code repository or your toolchain. They only need to understand MCs.
 
 ## General
 
-Using micro components enforces **DRY, KISS and SOLID** principles in Javascript programming. Read this [RFC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/proposal_draft.md?ref_type=heads) for the shortest info, and [click here to see why you may want to use it](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/why.md?ref_type=heads).
-
 This is a low-level approach. It consists of a single class with 3 static methods and 5 selector methods, and weights in at ~2 kB. Also there is an ES3 version to help e.g. [hbbtv](https://en.wikipedia.org/wiki/Hybrid_Broadcast_Broadband_TV) modular JS coding, or any other device that relies on ES3. The latter is WIP, backporting is currently last on my list.
 
 For a short usage description goto [Micro Component Usage](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/usage.md?ref_type=heads).

package/assets/documentation/tB_react.md

@@ -97,6 +97,7 @@ Parent Micro Component
 This component will receive a target DOM node and set a value that propagates down to its descendants:
 
 ```javascript
+import { MC } from '@twobirds/microcomponents';
 
 // Parent Micro Component
 class ParentMC extends MC {
@@ -116,6 +117,7 @@ Child Micro Component
 This component has a data setter that updates the internal React state in each child:
 
 ```javascript
+import { MC } from '@twobirds/microcomponents';
 
 // Child Micro Component
 class ChildMC extends MC {
@@ -140,16 +142,16 @@ The parent component attaches an instance of ParentMC to the DOM node and sets i
 ```javascript
 
 import React, { useState, useRef, useEffect } from 'react';
-import { MC } from '@Micro Components/microcomponents';
+import { MC } from '@twobirds/microcomponents';
+import { ParentMC } from '@myCompany/ParentMC';
 
 const ParentComponent = () => {
   const [inputValue, setInputValue] = useState("");
   const parentRef = useRef(null);
+  const parentMC = new ParentMC( parentRef );
+  const sender = MC.add(parentRef.current, 'parentMC', parentMC);
 
   useEffect(() => {
-    const parentMC = new ParentMC(parentRef.current); // Pass the DOM node to ParentMC
-    MC.add(parentRef.current, 'parentMC', parentMC);
-
     // Update value in ParentMC whenever inputValue changes
     parentMC.value = inputValue;
   }, [inputValue]);
@@ -159,7 +161,7 @@ const ParentComponent = () => {
       <input
         type="text"
         value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
+        onChange={(e) => setInputValue( e.target.value )}
         placeholder="Type to send data to children"
       />
       <ChildComponent />
@@ -173,20 +175,21 @@ Child Component
 The child component attaches an instance of ChildMC, which updates its state whenever data is set.
 
 ```javascript
+import React, { useState, useRef } from 'react';
+import { MC } from '@twobirds/microcomponents';
+import { ChildMC } from '@myCompany/ChildMC';
+
 
 const ChildComponent = () => {
   const [childData, setChildData] = useState("");
   const childRef = useRef(null);
-
-  useEffect(() => {
-    const childMC = new ChildMC(childRef.current, setChildData); // Pass DOM node and state setter to ChildMC
-    MC.add(childRef.current, 'targetMC', childMC);
-  }, []);
+  const childMC = new ChildMC( childRef, setChildData );
+  const receiver = MC.add(childRef.current, 'childMC', childMC);
 
   return (
     <div ref={childRef}>
       <h3>Received Data:</h3>
-      <p>{childData}</p>
+      <p>childData</p>
     </div>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twobirds/microcomponents",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "description": "Micro Components Organization Class",
   "main": "microcomponents.js",
   "sideEffects": false,

package/public/documentation/tB_react.md

@@ -8,32 +8,6 @@ Please mind I have a trained session with a backlog. So you wont get the same an
 
 ***( Cut outs and comments are in parentheses...)***
 
-
-## Disclaimer:
-
-The answers partly reflect on the twoBirds framework instead of Micro Components. twoBirds converts all props into convenience observables automatically, which MCs don't do.
-
-The code ChatGPT generated first isn't quite right therefore. Also since I am not a react specialist I cannot guarantee for that part. In general, this is close enough though.
-
-I edited the code to reflect the right solution and annotated my changes.
-
-I put that into the first answer and asked ChatGPT again.
-
-The second answer was spot on, assuming some magic for the convenience observables.
-
-Bonus: during this process I got the inspiration that there should be several kinds of state objects:
-
-- readonlyState: exports some inner props to the DOM for others to read, but the external state cannot be modified. Not observable.
-- observableState: observable readonlyState. You can attach callbacks that fire on changes.
-- writeableState: observableState that you can modify, typesafe at runtime. Inner methods will do further work probably.
-- hardenedState: writableState (typesafe) that also does sanity checks before inner processing and throws on check failure.
-
-This will be a complete public state model in the DOM.
-
-And since it is needed for the solution below, that will be the first reference implementation using Micro Components. I hope the React world will be happy.
-
-Working with AI can be wonderful...
-
 ## Start Session
 
 Me:
@@ -64,13 +38,13 @@ React uses Context and hooks (like useState and useEffect) to manage data flow a
 Your approach leans on manual wiring for connecting data across microcomponents, avoiding the abstraction of hooks and allowing direct, observable-driven updates. This can make the flow of data more transparent and easier to trace in complex applications, whereas hooks can sometimes add complexity or obscurity when trying to understand data dependencies.
 
 ### Component Reusability and Scaling:
-Both React and twoBirds support component-based architecture.
+Both React and Micro Components support component-based architecture.
 
-However, twoBirds allows multiple microcomponents on a single DOM element, and each microcomponent is responsible for specific tasks, making scaling in large applications more modular and straightforward. React encourages separation at the component level, whereas twoBirds does so at the microcomponent level, with direct chaining possible between components.
+However, Micro Components allows multiple microcomponents on a single DOM element, and each microcomponent is responsible for specific tasks, making scaling in large applications more modular and straightforward. React encourages separation at the component level, whereas Micro Components does so at the microcomponent level, with direct chaining possible between components.
 
 (...)
 
-Each of these aspects underlines twoBirds’ focus on minimalism, modularity, and developer control. These are different from React's abstraction and tooling-heavy approach, making your framework potentially more transparent and lightweight for specific use cases.
+Each of these aspects underlines Micro Components’ focus on minimalism, modularity, and developer control. These are different from React's abstraction and tooling-heavy approach, making your framework potentially more transparent and lightweight for specific use cases.
 
 Would you like to dive into any of these differences in more detail?
 
@@ -91,23 +65,20 @@ React requires passing data through each level of components in the tree via pro
 
 (...)
 
-In contrast, your twoBirds microcomponents have an alternative approach that makes it easier to pass properties throughout the DOM tree:
+In contrast, your Micro Components microcomponents have an alternative approach that makes it easier to pass properties throughout the DOM tree:
 
 ### Direct Microcomponent Selectors:
-twoBirds includes selector methods (like .parents() and .descendants()) that allow components to access any microcomponent within the tree without explicit data passing. This capability enables deeply nested components to retrieve properties from higher-level components directly, bypassing the need to route data through intermediary components.
-
-### Observables for State Propagation:
-Since twoBirds uses observables, properties from a root component can be shared across components by observing changes directly. When the observable changes, all relevant components are notified and updated automatically. This is a natural data propagation method that doesn’t require explicit context or external state management.
+Micro Components includes selector methods (like .parents() and .descendants()) that allow components to access any microcomponent within the tree without explicit data passing. This capability enables deeply nested components to retrieve properties from higher-level components directly, bypassing the need to route data through intermediary components.
 
-***( ...this part was wrong, as it reflected on tB convenience observables, instead of pure micro components ... )***
+(...)
 
 ### Manual Wiring for Control:
 
-**Because twoBirds relies on manual wiring, you can set up specific connections between components as needed.** This gives you fine-grained control over where and how data flows through the app without involving a top-level state or intermediary components, making it more scalable for larger apps without the need for a Context API or state library.
+**Because Micro Components rely on manual wiring, you can set up specific connections between components as needed.** This gives you fine-grained control over where and how data flows through the app without involving a top-level state or intermediary components, making it more scalable for larger apps without the need for a Context API or state library.
 
 (...)
 
-This structure offers a highly flexible, context-free solution for deep property sharing, making it an efficient alternative to prop drilling or global state libraries in many scenarios. Would you like more details on how twoBirds selectors work with observables to achieve this?
+This structure offers a highly flexible, context-free solution for deep property sharing, making it an efficient alternative to prop drilling or global state libraries in many scenarios. Would you like more details on how Micro Components selectors work with observables to achieve this?
 
 
 ## Generate Code
@@ -126,6 +97,7 @@ Parent Micro Component
 This component will receive a target DOM node and set a value that propagates down to its descendants:
 
 ```javascript
+import { MC } from '@twobirds/microcomponents';
 
 // Parent Micro Component
 class ParentMC extends MC {
@@ -145,6 +117,7 @@ Child Micro Component
 This component has a data setter that updates the internal React state in each child:
 
 ```javascript
+import { MC } from '@twobirds/microcomponents';
 
 // Child Micro Component
 class ChildMC extends MC {
@@ -170,15 +143,15 @@ The parent component attaches an instance of ParentMC to the DOM node and sets i
 
 import React, { useState, useRef, useEffect } from 'react';
 import { MC } from '@twobirds/microcomponents';
+import { ParentMC } from '@myCompany/ParentMC';
 
 const ParentComponent = () => {
   const [inputValue, setInputValue] = useState("");
   const parentRef = useRef(null);
+  const parentMC = new ParentMC( parentRef );
+  const sender = MC.add(parentRef.current, 'parentMC', parentMC);
 
   useEffect(() => {
-    const parentMC = new ParentMC(parentRef.current); // Pass the DOM node to ParentMC
-    MC.add(parentRef.current, 'parentMC', parentMC);
-
     // Update value in ParentMC whenever inputValue changes
     parentMC.value = inputValue;
   }, [inputValue]);
@@ -188,7 +161,7 @@ const ParentComponent = () => {
       <input
         type="text"
         value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
+        onChange={(e) => setInputValue( e.target.value )}
         placeholder="Type to send data to children"
       />
       <ChildComponent />
@@ -202,20 +175,21 @@ Child Component
 The child component attaches an instance of ChildMC, which updates its state whenever data is set.
 
 ```javascript
+import React, { useState, useRef } from 'react';
+import { MC } from '@twobirds/microcomponents';
+import { ChildMC } from '@myCompany/ChildMC';
+
 
 const ChildComponent = () => {
   const [childData, setChildData] = useState("");
   const childRef = useRef(null);
-
-  useEffect(() => {
-    const childMC = new ChildMC(childRef.current, setChildData); // Pass DOM node and state setter to ChildMC
-    MC.add(childRef.current, 'targetMC', childMC);
-  }, []);
+  const childMC = new ChildMC( childRef, setChildData );
+  const receiver = MC.add(childRef.current, 'childMC', childMC);
 
   return (
     <div ref={childRef}>
       <h3>Received Data:</h3>
-      <p>{childData}</p>
+      <p>childData</p>
     </div>
   );
 };

package/public/test.js

@@ -198,7 +198,7 @@ console.log("domElement\n  ._mc", domElement._mc);
 console.log("domElement\n  ._mc\n  .myFirstMC", domElement._mc.myFirstMC);
 console.log("domElement\n  ._mc\n  .myFirstMC\n  ._mc (MC.debug = false)", domElement._mc.myFirstMC._mc);
 MC.debug = true;
-console.log("domElement\n  ._mc\n .myFirstMC\n  ._mc  (MC.debug = true)", domElement._mc.myFirstMC._mc);
+console.log("domElement\n  ._mc\n  .myFirstMC\n  ._mc  (MC.debug = true)", domElement._mc.myFirstMC._mc);
 MC.debug = false;
 /*
 test selectors

package/src/test.js

@@ -215,7 +215,7 @@ console.log(
 );
 MC.debug = true;
 console.log(
-	"domElement\n  ._mc\n .myFirstMC\n  ._mc  (MC.debug = true)",
+	"domElement\n  ._mc\n  .myFirstMC\n  ._mc  (MC.debug = true)",
 	domElement._mc.myFirstMC._mc
 );
 MC.debug = false;