Migrate codebase to pnpm + integrate prism react renderer 2

.changeset/rude-laws-repair.md

@@ -0,0 +1,5 @@
+---
+"react-live": minor
+---
+
+Moved to a pnpm workspace, migrated to Prism React Renderer 2.

.eslintignore

@@ -1,3 +1,3 @@
 node_modules/
-dist/
-demo/
+packages/react-live/dist/
+website/build/

.eslintrc

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "plugins": ["prettier", "@typescript-eslint"],
   "settings": {
     "react": {
@@ -11,7 +11,8 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "plugin:import/recommended"
+    "plugin:import/recommended",
+    "plugin:import/typescript"
   ],
   "env": {
     "browser": true,
@@ -54,18 +55,15 @@
     "react/no-find-dom-node": "off",
     "no-invalid-this": "off",
     "complexity": "off",
-    "no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_+$"
-      }
-    ],
+    "no-unused-vars": 0,
     "import/no-unresolved": [2, { "ignore": ["polished", "next/document"] }],
     "prefer-template": "off",
     "filenames/match-regex": "off",
     "react/react-in-jsx-scope": "off",
     "max-params": ["error", 5],
     "max-nested-callbacks": ["error", 5],
-    "prettier/prettier": "error"
+    "prettier/prettier": "error",
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/no-var-requires": 0
   }
 }

.github/workflows/code-check.yml

@@ -12,27 +12,36 @@ jobs:
   build:
     name: Check codebase (lint and typecheck)
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 18.x ]
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v2
         with:
-          node-version: 18
-          cache: 'yarn'
+          node-version: ${{ matrix.node-version }}
 
-      - name: Installation
-        run: yarn --frozen-lockfile
+      - uses: pnpm/[email protected]
+        with:
+          version: 7
 
-      - name: Lint
-        run: yarn lint
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 
-      - name: Test
-        run: yarn run test
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
-      - name: Type Check
-        run: yarn run typecheck
+      - name: Install dependencies
+        run: pnpm install
 
-      - name: Library Build
-        run: yarn run build
+      - name: Check Code ${{ matrix.node-version }}
+        run: pnpm lint
 
-      - name: Storybook Build
-        run: yarn run storybook:build
+      - name: Build ${{ matrix.node-version }}
+        run: pnpm build

.github/workflows/deploy-docs.yml

@@ -20,18 +20,32 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
-          cache: 'yarn'
+          node-version: 18
 
       - name: AWS CLI version
         run: "aws --version"
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.2.0
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
       - name: Install Dependencies
-        run: yarn install --frozen-lockfile
-        working-directory: ./website
+        run: pnpm install
 
       - name: Build the website
-        run: yarn build
+        run: pnpm build
         working-directory: ./website
 
       # Use `gh` tool to infer more information about the pull request.
@@ -46,7 +60,7 @@ jobs:
 
       - name: Deploy docs (production)
         if: github.ref == 'refs/heads/master'
-        run: yarn deploy:prod
+        run: pnpm run deploy:prod
         working-directory: ./website
         env:
           GITHUB_DEPLOYMENT_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -22,20 +22,38 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "yarn"
+
+      - uses: pnpm/[email protected]
+        with:
+          version: 7
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install
 
       - name: Build packages
-        run: yarn run build
+        run: pnpm run build
 
       - name: PR or Publish
         id: changesets
         uses: changesets/action@v1
         with:
-          version: yarn run version
-          publish: yarn changeset publish
+          # Note: Our `package.json:scripts.version` currently doesn't have `--fix-lockfile` for
+          # `pnpm install` because of a PNPM bug of some kind.
+          # https://github.com/FormidableLabs/spectacle/issues/1156
+          version: pnpm run version
+          publish: pnpm changeset publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -10,3 +10,5 @@ bundle-stats.html
 .history/
 stats.html
 /.idea
+/packages/react-live/LICENSE
+/packages/react-live/README.md

