Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
​
  <script>    
    // version is shared between all packages
    // const version = "0.8.10-unstable.35f0b99";
    const version = 'unstable'; // npm tag
    const packages = ["universal", "resource", "renderer", "service"];
    
    const map = {};
    for (let pkg of packages) {
      map[`@starbeam/${pkg}`] = `https://esm.sh/@starbeam/${pkg}@${version}`;
    }
    
    const content = JSON.stringify({ imports: map });
    const importMap = document.createElement('script');
    importMap.setAttribute('type', 'importmap');
    importMap.innerHTML = content;
    document.head.append(importMap);
  </script>
  <style>
    #logs {
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      padding: 1rem;
    }
  </style>
​
</head>
<body>
  
<!--   <my-counter />
   -->    
    <button id="decrement">-</button>
    <span id="value"></span>
    <button id="increment">+</button>
  <div id="logs"></div>
​
    
  <script type="module">
    import { Cell, DEBUG_RENDERER } from "@starbeam/universal";
    
    let inc = document.getElementById('increment');
    let dec = document.getElementById('decrement');
    let val = document.getElementById('value');
    
    let value = Cell(0);
    
    inc.addEventListener('click', () => value.current++);
    dec.addEventListener('click', () => value.current--);
    
    DEBUG_RENDERER.render({
      render() {
        val.innerHTML = value.current;
      },
      debug() {}
    });
  </script>
  <script type="module">
    import { reactive, DEBUG_RENDERER } from '@starbeam/universal';
      
    let logs = reactive.array();
    let logElement = document.getElementById('logs');
​
    console.warn = (...strs) => logs.push(`WARN : ${strs.join(' ')}`); 
    console.error = (...strs) => logs.push(`ERROR: ${strs.join(' ')}`); 
    console.debug = (...strs) => logs.push(`DEBUG: ${strs.join(' ')}`); 
    console.info = (...strs) => logs.push(`INFO : ${strs.join(' ')}`); 
    console.log = (...strs) => logs.push(`LOG  : ${strs.join(' ')}`); 
      
    DEBUG_RENDERER.render({
      render() {
        logElement.innerHTML = logs.current.join('<br>');
      },
      debug() {}
     });
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
NullVoxPopulipro
0viewers