0.0.20 • Published 1 year ago
ray-online-coder v0.0.20
ray-online-coder
快速集成在线代码编辑器,支持自动提示、React 语法、es6 语法等
install
npm i --save ray-online-coder
usage
Component List
- OnlineCoder
- withRuntimeCode
- getBabelParams
- RunAFCoder
- RunA3DCoder
RunAFCoder
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
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 方式
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 使用
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
2021-04-25 v0.0.14
- modify
_utils
and export module
2021-04-22 v0.0.13
- OnlineCode add
autoClose、defaultCodeKey
2020-12-29 v0.0.9
- 添加
CodeRunner
2020-12-22 v0.0.7
- 修改 site home
2020-11-18 v0.0.4
- 添加 resize 监听
- 默认注入 body 变量,用于存储 preview 宽高
2020-11-13 v0.0.3
- 去掉默认导出的RunA3DCoder
2020-11-13 v0.0.2
- 修改 codes props,支持 function 格式
2020-11-12 v0.0.1
- 初始化
Lecense
MIT
0.0.20
1 year ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.18
2 years ago
0.0.19
2 years ago
0.0.15
3 years ago
0.0.13
3 years ago
0.0.14
3 years ago
0.0.12
3 years ago
0.0.11
3 years ago
0.0.10
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
4 years ago