Merge pull request #189 from FormidableLabs/v2-prism-bump-readme

Bump to Prism 1.29, update README

Author: carloskelly13

README.md

@@ -68,141 +68,60 @@ should be installed as one of your project's `dependencies`:
 npm install --save prism-react-renderer
 # yarn
 yarn add prism-react-renderer
+# pnpm
+pnpm add prism-react-renderer
 ```
 
-> This package also depends on `react`. Please make sure you
-> have those installed as well.
+> Prism React Renderer has a peer dependency on `react`
 
-## Usage
+### How to use Prism React Renderer
+Prism React Renderer has a named export for the `<Highlight />` component along with `themes`. To see Prism React Render in action with base styling check out `packages/demo` or run `pnpm run start:demo` from the root of this repository.
 
-> [Try it out in the browser](https://codesandbox.io/s/prism-react-renderer-example-u6vhk)
+```tsx
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { Highlight, themes } from "prism-react-renderer"
+import styles from 'styles.module.css'
 
-<img src="./.readme/basic.png" width="237" alt="Screenshot showing highlighted code block" />
-
-```jsx
-import React from "react";
-import { render } from "react-dom";
-// import { createRoot } from "react-dom/client";
-import Highlight, { defaultProps } from "prism-react-renderer";
-
-const exampleCode = `
-(function someDemo() {
-  var test = "Hello World!";
-  console.log(test);
-})();
-
-return () => <App />;
-`;
-
-const Content = (
-  <Highlight {...defaultProps} code={exampleCode} language="jsx">
+const codeBlock = `
+const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
+  return (
+    <div>
+      <h2>{item.name}</h2>
+      <p>Price: {item.price}</p>
+      <p>Quantity: {item.quantity}</p>
+    </div>
+  );
+}
+`
+
+export const App = () => (
+  <Highlight
+    theme={themes.shadesOfPurple}
+    code={codeBlock}
+    language="tsx"
+  >
     {({ className, style, tokens, getLineProps, getTokenProps }) => (
-      <pre className={className} style={style}>
+      <pre style={style}>
         {tokens.map((line, i) => (
-          <div {...getLineProps({ line, key: i })}>
+          <div key={i} {...getLineProps({ line })}>
+            <span>{i + 1}</span>
             {line.map((token, key) => (
-              <span {...getTokenProps({ token, key })} />
+              <span key={key} {...getTokenProps({ token })} />
             ))}
           </div>
         ))}
       </pre>
     )}
   </Highlight>
-);
-render(Content, document.getElementById('root'));
-
-// If you are using React 18
-// const root = createRoot(document.getElementById('root'));
-// root.render(Content);
-```
-
-`<Highlight />` is the only component exposed by this package, as inspired by
-[downshift](https://github.com/paypal/downshift).
-
-It also exports a `defaultProps` object which for basic usage can simply be spread
-onto the `<Highlight />` component. It also provides some default theming.
-
-It doesn't render anything itself, it just calls the render function and renders that.
-["Use a render prop!"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)!
-`<Highlight>{highlight => <pre>/* your JSX here! */</pre>}</Highlight>`
-
-### Line Numbers
-
-Add line numbers to your highlighted code blocks using the `index` parameter in your `line.map` function:
-
-<img src="./.readme/line-numbers.png" width="453" alt="Screenshot showing line numbers in highlighted code block" />
-
-For example, if you were using `styled-components`, it could look like the following demo.
+)
 
