@theme-ui/mdx - npm Package Compare versions

Comparing version 0.15.7 to 0.16.0-develop.4

dist/declarations/src/Themed.d.ts

@@ -1,2 +0,1 @@
-/** @jsx jsx */
 import { SxProp } from '@theme-ui/core';
@@ -6,3 +5,3 @@ import { Theme } from '@theme-ui/css';
 declare const tags: readonly ["p", "b", "i", "a", "h1", "h2", "h3", "h4", "h5", "h6", "img", "pre", "code", "ol", "ul", "li", "blockquote", "hr", "em", "table", "tr", "th", "td", "em", "strong", "del", "inlineCode", "thematicBreak", "div", "root"];
-export declare type ThemeUIMdxIntrinsics = typeof tags[number];
+export type ThemeUIMdxIntrinsics = (typeof tags)[number];
 declare const aliases: {
@@ -13,4 +12,4 @@ readonly inlineCode: "code";
 };
-export declare type MdxAliasesKeys = keyof typeof aliases;
-declare type MDXProviderComponentsKnownKeys = {
+export type MdxAliasesKeys = keyof typeof aliases;
+type MDXProviderComponentsKnownKeys = {
     [key in ThemeUIMdxIntrinsics]?: ComponentType<any> | string;
@@ -21,6 +20,6 @@ };
 }
