commit 5db4d61d648780670c1a8406a5478ad62d859721 Author: 0nepeop1e Date: Wed Jun 12 14:34:28 2024 +0800 init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.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? diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..f5e74d7 --- /dev/null +++ b/.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 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..cc41cea --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..6bc6b0a --- /dev/null +++ b/.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 + } + } + ] +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..bdef820 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["svelte.svelte-vscode"] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..4c11adf --- /dev/null +++ b/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); +``` diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..5ecd043 Binary files /dev/null and b/bun.lockb differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..728be1d --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + Chat + + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..80360d8 --- /dev/null +++ b/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" + } +} diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..e4ab9eb --- /dev/null +++ b/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; diff --git a/src/App.svelte b/src/App.svelte new file mode 100644 index 0000000..23bb523 --- /dev/null +++ b/src/App.svelte @@ -0,0 +1,79 @@ + + +
+ {#each [...$chats].reverse() as chat (`${chat.service}/${chat.data.id}`)} + {@const author = chat.data.displayName ?? chat.data.name} +
+
+ {author} +
+
+
+ {author} + {#each chat.data.badges as badge} + {badge.label} + {/each} +
+
+ {@html chat.data.comment} +
+
+
+ {/each} +
+ + diff --git a/src/app.pcss b/src/app.pcss new file mode 100644 index 0000000..4f11869 --- /dev/null +++ b/src/app.pcss @@ -0,0 +1,10 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + html, + body { + background-color: transparent; + } +} diff --git a/src/chats.ts b/src/chats.ts new file mode 100644 index 0000000..5046097 --- /dev/null +++ b/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([]); diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..a658236 --- /dev/null +++ b/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; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..60edf37 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,7 @@ +/// +/// +import { OneSDK } from '@onecomme.com/onesdk/OneSDK'; + +declare global { + var OneSDK: OneSDK; +} diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..560d5b9 --- /dev/null +++ b/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({})] +}; diff --git a/tailwind.config.cjs b/tailwind.config.cjs new file mode 100644 index 0000000..aac8bac --- /dev/null +++ b/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; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..b1c59f3 --- /dev/null +++ b/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" }] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..b79b8c4 --- /dev/null +++ b/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"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..9373e7c --- /dev/null +++ b/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( + '', + '' + ) + ); + } + } + } + ] + } + } +});