Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#15118 closed feature (fixed)

Declarative Require for Parser

Reported by: kitsonk Owned by: bill
Priority: undecided Milestone: 1.8
Component: Parser Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Attachments (5)

declarative_require.patch (8.2 KB) - added by kitsonk 5 years ago.
Patch including unit tests
declarative_require.2.patch (11.8 KB) - added by kitsonk 5 years ago.
Enhances the parser by allowing a declarative require
declarative_require.3.patch (11.4 KB) - added by kitsonk 5 years ago.
Adds AMD Declarative Require Sytax to dojo/parser
drequire_dojo.patch (14.4 KB) - added by kitsonk 5 years ago.
Declarative Require for dojo
doh_decl-require_dijit.patch (3.4 KB) - added by kitsonk 5 years ago.
DOH ContentPane test case for Declarative Require

Download all attachments as: .zip

Change History (22)

Changed 5 years ago by kitsonk

Patch including unit tests

comment:1 Changed 5 years ago by kitsonk

Added competed patch with unit tests cases.

Changed 5 years ago by kitsonk

Enhances the parser by allowing a declarative require

comment:2 Changed 5 years ago by kitsonk

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>

Changed 5 years ago by kitsonk

Adds AMD Declarative Require Sytax to dojo/parser

comment:3 Changed 5 years ago by kitsonk

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>

comment:4 Changed 5 years ago by 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.

comment:5 Changed 5 years ago by 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.

comment:6 Changed 5 years ago by bill

In [28306]:

fix spacing, refs #15118 tangentially, !strict.

Changed 5 years ago by kitsonk

Declarative Require for dojo

comment:7 Changed 5 years ago by kitsonk

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.

comment:8 Changed 5 years ago by bill

In [28464]:

fix spacing, refs #15118 tangentially, !strict.

comment:9 Changed 5 years ago by bill

  • Resolution set to fixed
  • Status changed from new to closed

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.
  1. <script type="dojo/require"> syntax: hash mapping variable name to module id, ex: <script type="dojo/require"> baz: "acme/baz", zing: "acme/zing" </script>
  1. 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.)
  1. 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.

Changed 5 years ago by kitsonk

DOH ContentPane test case for Declarative Require

comment:10 Changed 5 years ago by kitsonk

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

comment:11 Changed 5 years ago by bill

  • Milestone changed from tbd to 1.8
  • Type changed from enhancement to feature

comment:12 Changed 5 years ago by bill

In [28482]:

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

comment:31 Changed 5 years ago by bill

In [28530]:

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

comment:32 Changed 5 years ago by kitsonk

In [28824]:

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

comment:33 Changed 5 years ago by 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

comment:34 Changed 5 years ago by 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.

comment:38 Changed 5 years ago by bill

In [30788]:

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

Note: See TracTickets for help on using tickets.