[MDL-66192] Allow subdirectories for AMD modules - Moodle Tracker

XML

Word

Printable

Details

Type: Improvement
Status: Closed
Priority: Minor
Resolution: Fixed
Affects Version/s: 3.8
Fix Version/s: 3.8
Component/s: JavaScript
Labels:

Affected Branches:
MOODLE_38_STABLE
Fixed Branches:
MOODLE_38_STABLE
Pull from Repository:
git://github.com/andrewnicols/moodle.git
Pull Master Branch:
~~MDL-66192~~-master
Pull Master Diff URL:
https://github.com/andrewnicols/moodle/compare/f622ee97e3...MDL-66192-master

Testing Instructions:

Hide

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

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

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

- Sort By Name
- Sort By Date
- Ascending
- Descending
- Thumbnails
- List
- Download All

66192.zip
2 kB
24/Jul/19 12:30 PM
image-2019-08-01-09-10-06-744.png
197 kB
01/Aug/19 9:10 AM

Issue Links

caused a regression

MDL-66502 Moodle 3.8 does not load javascript files from previous moodle versions

Closed

has a non-specific relationship to

MDL-50346 Remove the restriction to forbid subdirectories in the templates directory

Closed

is blocked by

MDL-62497 Add a new transpilation tool for ES6

Closed

Activity

People

Assignee:: Andrew Lyons

Reporter:: Andrew Lyons

Peer reviewer:: Mathew May

Integrator:: Eloy Lafuente (stronk7)

Tester:: Janelle Barcega

Participants:: Andrew Lyons, CiBoT, Eloy Lafuente (stronk7), Janelle Barcega, Mathew May

Component watchers:: 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:: 19/Jul/19 4:42 PM

Updated:: 18/Mar/20 6:45 PM

Resolved:: 01/Aug/19 11:42 PM

Fix Release Date:: 18/Nov/19

Time Tracking

Estimated:

Remaining:

3h 40m

Logged:

1d 1h 15m