mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-10-03 08:08:11 +08:00
Port frontend from Vue to Svelte (WIP in separate folder, many bugs) (#964)
* Make `tauri build` just work * Move folder: frontend/wasm -> wasm * Create SvelteKit project with 'npx create-svelte' * Move wasm-communication into seperate npm package * Use wasm-pack directly and pack package.json * Got it to work * Add primitive build script for wasm npm module * Fix wasm build script (python) * Clean up glue code * Rewrite wasm build script in node.js * Add serde-reflection to trace types * Add traced types * Generate typescript (.d.ts) from Rust types * Update .d.ts * Finalize TS types * Add script to update .d.ts * Add watch command to build wasm-bindgen * Make wasm work again * Add sass; fix build script for windows * Describe requirement for wasm-pack * Add license * Copy and reorganize vue components * translate LayoutCol.vue * Split app.scss into pieces * Translate LayoutRow.svelte * Rename scss files * Fix compile issues on Windows * WIP port TitleBar * Support classes for LayoutCol/Row * Restructure based on Vue codebase * Port all components in window folder * Port FloatingMenu * Port Document panel component * Update readme after folder move * Update typegen: print discriminant by default * Update typegen: Merge from branch 'tailwind' 4f14fedb Fixes bigint & bytes * Made Vue/webpack/eslint to accept wasm package at new location This is quite a hack. Those two packages are both named the same. Yes, it's an npm package inside another npm package. - frontend/src/wasm-communication/ - frontend-svelte/glue/ 'wasm/pkg/index.js' imports the correct one registered when linking. * Port LayerTree * Port NodeGraph * Port Properties * Port components in /floating-menus * Finish porting all Vue -> Svelte components * Change import prefix * Revert type generation * Revert moved wasm folder * Revert all of @locriacyber's work on this branch - Remove Vite and restore Webpack - Remove SvelteKit - Remove everything except the components I ported to Svelte - Restore all frontend files from Vue code, now altered for Svelte * Convert Vue's 'reactive' and 'provide' to Svelte's stores and contexts * Fix event emitting and bi-di data flow * Undo removal of 'update:' events * Fix 'update:' event dispatching * Fix usage in parent of bi-di component props * Fix component typing, more progress towards no errors * The page builds and opens! * Add loading spinner and remove postcss dependency * Make the basics of document editing work * Fix rebase history Co-authored-by: Locria Cyber <74560659+locriacyber@users.noreply.github.com>
This commit is contained in:
Keavon Chambers
co-authored by
Locria Cyber
Locria Cyber
parent
2f7c45771e
commit
dcc3eadf44
@@ -0,0 +1,133 @@
|
||||
const webpackConfigPath = require.resolve("@vue/cli-service/webpack.config.js");
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es2020: true,
|
||||
},
|
||||
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: 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: [
|
||||
// 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: "off",
|
||||
quotes: ["error", "double", { allowTemplateLiterals: true }],
|
||||
camelcase: ["error", { properties: "always" }],
|
||||
"linebreak-style": ["error", "unix"],
|
||||
"eol-last": ["error", "always"],
|
||||
"max-len": ["error", { code: 200, tabWidth: 4 }],
|
||||
"prefer-destructuring": "off",
|
||||
"no-console": "warn",
|
||||
"no-debugger": "warn",
|
||||
"no-param-reassign": ["error", { props: false }],
|
||||
"no-bitwise": "off",
|
||||
"no-shadow": "off",
|
||||
"no-use-before-define": "off",
|
||||
"no-restricted-imports": ["error", { patterns: [".*", "!@/*"] }],
|
||||
|
||||
// TypeScript plugin config
|
||||
"@typescript-eslint/indent": "off",
|
||||
"@typescript-eslint/camelcase": "off",
|
||||
"@typescript-eslint/no-use-before-define": "off",
|
||||
"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", ignoreRestSiblings: true }],
|
||||
"@typescript-eslint/explicit-function-return-type": "error",
|
||||
"@typescript-eslint/consistent-type-imports": "error",
|
||||
"@typescript-eslint/consistent-type-definitions": ["error", "type"],
|
||||
"@typescript-eslint/consistent-type-assertions": ["error", { assertionStyle: "as", objectLiteralTypeAssertions: "never" }],
|
||||
"@typescript-eslint/consistent-indexed-object-style": ["error", "record"],
|
||||
"@typescript-eslint/consistent-generic-constructors": ["error", "constructor"],
|
||||
"@typescript-eslint/ban-types": ["error", { types: { null: "Use `undefined` instead." } }],
|
||||
|
||||
// Import plugin config (used to intelligently validate module import statements)
|
||||
"import/prefer-default-export": "off",
|
||||
"import/no-relative-packages": "error",
|
||||
"import/order": [
|
||||
"error",
|
||||
{
|
||||
alphabetize: {
|
||||
order: "asc",
|
||||
caseInsensitive: true,
|
||||
},
|
||||
warnOnUnassignedImports: true,
|
||||
"newlines-between": "always-and-inside-groups",
|
||||
pathGroups: [
|
||||
{
|
||||
pattern: "**/*.vue",
|
||||
group: "unknown",
|
||||
position: "after",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// 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",
|
||||
{
|
||||
tabWidth: 4,
|
||||
tabs: true,
|
||||
printWidth: 200,
|
||||
singleQuote: false,
|
||||
},
|
||||
],
|
||||
|
||||
// Vue plugin config (used to validate Vue single-file components)
|
||||
"vue/multi-word-component-names": "off",
|
||||
|
||||
// Vue Accessibility plugin config (included by airbnb defaults but undesirable for a web app project)
|
||||
"vuejs-accessibility/form-control-has-label": "off",
|
||||
"vuejs-accessibility/label-has-for": "off",
|
||||
"vuejs-accessibility/click-events-have-key-events": "off",
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ["*.js"],
|
||||
rules: {
|
||||
"@typescript-eslint/explicit-function-return-type": ["off"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user