# DISCUSSION: Create a way to separate HTML from Component

const MyComp = component$(({id, title}) => {...})

return (
  <>
    <MyComp h:id="abc" h:class="bar" id=""/>
    <MyComp id="abc" class="bar" prop:id=""/>
    <div id="123" class="foo"/>
  </>
);

Goal:
- Separate out props from html

---

const objA = createStore({mode: true}); // objA
const objB = createStore({b:1}); // objB
const objC = createStore({c:2}); // objC
onWatch$((obs) => { // onWatch123
  if (obs(objA).mode) {
    objA.result = obs(objB).b;
  } else {
    objA.result = obs(objC).c;    
  }
});

return $(() => (
  // const [objA, objB, objC] = useLexicalScope()
  <div>
    {objA.mode ? objB.b : objC.c}  
    <button on$:click={() => console.log(objA)}>
         +
   </button>
  </div>
));

<div q:id="345" q:obj="123">
  {store.mode ? 
    <button on:click="./chunk#symbol[objB]">+</button> :
    <button on:click="./chunk#symbol">-</button>
  }
</div>

string => obj

{
  'roots': {

    el123 {
      qrl: 'onRender',
      lexicalCapture: [objA, objB, objC],
      watch: [
        [objA, 'mode'],
        [objC, 'c'],
      ],
    onWatch123: {
      qrl: 'onWatchQRL',
      lexicalCapture: [objA, objB, objC],
      watch: [
        [objA, 'mode'],
        [objC, 'c'],
      ]
    },
    }
  },
  'objValues': {
    objA: {
      value: {mode: true},
      refCount: 3,
      notify: {
        onWatch123: ['mode']
        el123: ['mode'],
      },
    },
    objB: { 
      value: {mode: true},
      refCount: 2,
      notify: {}
    }
    objC: {
      value: {mode: true},
      refCount: 3,
      notify: {
        onWatch123: ['c'],
        el123: ['c']
      }
    }
  },
}

  'obk=js': {
    objA: {
        value: {mode: true},
        subs: [
            el123: ['mode']
        ]
    },
    objB: {
        value: {mode: true},
        subs: [
            el123: ['mode']
        ]
    },
    objC: {
        value: {mode: true},
        subs: [
            el123: ['mode']
        ]
    },

---

<div>
  <button q:obj="objA, objB, objC"
    on:click="./chunk#symbol[0,2]"
    on:dblclick="./chunk#symbol[0,1]"
          >+</button>
</div>

buttonElem['q:obj'] = [objA, objB, objC]

<button on:click={() => {}}>

addEvent() {
qURLWrite() keeps in memory
addEventListener()
}