mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-07-07 15:55:00 +00:00
Improve web infrastructure
Upgrade npm packages that were locked to old versions due to now-resolved problems Remove unused/unnecessary dependencies and their configurations Fix VS Code format on save Fix VS Code removing EOF newline in JSON files in conflict with npm Remove JSON files from ESLint because it doesn't properly support JSON Add detailed comments to web-related configuration files
This commit is contained in:
Keavon Chambers
parent
0ccb181e2c
commit
d2395b4dcf
9 changed files with 380 additions and 1067 deletions
24
.vscode/launch.json
vendored
24
.vscode/launch.json
vendored
|
|
@ -12,18 +12,18 @@
|
|||
"args": [
|
||||
"build",
|
||||
"--bin=graphite",
|
||||
"--package=graphite"
|
||||
"--package=graphite",
|
||||
],
|
||||
"filter": {
|
||||
"name": "graphite",
|
||||
"kind": "bin"
|
||||
}
|
||||
"kind": "bin",
|
||||
},
|
||||
},
|
||||
"args": [],
|
||||
"cwd": "${workspaceFolder}",
|
||||
"env": {
|
||||
"RUST_LOG": "error"
|
||||
}
|
||||
"RUST_LOG": "error",
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "lldb",
|
||||
|
|
@ -34,15 +34,15 @@
|
|||
"test",
|
||||
"--no-run",
|
||||
"--bin=graphite",
|
||||
"--package=graphite"
|
||||
"--package=graphite",
|
||||
],
|
||||
"filter": {
|
||||
"name": "graphite",
|
||||
"kind": "bin"
|
||||
}
|
||||
"kind": "bin",
|
||||
},
|
||||
},
|
||||
"args": [],
|
||||
"cwd": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
"cwd": "${workspaceFolder}",
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
|
|||
33
.vscode/settings.json
vendored
33
.vscode/settings.json
vendored
|
|
@ -1,27 +1,48 @@
|
|||
{
|
||||
// Rust: save on format
|
||||
"[rust]": {
|
||||
"editor.formatOnSave": true,
|
||||
"editor.formatOnPaste": true,
|
||||
"editor.defaultFormatter": "matklad.rust-analyzer",
|
||||
},
|
||||
"[typescript, javascript, json, vue]": {
|
||||
// Web: save on format (consolidate these when https://github.com/microsoft/vscode/issues/51935 is implemented)
|
||||
"[typescript]": {
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
"source.fixAll.eslint": true,
|
||||
},
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
|
||||
},
|
||||
"[javascript]": {
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true,
|
||||
},
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
|
||||
},
|
||||
"[vue]": {
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true,
|
||||
},
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
|
||||
},
|
||||
// Rust Analyzer config
|
||||
"rust-analyzer.experimental.procAttrMacros": true,
|
||||
"rust-analyzer.cargo.target": "wasm32-unknown-unknown",
|
||||
"files.eol": "\n",
|
||||
"html.format.wrapLineLength": 200,
|
||||
// ESLint config
|
||||
"eslint.format.enable": true,
|
||||
"eslint.workingDirectories": [
|
||||
"./frontend"
|
||||
"./frontend",
|
||||
],
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"typescript",
|
||||
],
|
||||
// Vue config
|
||||
"vetur.format.enable": false,
|
||||
}
|
||||
// VS Code config
|
||||
"html.format.wrapLineLength": 200,
|
||||
"files.eol": "\n",
|
||||
"files.insertFinalNewline": true,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
const webpackConfigPath = require.resolve("@vue/cli-service/webpack.config.js");
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
|
|
@ -5,38 +7,71 @@ module.exports = {
|
|||
node: true,
|
||||
es2020: true,
|
||||
},
|
||||
extends: ["plugin:vue/vue3-essential", "@vue/airbnb", "@vue/typescript/recommended", "plugin:prettier-vue/recommended", "prettier"],
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020,
|
||||
},
|
||||
extends: [
|
||||
// Vue-specific defaults
|
||||
"plugin:vue/vue3-essential",
|
||||
// Vue-compatible JS defaults
|
||||
"@vue/airbnb",
|
||||
// Vue-compatible TS defaults
|
||||
"@vue/typescript/recommended",
|
||||
// Vue-compatible Prettier defaults
|
||||
"plugin:prettier-vue/recommended",
|
||||
// General Prettier defaults
|
||||
"prettier",
|
||||
],
|
||||
settings: {
|
||||
// https://github.com/import-js/eslint-plugin-import#resolvers
|
||||
"import/resolver": {
|
||||
// `node` must be listed first!
|
||||
node: {},
|
||||
webpack: { config: require.resolve("@vue/cli-service/webpack.config.js") },
|
||||
webpack: { config: webpackConfigPath },
|
||||
},
|
||||
|
||||
// https://github.com/meteorlxy/eslint-plugin-prettier-vue
|
||||
"prettier-vue": {
|
||||
// Use Prettier to format the HTML, CSS, and JS blocks of .vue single-file components
|
||||
SFCBlocks: {
|
||||
template: true,
|
||||
style: true,
|
||||
script: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
ignorePatterns: ["node_modules/", "dist/", "pkg/", "wasm/pkg/*", "!.*.js", "!.*.ts", "!.*.json"],
|
||||
ignorePatterns: [
|
||||
// Ignore generated directories
|
||||
"node_modules/",
|
||||
"dist/",
|
||||
"pkg/",
|
||||
"wasm/pkg/",
|
||||
|
||||
// Don't ignore JS and TS dotfiles in this folder
|
||||
"!.*.js",
|
||||
"!.*.ts",
|
||||
],
|
||||
rules: {
|
||||
// Standard ESLint config
|
||||
indent: ["error", "tab", { SwitchCase: 1 }],
|
||||
quotes: ["error", "double"],
|
||||
camelcase: ["error", { properties: "always" }],
|
||||
"linebreak-style": ["error", "unix"],
|
||||
"eol-last": ["error", "always"],
|
||||
"max-len": ["error", { code: 200, tabWidth: 4 }],
|
||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"no-param-reassign": ["error", { props: false }],
|
||||
"import/prefer-default-export": "off",
|
||||
"max-len": ["error", { code: 200, tabWidth: 4 }],
|
||||
|
||||
// TypeScript plugin config
|
||||
"@typescript-eslint/camelcase": "off",
|
||||
"@typescript-eslint/no-use-before-define": "off",
|
||||
"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
|
||||
camelcase: ["error", { properties: "always" }],
|
||||
|
||||
// Import plugin config (used to intelligently validate module import statements)
|
||||
"import/prefer-default-export": "off",
|
||||
|
||||
// Prettier plugin config (used to enforce HTML, CSS, and JS formatting styles as an ESLint plugin, where fixes are reported to ESLint to be applied when linting)
|
||||
"prettier-vue/prettier": [
|
||||
"error",
|
||||
{
|
||||
|
|
|
|||
1276
frontend/package-lock.json
generated
1276
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "graphite-web-frontend",
|
||||
"version": "0.1.0",
|
||||
"description": "Graphite's web app frontend. Planned to be replaced by a Rust native GUI framework in the future.",
|
||||
"version": "0.0.1",
|
||||
"description": "Graphite's web app frontend. Planned to be replaced by a native GUI written in Rust in the future.",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve || npm install && vue-cli-service serve",
|
||||
|
|
@ -11,15 +11,13 @@
|
|||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/graphiteeditor/graphite.git"
|
||||
"url": "git+https://github.com/GraphiteEditor/Graphite.git"
|
||||
},
|
||||
"author": "Graphite Authors <contact@graphite.design>",
|
||||
"license": "Apache-2.0",
|
||||
"homepage": "https://www.graphite.design",
|
||||
"dependencies": {
|
||||
"vue": "~3.0.11",
|
||||
"vue-class-component": "^8.0.0-0",
|
||||
"vue-loader": "~16.2.0"
|
||||
"vue": "^3.2.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^2.33.0",
|
||||
|
|
@ -27,31 +25,22 @@
|
|||
"@vue/cli-plugin-eslint": "^4.5.13",
|
||||
"@vue/cli-plugin-typescript": "^4.5.13",
|
||||
"@vue/cli-service": "^4.5.13",
|
||||
"@vue/compiler-sfc": "~3.0.11",
|
||||
"@vue/compiler-sfc": "^3.2.6",
|
||||
"@vue/eslint-config-airbnb": "^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": "^1.5.0",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-import": "^2.24.0",
|
||||
"eslint-plugin-prettier-vue": "^3.1.0",
|
||||
"eslint-plugin-vue": "^7.16.0",
|
||||
"lint-staged": "^9.5.0",
|
||||
"eslint-plugin-import": "^2.24.2",
|
||||
"eslint-plugin-vue": "^7.17.0",
|
||||
"prettier": "^2.3.2",
|
||||
"sass": "^1.37.5",
|
||||
"sass": "^1.38.1",
|
||||
"sass-loader": "^8.0.2",
|
||||
"typescript": "^4.3.5",
|
||||
"typescript": "^4.4.2",
|
||||
"vue-loader": "^16.5.0",
|
||||
"vue-svg-loader": "^0.17.0-beta.2",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"wasm-pack": "~0.9.1"
|
||||
},
|
||||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,js,json,vue}": [
|
||||
"vue-cli-service lint",
|
||||
"git add"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { createApp } from "vue";
|
|||
import { fullscreenModeChanged } from "@/utilities/fullscreen";
|
||||
import { onKeyUp, onKeyDown, onMouseMove, onMouseDown, onMouseUp, onMouseScroll, onWindowResize } from "@/utilities/input";
|
||||
import "@/utilities/errors";
|
||||
|
||||
import App from "@/App.vue";
|
||||
|
||||
// Bind global browser events
|
||||
|
|
|
|||
2
frontend/src/types.d.ts
vendored
2
frontend/src/types.d.ts
vendored
|
|
@ -1,8 +1,10 @@
|
|||
// Allow JS import statements to work with .vue files
|
||||
declare module "*.vue" {
|
||||
const component: DefineComponent;
|
||||
export default component;
|
||||
}
|
||||
|
||||
// Allow JS import statements to work with .svg files
|
||||
declare module "*.svg" {
|
||||
const component: DefineComponent;
|
||||
export default component;
|
||||
|
|
|
|||
|
|
@ -34,4 +34,4 @@
|
|||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,25 @@
|
|||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
|
||||
const path = require("path");
|
||||
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
|
||||
|
||||
module.exports = {
|
||||
lintOnSave: "warning",
|
||||
// https://cli.vuejs.org/guide/webpack.html
|
||||
chainWebpack: (config) => {
|
||||
// Rust wasm bindgen https://github.com/rustwasm/wasm-bindgen
|
||||
// WASM Pack Plugin integrates compiled Rust code (.wasm) and generated wasm-bindgen code (.js) with the webpack bundle
|
||||
// Use this JS to import the bundled Rust entry points: const wasm = import("@/../wasm/pkg");
|
||||
// Then call WASM functions with: (await wasm).function_name()
|
||||
// https://github.com/wasm-tool/wasm-pack-plugin
|
||||
config
|
||||
// https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
|
||||
.plugin("wasm-pack")
|
||||
.use(WasmPackPlugin)
|
||||
.init(
|
||||
(Plugin) =>
|
||||
new Plugin({
|
||||
crateDirectory: path.resolve(__dirname, "wasm"),
|
||||
// Remove when this issue is resolved https://github.com/wasm-tool/wasm-pack-plugin/issues/93
|
||||
outDir: path.resolve(__dirname, "wasm/pkg"),
|
||||
watchDirectories: [
|
||||
path.resolve(__dirname, "../editor"),
|
||||
path.resolve(__dirname, "../graphene"),
|
||||
|
|
@ -23,8 +30,20 @@ module.exports = {
|
|||
)
|
||||
.end();
|
||||
|
||||
const svgRule = config.module.rule("svg");
|
||||
svgRule.uses.clear();
|
||||
svgRule.use("vue-loader").loader("vue-loader").end().use("vue-svg-loader").loader("vue-svg-loader");
|
||||
// Vue SVG Loader enables importing .svg files into .vue single-file components and using them directly in the HTML
|
||||
// https://vue-svg-loader.js.org/
|
||||
config.module
|
||||
// Replace Vue's existing base loader by first clearing it (https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule)
|
||||
.rule("svg")
|
||||
.uses.clear()
|
||||
.end()
|
||||
// Add vue-loader as a loader
|
||||
.use("vue-loader")
|
||||
.loader("vue-loader")
|
||||
.end()
|
||||
// Add vue-svg-loader as a loader
|
||||
.use("vue-svg-loader")
|
||||
.loader("vue-svg-loader")
|
||||
.end();
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue