Setup the stack to use Vue in both the web extension and a regular html form

7be304f2 · Valentin Rigal · Bastien Abadie · 8ef8afae · 7be304f2 · 7be304f2
Commit 7be304f2 authored 3 years ago by Valentin Rigal Committed by Bastien Abadie 3 years ago
--- a/.browserslistrc
+++ b/.browserslistrc
+> 1%
+last 2 versions
+not dead
--- a/.eslintrc.js
+++ b/.eslintrc.js
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    webextensions: true,
+  },
+  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
 node_modules
+/dist-lib
+/dist-ext
+
+
+# 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?
+
+# Vue Browser Extension Output
+*.pem
+*.pub
+*.zip
+/artifacts
--- a/README.md
+++ b/README.md
 # Virtual Keyboard

-## Setup
-`npm i`
+## Run the application as a web extension
+First generate extension distributables with `npm run serve-ext`
+This will allow live reloading.

-## Development
-`npm run start:firefox`
+Then depending on the browser you want to use run one of those commands:
+* `npm run start:firefox`
+* `npm run start:chromium`
+
+## Integration as a JS asset
+Run `npm run serve-lib` to start the demo application
--- a/babel.config.js
+++ b/babel.config.js
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
--- a/demo/index.html
+++ b/demo/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Virtual keyboard demo</title>
+</head>
+
+<body>
+  <div class="container">
+    <p>
+      <input placeholder="Try to write an 'a'"></input>
+    </p>
+    <p>
+      <textarea placeholder="This is a textarea"></textarea>
+    </p>
+  </div>
+</body>
+</html>
--- a/extension-dist/icons/keyboard-32.png
+++ b/extension-dist/icons/keyboard-32.png
--- a/extension-dist/icons/keyboard-96.png
+++ b/extension-dist/icons/keyboard-96.png
--- a/extension-dist/index.js
+++ b/extension-dist/index.js
-const inputFields = document.getElementsByTagName('input')
-const replacements = {
-  a: "b"
-}
-// Create a simple keyboard
-const buttonA = document.createElement('button')
-buttonA.textContent = 'Insert "a"'
-const buttonB = document.createElement('button')
-buttonB.textContent = 'Insert "b"'
-const keyboard = document.createElement('div')
-keyboard.appendChild(buttonA)
-keyboard.appendChild(buttonB)
-
-let selectedInput = null
-
-addChar = (i, char) => {
-    const start = i.selectionStart
-    i.value = i.value.slice(0, start) + char + i.value.slice(i.selectionEnd)
-    // Updating the input value moves the caret to the end by default
-    i.selectionStart = i.selectionEnd = start + 1
-}
-
-for (const input of inputFields) {
-  input.onkeydown = e => {
-    const character = replacements[e.key]
-    if (!character) return
-    addChar(input, character)
-    return false
-  }
-  // Handle the case where the input is already focused
-  if (document.activeElement === input) {
-    input.parentElement.appendChild(keyboard)
-    selectedInput = input
-  }
-  input.onfocus = e => {
-    input.parentElement.appendChild(keyboard)
-    selectedInput = input
-  }
-  // https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/
-  input.ontransitionend = e => {
-    if (input.matches(':focus') || keyboard.contains(document.activeElement)) e.target.focus()
-    else {
-      input.parentElement.removeChild(keyboard)
-      selectedInput = null
-    }
-  }
-}
-
-keyboard.onclick = e => {
-  return false
-}
-buttonA.onmouseup = e => {
-  if (selectedInput) addChar(selectedInput, "a")
-}
-buttonB.onmouseup = e => {
-  if (selectedInput) addChar(selectedInput, "b")
-}
--- a/extension-dist/style.css
+++ b/extension-dist/style.css
-input:not(:focus-within) {
-  border-color: black;
-  transition: border-color 0.001s;
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
  "name": "virtual-keyboard",
-  "version": "0.0.1",
-  "description": "Adds a customizable virtual keyboard on text input areas.",
-  "main": "extension-dist/index.js",
+  "version": "0.1.0",
+  "description": "Customizable unicode virtual keyboard on text input.",
+  "private": true,
  "scripts": {
-    "start:firefox": "web-ext run --source-dir ./extension-dist/"
+    "serve-ext": "vue-cli-service build --dest dist-ext --mode development --watch",
+    "ext:firefox": "web-ext run --source-dir ./dist-ext/",
+    "ext:chromium": "web-ext run -t chromium --source-dir ./dist-ext/",
+    "build-ext": "vue-cli-service build --dest dist-ext",
+    "serve-lib": "NODE_ENV=development webpack serve --config webpack.lib.js --progress",
+    "build-lib": "NODE_ENV=production webpack --config webpack.lib.js",
+    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "web-ext": "6.1.0"
+    "axios": "^0.21.1",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "compression-webpack-plugin": "^6.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "html-webpack-plugin": "^4.5.1",
+    "lint-staged": "^9.5.0",
+    "prettier": "^2.2.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-browser-extension": "latest",
+    "vue-template-compiler": "^2.6.11",
+    "web-ext": "^6.1.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
  }
 }
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
+{
+  "extName": {
+    "message": "Virtual keyboard",
+    "description": ""
+  }
+}
--- a/public/browser-extension.html
+++ b/public/browser-extension.html
+<!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">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icons/keyboard-128.png
+++ b/public/icons/keyboard-128.png
--- a/public/icons/keyboard-16.png
+++ b/public/icons/keyboard-16.png
--- a/extension-dist/icons/keyboard-19.png
+++ b/extension-dist/icons/keyboard-19.png
--- a/public/icons/keyboard-38.png
+++ b/public/icons/keyboard-38.png
--- a/extension-dist/icons/keyboard-48.png
+++ b/extension-dist/icons/keyboard-48.png