✨Dev Dashboard: SSR'd Preact Components Using the Rollup JS API #18796

torch2424 · 2018-10-17T22:33:15Z

Inspired by an offline discussion regarding #18719 .

This uses the Rollup JS API to create bundles for components as we serve them on their respective routes. This can be improved in the future, and do things like server side pre rendering for Preact.

This is currently made to "fit in" to the current architecture, though this can be improved as we move out more html snippets into respective JS components.

This increases our "/" by ~20KB, and initial bundling takes ~1.5s from my experience.

This also implements a flag for caching the routes that we generate bundles for 😄

Example

…v-dashboard-rollup-js-api

kristoferbaxter · 2018-10-17T22:50:05Z

build-system/app-index/components/proxy-form.js

+    super();
+    this.setState({
+      proxyInput: '',
+    });


No need to setState from the constructor, can create the state object with the default values.

Suggested change

});

constructor() {

super();

this.state = { proxyInput: '' };

}

kristoferbaxter · 2018-10-17T22:54:17Z

build-system/app-index/components/proxy-form.js

+    this.setState({
+      ...this.state,
+      proxyInput: event.target.value,
+    });


The only item modified can be updated here.

this.setState({proxyInput:event.target.value});

If you're looking for previous state, its likely a good idea to use the other signature for setState.

setState<K extends keyof StateType>(state:Pick<StateType, K>, callback?:() => void):void; setState<K extends keyof StateType>(fn:(prevState:StateType, props:PropsType) => Pick<StateType, K>, callback?:() => void):void;

alanorozco

Cool to leave as-is for now, but maybe I can take a stab at component-izing template.html.

alanorozco · 2018-10-17T22:54:52Z

build-system/app-index/components/proxy-form.js

+              required aria-required="true"
+              placeholder="https://"
+              value={this.state.proxyInput}
+              onChange={event => this.handleProxyInputChange(event)}


This doesn't need to be state-synced, just getting input.value should be fine.

alanorozco · 2018-10-17T22:55:02Z

build-system/app-index/components/proxy-form.js

