0.0.20 • Published 1 year ago

ray-online-coder v0.0.20

Weekly downloads
11
License
MIT
Repository
-
Last release
1 year ago

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

paramstypedefaultdescription
autoClosebooleanfalse是否自动关闭案例列表
runCodefunc-运行
fileListarray-列表
codesobject or func-注入列表切换时,填充的 code
registerHintsfunc: (monaco) => {}-祖册自动补全
editorProps{}-editor 配置信息
onCreatedfunc: (editor, monaco) => {}-editor 创建时的回调
onDemoChangefunc: (selectedKeys, info) => {}-列表切换时的回调

CodeRunner props

仅使用内部 editor 和 preview

paramstypedefaultdescription
runCodefunc-运行
sourcestring-代码
registerHintsfunc: (monaco) => {}-祖册自动补全
onCreatedfunc: (editor, monaco) => {}-editor 创建时的回调
editorProps{}-editor 配置信息

changelog

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

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