init

.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,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"
+  },
+  "devDependencies": {
+    "@onecomme.com/onesdk": "^5.2.1",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "@types/node": "^20.14.2",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "postcss-load-config": "^5.0.2",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.6.3",
+    "svelte": "^4.2.11",
+    "svelte-check": "^3.6.4",
+    "tailwindcss": "^3.3.6",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4",
+    "husky": "^8.0.0"
+  }
+}

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;

src/App.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+    import { chats } from './chats';
+    import { scale } from 'svelte/transition';
+
+    function authorColor(comment: Comment) {
+        if (comment.service === 'youtube') {
+            if (comment.data.isModerator) return 'text-blue-300';
+            if (comment.data.isMember) return 'text-green-300';
+        }
+        return 'text-zinc-200';
+    }
+</script>
+
+<div class="main flex flex-col-reverse gap-2 h-screen w-screen overflow-hidden">
+    {#each [...$chats].reverse() as chat (`${chat.service}/${chat.data.id}`)}
+        {@const author = chat.data.displayName ?? chat.data.name}
+        <div
+            class="flex flex-row gap-4 p-2 box-border origin-top-left"
+            in:scale={{ duration: 200 }}
+        >
+            <div class="w-10 min-w-10 relative">
+                <img
+                    src={chat.data.originalProfileImage}
+                    alt={author}
+                    class="w-10 h-10 rounded-full absolute -top-3"
+                />
+            </div>
+            <div
+                class="bubble relative flex-grow flex flex-col gap-1 bg-slate-700 bg-opacity-80 text-gray-50 px-4 py-2 rounded-b-xl rounded-tr-xl"
+            >
+                <div class="text-xs font-bold gap-0.5 items-center {authorColor(chat)}">
+                    {author}
+                    {#each chat.data.badges as badge}
+                        <img
+                            class="h-3 w-3 inline-block mx-0.5"
+                            src={badge.url}
+                            alt={badge.label}
+                        />
+                    {/each}
+                </div>
+                <div class="comment-container">
+                    {@html chat.data.comment}
+                </div>
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style lang="postcss">
+    .comment-container {
+        :global(img) {
+            @apply mx-0.5 h-6 w-6;
+            display: inline-block;
+        }
+    }
+    .bubble {
+        &::before {
+            @apply -left-2 top-0 block h-2 w-2 bg-slate-700 bg-opacity-80;
+            content: ' ';
+            position: absolute;
+            mask-image: linear-gradient(
+                45deg,
+                rgba(0, 0, 0, 0) 0%,
+                rgba(0, 0, 0, 0) 50%,
+                rgba(0, 0, 0, 1) 50%,
+                rgba(0, 0, 0, 1) 100%
+            );
+        }
+    }
+    .main {
+        mask-image: linear-gradient(
+            180deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 1) 50%,
+            rgba(0, 0, 0, 1) 100%
+        );
+    }
+</style>

src/app.pcss

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    html,
+    body {
+        background-color: transparent;
+    }
+}

src/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/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 './chats';
+
+if (import.meta.env.DEV) {
+    globalThis.OneSDK = (await import('@onecomme.com/onesdk')).default;
+}
+
+OneSDK.subscribe({
+    action: 'comments',
+    callback: ((res: Comment[]) => {
+        chats.set(res);
+    }) as any
+});
+OneSDK.setup({
+    commentLimit: 30
+});
+OneSDK.connect();
+
+const app = new App({
+    target: document.getElementById('app')!
+});
+
+export default app;

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>'
+                                    )
+                            );
+                        }
+                    }
+                }
+            ]
+        }
+    }
+});