@twobirds/microcomponents 0.0.12 → 0.0.15

package/assets/documentation/tB_react.md

@@ -0,0 +1,204 @@
+# Discussing React Prop Drilling with ChatGPT
+
+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...)***
+
+## Start Session
+
+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
+
+// 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
+
+// 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 '@Micro Components/microcomponents';
+
+const ParentComponent = () => {
+  const [inputValue, setInputValue] = useState("");
+  const parentRef = useRef(null);
+
+  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]);
+
+  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
+
+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);
+  }, []);
+
+  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.**
+
+## ... yes I do :-)
+
+***( ... 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. )***

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twobirds/microcomponents",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "description": "Micro Components Organization Class",
   "main": "microcomponents.js",
   "sideEffects": false,
@@ -10,7 +10,7 @@
     "prep": "cp -R assets/* public || true; cp src/* build || true;",
     "build": "npm run clean; npm run prep; tsc; npm run minify; npm run copyToDist;",
     "minify": "jsmin -o build/microcomponents.es3.min.js ./src/microcomponents.es3.js;jsmin -o build/microcomponents.min.js build/microcomponents.js;",
-    "copyToDist": "cp -R assets/* public || true; cp build/* dist; cp build/microcomponents.js public; cp build/test.js public; cp MicroComponents.svg dist; cp MicroComponents.svg public/fiddle;"
+    "copyToDist": "cp -R assets/* public || true; cp build/micro* dist; cp build/microcomponents.js public; cp build/test.js public; cp MicroComponents.svg dist; cp MicroComponents.svg public/fiddle;"
   },
   "author": "",
   "license": "ISC",

package/public/documentation/functional_requirements.md

@@ -0,0 +1,8 @@
+## Functional Requirements
+
+- I want to **enrich a standard HTMLElement instance or any object with encapsuled and modular javascript**, without having to resort to web components or big frameworks.
+- I want to have an **interface** into this functionality that I can both tight and loosely couple.
+- I want to **import and use Micro Components in any framework** that allows for direct DOM access.
+- I want **a single location** in an HTMLElement instance where all this functionality is **stored and sufficiently organized**.
+- I want to be able to use **selectors** to find those instances in the DOM.
+- All this must stricly follow **web standards**.

package/public/documentation/history.md

