chore: nuxt 4 compat

Streamerbot · Sep 25, 2024 · 897494a · 897494a
1 parent 2046921
commit 897494a
Show file tree

Hide file tree

Showing 37 changed files with 7,454 additions and 5,391 deletions.
diff --git a/apps/docs/app.config.ts → apps/docs/app/app.config.ts b/apps/docs/app.config.ts → apps/docs/app/app.config.ts
diff --git a/apps/docs/app.vue → apps/docs/app/app.vue b/apps/docs/app.vue → apps/docs/app/app.vue
diff --git a/apps/docs/components/DocsSearch.vue → apps/docs/app/components/DocsSearch.vue b/apps/docs/components/DocsSearch.vue → apps/docs/app/components/DocsSearch.vue
diff --git a/apps/docs/components/Footer.vue → apps/docs/app/components/Footer.vue b/apps/docs/components/Footer.vue → apps/docs/app/components/Footer.vue
diff --git a/apps/docs/components/Header.vue → apps/docs/app/components/Header.vue b/apps/docs/components/Header.vue → apps/docs/app/components/Header.vue
diff --git a/apps/docs/components/HeaderLogoMenu.vue → apps/docs/app/components/HeaderLogoMenu.vue b/apps/docs/components/HeaderLogoMenu.vue → apps/docs/app/components/HeaderLogoMenu.vue
diff --git a/apps/docs/components/Logo.vue → apps/docs/app/components/Logo.vue b/apps/docs/components/Logo.vue → apps/docs/app/components/Logo.vue
diff --git a/apps/docs/components/LogoText.vue → apps/docs/app/components/LogoText.vue b/apps/docs/components/LogoText.vue → apps/docs/app/components/LogoText.vue
diff --git a/apps/docs/components/OgImageDefault.vue → apps/docs/app/components/OgImageDefault.vue b/apps/docs/components/OgImageDefault.vue → apps/docs/app/components/OgImageDefault.vue
diff --git a/apps/docs/components/content/Ellipsis.vue → .../docs/app/components/content/Ellipsis.vue b/apps/docs/components/content/Ellipsis.vue → .../docs/app/components/content/Ellipsis.vue
diff --git a/apps/docs/components/global/CopyButton.vue → ...docs/app/components/global/CopyButton.vue b/apps/docs/components/global/CopyButton.vue → ...docs/app/components/global/CopyButton.vue
diff --git a/apps/docs/components/global/List.vue → apps/docs/app/components/global/List.vue b/apps/docs/components/global/List.vue → apps/docs/app/components/global/List.vue
diff --git a/apps/docs/components/global/ProseCode.vue → .../docs/app/components/global/ProseCode.vue b/apps/docs/components/global/ProseCode.vue → .../docs/app/components/global/ProseCode.vue
diff --git a/apps/docs/components/global/Wip.vue → apps/docs/app/components/global/Wip.vue b/apps/docs/components/global/Wip.vue → apps/docs/app/components/global/Wip.vue
diff --git a/...docs/components/global/changelog/List.vue → .../app/components/global/changelog/List.vue b/...docs/components/global/changelog/List.vue → .../app/components/global/changelog/List.vue
diff --git a/apps/docs/components/global/icon/Base.vue → .../docs/app/components/global/icon/Base.vue b/apps/docs/components/global/icon/Base.vue → .../docs/app/components/global/icon/Base.vue
diff --git a/...ocs/components/global/icon/Speakerbot.vue → ...app/components/global/icon/Speakerbot.vue b/...ocs/components/global/icon/Speakerbot.vue → ...app/components/global/icon/Speakerbot.vue
diff --git a/...cs/components/global/icon/Streamerbot.vue → ...pp/components/global/icon/Streamerbot.vue b/...cs/components/global/icon/Streamerbot.vue → ...pp/components/global/icon/Streamerbot.vue
diff --git a/...nts/global/icon/StreamerbotExtensions.vue → ...nts/global/icon/StreamerbotExtensions.vue b/...nts/global/icon/StreamerbotExtensions.vue → ...nts/global/icon/StreamerbotExtensions.vue
diff --git a/...nts/streamerbot/StreamerbotPlayground.vue → ...nts/streamerbot/StreamerbotPlayground.vue b/...nts/streamerbot/StreamerbotPlayground.vue → ...nts/streamerbot/StreamerbotPlayground.vue
diff --git a/apps/docs/composables/useLinks.ts → apps/docs/app/composables/useLinks.ts b/apps/docs/composables/useLinks.ts → apps/docs/app/composables/useLinks.ts
diff --git a/apps/docs/composables/useSeo.ts → apps/docs/app/composables/useSeo.ts b/apps/docs/composables/useSeo.ts → apps/docs/app/composables/useSeo.ts
diff --git a/apps/docs/error.vue → apps/docs/app/error.vue b/apps/docs/error.vue → apps/docs/app/error.vue
diff --git a/apps/docs/layouts/default.vue → apps/docs/app/layouts/default.vue b/apps/docs/layouts/default.vue → apps/docs/app/layouts/default.vue
diff --git a/apps/docs/layouts/docs.vue → apps/docs/app/layouts/docs.vue b/apps/docs/layouts/docs.vue → apps/docs/app/layouts/docs.vue
diff --git a/apps/docs/pages/[...slug].vue → apps/docs/app/pages/[...slug].vue b/apps/docs/pages/[...slug].vue → apps/docs/app/pages/[...slug].vue
diff --git a/apps/docs/pages/index.vue → apps/docs/app/pages/index.vue b/apps/docs/pages/index.vue → apps/docs/app/pages/index.vue
diff --git a/apps/docs/pages/playground.vue → apps/docs/app/pages/playground.vue b/apps/docs/pages/playground.vue → apps/docs/app/pages/playground.vue
diff --git a/apps/docs/content/0.index.md b/apps/docs/content/0.index.md
@@ -1,6 +1,6 @@
 ---
 title: Streamerbot Client
