create-quasar 1.12.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-quasar",
-  "version": "1.12.0",
+  "version": "2.0.1",
   "description": "Scaffolds Quasar Apps, AppExtensions or UI kits",
   "type": "module",
   "author": {

package/scripts/create-test-project.ts

@@ -0,0 +1,64 @@
+import prompts from 'prompts';
+
+type ScriptType = 'js' | 'ts';
+type AppEngine = 'vite-1' | 'vite-2' | 'webpack-3' | 'webpack-4';
+type PackageManager = 'yarn' | 'npm' | 'pnpm';
+
+type CreateProjectOptions = {
+  scriptType: ScriptType;
+  appEngine: AppEngine;
+  packageManager: PackageManager;
+};
+
+export async function createProject({ scriptType, appEngine, packageManager }: CreateProjectOptions) {
+  // To bypass Corepack enforcing what's specified in the closest package.json file that has the 'packageManager' field
+  process.env.COREPACK_ENABLE_STRICT = '0';
+  // See https://github.com/yarnpkg/yarn/issues/9015
+  process.env.SKIP_YARN_COREPACK_CHECK = '1';
+  // To alter the behavior to run correctly within this script
+  process.env.CREATE_TEST_PROJECT_OVERRIDE = 'true';
+
+  prompts.override({
+    projectType: 'app',
+    projectFolder: 'test-project',
+    overwrite: true,
+
+    quasarVersion: 'v2',
+    scriptType: scriptType,
+    engine: appEngine,
+
+    name: 'test-project',
+    productName: 'Test Project',
+    description: 'A test project',
+    author: 'Quasar Team (info@quasar.dev)',
+
+    // The defaults
+    sfcStyle: 'composition-setup',
+    css: 'scss',
+    ...(appEngine === 'vite-1' || appEngine === 'webpack-3'
+      ? {
+          preset: ['lint'],
+          lintConfig: 'prettier',
+        }
+      : {
+          preset: ['eslint'],
+          prettier: true,
+        }),
+
+    packageManager,
+  });
+
+  await import('../index.js');
+}
+
+const args = process.argv.slice(2) as [ScriptType, AppEngine, PackageManager];
+
+void createProject({
+  scriptType: args[0],
+  appEngine: args[1],
+  packageManager: args[2],
+})
+  .catch(error => {
+    console.error(error);
+    process.exit(1);
+  });

package/templates/app/index.js

@@ -3,6 +3,6 @@ export async function script ({ scope, utils }) {
     utils.commonPrompts.scriptType
   ])
 
-  const { script } = await import(`./quasar-v1/index.js`)
+  const { script } = await import(`./quasar-v2/index.js`)
   await script({ scope, utils })
 }

package/templates/app/quasar-v2/index.js

@@ -0,0 +1,56 @@
+export async function script ({ scope, utils }) {
+  await utils.prompts(scope, [
+    {
+      type: 'select',
+      name: 'engine',
+      message: 'Pick Quasar App CLI variant:',
+      initial: 0,
+      choices: [
+        { title: 'Quasar App CLI with Vite', value: 'vite-2', description: 'recommended' },
+        { title: 'Quasar App CLI with Webpack', value: 'webpack-4' }
+      ]
+    },
+    {
+      type: 'text',
+      name: 'name',
+      message: 'Package name:',
+      initial: () => utils.inferPackageName(scope.projectFolderName),
+      validate: (val) =>
+        utils.isValidPackageName(val) || 'Invalid package.json name'
+    },
+
+    utils.commonPrompts.productName,
+    utils.commonPrompts.description,
+  ])
+
+  await utils.injectAuthor(scope)
+
+  await utils.prompts(scope, [
+    {
+      type: 'select',
+      name: 'sfcStyle',
+      message: 'Pick a Vue component style:',
+      initial: 0,
+      choices: [
+        { title: 'Composition API with <script setup>', value: 'composition-setup', description: 'recommended' },
+        { title: 'Composition API', value: 'composition', description: 'recommended' },
+        { title: 'Options API', value: 'options' }
+      ]
+    },
+
+    {
+      type: 'select',
+      name: 'css',
+      message: 'Pick your CSS preprocessor:',
+      initial: 0,
+      choices: [
+        { title: 'Sass with SCSS syntax', value: 'scss' },
+        { title: 'Sass with indented syntax', value: 'sass' },
+        { title: 'None (the others will still be available)', value: 'css' }
+      ]
+    }
+  ])
+
+  const { script } = await import(`./${ scope.scriptType }-${ scope.engine }/index.js`)
+  await script({ scope, utils })
+}

