chore: migrate to yarn workspaces + lerna

.eslintrc.json

@@ -4,7 +4,6 @@
   },
   "extends": [
     "airbnb-typescript"
-    // "plugin:@stencil/recommended"
   ],
   "ignorePatterns": [
     "docs/**",

.github/workflows/release.yml

@@ -16,101 +16,113 @@ jobs:
       - name: Create build id
         id: build_id
         run: echo "::set-output name=id::$(date +%s)"
+
       - name: Cache build id
         uses: actions/cache@v2
         with:
           path: ${{ github.workspace }}/.build-id
           key: ${{ runner.os }}-build-id-${{ github.head_ref }}-${{ github.sha }}-${{ steps.build_id.outputs.id }}
+
       - name: Store build id
         run: |
           mkdir -p .build-id 
           echo $BUILD_ID > .build-id/id
         env:
           BUILD_ID: ${{ steps.build_id.outputs.id }}
+
   prepare:
     name: Prepare
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+
       - name: Setup node.js
         uses: actions/setup-node@v2-beta
         with:
           node-version: 14
+
       - name: Cache dependencies
         id: deps
         uses: actions/cache@v2
         with:
-          path: packages/core/node_modules
-          key: deps-${{ hashFiles('packages/core/package-lock.json') }}
+          path: '**/node_modules'
+          key: deps-${{ hashFiles('yarn.lock') }}
+
       - name: Cache cypress binary
         uses: actions/cache@v2
         with:
           path: ~/.cache
-          key: cypress-${{ hashFiles('packages/core/package-lock.json') }}
-      - name: Install dependencies
+          key: cypress-${{ hashFiles('yarn.lock') }}
+
+      - name: Cache build
+        uses: actions/cache@v2
+        with:
+          path: '**/dist'
+          key: build-${{ github.run_id }}
+
+      - name: Install dependencies and build
         if: steps.deps.outputs.cache-hit != 'true'
-        run: npm install --prefix packages/core
-  build:
-    name: Build
-    needs: prepare
+        run: yarn install
+
+  test_unit:
+    name: Unit Tests
+    needs: [prepare]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+
       - name: Setup node.js
         uses: actions/setup-node@v2-beta
         with:
           node-version: 14
+
       - name: Restore dependencies
         uses: actions/cache@v2
         with:
-          path: packages/core/node_modules
-          key: deps-${{ hashFiles('packages/core/package-lock.json') }}
-      - name: Restore cypress binary
-        uses: actions/cache@v2
-        with:
-          path: ~/.cache
-          key: cypress-${{ hashFiles('packages/core/package-lock.json') }}
-      - name: Cache dist
-        uses: actions/cache@v2
-        with:
-          path: packages/core/dist
-          key: dist-${{ github.run_id }}
-      - name: Build 
-        run: npm run build --prefix packages/core
-      - name: Instrument
-        run: npm run instrument --prefix packages/core
-  test_unit:
-    name: Unit Tests
-    needs: prepare
+          path: '**/node_modules'
+          key: deps-${{ hashFiles('yarn.lock') }}
+
+      - name: Run unit tests
+        run: yarn workspace @vime/core test:unit.coverage
+
+      - name: Upload report to codecov
+        run: cd packages/core && npx codecov
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+  instrument:
+    name: Instrument
+    needs: [prepare]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+
       - name: Setup node.js
         uses: actions/setup-node@v2-beta
         with:
           node-version: 14
-      - name: Restore dependencies
+
+      - name: Restore build
         uses: actions/cache@v2
         with:
-          path: packages/core/node_modules
-          key: deps-${{ hashFiles('packages/core/package-lock.json') }}
-      - name: Restore cypress binary
+          path: '**/dist'
+          key: build-${{ github.run_id }}
+
+      - name: Cache instrumentation
         uses: actions/cache@v2
         with:
-          path: ~/.cache
-          key: cypress-${{ hashFiles('packages/core/package-lock.json') }}
-      - name: Run unit tests
-        run: npm run test:unit.coverage --prefix packages/core
-      - name: Upload report to codecov
-        run: cd packages/core && npx codecov
-        env:
-          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+          path: 'packages/core/dist'
+          key: instrument-${{ github.run_id }}
+
+      - name: Instrument
+        run: yarn workspace @vime/core instrument
+
   test_e2e:
     name: E2E Tests
-    needs: [build_id, build]
+    needs: [build_id, instrument]
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
@@ -119,72 +131,73 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+
       - name: Setup node.js
         uses: actions/setup-node@v2-beta
         with:
           node-version: 14
+
       - name: Restore build id from cache
         uses: actions/cache@v2
         with:
           path: ${{ github.workspace }}/.build-id
           key: ${{ runner.os }}-build-id-${{ github.head_ref }}-${{ github.sha }}
+
       - name: Set build id
         id: build_id
         run: echo "::set-output name=id::$(cat .build-id/id)"
+
       - name: Restore dependencies
         uses: actions/cache@v2
         with:
-          path: packages/core/node_modules
-          key: deps-${{ hashFiles('packages/core/package-lock.json') }}
+          path: '**/node_modules'
+          key: deps-${{ hashFiles('yarn.lock') }}
+
       - name: Restore cypress binary
         uses: actions/cache@v2
         with:
           path: ~/.cache
-          key: cypress-${{ hashFiles('packages/core/package-lock.json') }}
-      - name: Restore dist
+          key: cypress-${{ hashFiles('yarn.lock') }}
+
+      - name: Restore instrumentation
         uses: actions/cache@v2
         with:
-          path: packages/core/dist
-          key: dist-${{ github.run_id }}
+          path: 'packages/core/dist'
+          key: instrument-${{ github.run_id }}
+
       - name: Run e2e tests
-        run:  npm run test:e2e.ci --prefix packages/core
+        run:  yarn workspace @vime/core test:e2e.ci
         env:
           BUILD_ID: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Upload report to codecov
         run: cd packages/core && npx codecov
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
   release:
     name: Release
     needs: [test_unit, test_e2e]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+
       - name: Setup node.js
         uses: actions/setup-node@v2-beta
         with:
           node-version: 14
-      - name: Cache pnpm store
+
+      - name: Restore build
         uses: actions/cache@v2
         with:
-          path: ~/.pnpm-store
-          key: deps-${{ hashFiles('packages/core/package-lock.json') }}
-      - name: Restore cypress binary
-        uses: actions/cache@v2
-        with:
-          path: ~/.cache
-          key: cypress-${{ hashFiles('packages/core/package-lock.json') }}
-      - name: Install pnpm
-        run: curl -L https://raw.githubusercontent.com/pnpm/self-installer/master/install.js | node
-      - name: Install dependencies
-        run: pnpm install --filter vime --filter ./packages
-      - name: Build packages
-        run: pnpm run build --filter vime
+          path: '**/dist'
+          key: build-${{ github.run_id }}
+
       - name: Release packages
-        run: pnpm run release --filter vime
+        run: npx lerna publish --conventional-commits
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -40,7 +40,7 @@ pnpm-debug.log*
 /libpeerconnection.log
 chrome-profiler-events*.json
 speed-measure-plugin*.json
-!packages/core/*-lock.json
+!yarn.lock
 
 /tmp
 /out-tsc

CONTRIBUTING.md

@@ -32,7 +32,7 @@ Let's setup our machine. The only software you'll need to install is:
 
 - [node](https://nodejs.org/en/download/)
 - [git](https://git-scm.com/downloads)
-- [pnpm](https://pnpm.js.org/en/installation)
+- [yarn](https://classic.yarnpkg.com/en/docs/install)
 
 They're very easy to install, just follow the links and you should be up and running in no time.
 
@@ -53,8 +53,7 @@ $: git clone https://github.com/{my-github-username}/vime
 
 $: cd vime
 
-# This might take a few minutes on your first install.
-$: npm run setup
+$: yarn install
 
 $: git checkout -b {issue-64}
 ```
@@ -102,7 +101,7 @@ contains all the source code for Vime. Inside it you'll find:
 
 ```bash
 # Example of how to run a script.
-$: npm run serve
+$: yarn build
 ```
 
 - `build`: This script will build the package and generate/update any new component documentation.
@@ -197,7 +196,7 @@ provider sets up the YouTube player embed and loads a video through it. All prov
 Let's pretend we're creating a new provider for Twitch, the steps will generally go as follows:
 
 1. Make sure we're in the root of the [`core`](./packages/core) package directory.
-2. Run the following script `npm run generate:provider` and pass in the name `Twitch`.
+2. Run the following script `yarn generate:provider` and pass in the name `Twitch`.
 3. Go to `src/components/providers/twitch`.
 4. Create interfaces for the parameters, commands, events and messages that the Twitch embed
    takes and fires. Make sure everything is documented, most the time it's simply copy and pasting from
@@ -212,18 +211,18 @@ finalize the `getAdapter` method.
 As we're building out our provider we'll want to see and test it in the browser. There's
 already a file setup to do this. Go to [`playground/index.html`](./packages/core/playground/index.html)
 and add the provider just like the others have already been done so. You can serve the dev environment
-`npm run serve`, and select the file through the explorer to begin interacting with it in the browser.
+`yarn serve`, and select the file through the explorer to begin interacting with it in the browser.
 
 When it comes to running automated E2E tests on the provider we can head over to
 [`cypress/tests/providers`](./packages/core/cypress/tests/providers) and add our provider just like
-the others have already been done so. Launch the Cypress testing environment `npm run cy:open`, and
+the others have already been done so. Launch the Cypress testing environment `yarn cy:open`, and
 run the test file we just created. A few tests are a little flaky, re-run if you're sure something
 should pass. At the minimum, the test harness should give you a good idea of everything your provider
 should be able to perform.
 
 After we wrap up all our testing and we're satisfied, the final steps are:
 
-1. Run the build script `npm run build`.
+1. Run the build script `yarn build`.
 2. Add small description about the provider to the auto-generated `readme.md` file
    (above the `<-- Auto Generated Below -->` comment). See other providers as an example.
 3. Create `usage` directory and add examples for the same frameworks that are listed for all other providers.
@@ -259,7 +258,7 @@ either in the `tests` directory next to the component or in
   snapshots to get the structure of the component's DOM tree and validate it.
 - Visual tests are a manual test in which we validate the correctness of the component by seeing,
   and interacting with it directly in the browser. You can create a `index.html` file in the `tests`
-  directory of the component, and visit it by serving the development environment `npm run serve`,
+  directory of the component, and visit it by serving the development environment `yarn serve`,
   and navigating to the file through the explorer. If it's part of the default UI then see
   [`playground/index.html`](./packages/core/playground/index.html).
 - Unit tests enable us to test specific state changes and their outcomes, such as the changing of a
@@ -274,7 +273,7 @@ either in the `tests` directory next to the component or in
 
 After we wrap up all our testing and we're satisfied, the final steps are:
 
-1. Run the build script `npm run build`.
+1. Run the build script `yarn build`.
 2. Add small description about the component to the auto-generated `readme.md` file
    (above the `<-- Auto Generated Below -->` comment). See other components as an example.
 3. Create `usage` directory and add examples for the same frameworks that are listed for all other components.

docs/README.md

@@ -8,9 +8,9 @@ code for the Vime documentation site hosted at https://vimejs.com. The website i
 ## Local Development
 
 ```bash
-$: npm run setup
+$: yarn install
 
-$: npm run start
+$: yarn start
 ```
 
 The `start` command starts a local development server and opens up a browser window. Most changes
@@ -23,5 +23,9 @@ It's important to note that **[`components`](./docs/components) is autogenerated
 [`packages/core/src/components`](../packages/core/src/components) and then run the following to update:
 
 ```bash
-$: npm run build:components
+$: cd ..
+
+$: yarn install
+
+$: yarn workspace @vime/core build
 ```

docs/package.json

@@ -6,12 +6,8 @@
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
     "build": "docusaurus build",
-    "build:vime": "pnpm run build --filter @vime/core --filter @vime/react",
-    "build:components": "pnpm run build --filter @vime/core",
     "swizzle": "docusaurus swizzle",
-    "serve": "docusaurus serve",
-    "setup": "npm run setup:install && npm run build:vime",
-    "setup:install": "pnpm install --filter vime --filter @vime/core --filter @vime/react --filter @vime/docs"
+    "serve": "docusaurus serve"
   },
   "dependencies": {
     "@babel/core": "^7.11.5",