ymaps / modules

Async modular system

Modular system

по-русски

What? Why and what for? How to use? (ru)

Requirements

1. Asynchronous require for modules
2. Asynchronous provide for modules
3. Extending and redefining a module

Why not CommonJS?

See #1, #2 and #3 in the list of requirements.

Why not AMD?

See #2 and #3 in the list of requirements.

API spec

Module declaration

void modules.define(
    String moduleName,
    [String[] dependencies],
    Function(
        Function([Object objectToProvide], [Error error]) provide,
        [Object resolvedDependency, ...],
        [Object previousDeclaration]
    ) declarationFunction
)

Module usage

void modules.require(
    String[] dependencies,
    Function([Object resolvedDependency, ...]) successCallbackFunction,
    [Function(Error error) errorCallbackFunction]
)

Modules storage configuration

void setOptions(Object options)

Available options

• trackCircularDependencies - if set to false doesn’t track circular dependencies. true by default
• allowMultipleDeclarations - if set to false denies module overloading and provides an error. true by default

Get current state of module in storage

String getState(String name)

Possible states

• NOT_DEFINED - module wasn’t defined
• NOT_RESOLVED - module was defined, but it hasn’t started resolving
• IN_RESOLVING - resolving is in progress
• RESOLVED - module is already resolved

Check for module existence in storage

Boolean isDefined(String moduleName)

Create yet another modules storage

Modules modules.create()

Example

modules.define(
    'A',
    ['B', 'C'],
    function(provide, b, c, prev) {
        var a = {};
        provide(a);
    });

modules.define(
    'B',
    function(provide) {
        var b = {};
        provide(b);
    });

modules.define(
    'C',
    ['B'],
    function(provide, b) {
        var c = {};
        provide(c);
    });

modules.define(
    'C',
    function(provide, prevC) {
        var nextC = {};
        provide(nextC);
    });

modules.require(
  ['A'],
  function(a) {
    // module 'A' now resolved to a
  });

modules's Issues

modules.require should restore state after error

Зависимости модуля проверяются, даже если сам модуль не используется

Следующий пример кидает ошибку "Uncaught Error: Module "b": can't resolve dependence "x" ".

modules.define('a', function(provide) { provide('a'); });
modules.define('b', ['x'], function(provide, x) { provide('b'); });
modules.require(['a'], function() {});

Add possibility to create multiple storages

At the moment ym provides interface to manipulate with the only private variable modulesStorage.
I need several instances with the similar or the same functionality to manipulate different kinds of modules separately.

Динамическая загрузка модуля.

Использую ym в составе bem/enb/i-bem для клиентского кода блоков. При попытке загружать файлы модулей динамически (через js document.createElement('script')... вместо статического <script src="..."></script>) происходит сбой и до вызова decl.fn.apply дело не доходит.

