From 2eb6a9c0bacea44e3cfac4eb2d85f4000f73b346 Mon Sep 17 00:00:00 2001 From: Santiago Lo Coco Date: Tue, 23 Apr 2024 17:15:16 +0200 Subject: [PATCH] Fix lots of bugs and refactor --- .gitignore | 2 +- .prettierignore | 4 + .prettierrc | 9 + package-lock.json | 128 ++++----- package.json | 14 +- postcss.config.js | 2 +- src/app.d.ts | 2 +- src/lib/components/ThemePicker.svelte | 35 +++ src/routes/+layout.svelte | 32 ++- src/routes/+page.svelte | 58 ++--- src/routes/timer/+page.svelte | 360 +++++++++++++------------- svelte.config.js | 21 +- tailwind.config.js | 6 +- vite.config.ts | 6 +- 14 files changed, 359 insertions(+), 320 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 src/lib/components/ThemePicker.svelte diff --git a/.gitignore b/.gitignore index 6ac093e..e876885 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,4 @@ vite.config.ts.timestamp-* /src/lib/generated /tailwind.css *.svelte-kit - +/.vite diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..75dc494 --- /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..a72947e --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "semi": false, + "useTabs": false, + "singleQuote": false, + "trailingComma": "es5", + "printWidth": 80, + "plugins": ["prettier-plugin-svelte"], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] +} diff --git a/package-lock.json b/package-lock.json index d05c628..2e35d51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,20 +8,20 @@ "name": "breakoften", "version": "0.0.1", "devDependencies": { - "@sveltejs/adapter-auto": "^3.0.0", - "@sveltejs/kit": "^2.0.0", - "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@sveltejs/adapter-auto": "^3.1.1", + "@sveltejs/kit": "^2.5.2", + "@sveltejs/vite-plugin-svelte": "^3.0.2", "autoprefixer": "^10.4.19", "postcss": "^8.4.38", "prettier": "^3.2.5", "prettier-plugin-svelte": "^3.2.3", - "svelte": "^4.2.7", + "svelte": "5.0.0-next.54", "svelte-check": "^3.6.0", "tailwindcss": "^3.4.3", "tslib": "^2.4.1", "tw-colors": "^3.3.1", "typescript": "^5.0.0", - "vite": "^5.0.3" + "vite": "^5.1.4" } }, "node_modules/@alloc/quick-lru": { @@ -824,6 +824,18 @@ "vite": "^5.0.0" } }, + "node_modules/@sveltejs/vite-plugin-svelte/node_modules/svelte-hmr": { + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz", + "integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==", + "dev": true, + "engines": { + "node": "^12.20 || ^14.13.1 || >= 16" + }, + "peerDependencies": { + "svelte": "^3.19.0 || ^4.0.0" + } + }, "node_modules/@types/cookie": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", @@ -854,6 +866,15 @@ "node": ">=0.4.0" } }, + "node_modules/acorn-typescript": { + "version": "1.4.13", + "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz", + "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==", + "dev": true, + "peerDependencies": { + "acorn": ">=8.9.0" + } + }, "node_modules/ansi-regex": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", @@ -1101,19 +1122,6 @@ "fsevents": "~2.3.2" } }, - "node_modules/code-red": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", - "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==", - "dev": true, - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15", - "@types/estree": "^1.0.1", - "acorn": "^8.10.0", - "estree-walker": "^3.0.3", - "periscopic": "^3.1.0" - } - }, "node_modules/color": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", @@ -1193,19 +1201,6 @@ "node": ">= 8" } }, - "node_modules/css-tree": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dev": true, - "dependencies": { - "mdn-data": "2.0.30", - "source-map-js": "^1.0.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" - } - }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -1357,13 +1352,14 @@ "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==", "dev": true }, - "node_modules/estree-walker": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", - "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "node_modules/esrap": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.1.tgz", + "integrity": "sha512-dhkcOLfN/aDdMFI1iwPEcy/XqAZzGNfgfEJjZozy2tia6u0dQoZyXzkRshHTckuNsM+c0CYQndY+uRFe3N+AIQ==", "dev": true, "dependencies": { - "@types/estree": "^1.0.0" + "@jridgewell/sourcemap-codec": "^1.4.15", + "@types/estree": "^1.0.1" } }, "node_modules/fast-glob": { @@ -1739,12 +1735,6 @@ "@jridgewell/sourcemap-codec": "^1.4.15" } }, - "node_modules/mdn-data": { - "version": "2.0.30", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", - "dev": true - }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -1974,17 +1964,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/periscopic": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz", - "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==", - "dev": true, - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^3.0.0", - "is-reference": "^3.0.0" - } - }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -2641,28 +2620,27 @@ } }, "node_modules/svelte": { - "version": "4.2.15", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.15.tgz", - "integrity": "sha512-j9KJSccHgLeRERPlhMKrCXpk2TqL2m5Z+k+OBTQhZOhIdCCd3WfqV+ylPWeipEwq17P/ekiSFWwrVQv93i3bsg==", + "version": "5.0.0-next.54", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.54.tgz", + "integrity": "sha512-ik+hXhlKdZozs+EruogLXb5PVZD8X8ekNBwQGBYcTpj1FD0sgWZxvUEQV4m0rE5LaUL3J5cmO4e8daOuPxIK/A==", "dev": true, "dependencies": { "@ampproject/remapping": "^2.2.1", "@jridgewell/sourcemap-codec": "^1.4.15", - "@jridgewell/trace-mapping": "^0.3.18", - "@types/estree": "^1.0.1", - "acorn": "^8.9.0", + "@types/estree": "^1.0.5", + "acorn": "^8.11.3", + "acorn-typescript": "^1.4.13", "aria-query": "^5.3.0", "axobject-query": "^4.0.0", - "code-red": "^1.0.3", - "css-tree": "^2.3.1", - "estree-walker": "^3.0.3", - "is-reference": "^3.0.1", + "esm-env": "^1.0.0", + "esrap": "^1.2.1", + "is-reference": "^3.0.2", "locate-character": "^3.0.0", - "magic-string": "^0.30.4", - "periscopic": "^3.1.0" + "magic-string": "^0.30.5", + "zimmerframe": "^1.1.2" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/svelte-check": { @@ -2687,18 +2665,6 @@ "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0" } }, - "node_modules/svelte-hmr": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz", - "integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==", - "dev": true, - "engines": { - "node": "^12.20 || ^14.13.1 || >= 16" - }, - "peerDependencies": { - "svelte": "^3.19.0 || ^4.0.0" - } - }, "node_modules/svelte-preprocess": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz", @@ -3129,6 +3095,12 @@ "engines": { "node": ">= 14" } + }, + "node_modules/zimmerframe": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz", + "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==", + "dev": true } } } diff --git a/package.json b/package.json index 75cd3fe..1e7228d 100644 --- a/package.json +++ b/package.json @@ -7,23 +7,25 @@ "build": "vite build", "preview": "vite preview", "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", + "lint": "prettier --check .", + "format": "prettier --write ." }, "devDependencies": { - "@sveltejs/adapter-auto": "^3.0.0", - "@sveltejs/kit": "^2.0.0", - "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@sveltejs/adapter-auto": "^3.1.1", + "@sveltejs/kit": "^2.5.2", + "@sveltejs/vite-plugin-svelte": "^3.0.2", "autoprefixer": "^10.4.19", "postcss": "^8.4.38", "prettier": "^3.2.5", "prettier-plugin-svelte": "^3.2.3", - "svelte": "^4.2.7", + "svelte": "5.0.0-next.54", "svelte-check": "^3.6.0", "tailwindcss": "^3.4.3", "tslib": "^2.4.1", "tw-colors": "^3.3.1", "typescript": "^5.0.0", - "vite": "^5.0.3" + "vite": "^5.1.4" }, "type": "module" } diff --git a/postcss.config.js b/postcss.config.js index 2aa7205..2e7af2b 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -3,4 +3,4 @@ export default { tailwindcss: {}, autoprefixer: {}, }, -}; +} diff --git a/src/app.d.ts b/src/app.d.ts index ede601a..367926a 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -10,4 +10,4 @@ declare global { } } -export {}; +export {} diff --git a/src/lib/components/ThemePicker.svelte b/src/lib/components/ThemePicker.svelte new file mode 100644 index 0000000..bd6e097 --- /dev/null +++ b/src/lib/components/ThemePicker.svelte @@ -0,0 +1,35 @@ + + + + +{#key theme} + +{/key} + + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 25cef10..790effd 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,27 @@ - - - + + +
+ + + +
+ + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e83482a..bb2a7a1 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,46 +1,26 @@ - - - -
-

Welcome to the Prevent Computer Vision Syndrome App

- +

Welcome to BreakOften!

+ Start Timer
diff --git a/src/routes/timer/+page.svelte b/src/routes/timer/+page.svelte index e34ba9f..29a674e 100644 --- a/src/routes/timer/+page.svelte +++ b/src/routes/timer/+page.svelte @@ -1,180 +1,180 @@ - - - - -
-
-

- Prevent Computer Vision Syndrome -

-

{$state}

- {#if $state !== "Ready"} -

Time left until Ready: {$timeLeftDisplay}

- {:else} -

Time left until break: {$timeLeftDisplay}

- {/if} - {#if $state !== "Ready"} - - {/if} -
-
- - + + + + +
+
+

+ Prevent CVS +

+ {#if $state !== "Ready"} +

{$state}

+

Time left until end of break: {$timeLeftDisplay}

+ {:else} +

Time left until break: {$timeLeftDisplay}

+ {/if} + {#if $state !== "Ready"} + + {/if} +
+
+ + + diff --git a/svelte.config.js b/svelte.config.js index 973bdc9..5f1cfd7 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,8 +1,21 @@ -import adapter from "@sveltejs/adapter-auto"; -import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; +import adapter from "@sveltejs/adapter-auto" +import { vitePreprocess } from "@sveltejs/vite-plugin-svelte" /** @type {import('@sveltejs/kit').Config} */ const config = { + + // vitePlugin: { + // dynamicCompileOptions({filename}){ + // if(filename.includes('node_modules')){ + // return {runes: undefined} // or false, check what works + // } + // }, + // }, + + // compilerOptions: { + // runes: true + // }, + // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors preprocess: vitePreprocess(), @@ -13,6 +26,6 @@ const config = { // See https://kit.svelte.dev/docs/adapters for more information about adapters. adapter: adapter(), }, -}; +} -export default config; +export default config diff --git a/tailwind.config.js b/tailwind.config.js index a58bd60..410694f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,13 +12,15 @@ export default { light: { background: colors.slate[50], foreground: colors.slate[950], - primary: colors.yellow[600], + primary: colors.blue[600], + primaryLight: colors.blue[800], }, dark: { background: colors.slate[950], foreground: colors.slate[50], primary: colors.pink[600], + primaryLight: colors.pink[800], }, }), ], -}; +} diff --git a/vite.config.ts b/vite.config.ts index 80864b9..5b29b3a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,6 @@ -import { sveltekit } from "@sveltejs/kit/vite"; -import { defineConfig } from "vite"; +import { sveltekit } from "@sveltejs/kit/vite" +import { defineConfig } from "vite" export default defineConfig({ plugins: [sveltekit()], -}); +})