<script>  let count = 0;  const handleClick = () => {    count += 1;   }</script><div>  count: {count}  <button on:click={handleClick}>inc</button></div>

<div class="block">a block</div><button class="toggle-button">toggle block</button><script>const block = document.querySelector('.block');const toggleButton = document.querySelector('.toggle-button');let blockVisible = true;toggleButton.addEventListener('click', () => {  blockVisible = !blockVisible;  block.style.display = blockVisible ? 'block' : 'none';  });</script>

<template>    <div v-if="blockVisible">a block</div>    <button @click="handleClick">toggle block</button></template>
<script setup>  const blockVisible = ref(true);  const handleClick = () => {    blockVisible.value = !blockVisible.value;  }</script>

<div class="todo-list">  <div>    new item 1    <button>X</button>  </div>  <div>    new item 2    <button>X</button>  </div></div><button>add item</button>
<script>    const todoList = document.querySelector('.todo-list');    const addButton = document.querySelector('button');        addButton.addEventListener('click', () => {      const todoItem = document.createElement('div');      const deleteButton = document.createElement('button');      todoItem.appendChild(deleteButton);      todoItem.innerText = 'new item';      todoList.appendChild(todoItem);    });</script>

<div class="todo-list"></div><button>add item</button>
<script>    class TodoItem {      constructor(content) {          const todoItem = document.createElement('div');          const deleteButton = document.createElement('button');          todoItem.appendChild(deleteButton);          todoItem.innerText = content;          this.dom = todoItem;      }      appendTo(parent) {          return parent.appendChild(this.dom);      }    }     const todoList = document.querySelector('.todo-list');    const addButton = document.querySelector('button');        new TodoItem('new item 1').appendTo(todoList);    new TodoItem('new item 2').appendTo(todoList);
    addButton.addEventListener('click', () => {      new TodoItem().appendTo(todoList);    });</script>

<template>  <div>    new item    <button>delete</button>  </div></template>

<div class="todo-list">  <todo-item v-for="item in todoItems" /></div><button @click="handleClick">add item</button>
<script setup>    import TodoItem from './todo-item.Vue';    const todoItems = [];    const handleClick = () => {      todoItems.push({});    };</script>

interface IUIOperations {  createElement(type: ElementType): Element;  removeElement(ele: Element);  updateElement(ele: Element);  setProperty(ele: Element, propName: string; propValue: string);  removeProperty(...}

class DOMUIOperations implements IUIOperations {  createElement(type: ElementType): Element {    return new DOMElement(document.createElement(type.getName()));  }  removeElement(ele: Element) {    ...  }  updateElement(ele: Element)  ...
}

class NativeUIOperations implements IUIOperations {  createElement(type: ElementType): Element {    const nativeHandle = xxos.createComponent(type.getName());    return new NativeElement(      nativeHandle    );  }  removeElement(ele: Element) {    ...  }  updateElement(ele: Element)  ...
}

<div></div><button>reverse</button>
<script>  const div = document.querySelector('div');  const button = document.querySelector('button');  let msg = 'hello, world';  div.innerText = msg;  button.addEventListener('click', () => {      msg = msg.split('').reverse().join('');      div.innerText = msg;  });</script>

<div>  {msg}</div><button on:click="handleClick">reverse</button>
<script>  let msg = 'hello, world';  const handleClick = () => {      msg = msg.split('').reverse().join('');  };</script>