init: pnpm setup (#6114)

* init: pnpm setup

* ci: *

* lint*

* docs: *

* refactor: move docs to own pkg

* formatting

* refactor: remove turbo

* refactor: remove more turbo

* Update quality.yml

---------

Co-authored-by: Artur Arseniev <artur.catch@hotmail.it>

packages/core/.eslintrc.js → .eslintrc.js

@@ -52,5 +52,5 @@ module.exports = {
     'max-len': ['error', { code: 300 }],
     'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1 }],
   },
-  ignorePatterns: ['docs/api/*', 'dist/*'],
+  ignorePatterns: ['*/docs/api/*', 'dist'],
 };

.github/actions/setup-project/action.yml

@@ -0,0 +1,29 @@
+name: Setup Project
+description: 'Sets up the project by installing dependencies and building the project.'
+
+inputs:
+  pnpm-version:
+    description: 'The version of pnpm to use for installing dependencies.'
+    required: false
+    default: 8.6.3
+  node-version:
+    description: 'The version of Node.js to use for building the project.'
+    required: false
+    default: '20.16.0'
+
+runs:
+  using: composite
+  steps:
+    - uses: pnpm/action-setup@v4
+      with:
+        version: ${{ inputs.pnpm-version }}
+    - uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: 'pnpm'
+    - name: Install dependencies
+      run: pnpm install
+      shell: bash
+    - name: Build project
+      run: pnpm build --force
+      shell: bash

.github/dependabot.yml

@@ -1,7 +1,7 @@
 version: 2
 
 updates:
-  - package-ecosystem: "npm"
-    directory: "/packages"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'

.github/workflows/quality.yml

@@ -1,5 +1,4 @@
-name: Core Package Tests
-
+name: GrapesJS Qualty Checks
 on:
   push:
     branches: [dev]
@@ -7,29 +6,18 @@ on:
     branches: [dev]
 
 jobs:
-  quality:
+  quality-checks:
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./packages/core
-
-    strategy:
-      matrix:
-        node-version: [18.x, 20.x]
-
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: "yarn"
-          cache-dependency-path: "./packages/core/yarn.lock"
-      - run: yarn --frozen-lockfile
-      - run: npm run lint
-      - run: npm run lint:ts
-      - run: npm run format:check
-      - run: yarn build
-      - run: npm run ts:build:check
-      - run: npm run docs:api
-      - run: npm test
+      - uses: ./.github/actions/setup-project
+      - name: Lint
+        run: pnpm lint
+      - name: Format Check
+        run: pnpm format:check
+      - name: Build
+        run: pnpm build --force
+      - name: Test
+        run: pnpm test
+      - name: Docs
+        run: pnpm docs:api

.gitignore

@@ -15,7 +15,7 @@ images/
 private/
 vendor/
 coverage/
-/locale/
+locale/
 node_modules/
 bower_components/
 grapesjs-*.tgz

.prettierignore

@@ -0,0 +1,3 @@
+docs/**/*.md
+dist/
+pnpm-lock.yaml

CONTRIBUTING.md

@@ -1,75 +1,101 @@
-# Contribute
+# Contribute to GrapesJS
 
-## Introduction
+Thank you for your interest in contributing to GrapesJS! We welcome all types of contributions, including bug reports, feature suggestions, documentation improvements, and code contributions.
 
-First of all, thank you for considering contributing to GrapesJS!
+## Quick Start
 
-We welcome any type of contribution, not only code. Like for example:
+### Prerequisites
 
-- **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)
-- **Marketing**: writing blog posts, howto's, tutorials, etc.
-- **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, etc.
-- **Money**: We welcome financial contributions in full transparency on our [Open Collective].
+- Node.js (version 20 LTS)
+- pnpm (version 8.6.3 or later)
 
-## Setting up the repository
+### Setup
 
