ci: add workflows and semantic release (#86)

.github/workflows/canary.yml

@@ -0,0 +1,96 @@
+name: Release (Canary)
+
+on:
+  push:
+    branches:
+      - next
+
+jobs:
+  bundler:
+    name: Build bundler
+    if: github.event_name == 'push' && github.ref == 'refs/heads/next'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Setup | Clone codesandbox-client
+        uses: actions/checkout@v2
+        with:
+          repository: codesandbox/codesandbox-client
+
+      - uses: actions/cache@v2
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Setup | Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "10.23.2"
+          registry-url: "https://npm.pkg.github.com/"
+
+      - name: Setup | Install dependencies
+        run: yarn
+
+      - name: Prepare | Build dependencies
+        run: yarn build:deps
+
+      - name: Prepare | Build sandpack bundler
+        run: yarn build:sandpack
+
+      - name: Archive bundler artifacts
+        uses: actions/upload-artifact@v2
+        with:
+          name: bundler
+          path: www/**/*.*
+
+  publish:
+    name: Publish
+    runs-on: ubuntu-latest
+    needs: [bundler]
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    steps:
+      - name: Setup | Checkout
+        uses: actions/checkout@v2
+        with:
+          # pulls all commits (needed for lerna / semantic release to correctly version)
+          fetch-depth: "0"
+
+      - name: Setup | Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "12.22.4"
+
+      - name: Setup | Authenticate with Registry
+        run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Setup | Configure git user
+        run: |
+          git config --global user.name "${{ github.actor }}"
+          git config --global user.email "${{ github.actor }}@users.noreply.github.com"
+
+      - uses: actions/cache@v2
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Setup | Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Prepare | Download artifacts
+        uses: actions/download-artifact@v2
+        with:
+          name: bundler
+          path: bundler
+
+      - name: Prepare | Build
+        run: |
+          yarn workspace @codesandbox/sandpack-client build:publish 
+          yarn workspace @codesandbox/sandpack-react build:publish
+
+      - name: Release | Lerna Publish
+        run: lerna publish from-package --yes --canary

.github/workflows/checks.yml

@@ -0,0 +1,41 @@
+name: Continuous Integration
+on: push
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Setup | Checkout
+        uses: actions/checkout@v1
+
+      - uses: actions/cache@v2
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Setup | Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Lint | Eslint
+        run: yarn run lint
+
+  build:
+    name: Build
+    runs-on: ubuntu-18.04
+    timeout-minutes: 10
+    steps:
+      - name: Setup | Checkout
+        uses: actions/checkout@v1
+
+      - uses: actions/cache@v2
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Setup | Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn run build

.github/workflows/lint-pr.yml

@@ -0,0 +1,17 @@
+name: "Lint PR"
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Lint | Lint PR Title
+        uses: amannn/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -0,0 +1,93 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  bundler:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Setup | Clone codesandbox-client
+        uses: actions/checkout@v2
+        with:
+          repository: codesandbox/codesandbox-client
+
+      - uses: actions/cache@v2
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Setup | Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "10.23.2"
+          registry-url: "https://npm.pkg.github.com/"
+
+      - name: Setup | Install dependencies
+        run: yarn
+
+      - name: Prepare | Build dependencies
+        run: yarn build:deps
+
+      - name: Prepare | Build CodeSandbox bundler
+        run: yarn build:sandpack
+
+      - name: Archive bundler artifacts
+        uses: actions/upload-artifact@v2
+        with:
+          name: bundler
+          path: www/**/*.*
+
+  publish:
+    runs-on: ubuntu-latest
+    needs: [bundler]
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    steps:
+      - name: Setup | Checkout
+        uses: actions/checkout@v2
+        with:
+          # pulls all commits (needed for lerna / semantic release to correctly version)
+          fetch-depth: "0"
+
+      - name: Setup | Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "12.22.4"
+
+      - name: Setup | Authenticate with Registry
+        run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Setup | Configure git user
+        run: |
+          git config --global user.name "${{ github.actor }}"
+          git config --global user.email "${{ github.actor }}@users.noreply.github.com"
+
+      - uses: actions/cache@v2
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Setup | Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Prepare | Download artifacts
+        uses: actions/download-artifact@v2
+        with:
+          name: bundler
+          path: bundler
+
+      - name: Prepare | Build
+        run: |
+          yarn workspace @codesandbox/sandpack-client build:publish 
+          yarn workspace @codesandbox/sandpack-react build:publish
+
+      - name: Release | Lerna Publish
+        run: lerna publish from-package --yes

.husky/commit-msg

@@ -0,0 +1,3 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged
+yarn run lint-staged

lerna.json

@@ -0,0 +1,15 @@
+{
+  "packages": ["sandpack-client", "sandpack-react"],
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "command": {
+    "version": {
+      "conventionalCommits": true,
+      "message": "chore: [skip ci] bump packages"
+    },
+    "publish": {
+      "conventionalCommits": true,
+      "message": "chore: [skip ci] bump packages"
+    }
+  }
+}

package.json

@@ -40,7 +40,9 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "husky": "^5.2.0",
+    "husky": "^7.0.1",
+    "lerna": "^4.0.0",
+    "lerna-changelog": "^2.1.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1"
   }

