myst-to-react 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myst-to-react",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "main": "./src/index.tsx",
   "types": "./src/index.tsx",
   "files": [
@@ -8,43 +8,55 @@
   ],
   "license": "MIT",
   "scripts": {
+    "compile": "tsc",
     "lint": "eslint \"src/**/*.ts*\" \"src/**/*.tsx\" -c ./.eslintrc.js",
     "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\""
   },
   "dependencies": {
-    "@curvenote/blocks": "*",
+    "@curvenote/blocks": "^1.5.15",
     "@curvenote/connect": "^0.0.6",
     "@curvenote/nbtx": "^0.1.11",
     "@curvenote/ui-providers": "*",
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
     "@popperjs/core": "^2.11.5",
-    "@remix-run/react": "^1.6.3",
     "ansi-to-react": "^6.1.6",
     "buffer": "^6.0.3",
     "classnames": "^2.3.1",
-    "mermaid": "^9.1.6",
+    "mermaid": "^9.1.7",
     "myst-spec": "^0.0.4",
     "myst-to-docx": "*",
     "myst-to-tex": "*",
     "myst-transforms": "*",
     "mystjs": "^0.0.13",
     "nanoid": "^4.0.0",
-    "react-dom": "^17.0.2",
     "react-popper": "^2.3.0",
-    "react-redux": "^8.0.2",
     "react-syntax-highlighter": "^15.5.0",
     "swr": "^1.3.0",
     "unist-util-select": "^4.0.1"
   },
+  "peerDependencies": {
+    "@remix-run/node": "^1.7.2",
+    "@remix-run/react": "^1.7.2",
+    "@types/react": "^16.8 || ^17.0 || ^18.0",
+    "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0",
+    "react-redux": "^7.2.1 || ^8.0.2"
+  },
   "devDependencies": {
+    "@types/js-yaml": "^4.0.5",
     "@types/mermaid": "^8.2.9",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-syntax-highlighter": "^15.5.5",
     "eslint": "^8.21.0",
     "eslint-config-curvenote": "*",
-    "react": "^17.0.2",
     "tsconfig": "*",
     "typescript": "latest"
+  },
+  "overrides": {
+    "ansi-to-react": {
+      "react": "^16.8 || ^17.0 || ^18.0",
+      "react-dom": "^16.8 || ^17.0 || ^18.0"
+    }
   }
 }

package/src/basic.tsx

