Finished migration

Author: carloskelly13

.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

@@ -19,20 +19,27 @@ jobs:
           node-version: 18
           cache: 'yarn'
 
-      - name: Installation
-        run: yarn --frozen-lockfile
+      - uses: pnpm/action-setup@v2.2.2
+        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

@@ -18,24 +18,43 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
         with:
-          node-version: 16
-          cache: 'yarn'
+          fetch-depth: 0
+
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18.x
+
+      - uses: pnpm/action-setup@v2.2.2
+        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: AWS CLI version
         run: "aws --version"
 
       - name: Install Dependencies
-        run: yarn install --frozen-lockfile
-        working-directory: ./website
+        run: pnpm install
+        working-directory: ./
 
       - name: Build the website
-        run: yarn build
+        run: pnpm build
         working-directory: ./website
 
       # Use `gh` tool to infer more information about the pull request.
-      # The underlying issue here is pushes to a non-mergeable/master target branch
+      # The underlying issue here is pushes to a non-mergeable/main target branch
       # don't have the PR number easily available.
       # https://stackoverflow.com/a/70102700
       - name: Get pull request info
@@ -45,8 +64,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy docs (production)
-        if: github.ref == 'refs/heads/master'
-        run: yarn deploy:prod
+        if: github.ref == 'refs/heads/main'
+        run: pnpm run deploy:prod
         working-directory: ./website
         env:
           GITHUB_DEPLOYMENT_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -8,34 +8,48 @@ on:
 jobs:
   release:
     runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      id-token: write
-      issues: write
-      repository-projects: write
-      deployments: write
-      packages: write
-      pull-requests: write
 
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
         with:
-          node-version: 18
-          cache: "yarn"
+          fetch-depth: 0
+
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18.x
+
+      - uses: pnpm/action-setup@v2.2.2
+        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 }}

package.json

@@ -9,6 +9,9 @@
   "scripts": {
     "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": "pnpm changeset version && pnpm install --no-frozen-lockfile"
   },

packages/react-live/package.json

@@ -16,8 +16,8 @@
     "test": "jest",
     "test:typings": "typings-tester --dir typings",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint --ext .js,.ts,.tsx .",
-    "lint:fix": "eslint --ext .js,.ts,.tsx . --fix"
+    "lint": "eslint --ext .js,.ts,.tsx src",
+    "lint:fix": "eslint --ext .js,.ts,.tsx src --fix"
   },
   "dependencies": {
     "prism-react-renderer": "*",

packages/react-live/src/components/Editor/index.tsx

@@ -10,7 +10,7 @@ export type Props = {
   prism?: typeof Prism;
   style?: CSSProperties;
   tabMode?: "focus" | "indentation";
-  theme?: any;
+  theme?: typeof themes.nightOwl;
   onChange?(value: string): void;
 };
 

packages/react-live/src/components/Live/LiveEditor.stories.tsx

@@ -1,4 +1,3 @@
-import Prism from "prismjs";
 import { Editor } from "../../index";
 import type { Story } from "@storybook/react";
 
@@ -7,29 +6,28 @@ export default {
   component: Editor,
 };
 
-const Template = (args: any) => <Editor {...args} />;
+const Template = (args: typeof defaultArgs) => <Editor {...args} />;
 
 const defaultArgs = {
   language: "js",
   code: "const x = 'Hello World!';",
 };
 
-export const Default: Story = Template.bind({});
+export const Default: Story<typeof defaultArgs> = Template.bind({});
 Default.args = defaultArgs;
 
-export const FontFamilyExample: Story = Template.bind({});
-FontFamilyExample.args = {
+export const FontFamilyExample: Story<typeof fontFamilyArgs> = Template.bind(
+  {}
+);
+const fontFamilyArgs = {
   ...defaultArgs,
   style: {
     fontFamily: "Monaco",
   },
 };
+FontFamilyExample.args = fontFamilyArgs;
 
 // Can't pass Prism as an arg since it is not JSON-serializable
 export const PrismFromNpm = () => (
-  <Editor
-    language="javascript"
-    prism={Prism as any}
-    code="const x = 'Hello World!';"
-  />
+  <Editor language="javascript" code="const x = 'Hello World!';" />
 );

packages/react-live/src/utils/transpile/evalCode.ts

@@ -1,6 +1,9 @@
 import type { ComponentType } from "react";
 
-const evalCode = (code: string, scope: Record<string, unknown>): ComponentType => {
+const evalCode = (
+  code: string,
+  scope: Record<string, unknown>
+): ComponentType => {
   const scopeKeys = Object.keys(scope);
   const scopeValues = scopeKeys.map((key) => scope[key]);
   return new Function(...scopeKeys, code)(...scopeValues);

packages/react-live/src/utils/transpile/index.ts

@@ -13,9 +13,9 @@ const wrapReturn = (code: string) => `return (${code})`;
 
 type GenerateOptions = {
   code: string;
-  scope?: Record<string, unknown>,
-  enableTypeScript: boolean
-}
+  scope?: Record<string, unknown>;
+  enableTypeScript: boolean;
+};
 
 export const generateElement = (
   { code = "", scope = {}, enableTypeScript = true }: GenerateOptions,
@@ -29,8 +29,8 @@ export const generateElement = (
    * statements in the return.
    */
 
-  const firstPassTransforms: Transform[] = ["jsx"]
-  enableTypeScript && firstPassTransforms.push("typescript")
+  const firstPassTransforms: Transform[] = ["jsx"];
+  enableTypeScript && firstPassTransforms.push("typescript");
 
   const transformed = compose<string>(
     addJsxConst,
@@ -50,7 +50,7 @@ export const generateElement = (
 
 export const renderElementAsync = (
   { code = "", scope = {}, enableTypeScript = true }: GenerateOptions,
-  resultCallback: Function,
+  resultCallback: (...args: unknown[]) => React.ReactNode,
   errorCallback: (error: Error) => void
   // eslint-disable-next-line consistent-return
 ) => {
@@ -68,11 +68,8 @@ export const renderElementAsync = (
     );
   }
 
-  const transforms: Transform[] = ["jsx", "imports"]
-  enableTypeScript && transforms.splice(1, 0, "typescript")
+  const transforms: Transform[] = ["jsx", "imports"];
+  enableTypeScript && transforms.splice(1, 0, "typescript");
 
-  evalCode(
-    transform({ transforms })(code),
-    { React, ...scope, render }
-  );
+  evalCode(transform({ transforms })(code), { React, ...scope, render });
 };