Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

docs: expand contribution guide for ecosystem #5922

Merged
merged 10 commits into from
Jul 22, 2022
203 changes: 133 additions & 70 deletions docs/content/5.community/3.contribution.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,130 +4,193 @@ Nuxt is a community project - and so we love contributions of all kinds! ❀️

There is a range of different ways you might be able to contribute to the Nuxt ecosystem.

## Triage issues and help out in discussions
## Ecosystem

Check out [our issues board](https://github.com/nuxt/framework/issues) and [discussions](https://github.com/nuxt/framework/discussions). Helping other users, sharing workarounds, creating reproductions, or even poking into a bug a little bit and sharing your findings makes a huge difference.
The Nuxt ecosystem includes many different projects and organizations. For example:

## Fixing a bug or adding a feature
* [nuxt/](https://github.com/nuxt) - core repositories for the Nuxt framework itself. Currently [**nuxt/framework**](https://github.com/nuxt/framework) contains Nuxt 3 and [**nuxt/nuxt.js**](https://github.com/nuxt/nuxt.js) contains Nuxt 2.
* [nuxt-community/](https://github.com/nuxt-community) - community-contributed and maintained modules and libraries. There is a [process to migrate a module](/gduide/going-further/modules/#joining-nuxt-community) to `nuxt-community`. While these modules have individual maintainers, they are not dependent on a single person.
* [nuxt-contrib/](https://github.com/nuxt-contrib) - the previous home for libraries that are not specific to Nuxt but produced and used by the Nuxt team.
* [unjs/](https://github.com/unjs) - many of these libraries are used throughout the Nuxt ecosystem. They are designed to be universal libraries that are framework- and environment-agnostic. We welcome contributions and usage by other frameworks and projects.

Before you fix a bug or add a feature, ensure **there's an issue that describes it**. Particularly for new features, this is an excellent opportunity for the project leads to giving feedback before starting work on it.
## How to contribute

### Examples
### Triage issues and help out in discussions

While working on your PR, you will likely want to check if your changes are working correctly.
Check out the issues and discussions for the project you want to help. For example, here are [the issues board](https://github.com/nuxt/framework/issues) and [discussions](https://github.com/nuxt/framework/discussions) for Nuxt 3. Helping other users, sharing workarounds, creating reproductions, or even poking into a bug a little bit and sharing your findings makes a huge difference.

You can modify the example app in `playground/`, and run it with `yarn dev`. Please make sure not to commit it to your branch, but it could be helpful to add some example code to your PR description. This can help reviewers and other Nuxt users understand the feature you've built in-depth.
### Creating an issue

### Testing
See [issue decision making flowchart](https://kroki.io/mermaid/svg/eNp9Uktv2kAQvudXzM32IZEK5GJFqUgIhYagqOqlx7V3bLasd1f7SIKg_72ztrFpDuVgiZ35HvPNVFK_lztmPfxcXAH95sellvSIHIRzAcFjYyTz-PVPV7--vj_9QneCh-PaAQ9GivJTeatP8Jg-Su0QmOLA3B68hqolHgizqxbxMBA-XUCMFspH0CCQjd2Rf3FcMQeNUKJhEiwaq3kovdCKnLSti4F4GZ2y0gcm5QEYFKHu7S7OdN_SDStQ5pAoRO7-IUzuCnvfiHrnoWwNigqUhmA42YI7mAJnB9ePsxxUV-mXG_iBjX5DSAwqLlQN3gpWYwIyqkXeyQ3MOYeEPF28TrtXizEoSoOVe4J19SjPTJtKITF2z7puY4W2wh-6tmy0Ewdcxwz8DqHAHXujRqCAyRTyc17rwfn39OmDViRUu4p25igz7kSXrg2BokKejego9Jw-IxrQNDFt3AIXrgzOUY6Rw_4vj-5YYhojKOlzXRH_5rjQ-GmKhu0RtuHDQ1DBxUT61W6GcV4uYKEGVlVY-vZvw353iekKgkPrLrFxmO1xbjG20vdd2z2zOig6jzhYz3eO72XQe71NzW0OwdaofDYWI-HrLDWzHERjtPXsXN6O2ElqJjns6LZHvYumlmOammkeb59ckIPsL5zkNv8).

Every new feature should have a corresponding unit test (if possible). The `test` folder in this repository is currently a work in progress, but do your best to create a new test following the example of what's already there.
### Send a pull request

Before creating a PR or marking it as ready-to-review, ensure that all tests pass by running `yarn test` locally.
We always welcome pull requests! ❀️

### Linting
#### Before you start

You might have noticed already that we use ESLint to enforce a coding standard. Please run `yarn lint` before committing your changes to verify that the code style is correct. If not, you can use `yarn lint --fix` to fix most of the style changes. If there are still errors left, you must correct them manually.
Before you fix a bug, we recommend that you check whether **there's an issue that describes it**, as it's possible it's a documentation issue or that there is some context that would be helpful to know.

### Documentation
If you're working on a feature, then we ask that you **open a feature request issue first** to discuss with the maintainers whether the feature is desired - and the design of those features. This helps save time for both the maintainers and the contributors and means that features can be shipped faster. The issue **should be confirmed** by a framework team member before building out a feature in a pull request.

If you are adding a new feature or refactoring or changing the behavior of Nuxt in any other manner, you'll likely want to document the changes. Please include any changes to the docs in the same PR. You don't have to write documentation up on the first commit (but please do so as soon as your pull request is mature enough). Make sure to make changes according to the [Documentation Guide](#documentation-guide).
For typo fixes, it's recommended to batch multiple typo fixes into one pull request to maintain a cleaner commit history.

### Final checklist
For bigger changes to Nuxt itself, we recommend that you first [create a Nuxt module](#create-a-module) and implement the feature there. This allows for quick proof-of-concept. You can then [create an RFC](#make-an-rfc) in the form of a discussion. As users adopt it and you gather feedback, it can then be refined and either added to Nuxt core or continue as a standalone module.

When submitting your PR, there is a simple template that you have to fill out. Please tick all appropriate "answers" in the checklists.
#### Commit conventions

<!-- ## Create a module
We use [Conventional Commits](https://www.conventionalcommits.org/) for commit messages, which [allows a changelog to be auto-generated](https://github.com/unjs/changelogen) based on the commits. Please read the guide through if you aren't familiar with it already.

If you've built something with Nuxt that's cool, why not [extract it into a module](/modules/kit), so it can be shared with others? We have [many excellent modules already](https://modules.nuxtjs.org/), but there's always room for more.
Note that `fix:` and `feat:` are for **actual code changes** (that might affect logic). For typo or document changes, use `docs:` or `chore:` instead:

If you need help while building it, feel free to [check in with us](/community/getting-help). -->
* ~~`fix: typo`~~ -> `docs: fix typo`

Mainly, make sure your PR title adheres to [Conventional Commits guidelines](https://www.conventionalcommits.org/en/v1.0.0/), and do link the related issue (feature request or bug report) in the issue description.
If you are working in a project with a monorepo, like `nuxt/framework`, ensure that you specify the main scope of your commit in brackets. For example: `feat(nuxi): add 'do-magic' command`.

## Documentation Guide
#### Making the pull request

Documentation is one of the essential parts of Nuxt. We aim to be an intuitive framework - and a big part of that is making sure that both the developer experience and the docs are perfect. πŸ‘Œ
If you don't know how to send a pull request, we recommend reading [the guide](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).

If you spot an area where we can improve documentation or error messages, please do open a PR - even if it's just to fix a typo!
When sending a pull request, make sure your PR's title also follows the [Commit Convention](#commit-conventions).

In this section, you will find:
If your PR fixes or resolves existing issues, please make sure you mention them in the PR description.

::list{type=success}
It's ok to have multiple commits in a single PR; you don't need to rebase or force push for your changes as we will use `Squash and Merge` to squash the commits into one commit when merging.

- How to contribute and submit your changes.
- Tips to keep the documentation helpful and inclusive for everyone.
We do not add any commit hooks to allow for quick commits. But before you make a pull request, you should ensure that any lint/test scripts are passing.

::
In general, please also make sure that there are no _unrelated_ changes in a PR. For example, if your editor has made any changes to whitespace or formatting elsewhere in a file that you edited, please revert these so it is more obvious what your PR changes. And please avoid including multiple unrelated features or fixes in a single PR. If it is possible to separate them, it is better to have multiple PRs to review and merge separately. In general, a PR should do _one thing only_.

### Quick Edits
#### Once you've made a pull request

If you spot a typo or want to rephrase a sentence, you can click on the **Edit this page on GitHub** link located after the content of every page.
Make the change directly in the GitHub interface and open a Pull Request.
Once you've made a pull request, we'll do our best to review it promptly.

### Longer Edits
If we assign it to a maintainer, then that means that person will take special care to review it and implement any changes that may be required.

The documentation content is inside the `docs/` directory of the [nuxt/framework repository](https://github.com/nuxt/framework) and written in markdown.
If we request changes on a PR, please ignore the red text! It doesn't mean we think it's a bad PR - it's just a way of easily telling the status of a list of pull requests at a glance.

To contribute, fork the repository and follow [these steps](#setup-documentation-website-in-local-environment) and start docs in development mode.
If we mark a PR as 'pending', that means we likely have another task to do in reviewing the PR - it's an internal note-to-self, and not necessarily a reflection on whether the PR is a good idea or not. We will do our best to explain via a comment the reason for the pending status.

After making your changes:
[See PR decision making flowchart](https://kroki.io/mermaid/svg/eNqFk89vm1AMx-_9K3wrqZYcdpymRk3SdJ22qYqmVTuahwGrD0zfj6So7H-fHyTNehoHBH7G34-_NqWVg6nRBfi5uQC9bl4fawzwxG0BUsLDDtgDh-Wf6XQ-nw-rWEHJLwOsXu_TGSBc-uDYhBS-_Jy7a17QIr2QB2xB8j1L9CB7cp6rOqSUA4caWgHPBQGVJZng_1XZEoboaIB1dgUb9iZ6D-UUhJYMec-hT5WuQDFCzelGkJMPcMAeggAWhdO8Md4SFcspfUd7pgMYUeXniPatzk1RvElYzMn6Y7zrnMIDl9BL1BSyoB1LW1nVSX4lhdOXCpLEqFjMzu1sxMSG2oCBpR1gk50xLDolUKMKQGOiQ3PE-SbyBKU4kK4TF2LLgdVRbYybCchiW0WsaDafX9-PYmt9us1uDqhz4baLOhMnDTyI9DhljWmrxPSb_ABbJflFjst-aoJfwIpBa_v_mLWj58jabkiGG_SjPdh1lg3mls5J43mtpMquKdPs0PWzM8kPGeAuO005cXQS1C1G-25B0koeKT8ALarFp0lmLdEWMLasYymioWSRkmgopxp1_9yZQTdSi7gR2h93YiPk3xcIItBg25--W068d2rilyxtSue0aprctCrJ3dvJ3W0yOjtuTYp_zb6Tq04OpWgBeQ8fQbEaGU3EBhpqcv1DJp2Lvz5hNKI).

- Lint the documentation with the `lint:docs` command.
- Open a Pull Request. Please make sure your PR title adheres to the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) guidelines.
### Create a module

### Linting docs
If you've built something with Nuxt that's cool, why not [extract it into a module](/guide/going-further/modules), so it can be shared with others? We have [many excellent modules already](https://modules.nuxtjs.org/), but there's always room for more.

Documentation is linted using [MarkdownLint](https://github.com/DavidAnson/markdownlint/) and [case police](https://github.com/antfu/case-police) to keep the documentation cohesive.
If you need help while building it, feel free to [check in with us](/community/getting-help).

### Writing tips
### Make an RFC

- Avoid subjective words like _simply_, _just_, _obviously..._ when possible.
We highly recommend [creating a module](#create-a-module) first to test out big new features and gain community adoption.

Keep in mind your readers can have different backgrounds and experiences. Therefore, these words don't convey meaning and can be harmful.
If you have done this already, or it's not appropriate to create a new module, then please start by creating a new discussion. Make sure it explains your thinking as clearly as possible. Include code examples or function signatures for new APIs. Reference existing issues or pain points with examples.

::alert{icon=❌}
**Avoid:** "Simply make sure the function returns a promise."
::
If we think this should be an RFC, we'll change the category to RFC and broadcast it more widely for feedback.

::alert{icon=βœ…}
**Prefer:** "Make sure the function returns a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)."
::
An RFC will then move through the following stages:

- Prefer [active voice](https://developers.google.com/tech-writing/one/active-voice).
* `rfc: active` - currently open for comment
* `rfc: approved` - approved by the Nuxt team
* `rfc: ready to implement` - an issue has been created and assigned to implement
* `rfc: shipped` - implemented
* `rfc: archived` - not approved, but archived for future reference

::alert{icon=❌}
**Avoid:** "An error will be thrown by Nuxt."
::
### Conventions across ecosystem

::alert{icon=βœ…}
**Prefer:** "Nuxt will throw an error."
::
The following conventions are _required_ within the `nuxt/` organization and recommended for other maintainers in the ecosystem.

#### Module conventions

Modules should follow the [Nuxt module template](https://github.com/nuxt/starter/tree/module). See [module guide](/guide/going-further/modules) for more information.

#### Use core `unjs/` libraries

We recommend the following libraries which are used throughout the ecosystem:

* [pathe](https://github.com/unjs/pathe) - universal path utilities (replacement for node `path`)
* [ufo](https://github.com/unjs/ufo) - URL parsing and joining utilities
* [unbuild](https://github.com/unjs/unbuild) - rollup-powered build system
* ... check out the rest of the [unjs/](https://github.com/unjs) organization for many more!

#### Use ESM syntax and default to `type: module`

Most of the Nuxt ecosystem can consume ESM directly. In general we advocate that you avoid using CJS-specific code, such as `__dirname` and `require` statements. You can [read more about ESM](/concepts/esm).

#### What's Corepack

[Corepack](https://nodejs.org/api/corepack.html) makes sure you are using the correct version for package manager when you run corresponding commands. Projects might have `packageManager` field in their `package.json`.

Under projects with configuration as shown below, corepack will install `v7.5.0` of `pnpm` (if you don't have it already) and use it to run your commands.

```jsonc [package.json]
{
"packageManager": "pnpm@7.5.0"
}
```

#### Use ESLint

## Set up your local development environment
We use [ESLint](https://eslint.org/) for both linting and formatting with [`@nuxt/eslint-config`](https://github.com/nuxt/eslint-config).

To contribute to Nuxt, you need to setup a local environment.
##### IDE Setup

1. [Fork](https://help.github.com/articles/fork-a-repo/) the [nuxt/framework repository](https://github.com/nuxt/framework) to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
We recommend using [VS Code](https://code.visualstudio.com/) along with the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). If you would like, you can enable auto-fix and formatting when you save the code you are editing:

1. Ensure using the latest Node.js (16.x)
```json [settings.json]
{
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true
}
}
```

#### No Prettier

Since ESLint is already configured to format the code, there is no need to duplicate the functionality with Prettier. To format the code, you can run `yarn lint --fix` or `pnpm lint --fix` or referring the [ESLint section](#use-eslint) for IDE Setup.

If you have Prettier installed in your editor, we recommend you disable it when working on the project to avoid conflict.

1. Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
**Note**: [we are discussing](https://github.com/nuxt/eslint-config/issues/224) enabling prettier in future.

1. Run `yarn install` to install the dependencies.
#### Package manager

> If you are adding a dependency, please use `yarn add`. The `yarn.lock` file is the source of truth for all Nuxt dependencies.
For libraries, we recommend `pnpm`. For modules, we still recommend `yarn` but we may well switch this recommendation to `pnpm` in future once we support plug and play mode with Nuxt itself.

1. Run `yarn stub` to activate the passive development system
It is important to enable corepack to ensure you are on the same version of the package manager as the project. Corepack is built-in to new node versions for seamless package manager integration.

1. Check out a branch where you can work and commit your changes:
To enable it, run

```bash
git checkout -b my-new-branch
corepack enable
```

### Setup documentation website in local environment
You only need to do this one time, after Node.js is installed on your computer.

## Writing documentation

Documentation is an essential part of Nuxt. We aim to be an intuitive framework - and a big part of that is making sure that both the developer experience and the docs are perfect across the ecosystem. πŸ‘Œ

Here are some tips that may help improve your documentation:

* Avoid subjective words like _simply_, _just_, _obviously..._ when possible.

Keep in mind your readers can have different backgrounds and experiences. Therefore, these words don't convey meaning and can be harmful.

::alert{icon=❌}
**Avoid:** "Simply make sure the function returns a promise."
::

::alert{icon=βœ…}
**Prefer:** "Make sure the function returns a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)."
::

* Prefer [active voice](https://developers.google.com/tech-writing/one/active-voice).

1. Follow steps to setup [local development environment](#set-up-your-local-development-environment)
1. Change to the `docs/` directory using `cd docs/`
1. Install docs dependencies using `yarn install`
1. Start docs in development mode using `yarn dev`
::alert{icon=❌}
**Avoid:** "An error will be thrown by Nuxt."
::

::alert{icon=βœ…}
**Prefer:** "Nuxt will throw an error."
::
Loading