arithefirst/svchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Update .prettierrc

Browse Source
This commit is contained in:
April Hall 2025-01-04 16:25:58 -05:00
parent bc1094d70c
commit 158f9e097d
Signed by: arithefirst
GPG Key ID: 4508A15C4DB91C5B
19 changed files with 223 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
.prettierrc
View File

@ -1,15 +1,18 @@
{ {
"useTabs": true, "tabWidth": 2,
"singleQuote": true, "printWidth": 150,
"trailingComma": "none", "useTabs": false,
"printWidth": 100, "semi": true,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], "singleQuote": true,
"overrides": [ "trailingComma": "all",
{ "bracketSameLine": true,
"files": "*.svelte", "plugins": ["prettier-plugin-svelte"],
"options": { "overrides": [
"parser": "svelte" {
} "files": "*.svelte",
} "options": {
] "parser": "svelte"
}
}
]
} }

2
README.md
View File

@ -1,5 +1,7 @@
# SVChat # SVChat
A is a simple chat app built with SvelteKit, Drizzle ORM, and PostgreSQL A is a simple chat app built with SvelteKit, Drizzle ORM, and PostgreSQL
## Techstack ## Techstack
![Techstack](https://go-skill-icons.vercel.app/api/icons?i=daisyui,postgresql,svelte,tailwindcss,ts) ![Techstack](https://go-skill-icons.vercel.app/api/icons?i=daisyui,postgresql,svelte,tailwindcss,ts)

14
drizzle.config.ts
View File

@ -2,13 +2,13 @@ import { defineConfig } from 'drizzle-kit';
if (!process.env.DATABASE_URL) throw new Error('DATABASE_URL is not set'); if (!process.env.DATABASE_URL) throw new Error('DATABASE_URL is not set');
export default defineConfig({ export default defineConfig({
schema: './src/lib/server/db/schema.ts', schema: './src/lib/server/db/schema.ts',
dbCredentials: { dbCredentials: {
url: process.env.DATABASE_URL url: process.env.DATABASE_URL,
}, },
verbose: true, verbose: true,
strict: true, strict: true,
dialect: 'postgresql' dialect: 'postgresql',
}); });

44
eslint.config.js
View File

@ -8,27 +8,27 @@ import ts from 'typescript-eslint';
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url)); const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
export default ts.config( export default ts.config(
includeIgnoreFile(gitignorePath), includeIgnoreFile(gitignorePath),
js.configs.recommended, js.configs.recommended,
...ts.configs.recommended, ...ts.configs.recommended,
...svelte.configs['flat/recommended'], ...svelte.configs['flat/recommended'],
prettier, prettier,
...svelte.configs['flat/prettier'], ...svelte.configs['flat/prettier'],
{ {
languageOptions: { languageOptions: {
globals: { globals: {
...globals.browser, ...globals.browser,
...globals.node ...globals.node,
} },
} },
}, },
{ {
files: ['**/*.svelte'], files: ['**/*.svelte'],
languageOptions: { languageOptions: {
parserOptions: { parserOptions: {
parser: ts.parser parser: ts.parser,
} },
} },
} },
); );

92
package.json
View File

@ -1,48 +1,48 @@
{ {
"name": "chatapp", "name": "chatapp",
"private": true, "private": true,
"version": "0.0.1", "version": "0.0.1",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"start": "PORT=3005 tsm ./prodServer.ts", "start": "PORT=3005 tsm ./prodServer.ts",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"format": "prettier --write .", "format": "prettier --write .",
"lint": "prettier --check . && eslint .", "lint": "prettier --check . && eslint .",
"db:migrate": "drizzle-kit generate --config drizzle.config.ts && drizzle-kit push --config drizzle.config.ts", "db:migrate": "drizzle-kit generate --config drizzle.config.ts && drizzle-kit push --config drizzle.config.ts",
"db:studio": "drizzle-kit studio" "db:studio": "drizzle-kit studio"
}, },
"devDependencies": { "devDependencies": {
"@eslint/compat": "^1.2.3", "@eslint/compat": "^1.2.3",
"@sveltejs/adapter-node": "^5.2.11", "@sveltejs/adapter-node": "^5.2.11",
"@sveltejs/kit": "^2.0.0", "@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0", "@sveltejs/vite-plugin-svelte": "^4.0.0",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"drizzle-kit": "^0.22.0", "drizzle-kit": "^0.22.0",
"eslint": "^9.7.0", "eslint": "^9.7.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.36.0", "eslint-plugin-svelte": "^2.36.0",
"globals": "^15.0.0", "globals": "^15.0.0",
"prettier": "^3.3.2", "prettier": "^3.3.2",
"prettier-plugin-svelte": "^3.2.6", "prettier-plugin-svelte": "^3.2.6",
"prettier-plugin-tailwindcss": "^0.6.5", "prettier-plugin-tailwindcss": "^0.6.5",
"svelte": "^5.0.0", "svelte": "^5.0.0",
"svelte-check": "^4.0.0", "svelte-check": "^4.0.0",
"tailwindcss": "^3.4.9", "tailwindcss": "^3.4.9",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"typescript-eslint": "^8.0.0", "typescript-eslint": "^8.0.0",
"vite": "^5.4.11" "vite": "^5.4.11"
}, },
"dependencies": { "dependencies": {
"daisyui": "^4.12.23", "daisyui": "^4.12.23",
"drizzle-orm": "^0.33.0", "drizzle-orm": "^0.33.0",
"express": "^4.21.2", "express": "^4.21.2",
"postgres": "^3.4.4", "postgres": "^3.4.4",
"socket.io": "^4.8.1", "socket.io": "^4.8.1",
"socket.io-client": "^4.8.1", "socket.io-client": "^4.8.1",
"tsm": "^2.3.0" "tsm": "^2.3.0"
} }
} }

