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

Allow subdirectories for AMD modules

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Minor Minor
    • 3.8
    • 3.8
    • JavaScript
    • 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

      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};

        1. 66192.zip
          2 kB
        2. image-2019-08-01-09-10-06-744.png
          image-2019-08-01-09-10-06-744.png
          197 kB

            dobedobedoh Andrew Lyons
            dobedobedoh Andrew Lyons
            Mathew May Mathew May
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

                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

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.