Fix web code linting to be portable across environments

This commit is contained in:
Keavon Chambers 2021-04-14 11:44:09 -07:00
parent 57540ed5ef
commit 0ca4b9fe7c
23 changed files with 361 additions and 189 deletions

32
.vscode/settings.json vendored
View File

@ -4,34 +4,32 @@
"editor.formatOnPaste": true "editor.formatOnPaste": true
}, },
"[vue]": { "[vue]": {
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
"source.fixAll.eslint": true
},
"editor.formatOnSave": true, "editor.formatOnSave": true,
}, },
"[javascript]": { "[javascript]": {
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
"source.fixAll.eslint": true
},
"editor.formatOnSave": true, "editor.formatOnSave": true,
}, },
"[typescript]": { "[json]": {
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
"source.fixAll.eslint": true "editor.formatOnSave": true,
}, },
"[typescript, json]": {
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
"editor.formatOnSave": true, "editor.formatOnSave": true,
}, },
"rust-analyzer.diagnostics.disabled": [ "rust-analyzer.diagnostics.disabled": [
"missing-unsafe" // Remove when rust-analyzer bug fixes unsafe code on WASM JavaScript https://github.com/rust-analyzer/rust-analyzer/issues/5412 "missing-unsafe" // Remove when rust-analyzer bug fixes unsafe code on WASM JavaScript https://github.com/rust-analyzer/rust-analyzer/issues/5412
], ],
"vetur.format.options.useTabs": true,
"eslint.format.enable": true,
"eslint.workingDirectories": [
"./client/web"
],
"files.eol": "\n", "files.eol": "\n",
"html.format.wrapLineLength": 200, "html.format.wrapLineLength": 200,
"vetur.validation.interpolation": false, "editor.defaultFormatter": "dbaeumer.vscode-eslint",
"vetur.format.options.tabSize": 4, "eslint.format.enable": true,
"vetur.experimental.templateInterpolationService": true "eslint.workingDirectories": ["./client/web"],
"eslint.validate": [
"javascript",
"typescript",
],
"vetur.format.enable": false,
} }

View File

