@readme/markdown 6.75.0-beta.4 → 6.75.0-beta.40

package/dist/processor/compile/callout.d.ts

@@ -0,0 +1,3 @@
+import { Callout } from '../../types';
+declare const callout: (node: Callout, _: any, state: any, info: any) => any;
+export default callout;

package/dist/processor/compile/code-tabs.d.ts

@@ -0,0 +1,3 @@
+import { CodeTabs } from '../../types';
+declare const codeTabs: (node: CodeTabs, _: any, state: any, info: any) => any;
+export default codeTabs;

package/dist/processor/compile/compatibility.d.ts

@@ -0,0 +1,18 @@
+import { Html } from 'mdast';
+import { NodeTypes } from '../../enums';
+type CompatNodes = {
+    type: NodeTypes.variable;
+    text: string;
+} | {
+    type: NodeTypes.glossary;
+    data: {
+        hProperties: {
+            term: string;
+        };
+    };
+} | {
+    type: NodeTypes.reusableContent;
+    tag: string;
+} | Html;
+declare const compatibility: (node: CompatNodes) => string;
+export default compatibility;

package/dist/processor/compile/embed.d.ts

@@ -0,0 +1,3 @@
+import type { Embed } from "types";
+declare const embed: (node: Embed) => string;
+export default embed;

package/dist/processor/compile/gemoji.d.ts

@@ -0,0 +1,3 @@
+import { Gemoji } from '../../types';
+declare const gemoji: (node: Gemoji) => string;
+export default gemoji;

package/dist/processor/compile/html-block.d.ts

@@ -0,0 +1,3 @@
+import { HTMLBlock } from '../../types';
+declare const htmlBlock: (node: HTMLBlock) => string;
+export default htmlBlock;

package/dist/processor/compile/image.d.ts

@@ -0,0 +1,3 @@
+import type { Image } from "mdast";
+declare const image: (node: Image) => string;
+export default image;

package/dist/processor/compile/index.d.ts

@@ -0,0 +1,2 @@
+declare function compilers(): void;
+export default compilers;

package/dist/processor/transform/callouts.d.ts

@@ -0,0 +1,2 @@
+declare const calloutTransformer: () => (tree: any) => void;
+export default calloutTransformer;

package/dist/processor/transform/code-tabs.d.ts

@@ -0,0 +1,2 @@
+declare const codeTabsTransformer: () => (tree: any) => any;
+export default codeTabsTransformer;

package/dist/processor/transform/embeds.d.ts

@@ -0,0 +1,2 @@
+declare const embedTransformer: () => (tree: any) => void;
+export default embedTransformer;

package/dist/processor/transform/gemoji+.d.ts

@@ -0,0 +1,3 @@
+import { Root } from 'mdast';
+declare const gemojiTransformer: () => (tree: Root) => Root;
+export default gemojiTransformer;

package/dist/processor/transform/index.d.ts

@@ -0,0 +1,4 @@
+import readmeComponentsTransformer from './readme-components';
+export { readmeComponentsTransformer };
+declare const _default: (() => (tree: any) => void)[];
+export default _default;

package/dist/processor/transform/readme-components.d.ts

