@twobirds/microcomponents
Version:
Micro Components Organization Class
208 lines (133 loc) • 8.69 kB
Markdown
This is an interesting read where I wanted ChatGPT to come up with a Micro Component solution for a React problem.
To be honest, I knew MCs can solve it. But I wanted to know what ChatGPT can make of it. Spoiler: it got remarkably close on the first try. The second try was spot on.
Please mind I have a trained session with a backlog. So you wont get the same answers.
***( Cut outs and comments are in parentheses...)***
Me:
**Do you remember our chat regarding Micro Components vs. existing frameworks?**
ChatGPT:
Yes, I remember our discussion! We talked about your approach to microcomponents as distinct from established frameworks, with a focus on smaller, modular, data-driven components that are stored in a hash attached to DOM elements (specifically in a _tb property in twoBirds or _mc for microcomponents). Your system emphasizes manual wiring, observability, and ease of interaction across components, making it different from React, Vue, or other component libraries that depend heavily on virtual DOMs, JSX, or hooks.
Your components follow principles of separation of concerns and DRY by keeping interactions modular but flexible, and they use observables to trigger functions in other components, which can be linked in chains. Your approach allows a component-based design that integrates deeply into the DOM without the overhead of larger frameworks. And while existing frameworks typically follow a top-down data flow, your system allows bi-directional, observable properties that automatically update the DOM when data changes.
Would you like to revisit any specific aspect, or compare further?
## React
Me:
**There was something about React specifically?**
ChatGPT:
(...)
### Manual Wiring vs. React’s Context and Hooks:
React uses Context and hooks (like useState and useEffect) to manage data flow and lifecycle.
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 Micro Components support component-based architecture.
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 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?
## Prop Drilling
Me:
**In general there was a problem regarding carrying properties from a component close to the root of the document to a component that is much deeper into the DOM tree, do you remember that?**
ChatGPT:
Yes, I remember!
We discussed the challenges in carrying properties or state from a root-level component down to deeply nested components. In React, this kind of deep property sharing can become cumbersome and often requires additional tools or patterns, such as:
### Prop Drilling:
React requires passing data through each level of components in the tree via props, a process known as prop drilling. This can lead to complex and hard-to-manage code, especially when the data isn’t relevant to every component in the chain.
(...)
In contrast, your Micro Components microcomponents have an alternative approach that makes it easier to pass properties throughout the DOM tree:
### Direct Microcomponent Selectors:
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.
(...)
### Manual Wiring for Control:
**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 Micro Components selectors work with observables to achieve this?
## Generate Code
Me:
**Can you give an example of 2 react components that interact with each other using micro components? Give me the code of both components, using microomponents to exchange data**
***( it took some further hinting, but in the end ChatGPT came up with this: )***
ChatGPT:
Here's the updated code:
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 {
constructor(targetNode) {
super(targetNode); // Receive and pass the target DOM node to the MC constructor
}
set value(newValue) {
// Send value to all descendants named "targetMC"
this.descendants("targetMC").forEach(descendant => descendant.data = newValue);
}
}
```
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 {
constructor(targetNode, setReactState) {
super(targetNode); // Receive the target DOM node to be managed by MC
this.setReactState = setReactState;
}
set data(newValue) {
this.setReactState(newValue); // Update React state when data is set
}
}
```
React Components Using Micro Components
The following React setup attaches ParentMC and ChildMC to their respective DOM elements, using the parent DOM node to instantiate the micro components.
Parent Component
The parent component attaches an instance of ParentMC to the DOM node and sets its value based on inputValue.
```javascript
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(() => {
// Update value in ParentMC whenever inputValue changes
parentMC.value = inputValue;
}, [inputValue]);
return (
<div ref={parentRef}>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue( e.target.value )}
placeholder="Type to send data to children"
/>
<ChildComponent />
</div>
);
};
```
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);
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>
</div>
);
};
```
***( ... I cannot tell about the react part, but the micro coomponent code is spot on. Like WLAN on the DOM :-) )***
**ChatGPT can produce errors. Check the information.**
***( ... but it was right on the money in the end. I love AI, albeit with a healthy grain of sceptic salt. )***
***( ... and I asked about MCs and Angular likewise, and it directly pointed me to a NG module problem that can also be solved. It even came up with sample code. )***