+        <form id="proxy-form" onSubmit={event => this.handleSubmit(event)}>
+          <label for="proxy-input">
+            <span>Load URL by Proxy</span>
+            {/*


This comment is obsolete now :)

kristoferbaxter · 2018-10-17T22:58:22Z

build-system/app-index/components/proxy-form.js

+    });
+  }
+
+  handleSubmit(event) {


Can use the arrow syntax when defining this method and autobind this to avoid doing so in the render loop.

handleSubmit = event => { event.preventDefault(); window.location = `/proxy/s/${this.state.proxyInput.replace(/^http(s?):\/\//i, '')}`; }

build-system/app-index/components/proxy-form.js

alanorozco

Since this is being bundled on serve-time, is there any way we can pass arguments as part of the build?

This is interesting to pass component children and get rid of our comment-replacement-output scheme.

kristoferbaxter · 2018-10-17T23:01:56Z

package.json

@@ -166,6 +167,10 @@
    "request": "2.88.0",
    "rimraf": "2.6.2",
    "rocambole": "0.7.0",
+    "rollup": "^0.66.6",


Likely want to pin these dependencies and let renovate update them.

Which means you'll need some tests to ensure updates don't break anything!

torch2424 · 2018-10-18T00:24:35Z

@alanorozco Yes definitely! We should be able to just pass in components. Let's try and do this in another PR, once this gets in 😄

Also, need to write tests per @kristoferbaxter 's comment 😄

alanorozco

@torch2424 One more thing I forgot, this will not update the file listings unless the server is restarted. We need to be serving the listing state some other way.

torch2424 · 2018-10-18T00:34:32Z

@alanorozco Yes, after discussing with @kristoferbaxter , We can try and go down the JSON Rest API approach.

Let's handle that in another PR though 😄

torch2424 · 2018-10-18T01:58:06Z

@kristoferbaxter @erwinmombay @alanorozco

Added tests, and all the gulp stuff to get tests running with travis and everything.

This should be good to go for another round of reviews! 😄

alanorozco · 2018-10-18T02:39:46Z

build-system/app-index/components/proxy-form.js

+  render() {
+    return (
+      <div class="block proxy-form-container">
+        <form id="proxy-form" onSubmit={this.handleSubmit}>


Super-nit: Rename handleSubmit to submit.

alanorozco · 2018-10-18T02:40:55Z

build-system/app.js

@@ -62,11 +62,19 @@ app.get('/serve_mode=:mode', (req, res) => {
 });

 if (!global.AMP_TESTING) {
-  app.get('/', serveIndex);
+
+  if (


nit: use common-style:

if (process.env.DISABLE_DEV_DASHBOARD_CACHE && process.env.DISABLE_DEV_DASHBOARD_CACHE !== 'false') { // ...

…v-dashboard-rollup-js-api

torch2424 · 2018-10-18T20:18:55Z

@alanorozco

Made your requested changes 😄

torch2424 · 2018-10-18T22:03:20Z

@erwinmombay Said to just modify the determineBuildTarget, that way we get the correct target set for files, and that way we can make dev dashboard tests run at the correct time 😄 Other than that, looks good and we can merge

torch2424 · 2018-10-19T00:52:32Z

Got dev dashboard tests running in travis 😄

…roject#18796) * Got a server side rendered bundle * Finished the proxy form component * Allowed disabling/enabling dev dashboard cache * Fixed caching issues * Added file header * Fixed all build-system errors * Made PR Changes * Started tests * Got dev dashboard tests running * Added a nice dev dashboard message for unit tests * Fixed lint errors and things * Made PR Changes * Added support for DEV_DASHBOARD Parallelization and targeting * Fixed dev dashboard tests not running in travis * Linr fix

rsimha · 2019-02-19T21:31:46Z

@torch2424 Sorry to bump such an old PR. I just noticed that the dev dashboard test output is pretty verbose. See https://travis-ci.org/ampproject/amphtml/jobs/493956091#L1523-L1607

Any chance you can use the same dots reporters that are used by the unit and integration tests?

amphtml/build-system/tasks/karma.conf.js

Lines 75 to 97 in b843500

    
           reporters: ['super-dots', 'karmaSimpleReporter'], 
        
           superDotsReporter: { 
        
             nbDotsPerLine: 100000, 
        
             color: { 
        
               success: 'green', 
        
               failure: 'red', 
        
               ignore: 'yellow', 
        
             }, 
        
             icon: { 
        
               success: '●', 
        
               failure: '●', 
        
               ignore: '○', 
        
             }, 
        
           }, 
        
           specReporter: { 
        
             suppressPassed: true, 
        
             suppressSkipped: true, 
        
             suppressFailed: false, 
        
             suppressErrorSummary: true, 
        
             maxLogLines: 20, 
        
           },

torch2424 · 2019-02-20T01:08:37Z

@rsimha Ah, so the output from that is actually the tests that were introduced by @alanorozco in #20651

😄

alanorozco · 2019-02-20T01:13:09Z

@torch2424 Totally, but I hadn't noticed that they output like that all the time. If any of you, @rsimha or @torch2424 can point me to how to plug-in this karma config to our devdash tests I can do that.

rsimha · 2019-02-27T15:02:15Z

This was done in #21125

torch2424 added 6 commits October 17, 2018 13:55

Got a server side rendered bundle

bca76d6

Finished the proxy form component

a11ab3a

Allowed disabling/enabling dev dashboard cache

8f315c6

Fixed caching issues

b06a0cc

Added file header

aaec230

Merge branch 'master' of https://github.com/torch2424/amphtml into de…

84b8da8

…v-dashboard-rollup-js-api

torch2424 assigned alanorozco Oct 17, 2018

torch2424 requested review from alanorozco and erwinmombay October 17, 2018 22:33

googlebot added the cla: yes label Oct 17, 2018

torch2424 mentioned this pull request Oct 17, 2018

✨Added Preact to the Dev Dashboard using Rollup #18719

Closed

Fixed all build-system errors

2560931

kristoferbaxter reviewed Oct 17, 2018

View reviewed changes

alanorozco requested changes Oct 17, 2018

View reviewed changes

kristoferbaxter reviewed Oct 17, 2018

View reviewed changes

build-system/app-index/components/proxy-form.js Show resolved Hide resolved

alanorozco reviewed Oct 17, 2018

View reviewed changes

kristoferbaxter reviewed Oct 17, 2018

View reviewed changes

Made PR Changes

182943f

alanorozco reviewed Oct 18, 2018

View reviewed changes

torch2424 added 4 commits October 17, 2018 17:50

Started tests

8ba9253

Got dev dashboard tests running

e6b398b

Added a nice dev dashboard message for unit tests

768e1a9

Fixed lint errors and things

edaed6f

torch2424 requested a review from kristoferbaxter October 18, 2018 01:57

alanorozco reviewed Oct 18, 2018

View reviewed changes

torch2424 added 2 commits October 18, 2018 13:16

Merge branch 'master' of https://github.com/torch2424/amphtml into de…

5f15abc

…v-dashboard-rollup-js-api

Made PR Changes

a5f17b7

alanorozco approved these changes Oct 18, 2018

View reviewed changes

kristoferbaxter approved these changes Oct 18, 2018

View reviewed changes

torch2424 added 3 commits October 18, 2018 16:45

Added support for DEV_DASHBOARD Parallelization and targeting

ccd60ca

Fixed dev dashboard tests not running in travis

4901757

Linr fix

fb4c1a1

torch2424 merged commit 1146a59 into ampproject:master Oct 19, 2018

torch2424 deleted the dev-dashboard-rollup-js-api branch October 19, 2018 01:05

rsimha mentioned this pull request May 25, 2021

🏗 Auto-format dev dashboard tests #34546

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨Dev Dashboard: SSR'd Preact Components Using the Rollup JS API #18796

✨Dev Dashboard: SSR'd Preact Components Using the Rollup JS API #18796

torch2424 commented Oct 17, 2018

kristoferbaxter Oct 17, 2018

kristoferbaxter Oct 17, 2018

alanorozco left a comment •

edited

Loading

alanorozco Oct 17, 2018

alanorozco Oct 17, 2018

kristoferbaxter Oct 17, 2018

alanorozco left a comment

kristoferbaxter Oct 17, 2018

torch2424 commented Oct 18, 2018

alanorozco left a comment

torch2424 commented Oct 18, 2018

torch2424 commented Oct 18, 2018

alanorozco Oct 18, 2018

alanorozco Oct 18, 2018

torch2424 commented Oct 18, 2018

torch2424 commented Oct 18, 2018

torch2424 commented Oct 19, 2018

rsimha commented Feb 19, 2019

torch2424 commented Feb 20, 2019

alanorozco commented Feb 20, 2019

rsimha commented Feb 27, 2019

-    });
+  constructor() {
+    super();
+    this.state = { proxyInput: '' };
+  }

✨Dev Dashboard: SSR'd Preact Components Using the Rollup JS API #18796

✨Dev Dashboard: SSR'd Preact Components Using the Rollup JS API #18796

Conversation

torch2424 commented Oct 17, 2018

Example

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alanorozco left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alanorozco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

torch2424 commented Oct 18, 2018

alanorozco left a comment

Choose a reason for hiding this comment

torch2424 commented Oct 18, 2018

torch2424 commented Oct 18, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

torch2424 commented Oct 18, 2018

torch2424 commented Oct 18, 2018

torch2424 commented Oct 19, 2018

rsimha commented Feb 19, 2019

torch2424 commented Feb 20, 2019

alanorozco commented Feb 20, 2019

rsimha commented Feb 27, 2019

alanorozco left a comment •

edited

Loading