From 9bb26c1279d3c2edc66ece225c23890eb4a0694f Mon Sep 17 00:00:00 2001 From: Reinaldy Rafli Date: Fri, 9 Jul 2021 22:44:24 +0700 Subject: [PATCH] style: config prettier --- client/.prettierrc | 10 +- client/package.json | 90 +++---- client/src/app.postcss | 110 -------- client/src/hooks.ts | 26 +- client/src/lib/Counter/index.svelte | 156 +++++------ client/src/lib/Header/index.svelte | 198 +++++++------- client/src/lib/form.ts | 92 +++---- client/src/lib/types.d.ts | 2 +- client/src/routes/__layout.svelte | 70 ++--- client/src/routes/about.svelte | 64 ++--- client/src/routes/index.svelte | 78 +++--- client/src/routes/todos/[uid].json.ts | 10 +- client/src/routes/todos/_api.ts | 54 ++-- client/src/routes/todos/index.json.ts | 32 +-- client/src/routes/todos/index.svelte | 363 +++++++++++++------------- client/svelte.config.js | 34 ++- client/tsconfig.json | 44 ++-- 17 files changed, 659 insertions(+), 774 deletions(-) delete mode 100644 client/src/app.postcss diff --git a/client/.prettierrc b/client/.prettierrc index ff2677e..a270fb6 100644 --- a/client/.prettierrc +++ b/client/.prettierrc @@ -1,6 +1,10 @@ { - "useTabs": true, + "useTabs": false, + "endOfLine": "lf", + "arrowParens": "always", + "semi": true, + "tabWidth": 2, "singleQuote": true, - "trailingComma": "none", - "printWidth": 100 + "trailingComma": "es5", + "printWidth": 120 } diff --git a/client/package.json b/client/package.json index c2201b6..c5b1d5b 100644 --- a/client/package.json +++ b/client/package.json @@ -1,47 +1,47 @@ { - "name": "jokesbapak2-client", - "version": "0.0.1", - "license": "GPL-3.0", - "contributors": [ - { - "name": "Reinaldy Rafli", - "email": "aldy505@tutanota.com", - "url": "https://github.com/aldy505" - } - ], - "scripts": { - "dev": "svelte-kit dev", - "build": "svelte-kit build", - "preview": "svelte-kit preview", - "check": "svelte-check --tsconfig ./tsconfig.json", - "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", - "lint": "eslint --fix --ext .svelte,.js,.ts --ignore-path .gitignore .", - "format": "prettier --write --ignore-path .gitignore --plugin-search-dir=. \"./**/*.(ts|json|js|svelte)\"" - }, - "devDependencies": { - "@sveltejs/adapter-static": "^1.0.0-next.13", - "@sveltejs/kit": "next", - "@types/cookie": "^0.4.0", - "@typescript-eslint/eslint-plugin": "^4.19.0", - "@typescript-eslint/parser": "^4.19.0", - "cssnano": "^5.0.6", - "eslint": "^7.22.0", - "eslint-config-prettier": "^8.1.0", - "eslint-plugin-svelte3": "^3.2.0", - "prettier": "~2.2.1", - "prettier-plugin-svelte": "^2.2.0", - "svelte": "^3.34.0", - "svelte-check": "^2.0.0", - "svelte-preprocess": "^4.7.3", - "svelte-windicss-preprocess": "^4.0.12", - "tailwindcss": "^2.2.4", - "tslib": "^2.0.0", - "typescript": "^4.0.0" - }, - "type": "module", - "dependencies": { - "@fontsource/fira-mono": "^4.2.2", - "@lukeed/uuid": "^2.0.0", - "cookie": "^0.4.1" - } + "name": "jokesbapak2-client", + "version": "0.0.1", + "license": "GPL-3.0", + "contributors": [ + { + "name": "Reinaldy Rafli", + "email": "aldy505@tutanota.com", + "url": "https://github.com/aldy505" + } + ], + "scripts": { + "dev": "svelte-kit dev", + "build": "svelte-kit build", + "preview": "svelte-kit preview", + "check": "svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", + "lint": "eslint --fix --ext .svelte,.js,.ts --ignore-path .gitignore .", + "format": "prettier --write --ignore-path .gitignore --plugin-search-dir=. \"./**/*.(ts|json|js|svelte)\"" + }, + "devDependencies": { + "@sveltejs/adapter-static": "^1.0.0-next.13", + "@sveltejs/kit": "next", + "@types/cookie": "^0.4.0", + "@typescript-eslint/eslint-plugin": "^4.19.0", + "@typescript-eslint/parser": "^4.19.0", + "cssnano": "^5.0.6", + "eslint": "^7.22.0", + "eslint-config-prettier": "^8.1.0", + "eslint-plugin-svelte3": "^3.2.0", + "prettier": "~2.2.1", + "prettier-plugin-svelte": "^2.2.0", + "svelte": "^3.34.0", + "svelte-check": "^2.0.0", + "svelte-preprocess": "^4.7.3", + "svelte-windicss-preprocess": "^4.0.12", + "tailwindcss": "^2.2.4", + "tslib": "^2.0.0", + "typescript": "^4.0.0" + }, + "type": "module", + "dependencies": { + "@fontsource/fira-mono": "^4.2.2", + "@lukeed/uuid": "^2.0.0", + "cookie": "^0.4.1" + } } diff --git a/client/src/app.postcss b/client/src/app.postcss deleted file mode 100644 index 378ec08..0000000 --- a/client/src/app.postcss +++ /dev/null @@ -1,110 +0,0 @@ -/* Write your global styles here, in PostCSS syntax */ - -@import '@fontsource/fira-mono'; - -:root { - font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - --font-mono: 'Fira Mono', monospace; - --pure-white: #ffffff; - --primary-color: #b9c6d2; - --secondary-color: #d0dde9; - --tertiary-color: #edf0f8; - --accent-color: #ff3e00; - --heading-color: rgba(0, 0, 0, 0.7); - --text-color: #444444; - --background-without-opacity: rgba(255, 255, 255, 0.7); - --column-width: 42rem; - --column-margin-top: 4rem; -} - -body { - min-height: 100vh; - margin: 0; - background-color: var(--primary-color); - background: linear-gradient( - 180deg, - var(--primary-color) 0%, - var(--secondary-color) 10.45%, - var(--tertiary-color) 41.35% - ); -} - -body::before { - content: ''; - width: 80vw; - height: 100vh; - position: absolute; - top: 0; - left: 10vw; - z-index: -1; - background: radial-gradient( - 50% 50% at 50% 50%, - var(--pure-white) 0%, - rgba(255, 255, 255, 0) 100% - ); - opacity: 0.05; -} - -#svelte { - min-height: 100vh; - display: flex; - flex-direction: column; -} - -h1, -h2, -p { - font-weight: 400; - color: var(--heading-color); -} - -p { - line-height: 1.5; -} - -a { - color: var(--accent-color); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -h1 { - font-size: 2rem; - margin-bottom: 0 0 1em 0; - text-align: center; -} - -h2 { - font-size: 1rem; -} - -pre { - font-size: 16px; - font-family: var(--font-mono); - background-color: rgba(255, 255, 255, 0.45); - border-radius: 3px; - box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); - padding: 0.5em; - overflow-x: auto; - color: var(--text-color); -} - -input, -button { - font-size: inherit; - font-family: inherit; -} - -button:focus:not(:focus-visible) { - outline: none; -} - -@media (min-width: 720px) { - h1 { - font-size: 2.4rem; - } -} \ No newline at end of file diff --git a/client/src/hooks.ts b/client/src/hooks.ts index df8b96c..ae4039e 100644 --- a/client/src/hooks.ts +++ b/client/src/hooks.ts @@ -3,21 +3,21 @@ import { v4 as uuid } from '@lukeed/uuid'; import type { Handle } from '@sveltejs/kit'; export const handle: Handle = async ({ request, resolve }) => { - const cookies = cookie.parse(request.headers.cookie || ''); - request.locals.userid = cookies.userid || uuid(); + const cookies = cookie.parse(request.headers.cookie || ''); + request.locals.userid = cookies.userid || uuid(); - // TODO https://github.com/sveltejs/kit/issues/1046 - if (request.query.has('_method')) { - request.method = request.query.get('_method').toUpperCase(); - } + // TODO https://github.com/sveltejs/kit/issues/1046 + if (request.query.has('_method')) { + request.method = request.query.get('_method').toUpperCase(); + } - const response = await resolve(request); + const response = await resolve(request); - if (!cookies.userid) { - // if this is the first time the user has visited this app, - // set a cookie so that we recognise them when they return - response.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`; - } + if (!cookies.userid) { + // if this is the first time the user has visited this app, + // set a cookie so that we recognise them when they return + response.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`; + } - return response; + return response; }; diff --git a/client/src/lib/Counter/index.svelte b/client/src/lib/Counter/index.svelte index 0099731..ae70bc3 100644 --- a/client/src/lib/Counter/index.svelte +++ b/client/src/lib/Counter/index.svelte @@ -1,98 +1,98 @@
- + -
-
- - {Math.floor($displayed_count)} -
-
+
+
+ + {Math.floor($displayed_count)} +
+
- +
diff --git a/client/src/lib/Header/index.svelte b/client/src/lib/Header/index.svelte index bab8050..b9b795b 100644 --- a/client/src/lib/Header/index.svelte +++ b/client/src/lib/Header/index.svelte @@ -1,120 +1,120 @@
-
- - SvelteKit - -
+
+ + SvelteKit + +
- + -
- -
+
+ +
diff --git a/client/src/lib/form.ts b/client/src/lib/form.ts index c52e923..4dccc76 100644 --- a/client/src/lib/form.ts +++ b/client/src/lib/form.ts @@ -1,60 +1,60 @@ // this action (https://svelte.dev/tutorial/actions) allows us to // progressively enhance a
that already works without JS export function enhance( - form: HTMLFormElement, - { - pending, - error, - result - }: { - pending?: (data: FormData, form: HTMLFormElement) => void; - error?: (res: Response, error: Error, form: HTMLFormElement) => void; - result: (res: Response, form: HTMLFormElement) => void; - } + form: HTMLFormElement, + { + pending, + error, + result, + }: { + pending?: (data: FormData, form: HTMLFormElement) => void; + error?: (res: Response, error: Error, form: HTMLFormElement) => void; + result: (res: Response, form: HTMLFormElement) => void; + } ) { - let current_token: {}; + let current_token: {}; - async function handle_submit(e: Event) { - const token = (current_token = {}); + async function handle_submit(e: Event) { + const token = (current_token = {}); - e.preventDefault(); + e.preventDefault(); - const body = new FormData(form); + const body = new FormData(form); - if (pending) pending(body, form); + if (pending) pending(body, form); - try { - const res = await fetch(form.action, { - method: form.method, - headers: { - accept: 'application/json' - }, - body - }); + try { + const res = await fetch(form.action, { + method: form.method, + headers: { + accept: 'application/json', + }, + body, + }); - if (token !== current_token) return; + if (token !== current_token) return; - if (res.ok) { - result(res, form); - } else if (error) { - error(res, null, form); - } else { - console.error(await res.text()); - } - } catch (e) { - if (error) { - error(null, e, form); - } else { - throw e; - } - } - } + if (res.ok) { + result(res, form); + } else if (error) { + error(res, null, form); + } else { + console.error(await res.text()); + } + } catch (e) { + if (error) { + error(null, e, form); + } else { + throw e; + } + } + } - form.addEventListener('submit', handle_submit); + form.addEventListener('submit', handle_submit); - return { - destroy() { - form.removeEventListener('submit', handle_submit); - } - }; + return { + destroy() { + form.removeEventListener('submit', handle_submit); + }, + }; } diff --git a/client/src/lib/types.d.ts b/client/src/lib/types.d.ts index 6edddd1..7798432 100644 --- a/client/src/lib/types.d.ts +++ b/client/src/lib/types.d.ts @@ -3,5 +3,5 @@ * inside `global.d.ts` and removing `export` keyword */ export interface Locals { - userid: string; + userid: string; } diff --git a/client/src/routes/__layout.svelte b/client/src/routes/__layout.svelte index 038e69b..07e321b 100644 --- a/client/src/routes/__layout.svelte +++ b/client/src/routes/__layout.svelte @@ -1,46 +1,46 @@
-
- -
+
+ +
- + - + @media (min-width: 480px) { + footer { + padding: 40px 0; + } + } +
diff --git a/client/src/routes/about.svelte b/client/src/routes/about.svelte index 569d3e1..b4eb495 100644 --- a/client/src/routes/about.svelte +++ b/client/src/routes/about.svelte @@ -1,50 +1,50 @@ - About + About
-

About this app

+

About this app

-

- This is a SvelteKit app. You can make your own by typing the - following into your command line and following the prompts: -

+

+ This is a SvelteKit app. You can make your own by typing the following into your + command line and following the prompts: +

- - 
npm init svelte@next
+ + 
npm init svelte@next
-

- The page you're looking at is purely static HTML, with no client-side interactivity needed. - Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening - the devtools network panel and reloading. -

+

+ The page you're looking at is purely static HTML, with no client-side interactivity needed. Because of that, we + don't need to load any JavaScript. Try viewing the page's source, or opening the devtools network panel and + reloading. +

-

- The TODOs page illustrates SvelteKit's data loading and form handling. Try using - it with JavaScript disabled! -

+

+ The TODOs page illustrates SvelteKit's data loading and form handling. Try using it with JavaScript + disabled! +

diff --git a/client/src/routes/index.svelte b/client/src/routes/index.svelte index 7594f18..c2cbbe4 100644 --- a/client/src/routes/index.svelte +++ b/client/src/routes/index.svelte @@ -1,59 +1,59 @@ - Home + Home
-

-
- - - Welcome - -
+

+
+ + + Welcome + +
- to your new
SvelteKit app -

+ to your new
SvelteKit app + -

- try editing src/routes/index.svelte -

+

+ try editing src/routes/index.svelte +

- +
diff --git a/client/src/routes/todos/[uid].json.ts b/client/src/routes/todos/[uid].json.ts index 17891fa..6b6ae81 100644 --- a/client/src/routes/todos/[uid].json.ts +++ b/client/src/routes/todos/[uid].json.ts @@ -4,13 +4,13 @@ import type { Locals } from '$lib/types'; // PATCH /todos/:uid.json export const patch: RequestHandler = async (request) => { - return api(request, `todos/${request.locals.userid}/${request.params.uid}`, { - text: request.body.get('text'), - done: request.body.has('done') ? !!request.body.get('done') : undefined - }); + return api(request, `todos/${request.locals.userid}/${request.params.uid}`, { + text: request.body.get('text'), + done: request.body.has('done') ? !!request.body.get('done') : undefined, + }); }; // DELETE /todos/:uid.json export const del: RequestHandler = async (request) => { - return api(request, `todos/${request.locals.userid}/${request.params.uid}`); + return api(request, `todos/${request.locals.userid}/${request.params.uid}`); }; diff --git a/client/src/routes/todos/_api.ts b/client/src/routes/todos/_api.ts index 2319c18..8c3866c 100644 --- a/client/src/routes/todos/_api.ts +++ b/client/src/routes/todos/_api.ts @@ -15,34 +15,34 @@ import type { Locals } from '$lib/types'; const base = 'https://api.svelte.dev'; export async function api(request: Request, resource: string, data?: {}) { - // user must have a cookie set - if (!request.locals.userid) { - return { status: 401 }; - } + // user must have a cookie set + if (!request.locals.userid) { + return { status: 401 }; + } - const res = await fetch(`${base}/${resource}`, { - method: request.method, - headers: { - 'content-type': 'application/json' - }, - body: data && JSON.stringify(data) - }); + const res = await fetch(`${base}/${resource}`, { + method: request.method, + headers: { + 'content-type': 'application/json', + }, + body: data && JSON.stringify(data), + }); - // if the request came from a submission, the browser's default - // behaviour is to show the URL corresponding to the form's "action" - // attribute. in those cases, we want to redirect them back to the - // /todos page, rather than showing the response - if (res.ok && request.method !== 'GET' && request.headers.accept !== 'application/json') { - return { - status: 303, - headers: { - location: '/todos' - } - }; - } + // if the request came from a submission, the browser's default + // behaviour is to show the URL corresponding to the form's "action" + // attribute. in those cases, we want to redirect them back to the + // /todos page, rather than showing the response + if (res.ok && request.method !== 'GET' && request.headers.accept !== 'application/json') { + return { + status: 303, + headers: { + location: '/todos', + }, + }; + } - return { - status: res.status, - body: await res.json() - }; + return { + status: res.status, + body: await res.json(), + }; } diff --git a/client/src/routes/todos/index.json.ts b/client/src/routes/todos/index.json.ts index 57d68a9..9aa2a33 100644 --- a/client/src/routes/todos/index.json.ts +++ b/client/src/routes/todos/index.json.ts @@ -4,27 +4,27 @@ import type { Locals } from '$lib/types'; // GET /todos.json export const get: RequestHandler = async (request) => { - // request.locals.userid comes from src/hooks.js - const response = await api(request, `todos/${request.locals.userid}`); + // request.locals.userid comes from src/hooks.js + const response = await api(request, `todos/${request.locals.userid}`); - if (response.status === 404) { - // user hasn't created a todo list. - // start with an empty array - return { body: [] }; - } + if (response.status === 404) { + // user hasn't created a todo list. + // start with an empty array + return { body: [] }; + } - return response; + return response; }; // POST /todos.json export const post: RequestHandler = async (request) => { - const response = await api(request, `todos/${request.locals.userid}`, { - // because index.svelte posts a FormData object, - // request.body is _also_ a (readonly) FormData - // object, which allows us to get form data - // with the `body.get(key)` method - text: request.body.get('text') - }); + const response = await api(request, `todos/${request.locals.userid}`, { + // because index.svelte posts a FormData object, + // request.body is _also_ a (readonly) FormData + // object, which allows us to get form data + // with the `body.get(key)` method + text: request.body.get('text'), + }); - return response; + return response; }; diff --git a/client/src/routes/todos/index.svelte b/client/src/routes/todos/index.svelte index 224e1ef..6c94908 100644 --- a/client/src/routes/todos/index.svelte +++ b/client/src/routes/todos/index.svelte @@ -1,227 +1,222 @@ - Todos + Todos
-

Todos

+

Todos

- { - const created = await res.json(); - todos = [...todos, created]; + { + const created = await res.json(); + todos = [...todos, created]; - form.reset(); - } - }} - > - - + form.reset(); + }, + }} + > + + - {#each todos as todo (todo.uid)} -
-
{ - todo.done = !!data.get('done'); - }, - result: patch - }} - > - -
- {/each} +
{ + todos = todos.filter((t) => t.uid !== todo.uid); + }, + }} + > +
+ {/each} diff --git a/client/svelte.config.js b/client/svelte.config.js index 6496adb..be33db9 100644 --- a/client/svelte.config.js +++ b/client/svelte.config.js @@ -4,26 +4,22 @@ import { windi } from 'svelte-windicss-preprocess'; /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://github.com/sveltejs/svelte-preprocess - // for more information about preprocessors - preprocess: [windi(), preprocess({ postcss: false })], + // Consult https://github.com/sveltejs/svelte-preprocess + // for more information about preprocessors + preprocess: [windi(), preprocess({ postcss: false })], - kit: { - // hydrate the
element in src/app.html - target: '#svelte', - ssr: false, - trailingSlash: 'never', - adapter: adapter({ - // default options are shown - pages: 'dist', - assets: 'dist', - fallback: '200.html' - }) - } + kit: { + // hydrate the
element in src/app.html + target: '#svelte', + ssr: false, + trailingSlash: 'never', + adapter: adapter({ + // default options are shown + pages: 'dist', + assets: 'dist', + fallback: '200.html', + }), + }, }; export default config; -// Workaround until SvelteKit uses Vite 2.3.8 (and it's confirmed to fix the Tailwind JIT problem) -const mode = process.env.NODE_ENV; -const dev = mode === 'development'; -process.env.TAILWIND_MODE = dev ? 'watch' : 'build'; diff --git a/client/tsconfig.json b/client/tsconfig.json index d826f6e..51e5d71 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -1,30 +1,30 @@ { - "compilerOptions": { - "moduleResolution": "node", - "module": "es2020", - "lib": ["es2020"], - "target": "es2019", - /** + "compilerOptions": { + "moduleResolution": "node", + "module": "es2020", + "lib": ["es2020"], + "target": "es2019", + /** svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript to enforce using \`import type\` instead of \`import\` for Types. */ - "importsNotUsedAsValues": "error", - "isolatedModules": true, - "resolveJsonModule": true, - /** + "importsNotUsedAsValues": "error", + "isolatedModules": true, + "resolveJsonModule": true, + /** To have warnings/errors of the Svelte compiler at the correct position, enable source maps by default. */ - "sourceMap": true, - "esModuleInterop": true, - "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, - "baseUrl": ".", - "allowJs": true, - "checkJs": true, - "paths": { - "$lib/*": ["src/lib/*"] - } - }, - "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"] + "sourceMap": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "baseUrl": ".", + "allowJs": true, + "checkJs": true, + "paths": { + "$lib/*": ["src/lib/*"] + } + }, + "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"] }