myst-to-react 0.1.17 → 0.1.19

package/src/output/jupyter.tsx

@@ -1,86 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import useWindowSize, { useFetchAnyTruncatedContent } from './hooks';
-import { nanoid } from 'nanoid';
-import { useSelector } from 'react-redux';
-import { host, actions } from '@curvenote/connect';
-import type { MinifiedOutput } from '@curvenote/nbtx';
-import { convertToIOutputs, fetchAndEncodeOutputImages } from '@curvenote/nbtx';
-import { ChevronDoubleDownIcon } from '@heroicons/react/outline';
-import type { State } from './selectors';
-import { selectIFrameHeight, selectIFrameReady } from './selectors';
-
-const PERCENT_OF_WINDOW = 0.9;
-
-export const NativeJupyterOutputs = ({
-  id,
-  outputs,
-}: {
-  id: string;
-  outputs: MinifiedOutput[];
-}) => {
-  const windowSize = useWindowSize();
-
-  const { data, error } = useFetchAnyTruncatedContent(outputs);
-
-  const [loading, setLoading] = useState(true);
-  const [frameHeight, setFrameHeight] = useState(0);
-  const [clamped, setClamped] = useState(false);
-
-  const uid = useMemo(nanoid, []);
-
-  const height = useSelector((state: State) => selectIFrameHeight(state, uid));
-  const rendererReady = useSelector((state: State) => selectIFrameReady(state, uid));
-
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-
-  useEffect(() => {
-    if (iframeRef.current == null || !rendererReady || !data) return;
-    fetchAndEncodeOutputImages(convertToIOutputs(data)).then((out) => {
-      host.commsDispatch(iframeRef.current, actions.connectHostSendContent(uid, out));
-    });
-  }, [id, iframeRef.current, rendererReady]);
-
-  useEffect(() => {
-    if (height == null) return;
-    if (height > PERCENT_OF_WINDOW * windowSize.height) {
-      setFrameHeight(PERCENT_OF_WINDOW * windowSize.height);
-      setClamped(true);
-    } else {
-      setFrameHeight(height + 25);
-      setClamped(false);
-    }
-    setLoading(false);
-  }, [height]);
-
-  if (error) {
-    return <div className="text-red-500">Error rendering output: {error.message}</div>;
-  }
-
-  return (
-    <div>
-      {loading && <div className="p-2.5">Loading...</div>}
-      <iframe
-        ref={iframeRef}
-        id={uid}
-        name={uid}
-        title={uid}
-        src="https://next.curvenote.run"
-        width={'100%'}
-        height={frameHeight}
-        sandbox="allow-scripts"
-      ></iframe>
-      {clamped && (
-        <div
-          className="cursor-pointer p-1 pb-2 hover:bg-gray-50 dark:hover:bg-gray-700 text-center text-gray-500 hover:text-gray-600 dark:text-gray-200 dark:hover:text-gray-50"
-          title="Expand"
-          onClick={() => {
-            setFrameHeight(height ?? 0);
-            setClamped(false);
-          }}
-        >
-          <ChevronDoubleDownIcon className="w-5 h-5 inline"></ChevronDoubleDownIcon>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/output/output.tsx

@@ -1,79 +0,0 @@
-import type { GenericNode } from 'mystjs';
-import { KnownCellOutputMimeTypes } from '@curvenote/blocks';
-import type { MinifiedMimeOutput, MinifiedOutput } from '@curvenote/nbtx/dist/minify/types';
-import classNames from 'classnames';
-import { SafeOutputs } from './safe';
-import { NativeJupyterOutputs as JupyterOutputs } from './jupyter';
-import { OutputBlock } from './outputBlock';
-
-const DIRECT_OUTPUT_TYPES = new Set(['stream', 'error']);
-
-const DIRECT_MIME_TYPES = new Set([
-  KnownCellOutputMimeTypes.TextPlain,
-  KnownCellOutputMimeTypes.ImagePng,
-  KnownCellOutputMimeTypes.ImageGif,
-  KnownCellOutputMimeTypes.ImageJpeg,
-  KnownCellOutputMimeTypes.ImageBmp,
-]) as Set<string>;
-
-export function allOutputsAreSafe(
-  outputs: MinifiedOutput[],
-  directOutputTypes: Set<string>,
-  directMimeTypes: Set<string>,
-) {
-  return outputs.reduce((flag, output) => {
-    if (directOutputTypes.has(output.output_type)) return true;
-    const data = (output as MinifiedMimeOutput).data;
-    const mimetypes = data ? Object.keys(data) : [];
-    const safe =
-      'data' in output &&
-      Boolean(output.data) &&
-      mimetypes.every((mimetype) => directMimeTypes.has(mimetype));
-    return flag && safe;
-  }, true);
-}
-
-function listMimetypes(outputs: MinifiedOutput[], directOutputTypes: Set<string>) {
-  return outputs.map((output) => {
-    if (directOutputTypes.has(output.output_type)) return [output.output_type];
-    const data = (output as MinifiedMimeOutput).data;
-    const mimetypes = data ? Object.keys(data) : [];
-    return [output.output_type, mimetypes];
-  });
-}
-
-export function anyErrors(outputs: MinifiedOutput[]) {
-  return outputs.reduce((flag, output) => flag || output.output_type === 'error', false);
-}
-
-export function Output(node: GenericNode) {
-  const outputs: MinifiedOutput[] = node.data;
-  const allSafe = allOutputsAreSafe(outputs, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES);
-  const hasError = anyErrors(outputs);
-
-  let component;
-  if (allSafe) {
-    component = <SafeOutputs keyStub={node.key} outputs={outputs} />;
-  } else {
-    // Hide the iframe if rendering on the server
-    component =
-      typeof document === 'undefined' ? null : <JupyterOutputs id={node.key} outputs={outputs} />;
-  }
-
-  return (
-    <figure
-      suppressHydrationWarning={!allSafe}
-      key={node.key}
-      id={node.identifier || undefined}
-      className={classNames('max-w-full overflow-auto m-0', {
-        'text-left': !node.align || node.align === 'left',
-        'text-center': node.align === 'center',
-        'text-right': node.align === 'right',
-      })}
-    >
-      <OutputBlock allSafe={allSafe} hasError={hasError}>
-        {component}
-      </OutputBlock>
-    </figure>
-  );
-}

package/src/output/outputBlock.tsx

@@ -1,21 +0,0 @@
-import classNames from 'classnames';
-
-type Props = {
-  children?: React.ReactNode;
-  allSafe?: boolean;
-  hasError?: boolean;
-  className?: string;
-};
-
-export function OutputBlock(props: Props) {
-  const { children, allSafe, className } = props;
-
-  return (
-    <div
-      suppressHydrationWarning={!allSafe}
-      className={classNames('relative group not-prose overflow-auto mb-4 pl-0.5', className)}
-    >
-      {children}
-    </div>
-  );
-}

package/src/output/safe.tsx

@@ -1,84 +0,0 @@
-import { KnownCellOutputMimeTypes } from '@curvenote/blocks/dist/blocks/types/jupyter';
-import type {
-  MinifiedMimeBundle,
-  MinifiedMimePayload,
-  MinifiedOutput,
-} from '@curvenote/nbtx/dist/minify/types';
-import Stream from './stream';
-import Error from './error';
-import Ansi from 'ansi-to-react';
-
-/**
- * https://jupyterbook.org/content/code-outputs.html#render-priority
- *
- * nb_render_priority:
-      html:
-      - "application/vnd.jupyter.widget-view+json"
-      - "application/javascript"
-      - "text/html"
-      - "image/svg+xml"
-      - "image/png"
-      - "image/jpeg"
-      - "text/markdown"
-      - "text/latex"
-      - "text/plain"
- */
-
-const RENDER_PRIORITY = [
-  KnownCellOutputMimeTypes.ImagePng,
-  KnownCellOutputMimeTypes.ImageJpeg,
-  KnownCellOutputMimeTypes.ImageGif,
-  KnownCellOutputMimeTypes.ImageBmp,
-];
-
-function findSafeMimeOutputs(output: MinifiedOutput): {
-  image?: MinifiedMimePayload;
-  text?: MinifiedMimePayload;
-} {
-  const data: MinifiedMimeBundle = output.data as MinifiedMimeBundle;
-  const image = RENDER_PRIORITY.reduce((acc: MinifiedMimePayload | undefined, mimetype) => {
-    if (acc) return acc;
-    if (data && data[mimetype]) return data[mimetype];
-    return undefined;
-  }, undefined);
-  const text = data && data['text/plain'];
-  return { image, text };
-}
-
-function OutputImage({ image, text }: { image: MinifiedMimePayload; text?: MinifiedMimePayload }) {
-  return <img src={image?.path} alt={text?.content ?? 'Image produced in Jupyter'} />;
-}
-
-function SafeOutput({ output }: { output: MinifiedOutput }) {
-  switch (output.output_type) {
-    case 'stream':
-      return <Stream output={output} />;
-    case 'error':
-      return <Error output={output} />;
-    case 'display_data':
-    case 'execute_result':
-    case 'update_display_data': {
-      const { image, text } = findSafeMimeOutputs(output);
-      if (!image && !text) return null;
-      if (image) return <OutputImage image={image} text={text} />;
-      if (text)
-        return (
-          <div>
-            <Ansi>{text.content}</Ansi>
-          </div>
-        );
-      return null;
-    }
-    default:
-      console.warn(`Unknown output_type ${output['output_type']}`);
-      return null;
-  }
-}
-
-export function SafeOutputs({ keyStub, outputs }: { keyStub: string; outputs: MinifiedOutput[] }) {
-  // TODO better key - add keys during content creation?
-  const components = outputs.map((output, idx) => (
-    <SafeOutput key={`${keyStub}-${idx}`} output={output} />
-  ));
-  return <>{components}</>;
-}

package/src/output/selectors.ts

@@ -1,15 +0,0 @@
-import type { HostState } from '@curvenote/connect';
-import { host } from '@curvenote/connect';
-
-export interface State {
-  app: HostState;
-}
-
-export const selectIFrameHeight = (state: State, id: string) =>
-  host.selectors.selectIFrameSize(state.app, id);
-
-export const selectIFrameReady = (state: State, id: string) =>
-  host.selectors.selectIFrameReady(state.app, id);
-
-export const selectIFrameSendFailed = (state: State, id: string) =>
-  host.selectors.selectIFrameFailed(state.app, id);

package/src/output/stream.tsx

@@ -1,18 +0,0 @@
-import Ansi from 'ansi-to-react';
-import { ensureString } from '@curvenote/blocks';
-import type { MinifiedStreamOutput } from '@curvenote/nbtx';
-import { MaybeLongContent } from './components';
-
-export default function Stream({ output }: { output: MinifiedStreamOutput }) {
-  return (
-    <MaybeLongContent
-      content={ensureString(output.text)}
-      path={output.path}
-      render={(content?: string) => (
-        <pre className="text-sm font-thin font-system">
-          <Ansi>{content ?? ''}</Ansi>
-        </pre>
-      )}
-    />
-  );
-}

package/src/reactive.tsx

@@ -1,64 +0,0 @@
-import type { GenericNode } from 'mystjs';
-import { createElement as e } from 'react';
-
-export const RVar = (node: GenericNode) => {
-  return e('r-var', {
-    key: node.key,
-    name: node.name,
-    value: node.value,
-    ':value': node.valueFunction,
-    format: node.format,
-  });
-};
-
-export const RDisplay = (node: GenericNode) => {
-  return e('r-display', {
-    key: node.key,
-    name: node.name,
-    value: node.value,
-    ':value': node.valueFunction,
-    format: node.format,
-  });
-};
-
-export const RDynamic = (node: GenericNode) => {
-  return e('r-dynamic', {
-    key: node.key,
-    name: node.name,
-    value: node.value,
-    ':value': node.valueFunction,
-    max: node.max,
-    ':max': node.maxFunction,
-    min: node.min,
-    ':min': node.minFunction,
-    step: node.step,
-    ':step': node.stepFunction,
-    ':change': node.changeFunction,
-    format: node.format,
-  });
-};
-
-export const RRange = (node: GenericNode) => {
-  return e('r-range', {
-    key: node.key,
-    name: node.name,
-    value: node.value,
-    ':value': node.valueFunction,
-    max: node.max,
-    ':max': node.maxFunction,
-    min: node.min,
-    ':min': node.minFunction,
-    step: node.step,
-    ':step': node.stepFunction,
-    ':change': node.changeFunction,
-  });
-};
-
-const REACTIVE_RENDERERS = {
-  'r:var': RVar,
-  'r:display': RDisplay,
-  'r:dynamic': RDynamic,
-  'r:range': RRange,
-};
-
-export default REACTIVE_RENDERERS;

package/src/tabs.tsx

@@ -1,63 +0,0 @@
-import { useIsTabOpen, useTabSet } from '@curvenote/ui-providers';
-import classNames from 'classnames';
-import type { GenericNode } from 'mystjs';
-import { useEffect } from 'react';
-import { selectAll } from 'unist-util-select';
-import type { NodeRenderer } from './types';
-
-interface TabItem extends GenericNode {
-  key: string;
-  title: string;
-  sync?: string;
-}
-
-export const TabSetRenderer: NodeRenderer = (node, children) => {
-  const items = selectAll('tabItem', node) as TabItem[];
-  const keys = items.map((item) => item.sync || item.key);
-  const { onClick, active } = useTabSet(keys);
-  useEffect(() => {
-    onClick(items[0]?.sync || items[0]?.key);
-  }, []);
-  return (
-    <div key={node.key} className="">
-      <div className="flex flex-row border-b border-b-gray-100 overflow-x-auto">
-        {items.map((item) => {
-          const key = item.sync || item.key;
-          return (
-            <div
-              key={item.key}
-              className={classNames('flex-none px-3 py-1 font-semibold cursor-pointer', {
-                'text-blue-600 border-b-2 border-b-blue-600 dark:border-b-white dark:text-white':
-                  active[key],
-                'text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100':
-                  !active[key],
-              })}
-              onClick={() => onClick(key)}
-            >
-              {item.title}
-            </div>
-          );
-        })}
-      </div>
-      <div className="shadow flex">
-        <div className="w-full px-6">{children}</div>
-      </div>
-    </div>
-  );
-};
-
-export const TabItemRenderer: NodeRenderer<TabItem> = (node, children) => {
-  const open = useIsTabOpen(node.sync || node.key);
-  return (
-    <div key={node.key} className={classNames({ hidden: !open })}>
-      {children}
-    </div>
-  );
-};
-
-const TAB_RENDERERS: Record<string, NodeRenderer> = {
-  tabSet: TabSetRenderer,
-  tabItem: TabItemRenderer,
-};
-
-export default TAB_RENDERERS;

package/src/types.ts

@@ -1,6 +0,0 @@
-import type React from 'react';
-
-export type NodeRenderer<T = any> = (
-  node: T & { type: string; key: string; html_id?: string },
-  children?: React.ReactNode,
-) => React.ReactNode;