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

Allow subdirectories for AMD modules

    XMLWordPrintable

    Details

    • Testing Instructions:
      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
    • Affected Branches:
      MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_38_STABLE
    • Pull Master Branch:
      MDL-66192-master
    • Sprint:
      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

              • Votes:
                0 Vote for this issue
                Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  11/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