Port frontend from Vue to Svelte (WIP in separate folder, many bugs) (G…

…raphiteEditor#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' 4f14fed

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 <[email protected]>

.vscode/settings.json

@@ -47,4 +47,8 @@
 	"html.format.wrapLineLength": 200,
 	"files.eol": "\n",
 	"files.insertFinalNewline": true,
+	"prettier.singleQuote": false,
+	"prettier.useTabs": true,
+	"prettier.tabWidth": 4,
+	"prettier.printWidth": 200,
 }

Cargo.toml

@@ -4,6 +4,7 @@ members = [
 	"document-legacy",
 	"proc-macros",
 	"frontend/wasm",
+	"frontend-svelte/wasm",
 	"frontend/src-tauri",
 	"node-graph/gcore",
 	"node-graph/gstd",
@@ -34,5 +35,11 @@ opt-level = 3
 [profile.dev.package.graphite-wasm]
 opt-level = 3
 
+[profile.release.package.graphite-wasm-svelte]
+opt-level = 3
+
+[profile.dev.package.graphite-wasm-svelte]
+opt-level = 3
+
 #[profile.dev]
 #opt-level = 3

frontend-svelte/.eslintrc.js

@@ -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"],
+			},
+		},
+	],
+};

frontend-svelte/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+wasm/pkg/
+public/build/

frontend-svelte/README.md

@@ -0,0 +1,34 @@
+# Overview of `/frontend/`
+The Graphite frontend is a web app that provides the presentation for the editor. It displays the GUI based on state from the backend and provides users with interactive widgets that send updates to the backend, which is the source of truth for state information. The frontend is built out of reactive components using the [Vue](https://vuejs.org/) framework. The backend is written in Rust and compiled to WebAssembly (WASM) to be run in the browser alongside the JS code.
+
+For lack of other options, the frontend is currently written as a web app. Maintaining web compatibility will always be a requirement, but the long-term plan is to port this code to a Rust-based native GUI framework, either written by the Rust community or created by our project if necessary. As a medium-term compromise, we may wrap the web-based frontend in a desktop webview windowing solution like Electron (probably not) or [Tauri](https://tauri.studio/) (probably).
+
+## Bundled assets: `assets/`
+Icons and images that are used in components and embedded into the application bundle by the build system using [loaders](https://webpack.js.org/loaders/).
+
+## Public assets: `public/`
+Static content like favicons that are copied directly into the root of the build output by the build system.
+
+## Vue/TypeScript source: `src/`
+Source code for the web app in the form of Vue components and [TypeScript](https://www.typescriptlang.org/) files.
+
+## WebAssembly wrapper: `wasm/`
+Wraps the editor backend codebase (`/editor`) and provides a JS-centric API for the web app to use unburdened by Rust's complex data types that are incompatible with JS data types. Bindings (JS functions that call into the WASM module) are provided by [wasm-bindgen](https://rustwasm.github.io/docs/wasm-bindgen/) in concert with [wasm-pack](https://github.com/rustwasm/wasm-pack).
+
+## ESLint configurations: `.eslintrc.js`
+[ESLint](https://eslint.org/) is the tool which enforces style rules on the JS, TS, and Vue files in our frontend codebase. As it is set up in this config file, ESLint will complain about bad practices and often help reformat code automatically when (in VS Code) the file is saved or `npm run lint` is executed. (If you don't use VS Code, remember to run this command before committing!) This config file for ESLint sets our style preferences and configures our usage of extensions/plugins for Vue support, [Airbnb](https://github.com/airbnb/javascript)'s popular catalog of sane defaults, and [Prettier](https://prettier.io/)'s role as a code formatter.
+
+## npm ecosystem packages: `package.json`
+While we don't use Node.js as a JS-based server, we do have to rely on its wide ecosystem of packages for our build system toolchain. If you're just getting started, make sure to install the latest LTS copy of Node.js and then run `cd frontend && npm install` to install these packages on your system. Our project's philosophy on third-party packages is to keep our dependency tree as light as possible, so adding anything new to our `package.json` should have overwhelming justification. Most of the packages are just development tooling (TypeScript, Vue CLI, ESLint, Prettier, wasm-pack, and [Sass](https://sass-lang.com/)) that run in your console during the build process.
+
+## npm package installed versions: `package-lock.json`
+Specifies the exact versions of packages installed in the npm dependency tree. While `package.json` specifies which packages to install and their minimum/maximum acceptable version numbers, `package-lock.json` represents the exact versions of each dependency and sub-dependency. Running `npm install` will grab these exact versions to ensure you are using the same packages as everyone else working on Graphite. `npm update` will modify `package-lock.json` to specify newer versions of any updated (sub-)dependencies and download those, as long as they don't exceed the maximum version allowed in `package.json`. To check for newer versions that exceed the max version, run `npm outdated` to see a list. Unless you know why you are doing it, try to avoid committing updates to `package-lock.json` by mistake if your code changes don't pertain to package updates. And never manually modify the file.
+
+## TypeScript configurations: `tsconfig.json`
+Basic configuration options for the TypeScript build tool to do its job in our repository.
+
+## vue-svg-loader.js
+An extremely simple Webpack loader that allows us to `import` SVG files into our JS to be used like they are Vue components. They end up as inline SVG elements in the web page like `<svg ...>...</svg>`, rather than being `<img src="..." />` elements, which provides some benefits like being able to apply CSS styles to them. These get embedded into the bundle (they live somewhere all together in a big, messy JS file) rather than being separate static SVG files that would have to be served individually.
+
+## Vue CLI/Webpack configurations: `vue.config.js`
+[Vue CLI](https://cli.vuejs.org/) is a command line tool built around the [Webpack](https://webpack.js.org/) bundler/build system. This file is where we configure Webpack to set up plugins (like wasm-pack and license-checker) and loaders (like for Vue and SVG files). Part of the license-checker plugin setup includes some functions to format web package licenses, as well as Rust package licenses provided by [cargo-about](https://github.com/EmbarkStudios/cargo-about), into a text file that's distributed with the application to provide license notices for third-party code.