@@ -165,7 +165,12 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
     );
   },
   table(node, children) {
-    return <table key={node.key}>{children}</table>;
+    // TODO: actually render the tbody on the server if it isn't included here.
+    return (
+      <table key={node.key}>
+        <tbody>{children}</tbody>
+      </table>
+    );
   },
   tableRow(node, children) {
     return <tr key={node.key}>{children}</tr>;
@@ -203,11 +208,18 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
     return <dl key={node.key}>{children}</dl>;
   },
   definitionTerm(node, children) {
-    return (
-      <dt key={node.key}>
-        <strong>{children}</strong>
-      </dt>
-    );
+    let strongChildren: React.ReactNode = children;
+    if (Array.isArray(children)) {
+      const allowedStrongTypes = new Set(['emphasis']);
+      strongChildren = children.map((child, i) => {
+        if (typeof child === 'string') return <strong key={node.key + i}>{child}</strong>;
+        if (allowedStrongTypes.has(child?.type)) return <strong key={node.key + i}>{child}</strong>;
+        return child;
+      });
+    } else if (typeof children === 'string') {
+      strongChildren = <strong key={node.key + '0'}>{children}</strong>;
+    }
+    return <dt key={node.key}>{strongChildren}</dt>;
   },
   definitionDescription(node, children) {
     return <dd key={node.key}>{children}</dd>;

package/src/card.tsx

@@ -7,6 +7,7 @@ import { Link } from '@remix-run/react';
 type CardSpec = {
   type: 'card';
   url?: string;
+  static?: boolean;
 };
 type CardTitleSpec = {
   type: 'cardTitle';
@@ -71,15 +72,17 @@ function getParts(children: React.ReactNode): Parts {
 function ExternalOrInternalLink({
   to,
   className,
+  isStatic,
   prefetch = 'intent',
   children,
 }: {
   to: string;
   className?: string;
+  isStatic?: boolean;
   prefetch?: 'intent' | 'render' | 'none';
   children: React.ReactNode;
 }) {
-  if (to.startsWith('http')) {
+  if (to.startsWith('http') || isStatic) {
     return (
       <a href={to} className={className} target="_blank" rel="noopener noreferrer">
         {children}
@@ -93,7 +96,15 @@ function ExternalOrInternalLink({
   );
 }
 
-function Card({ children, url }: { children: React.ReactNode; url?: string }) {
+function Card({
+  children,
+  url,
+  isStatic,
+}: {
+  children: React.ReactNode;
+  url?: string;
+  isStatic?: boolean;
+}) {
   const parts = getParts(children);
   const link = !!url;
   const sharedStyle =
@@ -102,6 +113,7 @@ function Card({ children, url }: { children: React.ReactNode; url?: string }) {
     return (
       <ExternalOrInternalLink
         to={url}
+        isStatic={isStatic}
         className={classNames(
           sharedStyle,
           'block font-normal no-underline cursor-pointer group',
@@ -125,7 +137,7 @@ function Card({ children, url }: { children: React.ReactNode; url?: string }) {
 
 export const CardRenderer: NodeRenderer<CardSpec> = (node, children) => {
   return (
-    <Card key={node.key} url={node.url}>
+    <Card key={node.key} url={node.url} isStatic={node.static || false}>
       {children}
     </Card>
   );

package/src/cite.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import { useReferences } from '@curvenote/ui-providers';
 import type { NodeRenderer } from './types';
-import { useState } from 'react';
 import { ClickPopover } from './components/ClickPopover';
 import { InlineError } from './inlineError';
 
@@ -36,59 +35,9 @@ export const Cite: NodeRenderer = (node, children) => {
   );
 };
 
-const HIDE_OVER_N_REFERENCES = 5;
-
-export function Bibliography() {
-  const references = useReferences();
-  const { order, data } = references?.cite ?? {};
-  const filtered = order?.filter((l) => l);
-  const [hidden, setHidden] = useState(true);
-  if (!filtered || !data || filtered.length === 0) return null;
-  const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
-  return (
-    <section>
-      {filtered.length > HIDE_OVER_N_REFERENCES && (
-        <button
-          onClick={() => setHidden(!hidden)}
-          className="float-right text-xs p-1 px-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"
-        >
-          {hidden ? 'Show All' : 'Collapse'}
-        </button>
-      )}
-      <header className="text-lg font-semibold text-stone-900 dark:text-white">References</header>
-      <div className="text-xs mb-8 pl-3 text-stone-500 dark:text-stone-300">
-        <ol>
-          {refs.map((label) => {
-            const { html } = data[label];
-            return (
-              <li
-                key={label}
-                className="break-words"
-                id={`cite-${label}`}
-                dangerouslySetInnerHTML={{ __html: html || '' }}
-              />
-            );
-          })}
-          {filtered.length > HIDE_OVER_N_REFERENCES && (
-            <li className="list-none text-center">
-              <button
-                onClick={() => setHidden(!hidden)}
-                className="p-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"
-              >
-                {hidden ? `Show all ${filtered.length} references` : 'Collapse references'}
-              </button>
-            </li>
-          )}
-        </ol>
-      </div>
-    </section>
-  );
-}
-
 const CITE_RENDERERS: Record<string, NodeRenderer> = {
   citeGroup: CiteGroup,
   cite: Cite,
-  bibliography: (node) => <Bibliography key={node.key}></Bibliography>,
 };
 
 export default CITE_RENDERERS;

package/src/index.tsx

@@ -24,8 +24,8 @@ export { MySTRenderer } from './myst';
 import EXT_RENDERERS from './extensions';
 
 export type { NodeRenderer } from './types';
-export { Bibliography } from './cite';
 export { CopyIcon } from './components/CopyIcon';
+export { CodeBlock } from './code';
 
 export const DEFAULT_RENDERERS: Record<string, NodeRenderer> = {
   ...BASIC_RENDERERS,

package/src/myst.tsx

@@ -92,6 +92,7 @@ async function parse(text: string, defaultFrontmatter?: PageFrontmatter) {
     .stringify(mdast as any).result as LatexResult;
   const content = useParse(mdast as any);
   return {
+    frontmatter,
     yaml: mdastString,
     references: { ...references, article: mdast } as References,
     html: htmlString,
@@ -105,6 +106,7 @@ export function MySTRenderer({ value, numbering }: { value: string; numbering: a
   const area = useRef<HTMLTextAreaElement | null>(null);
   const [text, setText] = useState<string>(value.trim());
   const [references, setReferences] = useState<References>({});
+  const [frontmatter, setFrontmatter] = useState<PageFrontmatter>({});
   const [mdastYaml, setYaml] = useState<string>('Loading...');
   const [html, setHtml] = useState<string>('Loading...');
   const [tex, setTex] = useState<string>('Loading...');
@@ -116,6 +118,7 @@ export function MySTRenderer({ value, numbering }: { value: string; numbering: a
     const ref = { current: true };
     parse(text, { numbering }).then((result) => {
       if (!ref.current) return;
+      setFrontmatter(result.frontmatter);
       setYaml(result.yaml);
       setReferences(result.references);
       setHtml(result.html);
@@ -182,7 +185,9 @@ export function MySTRenderer({ value, numbering }: { value: string; numbering: a
           </button>
         </div>
         {previewType === 'DEMO' && (
-          <ReferencesProvider references={references}>{content}</ReferencesProvider>
+          <ReferencesProvider references={references} frontmatter={frontmatter}>
+            {content}
+          </ReferencesProvider>
         )}
         {previewType === 'AST' && <CodeBlock lang="yaml" value={mdastYaml} showCopy={false} />}
         {previewType === 'HTML' && <CodeBlock lang="xml" value={html} showCopy={false} />}