-This is a Node.js project and you need to have Node.js installed on your machine. You can download it from [here](https://nodejs.org/). We test versions 14 and 16 of Node in the CI, so it's recommended to use one of these versions, or the latest of: 16.20.2
+1. Install Node.js 20 LTS:
 
-```bash
-nvm use 16.20.2
-```
+   ```bash
+   nvm install 20
+   nvm use 20
+   ```
 
-You will then use `yarn` to manage the dependencies and run the scripts. You can install it by running:
+2. Install pnpm globally:
 
-```bash
-npm install -g yarn
-```
+   ```bash
+   npm install -g pnpm@8.6.3
+   ```
 
-Then you can clone the repository and install the dependencies:
+3. Clone the repository:
 
-```bash
-git clone __YOUR_FORK__
-cd grapesjs
-yarn
-```
+   ```bash
+   git clone https://github.com/GrapesJS/grapesjs.git
+   cd grapesjs
+   ```
 
-Finally, you can run the development server:
+4. Install dependencies:
 
-```bash
-yarn start
-```
+   ```bash
+   pnpm install
+   ```
 
-Navigate to `http://localhost:8080/` to see the editor in action. The development server will watch for changes in the code and automatically reload the page.
+5. Start the development server:
 
-## Your First Contribution
+   ```bash
+   pnpm start
+   ```
 
-Working on your first Pull Request? You can learn how from this **free** series, [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github).
+6. Open `http://localhost:8080/` in your browser to see the editor in action.
 
-## Submitting code
+## Development Workflow
 
-Any code change should be submitted as a pull request. Before start working on something make always a search in opened issues and pull requests, this might help you to avoid wasting time.
+- **Linting**: `pnpm lint`
+- **Formatting**: `pnpm format`
+- **Checking format**: `pnpm format:check`
+- **Building**: `pnpm build`
+- **Testing**: `pnpm test`
 
-A pull request could be a bug fix, new feature and much more, but in all cases, **open a new issue** and talk about what you want to do. Often happens to work on something already fixed (ready to release) or in progress.
+### Code Style
 
-The title should be brief but comprehensive, the description contains a link to the opened issue and the proposed solution. The pull request should contain tests whenever possible. Keep in mind that the bigger is the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge.
+We use ESLint for linting and Prettier for code formatting. While we don't have pre-commit hooks, we strongly recommend using these tools before submitting your changes:
 
-## Styleguide
+- Run `pnpm lint` to check for linting errors.
+- Run `pnpm format` to automatically format your code.
+- Run `pnpm format:check` to check if your code is formatted correctly.
 
-The code is auto formatted with [prettier](https://github.com/prettier/prettier) on any commit, therefore you can write in any style you prefer
+Code style is enforced at the CI level. We recommend using Prettier extensions in your editor for real-time formatting.
 
-## Expenses
+### Documentation
 
-Anyone can file an expense (code, marketing, etc.) via our [Open Collective]. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.
+To generate and view the documentation:
 
-Before submitting an expense contact core contributors via the current active chat room ([Discord](https://discord.gg/QAbgGXq)) and explain your intents
+1. Generate API documentation:
 
-## Questions
+   ```bash
+   pnpm run docs:api
+   ```
 
-If you have any questions, create an [issue](https://github.com/GrapesJS/grapesjs/issues) (protip: do a quick search first to see if someone else didn't ask the same question before!).
+2. Run the VuePress documentation server:
 
-## Credits
+   ```bash
+   pnpm run docs
+   ```
 
-Thank you to all the people who have already contributed to GrapesJS!
-<a href="/GrapesJS/grapesjs/graphs/contributors"><img src="https://opencollective.com/grapesjs/contributors.svg?width=890" /></a>
+3. Open `http://localhost:8080/` to view the documentation.
 
-[Open Collective]: https://opencollective.com/grapesjs
+## Pull Requests
+
+When submitting a pull request:
+
+- Target your PR to the `dev` branch.
+- Clearly describe the problem and solution.
+- Include the relevant issue number if applicable.
+- Add tests for new features or bug fixes.
+
+If you're a first-time contributor, consider starting a discussion or opening an issue related to your changes before submitting a PR. This helps with collaboration and prevents duplicate work.
+
+## Questions?
+
+If you have any questions, please [open an issue](https://github.com/GrapesJS/grapesjs/issues) or start a [discussion](https://github.com/GrapesJS/grapesjs/discussions). Search existing issues and discussions first to avoid duplicates.
+
+## Thank You
+
+Your contributions to open source, no matter how small, make projects like GrapesJS possible. Thank you for taking the time to contribute.

README.md

@@ -78,9 +78,9 @@ For the development purpose you should follow instructions below.
 
 <script type="text/javascript">
   var editor = grapesjs.init({
-    container: "#gjs",
+    container: '#gjs',
     components: '<div class="txt-red">Hello world!</div>',
-    style: ".txt-red{color: red}",
+    style: '.txt-red{color: red}',
   });
 </script>
 ```

packages/core/docs/.vuepress/config.js → docs/.vuepress/config.js

@@ -1,4 +1,4 @@
-const version = require('./../../package.json').version;
+const version = require('../package.json').version;
 const isDev = process.argv[2] === 'dev';
 const devPath = 'http://localhost:8080';
 const baseUrl = 'https://grapesjs.com';

packages/core/docs/api.mjs → docs/api.mjs

@@ -8,7 +8,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 const docRoot = __dirname;
-const srcRoot = join(docRoot, '../src/');
+const srcRoot = join(docRoot, '../packages/core/src');
 const START_EVENTS = '{START\\_EVENTS}';
 const END_EVENTS = '{END\\_EVENTS}';
 const REPLACE_EVENTS = '{REPLACE\\_EVENTS}';
@@ -130,4 +130,7 @@ async function generateDocs() {
   log('API Reference generation done!');
 }
 
-generateDocs();
+generateDocs().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});