From f0579a4fe22a3baf4ba1652ee63d4a9dd0ee97c7 Mon Sep 17 00:00:00 2001 From: CoolElectronics Date: Sun, 13 Aug 2023 23:57:06 -0400 Subject: [PATCH] add tailwind and svelte-m3 to the frontend --- client/src/AdriftClient.ts | 9 -- frontend/package.json | 5 + frontend/postcss.config.cjs | 13 ++ frontend/src/App.svelte | 153 +++++++++++++++--- frontend/src/entry.ts | 1 + frontend/src/index.css | 3 + frontend/svelte.config.cjs | 1 + frontend/tailwind.config.js | 11 ++ pnpm-lock.yaml | 304 +++++++++++++++++++++++++++++++++--- 9 files changed, 448 insertions(+), 52 deletions(-) create mode 100644 frontend/postcss.config.cjs create mode 100644 frontend/src/index.css create mode 100644 frontend/tailwind.config.js diff --git a/client/src/AdriftClient.ts b/client/src/AdriftClient.ts index 1b89b79..a4f3e93 100644 --- a/client/src/AdriftClient.ts +++ b/client/src/AdriftClient.ts @@ -17,15 +17,6 @@ import { Connection } from "./Connection"; // } // } // -const WebSocketFields = { - prototype: { - send: WebSocket.prototype.send, - }, - CLOSED: WebSocket.CLOSED, - CLOSING: WebSocket.CLOSING, - CONNECTING: WebSocket.CONNECTING, - OPEN: WebSocket.OPEN, -}; export class AdriftBareClient extends Client { constructor(private connection: Connection) { diff --git a/frontend/package.json b/frontend/package.json index 74ed20c..1573fc8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "dependencies": { "@rollup/browser": "^3.28.0", "@sveltejs/vite-plugin-svelte": "^2.4.5", + "autoprefixer": "^10.4.15", "bare-client-custom": "workspace:*", "client": "workspace:*", "corium": "file:../corium", @@ -22,9 +23,13 @@ "esbuild-plugin-inline-import": "^1.0.1", "firebase": "^10.1.0", "firebase-config": "workspace:*", + "m3-svelte": "^2.0.3", + "postcss": "^8.4.27", + "postcss-load-config": "^4.0.1", "protocol": "workspace:*", "svelte": "^4.2.0", "svelte-preprocess": "^5.0.4", + "tailwindcss": "^3.3.3", "typescript": "^5.1.6", "vite": "^4.4.9", "vite-plugin-singlefile": "git://github.com/CoolElectronics/vite-plugin-singlefile.git", diff --git a/frontend/postcss.config.cjs b/frontend/postcss.config.cjs new file mode 100644 index 0000000..9689985 --- /dev/null +++ b/frontend/postcss.config.cjs @@ -0,0 +1,13 @@ +const tailwindcss = require("tailwindcss"); +const autoprefixer = require("autoprefixer"); + +const config = { + plugins: [ + //Some plugins, like tailwindcss/nesting, need to run before Tailwind, + tailwindcss(), + //But others, like autoprefixer, need to run after, + autoprefixer, + ], +}; + +module.exports = config; \ No newline at end of file diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 1e9cde0..5463ad5 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -10,6 +10,7 @@ DevWsTransport, RTCTransport, } from "client"; + import { Button, Card, StyleFromScheme, TextField } from "m3-svelte"; // note: even though we import firebase, due to the tree shaking, it will only run if we use "auth" so if ADRIFT_DEV is set it won't import import { auth } from "firebase-config"; import { signInWithEmailAndPassword } from "firebase/auth"; @@ -28,7 +29,7 @@ let ready = false; - let dynamic = false; + let useDynamic = false; let url: string; let proxyIframe: HTMLIFrameElement; @@ -129,10 +130,10 @@ function visitURL(url: string) { if (!import.meta.env.VITE_ADRIFT_SINGLEFILE) { - let path = dynamic + let path = useDynamic ? `/service/route?url=${url}` : `${__uv$config.prefix}${__uv$config.encodeUrl(url)}`; - console.log(dynamic); + console.log(useDynamic); console.log(path); proxyIframe.src = path; @@ -165,37 +166,151 @@ -
- - -
+ {#if !import.meta.env.VITE_ADRIFT_SINGLEFILE} +
+ + +
+ {/if}