Components switching with DML
Tags: dml, javascript
Published: 2021-08-21 17:51:24

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fkbrv9i4oom9qqr6gti.png)

With DML, switching components is very easy, choose a base point, and 'call' your component.

```js
    function Home () {
      let home = div("HOME", cssComp);
      selectBase(div('', 'margin-left:20px'));
        print(`
        <br >
              DML doesn't interrupt your coding flow.... 
        `)
      unselectBase();
    }
      
    let Todo = () => {
      let todo = selectBase(div("TODOS...", cssComp));
      ul(["Task One", "Task Two"])
      unselectBase();
    }
  
    function Counter () {
      let counter = div("COUNTER", cssComp);
      selectBase(counter);
        let value = div("0");
        button("inc").onclick = () => 
          value.innerText = Number(value.innerText) + 1;
        button("dec").onclick = () => 
          value.innerText = Number(value.innerText) - 1;
      unselectBase()
    }

  
    function cleanElt (elt) {
       while(elt.firstChild) {
        elt.removeChild(elt.firstChild);
       }
    }
    
    function router(component) {
      selectBase(main)
        cleanElt(main);
        component();
      unselectBase();
    }
    
    function Navbar () {
      selectBase(div('', cssNavbar))
        button("Home",cssButton ).onclick = () => router(Home);
        button("Todo", cssButton).onclick = () => router(Todo);
        button("Counter", cssButton).onclick = () => router(Counter);
      unselectBase();
    }
    
    Navbar();
    
    let main = div('', cssContainer);
    
    router(Home); 
 
```

You can test it here : [ComponentsSwitcher](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANOLAE4D2UBqA2gAyF0C6xAZgJYxho2gB2AQ1wQ0mHPiIhY5PolmiAPOKgACKAL4BzALwAdEEgj6AfLr4qVSiAKSnzl4fAErYWAaUjw9IAK7xWALQAHCZmFhYK8OzwMMZRMRAKAPTxsWHhCo7OgsLeAG7sEADuAA7kpPD6LjJyXvpF7EjwWNqGBbAQAQ1NWIQq7HzR7AJQAWCwIxDaAIwYdKH2EeOk7CXwKmCksN448CVgqElJEKwlApoQGIZJACIAsgAyt48A+ljkwmcXSVDsAEbPB4BXADDAAKzAJmSy1W8DsESSWGstnSCj+5CQAE9jCpUTC1jj0hZpHwwOtYGAwABhD4lFTaFQAAyJ4UQAA94AERuxNHxUB1ZBBSABuFkWVg1MbsABeEFQAGYAEwlNmixbhaRQcqoIpYaIQNXhJmG8IsklklyUmmyAQDIX0izM9UWP4CWAAa00FB8fCQqAAxPKACxBugAVnlJqNSJ5OFQLhGsAAFNM6HQ8lgVAEVAB2OgqgCUUY1lG1uv1xYsZyQSAGmgC8HIJXj8vzqpZjOLZpkFstYAAQn5G+YGU6jcTS6RUH91B7K2o7QEY5o4ypFaQILh5+jSIYpyppiqNpRGip4KQNGAzhvZGKVLh3JoBgEViv4PGwyr57AfB5tSoygGRARQ7Flu1JclKQAOQEPJXVIB0x3HV0PS9cgfT9FRSE0V0kwYBhpkVRgMCDIs7x3PcAnReBG1weNlTZY9fiQFRy0QYskIsFlWB9BB2BkFQAAkPggFQkwLFRgDvGB1neYQHVrPIk30QSAHk7gAUX0PoKWpWkyOdDZoDgeB+wESAk0UpMAHJrL6ayH2w58YFYd9FTbayCwM8dwhKFZZCTTjxzRBD4R88L7geFQkHICAwD4az1iAoVSB8NYVExdCEOkWstBUVgtSKDBiowXFDMdAs7x9SAYAQMyLO88IAF87xZGSVAAFQxcgHXE+kcSkwz2sbGKHRqkz6ogSz2CU-QOtUm5VIAZRK7S+xpXASi8+cfCgJMaDm8z3RUVS+CMIhcRADqjs6opyH0JhKsM6rjLq8ypsaiwWvsbjeKiASaR9YCxIkwafPa6QgftBkrP0KlVIAVSgjqNIAJTW3SNq2+dxreizIcFUhPvHdq8hGHxRJhmblJAeYQGJo0-iHGQaYGWB9ALDAZFgX4PV6iTtEJcrwjJqAKYwAYztIDqIA5B0oJ8XA-iFJNRfFyWhRljkJIAagPecXUMWAHSZmiWf0I2Oa5vgefYPmGT6wWyvCkXycuDXpdl9YGQVpWVbV92+ClrX4Ak7Nph20lXtM97xJZb6zETxYeJt-7zA6jdRL6sHfP8+AaYAMQoXAzyRFRyFYDgJlUMB9RUeMOZZP5SDj9V2tdSAxujybptmkA1vqRpmgVMM22FRynz5OgVAEPx7vpp6jQhjQybAB0Jj4VfFRuVul4gclGIZDfV4wBA2STo0jiwuBf1rmRftT-jzGbjRXCTGAtGaPoNE0GA+nGSYfQYB5GgKDO8sA2QYA4FQVGJk8J9AYCoDA0wVAACo1AQE-r0DBWCGYYPWKQbQ5pzy2j4O-CAICoCoMVGGRghAaFhkXuOCBUDOBQCWvATEMAHT6Gwn8GmOtSB620lUPWSYGEvgLMIogdBKogHnOwVgYlgHQBUDiVMoMLBXwCDiWW0Q7wWA3PAX8fB5zfR8iwsAsEPrCi4oZFhJDSTqEQPAnBmhmhFi0UkFQNwLxFHAZAigTgXFci0DATxL8bZYHIVgtBGxq4QG-mExJ8TAEYMoSoPW0w8EsKCQIFxio4k-3CbYyJb8P7uMzOggBf8Z7JP-gkoBFDVFZJyYEuKjYNziWLAndUV8kB+JUF6AQJQ9QUjavvVi68V7mQwN0ZoJt3qn1+Jg+AAB1IemYzQzLANgCAsZvasWLMfWZPNrAt08Q4i8Tj8lTSKCobxRFWKeLNIE8gwSpoBHlMgoM0wwyKiYRYYaxYynRI7pcW2qyNk9AebmBBGB5TynhUEJ5094V0GmDrOgyDUF3HyVgDAtcyHYumKg+AOsdZeRZC9WqMcGrjiJOY524QU58QEmcjQGkoDrCTNAUOkkDHlhgLy7lrCPDwCpHqKASAwHCz5RgDcuByAgMlZwJAIr4BirJKq6VeCVBMq+mBdUrK05YXQsBJM0hNoyFWbKnyuM6VTQfAMQFzCYCcu5UmZ1fA9XVGtWdAKeCaUTVjsTA1zLxR-SfioGCcF3AgwFYZB1PcrK2R0tBWC8EqXC1NsOGmwlhDaV0oOM25hObc15sdB2AscTegtQWiAvrc3mxAFSHZGNKQluHOWm2lb+b9TNX4FWGcICNoNioZtZC4boUJh2gczMfXW1tvbBNTs60q0BoTINUdaU9zDUao0sb4LdIPeEdq3qFLUzTetGopChTExZOuluI6x3OzCNCMgsIwrJHRFiOwyRlDGEkA6p+3B0CEWmKgP5IAmqEH4EIEQ6BwTcGICSWoogYNwZADkRDmBdKSDQ6s0Qv7MSJosBPAY9cVB0BNNWXKmgqM0bME1YD0dQOiEVFBoMMGWDYYQ6IRsJR4KQHcK4GDQA)


