From 692332ed1cd2ad6028f1c107cd3a132b31ef2565 Mon Sep 17 00:00:00 2001
From: Amaan Qureshi <amaanq12@gmail.com>
Date: Mon, 20 Jan 2025 03:13:24 -0500
Subject: [PATCH] feat!: update playground with new web bindings

---
 cli/src/playground.html          | 10 ++++------
 docs/src/assets/js/playground.js | 14 ++++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/cli/src/playground.html b/cli/src/playground.html
index db496df0..b6955a97 100644
--- a/cli/src/playground.html
+++ b/cli/src/playground.html
@@ -90,12 +90,10 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.js"></script>
 
   <script>LANGUAGE_BASE_URL = "";</script>
-  <script src=tree-sitter.js></script>
-  <script src=playground.js></script>
-  <script>
-    setTimeout(() => {
-      window.initializePlayground({local: true});
-    }, 1)
+  <script type="module" src=playground.js></script>
+  <script type="module">
+    import {initializePlayground} from './playground.js';
+    setTimeout(() => initializePlayground({local: true}), 1)
   </script>
 
   <style>
diff --git a/docs/src/assets/js/playground.js b/docs/src/assets/js/playground.js
index 4bb05925..e0ed6839 100644
--- a/docs/src/assets/js/playground.js
+++ b/docs/src/assets/js/playground.js
@@ -1,3 +1,5 @@
+import { Parser, Language } from './tree-sitter.js';
+
 function initializeLocalTheme() {
   const themeToggle = document.getElementById('theme-toggle');
   if (!themeToggle) return;
@@ -60,7 +62,7 @@ function initializeCustomSelect({ initialValue = null, addListeners = false }) {
   }
 }
 
-window.initializePlayground = async function initializePlayground(opts) {
+export async function initializePlayground(opts) {
   const { local } = opts;
   if (local) {
     initializeLocalTheme();
@@ -120,9 +122,9 @@ window.initializePlayground = async function initializePlayground(opts) {
 
   loadState();
 
-  await TreeSitter.init();
+  await Parser.init();
 
-  const parser = new TreeSitter();
+  const parser = new Parser();
 
   console.log(parser, codeInput, queryInput);
 
@@ -173,7 +175,7 @@ window.initializePlayground = async function initializePlayground(opts) {
   loggingCheckbox.addEventListener("change", handleLoggingChange);
   anonymousNodes.addEventListener('change', renderTree);
   queryCheckbox.addEventListener("change", handleQueryEnableChange);
-  accessibilityCheckbox.addEventListener("change",handleQueryChange);
+  accessibilityCheckbox.addEventListener("change", handleQueryChange);
   languageSelect.addEventListener("change", handleLanguageChange);
   outputContainer.addEventListener("click", handleTreeClick);
 
@@ -188,7 +190,7 @@ window.initializePlayground = async function initializePlayground(opts) {
       const url = `${LANGUAGE_BASE_URL}/tree-sitter-${newLanguageName}.wasm`;
       languageSelect.disabled = true;
       try {
-        languagesByName[newLanguageName] = await TreeSitter.Language.load(url);
+        languagesByName[newLanguageName] = await Language.load(url);
       } catch (e) {
         console.error(e);
         languageSelect.value = languageName;
@@ -396,7 +398,7 @@ window.initializePlayground = async function initializePlayground(opts) {
       const queryText = queryEditor.getValue();
 
       try {
-        query = parser.getLanguage().query(queryText);
+        query = parser.language.query(queryText);
         let match;
 
         let row = 0;