From 6ee53e7d5ba1ebdfd6796d79abdabce01ff093cc Mon Sep 17 00:00:00 2001
From: Alexander <kondaurov.dev@gmail.com>
Date: Mon, 23 Dec 2024 15:13:46 +0400
Subject: [PATCH] refactor

---
 docs/telegram-bot-playground/index.html       |  49 +---
 docs/telegram-bot-playground/metadata.json    |   5 +-
 docs/telegram-bot-playground/scripts/_main.js | 258 ++++++++++++++++++
 docs/telegram-bot-playground/scripts/init.js  |  31 ---
 docs/telegram-bot-playground/scripts/main.js  | 148 ----------
 .../scripts/{ => worker}/web-worker.js        | 112 ++++----
 scripts/prep-page.js                          |   5 +-
 src/globals.d.ts                              |  14 -
 src/tg-bot-playground/_main.ts                |  75 +++++
 src/tg-bot-playground/bot-launcher/_main.ts   |  22 ++
 src/tg-bot-playground/bot-launcher/load.ts    |  14 +
 src/tg-bot-playground/bot-launcher/run.ts     |  49 ++++
 src/tg-bot-playground/editor/_editor.ts       |  51 ++++
 src/tg-bot-playground/editor/init.ts          |  38 +++
 src/tg-bot-playground/editor/setup.ts         |  26 ++
 src/tg-bot-playground/editor/ts-text-model.ts |  69 +++++
 src/tg-bot-playground/init.ts                 |  40 ---
 src/tg-bot-playground/main.ts                 | 130 ---------
 src/tg-bot-playground/types.ts                |  15 +
 src/tg-bot-playground/utils.ts                | 100 +------
 src/tg-bot-playground/web-worker.ts           |  82 ------
 src/tg-bot-playground/worker/handler.ts       |  77 ++++++
 src/tg-bot-playground/worker/utils.ts         |  26 ++
 src/tg-bot-playground/worker/web-worker.ts    |  10 +
 tsup.config.json                              |   5 +-
 25 files changed, 820 insertions(+), 631 deletions(-)
 create mode 100644 docs/telegram-bot-playground/scripts/_main.js
 delete mode 100644 docs/telegram-bot-playground/scripts/init.js
 delete mode 100644 docs/telegram-bot-playground/scripts/main.js
 rename docs/telegram-bot-playground/scripts/{ => worker}/web-worker.js (98%)
 delete mode 100644 src/globals.d.ts
 create mode 100644 src/tg-bot-playground/_main.ts
 create mode 100644 src/tg-bot-playground/bot-launcher/_main.ts
 create mode 100644 src/tg-bot-playground/bot-launcher/load.ts
 create mode 100644 src/tg-bot-playground/bot-launcher/run.ts
 create mode 100644 src/tg-bot-playground/editor/_editor.ts
 create mode 100644 src/tg-bot-playground/editor/init.ts
 create mode 100644 src/tg-bot-playground/editor/setup.ts
 create mode 100644 src/tg-bot-playground/editor/ts-text-model.ts
 delete mode 100644 src/tg-bot-playground/init.ts
 delete mode 100644 src/tg-bot-playground/main.ts
 delete mode 100644 src/tg-bot-playground/web-worker.ts
 create mode 100644 src/tg-bot-playground/worker/handler.ts
 create mode 100644 src/tg-bot-playground/worker/utils.ts
 create mode 100644 src/tg-bot-playground/worker/web-worker.ts

diff --git a/docs/telegram-bot-playground/index.html b/docs/telegram-bot-playground/index.html
index d28280e..70c1f5a 100644
--- a/docs/telegram-bot-playground/index.html
+++ b/docs/telegram-bot-playground/index.html
@@ -5,43 +5,17 @@
   <title>Telegram Bot Playground</title>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <script defer src="https://cdn.jsdelivr.net/npm/@monaco-editor/loader@1.4.0/lib/umd/monaco-loader.min.js"></script>
-  <script defer src="./scripts/init.js?v=60sdgc" type="module"></script>
-  <script defer src="./scripts/main.js?v=bgip" type="module"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
   <link rel="stylesheet" href="styles.css?v=oq5lin">
 
   <link rel="icon" type="image/png" sizes="32x32" href="./favicon.ico">
 
-  <script>
-    document.addEventListener('playgroundInitialized', 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>
+  <script defer src="./scripts/_main.js?v=e7gy8f" type="module"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+
 </head>
 
-<body x-data="{
-    selected_example: 'empty.ts',
-    botUpdates: [],
-    botState: {
-      name: 'nameless',
-      status: 'idle',
-      token: ''
-    }
-  }">
+<body x-data="state">
 
   <h1>Telegram Bot Playground 🤖 </h1>
 
@@ -49,19 +23,22 @@ <h1>Telegram Bot Playground 🤖 </h1>
 
     <label>
       Bot token
-      <input type="text" x-model="botState.token" placeholder="your token"
-        @input.debounce.500ms="playground.checkToken(botState)">
+      <input type="text" x-model="$store.state.bot.token" placeholder="your token"
+        @input.debounce.500ms="$dispatch('check-token')">
     </label>
 
-    <label>Bot name: <span x-text="botState.name"></span></label>
-    <label>Status: <span x-text="botState.status"></span></label>
+    <label>Bot name: <span x-text="$store.state.bot.name"></span></label>
+    <label>Status: <span x-text="$store.state.bot.status"></span></label>
 
   </div>
 
   <div style="display: flex; align-items: start;">
     <label>
       Select example
-      <select x-model="selected_example" @change="playground.loadExample(selected_example)">
+      <select 
+        x-model="$store.state.selectedExample"
+        @change="$dispatch('change-example')"
+      >
         <option value="empty.ts">Empty</option>
         <option value="command.ts">Command Bot</option>
         <option value="file.ts">File Bot</option>
@@ -73,7 +50,7 @@ <h1>Telegram Bot Playground 🤖 </h1>
   <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">
+      <template x-for="update in $store.state.botUpdates" :key="update.messageId">
         <div x-text="JSON.stringify(update, undefined, 2)"></div>
       </template>
     </div>
diff --git a/docs/telegram-bot-playground/metadata.json b/docs/telegram-bot-playground/metadata.json
index 473bcf0..735b5eb 100644
--- a/docs/telegram-bot-playground/metadata.json
+++ b/docs/telegram-bot-playground/metadata.json
@@ -1,6 +1,5 @@
 {
   "styles.css": "oq5lin",
-  "init.js": "60sdgc",
-  "main.js": "bgip",
-  "web-worker.js": "7hqmn5"
+  "_main.js": "e7gy8f",
+  "web-worker.js": "f5lxb1"
 }