@ -2,3 +2,6 @@ node_modules/
dist/ dist/
pkg/ pkg/
wasm/pkg/* wasm/pkg/*
!.*.js
!.*.ts
!.*.json

View File

@ -3,35 +3,40 @@ module.exports = {
env: { env: {
node: true, node: true,
}, },
extends: [ extends: ["plugin:vue/vue3-essential", "@vue/airbnb", "@vue/typescript/recommended", "plugin:prettier-vue/recommended", "prettier"],
"plugin:vue/vue3-essential",
"@vue/airbnb",
"@vue/typescript/recommended",
],
parserOptions: { parserOptions: {
ecmaVersion: 2020, ecmaVersion: 2020,
}, },
settings: { settings: {
"import/resolver": { "import/resolver": {
// `node` must be the top property // `node` must be listed first
node: {}, node: {},
webpack: { webpack: { config: require.resolve("@vue/cli-service/webpack.config.js") },
config: require.resolve("@vue/cli-service/webpack.config.js"), },
"prettier-vue": {
SFCBlocks: {
template: true,
style: true,
}, },
}, },
}, },
rules: { rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-tabs": 0,
"max-len": 0,
"linebreak-style": ["error", "unix"],
indent: ["error", "tab"], indent: ["error", "tab"],
quotes: ["error", "double"], quotes: ["error", "double"],
"linebreak-style": ["error", "unix"],
"eol-last": ["error", "always"],
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"max-len": ["error", { code: 200, tabWidth: 4 }],
"@typescript-eslint/camelcase": "off", "@typescript-eslint/camelcase": "off",
camelcase: ["error", { ignoreImports: true, ignoreDestructuring: true }], camelcase: ["error", { ignoreImports: true, ignoreDestructuring: true }],
"import/extensions": ["error", "ignorePackages", { "prettier-vue/prettier": [
js: "never", jsx: "never", ts: "never", tsx: "never", "error",
}], {
tabWidth: 4,
tabs: true,
printWidth: 200,
},
],
}, },
}; };

View File

@ -1205,38 +1205,38 @@
} }
}, },
"@vue/compiler-core": { "@vue/compiler-core": {
"version": "3.0.7", "version": "3.0.11",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.7.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.11.tgz",
"integrity": "sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==", "integrity": "sha512-6sFj6TBac1y2cWCvYCA8YzHJEbsVkX7zdRs/3yK/n1ilvRqcn983XvpBbnN3v4mZ1UiQycTvOiajJmOgN9EVgw==",
"requires": { "requires": {
"@babel/parser": "^7.12.0", "@babel/parser": "^7.12.0",
"@babel/types": "^7.12.0", "@babel/types": "^7.12.0",
"@vue/shared": "3.0.7", "@vue/shared": "3.0.11",
"estree-walker": "^2.0.1", "estree-walker": "^2.0.1",
"source-map": "^0.6.1" "source-map": "^0.6.1"
} }
}, },
"@vue/compiler-dom": { "@vue/compiler-dom": {
"version": "3.0.7", "version": "3.0.11",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.11.tgz",
"integrity": "sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==", "integrity": "sha512-+3xB50uGeY5Fv9eMKVJs2WSRULfgwaTJsy23OIltKgMrynnIj8hTYY2UL97HCoz78aDw1VDXdrBQ4qepWjnQcw==",
"requires": { "requires": {
"@vue/compiler-core": "3.0.7", "@vue/compiler-core": "3.0.11",
"@vue/shared": "3.0.7" "@vue/shared": "3.0.11"
} }
}, },
"@vue/compiler-sfc": { "@vue/compiler-sfc": {
"version": "3.0.7", "version": "3.0.11",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.7.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.11.tgz",
"integrity": "sha512-37/QILpGE+J3V+bP9Slg9e6xGqfk+MmS2Yj8ChR4fS0/qWUU/YoYHE0GPIzjmBdH0JVOOmJqunxowIXmqNiHng==", "integrity": "sha512-7fNiZuCecRleiyVGUWNa6pn8fB2fnuJU+3AGjbjl7r1P5wBivfl02H4pG+2aJP5gh2u+0wXov1W38tfWOphsXw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/parser": "^7.12.0", "@babel/parser": "^7.13.9",
"@babel/types": "^7.12.0", "@babel/types": "^7.13.0",
"@vue/compiler-core": "3.0.7", "@vue/compiler-core": "3.0.11",
"@vue/compiler-dom": "3.0.7", "@vue/compiler-dom": "3.0.11",
"@vue/compiler-ssr": "3.0.7", "@vue/compiler-ssr": "3.0.11",
"@vue/shared": "3.0.7", "@vue/shared": "3.0.11",
"consolidate": "^0.16.0", "consolidate": "^0.16.0",
"estree-walker": "^2.0.1", "estree-walker": "^2.0.1",
"hash-sum": "^2.0.0", "hash-sum": "^2.0.0",
@ -1274,13 +1274,13 @@
} }
}, },
"postcss": { "postcss": {
"version": "8.2.8", "version": "8.2.10",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.10.tgz",
"integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==", "integrity": "sha512-b/h7CPV7QEdrqIxtAf2j31U5ef05uBDuvoXv6L51Q4rcS1jdlXAVKJv+atCFdUXYl9dyTHGyoMzIepwowRJjFw==",
"dev": true, "dev": true,
"requires": { "requires": {
"colorette": "^1.2.2", "colorette": "^1.2.2",
"nanoid": "^3.1.20", "nanoid": "^3.1.22",
"source-map": "^0.6.1" "source-map": "^0.6.1"
} }
}, },
@ -1293,13 +1293,13 @@
} }
}, },
"@vue/compiler-ssr": { "@vue/compiler-ssr": {
"version": "3.0.7", "version": "3.0.11",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.7.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.11.tgz",
"integrity": "sha512-nHRbHeSpfXwjypettjrA16TjgfDcPEwq3m/zHnGyLC1QqdLtklXmpSM43/CPwwTCRa/qdt0pldJf22MiCEuTSQ==", "integrity": "sha512-66yUGI8SGOpNvOcrQybRIhl2M03PJ+OrDPm78i7tvVln86MHTKhM3ERbALK26F7tXl0RkjX4sZpucCpiKs3MnA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@vue/compiler-dom": "3.0.7", "@vue/compiler-dom": "3.0.11",
"@vue/shared": "3.0.7" "@vue/shared": "3.0.11"
} }
}, },
"@vue/component-compiler-utils": { "@vue/component-compiler-utils": {
@ -1335,6 +1335,13 @@
"yallist": "^2.1.2" "yallist": "^2.1.2"
} }
}, },
"prettier": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
"integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
"dev": true,
"optional": true
},
"yallist": { "yallist": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
@ -1371,36 +1378,36 @@
"dev": true "dev": true
}, },
"@vue/reactivity": { "@vue/reactivity": {
"version": "3.0.7", "version": "3.0.11",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.7.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.11.tgz",
"integrity": "sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==", "integrity": "sha512-SKM3YKxtXHBPMf7yufXeBhCZ4XZDKP9/iXeQSC8bBO3ivBuzAi4aZi0bNoeE2IF2iGfP/AHEt1OU4ARj4ao/Xw==",
"requires": { "requires": {
"@vue/shared": "3.0.7" "@vue/shared": "3.0.11"
} }
}, },
"@vue/runtime-core": { "@vue/runtime-core": {
"version": "3.0.7", "version": "3.0.11",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.11.tgz",
"integrity": "sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==", "integrity": "sha512-87XPNwHfz9JkmOlayBeCCfMh9PT2NBnv795DSbi//C/RaAnc/bGZgECjmkD7oXJ526BZbgk9QZBPdFT8KMxkAg==",
"requires": { "requires": {
"@vue/reactivity": "3.0.7", "@vue/reactivity": "3.0.11",
"@vue/shared": "3.0.7" "@vue/shared": "3.0.11"
} }
}, },
"@vue/runtime-dom": { "@vue/runtime-dom": {
"version": "3.0.7", "version": "3.0.11",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.11.tgz",
"integrity": "sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==", "integrity": "sha512-jm3FVQESY3y2hKZ2wlkcmFDDyqaPyU3p1IdAX92zTNeCH7I8zZ37PtlE1b9NlCtzV53WjB4TZAYh9yDCMIEumA==",
"requires": { "requires": {
"@vue/runtime-core": "3.0.7", "@vue/runtime-core": "3.0.11",
"@vue/shared": "3.0.7", "@vue/shared": "3.0.11",
"csstype": "^2.6.8" "csstype": "^2.6.8"
} }
}, },
"@vue/shared": { "@vue/shared": {
"version": "3.0.7", "version": "3.0.11",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.11.tgz",
"integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg==" "integrity": "sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA=="
}, },
"@vue/web-component-wrapper": { "@vue/web-component-wrapper": {
"version": "1.3.0", "version": "1.3.0",
@ -1409,7 +1416,7 @@
"dev": true "dev": true
}, },
"@wasm-tool/wasm-pack-plugin": { "@wasm-tool/wasm-pack-plugin": {
"version": "github:wasm-tool/wasm-pack-plugin#f0cbb6dda359440374f54b5173077fd582162ad2", "version": "github:wasm-tool/wasm-pack-plugin#2984f4b570756e05b5d3fcd5b9d00878a4b63695",
"from": "github:wasm-tool/wasm-pack-plugin", "from": "github:wasm-tool/wasm-pack-plugin",
"dev": true, "dev": true,
"requires": { "requires": {
@ -4594,9 +4601,9 @@
} }
}, },
"glob-parent": { "glob-parent": {
"version": "5.1.1", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true, "dev": true,
"requires": { "requires": {
"is-glob": "^4.0.1" "is-glob": "^4.0.1"
@ -4636,6 +4643,12 @@
"object.entries": "^1.1.2" "object.entries": "^1.1.2"
} }
}, },
"eslint-config-prettier": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.2.0.tgz",
"integrity": "sha512-dWV9EVeSo2qodOPi1iBYU/x6F6diHv8uujxbxr77xExs3zTAlNXvVZKiyLsQGNz7yPV2K49JY5WjPzNIuDc2Bw==",
"dev": true
},
"eslint-import-resolver-node": { "eslint-import-resolver-node": {
"version": "0.3.4", "version": "0.3.4",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
@ -4863,10 +4876,168 @@
} }
} }
}, },
"eslint-plugin-prettier-vue": {
"version": "3.0.0-alpha.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier-vue/-/eslint-plugin-prettier-vue-3.0.0-alpha.2.tgz",
"integrity": "sha512-BisvxytJAANvbele4VNj/vOi1aygD38offE6ow6KYinLP/x3qwtbeQDRtftHAC7NeoGcPN3rcOmPvHFh6DRVtQ==",
"dev": true,
"requires": {
"@vue/compiler-sfc": "3.0.0-rc.5",
"chalk": "^4.0.0",
"prettier": "^1.18.2 || ^2.0.0",
"prettier-linter-helpers": "^1.0.0"
},
"dependencies": {
"@vue/compiler-core": {
"version": "3.0.0-rc.5",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.5.tgz",
"integrity": "sha512-dNz5AObEYg0Oglw3emIsBhTAOVfObrfxDaAzR0UTRDDq+Ohfr6KTSaVQAH88Ym+oa08ZlLZBFc6ARe9doAOIxg==",
"dev": true,
"requires": {
"@babel/parser": "^7.10.4",
"@babel/types": "^7.10.4",
"@vue/shared": "3.0.0-rc.5",
"estree-walker": "^2.0.1",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.0.0-rc.5",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.5.tgz",
"integrity": "sha512-z8n+R1GhFnWuKURLYxfVSEfP7nSNM91qteobxwys55fhlZZuReouMnUwgrn+ois/IL6RdFlT9H+n4+N6yLrdJA==",
"dev": true,
"requires": {
"@vue/compiler-core": "3.0.0-rc.5",
"@vue/shared": "3.0.0-rc.5"
}
},
"@vue/compiler-sfc": {
"version": "3.0.0-rc.5",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.5.tgz",
"integrity": "sha512-huoIFEfFCJxHcpoByAUQti7CIwJdHPLJXKuy2HG7J1B+IEKugtBdF50CLH35ZD8dWM0nyOMFFqTbO7i6CCjL3Q==",
"dev": true,
"requires": {
"@babel/parser": "^7.10.4",
"@babel/types": "^7.10.4",
"@vue/compiler-core": "3.0.0-rc.5",
"@vue/compiler-dom": "3.0.0-rc.5",
"@vue/compiler-ssr": "3.0.0-rc.5",
"@vue/shared": "3.0.0-rc.5",
"consolidate": "^0.15.1",
"estree-walker": "^2.0.1",
"hash-sum": "^2.0.0",
"lru-cache": "^5.1.1",
"magic-string": "^0.25.7",
"merge-source-map": "^1.1.0",
"postcss": "^7.0.27",
"postcss-modules": "^3.1.0",
"postcss-selector-parser": "^6.0.2",
"source-map": "^0.6.1"
}
},
"@vue/compiler-ssr": {
"version": "3.0.0-rc.5",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.5.tgz",
"integrity": "sha512-OU5Vl2+bCDMImS9OeCVnl4lfxZ3/sopdwX2SrUWVKQvCxmmmlyWvoVkC6nNGCs/MrOmIMhKmL6etgzLTWyCkUg==",
"dev": true,
"requires": {
"@vue/compiler-dom": "3.0.0-rc.5",
"@vue/shared": "3.0.0-rc.5"
}
},
"@vue/shared": {
"version": "3.0.0-rc.5",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.5.tgz",
"integrity": "sha512-ZhcgGzBpp+pUzisZgQpM4ctIGgLpYjBj7/rZfbhEPxFHF/BuTV2jmhXvAl8aF9xDAejIcw85xCy92gDSwKtPag==",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true
},
"lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
"dev": true,
"requires": {
"yallist": "^3.0.2"
}
},
"postcss-modules": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-3.2.2.tgz",
"integrity": "sha512-JQ8IAqHELxC0N6tyCg2UF40pACY5oiL6UpiqqcIFRWqgDYO8B0jnxzoQ0EOpPrWXvcpu6BSbQU/3vSiq7w8Nhw==",
"dev": true,
"requires": {
"generic-names": "^2.0.1",
"icss-replace-symbols": "^1.1.0",
"lodash.camelcase": "^4.3.0",
"postcss": "^7.0.32",
"postcss-modules-extract-imports": "^2.0.0",
"postcss-modules-local-by-default": "^3.0.2",
"postcss-modules-scope": "^2.2.0",
"postcss-modules-values": "^3.0.0",
"string-hash": "^1.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
"dev": true
}
}
},
"eslint-plugin-vue": { "eslint-plugin-vue": {
"version": "7.8.0", "version": "7.9.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.8.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.9.0.tgz",
"integrity": "sha512-OGrnPz+PuYL2HmVyBHxm4mRjxW2kfFCQE6Hw9G6qOHs/Pcu0srOlCCW0FMa8SLzIEqxl8WuKoBSPcMnrjUG2vw==", "integrity": "sha512-2Q0qQp5+5h+pZvJKCbG1/jCRUYrdgAz5BYKGyTlp2NU8mx09u3Hp7PsH6d5qef6ojuPoCXMnrbbDxeoplihrSw==",
"dev": true, "dev": true,
"requires": { "requires": {
"eslint-utils": "^2.1.0", "eslint-utils": "^2.1.0",
@ -5282,6 +5453,12 @@
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true "dev": true
}, },
"fast-diff": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
"dev": true
},
"fast-glob": { "fast-glob": {
"version": "2.2.7", "version": "2.2.7",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
@ -9493,11 +9670,19 @@
"dev": true "dev": true
}, },
"prettier": { "prettier": {
"version": "1.19.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
"integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
"dev": true
},
"prettier-linter-helpers": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
"dev": true, "dev": true,
"optional": true "requires": {
"fast-diff": "^1.1.2"
}
}, },
"pretty-error": { "pretty-error": {
"version": "2.1.2", "version": "2.1.2",
@ -11840,9 +12025,9 @@
"dev": true "dev": true
}, },
"v8-compile-cache": { "v8-compile-cache": {
"version": "2.2.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
"integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==", "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
"dev": true "dev": true
}, },
"validate-npm-package-license": { "validate-npm-package-license": {
@ -11885,13 +12070,13 @@
"dev": true "dev": true
}, },
"vue": { "vue": {
"version": "3.0.7", "version": "3.0.11",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.11.tgz",
"integrity": "sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==", "integrity": "sha512-3/eUi4InQz8MPzruHYSTQPxtM3LdZ1/S/BvaU021zBnZi0laRUyH6pfuE4wtUeLvI8wmUNwj5wrZFvbHUXL9dw==",
"requires": { "requires": {
"@vue/compiler-dom": "3.0.7", "@vue/compiler-dom": "3.0.11",
"@vue/runtime-dom": "3.0.7", "@vue/runtime-dom": "3.0.11",
"@vue/shared": "3.0.7" "@vue/shared": "3.0.11"
} }
}, },
"vue-class-component": { "vue-class-component": {
@ -11920,9 +12105,9 @@
"dev": true "dev": true
}, },
"vue-loader": { "vue-loader": {
"version": "16.1.2", "version": "16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz", "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==", "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"requires": { "requires": {
"chalk": "^4.1.0", "chalk": "^4.1.0",
"hash-sum": "^2.0.0", "hash-sum": "^2.0.0",

View File

@ -16,9 +16,9 @@
"license": "Apache-2.0", "license": "Apache-2.0",
"homepage": "https://www.graphite.design", "homepage": "https://www.graphite.design",
"dependencies": { "dependencies": {
"vue": "^3.0.7", "vue": "^3.0.11",
"vue-class-component": "^8.0.0-0", "vue-class-component": "^8.0.0-0",
"vue-loader": "^16.1.2" "vue-loader": "^16.2.0"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/eslint-plugin": "^2.33.0",
@ -26,14 +26,17 @@
"@vue/cli-plugin-eslint": "^4.5.12", "@vue/cli-plugin-eslint": "^4.5.12",
"@vue/cli-plugin-typescript": "^4.5.12", "@vue/cli-plugin-typescript": "^4.5.12",
"@vue/cli-service": "^4.5.12", "@vue/cli-service": "^4.5.12",
"@vue/compiler-sfc": "^3.0.7", "@vue/compiler-sfc": "^3.0.11",
"@vue/eslint-config-airbnb": "^5.0.2", "@vue/eslint-config-airbnb": "^5.0.2",
"@vue/eslint-config-typescript": "^5.0.2", "@vue/eslint-config-typescript": "^5.0.2",
"@wasm-tool/wasm-pack-plugin": "github:wasm-tool/wasm-pack-plugin", "@wasm-tool/wasm-pack-plugin": "github:wasm-tool/wasm-pack-plugin",
"eslint": "^6.7.2", "eslint": "^6.8.0",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-import": "^2.20.2", "eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^7.8.0", "eslint-plugin-prettier-vue": "^3.0.0-alpha.2",
"eslint-plugin-vue": "^7.9.0",
"lint-staged": "^9.5.0", "lint-staged": "^9.5.0",
"prettier": "^2.2.1",
"sass": "^1.32.8", "sass": "^1.32.8",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"typescript": "~3.9.3", "typescript": "~3.9.3",
@ -45,7 +48,7 @@
"pre-commit": "lint-staged" "pre-commit": "lint-staged"
}, },
"lint-staged": { "lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [ "*.{ts,js,json,vue}": [
"vue-cli-service lint", "vue-cli-service lint",
"git add" "git add"
] ]

View File

@ -3,7 +3,9 @@
</template> </template>
<style lang="scss"> <style lang="scss">
html, body, #app { html,
body,
#app {
margin: 0; margin: 0;
height: 100%; height: 100%;
font-family: "Source Sans Pro", Arial, sans-serif; font-family: "Source Sans Pro", Arial, sans-serif;

View File

@ -3,7 +3,7 @@
<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }"> <div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
<div class="tab-group"> <div class="tab-group">
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel"> <div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
<span>{{tabLabel}}</span> <span>{{ tabLabel }}</span>
<IconButton :size="16" v-if="tabCloseButtons"> <IconButton :size="16" v-if="tabCloseButtons">
<CloseX /> <CloseX />
</IconButton> </IconButton>
@ -54,7 +54,8 @@
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
position: relative; position: relative;
&::before, &::after { &::before,
&::after {
content: ""; content: "";
width: 16px; width: 16px;
height: 8px; height: 8px;

View File

@ -1,10 +1,16 @@
<template> <template>
<LayoutRow class="dockable-grid-subdivision"> <LayoutRow class="dockable-grid-subdivision">
<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 1597;"> <LayoutCol class="dockable-grid-subdivision" style="flex-grow: 1597">
<DockablePanel :panelType="'Document'" :tabCloseButtons="true" :tabMinWidths="true" :tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']" :tabActiveIndex="0" /> <DockablePanel
:panelType="'Document'"
:tabCloseButtons="true"
:tabMinWidths="true"
:tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']"
:tabActiveIndex="0"
/>
</LayoutCol> </LayoutCol>
<LayoutCol class="dockable-grid-resize-gutter"></LayoutCol> <LayoutCol class="dockable-grid-resize-gutter"></LayoutCol>
<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 319;"> <LayoutCol class="dockable-grid-subdivision" style="flex-grow: 319">
<LayoutRow class="dockable-grid-subdivision"> <LayoutRow class="dockable-grid-subdivision">
<DockablePanel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" /> <DockablePanel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
</LayoutRow> </LayoutRow>
@ -13,7 +19,7 @@
<DockablePanel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" /> <DockablePanel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
</LayoutRow> </LayoutRow>
<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow> <LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
<LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0;"> <LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0">
<DockablePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" /> <DockablePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
</LayoutRow> </LayoutRow>
</LayoutCol> </LayoutCol>

View File

@ -83,14 +83,8 @@
<div class="spacer"></div> <div class="spacer"></div>
<div class="working-colors"> <div class="working-colors">
<div class="swatch-pair"> <div class="swatch-pair">
<button <button class="secondary swatch" style="background: white"></button>
class="secondary swatch" <button class="primary swatch" style="background: black"></button>
style="background: white;"
></button>
<button
class="primary swatch"
style="background: black;"
></button>
</div> </div>
<div class="swap-and-reset"> <div class="swap-and-reset">
<IconButton :size="16"> <IconButton :size="16">
@ -103,12 +97,7 @@
</div> </div>
</LayoutCol> </LayoutCol>
<LayoutCol :class="'viewport'"> <LayoutCol :class="'viewport'">
<div <div class="canvas" @mousedown="canvasMouseDown" @mouseup="canvasMouseUp" @mousemove="canvasMouseMove">
class="canvas"
@mousedown="canvasMouseDown"
@mouseup="canvasMouseUp"
@mousemove="canvasMouseMove"
>
<svg v-html="viewportSvg"></svg> <svg v-html="viewportSvg"></svg>
</div> </div>
</LayoutCol> </LayoutCol>
@ -195,7 +184,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { registerResponseHandler, ResponseType } from "../../response-handler"; import { ResponseType, registerResponseHandler } from "../../response-handler";
import LayoutRow from "../layout/LayoutRow.vue"; import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue"; import LayoutCol from "../layout/LayoutCol.vue";
import ShelfItem from "../widgets/ShelfItem.vue"; import ShelfItem from "../widgets/ShelfItem.vue";
@ -328,13 +317,18 @@ export default defineComponent({
select_tool(toolName); select_tool(toolName);
}, },
async viewModeChanged(toolIndex: number) { async viewModeChanged(toolIndex: number) {
function todo(_: number) { return _; } function todo(_: number) {
return _;
}
todo(toolIndex); todo(toolIndex);
}, },
}, },
mounted() { mounted() {
registerResponseHandler(ResponseType.UpdateCanvas, (responseData) => { registerResponseHandler(ResponseType.UpdateCanvas, (responseData) => {
this.viewportSvg = responseData.split("\n").map((shape, i) => shape.replace("#fff", `#${Math.floor(Math.abs(Math.sin(i + 1)) * 16777215).toString(16)}`)).join("\n"); this.viewportSvg = responseData
.split("\n")
.map((shape, i) => shape.replace("#fff", `#${Math.floor(Math.abs(Math.sin(i + 1)) * 16777215).toString(16)}`))
.join("\n");
}); });
registerResponseHandler(ResponseType.SetActiveTool, (responseData) => { registerResponseHandler(ResponseType.SetActiveTool, (responseData) => {
this.activeTool = responseData; this.activeTool = responseData;

View File

@ -1,19 +1,14 @@
<template> <template>
<div> <div></div>
</div>
</template> </template>
<style lang="scss"> <style lang="scss"></style>
</style>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
components: { components: {},
}, props: {},
props: {
},
}); });
</script> </script>

View File

@ -1,19 +1,14 @@
<template> <template>
<div> <div></div>
</div>
</template> </template>
<style lang="scss"> <style lang="scss"></style>
</style>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
components: { components: {},
}, props: {},
props: {
},
}); });
</script> </script>

View File

@ -1,19 +1,14 @@
<template> <template>
<div> <div></div>
</div>
</template> </template>
<style lang="scss"> <style lang="scss"></style>
</style>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
components: { components: {},
}, props: {},
props: {
},
}); });
</script> </script>

View File

@ -42,8 +42,7 @@
import { defineComponent } from "vue"; import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
components: { components: {},
},
props: { props: {
horizontal: { type: Boolean, default: false }, horizontal: { type: Boolean, default: false },
}, },

View File

@ -78,7 +78,6 @@
} }
} }
} }
} }
</style> </style>
@ -86,9 +85,7 @@
import { defineComponent } from "vue"; import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
components: { components: {},
}, props: {},
props: {
},
}); });
</script> </script>

View File

@ -44,8 +44,7 @@
import { defineComponent } from "vue"; import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
components: { components: {},
},
props: { props: {
initialIndex: { type: Number, required: true }, initialIndex: { type: Number, required: true },
setIndex: { type: Function, required: false }, setIndex: { type: Function, required: false },
@ -66,7 +65,9 @@ export default defineComponent({
}); });
}, },
watch: { watch: {
activeIndex() { this.updateActiveIconButton(); }, activeIndex() {
this.updateActiveIconButton();
},
}, },
methods: { methods: {
// This method may be called by the user of this component by setting a `ref="radioPicker"` attribute and calling `(this.$refs.viewModePicker as typeof RadioPicker).setActive(...)` // This method may be called by the user of this component by setting a `ref="radioPicker"` attribute and calling `(this.$refs.viewModePicker as typeof RadioPicker).setActive(...)`

View File

@ -69,5 +69,4 @@ export default defineComponent({
InputHint, InputHint,
}, },
}); });
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="input-hint"> <div class="input-hint">
<span class="input-key" v-for="inputKey in inputKeys" :key="inputKey" :class="keyCapWidth(inputKey)"> <span class="input-key" v-for="inputKey in inputKeys" :key="inputKey" :class="keyCapWidth(inputKey)">
{{inputKey}} {{ inputKey }}
</span> </span>
<span class="input-mouse" v-if="inputMouse"> <span class="input-mouse" v-if="inputMouse">
<MouseHintNone v-if="inputMouse === MouseInputInteraction.None" width="16" height="16" /> <MouseHintNone v-if="inputMouse === MouseInputInteraction.None" width="16" height="16" />
@ -29,7 +29,8 @@
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
.input-key, .input-mouse { .input-key,
.input-mouse {
margin-right: 4px; margin-right: 4px;
} }

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="window-title"> <div class="window-title">
<span>{{title}}</span> <span>{{ title }}</span>
</div> </div>
</template> </template>

View File

@ -3,7 +3,9 @@ type ResponseMap = {
[response: string]: ResponseCallback | undefined; [response: string]: ResponseCallback | undefined;
}; };
declare global { declare global {
interface Window { responseMap: ResponseMap } interface Window {
responseMap: ResponseMap;
}
} }
export enum ResponseType { export enum ResponseType {

View File

@ -1,12 +1,9 @@
declare module "*.vue" { declare module "*.vue" {
import type { DefineComponent, DefineComponent } from "vue";
const component: DefineComponent; const component: DefineComponent;
export default component; export default component;
} }
declare module "*.svg" { declare module "*.svg" {
const component: DefineComponent; const component: DefineComponent;
export default component; export default component;
} }

View File

@ -28,10 +28,8 @@
"include": [ "include": [
"src/**/*.ts", "src/**/*.ts",
"src/**/*.d.ts", "src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue", "src/**/*.vue",
"tests/**/*.ts", "tests/**/*.ts",
"tests/**/*.tsx"
], ],
"exclude": [ "exclude": [
"node_modules" "node_modules"

View File

@ -10,19 +10,15 @@ module.exports = {
.plugin("wasm-pack") .plugin("wasm-pack")
.use(WasmPackPlugin) .use(WasmPackPlugin)
.init( .init(
(Plugin) => new Plugin({ (Plugin) =>
new Plugin({
crateDirectory: path.resolve(__dirname, "wasm"), crateDirectory: path.resolve(__dirname, "wasm"),
}), })
) )
.end(); .end();
const svgRule = config.module.rule("svg"); const svgRule = config.module.rule("svg");
svgRule.uses.clear(); svgRule.uses.clear();
svgRule svgRule.use("vue-loader").loader("vue-loader").end().use("vue-svg-loader").loader("vue-svg-loader");
.use("vue-loader")
.loader("vue-loader")
.end()
.use("vue-svg-loader")
.loader("vue-svg-loader");
}, },
}; };