Declarative Require for Parser

[Kitson Kelly]

The parser should allow declarative requirements to be used in markup. For example:

<div data-dojo-require="package/module" data-dojo-args="module"></div>
<div data-dojo-type="module"></div>

<div data-dojo-require="package/module2"></div>
<div data-dojo-type="package/module2"></div>

<div data-dojo-require="package/module3,package/module4" 
    data-dojo-args="module3, module4"></div>
<div data-dojo-type="module3" data-dojo-mixins="module4"></div>

I have a patch for this currently at: ​https://github.com/kitsonk/dojo/commit/74d293d33354332ed999d997b5739c3de4e109eb. I will create a discreet patch and attach it to the ticket after discussion and review.

[Kitson Kelly]

Patch including unit tests

[Kitson Kelly]

Added competed patch with unit tests cases.

[Kitson Kelly]

Enhances the parser by allowing a declarative require

[Kitson Kelly]

Patch 2 adds the following:

• data-dojo-props will be evaluated within the scope of the declarative requires.
• declarative scripting will be evaluated within the scope of the declarative requires.

So all of the following is now possible:

<div data-dojo-require="dojo/on, dijit/registry, dijit/form/Button" 
    data-dojo-args="on, registry, Button"></div>
<button id="b1" type="button" data-dojo-type="Button">
  <span>Button</span>
  <script type="dojo/on" data-dojo-event="click" data-dojo-args="e">
    on(registry.byId("someWidget"), "click", function(e) { 
      console.log("foo"); 
    });
  </script>
</button>
<div data-dojo-type="Button" 
    data-dojo-props="label: registry.byId('b1').get('label')"></div>

[Kitson Kelly]

Adds AMD Declarative Require Sytax to dojo/parser

[Kitson Kelly]

Patch 3 changes the syntax of declarative requires and adds declarative defines.

All of the following would be possible now:

<script type="amd/require" 
    data-amd-mids="dojo/on, dijit/registry, dijit/form/Button"
    data-amd-args="on, registry, Button">
  var button1 = new Button({}, "b1");
</script>
<button id="b1" type="button">Button 1</button>
<button id="b2" type="button" data-dojo-type="Button">
  <span>Button 2</span>
  <script type="dojo/on" data-dojo-event="click" data-dojo-args="e">
    on(registry.byId("b1"), "click", function(e) {
      console.log("foo");
    });
  </script>
</button>
<button type="button" data-dojo-type="Button" 
    data-dojo-props="label: registry.byId('b1').get('label')"></div>

[bill]

See also #13779, since this patch is mainly about adding a scope to the parser, although not in the normal sense of a scope that only applies to a single parse() call.

[bill]

In [28305]:

Code reduction using optional first argument to "new Function(args, text)" as way to specify parameters to the generated function, thanks Kitson, refs #15118 tangentially, !strict.

[bill]

In [28306]:

fix spacing, refs #15118 tangentially, !strict.

[Kitson Kelly]

Declarative Require for dojo

[Kitson Kelly]

drequire_dojo.patch modifies dojo/parser and dojo/html.

I hadn't noted before that the following is possible (there by answering the question of how to use dojo/on in declarative scripting).

<script type="amd/require" 
    data-amd-mids="dojo/on, dojo/dom" 
    data-dojo-args="on, dom">
  exports.on = on;
  exports.dom = dom;
</script>
<!-- or -->
<script type="amd/require" 
    data-amd-mids="dojo/on" 
    data-amd-return="on"></script>
<script type="amd/require" 
    data-amd-mids="dojo/dom" 
    data-amd-return="dom"></script>
<!-- and then -->
<button type="button" data-dojo-type="dijit/form/Button">
  <span>Click!</span>
  <script type="dojo/on" data-dojo-event="click">
    on(dom.byId("something"), "click", function(){
      console.log("hello")
    });
  </script>
</button>

I also need to provide an update to dijit/layout/ContentPane so it handles the promise parse() return.

[bill]

In [28464]:

fix spacing, refs #15118 tangentially, !strict.

[bill]

In [28465]:

Modified version of Kitson's patch to support declarative require in the parser:

1. Before looking for data-dojo-type nodes, the parser scans for <script type="dojo/require"> nodes, loads the specified modules, and then (asynchronously) continues the parse. If no <script type="dojo/require"> tags are present, parsing is synchronous like before.

2. <script type="dojo/require"> syntax: hash mapping variable name to module id, ex: <script type="dojo/require"> baz: "acme/baz", zing: "acme/zing" </script>

3. Parser return value: The parser's return value can be used as a Promise. In addition, for backwards compatibility, for markup without <script type=dojo/require> tags, the return value can be used as an array of widgets. (This code is common to #14591.)

4. Corresponding changes to html.ContentSetter and dijit/layout/ContentPane to handle asynchronous parsing. These changes were taken from #14591 and tests will be added later when that ticket is closed.

Fixes #15118, refs #14591 !strict.

[Kitson Kelly]

DOH ContentPane? test case for Declarative Require

[Kitson Kelly]

Attached unit test case for Declarative Require for dijit/layout/ContentPane

[bill]

In [28482]:

Unit tests for parseOnLoad: true, also testing auto-require and declarative require, refs #14591, #15118 !strict.

[bill]

In [28530]:

Use setObject() to allow mapping modules to dot separated strings. Refs #15118 !strict.

[Kitson Kelly]

In [28824]:

refs #14591 #15118, demo for auto-require and declarative require features

[bill]

In [30267]:

unit tests fixes:

• doh.is() argument order should be expected, actual
• hints within a text fixture should be unique, so you can tell which assertion failed

refs #15118

[bill]

In [30787]:

fix regression from [28465] where errors don't get reported, fixes #16813 and refs #15118, #14591 on 1.8/ branch, thanks Jared, !strict.

[bill]

In [30788]:

fix regression from [28465] where errors don't get reported, fixes #16813 and refs #15118, #14591 on trunk/, thanks Jared, !strict.