feat(app-webpack): require type=module

quasarframework · Nov 29, 2024 · a573db6 · a573db6
1 parent 5214116
commit a573db6
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 138 deletions.
diff --git a/app-webpack/lib/modes/electron/electron-builder.js b/app-webpack/lib/modes/electron/electron-builder.js
@@ -50,7 +50,7 @@ module.exports.QuasarModeBuilder = class QuasarModeBuilder extends AppBuilder {
     delete pkg.browserslist
     delete pkg.scripts
 
-    pkg.main = './electron-main.mjs'
+    pkg.main = './electron-main.js'
 
     if (typeof this.quasarConf.electron.extendPackageJson === 'function') {
       this.quasarConf.electron.extendPackageJson(pkg)

diff --git a/app-webpack/lib/modes/electron/electron-config.js b/app-webpack/lib/modes/electron/electron-config.js
@@ -63,8 +63,8 @@ const quasarElectronConfig = {
 
     cfg.entryPoints = [ quasarConf.sourceFiles.electronMain ]
     cfg.outfile = quasarConf.ctx.dev === true
-      ? appPaths.resolve.entry('electron-main.mjs')
-      : join(quasarConf.build.distDir, 'UnPackaged/electron-main.mjs')
+      ? appPaths.resolve.entry('electron-main.js')
+      : join(quasarConf.build.distDir, 'UnPackaged/electron-main.js')
 
     cfg.define = {
       ...cfg.define,

diff --git a/app-webpack/lib/modes/electron/electron-devserver.js b/app-webpack/lib/modes/electron/electron-devserver.js
@@ -134,7 +134,7 @@ module.exports.QuasarModeDevserver = class QuasarModeDevserver extends AppDevser
       this.#electronExecutable,
       [
         '--inspect=' + quasarConf.electron.inspectPort,
-        this.ctx.appPaths.resolve.entry('electron-main.mjs')
+        this.ctx.appPaths.resolve.entry('electron-main.js')
       ].concat(this.argv._),
       { cwd: this.ctx.appPaths.appDir },
       code => {

diff --git a/app-webpack/lib/modes/ssr/ssr-config.js b/app-webpack/lib/modes/ssr/ssr-config.js
@@ -8,7 +8,6 @@ const {
   createNodeEsbuildConfig, extendEsbuildConfig
 } = require('../../config-tools.js')
 
-const { cliPkg } = require('../../utils/cli-runtime.js')
 const { getBuildSystemDefine } = require('../../utils/env.js')
 const { injectWebpackHtml } = require('../../utils/html-template.js')
 
@@ -171,7 +170,7 @@ const quasarSsrConfig = {
 
     if (ctx.dev) {
       cfg.entryPoints = [ appPaths.resolve.entry('ssr-dev-webserver.js') ]
-      cfg.outfile = appPaths.resolve.entry('compiled-dev-webserver.js')
+      cfg.outfile = appPaths.resolve.entry('compiled-dev-webserver.cjs')
     }
     else {
       cfg.external = [

diff --git a/app-webpack/lib/modes/ssr/ssr-devserver.js b/app-webpack/lib/modes/ssr/ssr-devserver.js
@@ -96,7 +96,7 @@ module.exports.QuasarModeDevserver = class QuasarModeDevserver extends AppDevser
     this.#pathMap = {
       rootFolder: appPaths.appDir,
       publicFolder,
-      serverFile: appPaths.resolve.entry('compiled-dev-webserver.js'),
+      serverFile: appPaths.resolve.entry('compiled-dev-webserver.cjs'),
       serverEntryFile: appPaths.resolve.entry('server-entry.js'),
       resolvePublicFolder () {
         return join(publicFolder, ...arguments)

diff --git a/app-webpack/lib/utils/inject-style-rules.js b/app-webpack/lib/utils/inject-style-rules.js
@@ -30,153 +30,156 @@ function shouldRequireUrl (url) {
   ) === false
 }
 
-function injectRule (chain, pref, lang, test, loader, loaderOptions) {
-  const baseRule = chain.module.rule(lang).test(test)
+async function createRule ({ rule, isModules, pref, loader, loaderOptions }) {
+  if (pref.isServerBuild === true) {
+    rule.use('null-loader')
+      .loader('null-loader')
+    return
+  }
 
-  // rules for <style lang="module">
-  const modulesRule = baseRule.oneOf('modules-query').resourceQuery(/module/)
-  create(modulesRule, true)
+  if (pref.extract) {
+    rule.use('mini-css-extract')
+      .loader(ExtractLoader)
+      .options({ publicPath: '../' })
+  }
+  else {
+    rule.use('vue-style-loader')
+      .loader('vue-style-loader')
+      .options({
+        sourceMap: pref.sourceMap
+      })
+  }
 
-  // rules for *.module.* files
-  const modulesExtRule = baseRule.oneOf('modules-ext').test(/\.module\.\w+$/)
-  create(modulesExtRule, true)
+  const cssLoaderOptions = {
+    sourceMap: pref.sourceMap,
+    url: { filter: shouldRequireUrl },
+    importLoaders:
+      1 // stylePostLoader injected by vue-loader
+      + 1 // postCSS loader
+      + (!pref.extract && pref.minify ? 1 : 0) // postCSS with cssnano
+      + (loader ? (loader === 'sass-loader' ? 2 : 1) : 0)
+  }
 
-  const normalRule = baseRule.oneOf('normal')
-  create(normalRule, false)
+  if (isModules) {
+    Object.assign(cssLoaderOptions, {
+      modules: {
+        localIdentName: '[name]_[local]_[hash:base64:5]'
+      }
+    })
+  }
 
-  function create (rule, modules) {
-    if (pref.isServerBuild === true) {
-      rule.use('null-loader')
-        .loader('null-loader')
-      return
-    }
+  rule.use('css-loader')
+    .loader('css-loader')
+    .options(cssLoaderOptions)
+
+  if (!pref.extract && pref.minify) {
+    // needs to be applied separately,
+    // otherwise it messes up RTL
+    rule.use('cssnano')
+      .loader('postcss-loader')
+      .options({
+        sourceMap: pref.sourceMap,
+        postcssOptions: {
+          plugins: [
+            require('cssnano')({
+              preset: [ 'default', {
+                mergeLonghand: false,
+                convertValues: false,
+                cssDeclarationSorter: false,
+                reduceTransforms: false
+              } ]
+            })
+          ]
+        }
+      })
+  }
 
-    if (pref.extract) {
-      rule.use('mini-css-extract')
-        .loader(ExtractLoader)
-        .options({ publicPath: '../' })
+  // need a fresh copy, otherwise plugins
+  // will keep on adding making N duplicates for each one
+  const { default: postCssConfig } = await import(pref.appPaths.postcssConfigFilename + '?t=' + Date.now())
+  let postCssOpts = { sourceMap: pref.sourceMap, ...postCssConfig }
+
+  if (pref.rtl) {
+    const postcssRTL = require('postcss-rtlcss')
+    const postcssRTLOptions = pref.rtl === true ? {} : pref.rtl
+
+    if (
+      typeof postCssConfig.plugins !== 'function'
+      && (postcssRTLOptions.source === 'ltr' || typeof postcssRTLOptions === 'function')
+    ) {
+      const originalPlugins = postCssOpts.plugins ? [ ...postCssOpts.plugins ] : []
+
+      postCssOpts = ctx => {
+        const plugins = [ ...originalPlugins ]
+        const isClientCSS = quasarCssPaths.every(item => ctx.resourcePath.indexOf(item) === -1)
+
+        plugins.push(postcssRTL(
+          typeof postcssRTLOptions === 'function'
+            ? postcssRTLOptions(isClientCSS, ctx.resourcePath)
+            : {
+                ...postcssRTLOptions,
+                source: isClientCSS ? 'rtl' : 'ltr'
+              }
+        ))
+
+        return { sourceMap: pref.sourceMap, plugins }
+      }
     }
     else {
-      rule.use('vue-style-loader')
-        .loader('vue-style-loader')
-        .options({
-          sourceMap: pref.sourceMap
-        })
+      postCssOpts.plugins.push(postcssRTL(postcssRTLOptions))
     }
+  }
 
-    const cssLoaderOptions = {
-      sourceMap: pref.sourceMap,
-      url: { filter: shouldRequireUrl },
-      importLoaders:
-        1 // stylePostLoader injected by vue-loader
-        + 1 // postCSS loader
-        + (!pref.extract && pref.minify ? 1 : 0) // postCSS with cssnano
-        + (loader ? (loader === 'sass-loader' ? 2 : 1) : 0)
-    }
+  rule.use('postcss-loader')
+    .loader('postcss-loader')
+    .options({ postcssOptions: postCssOpts })
 
-    if (modules) {
-      Object.assign(cssLoaderOptions, {
-        modules: {
-          localIdentName: '[name]_[local]_[hash:base64:5]'
-        }
+  if (loader) {
+    rule.use(loader)
+      .loader(loader)
+      .options({
+        sourceMap: pref.sourceMap,
+        ...loaderOptions
       })
-    }
-
-    rule.use('css-loader')
-      .loader('css-loader')
-      .options(cssLoaderOptions)
-
-    if (!pref.extract && pref.minify) {
-      // needs to be applied separately,
-      // otherwise it messes up RTL
-      rule.use('cssnano')
-        .loader('postcss-loader')
-        .options({
-          sourceMap: pref.sourceMap,
-          postcssOptions: {
-            plugins: [
-              require('cssnano')({
-                preset: [ 'default', {
-                  mergeLonghand: false,
-                  convertValues: false,
-                  cssDeclarationSorter: false,
-                  reduceTransforms: false
-                } ]
-              })
-            ]
-          }
-        })
-    }
 
-    // need a fresh copy, otherwise plugins
-    // will keep on adding making N duplicates for each one
-    delete require.cache[ pref.appPaths.postcssConfigFilename ]
-    const postCssConfig = require(pref.appPaths.postcssConfigFilename)
-    let postCssOpts = { sourceMap: pref.sourceMap, ...postCssConfig }
-
-    if (pref.rtl) {
-      const postcssRTL = require('postcss-rtlcss')
-      const postcssRTLOptions = pref.rtl === true ? {} : pref.rtl
-
-      if (
-        typeof postCssConfig.plugins !== 'function'
-        && (postcssRTLOptions.source === 'ltr' || typeof postcssRTLOptions === 'function')
-      ) {
-        const originalPlugins = postCssOpts.plugins ? [ ...postCssOpts.plugins ] : []
-
-        postCssOpts = ctx => {
-          const plugins = [ ...originalPlugins ]
-          const isClientCSS = quasarCssPaths.every(item => ctx.resourcePath.indexOf(item) === -1)
-
-          plugins.push(postcssRTL(
-            typeof postcssRTLOptions === 'function'
-              ? postcssRTLOptions(isClientCSS, ctx.resourcePath)
-              : {
-                  ...postcssRTLOptions,
-                  source: isClientCSS ? 'rtl' : 'ltr'
-                }
-          ))
-
-          return { sourceMap: pref.sourceMap, plugins }
-        }
+    if (loader === 'sass-loader') {
+      if (loaderOptions?.sassOptions?.syntax === 'indented') {
+        rule.use('quasar-sass-variables-loader')
+          .loader(pref.cssVariables.loader)
+          .options(pref.cssVariables.sass)
       }
       else {
-        postCssOpts.plugins.push(postcssRTL(postcssRTLOptions))
-      }
-    }
-
-    rule.use('postcss-loader')
-      .loader('postcss-loader')
-      .options({ postcssOptions: postCssOpts })
-
-    if (loader) {
-      rule.use(loader)
-        .loader(loader)
-        .options({
-          sourceMap: pref.sourceMap,
-          ...loaderOptions
-        })
-
-      if (loader === 'sass-loader') {
-        if (loaderOptions?.sassOptions?.syntax === 'indented') {
-          rule.use('quasar-sass-variables-loader')
-            .loader(pref.cssVariables.loader)
-            .options(pref.cssVariables.sass)
-        }
-        else {
-          rule.use('quasar-scss-variables-loader')
-            .loader(pref.cssVariables.loader)
-            .options(pref.cssVariables.scss)
-        }
+        rule.use('quasar-scss-variables-loader')
+          .loader(pref.cssVariables.loader)
+          .options(pref.cssVariables.scss)
       }
     }
   }
 }
 
-module.exports.injectStyleRules = function injectStyleRules (chain, pref) {
-  injectRule(chain, pref, 'css', /\.css$/)
-  injectRule(chain, pref, 'stylus', /\.styl(us)?$/, 'stylus-loader', pref.stylusLoaderOptions)
-  injectRule(chain, pref, 'scss', /\.scss$/, 'sass-loader', merge(
+function injectRule (chain, pref, lang, test, loader, loaderOptions) {
+  const baseRule = chain.module.rule(lang).test(test)
+
+  // rules for <style lang="module">
+  const modulesRule = baseRule.oneOf('modules-query').resourceQuery(/module/)
+
+  // rules for *.module.* files
+  const modulesExtRule = baseRule.oneOf('modules-ext').test(/\.module\.\w+$/)
+
+  // rules for normal styles
+  const normalRule = baseRule.oneOf('normal')
+
+  return Promise.all([
+    createRule({ rule: modulesRule, isModules: true, pref, loader, loaderOptions }),
+    createRule({ rule: modulesExtRule, isModules: true, pref, loader, loaderOptions }),
+    createRule({ rule: normalRule, isModules: false, pref, loader, loaderOptions })
+  ])
+}
+
+module.exports.injectStyleRules = async function injectStyleRules (chain, pref) {
+  await injectRule(chain, pref, 'css', /\.css$/)
+  await injectRule(chain, pref, 'stylus', /\.styl(us)?$/, 'stylus-loader', pref.stylusLoaderOptions)
+  await injectRule(chain, pref, 'scss', /\.scss$/, 'sass-loader', merge(
     {
       sassOptions: {
         style: /* required for RTL */ 'expanded',
@@ -186,7 +189,7 @@ module.exports.injectStyleRules = function injectStyleRules (chain, pref) {
     },
     pref.scssLoaderOptions
   ))
-  injectRule(chain, pref, 'sass', /\.sass$/, 'sass-loader', merge(
+  await injectRule(chain, pref, 'sass', /\.sass$/, 'sass-loader', merge(
     {
       sassOptions: {
         style: /* required for RTL */ 'expanded',
@@ -197,5 +200,5 @@ module.exports.injectStyleRules = function injectStyleRules (chain, pref) {
     },
     pref.sassLoaderOptions
   ))
-  injectRule(chain, pref, 'less', /\.less$/, 'less-loader', pref.lessLoaderOptions)
+  await injectRule(chain, pref, 'less', /\.less$/, 'less-loader', pref.lessLoaderOptions)
 }
diff --git a/app-webpack/templates/entry/ssr-prod-webserver.js b/app-webpack/templates/entry/ssr-prod-webserver.js
@@ -37,7 +37,7 @@ const render = getProdRenderFunction({
   vueRenderToString: renderToString,
   basedir: __dirname,
   clientManifest,
-  serverEntry,
+  serverEntry: serverEntry.default,
   renderTemplate,
   renderPreloadTag,
   manualStoreSerialization: <%= ssr.manualStoreSerialization === true %>