Closes: CORE-1143
Test plan:
* load canvas in prod mode in a non-English language. Click around
And make sure everything works
* in prod mode, do a test to compare load time to what’s on beta.
* page load time and js bundle size should be smaller
* click around in the quizzes client apps and the ember grade book
And make sure those things work
Change-Id: I93c28c4a6d22db95cd1c7e59cd3f5221d46fe1ed
Reviewed-on: https://gerrit.instructure.com/143422
Tested-by: Jenkins
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Closes: CORE-2868 CORE-2869
This is needed because without
Doing that, our bundle sizes are going to blow up from the things we
Import from InstUI
Test plan:
* the result of a dynamic export will now give you a object grab bag
That has a “default” property. Not just the thing of whatever the
“default" export was.
* so to test this, go to some page that does a dynamic import (like
the dashboard page) and make sure that still works\
* run a prod build
* make sure that translations still work as before
Change-Id: I3dd1b32216052afd5fbc5d6cec40ea18264f65e9
Reviewed-on: https://gerrit.instructure.com/191578
Tested-by: Jenkins
Reviewed-by: Rob Orton <rob@instructure.com>
QA-Review: Rob Orton <rob@instructure.com>
Product-Review: Rob Orton <rob@instructure.com>
closes: CORE-2749
Now that we use babel-transform-runtime, we can also do this to improve
performance over the existing React.createElement calls by inlining the
result of what it would have returned.
see https://github.com/facebook/react/issues/3228 for why this improves
runtime perf
so for an example, say you have:
const foo = <div className="bar" style={{color: 'red'}}>The Text</div>
normally babel would transform that to:
var foo = React.createElement("div", {
className: "bar",
style: {
color: 'red'
}
}, "The Text");
but this will transform it to:
var foo = _jsx("div", {
className: "bar",
style: {
color: 'red'
}
}, void 0, "The Text");
That React.createElement is a lot more complex and slower at runtime,
This should make things faster at runtime
TEST PLAN:
* bundle sizes should stay the same but js runtime for react “render”ing
Should be faster in production mode
Change-Id: I075d249b9effd0af1b16b9e35c1ddd27696c6955
Reviewed-on: https://gerrit.instructure.com/188865
Tested-by: Jenkins
Reviewed-by: Steven Burnett <sburnett@instructure.com>
QA-Review: Steven Burnett <sburnett@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
closes: CORE-2699 CORE-2700 UIDEV-99
This commit gets canvas-lms itself upgraded to babel 7. To do that we
also had to upgrade jest to v24. We had already got canvas-rce and
canvas-planner on jest24/babel7 but now this gets everything to babel 7.
so you will see a lot of things removed from yarn.lock since we don’t
don’t have to have different versions of everything for babel and jest
The other major thing this does is make it so any JS file in canvas
can become an @instructure/ui-themeable themeable component. This means
you no longer should have to put your css in app/stylesheets for any new
react components that you are writing.
Test plan:
1. Make sure that the perf of `yarn build:js` is on-par with what it was
before. We pass everything through the themeable babel transform now
so there is a chance it is slower. If it is majorly slower, we’ll have
to figure something out.
2. run a production weback build. The common (or any bundle for that
matter should get output exactly the same as it did before)
things to manually qa check:
* in a NODE_ENV=production enviornment, go to
/accounts/site_admin/developer_keys
* click the "+ Developer Key" button, it should open the modal.
(there are selenium tests that do this, but it was one thing that had
to be fixed to get jenkins to pass)
* on a course that is set up as a master course, click on the thing that
opens the blueprint courses tray.
* verify that when you click "Associations" and "Sync History" links in
that tray, that they dynamically load the webpack chunk for the
modal contents for that thing and then the modal is shown
(again, there are selenium specs that test that exact thing but it
is always good to manually test it too)
Change-Id: I802584228962b54480a500f8fe422f45c2dcac4c
Reviewed-on: https://gerrit.instructure.com/183965
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>