@yozora/react-code-runners

This package is designed to provide code runners for @yozora/react-code-embed or @yozora/react-code-live.

Install

• npm

  npm install --save @yozora/react-code-runners

• yarn

  yarn add @yozora/react-code-runners

Usage

• Create a GraphvizRunner.

  import loadable from '@loadable/component'
  import type { CodeRunner } from '@yozora/react-code-runners'
  import { createGraphvizRunner } from '@yozora/react-code-runners'
  
  const GraphvizRenderer = loadable(
    () => import('@yozora/react-code-renderer-graphviz'),
  )
  
  export const GraphvizRunner: CodeRunner = createGraphvizRunner(GraphvizRenderer)

• Create a JsxRunner.

  import styled from '@emotion/styled'
  import loadable from '@loadable/component'
  import type { EcmaImport } from '@yozora/ast'
  import type { ICodeRendererJsxProps } from '@yozora/react-code-renderer-jsx'
  import type { ICodeRunner } from '@yozora/react-code-runners'
  import { createUseJsxRunner } from '@yozora/react-code-runners'
  import { useCallback, useEffect, useMemo, useState } from 'react'
  
  const JsxRenderer = loadable<ICodeRendererJsxProps>(
    () => import('@yozora/react-code-renderer-jsx') as any,
  )
  
  export const useJsxRunner: (ecmaImports: EcmaImport[]) => ICodeRunner =
    createUseJsxRunner(
      {
        styled,
        useCallback,
        useEffect,
        useMemo,
        useState,
      },
      [],
      JsxRenderer,
      'block',
    )
  
  function Demo() {
    const JsxRunner = useJsxRunner([])
    // ....
  }

• Create a MathRunner.

  import type { ICodeRunner } from '@yozora/react-code-runners'
  import { createMathRunner } from '@yozora/react-code-runners'
  import { MathJaxNode } from '@yozora/react-mathjax'
  
  export const MathRunner: ICodeRunner = createMathRunner(
    props => <MathJaxNode className="yozora-math" inline={false} formula={props.value} />
  )

• Create runner items.

  import type { EcmaImport } from '@yozora/ast'
  import type { ICodeRunnerItem } from '@yozora/react-code-runners'
  import React  from 'react'
  import GraphvizRunner from './runner-graphviz'
  import { useJsxRunner } from './runner-jsx'
  import MathRunner from './runner-math'
  
  export function useCodeRunners(ecmaImports: EcmaImport[]): ICodeRunnerItem[] {
    const JsxRunner = useJsxRunner(ecmaImports)
    return React.useMemo(
      () => [
        {
          title: 'jsx',
          pattern: /^jsx$/,
          runner: JsxRunner,
        },
        {
          title: 'graphviz',
          pattern: /^graphviz|dot$/,
          runner: GraphvizRunner,
        },
        {
          title: 'math',
          pattern: /^tex|latex|math|mathjax$/,
          runner: MathRunner,
        },
      ],
      [JsxRunner],
    )
  }

Overview

Name	Description
createUseJsxRunner	Create a jsx live code runner creator.
createGraphvizRunner	Create a graphviz live code runner.
createMathRunner	Create a formula live code runner.

Related

• @yozora/react-code-renderer-graphviz
• @yozora/react-code-renderer-jsx