Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-66192

Allow subdirectories for AMD modules

    XMLWordPrintable

Details

    • MOODLE_38_STABLE
    • MOODLE_38_STABLE
    • MDL-66192-master
    • Hide
      1. Ensure that cachejs is disabled
      2. Download the attached 66192.zip file and unzip it in your document root
        This should add the following new files:

        lib/amd/src/local/top.js
        lib/amd/src/local/66192/one.js
        lib/amd/src/local/66192/two.js
        lib/amd/src/local/66192/two/index.js
        lib/amd/src/local/66192/two/two.js
        

      3. Run grunt:

        grunt amd
        

      4. In your browser, open the developer tools and try the following in the console:

        require(['core/local/top', 'core/local/66192/one', 'core/local/66192/two', 'core/local/66192/two/index', 'core/local/66192/two/two'], function(top, one, two, twoindex, twotwo) {top(); one(); two(); twoindex(); twotwo();})
        

        1. Confirm that you see output which includes the following:

          I am module the top local dog
          I am module one
          I am module two
          I am module two/index
          I am module two/two
          

      5. Run grunt with watch:

        grunt watch
        

      6. Open lib/amd/src/66192/two.js in your editor and change it to:

        import desmond from './two/two';
         
        export default () => {
            window.console.log("I am still module two");
            desmond();
        };
        

      7. Save changes to the file
        1. Confirm that the grunt watch produced some output and the file was built:

          2035 im:MDL-66192-master> grunt watch
          Running "watch" task
          >> Listening for changes to files in /Users/nicols/Sites/public_html/im
          >> File changed: lib/amd/src/66192/two.js
          >> Running task amd for files --files=/Users/nicols/Sites/public_html/im/lib/amd/src/66192/two.js
          Running "eslint:amd" (eslint) task
           
          Running "babel:dist" (babel) task
           
          Done.
          

          (Do not stop Grunt)

      8. Open your browser and refresh the page
      9. Run the following in your console:

        require(['core/local/66192/two'], function(two) {two();})
        

        1. Confirm that you see output which includes the following:

          I am module two
          I am module two/two
          

      10. Enable cachejs
      11. Open your browser and refresh the page
      12. Run the following in your console:

        require(['core/local/66192/two'], function(two) {two();})
        

        1. Confirm that you see output which includes the following:

          I am still module two
          I am module two/two
          

      Show
      Ensure that cachejs is disabled Download the attached 66192.zip file and unzip it in your document root This should add the following new files: lib/amd/src/local/top.js lib/amd/src/local/66192/one.js lib/amd/src/local/66192/two.js lib/amd/src/local/66192/two/index.js lib/amd/src/local/66192/two/two.js Run grunt : grunt amd In your browser, open the developer tools and try the following in the console: require(['core/local/top', 'core/local/66192/one', 'core/local/66192/two', 'core/local/66192/two/index', 'core/local/66192/two/two'], function(top, one, two, twoindex, twotwo) {top(); one(); two(); twoindex(); twotwo();}) Confirm that you see output which includes the following: I am module the top local dog I am module one I am module two I am module two/index I am module two/two Run grunt with watch: grunt watch Open lib/amd/src/66192/two.js in your editor and change it to: import desmond from './two/two';   export default () => { window.console.log("I am still module two"); desmond(); }; Save changes to the file Confirm that the grunt watch produced some output and the file was built : 2035 im:MDL-66192-master> grunt watch Running "watch" task >> Listening for changes to files in /Users/nicols/Sites/public_html/im >> File changed: lib/amd/src/66192/two.js >> Running task amd for files --files=/Users/nicols/Sites/public_html/im/lib/amd/src/66192/two.js Running "eslint:amd" (eslint) task   Running "babel:dist" (babel) task   Done. (Do not stop Grunt) Open your browser and refresh the page Run the following in your console: require(['core/local/66192/two'], function(two) {two();}) Confirm that you see output which includes the following: I am module two I am module two/two Enable cachejs Open your browser and refresh the page Run the following in your console: require(['core/local/66192/two'], function(two) {two();}) Confirm that you see output which includes the following: I am still module two I am module two/two
    • Internationals - 3.8 Sprint 3

    Description

      Similar to MDL-50346, we should remove the restriction of preventing subdirectories in the amd src directory.

      As we write more javascript, and we make our javascript more compartmentalised it becomes more and more important to structure our code well.

      Take, for example, the messaging code:

      message/amd/src/
      ├── message_drawer.js
      ├── message_drawer_events.js
      ├── message_drawer_helper.js
      ├── message_drawer_lazy_load_list.js
      ├── message_drawer_router.js
      ├── message_drawer_routes.js
      ├── message_drawer_view_contact.js
      ├── message_drawer_view_contacts.js
      ├── message_drawer_view_contacts_section_contacts.js
      ├── message_drawer_view_contacts_section_requests.js
      ├── message_drawer_view_conversation.js
      ├── message_drawer_view_conversation_constants.js
      ├── message_drawer_view_conversation_patcher.js
      ├── message_drawer_view_conversation_renderer.js
      ├── message_drawer_view_conversation_state_manager.js
      ├── message_drawer_view_group_info.js
      ├── message_drawer_view_overview.js
      ├── message_drawer_view_overview_section.js
      ├── message_drawer_view_search.js
      ├── message_drawer_view_settings.js
      ├── message_notification_preference.js
      ├── message_popover.js
      ├── message_repository.js
      ├── message_user_button.js
      ├── notification_preference.js
      ├── notification_processor.js
      ├── notification_processor_settings.js
      ├── preferences_notifications_list_controller.js
      ├── preferences_processor_form.js
      └── toggle_contact_button.js
      

      It would be much easier to understand this if the code was structured differently:

      .
      ├── drawer
      │   ├── events.js
      │   ├── helper.js
      │   ├── lazy_load_list.js
      │   ├── router.js
      │   ├── routes.js
      │   └── view
      │       ├── contact.js
      │       ├── contacts
      │       │   ├── section_contacts.js
      │       │   └── section_requests.js
      │       ├── contacts.js
      │       ├── conversation
      │       │   ├── constants.js
      │       │   ├── patcher.js
      │       │   ├── renderer.js
      │       │   └── state_manager.js
      │       ├── conversation.js
      │       ├── group_info.js
      │       ├── overview
      │       │   └── section.js
      │       ├── overview.js
      │       ├── search.js
      │       └── settings.js
      ├── drawer.js
      ├── message_notification_preference.js
      ├── message_popover.js
      ├── message_repository.js
      ├── message_user_button.js
      ├── notification_preference.js
      ├── notification_processor.js
      ├── notification_processor_settings.js
      ├── preferences_notifications_list_controller.js
      ├── preferences_processor_form.js
      └── toggle_contact_button.js
      

      In ES6 and AMD this is just as easy - it's just a case of adding an extra slash in the import line:

      import Constants from 'core_message/drawer/view/conversation/constants';
      

      We can also make use of requireJS relative URLs:

      import Constants from './conversation/constants';
      

      And we can write entrypoints like a single message/amd/src/drawer/view/conversation/index.js:

      import Constants from './constants';
      import Renderer from './renderer';
       
      export {Constants, Renderer};
      

      Attachments

        Issue Links

          Activity

            People

              dobedobedoh Andrew Lyons
              dobedobedoh Andrew Lyons
              Mathew May Mathew May
              Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
              Janelle Barcega Janelle Barcega
              David Woloszyn, Huong Nguyen, Jake Dallimore, Meirza, Michael Hawkins, Raquel Ortega, Safat Shahin, Stevani Andolo
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                18/Nov/19

                Time Tracking

                  Estimated:
                  Original Estimate - 1 day Original Estimate - 1 day
                  1d
                  Remaining:
                  Time Spent - 1 day, 1 hour, 15 minutes Remaining Estimate - 3 hours, 40 minutes
                  3h 40m
                  Logged:
                  Time Spent - 1 day, 1 hour, 15 minutes Remaining Estimate - 3 hours, 40 minutes
                  1d 1h 15m