moved init

kondaurovDev · kondaurovDev · commit 6e2df8d31c12 · 2024-12-22T19:48:37.000+04:00
diff --git a/docs/telegram-bot-playground/index.html b/docs/telegram-bot-playground/index.html
@@ -12,46 +12,24 @@
   <link rel="stylesheet" href="styles.css?v=oq5lin">
 </head>
 
-<body
-  x-data="{
+<body x-data="{
     selected_example: 'empty.ts',
     botUpdates: [],
     botState: {
       name: 'nameless',
       status: 'idle',
       token: ''
     }
-  }" 
-  x-init="
-    await playground.start();
-    playground.onCodeChange(() => {
-      playground.runBot(botState);
-    });
-    playground.worker.onmessage = (e) => {
-      console.log('got message from worker', e?.data);
-      if (!e?.data) return;
-      if (e.data.botState) {
-        Object.assign(botState, e.data.botState)
-      }
-      botUpdates.push(e.data);
-      console.log('Scrolling', $refs.updates.scrollHeight);
-      $nextTick(() => { $refs.updates.scrollTop = $refs.updates.scrollHeight })
-    };
-  "
->
+  }">
 
   <h1>Telegram Bot Playground 🤖 </h1>
 
   <div style="display: flex; gap: 20px; justify-content: center;">
-    
+
     <label>
       Bot token
-      <input 
-        type="text"
-        x-model="botState.token"
-        placeholder="your token"
-        @input.debounce.500ms="playground.checkToken(botState)"
-      >
+      <input type="text" x-model="botState.token" placeholder="your token"
+        @input.debounce.500ms="playground.checkToken(botState)">
     </label>
 
     <label>Bot name: <span x-text="botState.name"></span></label>
@@ -62,33 +40,43 @@ <h1>Telegram Bot Playground 🤖 </h1>
   <div style="display: flex; align-items: start;">
     <label>
       Select example
-      <select 
-      
-      x-model="selected_example" 
-      @change="playground.loadExample(selected_example)"
-    >
-      <option value="empty.ts">Empty</option>
-      <option value="command.ts">Command Bot</option>
-      <option value="file.ts">File Bot</option>
-    </select>
+      <select x-model="selected_example" @change="playground.loadExample(selected_example)">
+        <option value="empty.ts">Empty</option>
+        <option value="command.ts">Command Bot</option>
+        <option value="file.ts">File Bot</option>
+      </select>
     </label>
 
   </div>
 
   <div class="flex-container">
     <div id="container" x-cloak></div>
-    <div 
-      id="worker-updates"
-      x-ref="updates"
-    >
-      <template 
-        x-for="update in botUpdates" :key="update.id"
-      >
+    <div id="worker-updates" x-ref="updates">
+      <template x-for="update in botUpdates" :key="update.id">
         <div x-text="JSON.stringify(update, undefined, 2)"></div>
       </template>
     </div>
   </div>
 
+  <script>
+    document.addEventListener('alpine:initialized', async () => {
+      await playground.start();
+      playground.onCodeChange(() => {
+        playground.runBot(botState);
+      });
+      playground.worker.onmessage = (e) => {
+        console.log('got message from worker', e?.data);
+        if (!e?.data) return;
+        if (e.data.botState) {
+          Object.assign(botState, e.data.botState)
+        }
+        botUpdates.push(e.data);
+        console.log('Scrolling', $refs.updates.scrollHeight);
+        $nextTick(() => { $refs.updates.scrollTop = $refs.updates.scrollHeight })
+      };
+    })
+  </script>
+
 </body>
 
 </html>
