All-round update

- updated solid to 1.1
- added solid-refresh for hot module reload
- speed up with TailwindCSS jit mode
- used solid-testing-library and solid-jest for tests
- updated eslint rules
- improved debugging support in Firefox (should work for Chrome with
minor changes also)
- added extension recommendations for VSCode

Author: high1

.eslintrc.json

@@ -32,12 +32,11 @@
         "plugin:import/typescript",
         "plugin:jest/recommended",
         "plugin:jest/style",
-        "plugin:testing-library/recommended",
+        "plugin:testing-library/dom",
         "plugin:jest-dom/recommended",
         "plugin:json/recommended",
         "plugin:eslint-comments/recommended",
-        "plugin:prettier/recommended",
-        "prettier/@typescript-eslint"
+        "plugin:prettier/recommended"
       ],
       "rules": {
         "@typescript-eslint/explicit-function-return-type": [

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "bradlc.vscode-tailwindcss",
+    "firefox-devtools.vscode-firefox-debug"
+  ],
+}

.vscode/launch.json

@@ -1,22 +1,18 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-      {
-        "type": "chrome",
-        "request": "launch",
-        "name": "Chromium",
-        "url": "http://localhost:3000",
-        "webRoot": "${workspaceFolder}"
-      },
-      {
-        "type": "firefox",
-        "request": "launch",
-        "name": "Firefox",
-        "url": "http://localhost:3000",
-        "webRoot": "${workspaceFolder}"
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "firefox",
+      "request": "launch",
+      "name": "Firefox",
+      "reAttach": true,
+      "url": "http://localhost:3000",
+      "sourceMapPathOverrides": {
+        "webpack://*": "${workspaceFolder}/*"
       }
-    ]
-  }
+    }
+  ]
+}

babel.config.json

@@ -1,6 +1,12 @@
 {
-  "presets": ["solid", "@babel/typescript"],
+  "presets": [
+    "solid",
+    "@babel/typescript"
+  ],
   "env": {
+    "development": {
+      "plugins": ["solid-refresh/babel"]
+    },
     "test": {
       "presets": [
         [
@@ -20,7 +26,9 @@
           {
             "useBuiltIns": "entry",
             "corejs": 3,
-            "exclude": ["transform-typeof-symbol"]
+            "exclude": [
+              "transform-typeof-symbol"
+            ]
           }
         ]
       ]

package.json

@@ -16,71 +16,70 @@
   "license": "ISC",
   "dependencies": {
     "clsx": "^1.1.1",
-    "core-js": "3",
-    "regenerator-runtime": "^0.13.7",
-    "solid-js": "^0.23.10"
+    "core-js": "^3.17.1",
+    "regenerator-runtime": "^0.13.9",
+    "solid-js": "^1.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-typescript": "^7.12.7",
-    "@testing-library/dom": "^7.29.2",
-    "@testing-library/jest-dom": "^5.11.8",
-    "@types/jest": "^26.0.20",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
-    "autoprefixer": "^10.2.1",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-typescript": "^7.15.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@types/jest": "^27.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
+    "autoprefixer": "^10.3.3",
+    "babel-jest": "^27.1.0",
     "babel-loader": "^8.2.2",
-    "babel-preset-solid": "^0.23.8",
-    "clean-webpack-plugin": "^3.0.0",
+    "babel-preset-solid": "^1.1.2",
+    "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.0.1",
-    "css-minimizer-webpack-plugin": "^1.2.0",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-import-resolver-typescript": "^2.3.0",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-jest-dom": "^3.6.5",
-    "eslint-plugin-json": "^2.1.2",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jest": "^24.4.0",
+    "eslint-plugin-jest-dom": "^3.9.0",
+    "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-testing-library": "^3.10.1",
-    "eslint-webpack-plugin": "^2.4.1",
-    "fork-ts-checker-webpack-plugin": "^6.1.0",
-    "html-webpack-plugin": "^5.0.0-beta.4",
-    "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^1.3.3",
-    "postcss": "^8.2.4",
-    "postcss-loader": "^4.1.0",
-    "prettier": "^2.2.1",
-    "style-loader": "^2.0.0",
-    "tailwindcss": "^2.0.2",
-    "terser-webpack-plugin": "^5.1.1",
-    "ts-jest": "^26.4.4",
-    "ts-node": "^9.1.1",
-    "tsconfig-paths-webpack-plugin": "^3.3.0",
-    "typescript": "^4.1.3",
-    "webpack": "^5.12.2",
-    "webpack-cli": "^4.3.1",
-    "webpack-dev-server": "^3.11.1",
-    "webpack-merge": "^5.7.3"
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-testing-library": "^4.12.0",
+    "eslint-webpack-plugin": "^3.0.1",
+    "fork-ts-checker-webpack-plugin": "^6.3.2",
+    "html-webpack-plugin": "^5.3.2",
+    "jest": "^27.1.0",
+    "mini-css-extract-plugin": "^2.2.2",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
+    "prettier": "^2.3.2",
+    "solid-jest": "^0.2.0",
+    "solid-refresh": "^0.2.2",
+    "solid-testing-library": "^0.2.1",
+    "style-loader": "^3.2.1",
+    "tailwindcss": "^2.2.9",
+    "terser-webpack-plugin": "^5.2.0",
+    "ts-node": "^10.2.1",
+    "tsconfig-paths-webpack-plugin": "^3.5.1",
+    "typescript": "^4.4.2",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.1.0",
+    "webpack-merge": "^5.8.0"
   },
   "prettier": {
     "singleQuote": true
   },
   "jest": {
     "globals": {
-      "__MODE__": "none",
-      "ts-jest": {
-        "babelConfig": true
-      }
+      "__MODE__": "none"
     },
     "roots": [
       "src"
     ],
-    "preset": "ts-jest",
+    "preset": "solid-jest/preset/browser",
     "moduleDirectories": [
       "node_modules",
       "src"