Vue3 migrate

.codeclimate.yml

@@ -1,11 +1,29 @@
+exclude_patterns:
+  - "node_modules/"
+  - "coverage/"
+  - "codeclimate-*/"
+  - ".husky/"
+  - ".idea/"
+  - ".vscode/"
+  - "dist/"
+  - "public/"
 plugins:
   eslint:
-    enabled: true
-    channel: "eslint-7"
+    enabled: false
+    channel: "eslint-8"
     config:
       extensions:
-        - .es6
         - .js
         - .jsx
+        - .ts
+        - .tsx
+        - .cjs
         - .mjs
         - .vue
+checks:
+  identical-code:
+    config:
+      threshold: 50
+  similar-code:
+    config:
+      threshold: 75

.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "root": true,
+  "env": {
+    "node": false,
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:vue/vue3-essential",
+    "plugin:vue/strongly-recommended",
+    "plugin:vue/vue3-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "sourceType": "module"
+  },
+  "plugins": ["vue", "html", "@typescript-eslint"],
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [["@", "./src"]],
+        "extensions": [".vue", ".ts", ".js", ".tsx", ".jsx", ".json"]
+      }
+    }
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)"
+      ],
+      "env": {
+        "jest": true
+      }
+    }
+  ],
+  "ignorePatterns": ["components.d.ts", "coverage/", "tests/vitest-setup.ts"]
+}

.fleek.json

@@ -1,10 +1,9 @@
 {
- "build": {
-   "image": "node:16",
-   "command": "npm ci && npm run build",
-   "publicDir": "dist",
-   "baseDir": ".",
-   "environment": {
-   }
- }
+  "build": {
+    "image": "node:16",
+    "command": "npm ci && npm run build",
+    "publicDir": "dist",
+    "baseDir": ".",
+    "environment": {}
+  }
 }

.gitignore

@@ -20,3 +20,12 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# test coverage reports
+coverage
+
+# local codeclimate build
+codeclimate-*
+
+# cache
+.eslintcache

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# test coverage reports
+coverage

.prettierrc.json

@@ -0,0 +1 @@
+{}

README.md

@@ -1,4 +1,5 @@
 # dweb-search-frontend
+
 [![Pipeline Status](https://gitlab.com/ipfs-search.com/dweb-search-frontend/badges/master/pipeline.svg)](https://gitlab.com/ipfs-search.com/dweb-search-frontend/-/commits/master)
 [![Maintainability](https://api.codeclimate.com/v1/badges/1373bd46347115e764d2/maintainability)](https://codeclimate.com/github/ipfs-search/dweb-search-frontend/maintainability)
 [![Backers on Open Collective](https://opencollective.com/ipfs-search/backers/badge.svg)](#backers)
@@ -7,40 +8,55 @@
 New frontend repository for [ipfs-search.com](https://ipfs-search.com). Master is automatically deployed through [Fleek](https://fleek.co/).
 
 ## Dependencies
-* [NodeJS 16 Gallium (LTS)](https://nodejs.org/)
-* [VueJS](https://vuejs.org/)
-* [VuetifyJS](https://vuetifyjs.com/)
+
+- [NodeJS 16 Gallium (LTS)](https://nodejs.org/)
+- [Vue 3](https://vuejs.org/)
+- [VuetifyJS 3 (beta)](https://next.vuetifyjs.com/)
 
 ## Project setup
+
 ```
 npm install
 ```
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## Scripts:
 
-### Compiles and minifies for production
-```
-npm run build
-```
+`npm run serve` Compiles and hot-reloads for development
 
-### Lints and fixes files
-```
-npm run lint
-```
+`npm run build` Compiles and minifies for production
+
+`npm run preview` Serves the latest build locally
+
+`npm run test` Run all tests and watch code
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+`npm run test:once` Run all tests only once
+
+`npm run test:coverage` Run all tests once and create coverage report under './coverage'
+
+`npm run lint` Run code through linter to check
+
+`npm run lint:fix` Run code through linter and fix (if automatically possible)
+
+`npm run prettier:check` Test if code is formatted according to prettier spec
+
+`npm run prettier:write` Format code according to prettier spec
+
+`npm run prepare-githooks` Setup githook to automatically run prettier pre-commit. If you like this.
+
+### So many scripts... which one do I need?
+
+Developers: you will likely want to run `npm run serve` in one terminal and `npm run test` in another. You can use `npm run prepare-githooks` to autoformat the code. Alternatively you can run `npm run prettier:write` before pushing.
+
+Ops will want to use `npm run build`, `npm run test` or `npm run test:coverage`, `npm run prettier:check`
 
 ## NSFW api
-This build uses an API to check nsfw content. 
+
+This build uses an API to check nsfw content.
 
 The default API endpoint to is: https://api.ipfs-search.com/nsfw/
-. This can be overridden by injecting `process.env.NSFW_API` 
+. This can be overridden by injecting environment variable `VITE_NSFW_API`
 
-The API call should be: `<process.env.NSFW_API><CID>`, so e.g.
+The API call should be: `<VITE_NSFW_API><CID>`, so e.g.
 
 `https://api.ipfs-search.com/nsfw/QmSZzv7ux1LGwpehVcCMQ9ec945X6qE4qyjKDhCVwY25iw`
-https://api.ipfs-search.com/v1/nsfw/classify/
+https://api.ipfs-search.com/v1/nsfw/classify/

global.d.ts~

@@ -0,0 +1,8 @@
+declare module 'vue' {
+  import { CompatVue } from '@vue/runtime-dom'
+  const Vue: CompatVue
+  export default Vue
+  export * from '@vue/runtime-dom'
+  const { configureCompat } = Vue
+  export { configureCompat }
+}

index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,viewport-fit=cover"
+    />
+    <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg" />
+    <link rel="icon" type="image/png" href="/assets/images/favicon.png" />
+    <title>ipfs-search.com</title>
+    <link rel="stylesheet" href="/assets/styles/fonts.css" />
+    <link
+      rel="search"
+      type="application/opensearchdescription+xml"
+      href="/opensearch.xml"
+      title="ipfs-search.com"
+    />
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but IPFS-search doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}