@@ -0,0 +1,6 @@
+import { Transform } from 'mdast-util-from-markdown';
+interface Options {
+    components: Record<string, string>;
+}
+declare const readmeComponents: (opts: Options) => () => Transform;
+export default readmeComponents;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "6.75.0-beta.4",
+  "version": "6.75.0-beta.40",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",
@@ -12,43 +12,54 @@
     "dist"
   ],
   "scripts": {
-    "build": "webpack --mode production",
+    "build": "webpack --mode production && npm run build-types",
+    "build-types": "npx tsc --declaration --emitDeclarationOnly --declarationDir ./dist --skipLibCheck",
     "lint": "eslint . --ext .jsx --ext .js --ext .ts --ext .tsx",
     "release": "npx semantic-release",
     "release.dry": "npx semantic-release --dry-run",
-    "test": "true # jest --coverage --runInBand",
-    "test.watch": "jest --watch --coverage=false",
+    "start": "webpack serve --open --mode development --config ./webpack.dev.js",
+    "test": "vitest",
+    "test.ui": "vitest --ui",
+    "test.browser": "jest",
     "watch": "webpack --watch --progress --mode development"
   },
   "dependencies": {
     "@mdx-js/mdx": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
-    "@readme/emojis": "^5.0.0",
-    "@readme/syntax-highlighter": "^12.0.2",
+    "@readme/emojis": "^5.1.0",
+    "@readme/syntax-highlighter": "^13.0.0",
     "copy-to-clipboard": "^3.3.2",
+    "core-js": "^3.36.1",
     "debug": "^4.3.4",
     "emoji-regex": "^10.2.1",
+    "gemoji": "^8.1.0",
     "hast-util-sanitize": "^4.0.0",
     "lodash.escape": "^4.0.1",
     "lodash.kebabcase": "^4.1.1",
+    "mdast-util-find-and-replace": "^3.0.1",
     "mdast-util-toc": "^5.1.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "rehype-sanitize": "^4.0.0",
-    "remark": "^14.0.2",
+    "remark": "^15.0.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.0",
-    "remark-parse": "^10.0.2",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.0",
+    "remark-stringify": "^11.0.0",
     "trim": "^1.0.1",
     "unified": "^8.4.0",
     "unist-util-flatmap": "^1.0.0",
-    "unist-util-visit": "^4.1.1"
+    "unist-util-visit": "^5.0.0",
+    "util": "^0.12.5"
   },
   "peerDependencies": {
-    "@readme/variable": "^15.1.0",
+    "@mdx-js/react": "^3.0.0",
+    "@readme/variable": "^16.1.0",
     "@tippyjs/react": "^4.1.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "16.x || 17.x || 18.x",
+    "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",
@@ -57,6 +68,7 @@
     "@babel/plugin-proposal-export-default-from": "^7.23.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.21.4",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
@@ -64,37 +76,44 @@
     "@commitlint/cli": "^17.5.1",
     "@commitlint/config-angular": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
-    "@hot-loader/react-dom": "^16.14.0",
-    "@readme/eslint-config": "^10.5.2",
+    "@readme/eslint-config": "^14.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/mdast": "^4.0.3",
+    "@types/mdx": "^2.0.12",
+    "@types/unist": "^3.0.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^1.6.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "browserify-fs": "^1.0.0",
     "codemirror": "^5.54.0",
-    "core-js": "^2.6.12",
     "css-loader": "^6.7.3",
     "eslint": "^8.37.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-environment-puppeteer": "^8.0.6",
-    "jest-image-snapshot": "^6.1.0",
+    "jest-image-snapshot": "^6.4.0",
     "jest-puppeteer": "^8.0.6",
     "mini-css-extract-plugin": "^2.7.5",
     "node-sass": "^8.0.0",
-    "prettier": "^2.8.7",
+    "prettier": "^3.2.5",
     "puppeteer": "^19.8.3",
-    "react-hot-loader": "^4.13.1",
+    "react-router-dom": "^6.22.3",
     "sass-loader": "^13.2.2",
     "semantic-release": "^22.0.12",
     "stream-browserify": "^3.0.0",
     "string.prototype.trimend": "^1.0.6",
     "terser-webpack-plugin": "^5.3.7",
     "ts-loader": "^9.4.2",
-    "typescript": "^5.0.3",
+    "typescript": "^5.4.5",
+    "unist-util-map": "^4.0.0",
+    "vitest": "^1.4.0",
     "webpack": "^5.56.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.13.2",

package/styles/components.scss

@@ -6,4 +6,4 @@
 @import '../components/Callout/style';
 @import '../components/Heading/style';
 @import '../components/Embed/style';
-@import '../components/GlossaryItem/style';
+@import '../components/Glossary/style';

package/components/Callout/index.jsx

@@ -1,42 +0,0 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const Callout = props => {
-  const { attributes, theme, icon } = props;
-  const [title, ...content] = !props.title ? [null, props.children] : props.children;
-
-  return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
-      <h3 className={`callout-heading${title ? '' : ' empty'}`}>
-        <span className="callout-icon">{icon}</span>
-        {title}
-      </h3>
-      {content}
-    </blockquote>
-  );
-};
-
-Callout.propTypes = {
-  attributes: PropTypes.shape({}),
-  calloutStyle: PropTypes.string,
-  children: PropTypes.arrayOf(PropTypes.any).isRequired,
-  icon: PropTypes.string,
-  node: PropTypes.shape(),
-  theme: PropTypes.string,
-  title: PropTypes.string,
-};
-
-Callout.defaultProps = {
-  attributes: null,
-  calloutStyle: 'info',
-  node: null,
-};
-
-Callout.sanitize = sanitizeSchema => {
-  sanitizeSchema.attributes['rdme-callout'] = ['icon', 'theme', 'title'];
-
-  return sanitizeSchema;
-};
-
-module.exports = Callout;

