Introduce monorepo to manage packages using pnpm (#880)

Workspace:

```
examples/
- nextjs-scheduler
- profile-stack
- react-tldraw
- react-todomvc
- simultaneous-cursors
- vanilla-codemirror6
- vanilla-quill
- vuejs-kanban

packages/
- create-yorkie-app
- devtools
- sdk                  <-- previous yorkie-js-sdk package
```

Command:

```
`sdk`
- [x] pnpm sdk build
- [x] pnpm sdk build:proto
- [x] pnpm sdk build:docs
- [x] pnpm sdk build:ghpages
- [x] pnpm sdk dev
- [x] pnpm sdk test
- [x] pnpm sdk test:watch
- [x] pnpm sdk test:bench
- [x] pnpm sdk test:ci
- [x] pnpm sdk test:yorkie.dev
- [x] pnpm sdk lint
- [x] pnpm sdk prepare

`devtools`
- [x] pnpm devtools dev
- [x] pnpm devtools build
- [x] pnpm devtools test

`create-yorkie-app`
- [x] pnpm create-yorkie-app start
- [x] pnpm create-yorkie-app build
- [x] pnpm create-yorkie-app build:copy-assets
```

---------

Co-authored-by: Youngteac Hong <[email protected]>

Author: gwbaik9717

.github/workflows/ci.yml

@@ -18,30 +18,34 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
+          cache: 'pnpm'
 
-      - name: Cache Node Moudles
+      - name: Cache pnpm store
         id: cache
         uses: actions/cache@v3
         with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-node-
+            ${{ runner.os }}-pnpm-
 
       - name: Install Dependencies
         if: steps.cache.outputs.cache-hit != 'true'
-        run: npm install
+        run: pnpm install
 
-      - run: npm run lint
-      - run: npm run build
-      - run: npm run build:examples
+      - run: pnpm sdk lint
+      - run: pnpm sdk build
+      - run: pnpm build:examples
       - run: docker compose -f docker/docker-compose-ci.yml up --build -d
-      - run: npm run test:ci
+      - run: pnpm sdk test:ci
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v1
@@ -51,4 +55,4 @@ jobs:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
       - name: Run benchmark
-        run: npm run test:bench
+        run: pnpm sdk test:bench

.github/workflows/create-yorkie-app-publish.yml

@@ -5,8 +5,9 @@ on:
     branches:
       - main
     paths:
-      - tools/create-yorkie-app/**
+      - packages/create-yorkie-app/**
       - examples/**
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -17,21 +18,25 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - name: Setup Node 🔧
         uses: actions/setup-node@v2
         with:
           node-version: '18'
-          cache: 'npm'
+          cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install and Build 🔧
         run: |
-          cd tools/create-yorkie-app
-          npm install
-          npm run build
+          cd packages/create-yorkie-app
+          pnpm install
+          pnpm build
 
       - name: Publish 🚀
-        run: cd tools/create-yorkie-app && npm publish --provenance
+        run: cd packages/create-yorkie-app && pnpm publish --provenance
         continue-on-error: true
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/devtools-publish.yml

@@ -5,28 +5,32 @@ on:
     branches:
       - 'main'
     paths:
-      - tools/devtools/**
+      - packages/devtools/**
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
         uses: actions/[email protected]
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - name: Setup Node 🔧
         uses: actions/setup-node@v2
         with:
           node-version: '18'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Install and Build 🔧
         run: |
-          cd tools/devtools
-          npm install
-          npm run build
+          cd packages/devtools
+          pnpm install
+          pnpm build
 
       - name: Deploy 🚀
         uses: PlasmoHQ/bpp@v3
         with:
           keys: ${{ secrets.BPP_KEYS }}
-          chrome-file: 'tools/devtools/dist/chrome-mv3-prod.zip'
+          chrome-file: 'packages/devtools/dist/chrome-mv3-prod.zip'

.github/workflows/github-page-publish.yml

@@ -12,36 +12,40 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/[email protected]
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - name: Setup Node 🔧
         uses: actions/setup-node@v2
         with:
           node-version: '18'
-          cache: 'npm'
-          cache-dependency-path: package-lock.json
+          cache: 'pnpm'
+          cache-dependency-path: pnpm-lock.yaml
 
-      - name: Cache Node Moudles
+      - name: Cache pnpm store
         id: cache
         uses: actions/cache@v3
         with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-node-
+            ${{ runner.os }}-pnpm-
 
       - name: Install Dependencies
         if: steps.cache.outputs.cache-hit != 'true'
-        run: npm install
+        run: pnpm install
 
       - name: Build 🔧
         run: |
-          npm run build
-          npm run build:docs
-          npm run build:examples
-          npm run build:ghpages
+          pnpm sdk build
+          pnpm sdk build:docs
+          pnpm build:examples
+          pnpm sdk build:ghpages
 
       - name: Deploy 🚀
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./ghpages
+          publish_dir: ./packages/sdk/ghpages
           enable_jekyll: false

.github/workflows/npm-publish.yml

@@ -11,28 +11,33 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - name: Setup Node 🔧
         uses: actions/setup-node@v2
         with:
           node-version: '18'
-          cache: 'npm'
-          cache-dependency-path: package-lock.json
+          cache: 'pnpm'
+          cache-dependency-path: pnpm-lock.yaml
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Cache Node Moudles
+      - name: Cache pnpm store
         id: cache
         uses: actions/cache@v3
         with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-node-
+            ${{ runner.os }}-pnpm-
 
       - name: Install Dependencies
         if: steps.cache.outputs.cache-hit != 'true'
-        run: npm install
+        run: pnpm install
 
-      - run: npm run build
-      - run: npm publish --provenance
+      - run: pnpm sdk build
+      - run: pnpm publish --provenance
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -142,3 +142,6 @@ lib/
 
 # profile output
 *.cpuprofile
+
+# npm
+**/package-lock.json

.npmrc

@@ -1 +1,2 @@
-engine-strict=true
+engine-strict=true
+@buf:registry=https://buf.build/gen/npm/v1

CONTRIBUTING.md

@@ -36,17 +36,21 @@ Thanks for contributing!
 
 ### Building yorkie-js-sdk
 
-For building yorkie-js-sdk, You'll first need Node.js installed(Node.js version 18+ and npm version 7.10+ are required).
+For building yorkie-js-sdk, You'll first need Node.js installed(Node.js version 18+ and pnpm version 9.6+ are required).
 
 - [Node.js](https://nodejs.org/en) (version 18+)
-- [npm](https://www.npmjs.com/) (version 7.10+)
+- [pnpm](https://pnpm.io/) (version 9.6+)
 
 ```bash
 # install packages
-$ npm install
+
+# In the root directory of the repository.
+$ pnpm sdk install
 
 # build
-$ npm run build
+
+# In the root directory of the repository.
+$ pnpm sdk build
 ```
 
 To generate proto messages, we use protoc-gen-connect-es, which is a code generator plugin for Protocol Buffer compilers, like buf and protoc. It generates both clients and server definitions from Protocol Buffer schema.
@@ -55,7 +59,9 @@ For more details, see [@connectrpc/protoc-gen-connect-es](https://github.com/con
 
 ```bash
 # generate proto messages and the service client stub classes
-$ npm run build:proto
+
+# In the root directory of the repository.
+$ pnpm sdk build:proto
 ```
 
 > Primary "source of truth" location of protobuf message is
@@ -72,7 +78,8 @@ $ docker compose -f docker/docker-compose.yml up --build -d
 Start the test in another terminal session.
 
 ```bash
-$ npm run test
+# In the root directory of the repository.
+$ pnpm sdk test
 ```
 
 To get the latest server locally, run the command below then restart containers again:
@@ -108,7 +115,8 @@ To run only specific suites or tests, use `.only` and execute the following comm
 Refer to [Test Filtering](https://vitest.dev/guide/filtering#selecting-suites-and-tests-to-run) in `vitest` for more details:
 
 ```bash
-$ npm run test {test file path} # e.g. npm run test integration/tree_test.ts
+# In the root directory of the repository.
+$ pnpm sdk test {test file path} # e.g. pnpm sdk test integration/tree_test.ts
 ```
 
 ### Starting co-editing example with CodeMirror
@@ -122,7 +130,8 @@ $ docker compose -f docker/docker-compose.yml up --build -d
 Start the webpack-dev-server in another terminal session.
 
 ```bash
-$ npm run dev
+# In the root directory of the repository.
+$ pnpm sdk dev
 ```
 
 Open the co-editing example page served by webpack-dev-server in your browser.

examples/README.md

@@ -14,20 +14,24 @@ $ docker compose -f docker/docker-compose.yml up --build -d
 The examples have own local dependencies. So you should install dependencies before running examples.
 
 ```bash
-# In the directory of the example.
-$ npm install
+# In the root directory of the repository.
+$ pnpm install
 ```
 
 Then you can run the examples.
 
 ```bash
-# In the directory of the example.
-$ npm run dev
+# In the root directory of the repository.
+$ pnpm <EXAMPLE-NAME> dev
+
+# Or in the directory of the example.
+$ pnpm dev
 ```
 
 Open the browser and go to the URL that is printed in the terminal.
 
 ## Releasing an example to https://yorkie.dev
 
-To release an example, the example should export static files to `./dist` directory when running `npm run build`.
+To release an example, the example should export static files to `./dist` directory when running `pnpm <EXAMPLE-NAME> build` in the root directory of the repository or `pnpm build` in the directory of the example.
+
 After the example is merged to the `main` branch, it is automatically deployed to https://yorkie.dev/yorkie-js-sdk/examples/{EXAMPLE-NAME}.

examples/nextjs-scheduler/.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  extends: ['next', 'plugin:prettier/recommended'],
   rules: {
     'prettier/prettier': [
       'error',