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

Add a new transpilation tool for ES6

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Please test on all supported browsers

      1. Firefox seems to be fairly bad with handling source maps, in particular it seems to struggle to correctly handle source maps for ES6 modules (in this case str.js). You may need to close the tab and open in a new one and/or reload the page a few times for it to correctly parse the source maps. This is consistent with it's behaviour on other projects as well.
      2. Firefox requires you to enable "mapping" in the variable scope panel when debugging in order to see the proper variable names instead of the shortened ones.

      Test built files

      1. Create a site with a user and enrol them in a few courses
      2. Log in as admin and make sure “cachejs” is enabled and debugging is off
      3. Purge the caches
      4. Log in as the user
      5. View the dashboard
      6. CONFIRM it all loads without any errors (check the console in your browser’s web dev tools)
      7. Open the messaging drawer and try to message someone / search / what ever
      8. CONFIRM it all loads correctly

      Test source maps

      1. Log in as admin and turn off “cachejs”
      2. Open the dev tools in your browser and view the source files
      3. CONFIRM that you see the list of JavaScript modules in the source tree. The should be named according to their location on disk in the Moodle source.
      4. Click on one of the JS modules that is loading on that page to view it in the dev tools
      5. CONFIRM that you see the unminified original source (same as what is on disk in the /amd/src/ folder)
      6. Add a break point in and reload the page
      7. CONFIRM the browser breaks when it hits the breakpoint you added
      8. CONFIRM that you can step through the code execution

      Test file without a source map

      1. Pick an AMD file from core and delete it's source map
        • E.g. delete lib/amd/build/ajax.min.js.map
      2. Log in as admin and turn off “cachejs”
      3. Open the dev tools in your browser and view the source files
      4. CONFIRM that you still see ajax.js in the list of files (even though you deleted it's source map)
      5. View the file and add a breakpoint
      6. Interact with the Moodle UI to trigger the breakpoint
        • E.g. if you're using ajax.js then opening the message drawer will trigger it
      7. CONFIRM that the code breaks at your breakpoint
      8. CONFIRM that you can step through the code execution

      Test plugin from previous version of Moodle

      1. Log in as admin
      2. Install the attached test block (block_counter.zip)
      3. Add the "Counter" block to a course
      4. Open the dev tools in your browser and view the source files
      5. CONFIRM that you can see the Javascript source files for the counter block
      6. Add a breakpoint into the javascript for the counter block
      7. CONFIRM that the javascript breaks on that point
        • You may need to reload the page to hit the breakpoint depending on where you added it
      8. CONFIRM that you can step through the code execution

      Test backwards compatibility with older versions of Moodle

      1. Create a Moodle site that doesn't have the changes from this patch (older site)
      2. Copy the lib/amd/build/ajax.min.js from the site with this patch to the site without this patch
        • We're testing to make sure that Javascript built with the new build process will still work in older sites
      3. Log into the older site as admin
      4. Ensure "cachejs" is enabled (we want it to use the build versions of the javascript)
      5. Purge the caches to make sure it loads the new version we copied in
      6. Interact with the site to trigger ajax requests, e.g. use the message drawer, view the dashboard etc
      7. CONFIRM it works as expected

      Test a lazy loaded AMD file

      1. Log in as admin
      2. View the /lib/tests/other/chartjstestpage.php page in your Moodle site
      3. CONFIRM that the charts load
      4. Open the dev tools in your browser and go to the sources
      5. CONFIRM that chartjs-lazy.js is loaded

      Test grunt watch without Watchman

      1. Without installing Watchman, run “grunt watch”.
      2. CONFIRM that you see a message recommending that you install Watchman but the old grunt watch still runs
      3. Modify a JavaScript file
      4. Save the changes
      5. CONFIRM that the grunt watch picks up the change and rebuilds only that file (this will take ages on MacOS which is why I added Watchman support)
      6. Log into your Moodle site as admin
      7. Open the file you modified in the browser's dev tools
      8. CONFIRM that you see the changes that you made

      Test grunt watch with Watchman

      1. Install Watchman
      2. Run “grunt watch”
      3. CONFIRM that you don’t see a message about installing Watchman
      4. Modify one of the files that is being watched (AMD, YUI, SCSS, LESS, CSS, behat feature file)
      5. Save the changes
      6. CONFIRM that your change is picked up and the file you modified is build (or linted depending on the file type). The change detection should be practically instant.
      7. This test will need to be repeated on MacOS, Linux, and Windows.
      8. Log into your Moodle site as admin
      9. Open the file you modified in the browser's dev tools
      10. CONFIRM that you see the changes that you made
      Show
      Please test on all supported browsers Firefox seems to be fairly bad with handling source maps, in particular it seems to struggle to correctly handle source maps for ES6 modules (in this case str.js). You may need to close the tab and open in a new one and/or reload the page a few times for it to correctly parse the source maps. This is consistent with it's behaviour on other projects as well. Firefox requires you to enable "mapping" in the variable scope panel when debugging in order to see the proper variable names instead of the shortened ones. Test built files Create a site with a user and enrol them in a few courses Log in as admin and make sure “cachejs” is enabled and debugging is off Purge the caches Log in as the user View the dashboard CONFIRM it all loads without any errors (check the console in your browser’s web dev tools) Open the messaging drawer and try to message someone / search / what ever CONFIRM it all loads correctly Test source maps Log in as admin and turn off “cachejs” Open the dev tools in your browser and view the source files CONFIRM that you see the list of JavaScript modules in the source tree. The should be named according to their location on disk in the Moodle source. Click on one of the JS modules that is loading on that page to view it in the dev tools CONFIRM that you see the unminified original source (same as what is on disk in the /amd/src/ folder) Add a break point in and reload the page CONFIRM the browser breaks when it hits the breakpoint you added CONFIRM that you can step through the code execution Test file without a source map Pick an AMD file from core and delete it's source map E.g. delete lib/amd/build/ajax.min.js.map Log in as admin and turn off “cachejs” Open the dev tools in your browser and view the source files CONFIRM that you still see ajax.js in the list of files (even though you deleted it's source map) View the file and add a breakpoint Interact with the Moodle UI to trigger the breakpoint E.g. if you're using ajax.js then opening the message drawer will trigger it CONFIRM that the code breaks at your breakpoint CONFIRM that you can step through the code execution Test plugin from previous version of Moodle Log in as admin Install the attached test block (block_counter.zip) Add the "Counter" block to a course Open the dev tools in your browser and view the source files CONFIRM that you can see the Javascript source files for the counter block Add a breakpoint into the javascript for the counter block CONFIRM that the javascript breaks on that point You may need to reload the page to hit the breakpoint depending on where you added it CONFIRM that you can step through the code execution Test backwards compatibility with older versions of Moodle Create a Moodle site that doesn't have the changes from this patch (older site) Copy the lib/amd/build/ajax.min.js from the site with this patch to the site without this patch We're testing to make sure that Javascript built with the new build process will still work in older sites Log into the older site as admin Ensure "cachejs" is enabled (we want it to use the build versions of the javascript) Purge the caches to make sure it loads the new version we copied in Interact with the site to trigger ajax requests, e.g. use the message drawer, view the dashboard etc CONFIRM it works as expected Test a lazy loaded AMD file Log in as admin View the /lib/tests/other/chartjstestpage.php page in your Moodle site CONFIRM that the charts load Open the dev tools in your browser and go to the sources CONFIRM that chartjs-lazy.js is loaded Test grunt watch without Watchman Without installing Watchman, run “grunt watch”. CONFIRM that you see a message recommending that you install Watchman but the old grunt watch still runs Modify a JavaScript file Save the changes CONFIRM that the grunt watch picks up the change and rebuilds only that file (this will take ages on MacOS which is why I added Watchman support) Log into your Moodle site as admin Open the file you modified in the browser's dev tools CONFIRM that you see the changes that you made Test grunt watch with Watchman Install Watchman Run “grunt watch” CONFIRM that you don’t see a message about installing Watchman Modify one of the files that is being watched (AMD, YUI, SCSS, LESS, CSS, behat feature file) Save the changes CONFIRM that your change is picked up and the file you modified is build (or linted depending on the file type). The change detection should be practically instant. This test will need to be repeated on MacOS, Linux, and Windows. Log into your Moodle site as admin Open the file you modified in the browser's dev tools CONFIRM that you see the changes that you made
    • Affected Branches:
      MOODLE_36_STABLE, MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_38_STABLE
    • Pull Master Branch:
      MDL-62497-master-final
    • Story Points:
      1
    • Sprint:
      Sprint 1 - Investimagation, Sprint 2 - Experimental

      Description

      Need to look at a transpilation tool for ES6.
      It would be nice if it transpiled to and AMD module, and took precedent over the existing AMD modules if there is a name clash.
      This way we can migrate existing AMD code to ES6 native, without breaking existing AMD modules using that code.

        Balsamiq Wireframes

          Attachments

          1. block_counter.zip
            3 kB
          2. MDL-62497.bmpr
            15 kB
          3. sourcemaps.png
            sourcemaps.png
            741 kB

            Issue Links

              Activity

                People

                • Votes:
                  7 Vote for this issue
                  Watchers:
                  16 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Fix Release Date:
                    11/Nov/19

                    Time Tracking

                    Estimated:
                    Original Estimate - 5 hours Original Estimate - 5 hours
                    5h
                    Remaining:
                    Remaining Estimate - 0 minutes
                    0m
                    Logged:
                    Time Spent - 4 weeks, 3 hours
                    4w 3h