o0101

const Z = self.Z = {
  keyed: {}
}

function def({
      name: name = 'Widget', 
      render: render = () => `<h1>Hello World</h1>`, 
      innerStyle: innerStyle = () => `h1 { font-family: monospace; color: dodgerblue; }`, 
      outerStyle: outerStyle = () => ({height:'10rem', width:'100%', display:'block'}), 
      keyed: keyed = false

o0101

zember installs the following function

document.createComponent(
  markup, 
  frameStyle,
  innerStyle,
  code
);

And produces an iframe styles like frameStyle, with its internal document styles like frameStyle, 

o0101

'Full code on finish
'You can change H4, 6, 26, and H to other cell references

Function KeyCell() As String
    KeyCell =3D "H4"
End Function

Function RowStart() As Integer
    RowStart =3D 6
End Function

o0101

How to run this program?

Download the 3 files: index.html, flatten.js, and tests.js into 1 directory and open index.html with a web browser.

Open the JavaScript console to see test output.

o0101

// r.js
  // imports
    import {CODE,BROWSER_SIDE} from './common.js';
    import {S} from './ssr.js';
    import T from './types.js';

  // backwards compatible alias
    const skip = markup;
    const attrskip = attrmarkup;

o0101

// api tests

function * on() {
  while(true) {
    select(
      option('plan1'),
      option('plan2'),
      option('plan3')
    );
    const [select, input] = yield 'input';

o0101

canvas with circles no overlap
each circle has text or image inside
clicking a circle moves it to page center and keeps other circles in same position around it
scrolling vertically we move over regions of circles chronologically more distant in time

o0101

How to make a ?

- better native?

Use browser native, 

window.open, select, alert, confirm, prompt, file, print. 

OR 

o0101

// select widget
// window open
// alert / confirm / prompt
// permission request 

the places where the browser platform bleeds into the "rest of the world" / the "outside world" / the "other platforms" / native / etc

o0101

/** very simple spreadsheet idea. try 1 **/

function link(cell, transform) {
  let el;
  return R`
    ${key:cell.key}
    <td class=cell>
      <input bond=${e => el = e} input=${el.value = transform(el.value)}>
    </td>
  `;