update to ts and cloudflare pages

.github/workflows/static.yml

@@ -1,43 +1,20 @@
-# Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+name: Publish
 
 on:
-  # Runs on pushes targeting the default branch
   push:
-    branches: ["sugoi"]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
+    tags:
+      - "*"
+  
 jobs:
-  # Single deploy job since we're just deploying
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+  release:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v6
         with:
-          # Upload entire repository
-          path: '.'
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+          node-version: latest
+      - run: npm ci
+      - run: npx tsc
+      - run: npx wrangler pages deploy dist --project-name twitch-subathon-countdown
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+dist/js

dist/index.html

@@ -16,11 +16,6 @@
             <p id="timeText">00:00:00</p>
         </div>
     </div>
-    <script 
-        src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
-        integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I="
-        crossorigin="anonymous">
-    </script>
     <script type="module" src="js/script.js"></script>
 </body>
 </html>

package.json

@@ -1,7 +1,15 @@
 {
   "devDependencies": {
+    "@types/web": "^0.0.301",
+    "typescript": "^5.9.3",
+    "wrangler": "^4.54.0"
+  },
+  "dependencies": {
     "@twurple/api": "^7.2.1",
     "@twurple/eventsub-ws": "^7.2.1",
-    "twitch-cloud-ebs": "github:sugoidogo/twitch-cloud-ebs"
+    "js-util": "https://gitea.sugoidogo.com/sugoidogo/js-util/releases/download/0.1.0/js-util.tgz",
+    "localforage": "^1.10.0",
+    "socket.io-client": "^4.8.1",
+    "twitch-cloud-ebs": "https://gitea.sugoidogo.com/sugoidogo/twitch-cloud-ebs/releases/download/1.1.3/twitch-cloud-ebs.tgz"
   }
 }

src/config.ts

@@ -1,26 +1,23 @@
-const status_div = document.querySelector('div#status')
+const status_div = document.querySelector('div#status')!
 onerror = function (error) {
-    status_div.innerHTML = error.message
-    //throw new Error(null,{cause:error})
+    status_div.innerHTML = error.toString()
+    throw error
 }
-onunhandledrejection = (event) => onerror(event.reason)
+onunhandledrejection = (event) => onerror!(event.reason)
 
-import AuthProvider from 'https://ebs.sugoidogo.com/SugoiAuthProvider.mjs'
-import WebStorage from 'https://ebs.sugoidogo.com/WebStorage.mjs'
+import { SugoiAuthProvider, WebStorage } from 'twitch-cloud-ebs'
+const origin = 'https://ebs.sugoidogo.com'
 
 const client_id = 'ib2n7v7mur7ab2mcxv7rjju2ctsyoi'
 const scope = 'moderator:read:followers channel:read:subscriptions bits:read channel:read:charity chat:read chat:edit moderation:read channel:manage:moderators user:read:chat'
 
-/** @type {import('../node_modules/twitch-cloud-ebs/static/SugoiAuthProvider.mjs').default} */
-const authProvider = new AuthProvider(client_id)
+const authProvider = new SugoiAuthProvider(client_id, origin)
 const tokens=await authProvider.addUser(...scope.split(' '))
 
-/** @type {import('../node_modules/twitch-cloud-ebs/static/WebStorage.mjs').default} */
-const webStorage = new WebStorage(authProvider)
+const webStorage = new WebStorage(authProvider, undefined, origin)
 
-document.querySelector('#timer-link').href += '?refresh_token=' + tokens.refresh_token
+document.querySelector<HTMLAnchorElement>('#timer-link').href += '?refresh_token=' + tokens.refresh_token
 status_div.innerHTML = 'Loading settings...'
