create-quasar 2.1.0 → 2.2.0

package/index.js

@@ -5,12 +5,7 @@ import { join } from 'node:path'
 
 // display banner
 console.log()
-console.log(
-  readFileSync(
-    new URL('./assets/logo.art', import.meta.url),
-    'utf8'
-  )
-)
+console.log(readFileSync(new URL('./assets/logo.art', import.meta.url), 'utf8'))
 
 import utils from './utils/index.js'
 
@@ -22,10 +17,10 @@ import prompts from 'prompts'
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
-    n: 'nogit',
+    n: 'nogit'
   },
 
-  boolean: [ 'n' ],
+  boolean: ['n']
 })
 
 /** @type {Record<string, any>} */
@@ -37,7 +32,9 @@ const scope = {
 prompts.override(scope)
 
 if (scope.projectFolder) {
-  utils.logger.log(`Using the project folder provided via arguments: ${ scope.projectFolder }`)
+  utils.logger.log(
+    `Using the project folder provided via arguments: ${scope.projectFolder}`
+  )
   utils.logger.log()
 }
 
@@ -50,9 +47,21 @@ await utils.prompts(scope, [
     initial: 0,
     message: 'What would you like to build?',
     choices: [
-      { title: 'App with Quasar CLI, let\'s go!', value: 'app', description: 'spa/pwa/ssr/bex/electron/capacitor/cordova' },
-      { title: 'AppExtension (AE) for Quasar CLI', value: 'app-extension', description: 'Quasar CLI AE' },
-      { title: 'Quasar UI kit', value: 'ui-kit', description: 'Vue component and/or directive' }
+      {
+        title: "App with Quasar CLI, let's go!",
+        value: 'app',
+        description: 'spa/pwa/ssr/bex/electron/capacitor/cordova'
+      },
+      {
+        title: 'AppExtension (AE) for Quasar CLI',
+        value: 'app-extension',
+        description: 'Quasar CLI AE'
+      },
+      {
+        title: 'Quasar UI kit',
+        value: 'ui-kit',
+        description: 'Vue component and/or directive'
+      }
     ]
   },
   {
@@ -69,13 +78,15 @@ await utils.prompts(scope, [
   },
   {
     type: (_, { projectFolder }) =>
-      (!existsSync(projectFolder) || readdirSync(projectFolder).length === 0 ? null : 'confirm'),
+      !existsSync(projectFolder) || readdirSync(projectFolder).length === 0
+        ? null
+        : 'confirm',
     name: 'overwrite',
     message: () =>
       (scope.projectFolderName === '.'
         ? 'Current directory'
-        : `Target directory "${ scope.projectFolderName }"`)
-      + ' is not empty. Remove existing files and continue?'
+        : `Target directory "${scope.projectFolderName}"`) +
+      ' is not empty. Remove existing files and continue?'
   },
   {
     type: (_, { overwrite } = {}) => {
@@ -88,21 +99,24 @@ await utils.prompts(scope, [
   }
 ])
 
-const { script } = await import(`./templates/${ scope.projectType }/index.js`)
-await script({ scope, utils })
+const { createQuasarScript } = await import(
+  `./templates/${scope.projectType}/create-quasar-script.js`
+)
+await createQuasarScript({ scope, utils })
 
 console.log()
 utils.logger.success('The project has been scaffolded')
 console.log()
 
-function finalize () {
+function finalize() {
   if (scope.projectFolder) {
     console.log()
 
     if (argv.nogit) {
-      utils.logger.log('Skipping git initialization as --nogit flag was provided')
-    }
-    else {
+      utils.logger.log(
+        'Skipping git initialization as --nogit flag was provided'
+      )
+    } else {
       utils.initializeGit(scope.projectFolder)
     }
   }
@@ -111,41 +125,47 @@ function finalize () {
 }
 
 if (scope.skipDepsInstall !== true) {
-  await utils.prompts(scope, [
+  await utils.prompts(
+    scope,
+    [
+      {
+        type: 'select',
+        name: 'packageManager',
+        message: 'Install project dependencies? (recommended)',
+        choices: () =>
+          utils.runningPackageManager
+            ? [
+                {
+                  title: `Yes, use ${utils.runningPackageManager.name}`,
+                  value: utils.runningPackageManager.name
+                },
+                { title: 'No, I will handle that myself', value: false }
+              ]
+            : [
+                { title: 'Yes, use Yarn (recommended)', value: 'yarn' },
+                { title: 'Yes, use PNPM (recommended)', value: 'pnpm' },
+                { title: 'Yes, use NPM', value: 'npm' },
+                { title: 'Yes, use Bun', value: 'bun' },
+                { title: 'No, I will handle that myself', value: false }
+              ]
+      }
+    ],
     {
-      type: 'select',
-      name: 'packageManager',
-      message:
-        'Install project dependencies? (recommended)',
-      choices: () => (
-        utils.runningPackageManager
-          ? [
-              { title: `Yes, use ${ utils.runningPackageManager.name }`, value: utils.runningPackageManager.name },
-              { title: 'No, I will handle that myself', value: false }
-            ]
-          : [
-              { title: 'Yes, use Yarn (recommended)', value: 'yarn' },
-              { title: 'Yes, use PNPM (recommended)', value: 'pnpm' },
-              { title: 'Yes, use NPM', value: 'npm' },
-              { title: 'Yes, use Bun', value: 'bun' },
-              { title: 'No, I will handle that myself', value: false }
-            ]
-      )
-    }
-  ], {
-    onCancel: () => {
-      scope.packageManager = false
-      finalize()
-      process.exit(0)
+      onCancel: () => {
+        scope.packageManager = false
+        finalize()
+        process.exit(0)
+      }
     }
-  })
+  )
 
   if (scope.packageManager !== false) {
     try {
       await utils.installDeps(scope)
-    }
-    catch {
-      utils.logger.warn('Could not auto install dependencies. Probably a temporary npm registry issue?')
+    } catch {
+      utils.logger.warn(
+        'Could not auto install dependencies. Probably a temporary npm registry issue?'
+      )
       scope.packageManager = false
       finalize()
       process.exit(0)
@@ -154,8 +174,7 @@ if (scope.skipDepsInstall !== true) {
     if (scope.preset.lint) {
       try {
         await utils.lintFolder(scope)
-      }
-      catch {
+      } catch {
         utils.logger.warn('Could not auto lint fix the project folder.')
       }
     }
@@ -163,8 +182,7 @@ if (scope.skipDepsInstall !== true) {
     if (scope.prettier) {
       try {
         await utils.formatFolder(scope)
-      }
-      catch {
+      } catch {
         utils.logger.warn('Could not auto format the project folder.')
       }
     }

package/package.json

@@ -1,51 +1,47 @@
 {
   "name": "create-quasar",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Scaffolds Quasar Apps, AppExtensions or UI kits",
-  "type": "module",
+  "homepage": "https://quasar.dev",
+  "bugs": "https://github.com/quasarframework/quasar/issues",
+  "license": "MIT",
   "author": {
     "name": "Razvan Stoenescu",
     "email": "razvan.stoenescu@gmail.com",
     "url": "https://github.com/quasarframework"
   },
-  "license": "MIT",
-  "main": "index.js",
-  "bin": {
-    "create-quasar": "index.js"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/quasarframework/quasar"
   },
-  "bugs": "https://github.com/quasarframework/quasar/issues",
-  "homepage": "https://quasar.dev",
   "funding": {
     "type": "github",
     "url": "https://donate.quasar.dev"
   },
-  "engines": {
-    "node": ">=16"
+  "bin": {
+    "create-quasar": "index.js"
   },
+  "type": "module",
+  "main": "index.js",
   "dependencies": {
     "cross-spawn": "^7.0.6",
-    "fs-extra": "^11.2.0",
+    "fs-extra": "^11.3.4",
     "kolorist": "^1.8.0",
-    "lodash": "^4.17.21",
     "minimist": "^1.2.8",
     "prompts": "^2.4.2",
     "tinyglobby": "^0.2.10"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.7",
     "@types/prompts": "^2.4.9",
-    "@yusufkandemir/eslint-plugin-lodash-template": "^2.0.0",
-    "typescript-eslint": "^8.28.0",
-    "eslint": "^9.37.0",
     "tsx": "^4.19.1",
     "typescript": "^5.6.2"
   },
+  "engines": {
+    "node": ">=16"
+  },
   "scripts": {
-    "lint": "eslint --flag v10_config_lookup_from_file --fix",
+    "lint": "oxfmt && oxlint --fix",
+    "lint:check": "oxfmt --check && oxlint",
     "create-test-project": "tsx scripts/create-test-project.ts"
   }
 }

package/scripts/create-test-project.ts

@@ -1,8 +1,8 @@
-import prompts from 'prompts';
+import prompts from "prompts";
 
-type ScriptType = 'js' | 'ts';
-type AppEngine = 'vite-2' | 'webpack-4';
-type PackageManager = 'yarn' | 'npm' | 'pnpm';
+type ScriptType = "js" | "ts";
+type AppEngine = "vite-2" | "webpack-4";
+type PackageManager = "yarn" | "npm" | "pnpm";
 
 type CreateProjectOptions = {
   scriptType: ScriptType;
@@ -10,35 +10,37 @@ type CreateProjectOptions = {
   packageManager: PackageManager;
 };
 
-export async function createProject({ scriptType, appEngine, packageManager }: CreateProjectOptions) {
+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';
+  process.env.COREPACK_ENABLE_STRICT = "0";
   // See https://github.com/yarnpkg/yarn/issues/9015
-  process.env.SKIP_YARN_COREPACK_CHECK = '1';
+  process.env.SKIP_YARN_COREPACK_CHECK = "1";
   // To alter the behavior to run correctly within this script
-  process.env.CREATE_TEST_PROJECT_OVERRIDE = 'true';
+  process.env.CREATE_TEST_PROJECT_OVERRIDE = "true";
 
   prompts.override({
-    projectType: 'app',
-    projectFolder: 'test-project',
+    projectType: "app",
+    projectFolder: "test-project",
     overwrite: true,
 
     scriptType: scriptType,
     engine: appEngine,
 
-    name: 'test-project',
-    productName: 'Test Project',
-    description: 'A test project',
-    author: 'Quasar Team (info@quasar.dev)',
+    name: "test-project",
+    productName: "Test Project",
+    description: "A test project",
+    author: "Quasar Team (info@quasar.dev)",
 
     // The defaults
-    sfcStyle: 'composition-setup',
-    css: 'scss',
 
-    preset: ['eslint'],
+    preset: ["sass", "eslint"],
     prettier: true,
 
-    packageManager,
+    packageManager
   });
 
   // We are overriding .override() as every call overrides the previous overrides (too many overrides :D)
@@ -47,7 +49,7 @@ export async function createProject({ scriptType, appEngine, packageManager }: C
   // Remove all extra arguments to avoid interfering with the index.js script
   process.argv = process.argv.slice(0, 2);
 
-  await import('../index.js');
+  await import("../index.js");
 }
 
 const args = process.argv.slice(2) as [ScriptType, AppEngine, PackageManager];
@@ -55,9 +57,8 @@ 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);
-  });
+  packageManager: args[2]
+}).catch(error => {
+  console.error(error);
+  process.exit(1);
+});

package/templates/{eslint.config.base.js → __eslint.config.base.js}

@@ -1,10 +1,11 @@
+import pluginLodashTemplate from '@yusufkandemir/eslint-plugin-lodash-template'
+import { defineConfig } from 'eslint/config'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
-import pluginLodashTemplate from '@yusufkandemir/eslint-plugin-lodash-template'
 import baseConfig from '../eslint.config.base.js'
 
 // file paths are relative to templates/*/
-export default tseslint.config(
+export default defineConfig(
   ...baseConfig,
 
   {

package/templates/app/{eslint.config.js → __eslint.config.js}

@@ -1,7 +1,7 @@
-import tseslint from 'typescript-eslint'
+import { defineConfig } from 'eslint/config'
 import baseConfig from '../eslint.config.base.js'
 
-export default tseslint.config(
+export default defineConfig(
   ...baseConfig,
 
   {
@@ -55,7 +55,6 @@ export default tseslint.config(
         'productName',
 
         // Quasar v2 - TS
-        'sfcStyle',
         'css',
         'preset',
         'prettier'

package/templates/app/create-quasar-script.js

@@ -0,0 +1,8 @@
+export async function createQuasarScript({ scope, utils }) {
+  await utils.prompts(scope, [utils.commonPrompts.scriptType])
+
+  const { createQuasarScript: create } = await import(
+    `./quasar-v2/create-quasar-script.js`
+  )
+  await create({ scope, utils })
+}

package/templates/app/quasar-v2/create-quasar-script.js

@@ -0,0 +1,39 @@
+export async function createQuasarScript({ 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)
+
+  const { createQuasarScript: create } = await import(
+    `./${scope.scriptType}-${scope.engine}/create-quasar-script.js`
+  )
+  await create({ scope, utils })
+}

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

@@ -1,6 +1,6 @@
-# <%= productName %> (<%= name %>)
+# <%= scope.productName %> (<%= scope.name %>)
 
-<%= description %>
+<%= scope.description %>
 
 ## Install the dependencies
 ```bash
@@ -13,7 +13,7 @@ npm install
 ```bash
 quasar dev
 ```
-<% if (preset.eslint) { %>
+<% if (scope.preset.eslint) { %>
 
 ### Lint the files
 ```bash
@@ -21,7 +21,7 @@ yarn lint
 # or
 npm run lint
 ```
-<% if (prettier) { %>
+<% if (scope.prettier) { %>
 
 ### Format the files
 ```bash

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

@@ -1,7 +1,7 @@
 {
   "recommendations": [
-    <% if (preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
-    <% if (prettier) { %>"esbenp.prettier-vscode",<% } %>
+    <% if (scope.preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
+    <% if (scope.prettier) { %>"esbenp.prettier-vscode",<% } %>
     "editorconfig.editorconfig",
     "vue.volar",
     "wayou.vscode-todo-highlight"

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

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

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

@@ -1,39 +1,38 @@
 {
-  "name": "<%= name %>",
+  "name": "<%= scope.name %>",
   "version": "0.0.1",
-  "description": "<%= description %>",
-  "productName": "<%= productName %>",
-  "author": "<%= author %>",
+  "description": "<%= scope.description %>",
+  "productName": "<%= scope.productName %>",
+  "author": "<%= scope.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",<% } %>
+    <% if (scope.preset.eslint) { %>"lint": "eslint -c ./eslint.config.js \"./src*/**/*.{js,cjs,mjs,vue}\"",<% } %>
+    <% if (scope.prettier) { %>"format": "prettier --write \"**/*.{js,vue,css<% if (scope.preset.sass) { %>,scss<% } %>,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": "^11.3.0",<% } %>
-    <% if (preset.pinia) { %>"pinia": "^3.0.1",<% } %>
+    <% if (scope.preset.i18n) { %>"vue-i18n": "^11.3.0",<% } %>
+    <% if (scope.preset.pinia) { %>"pinia": "^3.0.1",<% } %>
     "@quasar/extras": "^1.16.4",
     "quasar": "^2.16.0",
     "vue": "^3.5.22",
     "vue-router": "^5.0.3"
   },
   "devDependencies": {
-    <% if (preset.i18n) { %>"@intlify/unplugin-vue-i18n": "^11.0.0",<% } %>
-    <% if (preset.eslint) { %>
-    "@eslint/js": "^10.0.1",
-    "eslint": "^10.0.3",
+    <% if (scope.preset.i18n) { %>"@intlify/unplugin-vue-i18n": "^11.0.0",<% } %>
+    <% if (scope.preset.eslint) { %>
+    "@eslint/js": "^9.39.4",
+    "eslint": "^9.39.4",
     "eslint-plugin-vue": "^10.8.0",
     "globals": "^17.4.0",
     "vite-plugin-checker": "^0.12.0",
     "vue-eslint-parser": "^10.4.0",
     <% } %>
-    <% if (prettier) { %>
+    <% if (scope.prettier) { %>
     "@vue/eslint-config-prettier": "^10.2.0",
     "prettier": "^3.8.1",
     <% } %>

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

@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= '\<%= productName %\>' %></title>
+    <title><%= '<' + '%= productName %' + '>' %></title>
 
     <meta charset="utf-8">
-    <meta name="description" content="<%= '\<%= productDescription %\>' %>">
+    <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">

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

@@ -1,10 +1,10 @@
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file
 
-import { defineConfig } from '#q-app/wrappers'<% if (preset.i18n) { %>
+import { defineConfig } from '#q-app/wrappers'<% if (scope.preset.i18n) { %>
 import { fileURLToPath } from 'node:url'<% } %>
 
-export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<% } %>) => {
+export default defineConfig((<% if (scope.preset.i18n) { %>ctx<% } else { %>/* ctx */<% } %>) => {
   return {
     // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
     // preFetch: true,
@@ -12,14 +12,13 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
     // 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'<% } %>
+    boot: [
+      <% if (scope.preset.i18n) { %>'i18n'<% } %>
     ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
     css: [
-      'app.<%= css %>'
+      'app.<%= scope.preset.sass ? 'sass' : 'css' %>'
     ],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
@@ -61,8 +60,8 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
 
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
-      <% if (preset.i18n || preset.eslint) { %>
-      vitePlugins: [<% if (preset.i18n) { %>
+      <% if (scope.preset.i18n || scope.preset.eslint) { %>
+      vitePlugins: [<% if (scope.preset.i18n) { %>
         ['@intlify/unplugin-vue-i18n/vite', {
           // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
           // compositionOnly: false,
@@ -75,7 +74,7 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
 
           // you need to set i18n resource including paths !
           include: [ fileURLToPath(new URL('./src/i18n', import.meta.url)) ]
-        }]<% } %><% if (preset.eslint) { %><% if (preset.i18n) { %>,
+        }]<% } %><% if (scope.preset.eslint) { %><% if (scope.preset.i18n) { %>,
 <% } %>
         ['vite-plugin-checker', {
           eslint: {
@@ -208,7 +207,7 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
       builder: {
         // https://www.electron.build/configuration
 
-        appId: '<%= name %>'
+        appId: '<%= scope.name %>'
       }
     },
 

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

@@ -1,14 +1,3 @@
 <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><% } %>