How to use domponent - 5 common examples

import { Init } from 'domponent/dist/domponent.development'
import Counter from "./Counter";
import CurrentTime from "./CurrentTime";
import DisplayAnything from "./DisplayAnything";
import Name from "./Name";
import domInsert from "./domInsert";

console.time('appCreation');
const App = new Init({
  selector: document.getElementById("root"),
  components: {
    Counter,
    CurrentTime,
    DisplayAnything,
    Name
  },
  appCreated: () => console.log("app created")
});
console.timeEnd('appCreation');

// const mills = document.getElementById('mills');
// const up = document.getElementById('up');
// const down = document.getElementById('down');
// const total = document.getElementById('total');

import Timer from "./Timer/Timer";
import DisplayAnything from "./DisplayAnything/DisplayAnything";
import FavoriteShow from "./FavoriteShow/FavoriteShow";
import HoverLetter from "./HoverLetter/HoverLetter";
import Navigation from "./Navigation/Navigation";
import ShowCode from "./ShowCode/ShowCode";
import Tabs from "./Tabs/Tabs";
import AddHighlight from "./AddHighlight/AddHighlight";
import domInsert from "./domInsert";

import "./app.scss";

feather.replace();

console.time("appCreation");
const App = new Init({
  selector: document.getElementById("root"),
  components: {
    Counter,
    Timer,
    DisplayAnything,
    FavoriteShow,
    HoverLetter,
    Navigation,
    ShowCode,
    Tabs,
    AddHighlight
  },
  appCreated: () => console.log("app created")
});
console.timeEnd("appCreation");

}

  stateDidUpdate() {
    this.setYellow();
  }

  setYellow() {
    if (this.state.ofFive) {
      this.$root.classList.add("yellow");
    } else {
      this.$root.classList.remove("yellow");
    }
  }
}
console.time('App')
const App = new Init({
  selector: document.getElementById("root"),
  components: {
    Counter
  },
  appCreated: () => console.log("something")
});
console.timeEnd('App')

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll(`[data-action="click.jump"]`).forEach(el => {
    el.addEventListener("click", e => {
      e.preventDefault;
      const anchor = e.target;
      console.log(anchor);
      jump(anchor.getAttribute("href"));
    });
  });

  const app = new Init({
    selector: document.body,
    components: {
      Counter,
      HoverBuddy
    }
  });

  console.log(app);
});

document.addEventListener("DOMContentLoaded", () => {
  const app = new Init({
    selector: document.getElementById("root"),
    components: {
      Wave
    }
  });
});