-const FormDataDeep = await import('https://sugoidogo.github.io/js-util/FormDataDeep.mjs')
 const config = await webStorage.fetch('config.json')
     .then(async response => {
         if (response.ok) {
@@ -30,15 +27,15 @@ const config = await webStorage.fetch('config.json')
                 return {}
             }
         }
-        console.warn(response.code, await response.text())
+        console.warn(response.status, await response.text())
         return {}
     }
     ).then(config => {
-        for (const checkbox of document.querySelectorAll('input[type=checkbox]')) {
+        for (const checkbox of document.querySelectorAll<HTMLInputElement>('input[type=checkbox]')) {
             checkbox.checked = false
         }
         for (const key in config) {
-            const input = document.querySelector('[name=' + key + ']')
+            const input = document.querySelector<HTMLInputElement>('[name=' + key + ']')
             if (!input) {
                 continue
             }
@@ -50,10 +47,10 @@ const config = await webStorage.fetch('config.json')
         }
     })
 status_div.innerHTML = 'Ready!'
-document.querySelector('form#config').onsubmit =async function (event) {
+document.querySelector<HTMLFormElement>('form#config').onsubmit = async function (event) {
     event.preventDefault()
     status_div.innerHTML = 'Saving settings...'
-    const config = Object.fromEntries(new FormData(event.target))
+    const config = Object.fromEntries(new FormData(event.target as HTMLFormElement))
     await webStorage.fetch('config.json', {
         method: 'POST',
         body: JSON.stringify(config)

src/script.ts

@@ -1,21 +1,16 @@
-import AuthProvider from 'https://ebs.sugoidogo.com/SugoiAuthProvider.mjs'
-import WebStorage from 'https://ebs.sugoidogo.com/WebStorage.mjs'
-import { ApiClient } from 'https://cdn.jsdelivr.net/npm/@twurple/api@7/+esm'
-import { EventSubWsListener } from 'https://cdn.jsdelivr.net/npm/@twurple/eventsub-ws@7/+esm'
+import { SugoiAuthProvider, WebStorage } from 'twitch-cloud-ebs'
+import { ApiClient } from '@twurple/api'
+import { EventSubWsListener } from '@twurple/eventsub-ws'
 
 const client_id = 'ib2n7v7mur7ab2mcxv7rjju2ctsyoi'
 
-/** @type {import('../node_modules/twitch-cloud-ebs/static/SugoiAuthProvider.mjs').default} */
-const authProvider = new AuthProvider(client_id)
-/** @type {import('../node_modules/twitch-cloud-ebs/static/WebStorage.mjs').default} */
+const authProvider = new SugoiAuthProvider(client_id)
 const webStorage = new WebStorage(authProvider)
-/** @type {import('@twurple/api').ApiClient} */
 const apiClient = new ApiClient({ authProvider })
-/** @type {import('@twurple/eventsub-ws').EventSubWsListener} */
 const eventSub = new EventSubWsListener({ apiClient })
 
 const timer=document.querySelector('#timeText')
-let tokens,time_started,time_passed,time_total,config,localforage,streamelements
+let tokens,time_started,time_passed,time_total,config,streamelements
 
 window.onanimationend=function(event){
 	event.target.remove()
@@ -141,6 +136,8 @@ function updateTime(){
 	requestAnimationFrame(updateTime)
 }
 
+import { io } from 'socket.io-client'
+
 function init_streamelements(){
 	streamelements=io('https://realtime.streamelements.com',{transports: ['websocket']})
 	streamelements.on('disconnect',init_streamelements)
@@ -163,8 +160,8 @@ function init_streamelements(){
 }
 
 // init localforage
-localforage = (await import('https://cdn.jsdelivr.net/npm/localforage/+esm')).default
-localforage = localforage.createInstance({ name: 'sugoi-subathon-countdown' })
+import * as localForage from 'localforage'
+const localforage = localForage.createInstance({ name: 'sugoi-subathon-countdown' })
 // init timer display
 time_started = await localforage.getItem('time_started')
 time_passed = await localforage.getItem('time_passed')

tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "target": "es2022",
+        "module": "es2022",
+        "lib": ["ESNext"],
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "inlineSources": true,
+        "outDir": "dist/js"
+    },
+    "include": ["src"]
+}