Skip to content

Latest commit

 

History

History
88 lines (60 loc) · 3.8 KB

CONTRIBUTING.md

File metadata and controls

88 lines (60 loc) · 3.8 KB

Contributing Guide

Features are developed in another branch or fork. After the feature is ready, a pull request to the master branch should be opened.

Prerequisites

  • Node 20 or greater. Don't install Chocolatey.
  • A code editor, like VSCode or Webstorm.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Remember to use a browser that supports WebGPU.

Type-Check, Compile and Minify for Production

npm run build

Tooling

VSCode with

  • Vue - Official for Vue.js support
  • Prettier for code formatting
    • Settings → Format On Save → Enable ("editor.formatOnSave": true,)
    • If you are using autosave: Settings → Autosave → On Focus Change ("files.autoSave": "onFocusChange",)
  • Tailwind CSS IntelliSense for slightly better Tailwind CSS suggestions

I also totally recommend trying out the following browser extensions

Code Structure

  • public/ contains files that are simply copied to the output. Very rarely used.
  • src/ has all the code.
  • src/assets/ contains assets like pictures or CSS files that do not have a better location. Rarely used.
  • src/components/ contains proper Vue.js components that can be used everywhere.
  • src/filesystem/ deals with saving and loading files. Uses the latest filesystem API together with a sandboxed "origin private filesystem".
  • src/router/ contains the Vue.js router stuff, reponsible for mapping URLs to different pages/views.
  • src/scenes/ contains the CPU state of the scenes.
  • src/stores/ contains Pinia stores. They're globally accessible, reactive objects.
  • src/views/ contains the different pages. Currently the HomeView.vue is the only one that matters.
  • src/App.vue is the main Vue.js file.
  • src/main.ts is the Typescript entrypoint.
  • index.html is the entrypoint for the website.
  • package.json is the dependency file. It also includes "scripts" that can be started with npm run.
  • tsconfig.json is required to tell Typescript what to do. It's split up, because there are technically multiple different Typescript configs that apply to our code.
    • tsconfig.app.json is for the website.
    • tsconfig.node.json is for configuration files, like the vite.config.ts.
  • vite.config.ts is the configuration file for the Vite bundler.

Useful Documentation

Other libraries where one can look up the documentation as needed are

  • Typescript
  • Pinia: For the src/stores/
  • Vitest: For unit tests

High Level Structure

The index.html loads the main.ts file, which creates a Vue.js instance. From there App.vue gets loaded, which is responsible for the overall layout of the site. It embeds a <RouterView>, which is where all the views/pages go. (HomeView.vue)

HomeView.vue asynchronously loads the filesystem code, and WebGPU engine. They're a bit slow to initialize, so we load them very early, and we're avoiding doing hot module reloading with them. Once they've finished loading, we create our EditorAndOutput.vue component.

Deployment

The website is hosted on GitHub Pages. It is deployed using a GitHub action called deploy. The action needs to be manually triggered.