\ No newline at end of file
diff --git a/docs/telegram-bot-playground/scripts/_main.js b/docs/telegram-bot-playground/scripts/_main.js
new file mode 100644
index 0000000..334359b
--- /dev/null
+++ b/docs/telegram-bot-playground/scripts/_main.js
@@ -0,0 +1,258 @@
+// src/tg-bot-playground/bot-launcher/load.ts
+async function loadWorker() {
+  const version = await fetch("./metadata.json", { cache: "no-cache" }).then((_) => _.json()).then((_) => _["web-worker.js"]);
+  if (!version) {
+    console.warn("Cannot get version from metadata");
+    return;
+  }
+  ;
+  const worker = new Worker(`./scripts/worker/web-worker.js?v=${version}`, { type: "module" });
+  console.log("web worker has been loaded");
+  return worker;
+}
+
+// src/tg-bot-playground/bot-launcher/run.ts
+var makeRunnableBot = (tsTextModel, worker) => (state) => tsTextModel.getJsCode().then((code) => {
+  if (!state.bot.token || state.bot.token.length < 10) return;
+  if (!code.serialized) {
+    console.warn("Serizalized js code not defined");
+    return;
+  }
+  worker.postMessage({
+    command: "run-bot",
+    token: state.bot.token,
+    code: code.serialized
+  });
+  state.bot.status = "active";
+}).catch((error) => {
+  console.warn("cannot run bot", error);
+});
+var checkTokenAndRun = (state, runnableBot) => {
+  const token = state.bot.token;
+  if (!token) return;
+  fetch(`https://api.telegram.org/bot${token}/getMe`).then((_) => _.json()).then((info) => {
+    if (info.ok) {
+      state.bot.name = info.result.first_name;
+      console.log("Running bot");
+      runnableBot(state);
+    } else {
+      state.bot.name = "nameless";
+    }
+  }).catch((error) => {
+    console.warn("check token error", error);
+  });
+};
+
+// src/tg-bot-playground/bot-launcher/_main.ts
+var makeBotLauncher = async (tsTextModel) => {
+  const worker = await loadWorker();
+  if (!worker) return;
+  const runnableBot = makeRunnableBot(tsTextModel, worker);
+  return {
+    worker,
+    runBot: (state) => runnableBot(state),
+    checkTokenAndRun: (state) => checkTokenAndRun(state, runnableBot)
+  };
+};
+
+// src/tg-bot-playground/utils.ts
+var fetchText = (path) => fetch(path).then((_) => _.text());
+var getMonacoLoader = () => {
+  if (!("monaco_loader" in window) || typeof window.monaco_loader != "object" || window.monaco_loader == null) {
+    console.warn("monaco loader is not available");
+    return;
+  }
+  return window.monaco_loader;
+};
+function getAlpine() {
+  if (!("Alpine" in window) || typeof window.Alpine != "object" || window.Alpine == null) {
+    console.warn("Alpine is not available");
+    return;
+  }
+  return window.Alpine;
+}
+
+// src/tg-bot-playground/editor/setup.ts
+var setupDts = async (monaco) => {
+  const dts = await fetchText("https://cdn.jsdelivr.net/npm/@effect-ak/tg-bot-client@0.2.2/dist/index.d.ts");
+  monaco.languages.typescript.typescriptDefaults.setExtraLibs([
+    {
+      content: dts,
+      filePath: "node_modules/@effect-ak/tg-bot-client/index.d.ts"
+    }
+  ]);
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    typeRoots: [
+      "node_modules"
+    ],
+    strict: true
+  });
+};
+
+// src/tg-bot-playground/editor/ts-text-model.ts
+var makeTsTextModel = async (monaco) => {
+  const emptyExample = await fetchText("./example/empty.ts");
+  const tsModel = monaco.editor.createModel(emptyExample, "typescript");
+  let cachedWorkerPromise = null;
+  const getTsCode = async () => {
+    if (!cachedWorkerPromise) {
+      cachedWorkerPromise = (async () => {
+        const tsWorker = await monaco.languages.typescript.getTypeScriptWorker();
+        return tsWorker(tsModel.uri);
+      })();
+    }
+    return cachedWorkerPromise.then((_) => _.getEmitOutput(tsModel.uri.toString()));
+  };
+  return {
+    tsModel,
+    getJsCode: async () => {
+      const output = await getTsCode();
+      const code = output.outputFiles[0].text;
+      const defaultExport = await getDefaultExport(code);
+      return {
+        defaultExport,
+        serialized: serialize(defaultExport?.default)
+      };
+    }
+  };
+};
+async function getDefaultExport(code) {
+  try {
+    const encodedCode = encodeURIComponent(code);
+    const module = await import(`data:text/javascript,${encodedCode}`);
+    const result = module.default;
+    return { default: result };
+  } catch (e) {
+    console.warn("get default error", e);
+    return void 0;
+  }
+}
+var serialize = (input) => {
+  if (typeof input != "object" || !input) {
+    return void 0;
+  }
+  const result = [];
+  for (const [key, value] of Object.entries(input)) {
+    if (typeof value != "function") {
+      continue;
+    }
+    result.push([key, value.toString()]);
+  }
+  return JSON.stringify(Object.fromEntries(result));
+};
+
+// src/tg-bot-playground/editor/init.ts
+var initEditor = async (loader) => {
+  const container = document.getElementById("container");
+  if (!container) {
+    console.warn("container not found");
+    return;
+  }
+  loader.config({
+    paths: {
+      vs: "https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs"
+    }
+  });
+  const monaco = await loader.init();
+  const tsTextModel = await makeTsTextModel(monaco);
+  const editor = monaco.editor.create(container, {
+    model: tsTextModel.tsModel,
+    contextmenu: false,
+    minimap: {
+      enabled: false
+    }
+  });
+  return {
+    tsTextModel,
+    editor,
+    monaco
+  };
+};
+
+// src/tg-bot-playground/editor/_editor.ts
+var makeEditor = async (state) => {
+  const loader = getMonacoLoader();
+  if (!loader) return;
+  const editor = await initEditor(loader);
+  if (!editor) return;
+  await setupDts(editor.monaco);
+  return {
+    tsTextModel: editor.tsTextModel,
+    loadExample: () => {
+      if (!state.selectedExample) return;
+      fetchText(`./example/${state.selectedExample}`).then((_) => editor.tsTextModel.tsModel.setValue(_));
+    },
+    onCodeChange: (f) => {
+      let timeoutId;
+      const debounceDelay = 1e3;
+      editor.tsTextModel.tsModel.onDidChangeContent(() => {
+        if (timeoutId !== void 0) {
+          clearTimeout(timeoutId);
+        }
+        timeoutId = window.setTimeout(() => {
+          const markers = editor.monaco.editor.getModelMarkers({
+            resource: editor.tsTextModel.tsModel.uri
+          });
+          const hasError = markers.find((_) => _.severity.valueOf() == 8) != null;
+          if (!hasError) {
+            f();
+          } else {
+            console.debug("Code contains errors");
+          }
+        }, debounceDelay);
+      });
+    }
+  };
+};
+
+// src/tg-bot-playground/_main.ts
+var makeGlobalState = (alpine) => {
+  const state = alpine.reactive({
+    bot: {
+      name: "nameless",
+      status: "idle",
+      token: ""
+    },
+    selectedExample: "empty.ts",
+    botUpdates: []
+  });
+  return state;
+};
+document.addEventListener("alpine:init", async () => {
+  const Alpine = getAlpine();
+  if (!Alpine) return;
+  Alpine.data("state", () => ({
+    bot: {
+      a: 1
+    }
+  }));
+  const state = makeGlobalState(Alpine);
+  Alpine.store("state", state);
+  const editor = await makeEditor(state);
+  if (!editor) return;
+  const botLauncher = await makeBotLauncher(editor.tsTextModel);
+  if (!botLauncher) return;
+  editor.onCodeChange(() => {
+    botLauncher.runBot(state);
+  });
+  document.addEventListener("check-token", () => {
+    botLauncher.checkTokenAndRun(state);
+  });
+  document.addEventListener("change-example", () => {
+    editor.loadExample();
+  });
+  botLauncher.worker.onmessage = (event) => {
+    const data = event.data;
+    console.log("got message from worker", data);
+    if (!data) return;
+    if (data.botState) {
+      Object.assign(state.bot, data.botState);
+    }
+    state.botUpdates.push(data);
+  };
+});
+export {
+  makeGlobalState
+};
diff --git a/docs/telegram-bot-playground/scripts/init.js b/docs/telegram-bot-playground/scripts/init.js
deleted file mode 100644
index 2b29f30..0000000
--- a/docs/telegram-bot-playground/scripts/init.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// src/tg-bot-playground/init.ts
-window.playground = {};
-console.log("initiating...");
-var version = await fetch("./metadata.json", { cache: "no-cache" }).then((_) => _.json()).then((_) => _["web-worker.js"]);
-if (version) {
-  const worker = new Worker(`./scripts/web-worker.js?v=${version}`, { type: "module" });
-  window.playground.worker = worker;
-  console.log("web worker has been loaded");
-  document.dispatchEvent(new Event("playgroundInitialized"));
-} else {
-  console.warn("web worker not initiated");
-}
-setFavicon("\u{1F916}");
-function setFavicon(emoji) {
-  const canvas = document.createElement("canvas");
-  canvas.width = 64;
-  canvas.height = 64;
-  const ctx = canvas.getContext("2d");
-  if (ctx) {
-    ctx.font = "64px serif";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(emoji, canvas.width / 2, canvas.height / 2);
-  }
-  const link = document.createElement("link");
-  link.rel = "icon";
-  link.href = canvas.toDataURL("image/png");
-  const existingIcons = document.querySelectorAll('link[rel="icon"]');
-  existingIcons.forEach((icon) => icon.parentNode?.removeChild(icon));
-  document.head.appendChild(link);
-}
diff --git a/docs/telegram-bot-playground/scripts/main.js b/docs/telegram-bot-playground/scripts/main.js
deleted file mode 100644
index e6f10d8..0000000
--- a/docs/telegram-bot-playground/scripts/main.js
+++ /dev/null
@@ -1,148 +0,0 @@
-// src/tg-bot-playground/utils.ts
-async function getDefaultExport(code) {
-  try {
-    const encodedCode = encodeURIComponent(code);
-    const module = await import(`data:text/javascript,${encodedCode}`);
-    const result = module.default;
-    return { default: result };
-  } catch (e) {
-    console.warn("get default error", e);
-    return void 0;
-  }
-}
-var getJsCode = async () => {
-  const tsModelUri = window.playground.tsModel?.uri;
-  if (!tsModelUri) {
-    console.warn("tsModel uri not defined");
-    return;
-  }
-  const worker = await window.monaco.languages.typescript.getTypeScriptWorker();
-  const modelWorker = await worker(tsModelUri);
-  const output = await modelWorker.getEmitOutput(tsModelUri.toString());
-  const code = output.outputFiles[0].text;
-  const result = await getDefaultExport(code);
-  return serialize(result?.default);
-};
-var fetchText = (path) => fetch(path).then((_) => _.text());
-var setupDts = async (monaco) => {
-  const dts = await fetchText("https://cdn.jsdelivr.net/npm/@effect-ak/tg-bot-client@0.2.2/dist/index.d.ts");
-  monaco.languages.typescript.typescriptDefaults.setExtraLibs([
-    {
-      content: dts,
-      filePath: "node_modules/@effect-ak/tg-bot-client/index.d.ts"
-    }
-  ]);
-  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-    ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
-    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-    typeRoots: [
-      "node_modules"
-    ],
-    strict: true
-  });
-};
-var serialize = (input) => {
-  if (typeof input != "object" || !input) {
-    return void 0;
-  }
-  const result = [];
-  for (const [key, value] of Object.entries(input)) {
-    if (typeof value != "function") {
-      continue;
-    }
-    result.push([key, value.toString()]);
-  }
-  return JSON.stringify(Object.fromEntries(result));
-};
-
-// src/tg-bot-playground/main.ts
-console.log("loading main");
-window.playground.start = () => {
-  const container = document.getElementById("container");
-  if (!container) {
-    return console.error("container not found");
-  }
-  window.monaco_loader.config({
-    paths: {
-      vs: "https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs"
-    }
-  });
-  return Promise.all([
-    window.monaco_loader.init(),
-    fetchText("./example/empty.ts")
-  ]).then(([monaco, emptyExample]) => {
-    window.playground.tsModel = monaco.editor.createModel(emptyExample, "typescript");
-    setupDts(monaco);
-    window.playground.editor = monaco.editor.create(container, {
-      model: window.playground.tsModel,
-      contextmenu: false,
-      minimap: {
-        enabled: false
-      }
-    });
-  }).catch((error) => console.warn("init error", error));
-};
-window.playground.loadExample = (name) => {
-  if (!name) return;
-  fetchText(`./example/${name}`).then((_) => window.playground.editor?.setValue(_)).catch((error) => {
-    console.error("Cannot load example", error);
-  });
-};
-window.playground.runBot = (state) => {
-  const token = state.token;
-  if (!token) return;
-  getJsCode().then((code) => {
-    if (!code) {
-      console.warn("Js Code not defined");
-      return;
-    }
-    window.playground.worker?.postMessage({
-      command: "run-bot",
-      token,
-      code
-    });
-    state.status = "active";
-  }).catch((error) => {
-    console.warn("cannot run bot", error);
-  });
-};
-window.playground.checkToken = (state) => {
-  const token = state.token;
-  if (!token) return;
-  fetch(`https://api.telegram.org/bot${token}/getMe`).then((_) => _.json()).then((info) => {
-    if (info.ok) {
-      state.name = info.result.first_name;
-      if (window.playground.runBot) {
-        console.log("Running bot");
-        window.playground.runBot(state);
-      }
-    } else {
-      state.name = "nameless";
-    }
-  }).catch((error) => {
-    console.warn("check token error", error);
-  });
-};
-window.playground.onCodeChange = (f) => {
-  let timeoutId;
-  const debounceDelay = 1e3;
-  const editor = window.playground.editor;
-  if (!editor) {
-    console.warn("Cannot attach onDidChangeModel");
-    return;
-  }
-  editor.onDidChangeModelContent(() => {
-    if (timeoutId !== void 0) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = window.setTimeout(() => {
-      const model = window.playground.tsModel;
-      if (model) {
-        const markers = window.monaco.editor.getModelMarkers({ resource: model.uri });
-        if (!markers.find((_) => _.severity.valueOf() == 8)) {
-          f();
-        }
-      }
-    }, debounceDelay);
-  });
-};
diff --git a/docs/telegram-bot-playground/scripts/web-worker.js b/docs/telegram-bot-playground/scripts/worker/web-worker.js
similarity index 98%
rename from docs/telegram-bot-playground/scripts/web-worker.js
rename to docs/telegram-bot-playground/scripts/worker/web-worker.js
index 1e02134..7c0e6e3 100644
--- a/docs/telegram-bot-playground/scripts/web-worker.js
+++ b/docs/telegram-bot-playground/scripts/worker/web-worker.js
@@ -3573,13 +3573,13 @@ var fetchUpdates = ({ state, settings, execute: execute2, handlers }) => gen(fun
       hasError = true;
       break;
     }