-description: Typescript client for interacting with the Streamer.bot WebSocket API
+description: Official client for interacting with the Streamer.bot WebSocket API
 navigation: false
 hero:
   links:

diff --git a/apps/docs/content/1.get-started/0.installation.md b/apps/docs/content/1.get-started/0.installation.md
@@ -3,6 +3,38 @@ title: Installation
 description: Add @streamerbot/client to your project
 ---
 
+### Browser
+
+For usage in browser contexts, such as basic static HTML and JS projects.
+
+Add the following `<script>` tag within the `<head>` of your HTML page.
+
+::code-group
+  ```html [unpkg]
+  <script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
+  ```
+::
+
+The `StreamerbotClient` constructor will become available on the global `window` object.
+
+::code-group
+  ```html [example.html]
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>Streamer.bot Client</title>
+      <link rel="stylesheet" href="style.css">
+      <script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
+    </head>
+    <body>
+      <script type="text/javascript">
+        const client = new StreamerbotClient();
+      </script>
+    </body>
+  </html>
+  ```
+::
+
 ### NodeJS & TypeScript
 
 Add `@streamerbot/client` with your favorite package manager:
@@ -33,20 +65,6 @@ Import Streamer.bot client in your `.js` or `.ts`:
   ```
 ::
 
-### Browser / CDN
-
-For usage in browser contexts.
-
-Add the following `<script>` tag within the `<head>` of your HTML page. 
-
-The `StreamerbotClient` constructor will become available on the global `window` object.
-
-::code-group
-  ```html [unpkg]
-    <script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
-  ```
-::
-
 ### Module
 
 You can also directly import the module from Skypack if you are using the `<script type="module">` syntax:

diff --git a/apps/docs/content/2.guide/1.events.md b/apps/docs/content/2.guide/1.events.md
@@ -22,22 +22,22 @@ Utilizing the `client.on()`{lang=ts} method will make your life easier by:
 Subscribe to a specific event, with callback:
 ```ts
 // Subscribe to Twitch ChatMessage events
