init

.gitea/workflows/release.yaml

@@ -0,0 +1,26 @@
+name: release
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - run: |
+          bun install
+          bun run build
+          REPONAME=`basename $GITHUB_REPOSITORY`
+          mkdir .out
+          mv dist .out/$REPONAME
+          cd .out && zip -r $REPONAME.zip $REPONAME
+      - uses: akkuman/gitea-release-action@v1
+        with:
+          files: |-
+            .out/*.zip

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/pre-commit

@@ -0,0 +1,13 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
+[ -z "$FILES" ] && exit 0
+
+# Prettify all selected files
+echo "$FILES" | xargs ./node_modules/.bin/prettier --ignore-unknown --write
+
+# Add back the modified/prettified files to staging
+echo "$FILES" | xargs git add
+
+exit 0

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,32 @@
+{
+  "useTabs": false,
+  "tabWidth": 4,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-svelte"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte",
+        "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-svelte"]
+      }
+    },
+    {
+      "files": "*.svx",
+      "options": {
+        "parser": "mdx",
+        "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-svelte"],
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": "*.{json,yaml,yml,prettierrc}",
+      "options": {
+        "tabWidth": 2,
+        "printWidth": 200
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+-   It brings its own routing solution which might not be preferable for some users.
+-   It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store';
+export default writable(0);
+```

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Chat</title>
+        <!-- INJECT-ONECOMME-JS -->
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "onecomme-chat",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@onecomme.com/onesdk": "^5.2.2",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@tsconfig/svelte": "^5.0.4",
+    "@types/color": "^3.0.6",
+    "@types/node": "^20.14.14",
+    "autoprefixer": "^10.4.20",
+    "husky": "^8.0.3",
+    "postcss": "^8.4.41",
+    "postcss-load-config": "^5.1.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.5",
+    "tailwindcss": "^3.4.9",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0"
+  },
+  "patchedDependencies": {
+    "@onecomme.com/onesdk@5.2.2": "patches/@onecomme.com%2Fonesdk@5.2.2.patch"
+  }
+}

patches/@onecomme.com%2Fonesdk@5.2.2.patch

@@ -0,0 +1,13 @@
+diff --git a/OneSDK.d.ts b/OneSDK.d.ts
+index bad98df0aae8f4599574f335a59a502b2f1527a7..d5ada1e508ece2f32954964232b0aeed8ca4755c 100644
+--- a/OneSDK.d.ts
++++ b/OneSDK.d.ts
+@@ -25,7 +25,7 @@ export declare class OneSDK {
+     ready(): Promise<void>;
+     setup(op?: Partial<OneSDKConfig>): Promise<void>;
+     private _tick;
+-    subscribe<T extends Subscriber<SendType>>(subscriber: T): number;
++    subscribe<T extends SendType = SendType>(subscriber: Subscriber<T>): number;
+     unsubscribe(subscriberId: number): void;
+     reset(): void;
+     getStyleVariable<T = any>(name: string, defaultValue: T, parser?: (val: string) => T): T;

postcss.config.cjs

@@ -0,0 +1,15 @@
+const tailwindcss = require('tailwindcss');
+const nesting = require('tailwindcss/nesting');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+    plugins: [
+        nesting(),
+        //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+        tailwindcss(),
+        //But others, like autoprefixer, need to run after,
+        autoprefixer
+    ]
+};
+
+module.exports = config;

preview.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Chat</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/preview/main.ts"></script>
+    </body>
+</html>

src/App.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { chats } from './lib/chats';
+    import { type TransitionConfig } from 'svelte/transition';
+    import { quadOut as easing } from 'svelte/easing';
+    import CommentRenderer from './components/CommentRenderer.svelte';
+
+    const child = new WeakMap<Node, number>();
+    let container: HTMLDivElement;
+    let queued = false;
+
+    function queue() {
+        if (queued) return;
+        function fn() {
+            queued = false;
+            if (!container) return;
+            let n = 0;
+            container.childNodes.forEach((node) => {
+                n += child.get(node) ?? 0;
+            });
+            container.scrollTo({ top: -n });
+        }
+        requestAnimationFrame(fn);
+    }
+
+    function scrollEffect(div: HTMLDivElement): TransitionConfig {
+        const rect = div.getBoundingClientRect();
+        child.set(div, rect.height);
+        return {
+            easing,
+            duration: 200,
+            tick(_, u) {
+                const rect = div.getBoundingClientRect();
+                child.set(div, u * rect.height);
+                queue();
+            }
+        };
+    }
+</script>
+
+<div
+    class="flex flex-col-reverse h-screen w-screen overflow-hidden px-3 py-2"
+    bind:this={container}
+>
+    {#each [...$chats].reverse() as chat (`${chat.service}/${chat.data.id}`)}
+        <div class="origin-top-left" in:scrollEffect>
+            <CommentRenderer comment={chat} />
+        </div>
+    {/each}
+</div>

src/app.pcss

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    html,
+    body {
+        background-color: transparent;
+    }
+}
+
+@layer components {
+    .comment-container {
+        img {
+            @apply mx-0.5 h-6 w-6;
+            display: inline-block;
+        }
+    }
+
+    .bg-comment {
+        margin: 12px;
+        padding: 12px;
+        border-image-slice: 40 40 40 40 fill;
+        border-image-width: 20px 20px 20px 20px;
+        border-image-outset: 8px 8px 8px 8px;
+        border-image-repeat: stretch stretch;
+        border-image-source: url('./img/bg.png');
+        border-style: solid;
+    }
+}

src/components/BaseComment.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+    import { authorColor } from '../lib/utils';
+
+    export let comment: Comment;
+
+    $: author = comment.data.displayName ?? comment.data.name;
+</script>
+
+<div class="bg-comment text-white">
+    <div class="flex flex-row items-center gap-1">
+        <div class="text-xs font-bold items-center {authorColor(comment)}">
+            {author}
+            {#each comment.data.badges as badge}
+                <img class="h-3 w-3 inline-block mx-0.5" src={badge.url} alt={badge.label} />
+            {/each}
+        </div>
+    </div>
+    <div class="comment-container mt-1">
+        {@html comment.data.comment}
+    </div>
+</div>

src/components/CommentRenderer.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+    import BaseComment from './BaseComment.svelte';
+    import ReceivedMember from './youtube/ReceivedMember.svelte';
+    import Gift from './youtube/Gift.svelte';
+
+    export let comment: Comment;
+
+    function determineComponent(comment: Comment) {
+        if (comment.service === 'youtube') {
+            if (comment.data.hasGift) {
+                switch (comment.data.giftType) {
+                    case 'giftreceived':
+                        return ReceivedMember;
+                    default:
+                        return Gift;
+                }
+            }
+        }
+        return BaseComment;
+    }
+</script>
+
+<svelte:component this={determineComponent(comment)} {comment} />

src/components/youtube/Gift.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { YouTubeComment } from '@onecomme.com/onesdk/types/Comment';
+    import { authorColor } from '../../lib/utils';
+
+    export let comment: YouTubeComment;
+
+    $: author = comment.data.displayName ?? comment.data.name;
+</script>
+
+<div class="bg-comment text-white">
+    <div class="flex flex-row items-center gap-1">
+        <div class="text-xs font-bold items-center {authorColor(comment)}">
+            {author}
+            {#each comment.data.badges as badge}
+                <img class="h-3 w-3 inline-block mx-0.5" src={badge.url} alt={badge.label} />
+            {/each}
+        </div>
+        {#if comment.data.giftType === 'milestonechat'}
+            <div
+                class="text-xs font-bold ml-auto px-2 py-0.5 rounded-full shadow"
+                style="background-color: {comment.data.colors?.headerBackgroundColor};"
+            >
+                {comment.data.membership?.primary}
+            </div>
+        {:else if comment.data.paidText}
+            <div
+                class="text-xs font-bold ml-auto px-2 py-0.5 rounded-full shadow"
+                style="background-color: {comment.data.colors?.headerBackgroundColor};"
+            >
+                {comment.data.paidText}
+            </div>
+        {/if}
+    </div>
+    <div class="comment-container mt-1">
+        {@html comment.data.comment}
+    </div>
+</div>

src/components/youtube/ReceivedMember.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { YouTubeComment } from '@onecomme.com/onesdk/types/Comment';
+
+    export let comment: YouTubeComment;
+
+    $: name = comment.data.displayName ?? comment.data.name;
+</script>
+
+<div class="text-center text-white font-semibold shadow-slate-600 py-1 text-sm">
+    <span class="text-green-300">{name}</span>
+    {comment.data.comment.replace(comment.data.name, '')}
+</div>
+
+<style lang="postcss">
+    div {
+        text-shadow:
+            var(--tw-shadow-color) 2px 0px 0px,
+            var(--tw-shadow-color) 1.75517px 0.958851px 0px,
+            var(--tw-shadow-color) 1.0806px 1.68294px 0px,
+            var(--tw-shadow-color) 0.141474px 1.99499px 0px,
+            var(--tw-shadow-color) -0.832294px 1.81859px 0px,
+            var(--tw-shadow-color) -1.60229px 1.19694px 0px,
+            var(--tw-shadow-color) -1.97998px 0.28224px 0px,
+            var(--tw-shadow-color) -1.87291px -0.701566px 0px,
+            var(--tw-shadow-color) -1.30729px -1.5136px 0px,
+            var(--tw-shadow-color) -0.421592px -1.95506px 0px,
+            var(--tw-shadow-color) 0.567324px -1.91785px 0px,
+            var(--tw-shadow-color) 1.41734px -1.41108px 0px,
+            var(--tw-shadow-color) 1.92034px -0.558831px 0px;
+    }
+</style>

src/lib/chats.ts

@@ -0,0 +1,4 @@
+import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+import { writable } from 'svelte/store';
+
+export const chats = writable<Comment[]>([]);

src/lib/utils.ts

@@ -0,0 +1,10 @@
+import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+
+export function authorColor(comment: Comment) {
+    if (comment.service === 'youtube') {
+        if (comment.data.isOwner) return 'text-yellow-200';
+        if (comment.data.isModerator) return 'text-blue-200';
+        if (comment.data.isMember) return 'text-green-200';
+    }
+    return 'text-zinc-200';
+}

src/main.ts

@@ -0,0 +1,25 @@
+import './app.pcss';
+import App from './App.svelte';
+import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+import { chats } from './lib/chats';
+
+if (import.meta.env.DEV) {
+    globalThis.OneSDK = (await import('@onecomme.com/onesdk')).default;
+}
+
+OneSDK.subscribe({
+    action: 'comments',
+    callback: (res: Comment[]) => {
+        chats.set(res);
+    }
+});
+OneSDK.setup({
+    commentLimit: 30
+});
+OneSDK.connect();
+
+const app = new App({
+    target: document.getElementById('app')!
+});
+
+export default app;

src/preview/Preview.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+    import CommentRenderer from '../components/CommentRenderer.svelte';
+    import data from './chats.json';
+    import { state } from './states';
+
+    $: filtered = ($state.giftOnly ? data.filter((c) => c.data.hasGift) : data) as Comment[];
+    $: chats = filtered.slice($state.skip, $state.skip + $state.commentLimit);
+</script>
+
+<div class="p-4">
+    <div class="bg-white sticky top-0 z-50 flex flex-col gap-2 py-2">
+        <div class="grid grid-cols-2 gap-2">
+            <label>
+                <input type="checkbox" bind:checked={$state.giftOnly} />
+                Gift Only
+            </label>
+            <label>
+                <input type="checkbox" bind:checked={$state.showJson} />
+                Show JSON
+            </label>
+        </div>
+        <label class="flex flex-row items-center gap-1">
+            Limit ({$state.commentLimit})
+            <input type="range" bind:value={$state.commentLimit} class="flex-grow" min="10" />
+        </label>
+        <label class="flex flex-row items-center gap-1">
+            Skip ({$state.skip})
+            <input
+                type="range"
+                bind:value={$state.skip}
+                class="flex-grow"
+                min={0}
+                max={filtered.length - $state.commentLimit}
+            />
+        </label>
+    </div>
+    <div class="flex flex-col py-3">
+        {#each chats as comment}
+            {#if $state.showJson}
+                <pre class="text-xs whitespace-pre-wrap">{JSON.stringify(comment, null, 2)}</pre>
+            {/if}
+            <CommentRenderer {comment} />
+        {/each}
+    </div>
+</div>

src/preview/main.ts

@@ -0,0 +1,8 @@
+import '../app.pcss';
+import Preview from './Preview.svelte';
+
+const app = new Preview({
+    target: document.getElementById('app')!
+});
+
+export default app;

src/preview/states.ts

@@ -0,0 +1,8 @@
+import { writable } from 'svelte/store';
+
+export const state = writable({
+    giftOnly: false,
+    commentLimit: 30,
+    skip: 0,
+    showJson: false
+});

src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+import { OneSDK } from '@onecomme.com/onesdk/OneSDK';
+
+declare global {
+    var OneSDK: OneSDK;
+}

svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+    // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+    // for more information about preprocessors
+    preprocess: [vitePreprocess({})]
+};

tailwind.config.cjs

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config}*/
+const config = {
+    content: ['./src/**/*.{html,js,svelte,ts}'],
+
+    theme: {
+        extend: {}
+    },
+
+    plugins: []
+};
+
+module.exports = config;

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext"],
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "noUnusedLocals": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "lib": ["ESNext"],
+    "types": ["@types/node"]
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { resolve } from 'node:path';
+import { writeFileSync } from 'node:fs';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    base: './',
+    plugins: [svelte()],
+    build: {
+        rollupOptions: {
+            plugins: [
+                {
+                    name: 'inject-onecomme-js',
+                    writeBundle(out, bundle) {
+                        for (const entry of Object.values(bundle)) {
+                            if (!entry.fileName.endsWith('.html') || entry.type !== 'asset') {
+                                continue;
+                            }
+                            const file = resolve(out.dir ?? 'dist', entry.fileName);
+                            writeFileSync(
+                                file,
+                                entry.source
+                                    .toString()
+                                    .replaceAll(
+                                        '<!-- INJECT-ONECOMME-JS -->',
+                                        '<script src="../__origin/js/onesdk.js"></script>'
+                                    )
+                            );
+                        }
+                    }
+                }
+            ]
+        }
+    }
+});