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": true,
+	"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,31 @@
+{
+	"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",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@lucide/svelte": "^0.514.0",
+		"@onecomme.com/onesdk": "^7.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.1.0",
+		"@tailwindcss/vite": "^4.1.8",
+		"@tsconfig/svelte": "^5.0.4",
+		"@types/color": "^3.0.6",
+		"@types/node": "^20.19.0",
+		"prettier": "^3.5.3",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.6.12",
+		"svelte": "^5.33.19",
+		"svelte-check": "^4.2.1",
+		"tailwindcss": "^4.1.8",
+		"tslib": "^2.8.1",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.5"
+	}
+}

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,51 @@
+<script lang="ts">
+	import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+	import { SendHorizontalIcon } from '@lucide/svelte';
+	import RenderComment from '@/components/RenderComment.svelte';
+	let { chats }: { chats: Comment[] } = $props();
+
+	let date = $state(new Date());
+
+	let hour = $derived(date.getHours());
+	let minute = $derived(date.getMinutes());
+
+	let render_chats = $derived([...chats].reverse());
+
+	function pad(str: string | { toString(): string }, char: number): string {
+		const s = str.toString();
+		const diff = char - s.length;
+		if (diff <= 0) return s;
+		return s + '0'.repeat(diff);
+	}
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			date = new Date();
+		}, 1000);
+		return () => clearInterval(interval);
+	});
+</script>
+
+<div class="bg-frame px-30 pt-30 pb-15 rounded-30 h-full w-full flex flex-col gap-15 font-naikai">
+	<div class="grow flex flex-col rounded-15 overflow-hidden bg-background">
+		<div class="bg-status flex flex-row justify-center p-5 text-16 font-bold text-status-text">
+			<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
+		</div>
+		<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">
+			{#each render_chats as chat (chat.id ?? chat)}
+				<RenderComment {chat} />
+			{/each}
+		</div>
+		<div class="px-30 py-15">
+			<div
+				class="rounded-full text-20 text-input-text bg-input px-20 py-10 flex flex-row items-center justify-between gap-10"
+			>
+				<span>回覆...</span>
+				<SendHorizontalIcon class="size-20 text-input-icon" />
+			</div>
+		</div>
+	</div>
+	<div class="flex flex-row justify-center">
+		<div class="size-50 rounded-full bg-background"></div>
+	</div>
+</div>

src/app.css

@@ -0,0 +1,89 @@
+@import 'tailwindcss';
+
+@theme {
+	--spacing: calc(var(--render-scale, 1) * 1px);
+
+	--color-frame: var(--chat-frame, #ffafb5);
+	--color-status: var(--chat-status, #f4f4f4);
+	--color-status-text: var(--chat-status-text, #000000);
+	--color-background: var(--chat-background, #ffffff);
+
+	--color-name: var(--chat-name, #000000);
+	--color-name-moderator: var(--chat-name-moderator, #193cb8);
+	--color-name-owner: var(--chat-name-owner, #a65f00);
+	--color-name-member: var(--chat-name-member, #006045);
+
+	--color-chat-bubble: var(--chat-bubble, #cad1f9);
+	--color-chat-bubble-owner: var(--chat-bubble-owner, #fdebc0);
+	--color-chat-text: var(--chat-text, #000000);
+
+	--color-hint: var(--chat-hint, #8f8f8f);
+
+	--color-input: var(--chat-input, #f4f4f4);
+	--color-input-text: var(--chat-input-text, #8f8f8f);
+
+	--font-naikai: 'NaikaiFont', var(--font-sans);
+}
+
+@utility rounded-* {
+	border-radius: calc(--value(number) * var(--spacing));
+}
+
+@utility text-* {
+	font-size: calc(--value(number) * var(--spacing));
+}
+
+@font-face {
+	font-family: 'NaikaiFont';
+	src:
+		url('./assets/naikai/NaikaiFont-ExtraLight.woff') format('woff'),
+		url('./assets/naikai/NaikaiFont-ExtraLight.woff2') format('woff2');
+	font-weight: 200;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'NaikaiFont';
+	src:
+		url('./assets/naikai/NaikaiFont-Light.woff') format('woff'),
+		url('./assets/naikai/NaikaiFont-Light.woff2') format('woff2');
+	font-weight: 300;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'NaikaiFont';
+	src:
+		url('./assets/naikai/NaikaiFont-Regular.woff') format('woff'),
+		url('./assets/naikai/NaikaiFont-Regular.woff2') format('woff2');
+	font-weight: 400;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'NaikaiFont';
+	src:
+		url('./assets/naikai/NaikaiFont-SemiBold.woff') format('woff'),
+		url('./assets/naikai/NaikaiFont-SemiBold.woff2') format('woff2');
+	font-weight: 600;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'NaikaiFont';
+	src:
+		url('./assets/naikai/NaikaiFont-Bold.woff') format('woff'),
+		url('./assets/naikai/NaikaiFont-Bold.woff2') format('woff2');
+	font-weight: 700;
+	font-display: swap;
+}
+
+@layer base {
+	#app {
+		@apply h-screen w-screen;
+	}
+	:root,
+	body {
+		@apply bg-transparent;
+	}
+}

src/components/RenderComment.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { WrenchIcon } from '@lucide/svelte';
+	import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+
+	let { chat }: { chat: Comment } = $props();
+
+	let author_color = $derived.by(() => {
+		if (chat.data.isOwner) return 'text-name-owner';
+
+		if (chat.service === 'youtube') {
+			if (chat.data.isModerator) return 'text-name-moderator';
+			if (chat.data.isMember) return 'text-name-member';
+		}
+		return 'text-name';
+	});
+
+	let layout = $derived(
+		chat.data.isOwner
+			? ['flex-row-reverse', 'pl-30', 'origin-bottom-right']
+			: ['flex-row', 'pr-30', 'origin-bottom-left']
+	);
+
+	let is_youtube_gift = $derived(chat.service === 'youtube' && chat.data.hasGift);
+	let gift_type = $derived(
+		chat.service === 'youtube' && chat.data.hasGift ? chat.data.giftType : undefined
+	);
+
+	let author_name = $derived(chat.data.displayName || chat.data.name);
+</script>
+
+{#if gift_type === 'giftreceived'}
+	<div class="text-14 text-hint text-center py-5 origin-bottom scale-enter">
+		{chat.data.comment}
+	</div>
+{:else}
+	<div class={[layout, 'flex gap-10 scale-enter py-10']}>
+		<img src={chat.data.originalProfileImage} class="size-40 rounded-full" alt={author_name} />
+		<div
+			class={[
+				'flex flex-col gap-5 grow w-0',
+				chat.data.isOwner ? 'items-end' : 'items-start'
+			]}
+		>
+			<div
+				class={[
+					'text-ellipsis whitespace-nowrap px-5 gap-5 flex flex-row items-center font-semibold text-12 max-w-full',
+					author_color,
+					chat.data.isOwner ? 'justify-end' : 'justify-start'
+				]}
+			>
+				<span class="text-ellipsis whitespace-nowrap">{author_name}</span>
+				{#if chat.service === 'youtube' && chat.data.isModerator}
+					<WrenchIcon class="size-12 min-w-14 min-h-14" />
+				{/if}
+			</div>
+			{#if is_youtube_gift && gift_type === 'supersticker'}
+				<div class="supersticker">
+					{@html chat.data.comment}
+				</div>
+			{:else}
+				<div
+					class={[
+						'px-15 py-10 text-chat-text bubble rounded-15 text-16',
+						chat.data.isOwner ? 'bg-chat-bubble-owner' : 'bg-chat-bubble'
+					]}
+				>
+					{@html chat.data.comment}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	@keyframes scale {
+		0% {
+			transform: scale(0);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	.scale-enter {
+		animation: scale 0.2s ease-out;
+	}
+
+	.bubble :global(img) {
+		display: inline-block;
+		width: calc(16 * var(--spacing));
+		height: calc(16 * var(--spacing));
+	}
+
+	.supersticker :global(img) {
+		width: calc(72 * var(--spacing));
+		height: calc(72 * var(--spacing));
+	}
+</style>

src/lib/chats.svelte.ts

@@ -0,0 +1,12 @@
+import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+
+let value = $state.raw<Comment[]>([]);
+
+export const chats = {
+	get value() {
+		return value;
+	},
+	set value(newValue: Comment[]) {
+		value = newValue;
+	}
+};

src/main.ts

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

src/preview/Preview.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+	import data from '@/preview/chats.json';
+	import { state } from '@/preview/states.svelte';
+	import App from '@/App.svelte';
+
+	let filtered = $derived(
+		state.giftOnly ? data.filter((c) => c.data.hasGift) : data
+	) as Comment[];
+	let chats = $derived(filtered.slice(state.skip, state.skip + state.commentLimit));
+</script>
+
+<div class="p-8 w-screen h-screen flex flex-col gap-16">
+	<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="grow">
+		<App {chats} />
+	</div>
+</div>

src/preview/main.ts

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

src/preview/states.svelte.ts

@@ -0,0 +1,6 @@
+export const state = $state({
+	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;
+}

tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"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,
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"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,42 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import tailwindcss from '@tailwindcss/vite';
+import { resolve } from 'node:path';
+import { writeFileSync } from 'node:fs';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	base: './',
+	plugins: [tailwindcss(), 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>'
+									)
+							);
+						}
+					}
+				}
+			]
+		}
+	},
+	resolve: {
+		alias: {
+			'@': resolve(__dirname, 'src')
+		}
+	}
+});