openinula-repl-next

"读取-求值-输出"循环（英語：Read-Eval-Print Loop，简称REPL），也被称做交互式顶层构件

本组件是提供一个 关于openinula的 交互式编程环境组件

Installation

npm i openinula-repl

Usage

function App() {
  return (
    <Repl
      name="inula-playground"
      split={{ split: 'vertical' }}
    >
      <Editor />
      <Viewer />
    </Repl>
  );
}

自定义演示示例

您可以为Repl或Editor组件提供自定义的演示示例： 当前支持导入Preview、SourceMap、Output、Components组件，Viewer是对这四个的整合，同时生成导航栏，可按需导入

import { Repl, Editor, Preview, Output, SourceMap, Components, Viewer } from 'openinula-repl-next'

在Repl组件级别使用

import { Repl } from 'openinula-repl';
import type { DemoItem } from 'openinula-repl';

// 自定义基础演示
const customBasicDemos: DemoItem[] = [
  {
    concept: "自定义Hello World",
    emoji: "🌍",
    description: "一个自定义的Hello World示例",
    code: `
import { createSignal } from 'openinula';

function App() {
  const [message] = createSignal('Hello from Custom Demo!');
  
  return (
    <div>
      <h1>{message()}</h1>
      <p>这是一个自定义的基础演示示例</p>
    </div>
  );
}

export default App;
    `.trim()
  }
];

// 自定义高级演示
const customAdvancedDemos: DemoItem[] = [
  {
    concept: "自定义Context",
    emoji: "📦",
    description: "一个自定义的Context示例",
    code: `
import { createContext, useContext, createSignal } from 'openinula';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = createSignal('light');
  
  return (
    <ThemeContext.Provider value={{ theme: theme(), setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function App() {
  return (
    <ThemeProvider>
      <div>
        <h1>自定义Context示例</h1>
      </div>
    </ThemeProvider>
  );
}

export default App;
    `.trim()
  }
];

function App() {
  return (
    <Repl 
      name="custom-demo-playground"
      advancedDemos={customAdvancedDemos}
      basicDemos={customBasicDemos}
    >
      <Editor />
      <Viewer />
    </Repl>
  );
}

在Editor组件级别使用

import { Repl, Editor } from 'openinula-repl';
import type { DemoItem } from 'openinula-repl';

// 自定义演示数组...

function App() {
  return (
    <Repl name="custom-demo-playground">
      <Editor 
        advancedDemos={customAdvancedDemos}
        basicDemos={customBasicDemos}
      />
      <Viewer />
    </Repl>
  );
}

API

|属性|说明|类型|默认值| |---|---|---|---| |name|repl的名称|string|| |split|设置编辑器和查看器的布局|SplitPaneProps|| |className|自定义类名|string|| |code|初始代码|string|| |defaultCode|默认代码|string|| |importMap|import map配置|string|| |placeHolder|编辑器placeholder|string|| |enableStorage|是否启用本地存储|boolean|| |children|子组件|InulaNode|Editor 和 Viewer| |advancedDemos|自定义高级演示数组|DemoItem[]|默认高级演示| |basicDemos|自定义基础演示数组|DemoItem[]|默认基础演示|

Editor组件额外属性

| 属性 | 说明 | 类型 | 默认值 | | ------------- | -------------------- | ------------------- | -------------- | | darkTheme | 是否使用深色主题 | boolean | false | | className | 自定义类名 | string | | | Menu | 自定义菜单组件 | React.ComponentType | 暂存 bug，不建议使用 | | advancedDemos | 自定义高级演示数组 | DemoItem[] | 默认高级演示 | | basicDemos | 自定义基础演示数组 | DemoItem[] | 默认基础演示 |

DemoItem类型

interface DemoItem {
  concept: string;    // 演示概念名称
  emoji: string;      // 演示图标
  description: string; // 演示描述
  code: string;       // 演示代码
}