Насколько сейчас понимаю, дело в том, что modules.define определяется после отработки jQuery.ready (где происходит всё это шаманство с nextTick, requireDeps, startDeclResolving и пр.

Сейчас удалось добиться запуска модуля вызовом modules.require(...) после загрузки файла с кодом.

Насколько это нормально? Как лучше решать вопрос?

Описание проблемы на форуме bem.info

errorCallback в require

Сейчас невозможно узнать какой вызов require вызвал ошибку.
Было бы хорошо иметь возможность в require передавать errorCallback.

Add module name with missing dependencies in error info

<module name>: can't find dependencies <module name>

instead

Can't find module <module name>

Rename options to setOptions

Сравнение с AMD (require.js, webpack)

Просьба описать use case, когда необходимы асинхронный provide и возможность передекларации модулей. Пока непонятно, зачем эти возможности нужны и чем это решение лучше require.js или webpack.

Обработка ошибки в define

Сейчас внутри define есть возможность выполнить асинхронную операцию и уведомить модульную систему отложено при помощи функции provide. Но нет никакой возможности уведомить о произошедшей ошибке. Если внутренняя асинхронная операция завершилась провалом, то модульная система об этом никогда не узнает.

Можно в provide вторым аргументом передавать ошибку. provide(null, Error).
Ошибка будет передана внешним слушателям, которые вызвали require. А все участвующие в цепочке модули вернутся к начальному состоянию (not resolved).

Возможность указать baseUrl

Require JS имеет опцию baseUrl, с помощью которой я могу указать, в каком месте находятся мои подмодули.
Как указать это в ym, чтобы все подмодули грузились из правильной папки?

Throw exception on attempt to provide already provided declaration

What about adoption to AMD?

I don't see much changes in modules.require vs System.import, except in AMD dependencies can be file names.

But there are some differences in define:

modules.define(
  {String} moduleName,
  [{Array.<String>} dependencies,]
  {function (
    {function ( resolution, [{Error} error] )} provide,
    {Array.<*>} ...imports,
    [{*} prev]
  )} declarationFunction
);

What if we will compare dependencies.length with declarationFunction arity and decide with mind on that how to call declarationFunction?

It will help us to use modules as AMD module loader.

Is there any other problems or differences between current ym functionality and AMD standard?

Why I ask? Because ES6 modules comes to us. And I think about using ymodules for ES6 modules.

Add bower.json

Refer bem-site/bem-forum-content-ru#255 for motivation

// cc @h4

setImmediate & postMessage are potentially broken in IE10

http://codeforhire.com/2013/09/21/setimmediate-and-messagechannel-broken-on-internet-explorer-10/

and looks like we have a potentially buggy nextTick wrapper.

Add tests

Ребят где скачать то саму библиотеку?

Вроде я программист, вроде неплохо разбираюсь, но чувствую себя полнейшим идиотом - не могу уже пол часа найти КАК НАЧАТЬ то?!?!

Вы написали как пользоваться, но где взять саму библиотеку?
Как я напишу
script src="YModules.js" type ="text/javascript"
??? где файл то взять??!?! почему нет в readme такой информации, я просто полностью не доумеваю вообще

Add isDefined method

No matter if it will be sync or async. Choose the better way.

One need fallback in cases of exceptions

The problem is simple - there is no way to detect or catch any exception in modules. For example i can require undefined module and i will not get any error.

Для чего используется nextTick

Какой смысл в выполнении require через nextTIck?

Возникла проблема: необходимо динамически подгрузить скрипт. Внутри скрипта modules.require использует уже определенные модули. Ожидаемый результат, что по script.onload коллбэк из modules.require уже будет выполнен. Возможно уже есть решение с динамической подгрузкой?

работа со сторонними библиотеками

Привет. Есть ли в модульной системе возможность работать с библиотеками которые не имеют синтаксиса ymaps/modules? Например библиотеки backbone, momentjs. Есть ли аналог shims из AMD, который бы позволял использовать эти библиотеки?

Add ability to identify, which of the module generation's dependency is not resolved

In case

modules.define('a', function(provide) { provide() });
modules.define('a', ['b'], function(provide, b, a) { provide(a) });
modules.define('a', ['c'], function(provide, c) { provide(a) });

so if b is not resolved, the error stack would be:

Uncaught Error: Module "a": can't resolve dependence "b" <file>
  throwModuleNotFound <file>
  calcDeclDeps <file>
  onNextTick <file>
  callFns <file>
  onMessage

It would be cool to have an ability to understand, from what of a's generation error comes

provide должен возвращать то, что ему передали

Для упрощения кода (вынесения классов, которые провайдим, в переменные)

Can't resolve module if it comes in separate <script> tag

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>modules test</title>
</head>
<body>
<script>
    /* here comes modules v0.1.0 source */
</script>
<script>
modules.require(['A'], function(A) {
    A();
});
</script>
<script>
modules.define('A', function(provide) {
    provide(function() { console.log('test')});
});
</script>
</body>
</html>

It reproduces sometimes.
Open this HTML in Chrome, Yandex, Opera with opened console and press cmd+r until we get JS-error: Uncaught Error: Required module "A" can't be resolved. If we remove </script><script> between require and define then we can not reproduce this bug.

If don't call provide in decl process wait for infinity

Main problem is that you don't know that. And all what you can do is check all your code. Maybe you can add some stats method to call when something go wrong.
There is a method:

String getState(String name)

But if you has to many modules you just don't want to check them all.
I see solution in some dependency graph with states.
Minor example:

modules.define(
    'A',
    function(provide, prev) {
        var a = {};
        // do not call provide
        //provide(a);
    });

modules.require(
  ['A'],
  function(a) {
    /* never goes here */
  });

nextTick causes IE8 to crash

In https://github.com/ymaps/modules/blob/master/modules.js#L373 one try to add script to document.body.
For this moment body can exists, but in "non closed" state.
Adding something to the end of unclosed node causes fatal error.

Solution - add script to head element.

Add allowMultipleDecls option

Add getState method

Добавить возможность в require передавать не только массив модулей, но и строчку

Часто при использовании модульной системы путаемся. Вроде это не сильное изменение интерфейса.

Troubles with babel

We have to:

require('babel/register');
require('desktop.bundles/main-app/main-app.js');

But, after babelifying code of ym we got undefined instead of this in global context because of new spec. The last line with this becomes:

})(undefined); // oops ;-(

Can we fix that somehow?

Ref: https://babeljs.io/docs/faq/#why-is-this-being-remapped-to-undefined-

Call declFn in module's context

Context should contains properties:

• name
• deps

Allow to use string version for dependence from one module

modules.define('A', 'B', function() { });

instead

modules.define('A', ['B'], ...

and

modules.require('A', ...

instead

modules.define(['A'], ...