feat(ui/app-vite/app-webpack): convert UI pkg to ESM

* add ui/package.json > exports * drop dist/transforms/import-transformation.js (should be handled by CLIs through dist/transforms/import-map.json) * convert UI build system to ESM * drop ui/lang/*.mjs + *.js and replace with ESM *.js * drop ui/wrappers/*.mjs + *.js and replace with *.js + *.cjs * update q/app-vite + q/app-webpack + vite-plugin to the newer specs
quasarframework · Apr 30, 2024 · a7f5fc0 · a7f5fc0
1 parent ab0c9bf
commit a7f5fc0
Show file tree

Hide file tree

Showing 257 changed files with 827 additions and 14,549 deletions.
diff --git a/app-vite/lib/config-tools.js b/app-vite/lib/config-tools.js
@@ -252,8 +252,7 @@ export function createNodeEsbuildConfig (quasarConf, { format }) {
     sourcemap: quasarConf.metaConf.debugging === true ? 'inline' : false,
     minify: quasarConf.build.minify !== false,
     alias: {
-      ...quasarConf.build.alias,
-      'quasar/wrappers': format === 'esm' ? 'quasar/wrappers/index.mjs' : 'quasar/wrappers/index.js'
+      ...quasarConf.build.alias
     },
     resolveExtensions: [ format === 'esm' ? '.mjs' : '.cjs', '.js', '.mts', '.ts', '.json' ],
     // we use a fresh list since this can be tampered with by the user:

diff --git a/app-vite/lib/modes/ssr/ssr-devserver.js b/app-vite/lib/modes/ssr/ssr-devserver.js
@@ -5,6 +5,7 @@ import { createServer } from 'vite'
 import chokidar from 'chokidar'
 import debounce from 'lodash/debounce.js'
 import serialize from 'serialize-javascript'
+import { green } from 'kolorist'
 
 import { AppDevserver } from '../../app-devserver.js'
 import { getPackage } from '../../utils/get-package.js'
@@ -20,7 +21,7 @@ const autoRemove = 'document.currentScript.remove()'
 
 function logServerMessage (title, msg, additional) {
   log()
-  info(`${ msg }${ additional !== void 0 ? ` ${ dot } ${ additional }` : '' }`, title)
+  info(`${ msg }${ additional !== void 0 ? ` ${ green(dot) } ${ additional }` : '' }`, title)
 }
 
 let renderSSRError

diff --git a/app-vite/lib/quasar-config-file.js b/app-vite/lib/quasar-config-file.js
@@ -251,9 +251,6 @@ export class QuasarConfigFile {
       format: appPaths.quasarConfigOutputFormat,
       bundle: true,
       packages: 'external',
-      alias: {
-        'quasar/wrappers': appPaths.quasarConfigOutputFormat === 'esm' ? 'quasar/wrappers/index.mjs' : 'quasar/wrappers/index.js'
-      },
       banner: {
         js: quasarConfigBanner
       },
@@ -670,6 +667,20 @@ export class QuasarConfigFile {
     cfg.framework.directives = getUniqueArray(cfg.framework.directives)
     cfg.framework.plugins = getUniqueArray(cfg.framework.plugins)
 
+    const { lang, iconSet } = cfg.framework
+
+    if (lang !== void 0) {
+      cfg.framework.lang = lang.indexOf('/') === true
+        ? lang
+        : `quasar/lang/${ lang }.js`
+    }
+
+    if (iconSet !== void 0) {
+      cfg.framework.iconSet = iconSet.indexOf('/') === true
+        ? iconSet
+        : `quasar/icon-set/${ iconSet }.js`
+    }
+
     Object.assign(cfg.metaConf, {
       packageTypeBasedExtension: this.#ctx.pkg.appPkg.type === 'module' ? 'js' : 'mjs',
       hasLoadingBarPlugin: cfg.framework.plugins.includes('LoadingBar'),

diff --git a/app-vite/package.json b/app-vite/package.json
@@ -103,7 +103,7 @@
     "electron-builder": ">= 22",
     "electron-packager": ">= 15",
     "pinia": "^2.0.0",
-    "quasar": "^2.14.0",
+    "quasar": "^2.16.0",
     "vue": "^3.2.29",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.0",

diff --git a/app-vite/templates/entry/quasar-user-options.js b/app-vite/templates/entry/quasar-user-options.js
@@ -14,13 +14,13 @@
 const useStatement = [ `config: ${JSON.stringify(framework.config)}` ]
 
 if (framework.lang) { %>
-import lang from '<%= framework.lang.includes('/') ? '' : 'quasar/lang/' %><%= framework.lang %>'
+import lang from '<%= framework.lang %>'
 <%
   useStatement.push('lang')
 }
 
 if (framework.iconSet) { %>
-import iconSet from '<%= framework.iconSet.includes('/') ? '' : 'quasar/icon-set/' %><%= framework.iconSet %>'
+import iconSet from '<%= framework.iconSet %>'
 <%
   useStatement.push('iconSet')
 }

diff --git a/app-webpack/lib/cache/module.quasarMeta.js b/app-webpack/lib/cache/module.quasarMeta.js
@@ -2,13 +2,19 @@ const { getPackage } = require('../utils/get-package.js')
 
 module.exports.createInstance = function createInstance ({ appPaths }) {
   const autoImportData = getPackage('quasar/dist/transforms/auto-import.json', appPaths.appDir)
-  const importTransformation = getPackage('quasar/dist/transforms/import-transformation.js', appPaths.appDir)
+  const importMap = getPackage('quasar/dist/transforms/import-map.json', appPaths.appDir)
 
   return {
     transformAssetUrls: getPackage('quasar/dist/transforms/loader-asset-urls.json', appPaths.appDir),
     autoImport: {
       autoImportData,
-      importTransformation,
+      importTransformation (importName) {
+        const file = importMap[ importName ]
+        if (file === void 0) {
+          throw new Error('Unknown import from Quasar: ' + importName)
+        }
+        return 'quasar/' + file
+      },
 
       compRegex: {
         kebab: new RegExp(autoImportData.regex.kebabComponents || autoImportData.regex.components, 'g'),

diff --git a/app-webpack/lib/config-tools.js b/app-webpack/lib/config-tools.js
@@ -479,8 +479,7 @@ module.exports.createNodeEsbuildConfig = async function createNodeEsbuildConfig
     sourcemap: quasarConf.metaConf.debugging === true ? 'inline' : false,
     minify: quasarConf.build.minify !== false,
     alias: {
-      ...quasarConf.build.alias,
-      'quasar/wrappers': format === 'esm' ? 'quasar/wrappers/index.mjs' : 'quasar/wrappers/index.js'
+      ...quasarConf.build.alias
     },
     resolveExtensions: [ format === 'esm' ? '.mjs' : '.cjs', '.js', '.mts', '.ts', '.json' ],
     // we use a fresh list since this can be tampered with by the user:

diff --git a/app-webpack/lib/modes/ssr/ssr-config.js b/app-webpack/lib/modes/ssr/ssr-config.js
@@ -97,9 +97,6 @@ const quasarSsrConfig = {
         appPaths.resolve.entry('server-entry.js')
       )
 
-    webpackChain.resolve.alias
-      .set('quasar$', 'quasar/dist/quasar.cjs.prod.js')
-
     webpackChain.target('node')
 
     if (quasarConf.metaConf.debugging) {

diff --git a/app-webpack/lib/modes/ssr/ssr-devserver.js b/app-webpack/lib/modes/ssr/ssr-devserver.js
@@ -5,6 +5,7 @@ const webpack = require('webpack')
 const webpackDevMiddleware = require('webpack-dev-middleware')
 const webpackHotMiddleware = require('webpack-hot-middleware')
 const { createDevRenderer } = require('@quasar/ssr-helpers/create-renderer.js')
+const { green } = require('kolorist')
 
 const { getSsrHtmlTemplateFn } = require('../../utils/html-template.js')
 const { getClientManifest } = require('./plugin.webpack.client-side.js')
@@ -21,7 +22,7 @@ const doubleSlashRE = /\/\//g
 
 function logServerMessage (title, msg, additional) {
   log()
-  info(`${ msg }${ additional !== void 0 ? ` ${ dot } ${ additional }` : '' }`, title)
+  info(`${ msg }${ additional !== void 0 ? ` ${ green(dot) } ${ additional }` : '' }`, title)
 }
 
 let renderSSRError

diff --git a/app-webpack/lib/quasar-config-file.js b/app-webpack/lib/quasar-config-file.js
@@ -257,9 +257,6 @@ module.exports.QuasarConfigFile = class QuasarConfigFile {
       format: appPaths.quasarConfigOutputFormat,
       bundle: true,
       packages: 'external',
-      alias: {
-        'quasar/wrappers': appPaths.quasarConfigOutputFormat === 'esm' ? 'quasar/wrappers/index.mjs' : 'quasar/wrappers/index.js'
-      },
       banner: {
         js: quasarConfigBanner
       },
@@ -698,6 +695,20 @@ module.exports.QuasarConfigFile = class QuasarConfigFile {
     cfg.framework.directives = getUniqueArray(cfg.framework.directives)
     cfg.framework.plugins = getUniqueArray(cfg.framework.plugins)
 
+    const { lang, iconSet } = cfg.framework
+
+    if (lang !== void 0) {
+      cfg.framework.lang = lang.indexOf('/') === true
+        ? lang
+        : `quasar/lang/${ lang }.js`
+    }
+
+    if (iconSet !== void 0) {
+      cfg.framework.iconSet = iconSet.indexOf('/') === true
+        ? iconSet
+        : `quasar/icon-set/${ iconSet }.js`
+    }
+
     Object.assign(cfg.metaConf, {
       hasLoadingBarPlugin: cfg.framework.plugins.includes('LoadingBar'),
       hasMetaPlugin: cfg.framework.plugins.includes('Meta')

diff --git a/app-webpack/package.json b/app-webpack/package.json
@@ -132,9 +132,9 @@
     "@electron/packager": ">= 18",
     "electron-builder": ">= 22",
     "electron-packager": ">= 15",
-    "eslint": "^8.11.0",
+    "eslint": "^8.57.0",
     "pinia": "^2.0.0",
-    "quasar": "^2.14.0",
+    "quasar": "^2.16.0",
     "vue": "^3.2.29",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.0",

diff --git a/app-webpack/templates/entry/quasar-user-options.js b/app-webpack/templates/entry/quasar-user-options.js
@@ -14,13 +14,13 @@
 const useStatement = [ `config: ${JSON.stringify(framework.config)}` ]
 
 if (framework.lang) { %>
-import lang from '<%= framework.lang.includes('/') ? '' : 'quasar/lang/' %><%= framework.lang %>'
+import lang from '<%= framework.lang %>'
 <%
   useStatement.push('lang')
 }
 
 if (framework.iconSet) { %>
-import iconSet from '<%= framework.iconSet.includes('/') ? '' : 'quasar/icon-set/' %><%= framework.iconSet %>'
+import iconSet from '<%= framework.iconSet %>'
 <%
   useStatement.push('iconSet')
 }