package/components/Code/index.jsx

@@ -1,101 +0,0 @@
-const copy = require('copy-to-clipboard');
-const PropTypes = require('prop-types');
-const React = require('react');
-
-// Only load CodeMirror in the browser, for SSR
-// apps. Necessary because of people like this:
-// https://github.com/codemirror/CodeMirror/issues/3701#issuecomment-164904534
-let syntaxHighlighter;
-let canonicalLanguage = () => {};
-if (typeof window !== 'undefined') {
-  // eslint-disable-next-line global-require
-  syntaxHighlighter = require('@readme/syntax-highlighter').default;
-  // eslint-disable-next-line global-require
-  ({ canonical: canonicalLanguage } = require('@readme/syntax-highlighter'));
-}
-
-function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '' }) {
-  const copyClass = `${rootClass}_copied`;
-  const button = React.createRef();
-  /* istanbul ignore next */
-  const copier = () => {
-    const code = codeRef.current.textContent;
-
-    if (copy(code)) {
-      const $el = button.current;
-      $el.classList.add(copyClass);
-      setTimeout(() => $el.classList.remove(copyClass), 1500);
-    }
-  };
-  return <button ref={button} aria-label="Copy Code" className={`${rootClass} ${className}`} onClick={copier} />;
-}
-
-CopyCode.propTypes = {
-  className: PropTypes.string,
-  codeRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(React.Element) })])
-    .isRequired,
-  rootClass: PropTypes.string,
-};
-
-function Code(props) {
-  const { children, className, copyButtons, lang, meta, theme } = props;
-
-  const langClass = className.search(/lang(?:uage)?-\w+/) >= 0 ? className.match(/\s?lang(?:uage)?-(\w+)/)[1] : '';
-  const language = canonicalLanguage(lang) || langClass;
-
-  const codeRef = React.createRef();
-
-  const codeOpts = {
-    inline: !lang,
-    tokenizeVariables: true,
-    dark: theme === 'dark',
-  };
-
-  const codeContent =
-    syntaxHighlighter && children ? syntaxHighlighter(children[0], language, codeOpts) : children?.[0] || '';
-
-  return (
-    <React.Fragment>
-      {copyButtons && <CopyCode className="fa" codeRef={codeRef} />}
-      <code
-        ref={codeRef}
-        className={['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' ')}
-        data-lang={language}
-        name={meta}
-        suppressHydrationWarning={true}
-      >
-        {codeContent}
-      </code>
-    </React.Fragment>
-  );
-}
-
-function CreateCode({ copyButtons, theme }) {
-  // eslint-disable-next-line react/display-name
-  return props => <Code {...props} copyButtons={copyButtons} theme={theme} />;
-}
-
-Code.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.string),
-  className: PropTypes.string,
-  copyButtons: PropTypes.bool,
-  lang: PropTypes.string,
-  meta: PropTypes.string,
-  theme: PropTypes.string,
-};
-
-Code.defaultProps = {
-  className: '',
-  copyButtons: true,
-  lang: '',
-  meta: '',
-};
-
-CreateCode.sanitize = sanitizeSchema => {
-  // This is for code blocks class name
-  sanitizeSchema.attributes.code = ['className', 'lang', 'meta', 'value'];
-
-  return sanitizeSchema;
-};
-
-module.exports = CreateCode;

package/components/Embed/index.jsx

