myst-to-react 0.1.17 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myst-to-react",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "main": "./src/index.tsx",
   "types": "./src/index.tsx",
   "files": [
@@ -8,18 +8,18 @@
   ],
   "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",
@@ -30,21 +30,33 @@
     "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>;

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} />}