Custom mode with its own worker

[spabbineedi]

I have a custom mode and it has to load its own custom worker. I am trying to implement it using, createWorker method of the mode.

My mode file:

import 'brace/mode/text';
import 'brace/worker/worker_client';

class CustomHighlightRules extends ace.acequire('ace/mode/text_highlight_rules')
  .TextHighlightRules {
  constructor() {
    super();
    const keywords = 'If|Case';
    const dataTypes =
      'Number|Text';

    const builtinConstants = 'null|true|false';

    const keywordMapper = this.createKeywordMapper(
      {
        'support.type': dataTypes,
        'constant.language': builtinConstants,
        keyword: keywords
      },
      'identifier'
    );

    this.$rules = {
      start: [
        { token: 'comment', regex: '/\\/.*$' },
        { token: 'string', regex: '["](?:(?:\\\\.)|(?:[^"\\\\]))*?["]' },
        { token: 'field', regex: '[[]([^[])*(])' },
        { token: 'constant.numeric', regex: '0[xX][0-9a-fA-F]+\\b' },
        {
          token: 'constant.numeric',
          regex: '[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b'
        },
        {
          token: 'keyword.operator',
          regex: '!|%|\\\\|/|\\*|\\-|\\+|~=|==|<>|!=|<=|>=|=|<|>|&&|\\|\\|'
        },
        { token: 'punctuation.operator', regex: '\\?|\\:|\\,|\\;|\\.' },
        { token: 'paren.lparen', regex: '[[({]' },
        { token: 'paren.rparen', regex: '[\\])}]' },
        { token: 'text', regex: '\\s+' },
        { token: keywordMapper, regex: '[a-zA-Z_$][a-zA-Z0-9_$]*\\b' }
      ]
    };
  }
}

export default class CustomMode extends window.ace.acequire('ace/mode/text').Mode {
  constructor() {
    super();
    this.HighlightRules = QBHighlightRules;

//here i am trying to get workerclient
    var WorkerClient = ace.acequire('ace/worker/worker_client').WorkerClient;
    this.createWorker = session => {
      
      const worker = new WorkerClient(
        ['ace'],
        require('./worker-custom'),
        'custom-worker'
      );
      worker.attachToDocument(session.getDocument());
      worker.on('annotate', function(e) {
        session.setAnnotations(e.data);
      });
      worker.on('terminate', function() {
        session.clearAnnotations();
      });
      return worker;
    };
  }
}

Error: Can't resolve 'brace/worker/worker_client'

Need help!

[spabbineedi]

Now I am able to load the WorkerClient..

replaced import 'brace/worker/worker_client'; with

var WorkerClient = ace.acequire('ace/worker/worker_client').WorkerClient;

but have some issues loading worker file

Could not load worker TypeError: Cannot read property 'id' of undefined
at new WorkerClient (index.js:18003)

[spabbineedi]

Do I need to convert the worker to

module.exports.id = 'ace/mode/json_worker';
module.exports.src = '..worker code'

to above style? If so, Is there a sample for it?

[ajboni]

@spabbineedi hey did you ever figured this out?

[akshitkrnagpal]

@spabbineedi @rodobodolfo
Did any of you were able to get it working?

[ajboni]

I couldn't unfortunately.

[akshitkrnagpal]

@rodobodolfo
I was able to get it working by defining ace/worker/mirror and ace/mode/custom_mode_worker in the same file as mode (or importing it in that file) and using UIWorkerClient instead of WorkerClient like

new UIWorkerClient(['ace'], 'ace/mode/custom_mode_worker', 'CustomModeWorker');

PS - No idea if it would cause any problem but haven't encountered anything till now.