Merge pull request #187 from FormidableLabs/v2-react-update

Refactored Highlight component to use modern React patterns.

Author: carloskelly13

.eslintrc

@@ -21,7 +21,7 @@
   "globals": {
     "page": true
   },
-  "ignorePatterns": [""],
+  "ignorePatterns": ["prism-langs.ts", "**/dist/**/*", "**/build/**/*", "**/node_modules/**/*", "**/public/**/*", "**/.docusaurus/**/*"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 12,
@@ -44,10 +44,10 @@
     "react/prop-types": 0,
     "react/sort-prop-types": 0,
     "react/no-string-refs": 0,
+    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }],
     "react/no-did-update-set-state": 0,
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "error",
-    "@typescript-eslint/no-unused-vars": ["error"],
     "@typescript-eslint/no-var-requires": 0
-  }
+  },
 }

package.json

@@ -1,19 +1,16 @@
 {
   "name": "prism-react-renderer-monorepo",
-  "description": "Renders highlighted Prism output using React",
   "sideEffects": false,
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "types": "index.d.ts",
-  "license": "MIT",
+  "private": true,
   "repository": "https://github.com/FormidableLabs/prism-react-renderer",
   "scripts": {
-    "postinstall": "pnpm run --filter generate-prism-languages generate",
-    "build": "pnpm run --filter prism-react-renderer build",
-    "build:watch": "pnpm run --filter prism-react-renderer build:watch"
-  },
-  "peerDependencies": {
-    "react": ">=0.14.9"
+    "lint": "eslint packages",
+    "test": "pnpm run -r test",
+    "typecheck": "pnpm run -r typecheck",
+    "check:ci": "pnpm run typecheck && pnpm run lint && pnpm run test",
+    "start:demo": "pnpm --filter demo dev",
+    "build": "pnpm --sequential --filter generate-prism-languages --filter prism-react-renderer --filter demo build",
+    "build:watch": "pnpm --filter generate-prism-languages build && pnpm --filter prism-react-renderer build:watch"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.4",
@@ -25,7 +22,6 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.16.0",
     "@testing-library/react": "^11.2.5",
-    "@types/jest": "^29.5.0",
     "@types/react": "^18.0.35",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
@@ -40,7 +36,6 @@
     "codegen.macro": "^4.1.0",
     "globby": "^11.0.2",
     "prismjs": "1.26.0",
-    "jest": "^26.6.3",
     "patch-package": "^6.4.7",
     "prettier": "^2.8.7",
     "react": "^18.2.0",

packages/demo/src/App.tsx

@@ -1,4 +1,4 @@
-import Highlight, { defaultProps, themes } from "prism-react-renderer"
+import { Highlight, themes } from "prism-react-renderer"
 import styles from "./app.module.css"
 import clsx from "clsx"
 import { ProjectBadge } from "formidable-oss-badges"
@@ -57,7 +57,6 @@ function App() {
         ))}
       </select>
       <Highlight
-        {...defaultProps}
         theme={activeTheme}
         code={activeSampleCode.code.trim()}
         language={activeSampleCode.language}

packages/generate-prism-languages/index.ts

@@ -12,6 +12,8 @@ export const languagesToBundle = <const>[
   "swift",
   "kotlin",
   "objectivec",
+  "js-extras",
+  "reason",
   "rust",
   "graphql",
   "yaml",
@@ -25,7 +27,7 @@ export const languagesToBundle = <const>[
  * that starts off assuming Prism lives in global scope. We also need to provide Prism as that
  * gets passed into an iffe preventing us from needing to use global scope.
  */
-const header = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport Prism from "prismjs"\n`
+const header = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport Prism from "prismjs";\nexport { Prism };`
 const prismPath = dirname(require.resolve("prismjs"))
 
 const readLanguageFile = async (language: string): Promise<string> => {

packages/generate-prism-languages/package.json

@@ -2,7 +2,8 @@
   "name": "generate-prism-languages",
   "private": true,
   "scripts": {
-    "generate": "ts-node ./index.ts"
+    "build": "ts-node ./index.ts",
+    "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
     "react": ">=16.0.0"

packages/prism-react-renderer/package.json

@@ -10,23 +10,20 @@
   "repository": "https://github.com/FormidableLabs/prism-react-renderer",
   "files": [
     "index.d.ts",
-    "dist",
-    "prism",
-    "themes"
+    "dist"
   ],
   "scripts": {
-    "prebuild": "patch-package",
-    "build": "tsup",
-    "build:watch": "tsup --watch",
-    "test": "jest",
+    "build": "patch-package && tsup",
+    "build:watch": "patch-package && tsup --watch",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "format": "prettier --write 'src/**/*.js'"
   },
   "peerDependencies": {
     "react": ">=16.0.0"
   },
   "devDependencies": {
-    "@types/node": "^18.15.11",
     "@babel/core": "*",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-buble": "^0.21.3",
@@ -35,15 +32,24 @@
     "@rollup/plugin-node-resolve": "^11.2.0",
     "@rollup/plugin-typescript": "^11.1.0",
     "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.15.11",
     "@types/prismjs": "^1.26.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "babel-plugin-codegen": "^4.1.5",
+    "happy-dom": "^9.7.1",
     "prismjs": "*",
     "react": "*",
     "react-dom": "*",
     "rollup": "^2.39.0",
-    "tslib": "^2.5.0",
     "ts-node": "^10.9.1",
+    "tslib": "^2.5.0",
     "tsup": "^6.7.0",
-    "typescript": "*"
+    "typescript": "*",
+    "vite": "^4.2.0",
+    "vitest": "^0.30.1"
+  },
+  "dependencies": {
+    "clsx": "^1.2.1"
   }
 }