Использование наследника от JetView в отдельном модуле

Webix JS
#1

Здравствуйте.

Я создал класс-наследник от JetView и от этого класса наследую все остальные views. Если все классы в одном модуле, то все отлично работает. Если же класс-наследник от JetView в отдельном модуле, а наследуемые от него классы в другом, то возникает ошибка. Ошибка возникает в JetApp.prototype.createView, так как не срабатывает проверка ui.prototype instanceof JetBase:

if (typeof ui === "function") {
            if (ui.prototype instanceof JetBase) {
                // UI class
                return new ui(this, name);
            }
            else {
                // UI factory functions
                ui = ui();
            }
        }

Ниже пример:

import { JetView } from 'webix-jet';

export class TestBase5 extends JetView {
  constructor(app, name, options) {
    super(app, name);
    this.options = options;
   }

   config() {
     return this.options;
   }
}

import { TestBase5 } from './TestBase5';


export default class Test5 extends TestBase5 {
  constructor (app, name) {
    super(app, name, {
      view: 'label',
      label: 'Simple App View 5',
      inputWidth: 100,
      align: 'left',
    });

  }
}

import { JetApp } from 'webix-jet/dist';

webix.ready(function () {
    if (!webix.env.touch && webix.ui.scrollSize && webix.CustomScroll)
        webix.CustomScroll.init();

    var app = new JetApp({
        id:   'sample-app',
        name: 'Пример Web-приложения',
        version: '1.0',
        start:	'/test5',
    });

    app.attachEvent('app:error:resolve', function (name, err) {
      window.console.error(err);
    });


    app.render();
});

Если перенести класс TestBase5 в отдельный модуль npm и импортировать его так:

import { TestBase5 } from 'base-module';

то пример перестает работать.

Однако, если переопределить JetApp.createView, то все работает:

import { JetApp } from 'webix-jet/dist';

webix.ready(function () {
    if (!webix.env.touch && webix.ui.scrollSize && webix.CustomScroll)
        webix.CustomScroll.init();

    JetApp.prototype.createView = function (ui, name)  {
          if (name=='test5')
            return new ui(this, name);
          return      JetApp.prototype.createView(ui, name);
    };

    var app = new JetApp({
        id:   'sample-app',
        name: 'Пример Web-приложения',
        version: '1.0',
        start:	'/test5',
    });

    app.attachEvent('app:error:resolve', function (name, err) {
      window.console.error(err);
    });


    app.render();
});

Мне кажется, что в JetApp.prototype.createView нужно как-то по-другому написать проверку:

if (typeof ui === "function") {
            if (ui.prototype instanceof JetBase) {
                // UI class
                return new ui(this, name);
            }
            else {
                // UI factory functions
                ui = ui();
            }
        }
#2

такая ошибка может быть если используете параллельно 2 разные сборки webix-jet.
проверьте код еще раз.
у меня похожая структура прекрасно работает.

#3

Действительно очень похоже на то что модуль собран со своей версие webix-jet

Если перенести класс TestBase5 в отдельный модуль npm

А класс хранится в npm как es6 или уже скопилированный в es5?
Во втором случае надо прописать webix-jet как externals чтобы сам фреймворк не включался в пакет ( что то вроде jet-start/webpack.config.js at master · webix-hub/jet-start · GitHub )

#4

Спасибо за ответы. Я понял, что проблема в том, что в каждом модуле используется свой экземпляр webix-jet, установленный локально. Но, к сложалению, я пока не очень хорошо разбираюсь в скриптовой разработке и у меня не получилось использовать один экземпляр webix-jet. Не могли бы вы подсказать как надо действовать.

У меня есть модуль A, который содержит класс TestBase5, наследник от JetView, и модуль B, который содержит класс Test5, наследник от TestBase5. Модуль А я не собираю отдельно, вообще. То есть в папке модуля А только необработынные ничем исходники и package.json. Чтобы в модуле B я мог использовать модуль А я их связываю через “npm link”.
Webix-jet вместе с webpack установлены локально внутри модуля B.
В итоге, если webix-jet не установлен локально и внутри модуля A, то при сборке модуля B возникает ошибка:

Can’t resolve ‘webix-jet’ in 'C:\PM\moduleA\sources

Можно ли настроить webpack, чтобы использовать глобально установленный webix-jet? У меня не получилось

#5

Можно ли настроить webpack, чтобы использовать глобально установленный webix-jet? У меня не получилось

да, можно добавить в секцию alias запись для webix-jet

alias:{
    "webix-jet":path.resolve(__dirname, "node_modules/webix-jet"),
    ...
}
#6

Спасибо!

Поменял структуру папок проекта и все заработало