myst-to-react 0.1.14

package/src/myst.tsx

@@ -0,0 +1,185 @@
+import { useParse } from '.';
+import { VFile } from 'vfile';
+import type { LatexResult } from 'myst-to-tex'; // Only import the type!!
+import type { VFileMessage } from 'vfile-message';
+import yaml from 'js-yaml';
+import type { References } from '@curvenote/site-common';
+import type { PageFrontmatter } from 'myst-frontmatter';
+import type { NodeRenderer } from './types';
+import React, { useEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
+import ExclamationIcon from '@heroicons/react/outline/ExclamationIcon';
+import ExclamationCircleIcon from '@heroicons/react/outline/ExclamationCircleIcon';
+import InformationCircleIcon from '@heroicons/react/outline/InformationCircleIcon';
+import { CopyIcon } from './components/CopyIcon';
+import { CodeBlock } from './code';
+import { ReferencesProvider } from '@curvenote/ui-providers';
+
+async function parse(text: string, defaultFrontmatter?: PageFrontmatter) {
+  // Ensure that any imports from myst are async and scoped to this function
+  const { MyST, unified, visit } = await import('mystjs');
+  const {
+    mathPlugin,
+    footnotesPlugin,
+    keysPlugin,
+    basicTransformationsPlugin,
+    enumerateTargetsPlugin,
+    resolveReferencesPlugin,
+    WikiTransformer,
+    DOITransformer,
+    RRIDTransformer,
+    linksPlugin,
+    ReferenceState,
+    getFrontmatter,
+  } = await import('myst-transforms');
+  const { default: mystToTex } = await import('myst-to-tex');
+  const myst = new MyST();
+  const mdast = myst.parse(text);
+  const linkTransforms = [new WikiTransformer(), new DOITransformer(), new RRIDTransformer()];
+  // For the mdast that we show, duplicate, strip positions and dump to yaml
+  // Also run some of the transforms, like the links
+  const mdastPre = JSON.parse(JSON.stringify(mdast));
+  unified().use(linksPlugin, { transformers: linkTransforms }).runSync(mdastPre);
+  visit(mdastPre, (n) => delete n.position);
+  const mdastString = yaml.dump(mdastPre);
+  const htmlString = myst.renderMdast(mdastPre);
+  const file = new VFile();
+  const references = {
+    cite: { order: [], data: {} },
+    footnotes: {},
+  };
+  const { frontmatter } = getFrontmatter(mdast, { removeYaml: true, removeHeading: false });
+  const state = new ReferenceState({
+    numbering: frontmatter.numbering ?? defaultFrontmatter?.numbering,
+    file,
+  });
+  unified()
+    .use(basicTransformationsPlugin)
+    .use(mathPlugin, { macros: frontmatter?.math ?? {} }) // This must happen before enumeration, as it can add labels
+    .use(enumerateTargetsPlugin, { state })
+    .use(linksPlugin, { transformers: linkTransforms })
+    .use(footnotesPlugin, { references })
+    .use(resolveReferencesPlugin, { state })
+    .use(keysPlugin)
+    .runSync(mdast as any, file);
+  const tex = unified()
+    .use(mystToTex)
+    .stringify(mdast as any).result as LatexResult;
+  const content = useParse(mdast as any);
+  return {
+    yaml: mdastString,
+    references: { ...references, article: mdast } as References,
+    html: htmlString,
+    tex: tex.value,
+    content,
+    warnings: file.messages,
+  };
+}
+
+export function MySTRenderer({ value, numbering }: { value: string; numbering: any }) {
+  const area = useRef<HTMLTextAreaElement | null>(null);
+  const [text, setText] = useState<string>(value.trim());
+  const [references, setReferences] = useState<References>({});
+  const [mdastYaml, setYaml] = useState<string>('Loading...');
+  const [html, setHtml] = useState<string>('Loading...');
+  const [tex, setTex] = useState<string>('Loading...');
+  const [warnings, setWarnings] = useState<VFileMessage[]>([]);
+  const [content, setContent] = useState<React.ReactNode>(<p>{value}</p>);
+  const [previewType, setPreviewType] = useState('DEMO');
+
+  useEffect(() => {
+    const ref = { current: true };
+    parse(text, { numbering }).then((result) => {
+      if (!ref.current) return;
+      setYaml(result.yaml);
+      setReferences(result.references);
+      setHtml(result.html);
+      setTex(result.tex);
+      setContent(result.content);
+      setWarnings(result.warnings);
+    });
+    return () => {
+      ref.current = false;
+    };
+  }, [text]);
+
+  useEffect(() => {
+    if (!area.current) return;
+    area.current.style.height = 'auto'; // for the scroll area in the next step!
+    area.current.style.height = `${area.current.scrollHeight}px`;
+  }, [text]);
+
+  return (
+    <figure className="relative shadow-lg rounded overflow-hidden">
+      <div className="absolute right-0 p-1">
+        <CopyIcon text={text} />
+      </div>
+      <div className="myst">
+        <label>
+          <span className="sr-only">Edit the MyST text</span>
+          <textarea
+            ref={area}
+            value={text}
+            className="block p-6 shadow-inner resize-none w-full font-mono bg-slate-50 dark:bg-slate-800 outline-none"
+            onChange={(e) => setText(e.target.value)}
+          ></textarea>
+        </label>
+      </div>
+      {/* The `exclude-from-outline` class is excluded from the document outline */}
+      <div className="exclude-from-outline relative min-h-1 pt-[50px] px-6 pb-6 dark:bg-slate-900">
+        <div className="absolute cursor-pointer top-0 left-0 border dark:border-slate-600">
+          {['DEMO', 'AST', 'HTML', 'LaTeX'].map((show) => (
+            <button
+              key={show}
+              className={classnames('px-2', {
+                'bg-white hover:bg-slate-200 dark:bg-slate-500 dark:hover:bg-slate-700':
+                  previewType !== show,
+                'bg-blue-800 text-white': previewType === show,
+              })}
+              title={`Show the ${show}`}
+              aria-label={`Show the ${show}`}
+              aria-pressed={previewType === show ? 'true' : 'false'}
+              onClick={() => setPreviewType(show)}
+            >
+              {show}
+            </button>
+          ))}
+        </div>
+        {previewType === 'DEMO' && (
+          <ReferencesProvider references={references}>{content}</ReferencesProvider>
+        )}
+        {previewType === 'AST' && <CodeBlock lang="yaml" value={mdastYaml} showCopy={false} />}
+        {previewType === 'HTML' && <CodeBlock lang="xml" value={html} showCopy={false} />}
+        {previewType === 'LaTeX' && <CodeBlock lang="latex" value={tex} showCopy={false} />}
+      </div>
+      {previewType === 'DEMO' && warnings.length > 0 && (
+        <div>
+          {warnings.map((m) => (
+            <div
+              className={classnames('p-1 shadow-inner text-white not-prose', {
+                'bg-red-500 dark:bg-red-800': m.fatal === true,
+                'bg-orange-500 dark:bg-orange-700': m.fatal === false,
+                'bg-slate-500 dark:bg-slate-800': m.fatal === null,
+              })}
+            >
+              {m.fatal === true && <ExclamationCircleIcon className="inline h-[1.3em] mr-1" />}
+              {m.fatal === false && <ExclamationIcon className="inline h-[1.3em] mr-1" />}
+              {m.fatal === null && <InformationCircleIcon className="inline h-[1.3em] mr-1" />}
+              <code>{m.ruleId || m.source}</code>: {m.message}
+            </div>
+          ))}
+        </div>
+      )}
+    </figure>
+  );
+}
+
+const MystNodeRenderer: NodeRenderer = (node) => {
+  return <MySTRenderer key={node.key} value={node.value} numbering={node.numbering} />;
+};
+
+const MYST_RENDERERS = {
+  myst: MystNodeRenderer,
+};
+
+export default MYST_RENDERERS;

package/src/output/components.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import { useLongContent } from './hooks';
+
+export const MaybeLongContent = ({
+  content,
+  path,
+  render,
+}: {
+  content?: string;
+  path?: string;
+  render: (content: string) => JSX.Element;
+}) => {
+  const { error, data } = useLongContent(content, path);
+  if (error) {
+    return <div className="text-red-500">Error loading content: {error.message}</div>;
+  }
+  if (!data) {
+    return <div>Fetching long content....</div>;
+  }
+  return <div>{render(data.content)}</div>;
+};
+
+export const DangerousHTML = ({ content, ...rest }: { content: string }) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!content || !ref.current) return;
+    const el = document.createRange().createContextualFragment(content);
+    ref.current.innerHTML = '';
+    ref.current.appendChild(el);
+  }, [content, ref]);
+
+  return <div {...rest} ref={ref} />;
+};