plugins/docusaurus/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@codesandbox/sandpack-docusaurus",
+  "private": true,
   "version": "0.0.1",
   "description": "",
   "main": "src/index.js",

sandpack-client/gulpfile.js

@@ -1,14 +1,21 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const del = require("del");
 const gulp = require("gulp");
 const removeSourcemaps = require("gulp-remove-sourcemaps");
 
-gulp.task("copy-sandbox", () =>
+const dist = "./sandpack/";
+const paths = process.env.CI
+  ? ["../../bundler/www/**/!(*.map)", "!../../bundler/www/public/**"]
+  : [
+      "../../codesandbox-client/www/**/!(*.map)",
+      "!../../codesandbox-client/www/public/**",
+    ];
+
+const remove = () => del(dist);
+const copyFolder = () =>
   gulp
-    .src([
-      "../../codesandbox-client/www/**/*.*",
-      "!../../codesandbox-client/www/**/*.map",
-      "!../../codesandbox-client/www/stats.json",
-      "!../../codesandbox-client/www/public/**/*.*",
-    ])
+    .src(paths, { matchBase: true })
     .pipe(removeSourcemaps())
-    .pipe(gulp.dest("./sandpack/"))
-);
+    .pipe(gulp.dest(dist));
+
+exports["default"] = gulp.series(remove, copyFolder);

sandpack-client/package.json

@@ -19,7 +19,8 @@
     "build": "node build.js && yarn run build:types",
     "build:types": "tsc -p tsconfig.json",
     "lint": "tslint -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
-    "build:publish": "yarn build && rimraf sandpack && gulp copy-sandbox",
+    "build:publish": "yarn build && gulp",
+    "build:bundler": "gulp",
     "start": "tsc -p tsconfig.esm.json --watch"
   },
   "files": [
@@ -39,8 +40,9 @@
     "babel-loader": "^7.1.5",
     "core-js": "^3.7.0",
     "cross-env": "^5.0.1",
-    "gulp": "^3.9.1",
-    "gulp-remove-sourcemaps": "1.0.1",
+    "del": "^6.0.0",
+    "gulp": "^4.0.2",
+    "gulp-remove-sourcemaps": "^1.0.1",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^2.6.2",
     "ts-node": "^4.1.0",

sandpack-react/package.json

@@ -17,6 +17,7 @@
     "clean": "rimraf dist",
     "prebuild": "yarn run clean",
     "build": "node build.js && yarn run build:types && yarn build:css",
+    "build:publish": "yarn build",
     "build:types": "tsc -p tsconfig.json",
     "build:css": "postcss src/styles/index.css -o dist/index.css -u autoprefixer -u cssnano",
     "start": "tsc -p tsconfig.esm.json --watch",

sandpack-react/src/common/ErrorOverlay.tsx

@@ -10,7 +10,6 @@ export const ErrorOverlay: React.FC = () => {
   if (!errorMessage) {
     return null;
   }
-
   return (
     <div className={c("overlay", "error")}>
       <div className={c("error-message")}>{errorMessage}</div>