@@ -1,89 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading, jsx-a11y/iframe-has-title */
-const propTypes = require('prop-types');
-const React = require('react');
-
-const Favicon = ({ src, alt = 'favicon', ...attr }) => <img {...attr} alt={alt} height="14" src={src} width="14" />;
-Favicon.propTypes = {
-  alt: propTypes.string,
-  src: propTypes.string,
-};
-
-class Embed extends React.Component {
-  render() {
-    const { lazy = true, provider, url, title, html, iframe, image, favicon, ...attrs } = this.props;
-
-    if (!url) {
-      return <div />;
-    }
-
-    if ('iframe' in this.props) {
-      return <iframe {...attrs} border="none" src={url} style={{ border: 'none', display: 'flex', margin: 'auto' }} />;
-    }
-
-    const classes = ['embed', image && 'embed_hasImg'];
-    return (
-      <div className={classes.join(' ')}>
-        {html ? (
-          <div className="embed-media" dangerouslySetInnerHTML={{ __html: html }}></div>
-        ) : (
-          <a className="embed-link" href={url} rel="noopener noreferrer" target="_blank">
-            {!image || <img alt={title} className="embed-img" loading={lazy ? 'lazy' : ''} src={image} />}
-            {title ? (
-              <div className="embed-body">
-                {!favicon || (
-                  <Favicon
-                    alt={provider}
-                    className="embed-favicon"
-                    loading={lazy ? 'lazy' : ''}
-                    src={favicon}
-                    style={{ float: 'left' }}
-                  />
-                )}
-                {provider && (
-                  <small className="embed-provider">
-                    {provider.search(/^@{1}/) < 0 ? (
-                      provider
-                    ) : (
-                      <code style={{ fontFamily: 'var(--md-code-font, monospace)' }}>{url}</code>
-                    )}
-                  </small>
-                )}
-                <div className="embed-title">{title}</div>
-              </div>
-            ) : (
-              <div className="embed-body">
-                <b>View</b>: <span className="embed-body-url">{url}</span>
-              </div>
-            )}
-          </a>
-        )}
-      </div>
-    );
-  }
-}
-
-Embed.propTypes = {
-  children: propTypes.oneOfType([propTypes.string, propTypes.array, propTypes.shape({}), propTypes.element]),
-  favicon: propTypes.string,
-  height: propTypes.string,
-  html: propTypes.string,
-  iframe: propTypes.any,
-  image: propTypes.string,
-  lazy: propTypes.bool,
-  provider: propTypes.string,
-  title: propTypes.string,
-  url: propTypes.oneOfType([propTypes.string, propTypes.shape({})]),
-  width: propTypes.string,
-};
-Embed.defaultProps = {
-  height: '300px',
-  width: '100%',
-};
-
-const CreateEmbed =
-  ({ lazyImages }) =>
-  // eslint-disable-next-line react/display-name
-  props =>
-    <Embed {...props} lazy={lazyImages} />;
-
-module.exports = CreateEmbed;

package/components/GlossaryItem/index.jsx

@@ -1,44 +0,0 @@
-const Tooltip = require('@tippyjs/react').default;
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const GlossaryContext = require('../../contexts/GlossaryTerms');
-
-// https://github.com/readmeio/api-explorer/blob/0dedafcf71102feedaa4145040d3f57d79d95752/packages/api-explorer/src/lib/replace-vars.js#L8
-function GlossaryItem({ term, terms }) {
-  const foundTerm = terms.find(i => term.toLowerCase() === i.term.toLowerCase());
-
-  if (!foundTerm) return <span>{term}</span>;
-
-  return (
-    <Tooltip
-      content={
-        <div className="GlossaryItem-tooltip-content">
-          <strong className="GlossaryItem-term">{foundTerm.term}</strong> - {foundTerm.definition}
-        </div>
-      }
-      offset={[-5, 5]}
-      placement="bottom-start"
-    >
-      <span className="GlossaryItem-trigger">{term}</span>
-    </Tooltip>
-  );
-}
-
-GlossaryItem.propTypes = {
-  term: PropTypes.string.isRequired,
-  terms: PropTypes.arrayOf(
-    PropTypes.shape({
-      definition: PropTypes.string.isRequired,
-      term: PropTypes.string.isRequired,
-    })
-  ).isRequired,
-};
-
-// eslint-disable-next-line react/display-name
-module.exports = props => (
-  <GlossaryContext.Consumer>{terms => terms && <GlossaryItem {...props} terms={terms} />}</GlossaryContext.Consumer>
-);
-
-module.exports.GlossaryItem = GlossaryItem;
-module.exports.GlossaryContext = GlossaryContext;

package/components/GlossaryItem/style.scss