-> [Demo with `styled-components`](https://codesandbox.io/s/prism-react-renderer-example-u6vhk?file=/src/WithLineNumbers.js)
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
+        .render(<App />)
 
-```js
-import React from "react";
-import styled from "styled-components";
-import Highlight, { defaultProps } from "prism-react-renderer";
-import theme from "prism-react-renderer/themes/nightOwl";
+```
 
-const exampleCode = `
-import React, { useState } from "react";
 
-function Example() {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div>
-      <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>
-        Click me
-      </button>
-    </div>
-  );
-}
-`.trim();
-
-const Pre = styled.pre`
-  text-align: left;
-  margin: 1em 0;
-  padding: 0.5em;
-  overflow: scroll;
-`;
-
-const Line = styled.div`
-  display: table-row;
-`;
-
-const LineNo = styled.span`
-  display: table-cell;
-  text-align: right;
-  padding-right: 1em;
-  user-select: none;
-  opacity: 0.5;
-`;
-
-const LineContent = styled.span`
-  display: table-cell;
-`;
-
-const WithLineNumbers = () => (
-  <Highlight {...defaultProps} theme={theme} code={exampleCode} language="jsx">
-    {({ className, style, tokens, getLineProps, getTokenProps }) => (
-      <Pre className={className} style={style}>
-        {tokens.map((line, i) => (
-          <Line key={i} {...getLineProps({ line, key: i })}>
-            <LineNo>{i + 1}</LineNo>
-            <LineContent>
-              {line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token, key })} />
-              ))}
-            </LineContent>
-          </Line>
-        ))}
-      </Pre>
-    )}
-  </Highlight>
-);
-
-export default WithLineNumbers;
-```
 
 ## Basic Props
 
@@ -235,19 +154,17 @@ This is the code that will be highlighted.
 
 ### theme
 
-> `PrismTheme` | _required; default is provided in `defaultProps` export_
+> `PrismTheme` | _optional; default is vsDark_
 
 If a theme is passed, it is used to generate style props which can be retrieved
 via the prop-getters which are described in "[Children Function](#children-function)".
 
-A default theme is provided by the `defaultProps` object.
-
 Read more about how to theme `prism-react-renderer` in
 the section "[Theming](#theming)".
 
-### Prism
+### prism
 
-> `PrismLib` | _required; default is provided in `defaultProps` export_
+> `prism` | _optional; default is the vendored version_
 
 This is the [Prismjs](https://github.com/PrismJS/prism) library itself.
 A vendored version of Prism is provided (and also exported) as part of this library.
@@ -263,7 +180,7 @@ But if you choose to use your own Prism setup, simply pass Prism as a prop:
 // Whichever way you're retrieving Prism here:
 import Prism from 'prismjs/components/prism-core';
 
-<Highlight Prism={Prism} {/* ... */} />
+<Highlight prism={prism} {/* ... */} />
 ```
 
 ## Children Function
@@ -349,15 +266,15 @@ your old Prism CSS-file themes.
 ## Theming
 
 The `defaultProps` you'd typically apply in a basic use-case, contain a default theme.
-This theme is [duotoneDark](./src/themes/duotoneDark.js).
+This theme is [vsDark](./packages/prism-react-renderer/src/themes/vsDark.ts).
 
 While all `className`s are provided with `<Highlight />`, so that you could use your good
 old Prism CSS-file themes, you can also choose to use `prism-react-renderer`'s themes like so:
 
 ```jsx
-import dracula from 'prism-react-renderer/themes/dracula';
+import { Highlight, themes } from 'prism-react-renderer';
 
-<Highlight theme={dracula} {/* ... */} />
+<Highlight theme={themes.dracula} {/* ... */} />
 ```
 
 These themes are JSON-based and are heavily inspired by VSCode's theme format.

package.json

@@ -13,11 +13,9 @@
     "build:languages": "pnpm --filter generate-prism-languages build",
     "build:watch": "pnpm --filter generate-prism-languages build && pnpm --filter prism-react-renderer build:watch",
     "changeset": "changeset",
-    "version": "pnpm changeset version && pnpm install"
+    "version": "pnpm changeset version"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.26.0",
-    "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@babel/cli": "^7.10.4",
     "@babel/core": "^7.21.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
@@ -26,25 +24,31 @@
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.16.0",
+    "@changesets/cli": "^2.26.0",
+    "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@testing-library/react": "^11.2.5",
     "@types/react": "^18.0.35",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
+    "babel-jest": "^26.6.3",
+    "babel-plugin-macros": "^3.0.1",
+    "codegen.macro": "^4.1.0",
     "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "babel-jest": "^26.6.3",
-    "babel-plugin-macros": "^3.0.1",
-    "codegen.macro": "^4.1.0",
     "globby": "^11.0.2",
-    "prismjs": "1.26.0",
-    "patch-package": "^6.4.7",
     "prettier": "^2.8.7",
+    "prismjs": "1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.0.4"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
+    }
   }
 }

packages/prism-react-renderer/package.json

@@ -13,8 +13,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "patch-package && tsup",
-    "build:watch": "patch-package && tsup --watch",
+    "build": "tsup",
+    "build:watch": "tsup --watch",
     "test": "vitest",
     "typecheck": "tsc --noEmit",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",