-    const handler = handlers[`on_${update.type}`];
-    if (!handler) {
+    const handler2 = handlers[`on_${update.type}`];
+    if (!handler2) {
       console.warn("Handler for update not defined", update);
       hasError = true;
       break;
     }
-    const handleResult = handler(update);
+    const handleResult = handler2(update);
     if ("chat" in update) {
       const response = yield* execute2(`send_${handleResult.type}`, {
         ...handleResult,
@@ -3734,7 +3734,10 @@ var BotFactoryServiceDefault = {
 };
 var runTgChatBot = (input) => BotFactoryServiceDefault.runBot(input).pipe(runPromise);
 
-// src/tg-bot-playground/utils.ts
+// src/tg-bot-playground/types.ts
+var isRunBot = (input) => typeof input == "object" && input != null && "command" in input && "token" in input && "code" in input;
+
+// src/tg-bot-playground/worker/utils.ts
 var parseJson = (input) => {
   try {
     return { parsed: JSON.parse(input) };
@@ -3745,7 +3748,7 @@ var parseJson = (input) => {
 var deserialize = (input) => {
   const result = [];
   const fields = parseJson(input);
-  if (typeof fields?.parsed != "object") return void 0;
+  if (typeof fields?.parsed != "object") return;
   for (const [k, v] of Object.entries(fields.parsed)) {
     try {
       const f = new Function(`return ${v}`)();
@@ -3757,59 +3760,64 @@ var deserialize = (input) => {
   return Object.fromEntries(result);
 };
 
-// src/tg-bot-playground/web-worker.ts
-console.log("loading worker...");
-var logId = 1;
-var notifyParent = (input) => {
-  self.postMessage({
-    id: logId++,
-    ...input
+// src/tg-bot-playground/worker/handler.ts
+var makeWorkerHandler = (notifyParent) => {
+  let messageId = 0;
+  let botInstance = void 0;
+  const sendEvent = (input) => notifyParent({
+    ...input,
+    messageId: messageId++
   });
-};
-var botInstance = void 0;
-self.onmessage = async (msg) => {
-  const command = msg.data;
-  if (typeof command != "object" || !command.command) {
-    notifyParent({
-      error: "object command expected"
-    });
-    return;
-  }
-  if (command.command == "run-bot") {
-    const handlers = deserialize(command.code);
-    if (botInstance) {
-      console.log("reloading...");
-      await botInstance.reload({
-        ...handlers
+  return async (command) => {
+    if (!isRunBot(command)) {
+      sendEvent({
+        error: "not a run bot command",
+        command
+      });
+      return;
+    }
+    if (command.command == "run-bot") {
+      const handlers = deserialize(command.code);
+      if (botInstance) {
+        console.log("reloading...");
+        await botInstance.reload({
+          ...handlers
+        });
+        sendEvent({
+          botState: {
+            status: "reloaded"
+          }
+        });
+        return;
+      }
+      botInstance = await runTgChatBot({
+        type: "config",
+        "bot-token": command.token,
+        ...handlers,
+        onExit: (exit2) => sendEvent({
+          success: "Bot's fiber has been shutdown",
+          exit: exit2,
+          botState: {
+            status: "stopped"
+          }
+        })
       });
-      notifyParent({
+      sendEvent({
+        success: "Bot's fiber has been created",
         botState: {
-          status: "reloaded"
+          status: "active"
         }
       });
       return;
     }
-    botInstance = await runTgChatBot({
-      type: "config",
-      "bot-token": command.token,
-      ...handlers,
-      onExit: (exit2) => notifyParent({
-        success: "Bot's fiber has been shutdown",
-        exit: exit2,
-        botState: {
-          status: "stopped"
-        }
-      })
-    });
-    notifyParent({
-      success: "Bot's fiber has been created",
-      botState: {
-        status: "active"
-      }
+    sendEvent({
+      error: "Unknown command"
     });
-    return;
-  }
-  notifyParent({
-    error: "Unknown command"
-  });
+  };
 };
+
+// src/tg-bot-playground/worker/web-worker.ts
+var handler = makeWorkerHandler(
+  (_) => self.postMessage(_)
+);
+self.onmessage = (msg) => handler(msg.data);
diff --git a/scripts/prep-page.js b/scripts/prep-page.js
index 227c6bb..f170049 100644
--- a/scripts/prep-page.js
+++ b/scripts/prep-page.js
@@ -4,9 +4,8 @@ import * as Path from "path"
 
 const files = [
   "styles.css",
-  "scripts/init.js",
-  "scripts/main.js",
-  "scripts/web-worker.js",
+  "scripts/_main.js",
+  "scripts/worker/web-worker.js",
 ];
 
 const indexPagePath = "./docs/telegram-bot-playground/index.html";
diff --git a/src/globals.d.ts b/src/globals.d.ts
deleted file mode 100644
index 9cd8534..0000000
--- a/src/globals.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-interface Window {
-  monaco: typeof import("monaco-editor")
-  monaco_loader: typeof import("@monaco-editor/loader").default
-  playground: {
-    worker?: Worker
-    tsModel?: import("monaco-editor").editor.ITextModel
-    start?: () => Promise<unknown> | void
-    editor?: import("monaco-editor").editor.IStandaloneCodeEditor
-    loadExample?: (name: string) => void
-    runBot?: (_: BotState) => void
-    checkToken?: (_: BotState) => void
-    onCodeChange?: (_: () => void) => void
-  }
-}
diff --git a/src/tg-bot-playground/_main.ts b/src/tg-bot-playground/_main.ts
new file mode 100644
index 0000000..2ccdeeb
--- /dev/null
+++ b/src/tg-bot-playground/_main.ts
@@ -0,0 +1,75 @@
+import { makeBotLauncher } from "#tg-bot-playground/bot-launcher/_main.js";
+import { makeEditor } from "#tg-bot-playground/editor/_editor.js";
+import { getAlpine } from "#tg-bot-playground/utils.js";
+import type { Alpine, BotState } from "./types.js";
+
+export type GlobalState = ReturnType<typeof makeGlobalState>;
+
+export const makeGlobalState = (
+  alpine: Alpine
+) => {
+
+  const state =
+    alpine.reactive({
+      bot: {
+        name: 'nameless',
+        status: 'idle',
+        token: ''
+      } as BotState,
+      selectedExample: "empty.ts",
+      botUpdates: [] as unknown[],
+    } as const)
+
+  return state
+
+}
+
+document.addEventListener('alpine:init', async () => {
+  const Alpine = getAlpine();
+
+  if (!Alpine) return;
+
+  Alpine.data("state", () => ({
+    bot: {
+      a: 1
+    }
+  }))
+
+  const state = makeGlobalState(Alpine);
+
+  Alpine.store("state", state);
+
+  const editor = await makeEditor(state);
+
+  if (!editor) return;
+
+  const botLauncher = await makeBotLauncher(editor.tsTextModel);
+
+  if (!botLauncher) return;
+
+  editor.onCodeChange(() => {
+    botLauncher.runBot(state);
+  });
+
+  document.addEventListener("check-token", () => {
+    botLauncher.checkTokenAndRun(state)
+  });
+
+  document.addEventListener("change-example", () => {
+    editor.loadExample()
+  });
+  
+  botLauncher.worker.onmessage = (event: MessageEvent) => {
+    const data = event.data
+    console.log('got message from worker', data);
+    if (!data) return;
+    if (data.botState) {
+      Object.assign(state.bot, data.botState)
+    }
+    state.botUpdates.push(data);
+    // console.log('Scrolling', $refs.updates.scrollHeight);
+    // $nextTick(() => { $refs.updates.scrollTop = $refs.updates.scrollHeight })
+  }
+
+})
+
diff --git a/src/tg-bot-playground/bot-launcher/_main.ts b/src/tg-bot-playground/bot-launcher/_main.ts
new file mode 100644
index 0000000..344dfd2
--- /dev/null
+++ b/src/tg-bot-playground/bot-launcher/_main.ts
@@ -0,0 +1,22 @@
+import type { GlobalState } from "#tg-bot-playground/_main.js";
+import type { TsTextModel } from "#tg-bot-playground/editor/ts-text-model.js";
+import { loadWorker } from "./load.js";
+import { checkTokenAndRun, makeRunnableBot } from "./run.js";
+
+export const makeBotLauncher = async (
+  tsTextModel: TsTextModel
+) => {
+  const worker = await loadWorker();
+
+  if (!worker) return;
+
+  const runnableBot =
+    makeRunnableBot(tsTextModel, worker);
+
+  return {
+    worker,
+    runBot: (state: GlobalState) => runnableBot(state),
+    checkTokenAndRun: (state: GlobalState) => checkTokenAndRun(state, runnableBot),
+  } as const;
+
+}
diff --git a/src/tg-bot-playground/bot-launcher/load.ts b/src/tg-bot-playground/bot-launcher/load.ts
new file mode 100644
index 0000000..74bc734
--- /dev/null
+++ b/src/tg-bot-playground/bot-launcher/load.ts
@@ -0,0 +1,14 @@
+export async function loadWorker() {
+  const version: string = await (
+    fetch("./metadata.json", { cache: "no-cache" }).then(_ => _.json()).then(_ => _["web-worker.js"])
+  );
+
+  if (!version) {
+    console.warn("Cannot get version from metadata");
+    return;
+  };
+
+  const worker = new Worker(`./scripts/worker/web-worker.js?v=${version}`, { type: "module" });
+  console.log("web worker has been loaded");
+  return worker;
+}
\ No newline at end of file
diff --git a/src/tg-bot-playground/bot-launcher/run.ts b/src/tg-bot-playground/bot-launcher/run.ts
new file mode 100644
index 0000000..2a134c8
--- /dev/null
+++ b/src/tg-bot-playground/bot-launcher/run.ts
@@ -0,0 +1,49 @@
+import type { GlobalState } from "#tg-bot-playground/_main.js";
+import type { TsTextModel } from "#tg-bot-playground/editor/ts-text-model.js";
+
+export type RunnableBot = (ReturnType<typeof makeRunnableBot>)
+export const makeRunnableBot =
+  (tsTextModel: TsTextModel, worker: Worker) =>
+    (state: GlobalState) =>
+      tsTextModel.getJsCode().then(code => {
+
+        if (!state.bot.token || state.bot.token.length < 10) return;
+
+        if (!code.serialized) {
+          console.warn("Serizalized js code not defined");
+          return;
+        }
+
+        worker.postMessage({
+          command: 'run-bot',
+          token: state.bot.token,
+          code: code.serialized
+        });
+  
+        state.bot.status = "active"
+      }).catch(error => {
+        console.warn("cannot run bot", error)
+      })
+
+export const checkTokenAndRun =
+  (state: GlobalState, runnableBot: RunnableBot) => {
+
+    const token = state.bot.token;
+
+    if (!token) return;
+
+    fetch(`https://api.telegram.org/bot${token}/getMe`)
+      .then(_ => _.json())
+      .then(info => {
+        if (info.ok) {
+          state.bot.name = info.result.first_name;
+          console.log("Running bot")
+          runnableBot(state);
+        } else {
+          state.bot.name = "nameless";
+        }
+      }).catch(error => {
+        console.warn("check token error", error)
+      });
+
+  }
diff --git a/src/tg-bot-playground/editor/_editor.ts b/src/tg-bot-playground/editor/_editor.ts
new file mode 100644
index 0000000..5b6d7c5
--- /dev/null
+++ b/src/tg-bot-playground/editor/_editor.ts
@@ -0,0 +1,51 @@
+import { fetchText, getMonacoLoader } from "#tg-bot-playground/utils.js";
+import { setupDts } from "./setup.js";
+import { initEditor } from "./init.js";
+import type { GlobalState } from "#tg-bot-playground/_main.js";
+
+export const makeEditor = async (
+  state: GlobalState
+) => {
+
+  const loader = getMonacoLoader();
+
+  if (!loader) return;
+
+  const editor = await initEditor(loader);
+
+  if (!editor) return;
+
+  await setupDts(editor.monaco);
+
+  return {
+    tsTextModel: editor.tsTextModel,
+    loadExample: () => {
+      if (!state.selectedExample) return;
+      fetchText(`./example/${state.selectedExample}`)
+        .then(_ => editor.tsTextModel.tsModel.setValue(_))
+    },
+    onCodeChange: (
+      f: () => void
+    ) => {
+      let timeoutId: number | undefined;
+      const debounceDelay = 1000;
+
+      editor.tsTextModel.tsModel.onDidChangeContent(() => {
+        if (timeoutId !== undefined) {
+          clearTimeout(timeoutId);
+        }
+
+        timeoutId = window.setTimeout(() => {
+            const markers = editor.monaco.editor.getModelMarkers({ 
+              resource: editor.tsTextModel.tsModel.uri 
+            });
+            const hasError = markers.find(_ => _.severity.valueOf() == 8) != null;
+            if (!hasError) { f() } else {
+              console.debug("Code contains errors")
+            }
+        }, debounceDelay);
+      });
+    }
+  } as const;
+
+}
diff --git a/src/tg-bot-playground/editor/init.ts b/src/tg-bot-playground/editor/init.ts
new file mode 100644
index 0000000..12dcefb
--- /dev/null
+++ b/src/tg-bot-playground/editor/init.ts
@@ -0,0 +1,38 @@
+import type { MonacoLoader } from "#tg-bot-playground/types.js";
+import { makeTsTextModel } from "./ts-text-model.js";
+
+export const initEditor = async (
+  loader: MonacoLoader
+) => {
+
+  const container = document.getElementById('container');
+
+  if (!container) {
+    console.warn("container not found");
+    return;
+  }
+
+  loader.config({
+    paths: {
+      vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs'
+    }
+  });
+
+  const monaco = await loader.init();
+
+  const tsTextModel = await makeTsTextModel(monaco);
+
+  const editor =
+    monaco.editor.create(container, {
+      model: tsTextModel.tsModel,
+      contextmenu: false,
+      minimap: {
+        enabled: false
+      },
+    });
+
+  return {
+    tsTextModel, editor, monaco
+  } as const;
+
+}
diff --git a/src/tg-bot-playground/editor/setup.ts b/src/tg-bot-playground/editor/setup.ts
new file mode 100644
index 0000000..a34d48a
--- /dev/null
+++ b/src/tg-bot-playground/editor/setup.ts
@@ -0,0 +1,26 @@
+import type { Monaco } from "@monaco-editor/loader";
+import { fetchText } from "#tg-bot-playground/utils.js";
+
+export const setupDts = async (
+  monaco: Monaco
+) => {
+
+  const dts = await fetchText("https://cdn.jsdelivr.net/npm/@effect-ak/tg-bot-client@0.2.2/dist/index.d.ts");
+
+  monaco.languages.typescript.typescriptDefaults.setExtraLibs([
+    {
+      content: dts,
+      filePath: "node_modules/@effect-ak/tg-bot-client/index.d.ts",
+    }
+  ]);
+
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    typeRoots: [
+      "node_modules"
+    ],
+    strict: true
+  });
+
+}
\ No newline at end of file
diff --git a/src/tg-bot-playground/editor/ts-text-model.ts b/src/tg-bot-playground/editor/ts-text-model.ts
new file mode 100644
index 0000000..1f33edd
--- /dev/null
+++ b/src/tg-bot-playground/editor/ts-text-model.ts
@@ -0,0 +1,69 @@
+import { Monaco } from "#tg-bot-playground/types.js";
+import { fetchText } from "#tg-bot-playground/utils.js";
+import type { languages } from "monaco-editor";
+
+export type TsTextModel = Awaited<ReturnType<typeof makeTsTextModel>>
+
+export const makeTsTextModel =
+  async (monaco: Monaco) => {
+
+    const emptyExample = await fetchText("./example/empty.ts");
+
+    const tsModel =
+      monaco.editor.createModel(emptyExample, 'typescript');
+
+    let cachedWorkerPromise: Promise<languages.typescript.TypeScriptWorker> | null = null;
+
+    const getTsCode = async () => {
+      if (!cachedWorkerPromise) {
+        cachedWorkerPromise = (async () => {
+          const tsWorker = await monaco.languages.typescript.getTypeScriptWorker();
+          return tsWorker(tsModel.uri);
+        })();
+      }
+      return cachedWorkerPromise.then(_ => _.getEmitOutput(tsModel.uri.toString()));
+    }
+
+    return {
+      tsModel,
+      getJsCode: async () => {
+        const output = await getTsCode();
+        const code = output.outputFiles[0].text;
+        const defaultExport = await getDefaultExport(code);
+        return {
+          defaultExport,
+          serialized: serialize(defaultExport?.default)
+        } as const;
+      }
+    } as const
+
+  }
+
+async function getDefaultExport<D>(code: string) {
+  try {
+    const encodedCode = encodeURIComponent(code);
+    const module = await import(`data:text/javascript,${encodedCode}`);
+    const result = module.default;
+    return { default: result as D };
+  } catch (e) {
+    console.warn("get default error", e);
+    return undefined;
+  }
+
+}
+
+const serialize = (input: unknown) => {
+  if (typeof input != "object" || !input) {
+    return undefined;
+  }
+  const result = [] as [string, string][];
+
+  for (const [key, value] of Object.entries(input)) {
+    if (typeof value != "function") {
+      continue;
+    }
+    result.push([key, value.toString()])
+  }
+
+  return JSON.stringify(Object.fromEntries(result));
+}
diff --git a/src/tg-bot-playground/init.ts b/src/tg-bot-playground/init.ts
deleted file mode 100644
index 4df5625..0000000
--- a/src/tg-bot-playground/init.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-window.playground = {};
-
-console.log("initiating...")
-const version: string = await (
-  fetch("./metadata.json", { cache: "no-cache" }).then(_ => _.json()).then(_ => _["web-worker.js"])
-);
-
-if (version) {
-  const worker = new Worker(`./scripts/web-worker.js?v=${version}`, { type: "module" });
-  window.playground.worker = worker;
-  console.log("web worker has been loaded");
-  document.dispatchEvent(new Event('playgroundInitialized'));
-} else {
-  console.warn("web worker not initiated")
-}
-
-setFavicon("🤖");
-
-function setFavicon(emoji: string): void {
-  const canvas: HTMLCanvasElement = document.createElement('canvas');
-  canvas.width = 64;
-  canvas.height = 64;
-  const ctx: CanvasRenderingContext2D | null = canvas.getContext('2d');
-
-  if (ctx) {
-    ctx.font = '64px serif';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(emoji, canvas.width / 2, canvas.height / 2);
-  }
-
-  const link: HTMLLinkElement = document.createElement('link');
-  link.rel = 'icon';
-  link.href = canvas.toDataURL('image/png');
-  
-  const existingIcons: NodeListOf<HTMLLinkElement> = document.querySelectorAll('link[rel="icon"]');
-  existingIcons.forEach(icon => icon.parentNode?.removeChild(icon));
-
-  document.head.appendChild(link);
-}
diff --git a/src/tg-bot-playground/main.ts b/src/tg-bot-playground/main.ts
deleted file mode 100644
index 12313c4..0000000
--- a/src/tg-bot-playground/main.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import type { BotState } from "./types.js";
-import { fetchText, getJsCode, setupDts } from "./utils.js";
-
-console.log("loading main");
-
-window.playground.start = () => {
-
-  const container = document.getElementById('container');
-
-  if (!container) {
-    return console.error("container not found");
-  }
-
-  window.monaco_loader.config({
-    paths: {
-      vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs'
-    }
-  });
-
-  return Promise.all([
-    window.monaco_loader.init(),
-    fetchText("./example/empty.ts")
-  ]).then(([monaco, emptyExample]) => {
-
-    window.playground.tsModel =
-      monaco.editor.createModel(emptyExample, 'typescript');
-
-    setupDts(monaco);
-
-    window.playground.editor =
-      monaco.editor.create(container, {
-        model: window.playground.tsModel,
-        contextmenu: false,
-        minimap: {
-          enabled: false
-        },
-      });
-
-  }).catch(error => console.warn("init error", error));
-
-}
-
-window.playground.loadExample =
-  (name) => {
-    if (!name) return;
-    fetchText(`./example/${name}`)
-      .then(_ => window.playground.editor?.setValue(_))
-      .catch(error => {
-        console.error("Cannot load example", error)
-      })
-  }
-
-window.playground.runBot =
-  (state: BotState) => {
-
-    const token = state.token;
-
-    if (!token) return;
-
-    getJsCode().then(code => {
-
-      if (!code) {
-        console.warn("Js Code not defined");
-        return;
-      }
-
-      window.playground.worker?.postMessage({
-        command: 'run-bot',
-        token,
-        code
-      });
-
-      state.status = "active"
-    }).catch(error => {
-      console.warn("cannot run bot", error)
-    })
-
-  }
-
-window.playground.checkToken =
-  (state: BotState) => {
-
-    const token = state.token;
-
-    if (!token) return;
-
-    fetch(`https://api.telegram.org/bot${token}/getMe`)
-      .then(_ => _.json())
-      .then(info => {
-        if (info.ok) {
-          state.name = info.result.first_name;
-          if (window.playground.runBot) {
-            console.log("Running bot")
-            window.playground.runBot(state);
-          }
-        } else {
-          state.name = "nameless";
-        }
-      }).catch(error => {
-        console.warn("check token error", error)
-      });
-
-  }
-
-window.playground.onCodeChange =
-  (f) => {
-    let timeoutId: number | undefined;
-    const debounceDelay = 1000;
-
-    const editor = window.playground.editor;
-
-    if (!editor) {
-      console.warn("Cannot attach onDidChangeModel");
-      return;
-    }
-
-    editor.onDidChangeModelContent(() => {
-      if (timeoutId !== undefined) {
-        clearTimeout(timeoutId);
-      }
-
-      timeoutId = window.setTimeout(() => {
-        const model = window.playground.tsModel;
-        if (model) {
-          const markers = window.monaco.editor.getModelMarkers({ resource: model.uri });
-          if (!markers.find(_ => _.severity.valueOf() == 8)) { f() }
-        }
-      }, debounceDelay);
-    });
-  }
diff --git a/src/tg-bot-playground/types.ts b/src/tg-bot-playground/types.ts
index 6b97672..bb24b8f 100644
--- a/src/tg-bot-playground/types.ts
+++ b/src/tg-bot-playground/types.ts
@@ -1,5 +1,20 @@
+export type MonacoLoader = typeof import("@monaco-editor/loader").default;
+export type TextModel = import("monaco-editor").editor.ITextModel;
+export type Monaco = typeof import("monaco-editor");
+export type Alpine = typeof import("alpinejs");
+
 export type BotState = {
   status: string
   token: string
   name: string
 }
+
+export type RunBot = {
+  command: "run-bot"
+  token: string
+  code: string
+}
+
+export const isRunBot = 
+  (input: unknown): input is RunBot =>
+    typeof input == "object" && input != null && "command" in input && "token" in input && "code" in input;
\ No newline at end of file
diff --git a/src/tg-bot-playground/utils.ts b/src/tg-bot-playground/utils.ts
index e8f7e0e..412bda8 100644
--- a/src/tg-bot-playground/utils.ts
+++ b/src/tg-bot-playground/utils.ts
@@ -1,103 +1,25 @@
-export async function getDefaultExport<D>(code: string) {
-  try {
-    const encodedCode = encodeURIComponent(code);
-    const module = await import(`data:text/javascript,${encodedCode}`);
-    const result = module.default;
-    return { default: result as D };
-  } catch (e) {
-    console.warn("get default error", e);
-    return undefined;
-  }
-
-}
-
-export const getJsCode = async () => {
-
-  const tsModelUri = window.playground.tsModel?.uri;
-
-  if (!tsModelUri) {
-    console.warn("tsModel uri not defined")
-    return;
-  }
-
-  const worker = await window.monaco.languages.typescript.getTypeScriptWorker();
-
-  const modelWorker = await worker(tsModelUri);
-
-  const output = await modelWorker.getEmitOutput(tsModelUri.toString());
-  const code = output.outputFiles[0].text;
-  const result = await getDefaultExport(code);
-
-  return serialize(result?.default);
-
-}
+import type { MonacoLoader, Alpine } from "./types.js";
 
 export const fetchText = (path: string) =>
   fetch(path).then(_ => _.text())
 
-export const setupDts = async (
-  monaco: import("@monaco-editor/loader").Monaco
-) => {
-
-  const dts = await fetchText("https://cdn.jsdelivr.net/npm/@effect-ak/tg-bot-client@0.2.2/dist/index.d.ts");
-
-  monaco.languages.typescript.typescriptDefaults.setExtraLibs([
-    {
-      content: dts,
-      filePath: "node_modules/@effect-ak/tg-bot-client/index.d.ts",
+export const getMonacoLoader = () => {
+    if (!("monaco_loader" in window) || typeof window.monaco_loader != "object" || window.monaco_loader == null) {
+      console.warn("monaco loader is not available");
+      return;
     }
-  ]);
 
-  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-    ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
-    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-    typeRoots: [
-      "node_modules"
-    ],
-    strict: true
-  });
+    return window.monaco_loader as MonacoLoader;
 
 }
 
-export const serialize = (input: unknown) => {
-  if (typeof input != "object" || !input) {
-    return undefined;
-  }
-  const result = [] as [string, string][];
+export function getAlpine() {
 
-  for (const [key, value] of Object.entries(input)) {
-    if (typeof value != "function") {
-      continue;
-    }
-    result.push([ key, value.toString() ])
+  if (!("Alpine" in window) || typeof window.Alpine != "object" || window.Alpine == null) {
+    console.warn("Alpine is not available");
+    return;
   }
 
-  return JSON.stringify(Object.fromEntries(result));
-}
-
-const parseJson = (input: string) => {
-  try {
-    return { parsed: JSON.parse(input) }
-  } catch { return undefined }
-}
-
-export const deserialize = (input: string) => {
-
-  const result = [] as [string, unknown][];
-
-  const fields = parseJson(input);
-
-  if (typeof fields?.parsed != "object") return undefined;
-
-  for (const [k, v] of Object.entries(fields.parsed)) {
-    try {
-      const f = new Function(`return ${v}`)();
-      result.push([k, f]);
-    } catch (e) {
-      console.warn("deserialize field error", { k, v, e });
-    }
-
-  }
+  return window.Alpine as Alpine;
 
-  return Object.fromEntries(result);
 }
diff --git a/src/tg-bot-playground/web-worker.ts b/src/tg-bot-playground/web-worker.ts
deleted file mode 100644
index a790b38..0000000
--- a/src/tg-bot-playground/web-worker.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { runTgChatBot, BotInstance } from "@effect-ak/tg-bot-client"
-
-import { deserialize } from "./utils.js"
-import type { BotState } from "./types.js"
-
-console.log("loading worker...");
-
-type RunBot = {
-  command: "run-bot"
-  token: string
-  code: string
-}
-
-let logId = 1;
-
-const notifyParent = (input: object) => {
-  self.postMessage({
-    id: logId++,
-    ...input
-  });
-}
-
-let botInstance = undefined as BotInstance | undefined
-
-self.onmessage = async (msg: MessageEvent<unknown>) => {
-
-  const command = msg.data as RunBot;
-
-  if (typeof command != "object" || !command.command) {
-    notifyParent({
-      error: "object command expected"
-    });
-    return;
-  }
-
-  if (command.command == "run-bot") {
-
-    const handlers = deserialize(command.code);
-
-    if (botInstance) {
-      console.log("reloading...")
-      await botInstance.reload({
-        ...handlers,
-      });
-      notifyParent({
-        botState: {
-          status: "reloaded"
-        } as BotState
-      })
-      return;
-    }
-
-    botInstance = 
-      await runTgChatBot({
-        type: "config",
-        "bot-token": command.token,
-        ...handlers,
-        onExit: (exit) =>
-          notifyParent({
-            success: "Bot's fiber has been shutdown",
-            exit,
-            botState: {
-              status: "stopped"
-            } as BotState
-          })
-      });
-
-    notifyParent({
-      success: "Bot's fiber has been created",
-      botState: {
-        status: "active"
-      } as BotState
-    });
-
-    return;
-  }
-
-  notifyParent({
-    error: "Unknown command"
-  })
-
-}
diff --git a/src/tg-bot-playground/worker/handler.ts b/src/tg-bot-playground/worker/handler.ts
new file mode 100644
index 0000000..de31a78
--- /dev/null
+++ b/src/tg-bot-playground/worker/handler.ts
@@ -0,0 +1,77 @@
+import { runTgChatBot, BotInstance } from "@effect-ak/tg-bot-client";
+import { isRunBot, type BotState } from "#tg-bot-playground/types.js";
+import { deserialize } from "./utils.js";
+
+export const makeWorkerHandler = (
+  notifyParent: (_: Record<string, unknown> & { messageId: number }) => void
+) => {
+
+  let messageId = 0;
+
+  let botInstance = undefined as BotInstance | undefined;
+
+  const sendEvent = (
+    input: Record<string, unknown>
+  ) => notifyParent({
+    ...input,
+    messageId: messageId++
+  });
+
+  return async (command: unknown) => {
+
+    if (!isRunBot(command)) {
+      sendEvent({
+        error: "not a run bot command",
+        command
+      });
+      return;
+    }
+  
+    if (command.command == "run-bot") {
+  
+      const handlers = deserialize(command.code);
+  
+      if (botInstance) {
+        console.log("reloading...")
+        await botInstance.reload({
+          ...handlers,
+        });
+        sendEvent({
+          botState: {
+            status: "reloaded"
+          } as BotState
+        })
+        return;
+      }
+  
+      botInstance = 
+        await runTgChatBot({
+          type: "config",
+          "bot-token": command.token,
+          ...handlers,
+          onExit: (exit) =>
+            sendEvent({
+              success: "Bot's fiber has been shutdown",
+              exit,
+              botState: {
+                status: "stopped"
+              } as BotState
+            })
+        });
+  
+      sendEvent({
+        success: "Bot's fiber has been created",
+        botState: {
+          status: "active"
+        } as BotState
+      });
+  
+      return;
+    }
+  
+    sendEvent({
+      error: "Unknown command"
+    })
+  }
+
+}
diff --git a/src/tg-bot-playground/worker/utils.ts b/src/tg-bot-playground/worker/utils.ts
new file mode 100644
index 0000000..06d17e7
--- /dev/null
+++ b/src/tg-bot-playground/worker/utils.ts
@@ -0,0 +1,26 @@
+const parseJson = (input: string) => {
+  try {
+    return { parsed: JSON.parse(input) }
+  } catch { return undefined }
+}
+
+export const deserialize = (input: string) => {
+
+  const result = [] as [string, unknown][];
+
+  const fields = parseJson(input);
+
+  if (typeof fields?.parsed != "object") return;
+
+  for (const [k, v] of Object.entries(fields.parsed)) {
+    try {
+      const f = new Function(`return ${v}`)();
+      result.push([k, f]);
+    } catch (e) {
+      console.warn("deserialize field error", { k, v, e });
+    }
+
+  }
+
+  return Object.fromEntries(result);
+}
diff --git a/src/tg-bot-playground/worker/web-worker.ts b/src/tg-bot-playground/worker/web-worker.ts
new file mode 100644
index 0000000..d1e387b
--- /dev/null
+++ b/src/tg-bot-playground/worker/web-worker.ts
@@ -0,0 +1,10 @@
+import { makeWorkerHandler } from "./handler.js";
+
+const handler =
+  makeWorkerHandler(
+    _ => self.postMessage(_)
+  );
+
+self.onmessage =
+  (msg: MessageEvent) =>
+    handler(msg.data)
diff --git a/tsup.config.json b/tsup.config.json
index 0db0e3b..42642d4 100644
--- a/tsup.config.json
+++ b/tsup.config.json
@@ -1,9 +1,8 @@
 {
   "$schema": "https://cdn.jsdelivr.net/npm/tsup/schema.json",
   "entry": [
-    "src/tg-bot-playground/web-worker.ts",
-    "src/tg-bot-playground/main.ts",
-    "src/tg-bot-playground/init.ts"
+    "src/tg-bot-playground/worker/web-worker.ts",
+    "src/tg-bot-playground/_main.ts"
   ],
   "splitting": false,
   "outDir": "docs/telegram-bot-playground/scripts",