package/src/output/error.tsx

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

package/src/output/hooks.ts

@@ -0,0 +1,127 @@
+import useSWRImmutable from 'swr/immutable';
+import type {
+  MinifiedErrorOutput,
+  MinifiedMimeBundle,
+  MinifiedMimePayload,
+  MinifiedOutput,
+  MinifiedStreamOutput,
+} from '@curvenote/nbtx/dist/minify/types';
+import { walkPaths } from '@curvenote/nbtx/dist/minify/utils';
+import { useState, useLayoutEffect } from 'react';
+
+/**
+ * Truncation vs Summarization
+ *
+ * In Curvespace, we're decided to change our data structure for outputs to align it as
+ * closely as possible with Jupyters nbformat.IOutput[] type, but in a way that still allows
+ * us to truncate output content and push that to storage.
+ *
+ * This will be used only in the CLI and Curvespace initially but should be ported back to
+ * the rest of the code base. This will mean
+ *
+ * - changing the DB schema
+ * - migration
+ * - changing API response
+ * - changing the frontend
+ * - changing the extension
+ *
+ */
+
+interface LongContent {
+  content_type?: string;
+  content: string;
+}
+
+const fetcher = (...args: Parameters<typeof fetch>) =>
+  fetch(...args).then((res) => {
+    if (res.status === 200) return res.json();
+    throw new Error(`Content returned with status ${res.status}.`);
+  });
+
+export function useLongContent(
+  content?: string,
+  url?: string,
+): { data?: LongContent; error?: Error } {
+  if (typeof document === 'undefined') {
+    // This is ONLY called on the server
+    return url ? {} : { data: { content: content ?? '' } };
+  }
+  const { data, error } = useSWRImmutable<LongContent>(url || null, fetcher);
+  if (!url) return { data: { content: content ?? '' } };
+  return { data, error };
+}
+
+const arrayFetcher = (...urls: string[]) => {
+  return Promise.all(urls.map((url) => fetcher(url)));
+};
+
+type ObjectWithPath = MinifiedErrorOutput | MinifiedStreamOutput | MinifiedMimePayload;
+
+function shallowCloneOutputs(outputs: MinifiedOutput[]) {
+  return outputs.map((output) => {
+    if ('data' in output && output.data) {
+      const data = output.data as MinifiedMimeBundle;
+      return {
+        ...output,
+        data: Object.entries(data).reduce((acc, [mimetype, payload]) => {
+          return { ...acc, [mimetype]: { ...payload } };
+        }, {}),
+      };
+    }
+    return { ...output };
+  });
+}
+
+export function useFetchAnyTruncatedContent(outputs: MinifiedOutput[]) {
+  const itemsWithPaths: ObjectWithPath[] = [];
+  const updated = shallowCloneOutputs(outputs);
+
+  walkPaths(updated, (path, obj) => {
+    // images have paths, but we don't need to fetch them
+    if ('content_type' in obj && (obj as MinifiedMimePayload).content_type.startsWith('image/'))
+      return;
+    obj.path = path;
+    itemsWithPaths.push(obj);
+  });
+
+  const { data, error } = useSWRImmutable<LongContent[]>(
+    itemsWithPaths.map(({ path }) => path),
+    arrayFetcher,
+  );
+
+  data?.forEach(({ content }, idx) => {
+    const obj = itemsWithPaths[idx];
+    if ('text' in obj) obj.text = content; // stream
+    if ('traceback' in obj) obj.traceback = content; // error
+    if ('content' in obj) obj.content = content; // mimeoutput
+    obj.path = undefined;
+  });
+
+  return {
+    data: itemsWithPaths.length === 0 || data ? updated : undefined,
+    error,
+  };
+}
+
+function getWindowSize() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useWindowSize() {
+  const [windowSize, setWindowSize] = useState(getWindowSize());
+
+  useLayoutEffect(() => {
+    function handleResize() {
+      setWindowSize(getWindowSize());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+}

package/src/output/index.tsx

@@ -0,0 +1,7 @@
+import { Output } from './output';
+
+const OUTPUT_RENDERERS = {
+  output: Output,
+};
+
+export default OUTPUT_RENDERERS;

package/src/output/jupyter.tsx

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,18 @@
+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>
+      )}
+    />
+  );
+}