build: configuration update (#41)

high1 · web-flow · commit 36f827593ff7 · 2022-11-06T20:11:34.000+01:00
- to be able to build the project both on GitHub and Netlify, base
    config property in vite must be read from the environment
- updated the script to use the variable, updated vite config to use
the variable also
- renamed configuration files for ESLint and Prettier to their .json
    counterparts
- added eslint-plugin-jsonc and eslint-plugin-toml andenabled linting
for json and toml files, hidden files now linted by default in
configuration
- removed types from tsconfig.json and added vite-env.d.ts with
    vite/client typings
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,9 +1,9 @@
 {
   "root": true,
-  "ignorePatterns": ["dist/*"],
+  "ignorePatterns": ["dist", "!**/.*"],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx"],
+      "files": ["*.{ts,tsx}"],
       "parser": "@typescript-eslint/parser",
       "extends": [
         "eslint:recommended",
@@ -17,11 +17,12 @@
       ],
       "env": {
         "browser": true,
-        "es2022": true
+        "node": true
       },
       "parserOptions": {
         "sourceType": "module",
         "project": "tsconfig.json",
+        "ecmaVersion": "latest",
         "ecmaFeatures": {
           "jsx": true
         }
@@ -30,8 +31,21 @@
         "import/resolver": {
           "typescript": {}
         },
-        "import/core-modules": [ "uno.css" ]
+        "import/core-modules": ["uno.css"]
       }
+    },
+    {
+      "files": ["*.json"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:jsonc/recommended-with-json",
+        "plugin:jsonc/prettier",
+        "plugin:prettier/recommended"
+      ]
+    },
+    {
+      "files": ["*.toml"],
+      "extends": ["eslint:recommended", "plugin:toml/standard"]
     }
   ]
 }
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -5,6 +5,9 @@ on:
       - main
   pull_request:
 
+env:
+  BASE: /${{ github.event.repository.name }}/
+
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,9 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
+    "source.fixAll.eslint": true
   },
-  "files.associations": {
-    ".eslintrc": "json",
-    ".prettierrc": "json"
-  }
+  "eslint.validate": ["typescript", "typescriptreact", "json", "jsonc", "toml"]
 }
diff --git a/index.html b/index.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Solid Clock</title>
     <link rel="icon" type="image/svg+xml" href="/logo.svg">
   </head>
-  <body class="h-full m-0">
-    <div id="root" class="h-full"></div>
+  <body class="m-0">
+    <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,6 @@
+[build]
+command = "pnpm build"
+publish = "dist"
+
+[build.environment]
+NODE_VERSION = "18"
diff --git a/package.json b/package.json
@@ -11,15 +11,18 @@
     "start": "vite"
   },
   "devDependencies": {
+    "@types/node": "^18.11.9",
     "@typescript-eslint/eslint-plugin": "5.41.0",
     "@typescript-eslint/parser": "5.41.0",
     "eslint": "8.26.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-import-resolver-typescript": "3.5.2",
     "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsonc": "^2.5.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-solid": "0.7.4",
+    "eslint-plugin-toml": "^0.3.1",
     "prettier": "2.7.1",
     "typescript": "4.8.4",
     "unocss": "0.46.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/ClockFace.tsx b/src/ClockFace.tsx
@@ -23,7 +23,7 @@ export const ClockFace = () => {
   onCleanup(() => cancelAnimationFrame(frame));
 
   return (
-    <div class="flex items-center justify-center h-full @dark:bg-neutral-700">
+    <div class="flex items-center justify-center h-screen @dark:bg-neutral-700">
       <svg viewBox="0 0 200 200" class="h-95vmin">
         <g class="translate-100px">
           <circle
diff --git a/src/ClockHand.tsx b/src/ClockHand.tsx
@@ -7,7 +7,7 @@ type ClockHandProps = {
 } & JSX.LineSVGAttributes<SVGLineElement>;
 
 export const ClockHand = (props: ClockHandProps) => {
-  const props_ = mergeProps({ length: 0, limit: 94, class: '' }, props);
+  const props_ = mergeProps({ length: 0, limit: 94 }, props);
   const [local, rest] = splitProps(props_, ['length', 'limit', 'stationary']);
 
   return (
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly BASE?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -7,7 +7,6 @@
     "esModuleInterop": true,
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
-    "types": ["vite/client"],
     "noEmit": true,
     "isolatedModules": true,
     "baseUrl": "src",
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,15 +1,10 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv, type ConfigEnv } from 'vite';
 import solid from 'vite-plugin-solid';
 import uno from 'unocss/vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-export default defineConfig({
-  base: '/solid-clock/',
-  plugins: [solid(), uno(), tsconfigPaths()],
-  optimizeDeps: {
-    disabled: false,
-  },
-  build: {
-    commonjsOptions: { include: [] },
-  },
-});
+export default ({ mode }: ConfigEnv) =>
+  defineConfig({
+    base: loadEnv(mode, process.cwd(), '')['BASE'],
+    plugins: [solid(), uno(), tsconfigPaths()],
+  });

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"editor.codeActionsOnSave": {`
`3`		`- "source.fixAll.eslint": true,`
	`3`	`+ "source.fixAll.eslint": true`
`4`	`4`	`},`
`5`		`- "files.associations": {`
`6`		`- ".eslintrc": "json",`
`7`		`- ".prettierrc": "json"`
`8`		`- }`
	`5`	`+ "eslint.validate": ["typescript", "typescriptreact", "json", "jsonc", "toml"]`
`9`	`6`	`}`