8
postcss.config.js
View File

@ -1,6 +1,6 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {} autoprefixer: {},
} },
}; };

26
prodServer.ts
View File

@ -8,23 +8,23 @@ const server = createServer(app);
const io = new Server(server); const io = new Server(server);
io.on('connection', (socket) => { io.on('connection', (socket) => {
console.log(`[ws:kit] client connected (${socket.id})`); console.log(`[ws:kit] client connected (${socket.id})`);
io!.emit('message', `Hello from SvelteKit ${new Date().toLocaleString()} (${socket.id})`); io!.emit('message', `Hello from SvelteKit ${new Date().toLocaleString()} (${socket.id})`);
socket.on('disconnect', () => { socket.on('disconnect', () => {
io!.emit('message', `client disconnected (${socket.id})`) io!.emit('message', `client disconnected (${socket.id})`);
console.log(`[ws:kit] client disconnected (${socket.id})`); console.log(`[ws:kit] client disconnected (${socket.id})`);
}); });
}); });
app.use((req, res, next) => { app.use((req, res, next) => {
if (req.path.startsWith('/socket.io/')) { if (req.path.startsWith('/socket.io/')) {
next(); next();
} else { } else {
handler(req, res); handler(req, res);
} }
}); });
server.listen(3005, () => { server.listen(3005, () => {
console.log('Listening on http://0.0.0.0:3005'); console.log('Listening on http://0.0.0.0:3005');
}); });

14
src/app.d.ts vendored
View File

@ -1,13 +1,13 @@
// See https://svelte.dev/docs/kit/types#app.d.ts // See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces // for information about these interfaces
declare global { declare global {
namespace App { namespace App {
// interface Error {} // interface Error {}
// interface Locals {} // interface Locals {}
// interface PageData {} // interface PageData {}
// interface PageState {} // interface PageState {}
// interface Platform {} // interface Platform {}
} }
} }
export {}; export {};

18
src/app.html
View File

@ -1,11 +1,11 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<!-- <!--
SVChat -- A is a simple chat app built with SvelteKit, Drizzle ORM, and PostgreSQL SVChat -- A is a simple chat app built with SvelteKit, Drizzle ORM, and PostgreSQL
@ -25,7 +25,7 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
--> -->
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

16
src/lib/hooks.server.ts
View File

@ -5,11 +5,11 @@ import { startupSocketIOServer } from '$lib/websocketConfig';
let io: SocketIOServer | undefined; let io: SocketIOServer | undefined;
export const handle = (async ({ event, resolve }) => { export const handle = (async ({ event, resolve }) => {
if (!building) { if (!building) {
startupSocketIOServer(event.locals.httpServer); startupSocketIOServer(event.locals.httpServer);
event.locals.io = io; event.locals.io = io;
} }
return resolve(event, { return resolve(event, {
filterSerializedResponseHeaders: (name) => name === 'content-type' filterSerializedResponseHeaders: (name) => name === 'content-type',
}); });
}) satisfies Handle; }) satisfies Handle;

6
src/lib/server/db/schema.ts
View File

@ -1,9 +1,9 @@
import { pgTable, uuid, text } from 'drizzle-orm/pg-core'; import { pgTable, uuid, text } from 'drizzle-orm/pg-core';
export const users = pgTable('users', { export const users = pgTable('users', {
id: uuid('id').primaryKey(), id: uuid('id').primaryKey(),
username: text('username'), username: text('username'),
displayname: text('display_name'), displayname: text('display_name'),
salt: text('salt'), salt: text('salt'),
hash: text('hash') hash: text('hash'),
}); });

2
src/lib/server/webSocketUtils.ts
View File

@ -10,7 +10,7 @@ export const GlobalThisWSS = Symbol.for('sveltekit.wss');
export interface ExtendedWebSocket extends WebSocketBase { export interface ExtendedWebSocket extends WebSocketBase {
socketId: string; socketId: string;
// userId: string; // userId: string;
}; }
// You can define server-wide functions or class instances here // You can define server-wide functions or class instances here
// export interface ExtendedServer extends Server<ExtendedWebSocket> {}; // export interface ExtendedServer extends Server<ExtendedWebSocket> {};

25
src/lib/websocketConfig.ts
View File

