@zendeskgarden/react-typography - npm Package Compare versions

Comparing version 9.0.0-next.25 to 9.0.0-next.26

dist/esm/elements/CodeBlock.js

@@ -7,6 +7,6 @@ /**
 */
-import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
-import { Prism, Highlight } from 'prism-react-renderer';
+import React, { useRef, useMemo } from 'react';
+import Highlight, { Prism } from 'prism-react-renderer';
 import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
-import { useWindow, ThemeProvider } from '@zendeskgarden/react-theming';
+import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { LANGUAGES } from '../types/index.js';
@@ -44,21 +44,2 @@ import '../styled/StyledBlockquote.js';
   });
-  const [isPrismImported, setIsPrismImported] = useState(false);
-  const win = useWindow();
-  const importPrism = useCallback(async () => {
-    if (win && !isPrismImported) {
-      win.Prism = Prism;
-      try {
-        await import('prismjs/components/prism-bash');
-        await import('prismjs/components/prism-diff');
-        await import('prismjs/components/prism-json');
-      } catch (error) {
-        console.error(error);
-      } finally {
-        setIsPrismImported(true);
-      }
-    }
-  }, [win, isPrismImported]);
-  useEffect(() => {
-    importPrism();
-  }, [importPrism]);
   const getDiff = line => {
@@ -82,6 +63,7 @@ let retVal;
   };
-  return isPrismImported && React.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
+  return React.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
   }), React.createElement(Highlight, {
+    Prism: Prism,
     code: code ? code.trim() : '',
@@ -88,0 +70,0 @@ language: LANGUAGES.includes(language) ? language : 'tsx'

dist/esm/styled/StyledBlockquote.js

@@ -14,3 +14,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -17,0 +17,0 @@ displayName: "StyledBlockquote",

dist/esm/styled/StyledCode.js

@@ -53,3 +53,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.26',
   as: 'code',
@@ -56,0 +56,0 @@ isMonospace: true

dist/esm/styled/StyledCodeBlock.js

@@ -17,3 +17,3 @@ /**
     theme,
-    variable: theme.colors.base === 'light' ? 'background.subtle' : 'background.default'
+    variable: 'background.recessed'
   });
@@ -28,3 +28,3 @@ const foregroundColor = getColor({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -31,0 +31,0 @@ displayName: "StyledCodeBlock",

dist/esm/styled/StyledCodeBlockContainer.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledCodeBlockContainer",

dist/esm/styled/StyledCodeBlockLine.js

@@ -89,3 +89,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.26',
   as: 'code',
@@ -92,0 +92,0 @@ isMonospace: true

dist/esm/styled/StyledCodeBlockToken.js

@@ -174,3 +174,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -177,0 +177,0 @@ displayName: "StyledCodeBlockToken",

dist/esm/styled/StyledEllipsis.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledEllipsis",

dist/esm/styled/StyledFont.js

@@ -70,3 +70,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -73,0 +73,0 @@ displayName: "StyledFont",

dist/esm/styled/StyledIcon.js

@@ -18,3 +18,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -21,0 +21,0 @@ displayName: "StyledIcon",

dist/esm/styled/StyledList.js

@@ -17,3 +17,3 @@ /**
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -26,3 +26,3 @@ displayName: "StyledList__StyledOrderedList",
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -29,0 +29,0 @@ displayName: "StyledList__StyledUnorderedList",

dist/esm/styled/StyledListItem.js

@@ -24,3 +24,3 @@ /**
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.26',
   as: 'li'
@@ -38,3 +38,3 @@ }).withConfig({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.26',
   as: 'li'
@@ -41,0 +41,0 @@ }).withConfig({

dist/esm/styled/StyledParagraph.js

@@ -14,3 +14,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -17,0 +17,0 @@ displayName: "StyledParagraph",

dist/index.cjs.js

@@ -14,3 +14,3 @@ /**
 var polished = require('polished');
-var prismReactRenderer = require('prism-react-renderer');
+var Highlight = require('prism-react-renderer');
 var containerScrollregion = require('@zendeskgarden/container-scrollregion');
@@ -23,2 +23,3 @@
 var styled__default = /*#__PURE__*/_interopDefault(styled);
+var Highlight__default = /*#__PURE__*/_interopDefault(Highlight);
 
@@ -90,3 +91,3 @@ const HUE = ['grey', 'red', 'green', 'yellow'];
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -104,3 +105,3 @@ displayName: "StyledFont",
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -156,3 +157,3 @@ displayName: "StyledBlockquote",
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.26',
   as: 'code',
@@ -177,3 +178,3 @@ isMonospace: true
     theme,
-    variable: theme.colors.base === 'light' ? 'background.subtle' : 'background.default'
+    variable: 'background.recessed'
   });
