Merge pull request #8 from streamich/bump-code-colors

Bump `code-colors`

.storybook/main.ts

@@ -2,17 +2,23 @@ import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-webpack5-compiler-babel",
   ],
+
   framework: {
     name: "@storybook/react-webpack5",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
   },
 };
 

.storybook/preview.ts

@@ -1,6 +1,5 @@
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,

README.md

@@ -4,12 +4,17 @@ React component for code syntax highlighting.
 
 **Why another code syntax highlighting package?**
 
-- This package is simple to use. It is very lightweight, it essentially just ships a single React component.
-- The `highlight.js` dependency is loaded from CDN asynchronously.
-- `highlight.js` is run in a Web Worker, so it doesn't block the main thread.
+- A simple to use React component.
+- It is very lightweight, only ships a small React component, which loads
+  tokenization script (~35Kb) in a Web Worker on demand, on first usage.
+- The Prism.js tokenization script is loaded from the CDN asynchronously.
+- Runs tokenization in a Web Worker, so it doesn't block the main thread.
+- Emits Prism.js compatible HTML, so you can use any Prism.js [themes](https://cdn.jsdelivr.net/npm/[email protected]/themes/).
 - No layout shifts before the code is highlighted. While the code is being
   highlighted in the Web Worker, the component renders plain text with the
   correct dimensions.
+- If code changes while it is being highlighted, the component will cancel the
+  previous highlighting and start a new one.
 
 ## Installation
 
@@ -31,21 +36,20 @@ import { ColorTokens } from "code-colors-react";
 
 - `code` — The code to highlight.
 - `lang` — The language of the code. If omitted, it will try to autodetect the language.
-- `prefix` — The prefix to use for the CSS classes. Defaults to `hljs-`.
 - `as` — The root element to render. Defaults to `"code"`.
 
 ## Styling
 
-To style the highlighted code, you can use any of the [pre-defined themes](https://cdn.jsdelivr.net/gh/highlightjs/[email protected].0/build/styles/) from
-`highlight.js`.
+To style the highlighted code, you can use any of the [pre-defined themes](https://cdn.jsdelivr.net/npm/[email protected].0/themes/) from
+Prism.
 
 You can do it in JavaScript like so:
 
 ```js
 import { loadCss } from "thingies/lib/loadCss";
 
 const theme = "github";
-const href = `https://cdn.jsdelivr.net/gh/highlightjs/[email protected].0/build/styles/${theme}.min.css`;
+const href = `https://cdn.jsdelivr.net/npm/[email protected].0/themes/${theme}.min.css`;
 
 loadCss(href, "hljs");
 ```

package.json

@@ -41,24 +41,25 @@
     "react-dom": "*"
   },
   "dependencies": {
-    "code-colors": "^2.0.0"
+    "code-colors": "^2.1.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@storybook/addon-essentials": "^7.0.24",
-    "@storybook/addon-interactions": "^7.0.24",
-    "@storybook/addon-links": "^7.0.24",
-    "@storybook/blocks": "^7.0.24",
-    "@storybook/react": "^7.0.24",
-    "@storybook/react-webpack5": "^7.0.24",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/addon-interactions": "^8.1.3",
+    "@storybook/addon-links": "^8.1.3",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.1.3",
+    "@storybook/react": "^8.1.3",
+    "@storybook/react-webpack5": "^8.1.3",
+    "@storybook/test": "^8.1.3",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.1",
-    "storybook": "^7.0.24",
+    "storybook": "^8.1.3",
     "thingies": "^2.1.0",
     "typescript": "^5.1.6"
   }

src/ColorTokens.tsx

@@ -52,7 +52,6 @@ export interface ColorTokensProps {
 export const ColorTokens: React.FC<ColorTokensProps> = ({
   code,
   lang,
-  prefix = "code-colors",
   as = "code",
   ...rest
 }) => {
@@ -62,17 +61,17 @@ export const ColorTokens: React.FC<ColorTokensProps> = ({
 
   React.useEffect(() => {
     setNode(null);
-    let unmounted = false;
+    let cancelled = false;
     tokens(code, lang)
       .then((ast) => {
-        if (!unmounted) {
+        if (!cancelled) {
           const [node] = astToReact(ast, code, 0, Tag, rest);
           setNode(node);
         }
       })
       .catch((err) => {});
     return () => {
-      unmounted = true;
+      cancelled = true;
     };
   }, [code]);
 

src/util.ts

@@ -10,4 +10,4 @@ export const colors = (): CodeColors => {
 };
 
 export const tokens = async (code: string, lang?: string): Promise<TokenNode> =>
-  await colors().highlight(code, lang);
+  await colors().tokenize(code, lang);