```html
<html lang="de">
  <head>
  <meta charset="utf-8">
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
  </head>
  <body> 
  <script> 
    const cssComp = `
      text-align:center;
      font-size:32px;
      color:white;
    `;
    
    const cssContainer =  `
      background:#344053;
      height: calc(100vh - 70px);
      color:white;
      padding-top: 30px;
    `;
    
    const  cssButton = `
      color:black;
      line-height: 2rem;
      border: 1px solid transparent
      margin-right: 5px;
      cursor: pointer;
    `
    
    const cssNavbar = `
      background: rgba(0,0,12,0.4);
      border-bottom: 2px solid white;
    `
    
    function Home () {
      let home = div("HOME", cssComp);
      selectBase(div('', 'margin-left:20px'));
        print(`
        <br >
              DML doesn't interrupt your coding flow.... 
        `)
      unselectBase();
    }
      
    let Todo = () => {
      let todo = selectBase(div("TODOS...", cssComp));
      ul(["Task One", "Task Two"])
      unselectBase();
    }
  
    function Counter () {
      let counter = div("COUNTER", cssComp);
      selectBase(counter);
        let value = div("0");
        button("inc").onclick = () => 
          value.innerText = Number(value.innerText) + 1;
        bdec = button("dec").onclick = () => 
          value.innerText = Number(value.innerText) - 1;
      unselectBase()
    }



   function Tree () {
    print("From the offical site : ")
    br()
    let base = selectBase(div("", "width:350px;margin:0 auto"))
    let canvas = canvas2D()
    let cx = canvas.ctx

    // recursion
    function branch(length, angle, scale, level) {
      cx.fillRect(0, 0, .1 * length, length);
      let r=constrain(level*25,0,255)
      cx.fillStyle = "rgb("+r+ "," + (255-r)+ ",0)";
      if (level > 10) {  // -> exit
        return;
      }
      cx.save();  
      cx.translate(0, length);  // Draw
      cx.rotate(-angle); branch(length * scale, angle, scale, level + 1);
      cx.rotate(2 * angle); branch(length * scale, angle, scale, level + 1);
      cx.restore();
    }

    // draw graphics
    let w = canvas.width = base.clientWidth 
    canvas.height = w;
    canvas.clear(); cx.translate(w / 2, w); 
    cx.rotate(-3.14152)
    let t;
    branch(base.clientWidth / 7, 0.33, 0.82, 0 , 0.01+0.1*Math.sin(0.1*t++))
    unselectBase()     
   }
  
    function cleanElt (elt) {
       while(elt.firstChild) {
        elt.removeChild(elt.firstChild);
       }
    }
    
    function router(component) {
      selectBase(main)
        cleanElt(main);
        component();
      unselectBase();
    }
    
    function Navbar () {
      selectBase(div('', cssNavbar))
        button("Home",cssButton ).onclick = () => router(Home);
        button("Canvas", cssButton).onclick = () => router(Tree);
        button("Counter", cssButton).onclick = () => router(Counter);
      unselectBase();
    }
    
    Navbar();
    
    let main = div('', cssContainer);
    
    router(Tree); 
 
 </script>
  </body>
</html>
```