<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>-- pure web --</title>
</head>

<body class="bg-black text-emerald-400">
  <pre class="--grid --gap-2 p-4">
    <!-- <button onclick="fun()">[ js framework ++ ]</button> -->
    <slot></slot>
  </pre>
</body>
<script>
  const q = query => document.querySelector(query);
  const signal = mo => st => new Proxy(Array.isArray(st)?[]:{}, {
      get:(b,t)=>b[t],set:(b,t,v)=>{b[t]=v;mo(b);return true}
    });
  const monitor = (st) => q('slot').innerHTML = JSON.stringify(st[2]??"", null, 2);

  const z = signal(monitor)([]);
  z[0] = `
         -- Hello world --

  Self presentation of ::
  JS glitch which is the wannabe <span class='text-white'>JS framework</span>
  but I don't know how started it,
  lets jump into the core

         our idea :: <i>no-build :: no-pain</i>

  <i>code base:</i>
  <pre class='bg-emerald-950 text-white p-4'><p class='bg-emerald-900 text-sky-300 p-2'>// reactivity</p>
    const signal = mo => st => new Proxy(
      Array.isArray(st)?[]:{},
      {
        get:(b,t)=>b[t],
        set:(b,t,v)=>{
          b[t]=v;
          mo(b);
          return true
        }
      });
    <p class='bg-emerald-900 text-sky-300 p-2'>// query</p>
    const q = query => document.querySelector(query);
    <p class='bg-emerald-900 text-sky-300 p-2'>// presentation example</p>
    const monitor = st => q('slot')
      .innerHTML=JSON.stringify(st[2]??'',null,2);
    const z = signal(monitor)([]);
    let bum;
    const presentation = () => {
      clearInterval(bum);
      z[1] = 0;
      z[2] = ''
      bum = setInterval(() => {
        if (z[0].length&lt;z[1]) {
          return clearInterval(bum);
        }
        z[2] = z[2]+z[0].slice(z[1]++,z[1])
      },Math.random() * 50 + 10);
    }
    presentation();
  </pre>
  - - -  thx Tailwind: no-CSS - - - --- -  -- --- -- the end --
  `.split('\n').join('<br>')

  let bum;
  const presentation = _ => {
    clearInterval(bum);
    z[1] = 0;
    z[2] = ""
    bum = setInterval(() => {
      if (z[0].length<z[1]) {
        clearInterval(bum);
        z[2]+="<br><button onclick='presentation()'>"
        +"    [ watch again ]    </button><br>";
        return;
      }
      z[2] = z[2]+z[0].slice(z[1]++,z[1])
    },Math.random() * 30 + 5);
  }

  presentation();
</script>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.