-export declare type MdxAliases = {
+export type MdxAliases = {
     [key in ThemeUIMdxIntrinsics]: keyof JSX.IntrinsicElements;
 };
-export declare type ThemedProps = {
+export type ThemedProps = {
     theme: Theme;
@@ -32,3 +31,3 @@ };
 }
-declare type Aliases = typeof aliases;
+type Aliases = typeof aliases;
 /**
@@ -42,3 +41,3 @@ * Extracts styles from `theme.styles` object
 }
-export declare type ThemedComponentsDict = {
+export type ThemedComponentsDict = {
     [K in ThemeUIMdxIntrinsics]: K extends keyof Aliases ? ThemedComponent<Aliases[K]> : K extends keyof JSX.IntrinsicElements ? ThemedComponent<K> : never;
@@ -45,0 +44,0 @@ };

dist/theme-ui-mdx.cjs.d.ts

 export * from "./declarations/src/index";
+//# sourceMappingURL=theme-ui-mdx.cjs.d.ts.map

dist/theme-ui-mdx.cjs.dev.js

@@ -9,25 +9,11 @@ 'use strict';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 // mdx components
-var tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del', // mdx
-'inlineCode', 'thematicBreak', // other
-'div', // theme-ui
+const tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del',
+// mdx
+'inlineCode', 'thematicBreak',
+// other
+'div',
+// theme-ui
 'root'];
-var aliases = {
+const aliases = {
   inlineCode: 'code',
@@ -37,46 +23,31 @@ thematicBreak: 'hr',
 };
+const isAlias = x => x in aliases;
+const alias = n => isAlias(n) ? aliases[n] : n;
 
-var isAlias = function isAlias(x) {
-  return x in aliases;
-};
-
-var alias = function alias(n) {
-  return isAlias(n) ? aliases[n] : n;
-};
 /**
  * Extracts styles from `theme.styles` object
  */
-
-
-var themed = function themed(key) {
-  return function (theme) {
-    return css.css(css.get(theme, "styles." + key))(theme);
-  };
-};
-
-var createThemedComponent = function createThemedComponent(name, variant) {
-  var variantStyles = themed(variant);
-
-  var component = function component(props) {
-    var extraStyles = {};
-
+const themed = key => theme => css.css(css.get(theme, `styles.${key}`))(theme);
+const createThemedComponent = (name, variant) => {
+  const variantStyles = themed(variant);
+  const component = props => {
+    const extraStyles = {};
     if (name === 'th' || name === 'td') {
-      var _ref = props,
-          align = _ref.align;
+      const {
+        align
+      } = props;
       if (align !== 'char') extraStyles.textAlign = align;
     }
-
-    return core.jsx(name, _extends({}, props, {
+    return core.jsx(name, {
+      ...props,
       css: [props.css, variantStyles, extraStyles].filter(Boolean)
-    }));
+    });
   };
-
-  component.displayName = "Themed(" + name + ")";
+  component.displayName = `Themed(${name})`;
   return component;
 };
-
-var defaultMdxComponents = {};
-var Themed = {};
-tags.forEach(function (tag) {
-  var component = createThemedComponent(alias(tag), tag);
+const defaultMdxComponents = {};
+const Themed = {};
+tags.forEach(tag => {
+  const component = createThemedComponent(alias(tag), tag);
   defaultMdxComponents[tag] = component;
@@ -87,25 +58,22 @@ Themed[tag] = component;
 function wrapComponent(value, key) {
-  var component = function component(props) {
-    return core.jsx(value, _extends({}, props, {
-      css: themed(key)
-    }));
-  };
-
+  const component = props => core.jsx(value, {
+    ...props,
+    css: themed(key)
+  });
   component.displayName = "MdxComponents('" + key + "')";
   return component;
 }
+
 /** @internal */
+const wrapComponentsWithThemeStyles = comps => {
+  const next = {
+    ...defaultMdxComponents
+  };
 
-
-var wrapComponentsWithThemeStyles = function wrapComponentsWithThemeStyles(comps) {
-  var next = _extends({}, defaultMdxComponents); // We enrich user's components with the styles from theme.styles.
+  // We enrich user's components with the styles from theme.styles.
   // Example: `components.p` will get the styles from `theme.styles.p` as className.
-
-
-  for (var _i = 0, _Object$keys = Object.keys(comps); _i < _Object$keys.length; _i++) {
-    var key = _Object$keys[_i];
-    var value = comps[key];
+  for (const key of Object.keys(comps)) {
+    const value = comps[key];
     next[key] = typeof value === 'object' ? wrapComponentsWithThemeStyles(value) : wrapComponent(value, key);
   }
-
   return next;
@@ -124,7 +92,7 @@ };
  */
-
 function useThemedStylesWithMdx(outerComponents) {
-  return react.useMemo(function () {
-    return wrapComponentsWithThemeStyles(_extends({}, defaultMdxComponents, outerComponents));
-  }, [outerComponents]);
+  return react.useMemo(() => wrapComponentsWithThemeStyles({
+    ...defaultMdxComponents,
+    ...outerComponents
+  }), [outerComponents]);
 }
@@ -131,0 +99,0 @@

dist/theme-ui-mdx.cjs.prod.js

@@ -9,25 +9,11 @@ 'use strict';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 // mdx components
-var tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del', // mdx
-'inlineCode', 'thematicBreak', // other
-'div', // theme-ui
+const tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del',
+// mdx
+'inlineCode', 'thematicBreak',
+// other
+'div',
+// theme-ui
 'root'];
-var aliases = {
+const aliases = {
   inlineCode: 'code',
@@ -37,46 +23,31 @@ thematicBreak: 'hr',
 };
+const isAlias = x => x in aliases;
+const alias = n => isAlias(n) ? aliases[n] : n;
 
-var isAlias = function isAlias(x) {
-  return x in aliases;
-};
-
-var alias = function alias(n) {
-  return isAlias(n) ? aliases[n] : n;
-};
 /**
  * Extracts styles from `theme.styles` object
  */
-
-
-var themed = function themed(key) {
-  return function (theme) {
-    return css.css(css.get(theme, "styles." + key))(theme);
-  };
-};
-
-var createThemedComponent = function createThemedComponent(name, variant) {
-  var variantStyles = themed(variant);
-
-  var component = function component(props) {
-    var extraStyles = {};
-
+const themed = key => theme => css.css(css.get(theme, `styles.${key}`))(theme);
+const createThemedComponent = (name, variant) => {
+  const variantStyles = themed(variant);
+  const component = props => {
+    const extraStyles = {};
     if (name === 'th' || name === 'td') {
-      var _ref = props,
-          align = _ref.align;
+      const {
+        align
+      } = props;
       if (align !== 'char') extraStyles.textAlign = align;
     }
-
-    return core.jsx(name, _extends({}, props, {
+    return core.jsx(name, {
+      ...props,
       css: [props.css, variantStyles, extraStyles].filter(Boolean)
-    }));
+    });
   };
-
-  component.displayName = "Themed(" + name + ")";
+  component.displayName = `Themed(${name})`;
   return component;
 };
-
-var defaultMdxComponents = {};
-var Themed = {};
-tags.forEach(function (tag) {
-  var component = createThemedComponent(alias(tag), tag);
+const defaultMdxComponents = {};
+const Themed = {};
+tags.forEach(tag => {
+  const component = createThemedComponent(alias(tag), tag);
   defaultMdxComponents[tag] = component;
@@ -87,25 +58,22 @@ Themed[tag] = component;
 function wrapComponent(value, key) {
-  var component = function component(props) {
-    return core.jsx(value, _extends({}, props, {
-      css: themed(key)
-    }));
-  };
-
+  const component = props => core.jsx(value, {
+    ...props,
+    css: themed(key)
+  });
   component.displayName = "MdxComponents('" + key + "')";
   return component;
 }
+
 /** @internal */
+const wrapComponentsWithThemeStyles = comps => {
+  const next = {
+    ...defaultMdxComponents
+  };
 
-
-var wrapComponentsWithThemeStyles = function wrapComponentsWithThemeStyles(comps) {
-  var next = _extends({}, defaultMdxComponents); // We enrich user's components with the styles from theme.styles.
+  // We enrich user's components with the styles from theme.styles.
   // Example: `components.p` will get the styles from `theme.styles.p` as className.
-
-
-  for (var _i = 0, _Object$keys = Object.keys(comps); _i < _Object$keys.length; _i++) {
-    var key = _Object$keys[_i];
-    var value = comps[key];
+  for (const key of Object.keys(comps)) {
+    const value = comps[key];
     next[key] = typeof value === 'object' ? wrapComponentsWithThemeStyles(value) : wrapComponent(value, key);
   }
-
   return next;
@@ -124,7 +92,7 @@ };
  */
-
 function useThemedStylesWithMdx(outerComponents) {
-  return react.useMemo(function () {
-    return wrapComponentsWithThemeStyles(_extends({}, defaultMdxComponents, outerComponents));
-  }, [outerComponents]);
+  return react.useMemo(() => wrapComponentsWithThemeStyles({
+    ...defaultMdxComponents,
+    ...outerComponents
+  }), [outerComponents]);
 }
@@ -131,0 +99,0 @@

dist/theme-ui-mdx.esm.js

@@ -5,25 +5,11 @@ import { jsx } from '@theme-ui/core';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 // mdx components
-var tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del', // mdx
-'inlineCode', 'thematicBreak', // other
-'div', // theme-ui
+const tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del',
+// mdx
+'inlineCode', 'thematicBreak',
+// other
+'div',
+// theme-ui
 'root'];
-var aliases = {
+const aliases = {
   inlineCode: 'code',
@@ -33,46 +19,31 @@ thematicBreak: 'hr',
 };
+const isAlias = x => x in aliases;
+const alias = n => isAlias(n) ? aliases[n] : n;
 
-var isAlias = function isAlias(x) {
-  return x in aliases;
-};
-
-var alias = function alias(n) {
-  return isAlias(n) ? aliases[n] : n;
-};
 /**
  * Extracts styles from `theme.styles` object
  */
-
-
-var themed = function themed(key) {
-  return function (theme) {
-    return css(get(theme, "styles." + key))(theme);
-  };
-};
-
-var createThemedComponent = function createThemedComponent(name, variant) {
-  var variantStyles = themed(variant);
-
-  var component = function component(props) {
-    var extraStyles = {};
-
+const themed = key => theme => css(get(theme, `styles.${key}`))(theme);
+const createThemedComponent = (name, variant) => {
+  const variantStyles = themed(variant);
+  const component = props => {
+    const extraStyles = {};
     if (name === 'th' || name === 'td') {
-      var _ref = props,
-          align = _ref.align;
+      const {
+        align
+      } = props;
       if (align !== 'char') extraStyles.textAlign = align;
     }
-
-    return jsx(name, _extends({}, props, {
+    return jsx(name, {
+      ...props,
       css: [props.css, variantStyles, extraStyles].filter(Boolean)
-    }));
+    });
   };
-
-  component.displayName = "Themed(" + name + ")";
+  component.displayName = `Themed(${name})`;
   return component;
 };
-
-var defaultMdxComponents = {};
-var Themed = {};
-tags.forEach(function (tag) {
-  var component = createThemedComponent(alias(tag), tag);
+const defaultMdxComponents = {};
+const Themed = {};
+tags.forEach(tag => {
+  const component = createThemedComponent(alias(tag), tag);
   defaultMdxComponents[tag] = component;
@@ -83,25 +54,22 @@ Themed[tag] = component;
 function wrapComponent(value, key) {
-  var component = function component(props) {
-    return jsx(value, _extends({}, props, {
-      css: themed(key)
-    }));
-  };
-
+  const component = props => jsx(value, {
+    ...props,
+    css: themed(key)
+  });
   component.displayName = "MdxComponents('" + key + "')";
   return component;
 }
+
 /** @internal */
+const wrapComponentsWithThemeStyles = comps => {
+  const next = {
+    ...defaultMdxComponents
+  };
 
-
-var wrapComponentsWithThemeStyles = function wrapComponentsWithThemeStyles(comps) {
-  var next = _extends({}, defaultMdxComponents); // We enrich user's components with the styles from theme.styles.
+  // We enrich user's components with the styles from theme.styles.
   // Example: `components.p` will get the styles from `theme.styles.p` as className.
-
-
-  for (var _i = 0, _Object$keys = Object.keys(comps); _i < _Object$keys.length; _i++) {
-    var key = _Object$keys[_i];
-    var value = comps[key];
+  for (const key of Object.keys(comps)) {
+    const value = comps[key];
     next[key] = typeof value === 'object' ? wrapComponentsWithThemeStyles(value) : wrapComponent(value, key);
   }
-
   return next;
@@ -120,9 +88,9 @@ };
  */
-
 function useThemedStylesWithMdx(outerComponents) {
-  return useMemo(function () {
-    return wrapComponentsWithThemeStyles(_extends({}, defaultMdxComponents, outerComponents));
-  }, [outerComponents]);
+  return useMemo(() => wrapComponentsWithThemeStyles({
+    ...defaultMdxComponents,
+    ...outerComponents
+  }), [outerComponents]);
 }
 
 export { Themed, defaultMdxComponents, themed, useThemedStylesWithMdx };

package.json

 {
   "name": "@theme-ui/mdx",
-  "version": "0.15.7",
+  "version": "0.16.0-develop.4",
   "source": "src/index.ts",
@@ -9,19 +9,19 @@ "main": "dist/theme-ui-mdx.cjs.js",
   "dependencies": {
-    "@theme-ui/core": "^0.15.7",
-    "@theme-ui/css": "^0.15.7"
+    "@theme-ui/core": "^0.16.0-develop.4",
+    "@theme-ui/css": "^0.16.0-develop.4"
   },
   "peerDependencies": {
-    "@emotion/react": "^11",
-    "react": ">=18",
-    "@types/mdx": "^2.0.2"
+    "@emotion/react": "^11.11.1",
+    "@types/mdx": "^2.0.2",
+    "react": ">=18"
   },
   "devDependencies": {
-    "@mdx-js/mdx-v2": "npm:@mdx-js/mdx@^2.1.2",
-    "@mdx-js/react-v2": "npm:@mdx-js/react@^2.1.2",
-    "@types/mdx": "^2.0.2",
+    "@emotion/react": "^11.11.1",
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@types/mdx": "^2.0.5",
+    "@types/react": "^18.2.12",
     "react": "^18.1.0",
-    "remark-gfm": "^3.0.1",
-    "@babel/core": "^7",
-    "@types/react": "^18",
-    "@theme-ui/test-utils": "^0.15.7"
+    "remark-gfm-3": "npm:remark-gfm@^3.0.1",
+    "@theme-ui/test-utils": "^0.16.0-develop.4"
   },
@@ -28,0 +28,0 @@ "author": "Brent Jackson",

README.md

@@ -26,3 +26,3 @@ # @theme-ui/mdx
 import { useThemedStylesWithMdx } from '@theme-ui/mdx'
-import { ThemeProvider, Theme } from 'theme-ui'
+import { ThemeUIProvider, Theme } from 'theme-ui'
 
@@ -40,5 +40,5 @@ interface MyProviderProps {
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeUIProvider theme={theme}>
       <MDXProvider components={componentsWithStyles}>{children}</MDXProvider>
-    </ThemeProvider>
+    </ThemeUIProvider>
   )
@@ -45,0 +45,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

24

increased by4.35%

Worsened metrics

Total package byte prevSize

34280

decreased by-5.76%

Lines of code

805

decreased by-5.52%

Dependency changes

• + Added@theme-ui/core@0.16.2(transitive)

• + Added@theme-ui/css@0.16.2(transitive)

• - Removed@theme-ui/core@0.15.7(transitive)

• - Removed@theme-ui/css@0.15.7(transitive)

• Updated@theme-ui/core@^0.16.0-develop.4

• Updated@theme-ui/css@^0.16.0-develop.4