Quasar: Build-time evaluation

Created on 17 Jun 2019  路  5Comments  路  Source: quasarframework/quasar

Is your feature request related to a problem? Please describe.
Problem: runtime evaluation of platform (Electron, Cordova, web) is repetitive, inefficient, unnecessary.

Describe the solution you'd like
To evaluate variables that depend on a specific platform at build time, so the resulting executable contains only the static value

Describe alternatives you've considered
I looked into how internationalization works, not sure if this is solved the same way. Perhaps using .env files could help?

Additional context
Simple example of waste:

<q-button 
  :size="this.$q.is.electron ? 'lg' : 'sm'" 
  :class="this.$q.is.electron ? 'q-ma-md' : 'q-mx-sm q-my-none'"
  :label="this.$q.is.electron ? 'Update My Preferences' : 'Update Prefs'">

Even if this was refactored to do just one evaluation, it still is one too many. Further, it still occurs every time the page is loaded, so in many apps, it still may run many times. And refactoring would likely mean multiple copies of the same HTML sections, meaning work for the devlopers to keep multiple versions in sync (or risk errors).

feature request

Most helpful comment

Agreed. I have read most of it -- whether I remember all of it is another question. And to be fair, this was not in 0.17. :-)
Really great work! I hope to help out with more PRs in the future.

All 5 comments

<q-button 
  :size="btnSize" 
  :class="btnClass"
  :label="btnLabel">

// created() hook so Vue won't unnecessarily wrap these hard-coded strings (perf);
// but you can place this in data() too should you wish (presenting created() because it really makes sense here)
created () {
  this.btnSize = process.env.MODE === 'electron' ? 'lg' : 'sm',
  this.btnClass = process.env.MODE === 'electron' ? 'q-ma-md' : 'q-mx-sm q-my-none',
  this.btnLabel = process.env.MODE === 'electron' ? 'Update My Preferences' : 'Update Prefs'

Your final bundle will contain, based on if building for Electron or not, the following (showing a build for Electron):

created () {
   this.btnSize = 'lg'
   this.btnClass = 'q-ma-md'
   this.btnLabel = 'Update My Preferences'

Handling process.env.

Thank you! Was searching all through the docs for similar concepts, like i18n and qenv/dotenv. Quasar has so many features -- in this case having both process.env.MODE === 'electron' and this.$q.is.electron -- that some of the best features are hidden.

They're not hidden, but you just need to go over all doc pages :) Quasar is packed with A LOT of features...

Agreed. I have read most of it -- whether I remember all of it is another question. And to be fair, this was not in 0.17. :-)
Really great work! I hope to help out with more PRs in the future.

Was this page helpful?
0 / 5 - 0 ratings