CONTRIBUTING.MD

@@ -8,7 +8,7 @@ Thanks for contributing!
 yarn install
 ```
 
-You will find all building blocks that make up React Live in the [`src`](src) folder and examples in the [`demo`](demo) folder.
+You will find all building blocks that make up React Live in the [`src`](packages/react-live/src) folder and examples in the [`demo`](demo) folder.
 
 ### Testing
 

package.json

@@ -1,120 +1,35 @@
 {
-  "name": "react-live",
-  "version": "4.0.1",
-  "description": "A production-focused playground for live editing React code",
+  "name": "react-live-workspace",
+  "private": "true",
   "main": "dist/react-live.cjs.js",
   "types": "dist/index.d.ts",
   "jsnext:main": "dist/react-live.es.js",
   "module": "dist/react-live.es.js",
   "license": "MIT",
   "scripts": {
-    "storybook": "start-storybook -p 9001",
-    "storybook:build": "build-storybook -o .out",
-    "prebuild:lib": "rm -rf lib/*",
-    "prebuild": "yarn lint",
-    "build": "rollup -c",
-    "prepublishOnly": "npm run build",
-    "test": "jest",
-    "test:typings": "typings-tester --dir typings",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint --config .eslintrc \"./src/**/*.js\"",
-    "install:docs": "yarn --cwd website install",
-    "start:docs": "yarn --cwd website start",
-    "build:docs": "yarn --cwd website build",
-    "format:docs": "prettier --write docs",
+    "start:docs": "pnpm run --filter website start",
+    "build": "pnpm run -r build",
+    "build:lib": "pnpm run --filter react-live build",
+    "lint": "pnpm run --parallel lint",
+    "lint:fix": "pnpm run --parallel lint --fix",
     "changeset": "changeset",
-    "version": "yarn changeset version"
+    "version": "pnpm changeset version && pnpm install --no-frozen-lockfile"
   },
   "dependencies": {
-    "prism-react-renderer": "^1.3.1",
-    "sucrase": "^3.31.0",
-    "use-editable": "^2.3.3"
+    "prism-react-renderer": "^2.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
     "@babel/eslint-parser": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.21.0",
     "@changesets/cli": "^2.26.1",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-controls": "^6.4.13",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.4.13",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
-    "@types/prismjs": "^1.26.0",
-    "@types/react": "^18.0.31",
-    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
-    "babel-jest": "^27.0.6",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-add-module-exports": "^1.0.4",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "babel-eslint": "^10.1.0",
     "eslint": "^8.7.0",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
-    "jest": "^27.0.6",
-    "prettier": "^2.5.1",
-    "prismjs": "^1.26.0",
-    "prop-types": "^15.7.2",
-    "react": "^18.2.0",
-    "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^17.0.2",
-    "rollup": "^2.55.1",
-    "rollup-plugin-filesize": "^9.1.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.5.4",
-    "styled-components": "^4.0.0-beta.8",
-    "typescript": "^4.9",
-    "typings-tester": "^0.3.1",
-    "webpack": "^5.76.3"
-  },
-  "publishConfig": {
-    "provenance": true
-  },
-  "files": [
-    "src",
-    "lib",
-    "dist",
-    "react-live.css",
-    "typings/react-live.d.ts"
-  ],
-  "author": "@FormidableLabs",
-  "bugs": {
-    "url": "https://github.com/philpl/react-live/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/FormidableLabs/react-live"
-  },
-  "engines": {
-    "npm": ">= 2.0.0",
-    "node": ">= 0.12.0"
-  },
-  "keywords": [
-    "react",
-    "live",
-    "live edit",
-    "component playground",
-    "react live"
-  ],
-  "jest": {
-    "testEnvironment": "jsdom",
-    "resetMocks": true,
-    "rootDir": "./src",
-    "testURL": "http://localhost/"
-  },
-  "sideEffects": false
+    "prettier": "^2.5.1"
+  }
 }