nvh95 · nvh95 · May 13, 2022 · Apr 23, 2022 · May 6, 2022 · May 10, 2022
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,5 +1,99 @@
-# Contribution
+# Contributing
 
-We are working on writing a contribution guideline. Progress track at [Missing CONTRIBUTING.md](https://github.com/nvh95/jest-preview/issues/26)
+## Welcome
 
-For now, please see [Run Jest Preview Locally](./README.md#run-jest-preview-locally). Stay tune for a more details `CONTRIBUTING.md` file. Thanks.
+Welcome to CONTRIBUTING zone. If you are reading this, you probably want to contribute to Open Source projects. That's great! Contributing to an open source project is a great opportunity to learn, sharpen your skills and help others. Luckily, Jest Preview is a free and open source project and we always welcome new contributors. Its mission is to help front end developers' lives easier and more enjoyable, also improve the standard of front end applications by encouraging them to write more high-quality tests, by providing an ability to view the actual UI in Jest in an external browser like Chrome.
+
+Jest Preview aims to be a community-driven project. So we hope to see your contributions to make Jest Preview a favorite library for front end developers when it comes to testing.
+
+## What can I contribute?
+
+We appreciated any help. There is not a thing as a small contribution. If you see a typo, send us a PR. If you experience a bug, please open an issue. If you have a suggestion, let us know. Below are some ways you can contribute to Jest Preview:
+
+- **Submit bugs or issues:**: Software is full of bugs. Jest Preview is no exception. If you use Jest Preview and find a bug, please open an issue at [Jest Preview's issues](https://github.com/nvh95/jest-preview/issues)
+- **Docs**: We have a documentation site at [www.jest-preview.com](https://www.jest-preview.com/docs/getting-started/intro), it's very easier to contribute to the documentation by using `Edit this page` button at the bottom of each page. If you see a typo, an unclear page or incorrect grammar, please send us a PR.
+- **Fix bugs**: We are tracking bugs at [Issues](https://github.com/nvh95/jest-preview/issues). Please [claim an issue](#claim-issues) then open a PR to fix a bug.
+- **Add new features**: Do you use Jest Preview for your projects and find out Jest Preview is missing a feature? Please open an issue to discuss it. And it's great if you can help to implement that feature.
+- **Answer questions and issues on GitHub and Discord**: [GitHub issues](https://github.com/nvh95/jest-preview/issues) and [Discord](https://discord.gg/X5PyPUfemh)
+
+If not sure what to contribute, but you still want to contribute something, let us know in [Discord](https://discord.gg/X5PyPUfemh) (channel #contributors)
+
+## Claim issues
+
+There are some labels worth looking at for a new contributor:
+
+- [good first issue](https://github.com/nvh95/jest-preview/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22): Some issues to help you get your feet wet with Jest Preview
+- [help wanted](https://github.com/nvh95/jest-preview/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22): if you have specific knowledge in one domain, working on these issues can make your expertise shine.
+
+If you want to work on any of these issues, just drop a message such as "I'd like to work on this". Depending on the difficulty of the issue, it can take a few days or a week to implement the feature/ bug fix. It's great if you can send a PR within seven days. If you need more time on a specific issue, please let us know. After that, we can delegate the issue to someone else if you are not available.
+
+## npm scripts
+
+Jest Preview repository has some npm scripts to help you develop efficiently.
+
+- `npm install`: install all dependencies
+- `npm run build:watch`: build `jest-preview` and rebuild it when changes are made
+- `npm run types`: emit types, usually only need to run only once
+- `npm run server`: start Jest Preview Server
+- `npm run test:dev`: run Jest at `/demo/__tests__/App.test.tsx` (you will work with this file most of the time)
+
+## Run locally
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Run the real demo app:
+
+```bash
+npm run dev
+```
+
+Run jest tests and Jest Preview server simultaneously:
+
+```bash
+npm run test
+```
+
+Open chrome at http://localhost:3336 to see the preview
+
+However, it's recommended to run jest tests and Jest Preview server separately:
+
+```bash
+npm run server # Run jest-preview server
+npm run test:dev # Run jest
+```
+
+Whenever `preview.debug()` is triggered, or whenever a test fails, you will see the changes reflected on the browser immediately.
+
+## How jest-preview works
+
+- See [HOW_JEST_PREVIEW_WORKS.md](https://github.com/nvh95/jest-preview/tree/main/HOW_JEST_PREVIEW_WORKS.md)
+
+## Repository architecture
+
+Following are brief descriptions of the repository architecture:
+
+- [src](https://github.com/nvh95/jest-preview/tree/main/src/): contains most of the code of Jest Preview such as `debug` function, `jestPreviewConfigure`, all Jest Transformations, pre-configured presets, adapters, etc.
+- [server](https://github.com/nvh95/jest-preview/tree/main/server/): contains Jest Preview server code, which is a web server that serves the preview page (Jest Preview Dashboard).
+- [demo](https://github.com/nvh95/jest-preview/tree/main/demo/): contains the demo app. You will work with this app most of the time when developing Jest Preview.
+- [config/jest](https://github.com/nvh95/jest-preview/tree/main/config/jest/): jest configuration files for the demo app.
+- [dist](https://github.com/nvh95/jest-preview/tree/main/dist/): Distribution code, which is bundled and processed by Rollup (previously: Vite Library Mode).
+- [examples](https://github.com/nvh95/jest-preview/tree/main/examples/): contains examples of how to integrate Jest Preview with various libraries and frameworks.
+- [website](https://github.com/nvh95/jest-preview/tree/main/website/): contains code for [www.jest-preview.com](https://www.jest-preview.com/)
+
+## Submit a PR
+
+So you have decided to contribute code back to upstream by opening a pull request. You've invested a good chunk of time, and we appreciate it. We will do our best to work with you and get the PR looked at.
+
+There are a few things when you open a PR:
+
+1. Make sure CI passes
+2. Prefer atomic commits
+3. Prefer rebase over merge: If you create a new branch from `main` and work on it for a while. There is a chance that `main` will be updated and there will be a conflict between `main` and your branch. We would love to have you rebase your branch on top of `main` instead of merging it when your PR is ready.
+
+## Closing
+
+We would love to have you on the list of contributors and thank you for your contribution. Happy coding!
diff --git a/HOW_JEST_PREVIEW_WORKS.md b/HOW_JEST_PREVIEW_WORKS.md
@@ -0,0 +1,36 @@
+# How Jest Preview Works
+
+## How it works ELI5
+
+Jest Preview turns JSDOM into a real DOM and users can see it on a browser. It saved the HTML from JSDOM and serve over a web server (with a web socket connection). It also uses [Jest Transformations](https://jestjs.io/docs/code-transformation) to handle CSS and files (e.g: images).
+
+## Components
+
+- Jest Preview Server: when you run `jest-preview` (`server/previewServer.js`)
+- External Browser (Jest Preview Dashboard): e.g: Chrome
+- Jest process: `jest`
+
+## How Jest Preview's components interact
+
+- In **Jest process**, whenever `preview.debug()` is triggered or a test fails in [Automatic Mode](https://www.jest-preview.com/blog/automatic-mode), an html file is saved to `node_modules/.cache/jest-preview`.
+- **Jest Preview Server** serves that html file to the **External Browser**.
+- If that html file changes, **Jest Preview Server** will send a websocket event to **External Browser** to trigger reloading for the newest UI.
+
+## How to display images and CSS
+
+Usually, images and CSS are dropped when testing in Jest. In opposite, Jest Preview tries to keep images and CSS in the Jest tests (JSDOM).
+
+### Images and CSS imported to components
+
+- [Code transformation](https://jestjs.io/docs/code-transformation)
+- File transformation: Serve source file directly. For example, an image file is served directly from source code, then it's visible in the Jest Preview Dashboard.
+- CSS transformation: Jest Preview turn a css file into a javascript file then try to inject CSS to the `document.head`. Think of Jest Preview tries to make any CSS strategy to a CSS-in-JS in Jest.
+  - CSS Modules: Process via post css then inject the output to the `document.head`.
+  - Sass: Process by Dart Sass then inject the output to the `document.head`.
+  - Vanilla CSS: Inject css to the head.
+- CSS-in-JS (styled-components, emotion...): Already inject css to the `document.head` by CSS-in-JS themselves.
+  - Caveat: CSS-in-JS solutions uses Constructable Stylesheet Objects are not supported yet, since the generated CSS are not present in the `document.head`.
+
+### Global CSS
+
+- Currently, CSS outside a rendered component is handled via `jestPreviewConfigure`. The general approach is to save CSS to a file then Jest Preview Server injects it to the preview on demand. This approach is simple and easy to implement. However, the CSS does not appear in the JSDOM, and it's hard to write tests for it. In the future, we would like to move global CSS to the JSDOM (i.e: `document.head`).
diff --git a/README.md b/README.md
@@ -99,34 +99,9 @@ Jest Preview comes with [Pre-configured transformation](https://www.jest-preview
 - Multiple preview.
 - [You name it](https://github.com/nvh95/jest-preview/labels/feature_request).
 
-## Run jest-preview locally
+## Contributing
 
-Install dependencies
-
-```bash
-npm install
-```
-
-To see the real demo app
-
-```bash
-npm run dev
-```
-
-Run `jest` and ` jest-preview` simultaneously
-
-```bash
-npm run test
-```
-
-Open chrome at http://localhost:3336 to see the preview
-
-However, it's recommend to run `jest` and `jest-preview` separately
-
-```bash
-npm run server # Run jest-preview server
-npm run test:only # Run jest
-```
+We can't wait to see your contributions. See the Contribution Guide at [CONTRIBUTING.md](/CONTRIBUTING.md)
 
 ## Contributors ✨
 

diff --git a/src/configure.ts b/src/configure.ts
@@ -50,6 +50,7 @@ export async function jestPreviewConfigure(
       // What we encountered is that filename is automatically added `http://localhost` as the prefix
       // Example: style.scss => http://localhost/style.scss
       // As a result, sass.compile cannot find the file
+      // TODO: Can we inject css to the `document.head` directly?
       exec(
         `./node_modules/.bin/sass ${cssFile} ${cssDestinationFile} --no-source-map`,
         (err: any) => {
@@ -69,6 +70,7 @@ export async function jestPreviewConfigure(
     // That way, we can don't have to copy files to disk
     // Memory is faster than disk anyway!!!!
     // if (!fs.existsSync(destinationFile)) {
+    // TODO: Can we inject css to the `document.head` directly?
     fs.copyFile(cssFile, destinationFile, (err: any) => {
       if (err) throw err;
     });

diff --git a/src/preview.ts b/src/preview.ts
@@ -13,6 +13,7 @@ export function debug(element: Element = document.body): void {
     (prev, current) => prev + current.outerHTML,
     '',
   );
+  // TODO: Can we just use `document.documentElement.outerHTML` directly. Then, we don't need to save head and body separately.
   fs.writeFileSync(path.join(CACHE_FOLDER, 'head.html'), headChildrenOnly);
   // Always save head.html to disk before body.html, so we don't need to watch head.html
   fs.writeFileSync(path.join(CACHE_FOLDER, 'body.html'), element.outerHTML);

diff --git a/website/docs/others/contributing.md b/website/docs/others/contributing.md
@@ -1,7 +1,3 @@
 ---
 sidebar_position: 2
 ---
-
-# Contributing
-
-TBD
diff --git a/website/package.json b/website/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "build": "docusaurus build",
+    "build": "node scripts/contributing.js && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",

diff --git a/website/scripts/contributing.js b/website/scripts/contributing.js
@@ -0,0 +1,13 @@
+// @ts-check
+const fs = require('fs');
+
+const rootContributing = '../CONTRIBUTING.md';
+const contributingDoc = './docs/others/contributing.md';
+
+const rootContributingContent = fs.readFileSync(rootContributing, 'utf8');
+
+// Append to contributingDoc
+fs.appendFile(contributingDoc, rootContributingContent, function (err) {
+  if (err) throw err;
+  console.log('Saved!');
+});