# ray-online-coder

> ray online coder

Latest version **0.0.23** (published 2025-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install ray-online-coder
pnpm add ray-online-coder
yarn add ray-online-coder
bun add ray-online-coder
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.23 |
| Published | 2025-08-27 |
| First published | 2020-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 92.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex |
| Maintainers | ilex.h |

## Links

- npm: https://www.npmjs.com/package/ray-online-coder
- npm.io page: https://npm.io/package/ray-online-coder

## Dependencies (5)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [amos-framework](https://npm.io/package/amos-framework.md) ^1.x
- [ray-doc-render](https://npm.io/package/ray-doc-render.md) ^2.x
- [amos-code-actuator](https://npm.io/package/amos-code-actuator.md) ^2.x

## Recent versions

- 0.0.23 (latest) — 2025-08-27
- 0.0.22 — 2025-01-16
- 0.0.21 — 2025-01-07
- 0.0.20 — 2022-12-13
- 0.0.19 — 2022-07-07
- 0.0.18 — 2022-07-07
- 0.0.17 — 2022-06-29
- 0.0.16 — 2022-06-21
- 0.0.15 — 2021-08-20
- 0.0.14 — 2021-04-25
- 0.0.13 — 2021-04-22
- 0.0.12 — 2021-04-14
- 0.0.11 — 2020-12-31
- 0.0.10 — 2020-12-30
- 0.0.9 — 2020-12-29
- … 8 more at https://npm.io/package/ray-online-coder/versions

## README

# ray-online-coder

快速集成在线代码编辑器，支持自动提示、React 语法、es6 语法等

## install

npm i --save ray-online-coder

## usage

### Component List

* OnlineCoder
* withRuntimeCode
* getBabelParams
* RunAFCoder
* RunA3DCoder

### RunAFCoder

```js
import React, { Component } from 'react';
import { RunAFCoder } from 'ray-online-coder';

const generalChilds = [
  { key: 'button', name: 'Button 按钮' },
  { key: 'icon', name: 'icon 内置图标' }
];

const comList = [
  { key: 'style', name: '通用样式' },
  { key: 'general', name: '通用组件', children: generalChilds }
];

const codes = {
  button: `
import { Button } from 'amos-framework';

ReactDOM.render((
  <div>
    <Button>默认</Button>
    <Button type="minor">次要</Button>
    <Button size="lg">大尺寸</Button>
    <Button size="sm">小尺寸</Button>
    <Button circle>踩</Button>
    <Button disabled>不可用</Button>
    <Button icon={<Icon icon="collection" />}>使用 Icon 组件</Button>
  </div>
), _react_runner_);
  `,
  icon: `
import { Icon } from 'amos-framework';

ReactDOM.render((
  <div>
    <Icon icon="align-horizontal" />
    <Icon icon="align-vertical" />
    <Icon icon="alignleft" />
  </div>
), _react_runner_);
`
};

class RunAF extends Component {
  render() {
    return (
      <RunAFCoder fileList={comList} codes={codes} />
    );
  }
}

export default RunAF;
```

### Custom Use

```js
import React, { Component } from 'react';
import OnlineCoder, { withRuntimeCode, getBabelParams } from 'ray-online-coder';
import dependencies from './dependencies';

const codes = {
  basic: `
import A3DDesigner, { Connect, ParabolaCurve } from 'amos-3d/lib/designer';

const { resizeConnect } = Connect;

const curvePoints = [[-165, 20, 1], [-100, 72, -35], [-50, 130, -35]];

const graph = {
  sceneOptions: {
    background: 0x253366
  },
  cameraOptions: {
    fov: 45,
    near: 1,
    far: 5000,
    position: { z: 250 },
    // 是否启用拾取器
    enablePicker: true,
    builtInOrbit: {
      maxPolarAngle: Math.PI * 0.5,
      minDistance: 1,
      maxDistance: 5000
    }
  },
  defaultLoading: false
};

class Stuffs extends Component {
  render() {
    const { dimension } = this.props;
    const pointProps2 = {
      size: 5,
      color: 0xff1c1c
    };
    return (
      <A3DDesigner {...graph} {...dimension} singleModel>
        <ParabolaCurve points={curvePoints} onlyStartEnd circleDot pointProps={pointProps2} />
      </A3DDesigner>
    );
  }
}

const Demo = resizeConnect(Stuffs);

ReactDOM.render(<Demo />, _react_runner_);
  `
};

const comList = [
  { key: 'basic', name: '基本使用' },
  { key: 'model', name: '内置物体' }
];

function registerHints(monaco){
  const hints = [
    {
      label: 'Button', // 显示的提示内容
      kind: monaco.languages.CompletionItemKind.Function, // 用来显示提示内容后的不同的图标
      insertText: 'Button', // 选择后粘贴到编辑器中的文字
      detail: 'Button 按钮' // 提示内容后的说明
    }
  ];

  monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems() {
      return { suggestions: hints };
    },
    triggerCharacters: ['Button'] // 触发提示的字符，可以写多个
  });
}

@withRuntimeCode({
  dependencies,
  // 设置 babel 转码配置, babelPlugin 默认移除所有 amos-3d 中的 import
  babelParam: getBabelParams(['amos-3d', 'amos-3d/lib/designer']),
  // previewId: '__previewpage__' // 直接渲染到 html 中
  previewId: 'online-preview'
})
class My3DRun extends Component {
  render() {
    return (
      <OnlineCoder {...this.props} codes={codes} fileList={comList} registerHints={registerHints} />
    );
  }
}

export default My3DRun;
```

### codes 采用 function 方式

```js
function generateCode(codeKey){
  return fetch(`/mycodes/${codeKey}.txt`).then(res => {
    if (res.status === 200){
      return res.text();
    }
    return '// 未找到案例';
  });
}

function registerHints(monaco){
  // const hints = [
  //   {
  //     label: 'Button', // 显示的提示内容
  //     kind: monaco.languages.CompletionItemKind.Function, // 用来显示提示内容后的不同的图标
  //     insertText: 'Button', // 选择后粘贴到编辑器中的文字
  //     detail: 'Button 按钮' // 提示内容后的说明
  //   }
  // ];

  monaco.languages.registerCompletionItemProvider('javascript', {
    // provideCompletionItems() {
    //   return { suggestions: hints };
    // },
    // triggerCharacters: ['Button'] // 触发提示的字符，可以写多个
    provideCompletionItems() {
      // return { suggestions: hints };
      return { suggestions: hints2(monaco) };
    }
  });
  monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems(){
      return { suggestions: hints };
    }
  });
  monaco.languages.registerCompletionItemProvider('javascript', fromSnippets());

  // 通过 js string添加
  monaco.languages.typescript.javascriptDefaults.addExtraLib(hints, 'hints.js');
}

@withRuntimeCode({
  dependencies,
  // 设置 babel 转码配置, babelPlugin 默认移除所有 amos-3d 中的 import
  babelParam: getBabelParams(['amos-3d', 'amos-3d/lib/designer']),
  // previewId: '__previewpage__' // 直接渲染到 html 中
  previewId: 'online-preview'
})
class My3DRun extends Component {
  render() {
    return (
      <OnlineCoder {...this.props} codes={generateCode} fileList={comList} registerHints={registerHints} />
    );
  }
}

```

### CodeRunner 使用

```js
import { CodeRunner, withRuntimeCode, getBabelParams } from 'ray-online-coder';
import dependencies from './dependencies';

const editorProps = {
  // theme: 'vs'
  theme: 'vs-dark'
};

@withRuntimeCode({
  dependencies,
  // 设置 babel 转码配置, babelPlugin 默认移除所有 amos-framework 中的 import
  babelParam: getBabelParams(['amos-framework']),
  // previewId: '__previewpage__' // 直接渲染到 html 中
  previewId: 'online-preview'
})
class OnlineCode extends Component {
  render() {
    return (
      <CodeRunner editorProps={editorProps} {...this.props} autoRun />
    );
  }
}

export default OnlineCode;
```

### OnlineCoder props

| params | type | default | description |
| ------ | ------ | ------ | ------ |
| autoClose | boolean | false | 是否自动关闭案例列表 |
| runCode | func | - | 运行 |
| fileList | array | - | 列表 |
| codes | `object or func` | - | 注入列表切换时，填充的 code |
| registerHints | `func: (monaco) => {}` | - | 祖册自动补全 |
| editorProps | `{}` | - | editor 配置信息 |
| onCreated | `func: (editor, monaco) => {}` | - | editor 创建时的回调 |
| onDemoChange | `func: (selectedKeys, info) => {}` | - | 列表切换时的回调 |

### CodeRunner props

仅使用内部 editor 和 preview

| params | type | default | description |
| ------ | ------ | ------ | ------ |
| runCode | func | - | 运行 |
| source | string | - | 代码 |
| registerHints | `func: (monaco) => {}` | - | 祖册自动补全 |
| onCreated | `func: (editor, monaco) => {}` | - | editor 创建时的回调 |
| editorProps | `{}` | - | editor 配置信息 |

## changelog

### 2025-8-27 v0.0.23

1. fix `coder` toolbar

### 2021-04-25 v0.0.14

1. modify `_utils` and export module

### 2021-04-22 v0.0.13

1. OnlineCode add `autoClose、defaultCodeKey`

### 2020-12-29 v0.0.9

1. 添加 `CodeRunner`

### 2020-12-22 v0.0.7

1. 修改 site home

### 2020-11-18 v0.0.4

1. 添加 resize 监听
2. 默认注入 body 变量，用于存储 preview 宽高

### 2020-11-13 v0.0.3

1. 去掉默认导出的RunA3DCoder

### 2020-11-13 v0.0.2

1. 修改 codes props，支持 function 格式

### 2020-11-12 v0.0.1

1. 初始化

## Lecense

MIT

---
_Source: https://npm.io/package/ray-online-coder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._