@@ -1,60 +0,0 @@
-.GlossaryItem {
-  &-trigger {
-    border-bottom: 1px solid #737c83;
-    border-style: dotted;
-    border-top: none;
-    border-left: none;
-    border-right: none;
-    cursor: pointer;
-  }
-
-  &-tooltip-content {
-    --GlossaryItem-bg: var(--color-bg-page, var(--white));
-    --GlossaryItem-color: var(--color-text-default, var(--gray20));
-    --GlossaryItem-shadow: var(--box-shadow-menu-light, 0 5px 10px rgba(0, 0, 0, .05),
-      0 2px 6px rgba(0, 0, 0, .025),
-      0 1px 3px rgba(0, 0, 0, .025));
-
-    /* what the dark-mode mixin does in the readme project */
-    [data-color-mode='dark'] & {
-      --GlossaryItem-bg: var(--gray15);
-      --GlossaryItem-color: var(--color-text-default, var(--white));
-      --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
-        0 2px 6px rgba(0, 0, 0, 0.025),
-        0 5px 10px rgba(0, 0, 0, 0.05))
-    }
-
-    @media (prefers-color-scheme: dark) {
-      [data-color-mode='auto'] & {
-        --GlossaryItem-bg: var(--Tooltip-bg, var(--gray0));
-        --GlossaryItem-color: var(--color-text-default, var(--white));
-        --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
-          0 2px 6px rgba(0, 0, 0, 0.025),
-          0 5px 10px rgba(0, 0, 0, 0.05))
-      }
-    }
-
-    background-color: var(--GlossaryItem-bg);
-    border: 1px solid #{var(--color-border-default, rgba(black, 0.1))};
-    border-radius: var(--border-radius);
-    box-shadow: var(--GlossaryItem-shadow);
-    color: var(--GlossaryItem-color);
-    font-size: 15px;
-    font-weight: 400;
-    line-height: 1.5;
-    padding: 15px;
-    text-align: left;
-    width: 350px;
-  }
-
-  &-term {
-    font-style: italic;
-  }
-}
-
-.tippy-box {
-  // needed for tippy's default animation
-  &[data-animation='fade'][data-state='hidden'] {
-    opacity: 0;
-  }
-}

package/components/HTMLBlock/index.jsx

@@ -1,69 +0,0 @@
-/* eslint-disable no-eval
- */
-const escape = require('lodash.escape');
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const MATCH_SCRIPT_TAGS = /<script\b[^>]*>([\s\S]*?)<\/script *>\n?/gim;
-
-const extractScripts = (html = '') => {
-  const scripts = [];
-  let match;
-  while ((match = MATCH_SCRIPT_TAGS.exec(html)) !== null) {
-    scripts.push(match[1]);
-  }
-  const cleaned = html.replace(MATCH_SCRIPT_TAGS, '');
-  return [cleaned, () => scripts.map(js => window.eval(js))];
-};
-
-class HTMLBlock extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    [this.html, this.exec] = extractScripts(this.props.html);
-  }
-
-  componentDidMount() {
-    const { runScripts } = this.props;
-    if (typeof window !== 'undefined' && (runScripts === '' || runScripts)) this.exec();
-  }
-
-  render() {
-    const { html, safeMode } = this.props;
-
-    if (safeMode) {
-      return (
-        <pre className="html-unsafe">
-          <code dangerouslySetInnerHTML={{ __html: escape(html) }} />
-        </pre>
-      );
-    }
-
-    return <div className="rdmd-html" dangerouslySetInnerHTML={{ __html: this.html }} />;
-  }
-}
-
-HTMLBlock.defaultProps = {
-  runScripts: false,
-  safeMode: false,
-};
-
-HTMLBlock.propTypes = {
-  html: PropTypes.string,
-  runScripts: PropTypes.any,
-  safeMode: PropTypes.bool,
-};
-
-const CreateHtmlBlock =
-  ({ safeMode }) =>
-  // eslint-disable-next-line react/display-name
-  props =>
-    <HTMLBlock {...props} safeMode={safeMode} />;
-
-CreateHtmlBlock.sanitize = schema => {
-  schema.tagNames.push('html-block');
-  schema.attributes['html-block'] = ['html', 'runScripts'];
-
-  return schema;
-};
-
-module.exports = CreateHtmlBlock;