From ab7f975f7a2c351699bbff5084abc0785628bad8 Mon Sep 17 00:00:00 2001
From: sockmaster27 <61235930+sockmaster27@users.noreply.github.com>
Date: Sun, 10 Nov 2024 00:41:45 +0100
Subject: [PATCH] Add `CONTRIBUTING.md`

---
 CONTRIBUTING.md | 69 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 CONTRIBUTING.md

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..04f35b6
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,69 @@
+# Contributing to Svader
+
+All contributions to Svader are welcome and greatly appreciated!
+
+This document outlines the process of developing and contributing to the project.
+
+## Development
+
+Start by installing the necessary dependencies:
+
+```bash
+npm install
+```
+
+### Project Structure
+
+The project is structured in the following way:
+
+-   The top-level package, `"svader-monorepo"`, is a workspace containing the necessary configuration files, scripts, etc. to build and test the project.
+-   `packages/svader/` contains the Svader library itself, which is the main package that is published to npm.
+-   `packages/tests-svelte4/` and `packages/tests-svelte5/` contain (what should be) visually identical test sites implemented with Svelte 4 and Svelte 5, respectively. These sites contain a set of routes representing different test cases for the library.
+-   `tests/` contains the automated tests of the project, plus the `.generated-screenshots/` directory. The contents of this directory are automatically generated by the tests and should, in general, not be modified manually. See the [Testing](#testing) section for more information.
+
+To run a test site on the development server, use the following commands, respectively:
+
+Svelte 4:
+
+```bash
+npm run dev:v4
+```
+
+Svelte 5:
+
+```bash
+npm run dev:v5
+```
+
+This will start the development server, allowing you to view the test site at `http://localhost:5173`.
+
+### Testing
+
+To run the tests, run the following command in the root directory of the project:
+
+```bash
+npm run test
+```
+
+This will run the automated tests using the [Playwright](https://playwright.dev/) testing framework.
+
+Playwright works by running the test sites in a set of different browsers on your computer. This means that it might be necessary to install some additional browsers at this point, which Playwright will guide you through if necessary.
+
+Svader's test suite consists of a set of visual tests that are run against each of the test sites. The tests will take screenshots at the declared points and compare them to a reference image from the `.generated-screenshots/` directory. When a newly added test is run for the first time, the reference images will be created automatically and can be inspected to ensure that the test is working as expected. If a reference image has become outdated, the image can be deleted, and the tests can be re-run to generate a new one.
+
+## Style Guide
+
+To ensure consistent code style, the [Prettier](https://prettier.io/) code formatter is used to automatically format the code.
+When you open a pull request, an automated check will be run to ensure that the code is formatted correctly with respect to the `.prettierrc` configuration file.
+
+The same check can be run locally using the following command:
+
+```bash
+npm run check
+```
+
+When using VS Code, the workspace is set up to automatically run this formatting on every save, as long as you have the recommended [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) installed.
+
+## Licensing
+
+By contributing your code, you agree to license your contribution under the [MIT License](LICENSE.md).