Dynamic Import Question: react-ace

help
1

Hello,

I’m trying to understand how to do dynamic imports a little bit better. I used the round visualizer thing, and it turns out an rarely used package, react-ace, is quite resource heavy [being the react wrapper for the Ace Editor and all]. Its also used only for directly editing files, which is unusual for my use case (but a requirement from a business perspective).

To understand how to use dynamic imports, going to try with the below relatively simple component. What is the recommended way to dynamic something like this?

(a) create a parent component with the loader
(b) use an async componentWillMount() and do it there?
© i have been trying to do an async import, but not sure where to put the await, so I don’t know if this is possible.

Now lets say I want to do something interesting. The import brace from 'brace' is used to pick up the styling. I can work out what the file extension (of whatever I am loading from db is), so this example is just showing the brace for text files. There is a bunch of other modes apart from text. So, could I for example, parse the thing from the database and say it is a javascript file, hence dynamically import import 'brace/mode/javascript';. Would something like this be possible at all?

Some direction would be appreciated. Thanks so much.

Tat

Code for the component:

/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "brace" }]*/

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { observer } from 'mobx-react';

import brace from 'brace';
import AceEditor from 'react-ace';

import 'brace/mode/text';
import 'brace/theme/chrome';

import { getCLSuaArrayOption } from '../../../../../api/collections/accessHelpers.js';

import { styles } from '../../../styles.js';

@observer
export class DocMain extends Component {
  handleChangeRootStore(option, value) {
    this.props.onChangeRootStore(option, value);
  }

  handleChangeDoc(option, value) {
    this.props.onChangeDoc(option, value);
  }

  handleChange(value) {
    this.handleChangeRootStore('fileTmpContent', value);
  }

  renderReadOnly(permissions) {
    const canEdit = permissions.includes('conEditDoc') && !this.props.doc.lock;

    return (!canEdit) ? true:false;
  }

  render() {
    const permissions = getCLSuaArrayOption(this.props.rootStore.collectionSelection, this.props.rootStore.userId, 'actions');

    return (
      <span>
        <div className="row" style={styles.paneInside}>
          <div className="col-12">
            <AceEditor
              name="ace"
              mode="text"
              theme="chrome"
              width="100%"
              fontSize={18}
              readOnly={this.renderReadOnly(permissions)}
              value={this.props.rootStore.fileTmpContent}
              onChange={this.handleChange.bind(this)}
              editorProps={{
                $blockScrolling: true,
              }}
            />
          </div>
        </div>
      </span>
    );
  }
}

DocMain.propTypes = {
  rootStore: PropTypes.object.isRequired,
  onChangeRootStore: PropTypes.func.isRequired,
  doc: PropTypes.object.isRequired,
  onChangeDoc: PropTypes.func.isRequired,
};
2

Bump… C’mon - someone? This is like the exact use case for dynamic imports. Pointers appreciated, even if it is just to say this is impossible. Thanks so much.

Tat

3

Use React Loadable

Also search Meteor React Loadable

4

I had a similar thought about “dynamic, dynamic imports”: Dynamic Imports File Names