package/templates/app/quasar-v2/js-vite-2/.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  parserOptions: {
+    sourceType: 'module'
+  },
+
+  settings: {
+    'lodash-template/globals': [
+      // Base
+      'name',
+      'description',
+      'author',
+
+      // Quasar v2
+      'quasarVersion',
+      'scriptType',
+      'productName',
+
+      // Quasar v2 - JS
+      'css',
+      'preset',
+      'prettier'
+    ]
+  }
+}

package/templates/app/{quasar-v1/ts → quasar-v2/js-vite-2}/BASE/README.md

@@ -13,14 +13,23 @@ npm install
 ```bash
 quasar dev
 ```
-<% if (preset.lint) { %>
+<% if (preset.eslint) { %>
 
 ### Lint the files
 ```bash
 yarn lint
 # or
 npm run lint
-```<% } %>
+```
+<% if (prettier) { %>
+
+### Format the files
+```bash
+yarn format
+# or
+npm run format
+```
+<% } } %>
 
 ### Build the app for production
 ```bash
@@ -28,4 +37,4 @@ quasar build
 ```
 
 ### Customize the configuration
-See [Configuring quasar.conf.js](https://v1.quasar.dev/quasar-cli/quasar-conf-js).
+See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

package/templates/app/{quasar-v1/ts → quasar-v2/js-vite-2}/BASE/_.editorconfig

@@ -1,9 +1,7 @@
-root = true
-
-[*]
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
 charset = utf-8
-indent_style = space
 indent_size = 2
+indent_style = space
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true

package/templates/app/{quasar-v1/ts → quasar-v2/js-vite-2}/BASE/_.gitignore

@@ -5,6 +5,7 @@ node_modules
 # Quasar core related directories
 .quasar
 /dist
+/quasar.config.*.temporary.compiled*
 
 # Cordova related directories and files
 /src-cordova/node_modules
@@ -16,10 +17,6 @@ node_modules
 /src-capacitor/www
 /src-capacitor/node_modules
 
-# BEX related directories and files
-/src-bex/www
-/src-bex/js/core
-
 # Log files
 npm-debug.log*
 yarn-debug.log*
@@ -31,3 +28,6 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+
+# local .env files
+.env.local*

package/templates/app/quasar-v2/js-vite-2/BASE/_.npmrc

@@ -0,0 +1,5 @@
+# pnpm-related options
+shamefully-hoist=true
+strict-peer-dependencies=false
+# to get the latest compatible packages when creating the project https://github.com/pnpm/pnpm/issues/6463
+resolution-mode=highest

package/templates/app/quasar-v2/js-vite-2/BASE/_.vscode/extensions.json

@@ -0,0 +1,15 @@
+{
+  "recommendations": [
+    <% if (preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
+    <% if (prettier) { %>"esbenp.prettier-vscode",<% } %>
+    "editorconfig.editorconfig",
+    "vue.volar",
+    "wayou.vscode-todo-highlight"
+  ],
+  "unwantedRecommendations": [
+    "octref.vetur",
+    "hookyqr.beautify",
+    "dbaeumer.jshint",
+    "ms-vscode.vscode-typescript-tslint-plugin"
+  ]
+}

package/templates/app/quasar-v2/js-vite-2/BASE/_.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true<% if (preset.eslint) { %>,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": <% if (prettier) { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
+  "editor.codeActionsOnSave": [
+    "source.fixAll.eslint"
+  ],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"]<% } %>
+}

package/templates/app/quasar-v2/js-vite-2/BASE/_jsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.quasar/tsconfig.json"
+}

package/templates/app/quasar-v2/js-vite-2/BASE/_package.json

@@ -0,0 +1,48 @@
+{
+  "name": "<%= name %>",
+  "version": "0.0.1",
+  "description": "<%= description %>",
+  "productName": "<%= productName %>",
+  "author": "<%= author %>",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    <% if (preset.eslint) { %>"lint": "eslint -c ./eslint.config.js \"./src*/**/*.{js,cjs,mjs,vue}\"",<% } %>
+    <% if (prettier) { %>"format": "prettier --write \"**/*.{js,vue<% if (css !== 'sass') { %>,<%= css %><% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
+    "test": "echo \"No test specified\" && exit 0",
+    "dev": "quasar dev",
+    "build": "quasar build",
+    "postinstall": "quasar prepare"
+  },
+  "dependencies": {
+    <% if (preset.axios) { %>"axios": "^1.2.1",<% } %>
+    <% if (preset.i18n) { %>"vue-i18n": "^9.0.0",<% } %>
+    <% if (preset.pinia) { %>"pinia": "^3.0.1",<% } %>
+    "@quasar/extras": "^1.16.4",
+    "quasar": "^2.16.0",
+    "vue": "^3.4.18",
+    "vue-router": "^4.0.0"
+  },
+  "devDependencies": {
+    <% if (preset.i18n) { %>"@intlify/unplugin-vue-i18n": "^2.0.0",<% } %>
+    <% if (preset.eslint) { %>
+    "@eslint/js": "^9.14.0",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "globals": "^15.12.0",
+    "vite-plugin-checker": "^0.8.0",
+    <% } %>
+    <% if (prettier) { %>
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "prettier": "^3.3.3",
+    <% } %>
+    "@quasar/app-vite": "^2.1.0",
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.14"
+  },
+  "engines": {
+    "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
+  }
+}

package/templates/app/{quasar-v1/ts/BASE/src/index.template.html → quasar-v2/js-vite-2/BASE/index.html}

@@ -7,7 +7,7 @@
     <meta name="description" content="<%= '\<%= productDescription %\>' %>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '\<% if (ctx.mode.cordova || ctx.mode.capacitor) { %\>, viewport-fit=cover \<% } %\>' %>">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '\<% if (ctx.mode.cordova || ctx.mode.capacitor) { %\>, viewport-fit=cover\<% } %\>' %>">
 
     <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
     <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
@@ -16,7 +16,6 @@
     <link rel="icon" type="image/ico" href="favicon.ico">
   </head>
   <body>
-    <!-- DO NOT touch the following DIV -->
-    <div id="q-app"></div>
+    <!-- quasar:entry-point -->
   </body>
 </html>

package/templates/app/quasar-v2/js-vite-2/BASE/postcss.config.js

@@ -0,0 +1,29 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+import autoprefixer from 'autoprefixer'
+// import rtlcss from 'postcss-rtlcss'
+
+export default {
+  plugins: [
+    // https://github.com/postcss/autoprefixer
+    autoprefixer({
+      overrideBrowserslist: [
+        'last 4 Chrome versions',
+        'last 4 Firefox versions',
+        'last 4 Edge versions',
+        'last 4 Safari versions',
+        'last 4 Android versions',
+        'last 4 ChromeAndroid versions',
+        'last 4 FirefoxAndroid versions',
+        'last 4 iOS versions'
+      ]
+    }),
+
+    // https://github.com/elchininet/postcss-rtlcss
+    // If you want to support RTL css, then
+    // 1. yarn/pnpm/bun/npm install postcss-rtlcss
+    // 2. optionally set quasar.config.js > framework > lang to an RTL language
+    // 3. uncomment the following line (and its import statement above):
+    // rtlcss()
+  ]
+}

package/templates/app/quasar-v2/js-vite-2/BASE/quasar.config.js

@@ -0,0 +1,231 @@
+// Configuration for your app
+// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file
+
+import { defineConfig } from '#q-app/wrappers'<% if (preset.i18n) { %>
+import { fileURLToPath } from 'node:url'<% } %>
+
+export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<% } %>) => {
+  return {
+    // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
+    // preFetch: true,
+
+    // app boot file (/src/boot)
+    // --> boot files are part of "main.js"
+    // https://v2.quasar.dev/quasar-cli-vite/boot-files
+    boot: [<% if (preset.i18n) { %>
+      'i18n'<% } %><% if (preset.axios) { %><% if (preset.i18n) { %>,<% } %>
+      'axios'<% } %>
+    ],
+
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
+    css: [
+      'app.<%= css %>'
+    ],
+
+    // https://github.com/quasarframework/quasar/tree/dev/extras
+    extras: [
+      // 'ionicons-v4',
+      // 'mdi-v7',
+      // 'fontawesome-v6',
+      // 'eva-icons',
+      // 'themify',
+      // 'line-awesome',
+      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+
+      'roboto-font', // optional, you are not bound to it
+      'material-icons', // optional, you are not bound to it
+    ],
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#build
+    build: {
+      target: {
+        browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ],
+        node: 'node20'
+      },
+
+      vueRouterMode: 'hash', // available values: 'hash', 'history'
+      // vueRouterBase,
+      // vueDevtools,
+      // vueOptionsAPI: false,
+
+      // rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
+
+      // publicPath: '/',
+      // analyze: true,
+      // env: {},
+      // rawDefine: {}
+      // ignorePublicFolder: true,
+      // minify: false,
+      // polyfillModulePreload: true,
+      // distDir
+
+      // extendViteConf (viteConf) {},
+      // viteVuePluginOptions: {},
+      <% if (preset.i18n || preset.eslint) { %>
+      vitePlugins: [<% if (preset.i18n) { %>
+        ['@intlify/unplugin-vue-i18n/vite', {
+          // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
+          // compositionOnly: false,
+
+          // if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
+          // you need to set `runtimeOnly: false`
+          // runtimeOnly: false,
+
+          ssr: ctx.modeName === 'ssr',
+
+          // you need to set i18n resource including paths !
+          include: [ fileURLToPath(new URL('./src/i18n', import.meta.url)) ]
+        }]<% } %><% if (preset.eslint) { %><% if (preset.i18n) { %>,
+<% } %>
+        ['vite-plugin-checker', {
+          eslint: {
+            lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"',
+            useFlatConfig: true
+          }
+        }, { server: false }]<% } %>
+      ]<% } else { %>
+      // vitePlugins: [
+      //   [ 'package-name', { ..pluginOptions.. }, { server: true, client: true } ]
+      // ]<% } %>
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#devserver
+    devServer: {
+      // https: true,
+      open: true // opens browser window automatically
+    },
+
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#framework
+    framework: {
+      config: {},
+
+      // iconSet: 'material-icons', // Quasar icon set
+      // lang: 'en-US', // Quasar language pack
+
+      // For special cases outside of where the auto-import strategy can have an impact
+      // (like functional components as one of the examples),
+      // you can manually specify Quasar components/directives to be available everywhere:
+      //
+      // components: [],
+      // directives: [],
+
+      // Quasar plugins
+      plugins: []
+    },
+
+    // animations: 'all', // --- includes all animations
+    // https://v2.quasar.dev/options/animations
+    animations: [],
+
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#sourcefiles
+    // sourceFiles: {
+    //   rootComponent: 'src/App.vue',
+    //   router: 'src/router/index',
+    //   store: 'src/store/index',
+    //   pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
+    //   pwaServiceWorker: 'src-pwa/custom-service-worker',
+    //   pwaManifestFile: 'src-pwa/manifest.json',
+    //   electronMain: 'src-electron/electron-main',
+    //   electronPreload: 'src-electron/electron-preload'
+    //   bexManifestFile: 'src-bex/manifest.json
+    // },
+
+    // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
+    ssr: {
+      prodPort: 3000, // The default port that the production server should use
+                      // (gets superseded if process.env.PORT is specified at runtime)
+
+      middlewares: [
+        'render' // keep this as last one
+      ],
+
+      // extendPackageJson (json) {},
+      // extendSSRWebserverConf (esbuildConf) {},
+
+      // manualStoreSerialization: true,
+      // manualStoreSsrContextInjection: true,
+      // manualStoreHydration: true,
+      // manualPostHydrationTrigger: true,
+
+      pwa: false
+      // pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name!
+
+      // pwaExtendGenerateSWOptions (cfg) {},
+      // pwaExtendInjectManifestOptions (cfg) {}
+    },
+
+    // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
+    pwa: {
+      workboxMode: 'GenerateSW' // 'GenerateSW' or 'InjectManifest'
+      // swFilename: 'sw.js',
+      // manifestFilename: 'manifest.json',
+      // extendManifestJson (json) {},
+      // useCredentialsForManifestTag: true,
+      // injectPwaMetaTags: false,
+      // extendPWACustomSWConf (esbuildConf) {},
+      // extendGenerateSWOptions (cfg) {},
+      // extendInjectManifestOptions (cfg) {}
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
+    cordova: {
+      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
+    capacitor: {
+      hideSplashscreen: true
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
+    electron: {
+      // extendElectronMainConf (esbuildConf) {},
+      // extendElectronPreloadConf (esbuildConf) {},
+
+      // extendPackageJson (json) {},
+
+      // Electron preload scripts (if any) from /src-electron, WITHOUT file extension
+      preloadScripts: [ 'electron-preload' ],
+
+      // specify the debugging port to use for the Electron app when running in development mode
+      inspectPort: 5858,
+
+      bundler: 'packager', // 'packager' or 'builder'
+
+      packager: {
+        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+
+        // OS X / Mac App Store
+        // appBundleId: '',
+        // appCategoryType: '',
+        // osxSign: '',
+        // protocol: 'myapp://path',
+
+        // Windows only
+        // win32metadata: { ... }
+      },
+
+      builder: {
+        // https://www.electron.build/configuration/configuration
+
+        appId: '<%= name %>'
+      }
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
+    bex: {
+      // extendBexScriptsConf (esbuildConf) {},
+      // extendBexManifestJson (json) {},
+
+      /**
+       * The list of extra scripts (js/ts) not in your bex manifest that you want to
+       * compile and use in your browser extension. Maybe dynamic use them?
+       *
+       * Each entry in the list should be a relative filename to /src-bex/
+       *
+       * @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ]
+       */
+      extraScripts: []
+    }
+  }
+})

package/templates/app/quasar-v2/js-vite-2/BASE/src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <router-view />
+</template>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup>
+//
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'App'
+});
+</script><% } %>