@@ -0,0 +1,436 @@
+## History
+
+### Content
+
+- [Before 2006](#before-2006)
+- [DOM and Javascript in 2006](#dom-and-javascript-in-2006)
+- [How it started](#how-it-started)
+- [Initial Specification](#initial-specification)
+- [Unforeseen Problems](#unforeseen-problems)
+- [The Result](#the-result)
+- [Release on Ajaxian](#release-on-ajaxian)
+- [First SPA ever](#first-spa-ever)
+- [Some Code Snippets](#some-code-snippets)
+- [The Fallout](#the-fallout)
+
+
+## Before 2006
+
+Starting 1980, I programmed client-server or standalone applications for DOS and MS Windows.
+
+Around 1995 I switched to web programming.
+
+Before 2006 I was working on server side modular components using PHP, with little client side automation using Javascript.
+
+Starting 2004 I developed twoBirds v1, vaguely centered around a web component idea.
+
+
+## DOM and Javascript in 2006
+
+The Internet has just existed for a couple of years for private use.
+
+Douglas Crockford had released the [JSON specification](https://en.wikipedia.org/wiki/JSON) in 2000.
+
+The [XMLHttpRequest](https://en.wikipedia.org/wiki/XMLHttpRequest) was specified by Microsoft in 2001. As of IE7 (2006) it was adopted by every browser, albeit buggy in IE(!).
+
+The Javascript engines and the DOM model in contemporary browsers slightly differed from each other then.
+
+John Resig had released [jQuery](https://en.wikipedia.org/wiki/JQuery). [Prototype](https://en.wikipedia.org/wiki/Prototype_JavaScript_Framework) was its main competitor then.
+
+Both of these libraries were immensely helpful, since they allowed for cross-browser access to the DOM and leveraged Javascript inconsistencies.
+
+I was a self-employed full-stack programmer then. **PHP** and **Javascript** knowledge was all it took in these lucky days to call yourself a full stack programmer.
+
+
+## How it started
+
+With a call, obviously. The requirements were: convert an Excel sheet into a web application, so insurance company staff could plan customer appointments and the company could automate monthly travel expense refunds.
+
+Easy, of course I can do that. LAMP and jQuery will do it for me. Until it didn't.
+
+jQuery doesn't help you in any way structuring complex code. But my existing twoBirds v1 could. I saw the chance to let this project fund twoBirds v2.
+
+I called back the customer and explained. In essence we agreed to this: the customer will pay the same sum, but it will take double as long. The updated twoBirds v2 library will continue to be my royalty, but he is given a lifelong license to it.
+
+The project was a grossly underestimated, as I found out. Estimated at 6 month, it finally took 12 and most of this was twoBirds, especially the cross-browser part. Spoiler: it worked in the end.
+
+
+## Initial Specification
+
+twoBirds was to fulfill these requirements:
+
+- **cross browser**.
+
+This led to some unforseen consequences, which I will describe below.
+- **on-demand loading** of Javascript files.
+
+Also on-demand loading of associated **HTML templates** and **CSS**. This must be **recursive**, so MCs can recursively load other MCs and their requirements.
+- **internal Micro Component repository** in the resulting application to avoid multiple loading for multiple instances of a MC in the page.
+- **leverage XMLHttpRequest inconsistencies**, especially the famous "closure bug" that led to  memory leaks in IE.
+- **jQuery** as the selector engine.
+
+Thanks again John, without your code it would have been much harder. We all stand on the shoulders of giants.
+
+
+## Unforseen Problems
+
+Browsers tested:
+- **IE5.5**+
+- **Netscape Communicator**, later **Firefox** also
+- **Chrome**
+- **Opera**
+- **Safari** ( Safari for Windows at least, see below)
+- **Konqueror**, since I was working on OpenSUSE.
+
+This resulted in some problems, i.e. (list is not complete):
+
+### No debuggers
+
+Firebug wasn't there yet. When it finally arrived as a firefox extension, I was really cooking.
+
+Other than that there was no reflection mechanism, so no runtime introspection for most browsers. The Proxy() class didn't exist yet.
+
+Microsofts skript debugger didnt help a lot with other browsers.
+
+### Missing equipment
+
+Since I had no Apple hardware, I couldn't reliably test for Safari on MAC. Safari for Windows was slightly different from Safari on MAC.
+
+At least I got it working there but could not promise for MAC hardware. I was told by others it worked there as well, though.
+
+### Meager internal documentation for browsers
+
+It took me month to find out the best way to on-demand load Javascript code, templates and CSS, and how to avoid FOUC.
+
+### timeout()
+
+Cross-browser support in 2006 meant Konqueror also.
+
+But Konqueror v1 had a funny bug: it could only handle one (1) timeout via setTimeout() at a time. I had to come up with a workaround.
+
+So I implemented tb.timer() which used a single timeout to poll a list of timestamped callbacks every 100 ms.
+
+```javascript
+tb.timer = {
+ destroylist: [],
+ addlist: [],
+ list: [],
+ ms: 100,
+
+ // public
+
+ add: function( pCallback, pTimeMs ) {
+  var myDate = new Date();
+  var myIdentifier = '_to'+tb.misc.getid();
+  var myTime = myDate.getTime() + pTimeMs;
+  var myArray = [ myTime, '( '+pCallback+' )', myIdentifier ];
+  tb.timer.addlist.push( myArray );
+  if (tb.timer.list.length === 0 ) {
+   window.setTimeout( 'tb.timer.timeout()', 10);
+   }
+  return myIdentifier;
+  },
+
+ abort: function( pIdentifier ) {
+  tb.timer.destroylist.push( pIdentifier );
+  },
+
+ //private
+
+ destroy: function( pIdentifier ) {
+  var myNewlist = [];
+  var i=0;
+  for ( i in tb.timer.list ) {
+   if ( tb.timer.list[i][2] !== pIdentifier ) {
+    var myObj = tb.misc.cloneObj( tb.timer.list[i] );
+    myNewlist.push( myObj );
+    }
+   }
+  tb.timer.list = myNewlist;
+  },
+
+ timeout: function() {
+  while ( tb.timer.addlist.length > 0 ) {
+   tb.timer.list.push( tb.timer.addlist.pop() );
+   }
+  while ( tb.timer.destroylist.length > 0 ) {
+   tb.timer.destroy( tb.timer.destroylist.pop() );
+   }
+  if ( tb.timer.list.length < 1 ) {
+   tb.timer.ms = 100;
+   return;
+   }
+  else {
+   var myNewList = [];
+   var myMinVal = 0;
+   while ( tb.timer.list.length > 0 ) {
+    var myDate = new Date();
+    var myTime = myDate.getTime();
+    if ( tb.timer.list[0][0] <= myTime ) {
+     var myEval = tb.timer.list[0][1];
+     eval( '( ' + myEval + ' )' );
+     }
+    else {
+     if ( tb.timer.list[0][1] < myMinVal || myMinVal === 0 ) {
+      myMinVal = tb.timer.list[0][1];
+      }
+     myNewList.push( tb.timer.list[0] );
+     }
+    tb.timer.list.shift();
+    }
+   tb.timer.list = myNewList;
+   if ( myMinVal > 0 ) {
+    myDate = new Date();
+    tb.timer.ms = myMinVal - myDate.getTime();
+    }
+   else {
+    tb.timer.ms = 100;
+    }
+   while ( tb.timer.addlist.length > 0 ) {
+    tb.timer.list.push( tb.timer.addlist.pop() );
+    }
+   window.setTimeout( 'tb.timer.timeout()', tb.timer.ms);
+   }
+  }
+
+ };
+window.setTimeout( 'tb.timer.timeout()', 0);
+```
+
+Then I implemented ...
+- **tb.timeout()** to use tb.timer().
+
+- **tb.interval()** also, which used tb.timeout(). This I did with the added benefit that my implementation avoided runovers if the implemented functionality lasted longer than the interval.
+
+While I was at it, I also implemented...
+- **tb.wait()**, which used tb.interval() to wait for a condition to be true, and then called the callback.
+
+- **tb.observe()**, which was a tb.interval() implementation of tb.wait().
+
+At this point I had a solution polling **Observables** in 2006.
+
+
+## The Result
+
+So far I had a solution for **requirement loading**, **templating**, **observables** and **web components** as early as 2006.
+
+- **tb.require()** probably influenced [requireJs](https://requirejs.org/) and in turn the CommonJS specification.
+
+- **Templates** are now a coding standard and implemented in various ways using backtick strings ( `string with ${placeholder}` ) and the DOM template tag.
+
+- **Observables** are now a coding standard and implemented in various ways using getters/setters or the Proxy() object.
+
+- [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) initially contained a definition for user built in custom elements, which was a functional copy of twoBirds web components.
+
+Look at the screenshots attached at the end of this document. That is the application I developed, with a code example attached.
+
+## Release on Ajaxian
+
+twoBirds v2 was open sourced and anounced on ajaxian.com on April 2nd 2007, you can find the original article on archive.org.
+
+![Ajaxian Screenshot 1](./ajaxian-1.png)
+![Ajaxian Screenshot 2](./ajaxian-2.png)
+
+Which led to this comment:
+
+![Ajaxian Screenshot 3](./ajaxian-3.png)
+
+RTFM, man. Oh nevermind, Dean. I forget to add one. Autists...
+
+twoBirds as a framework will be dissolved into modular micro component based functionality. RIP. It served me well for 20 years.
+
+
+## First SPA ever
+
+The first web component based single page application (SPA) that ever existed - to my knowledge. Prove me otherwise ;-).
+
+![app1](./rnd0023-1.jpg);
+![app2](./rnd0023-2.jpg);
+![app3](./rnd0023-3.jpg);
+
+Yes, I contemplated programming a web based Excel, as in Google Calc.
+
+And web component based cockpit instruments for airplanes.
+
+As I think of it: **SpaceX** uses **Web Components** for cockpit instruments in their **Dragon Capsule**. ;-)
+
+## Some Code Snippets
+
+This is the code for the left part of the table shown in the pictures above.
+
+```javascript
+self.tourtable.leftcolumn = { // new object
+
+ showcounter: 0,
+ datecache: [], // cache für HTML code
+
+ init: function (pDivId) {
+  //tb.element.show( null, 'tourtable', 'leftcolumnline'); // preload line code
+  tb.element.require(
+   [ [ 'css', 'tourtable', 'leftcolumn'],
+     [ 'tpl', 'tourtable', 'leftcolumn'] ],
+   'tourtable.leftcolumn.display("' + pDivId + '")',
+   true );
+  },
+
+ display: function (pDivId) {
+
+  if ( tourtable.middlecolumn.day == -1 ) { // clear HTML array
+   tourtable.leftcolumn.datecache = [];
+   }
+  else {
+   tourtable.leftcolumn.datecache[tourtable.middlecolumn.day] = '';
+   var pDay = tourtable.middlecolumn.day;
+   }
+
+  try {
+   var myDiv = document.getElementById( pDivId );
+   }
+  catch (e) {
+   tb.timer.add( 'tourtable.leftcolumn.display("'+pDivId+'")', 100 );
+   return;
+   }
+  tourtable.leftcolumn.showcounter = 1;
+  //tb.debug.add("<p>Element <font color='magenta'><b> display: </b></font> tourtable.leftcolumn in " + pDivId + "</p>");
+  var myHtml = tb.loader.tplget('tourtable','leftcolumn');
+  var myNewRegEx = new RegExp('%tourtableleftrows%');
+  myHtml = myHtml.replace(myNewRegEx, '');
+  tb.div.replace(pDivId,myHtml);
+  myHtml = tb.loader.tplget('tourtable','leftcolumn');
+
+  var myDate = new tb.tbDate();
+  myDate.setDate(1);
+  var myMonth = myDate.getMonth();
+  var myRows = '';
+  var myDateRows = '';
+  var myId = 1;
+  var myLastDate='';
+  var createDate='';
+
+  //tb.debug.add('<p>leftcolumn <font color="blue">Act:</font> '+middlecolumn.getlength()+'</p>');
+
+  //var myDateList = '';
+  if ( tourtable.middlecolumn.getlength() > 0 )
+  for ( x=0; x < tourtable.middlecolumn.getlength(); x++ ) {
+   var thisRecord = tourtable.middlecolumn.act.Data.data[0][x];
+   if ( tourtable.middlecolumn.currentId == null ) {
+    tourtable.middlecolumn.currentId = thisRecord.id;
+    }
+   var myDate = new tb.tbDate();
+   myDate.setFromMysqlDateString( thisRecord.datum );
+   var thisDateIndex = myDate.getDate();
+   if ( ! tourtable.leftcolumn.datecache[thisDateIndex] ) { // create if necessary
+    tourtable.leftcolumn.datecache[thisDateIndex] = '';
+    }
+   if ( tourtable.leftcolumn.datecache[thisDateIndex] == '') { // create if necessary
+    createDate = thisDateIndex;
+    }
+   var myNextDate = ( x == tourtable.middlecolumn.getlength()-1 || tourtable.middlecolumn.act.Data.data[0][x+1].datum != thisRecord.datum ) ? true : false;
+   if ( !pDay || thisDateIndex == pDay || createDate == thisDateIndex ) { // pdate not given or this is the given date
+    tourtable.leftcolumn.datecache[thisDateIndex] += tourtable.leftcolumnline.make( thisRecord.id, ( myLastDate == thisRecord.datum ? false : true ), myNextDate, myDate, thisRecord.ort );
+    }
+   myLastDate = thisRecord.datum;
+   }
+
+  myRows = tourtable.leftcolumn.datecache.join('');
+
+  myNewRegEx = new RegExp('%tourtableleftrows%');
+  myHtml = myHtml.replace(myNewRegEx, myRows);
+
+  //tb.div.replace(pDivId,myHtml);
+  tb.misc.innerHTML(pDivId,myHtml);
+
+  tourtable.leftcolumn.showcounter = 0;
+  }
+
+ };
+```
+
+This is the example code they referred to on ajaxian.com:
+
+```javascript
+index = {};
+
+user = {};
+
+tourtable = {};
+
+index.index_body = {
+
+ init: function (pDivId) {
+  tb.element.require(
+   [ [ 'css', 'index', 'index_body'],
+     [ 'tpl', 'index', 'index_body']
+   ],
+   'index.index_body.display("' + pDivId + '")',
+   true );
+  },
+
+ display: function (pDivId) {
+  var myHtml = tb.loader.tplget('index','index_body');
+  tb.div.replace( pDivId, myHtml );
+  tb.element.require(
+   [ [ 'js', 'tourtable', 'ddata'] ,
+     [ 'js', 'tourtable', 'rightcolumn'] ,
+     [ 'js', 'tourtable', 'leftcolumn'] ,
+     [ 'js', 'tourtable', 'leftcolumnline'] ,
+     [ 'js', 'tourtable', 'middlecolumn1line'] ,
+     [ 'js', 'tourtable', 'middlecolumn2line'] ,
+     [ 'js', 'tourtable', 'middlecolumn3line'] ,
+     [ 'js', 'tourtable', 'middlecolumn1'] ,
+     [ 'js', 'tourtable', 'middlecolumn2'] ,
+     [ 'js', 'tourtable', 'middlecolumn3'] ,
+     [ 'js', 'user', 'user_login'] ,
+     [ 'js', 'tb', 'pos'] ,
+     [ 'js', 'tb', 'md5'] ,
+     [ 'js', 'tb', 'tbDate'] ,
+     [ 'js', 'tb', 'tbCurrency'] ,
+     [ 'css', 'tourtable', 'middlecolumn'] ,
+     [ 'css', 'tourtable', 'rightcolumn'] ,
+     [ 'css', 'tourtable', 'leftcolumn'] ,
+     [ 'css', 'tourtable', 'leftcolumnline'] ,
+     [ 'css', 'tourtable', 'middlecolumn1'] ,
+     [ 'css', 'tourtable', 'middlecolumn2'] ,
+     [ 'css', 'tourtable', 'middlecolumn3'] ,
+     [ 'css', 'tourtable', 'middlecolumn1line'] ,
+     [ 'css', 'tourtable', 'middlecolumn2line'] ,
+     [ 'css', 'tourtable', 'middlecolumn3line'] ,
+     [ 'tpl', 'tourtable', 'rightcolumn'] ,
+     [ 'tpl', 'tourtable', 'leftcolumn'] ,
+     [ 'tpl', 'tourtable', 'leftcolumnline'] ,
+     [ 'tpl', 'tourtable', 'middlecolumn1line'] ,
+     [ 'tpl', 'tourtable', 'middlecolumn2line'] ,
+     [ 'tpl', 'tourtable', 'middlecolumn3line'] ,
+     [ 'tpl', 'tourtable', 'middlecolumn1'] ,
+     [ 'tpl', 'tourtable', 'middlecolumn2'] ,
+     [ 'tpl', 'tourtable', 'middlecolumn3'] ,
+     [ 'tpl', 'tourtable', 'middlecolumn'] ,
+     [ 'js', 'tourtable', 'middlecolumn']
+   ] );
+  tb.element.show( 'toprightcontainer', 'user', 'user_login' );
+  }
+
+ };
+
+```
+
+When I find the time I will turn into standalone web component using local storage, since it is a historic archievement IMHO. For now I have more pressing tasks to do.
+
+
+## The Fallout
+
+I am an autist, which I didn't know back then BTW.
+
+Above all that means, if you focus on something, you keep focussed for life. And I focused on twoBirds, really.
+
+So I was burnt as a programmer, because I have a hard time working with the current standard frameworks.
+
+Now try to find a programmer job without using standard frameworks.
+
+In the end I lost my existence 3 times over the past 20 years, with all the consequences.
+
+No pity requested, I always pulled myself out of the mud. Thats just the way things go. But if feel tempted, you can [fund this](https://gofund.me/076c614c).
+
+I really want **Micro Components** to become a web standard also.
+
+I don't regret still working on the basic idea. As long as I can, I will continue doing so.