securingsincity / react-ace

React Ace Component
http://securingsincity.github.io/react-ace/
MIT License
4.02k stars 603 forks source link

Can not configure JSHint options in worker scripts #1327

Open sadakchap opened 2 years ago

sadakchap commented 2 years ago

Problem

I'm trying configure JSHint options for worker script. we have import 'ace-builds/webpack-resolver'; which takes woker scripts from ace-build. But we want to configure some rules for JSHint when it loads worker scripts.

E.g. for javascript mode, we want to change rule esnext: true to esversion: 11.

Sample code to reproduce your issue

import React from 'react';
import Editor from 'react-ace';

import 'ace-builds/webpack-resolver';
import 'ace-builds/src-noconflict/theme-solarized_dark';
import 'ace-builds/src-noconflict/ext-language_tools';

export default class CodeEditor extends React.Component {
  constructor(props) {
    super(props);

    this.state = { code: '' };
  }

  componentWillReceiveProps(props){
    if (this.state.code !== props.code) {
      this.setState({ code: props.code });
    }
    if (props.mode) {
      require(`ace-builds/src-noconflict/mode-${props.mode}`);
      require(`ace-builds/src-noconflict/snippets/${props.mode}`);
    }
  }

  get value() {
    return this.state.code || this.props.placeHolder;
  }

  set value(code) {
    this.setState({ code });
  }

  render() {
    const { fontSize = 18, mode = 'javascript', height } = this.props;
    const { code } = this.state;

    return (
      <Editor
        mode={mode}
        theme="solarized_dark"
        onChange={value => {
          this.setState({ code: value });
          if ( this.props.onCodeChange ){
            this.props.onCodeChange(value);
          }
        }}
        height={height || '100%'}
        fontSize={fontSize}
        showPrintMargin={true}
        showGutter={true}
        highlightActiveLine={true}
        width="100%"
        value={code}
        enableBasicAutocompletion={true}
        enableLiveAutocompletion={true}
        enableSnippets={false}
        showLineNumbers={true}
        tabSize={2}
      />
    );
  }
}

CodeEditor.propTypes = {
  fontSize: PropTypes.number.describe('Font size of the editor'),
  placeHolder: PropTypes.string.describe('Code place holder'),
  height: PropTypes.string.describe('Code Editor height')
};

Here, it will load worker-javascript file that has esnext: true, can we somehow specify the JSHint rules & where from component to use esversion: 11.

References

Progress on: #

ksnetjs commented 1 year ago

modify worker-javascript.js

...

(function() {
     this.setOptions = function(options) {
         this.options = options || {
             //esnext: true,
             esversion: 11,

...