-await client.on('Twitch.ChatMessage', (data) => {
+client.on('Twitch.ChatMessage', (data) => {
   console.log('New Twitch Chat Message:', data);
 });
 ```
 
 You can subscribe to all events of a specific source with `"[sourceName].*"`
 ```ts
 // Subscribe to all Twitch events
-await client.on('Twitch.*', (data) => {
+client.on('Twitch.*', (data) => {
   console.log('Twitch Event Received:' data);
 });
 ```
 
 If you want to subscribe to **all** event sources & events from Streamer.bot, simply pass `"*"`
 ```ts
-await client.on('*', (data) => {
+client.on('*', (data) => {
   console.log('Event Received:', data);
 });
 ```

diff --git a/apps/docs/content/2.guide/2.custom-events.md b/apps/docs/content/2.guide/2.custom-events.md
@@ -20,7 +20,7 @@ You can easily [subscribe](/guide/events) to your custom events using the `.on()
 
 ```ts [example.ts]
 // Subscribe to all custom events from the connected Streamer.bot instance
-await client.on('General.Custom', (data) => {
+client.on('General.Custom', (data) => {
   console.log('Custom Event:', data);
 });
 ```
@@ -41,7 +41,7 @@ CPH.WebsocketBroadcastJson(json);
 On the client side, we will handle these events with the following event handler:
 
 ```ts [example.ts]
-await client.on('General.Custom', (payload) => {
+client.on('General.Custom', (payload) => {
   if (payload.data.event === 'mediaPlayer' && payload.data.action === 'pause') {
     // handle media player pause events in here :)
   }

diff --git a/apps/docs/nuxt.config.ts b/apps/docs/nuxt.config.ts
@@ -1,4 +1,3 @@
-
 export default defineNuxtConfig({
   extends: ['@nuxt/ui-pro'],
 
@@ -7,7 +6,6 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     'nuxt-og-image',
     'nuxt-link-checker',
-    'nuxt-icon',
     '@nuxt/content',
   ],
 
@@ -94,22 +92,6 @@ export default defineNuxtConfig({
     },
   },
 
-  hooks: {
-    // Related to https://github.com/nuxt/nuxt/pull/22558
-    // Adding all global components to the main entry
-    // To avoid lagging during page navigation on client-side
-    // Downside: bigger JS bundle
-    // With sync: 465KB, gzip: 204KB
-    // Without: 418KB, gzip: 184KB
-    'components:extend'(components) {
-      for (const comp of components) {
-        if (comp.global) {
-          comp.global = 'sync';
-        }
-      }
-    },
-  },
-
   ogImage: {
     runtimeCacheStorage: true,
     defaults: {
@@ -126,4 +108,10 @@ export default defineNuxtConfig({
       markdown: true,
     },
   },
+
+  future: {
+    compatibilityVersion: 4,
+  },
+
+  compatibilityDate: '2024-09-25',
 });
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -13,8 +13,7 @@
     "@nuxt/content": "^2.13.2",
     "@nuxt/ui-pro": "^0.7.5",
     "@streamerbot/vue": "workspace:^",
-    "nuxt-component-meta": "^0.6.6",
-    "nuxt-icon": "^0.6.10"
+    "nuxt-component-meta": "^0.6.6"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.1",

diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -3,9 +3,9 @@
   <head>
     <title>Twitch Chat Example | Streamer.bot Client</title>
     <link rel="stylesheet" href="style.css">
+    <script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
+    <script type="text/javascript" src="script.js"></script>
   </head>
-  <script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
-  <script type="text/javascript" src="script.js"></script>
   <body>
     <div id="chat"></div>
   </body>

diff --git a/package.json b/package.json
@@ -18,5 +18,5 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "packageManager": "pnpm@8.14.1+sha1.d039b38e0b20ad012ed548e44267b8d4c88b447a"
+  "packageManager": "pnpm@9.11.0"
 }