@ -3,18 +3,17 @@ import type { HttpServer } from 'vite';
let io: SocketIOServer | undefined; let io: SocketIOServer | undefined;
export function startupSocketIOServer(httpServer: HttpServer | null) { export function startupSocketIOServer(httpServer: HttpServer | null) {
if (io) return; if (io) return;
console.log('[ws:kit] setup'); console.log('[ws:kit] setup');
io = new SocketIOServer(httpServer); io = new SocketIOServer(httpServer);
io.on('connection', (socket) => { io.on('connection', (socket) => {
console.log(`[ws:kit] client connected (${socket.id})`); console.log(`[ws:kit] client connected (${socket.id})`);
io!.emit('message', `Hello from SvelteKit ${new Date().toLocaleString()} (${socket.id})`); io!.emit('message', `Hello from SvelteKit ${new Date().toLocaleString()} (${socket.id})`);
socket.on('disconnect', () => { socket.on('disconnect', () => {
io!.emit('message', `client disconnected (${socket.id})`) io!.emit('message', `client disconnected (${socket.id})`);
console.log(`[ws:kit] client disconnected (${socket.id})`); console.log(`[ws:kit] client disconnected (${socket.id})`);
}); });
}); });
} }

4
src/routes/+layout.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import '../app.css'; import '../app.css';
let { children } = $props(); let { children } = $props();
</script> </script>
{@render children()} {@render children()}

62
src/routes/+page.svelte
View File

@ -1,44 +1,42 @@
<script lang="ts"> <script lang="ts">
import { io } from 'socket.io-client'; import { io } from 'socket.io-client';
let socket: ReturnType<typeof io> | null = null; let socket: ReturnType<typeof io> | null = null;
let log: string[] = []; let log: string[] = [];
function logEvent(str: string) { function logEvent(str: string) {
log = [...log, str]; log = [...log, str];
} }
function establishSocketIOConnection() { function establishSocketIOConnection() {
if (socket) return; if (socket) return;
socket = io(); socket = io();
socket.on('connect', () => { socket.on('connect', () => {
console.log('[ws] connection open'); console.log('[ws] connection open');
logEvent('[ws] connection open'); logEvent('[ws] connection open');
}); });
socket.on('disconnect', () => { socket.on('disconnect', () => {
console.log('[ws] connection closed'); console.log('[ws] connection closed');
logEvent('[ws] connection closed'); logEvent('[ws] connection closed');
}); });
socket.on('message', (data: string) => { socket.on('message', (data: string) => {
console.log('[ws] message received', data); console.log('[ws] message received', data);
logEvent(`[ws] message received: ${data}`); logEvent(`[ws] message received: ${data}`);
}); });
} }
</script> </script>
<main> <main>
<h1 class="text-lg"># SvelteKit with Socket.IO Integration</h1> <h1 class="text-lg"># SvelteKit with Socket.IO Integration</h1>
<button class="btn btn-primary" on:click={() => establishSocketIOConnection()}> <button class="btn btn-primary" on:click={() => establishSocketIOConnection()}> Establish Socket.IO connection </button>
Establish Socket.IO connection
</button>
<ul> <ul>
{#each log as event} {#each log as event}
<li>{event}</li> <li>{event}</li>
{/each} {/each}
</ul> </ul>
</main> </main>

18
svelte.config.js
View File

@ -3,16 +3,16 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
// Consult https://svelte.dev/docs/kit/integrations // Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors // for more information about preprocessors
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
kit: { kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter. // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters. // See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter() adapter: adapter(),
} },
}; };
export default config; export default config;

4
tailwind.config.ts
View File

@ -2,6 +2,6 @@ import type { Config } from 'tailwindcss';
import daisyui from 'daisyui'; import daisyui from 'daisyui';
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
plugins: [daisyui] plugins: [daisyui],
} satisfies Config; } satisfies Config;

34
tsconfig.json
View File

@ -1,19 +1,19 @@
{ {
"extends": "./.svelte-kit/tsconfig.json", "extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": true,
"esModuleInterop": true, "esModuleInterop": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"skipLibCheck": true, "skipLibCheck": true,
"sourceMap": true, "sourceMap": true,
"strict": true, "strict": true,
"moduleResolution": "bundler" "moduleResolution": "bundler"
} }
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
// //
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in // from the referenced tsconfig.json - TypeScript does not merge them in
} }

26
vite.config.ts
View File

@ -3,16 +3,16 @@ import { defineConfig } from 'vite';
import { startupSocketIOServer } from './src/lib/websocketConfig'; import { startupSocketIOServer } from './src/lib/websocketConfig';
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
sveltekit(), sveltekit(),
{ {
name: 'integratedSocketIOServer', name: 'integratedSocketIOServer',
configureServer(server) { configureServer(server) {
startupSocketIOServer(server.httpServer); startupSocketIOServer(server.httpServer);
}, },
configurePreviewServer(server) { configurePreviewServer(server) {
startupSocketIOServer(server.httpServer); startupSocketIOServer(server.httpServer);
} },
}, },
] ],
}); });