@@ -188,3 +189,3 @@ const foregroundColor = reactTheming.getColor({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -198,3 +199,3 @@ displayName: "StyledCodeBlock",
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -285,3 +286,3 @@ displayName: "StyledCodeBlockContainer",
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.26',
   as: 'code',
@@ -457,3 +458,3 @@ isMonospace: true
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -467,3 +468,3 @@ displayName: "StyledCodeBlockToken",
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -482,3 +483,3 @@ displayName: "StyledEllipsis",
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -496,3 +497,3 @@ displayName: "StyledIcon",
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -505,3 +506,3 @@ displayName: "StyledList__StyledOrderedList",
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -523,3 +524,3 @@ displayName: "StyledList__StyledUnorderedList",
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.26',
   as: 'li'
@@ -537,3 +538,3 @@ }).withConfig({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.26',
   as: 'li'
@@ -552,3 +553,3 @@ }).withConfig({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
@@ -731,21 +732,2 @@ displayName: "StyledParagraph",
   });
-  const [isPrismImported, setIsPrismImported] = React.useState(false);
-  const win = reactTheming.useWindow();
-  const importPrism = React.useCallback(async () => {
-    if (win && !isPrismImported) {
-      win.Prism = prismReactRenderer.Prism;
-      try {
-        await import('prismjs/components/prism-bash');
-        await import('prismjs/components/prism-diff');
-        await import('prismjs/components/prism-json');
-      } catch (error) {
-        console.error(error);
-      } finally {
-        setIsPrismImported(true);
-      }
-    }
-  }, [win, isPrismImported]);
-  React.useEffect(() => {
-    importPrism();
-  }, [importPrism]);
   const getDiff = line => {
@@ -769,6 +751,7 @@ let retVal;
   };
-  return isPrismImported && React__default.default.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
+  return React__default.default.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
-  }), React__default.default.createElement(prismReactRenderer.Highlight, {
+  }), React__default.default.createElement(Highlight__default.default, {
+    Prism: Highlight.Prism,
     code: code ? code.trim() : '',
@@ -775,0 +758,0 @@ language: LANGUAGES.includes(language) ? language : 'tsx'

package.json

 {
   "name": "@zendeskgarden/react-typography",
-  "version": "9.0.0-next.25",
+  "version": "9.0.0-next.26",
   "description": "Components relating to typography in the Garden Design System",
@@ -26,4 +26,3 @@ "license": "Apache-2.0",
     "polished": "^4.3.1",
-    "prism-react-renderer": "^2.3.1",
-    "prismjs": "^1.29.0",
+    "prism-react-renderer": "^1.3.5",
     "prop-types": "^15.5.7"
@@ -38,3 +37,3 @@ },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.25"
+    "@zendeskgarden/react-theming": "^9.0.0-next.26"
   },
@@ -51,3 +50,3 @@ "keywords": [
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
+  "gitHead": "049dd7bd143029147de333f78bd879dc7d7251f2"
 }

No alert changes

Improved metrics

Dependency count

8

decreased by-11.11%

Worsened metrics

Total package byte prevSize

111492

decreased by-1.19%

Lines of code

2974

decreased by-1.16%

Dependency changes

• + Addedprism-react-renderer@1.3.5(transitive)

• - Removedprismjs@^1.29.0

• - Removed@types/prismjs@1.26.5(transitive)

• - Removedclsx@2.1.1(transitive)

• - Removedprism-react-renderer@2.4.1(transitive)

• - Removedprismjs@1.29.0(transitive)

• Updatedprism-react-renderer@^1.3.5