@yozora/react-code-runners NPM

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.