create-quasar 2.2.3 → 4.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-quasar",
-  "version": "2.2.3",
-  "description": "Scaffolds Quasar Apps, AppExtensions or UI kits",
+  "version": "4.0.1",
+  "description": "Scaffolds Quasar Apps & App Extensions",
   "homepage": "https://quasar.dev",
   "bugs": "https://github.com/quasarframework/quasar/issues",
   "license": "MIT",
@@ -19,29 +19,24 @@
     "url": "https://donate.quasar.dev"
   },
   "bin": {
-    "create-quasar": "index.js"
+    "create-quasar": "bin/create-quasar.js"
   },
   "type": "module",
-  "main": "index.js",
+  "main": "bin/create-quasar.js",
   "dependencies": {
+    "@clack/prompts": "^1.5.0",
+    "ci-info": "^4.4.0",
     "cross-spawn": "^7.0.6",
-    "fs-extra": "^11.3.4",
+    "fs-extra": "^11.3.5",
     "kolorist": "^1.8.0",
-    "minimist": "^1.2.8",
-    "prompts": "^2.4.2",
-    "tinyglobby": "^0.2.10"
-  },
-  "devDependencies": {
-    "@types/prompts": "^2.4.9",
-    "tsx": "^4.19.1",
-    "typescript": "^5.6.2"
+    "tinyglobby": "^0.2.17",
+    "update-notifier": "^7.3.1",
+    "@quasar/art": "^1.0.0"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "scripts": {
-    "lint": "oxfmt && oxlint --fix",
-    "lint:check": "oxfmt --check && oxlint",
-    "create-test-project": "tsx scripts/create-test-project.ts"
+    "test": "node bin/create-quasar.js"
   }
 }

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

@@ -0,0 +1,91 @@
+function parsePackageName(name) {
+  const scopedPackageRegex = /^(@[^/]+)\/([^/]+)$/
+  const match = name
+    .replace(/quasar-app-extension-/, '')
+    .match(scopedPackageRegex)
+
+  return match ? { org: match[1] + '/', name: match[2] } : { org: '', name }
+}
+
+export async function createQuasarScript({ scope, utils }) {
+  await utils.promptUser(scope, {
+    name: () =>
+      utils.prompts.text({
+        message: 'AE ext-id (w/out "quasar-app-extension" in it):',
+        placeholder: 'eg. "my-ext", "@my-org/my-ext"',
+        validate: val => {
+          if (!val) return `ext-id is required!`
+          if (!utils.definitions.name.isValid(val)) {
+            return 'Invalid App Extension name'
+          }
+        }
+      }),
+
+    preset: () =>
+      utils.prompts.groupMultiselect({
+        message: 'Pick features:',
+        initialValues: ['prompts', 'install', 'uninstall', 'linting'],
+        options: {
+          Tooling: [
+            {
+              label: 'Typescript support',
+              value: 'typescript'
+            },
+            {
+              label: 'Linting & Formatting (oxlint + oxfmt)',
+              value: 'linting',
+              hint: 'recommended'
+            }
+          ],
+          'Additional AE Scripts': [
+            {
+              label: 'Prompts script',
+              value: 'prompts'
+            },
+            {
+              label: 'Install script',
+              value: 'install'
+            },
+            {
+              label: 'Uninstall script',
+              value: 'uninstall'
+            }
+          ]
+        }
+      })
+  })
+
+  const log = utils.prompts.taskLog({
+    title: 'Scaffolding App Extension...'
+  })
+
+  scope.preset = utils.convertArrayToObject(scope.preset)
+  if (scope.preset.linting) scope.linter = 'oxlint'
+
+  const { org, name } = parsePackageName(scope.name)
+  scope.aeShortName = `${org}${name}`
+  scope.aeFullName = `${org}quasar-app-extension-${name}`
+
+  const dir = scope.preset.typescript ? 'ts' : 'js'
+  utils.createTargetDir(scope)
+  utils.renderTemplate(`${dir}/BASE`, scope)
+
+  if (scope.preset.prompts) {
+    utils.renderTemplate(`${dir}/prompts`, scope)
+  }
+  if (scope.preset.install) {
+    utils.renderTemplate(`${dir}/install`, scope)
+  }
+  if (scope.preset.uninstall) {
+    utils.renderTemplate(`${dir}/uninstall`, scope)
+  }
+
+  if (scope.linter === 'oxlint') {
+    utils.renderTemplate(`${dir}/oxlint`, scope)
+  }
+
+  log.success('App Extension scaffolded successfully!')
+
+  // override with the only allowed package manager for AE
+  scope.packageManagerList = ['pnpm']
+}

package/templates/ae/js/BASE/README.md

@@ -0,0 +1,43 @@
+# Quasar App Extension "<%= scope.aeShortName %>"
+
+## Developing
+
+- Use PNPM v11+.
+- Notice /package.json scripts:
+
+```bash
+<% if (scope.linter === 'oxlint') { %>
+# Lint & format
+$ pnpm run lint
+$ pnpm run lint:check
+
+<% } %>
+# Use playground to develop;
+# Helps you test the Index script as well
+$ pnpm run dev
+$ pnpm run dev -m ssr
+
+# Invokes the AE into /playground when needed
+# (like when changing the scripts themselves);
+# Helps you run the Install & Prompts scripts
+$ pnpm run invoke
+
+# Uninstall & re-install AE;
+# Helps you mainly to run the Uninstall script
+$ pnpm run cycle
+```
+
+## Publishing
+
+- Make sure to edit /ae/README.md.
+- In order to publish the AE, do it from within /ae folder:
+
+```bash
+# from /ae folder ONLY:
+pnpm login
+pnpm publish
+```
+
+## Donate
+
+If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).

package/templates/ae/js/BASE/_.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+.thumbs.db
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# .env files
+.env*
+
+# Quasar core related directories
+/playground/.quasar
+/playground/dist
+/playground/quasar.config.*.temporary.compiled*
+
+# Cordova related directories and files
+/playground/src-cordova/node_modules
+/playground/src-cordova/platforms
+/playground/src-cordova/plugins
+/playground/src-cordova/www
+
+# Capacitor related directories and files
+/playground/src-capacitor/www
+/playground/src-capacitor/node_modules

package/templates/{app/quasar-v2/js-webpack-4 → ae/js}/BASE/_.vscode/extensions.json

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

package/templates/ae/js/BASE/_.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  <% if (scope.linter === 'oxlint') { %>
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "always"
+  },
+  "oxc.fmt.configPath": ".oxfmtrc.json",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  <% } %>
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "search.exclude": {
+    "playground/dist/": true,
+    "playground/.quasar/": true,
+    "playground/quasar.config.js.temporary.*": true
+  }
+}

package/templates/ae/js/BASE/_package.json

@@ -0,0 +1,30 @@
+{
+  "name": "quasar-app-extension",
+  "version": "0.0.1",
+  "private": true,
+  "description": "A Quasar App Extension Project",
+  <% if (scope.author) { %>
+  "author": "<%= scope.author %>",
+  <% } %>
+  "type": "module",
+  "scripts": {
+<% if (scope.linter === 'oxlint') { %>
+    "lint": "oxfmt && oxlint --fix",
+    "lint:check": "oxfmt --check && oxlint",
+<% } %>
+    "dev": "pnpm --filter playground dev",
+    "invoke": "pnpm --filter playground invoke",
+    "cycle": "pnpm --filter playground cycle",
+    "postinstall": "pnpm --filter playground prepare"
+  },
+<% if (scope.linter === 'oxlint') { %>
+  "devDependencies": {
+    "oxfmt": "^0.x",
+    "oxlint": "^1.63.0"
+  },
+<% } %>
+  "engines": {
+    "node": ">= 26 || ^24 || ^22.12"
+  },
+  "productName": "Quasar App Extension"
+}

package/templates/ae/js/BASE/_pnpm-workspace.yaml

@@ -0,0 +1,23 @@
+# https://pnpm.io/settings
+
+packages:
+  - ae
+  - playground
+
+linkWorkspacePackages: true
+publishBranch: dev
+
+catalog:
+  "@quasar/app-vite": "^3.0.0-rc.1"
+  "@quasar/extras": "^2.0.0"
+  "quasar": "^2.20.0"
+  "vue": "^3.5.22"
+
+allowBuilds:
+  '@parcel/watcher': true
+  core-js: true
+  electron-winstaller: true
+  esbuild: true
+  lightningcss: true
+  rolldown: true
+  unrs-resolver: true

package/templates/{app-extension/ae-js/BASE → ae/js/BASE/ae}/README.md

@@ -1,5 +1,4 @@
-Quasar App Extension <%= scope.name %>
-===
+# Quasar App Extension "<%= scope.aeShortName %>"
 
 _Be sure to change this readme as appropriate for your app extension._
 
@@ -7,30 +6,32 @@ _Think about the organization of this file and how the information will be benef
 
 > Add a short description of your App Extension. What does it do? How is it beneficial? Why would someone want to use it?
 
-<%= scope.description %>
+## Install
 
-# Install
 ```bash
-quasar ext add <%= scope.name %>
+quasar ext add <%= scope.aeShortName %>
+
 ```
-Quasar CLI will retrieve it from the NPM registry and install the extension to your project.
 
-<% if (scope.preset.prompts) { %>
-## Prompts
+### Prompts
 
 > Explain the prompts here
 
-<% } %>
-# Uninstall
+## Uninstall
+
 ```bash
-quasar ext remove <%= scope.name %>
+quasar ext remove <%= scope.aeShortName %>
+
 ```
 
-# Info
+## Info
+
 > Add longer information here that will help the user of your app extension.
 
-# Other Info
+## Other Info
+
 > Add other information that's not as important to know
 
-# Donate
+## Donate
+
 If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).

package/templates/ae/js/BASE/ae/_package.json

@@ -0,0 +1,38 @@
+{
+  "name": "<%= scope.aeFullName %>",
+  "version": "0.0.1",
+  "description": "A Quasar App Extension",
+  <% if (scope.author) { %>
+  "author": "<%= scope.author %>",
+  <% } %>
+  "license": "MIT",
+  "type": "module",
+  "main": "src/index.js",
+  "imports": {
+    "#q-app": "@quasar/app-vite"
+  },
+<% if (scope.preset.prompts) { %>
+  "dependencies": {
+    "@clack/prompts": "^1.4.0"
+  },
+<% } %>
+  "devDependencies": {
+    "@quasar/app-vite": "catalog:",
+    "quasar": "catalog:",
+    "vue": "catalog:"
+  },
+  "peerDependencies": {
+    "@quasar/app-vite": "^3.0.0-rc.1"
+  },
+  "keywords": [
+    "quasar",
+    "quasar-app-extension",
+    "quasar-cli",
+    "quasar-app-vite",
+    "vue",
+    "vuejs"
+  ],
+  "engines": {
+    "node": ">= 26 || ^24 || ^22.12"
+  }
+}

package/templates/ae/js/BASE/ae/src/index.js

@@ -0,0 +1,15 @@
+/**
+ * Quasar App Extension index/runner script
+ * (runs on each dev/build)
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/index-api
+ */
+
+import { defineIndexScript } from '#q-app'
+
+// can be async
+export default defineIndexScript(api => {
+  api.extendQuasarConf(() => ({
+    boot: ["~<%= scope.aeFullName %>/src/runtime/boot.register.js"]
+  }))
+})

package/templates/ae/js/BASE/ae/src/runtime/MyComponent.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="my-component">
+    <div>My Component</div>
+    <div>This is a simple Vue component.</div>
+  </div>
+</template>
+
+<script setup>
+//
+</script>
+
+<style lang="sass">
+.my-component
+  > div:first-child
+    font-weight: bold
+</style>

package/templates/ae/js/BASE/ae/src/runtime/boot.register.js

@@ -0,0 +1,6 @@
+import { defineBoot } from '#q-app'
+import MyComponent from './MyComponent.vue'
+
+export default defineBoot(async ({ app }) => {
+  app.component("my-component", MyComponent)
+})

package/templates/ae/js/BASE/playground/_package.json

@@ -0,0 +1,29 @@
+{
+  "name": "playground",
+  "version": "0.0.1",
+  "private": true,
+  "description": "A Quasar App Extension Playground",
+  <% if (scope.author) { %>
+  "author": "<%= scope.author %>",
+  <% } %>
+  "type": "module",
+  "scripts": {
+    "dev": "quasar dev",
+    "build": "quasar build",
+    "prepare": "quasar prepare --silent",
+    "invoke": "quasar ext invoke <%= scope.aeShortName %>",
+    "cycle": "quasar ext uninvoke <%= scope.aeShortName %> && quasar ext invoke <%= scope.aeShortName %>"
+  },
+  "dependencies": {
+    "@quasar/extras": "^2.0.0",
+    "quasar": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "^5.0.6"
+  },
+  "devDependencies": {
+    "@quasar/app-vite": "catalog:",
+    "@types/node": "^22.19.11",
+    "<%= scope.aeFullName %>": "workspace:*"
+  },
+  "productName": "Quasar App Extension Playground"
+}

package/templates/ae/js/BASE/playground/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <title>App Extension Playground</title>
+
+    <meta charset="utf-8">
+    <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
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';<%~ <% if (ctx.dev) { %> connect-src \'self\' ws://localhost:*; worker-src \'self\' blob:;<% } %> ~%>"
+    />
+
+    <link rel="icon" type="image/ico" href="favicon.ico">
+  </head>
+  <body>
+    <!-- quasar:entry-point -->
+  </body>
+</html>

package/templates/ae/js/BASE/playground/quasar.config.js

@@ -0,0 +1,25 @@
+// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file
+
+import { defineConfig } from '#q-app'
+
+export default defineConfig((/* ctx */) => ({
+  boot: [],
+  css: ['app.scss'],
+  extras: [
+    'roboto-font', // optional, you are not bound to it
+    'material-icons' // optional, you are not bound to it
+  ],
+
+  build: {
+    filenameBasedRouting: true,
+    vueRouterMode: 'history',
+    typescript: {
+      strict: true,
+      vueShim: true
+    }
+  },
+
+  devServer: {
+    open: true
+  }
+}))

package/templates/ae/js/BASE/playground/quasar.extensions.json

@@ -0,0 +1,3 @@
+{
+  "<%= scope.aeShortName %>": {}
+}

package/templates/ae/js/BASE/playground/src/components/DrawerLink.vue

@@ -0,0 +1,14 @@
+<template>
+  <q-item clickable :to="props.path" exact>
+    <q-item-section>
+      <q-item-label>{{ props.name }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup>
+const props = defineProps({
+  name: String,
+  path: String
+})
+</script>

package/templates/{app-extension/ae-ts/BASE/playground/quasar-cli-webpack → ae/js/BASE/playground}/src/css/quasar.variables.scss

@@ -1,4 +1,4 @@
-// Quasar SCSS (& Sass) Variables
+// Quasar Sass (& SCSS) Variables
 // --------------------------------------------------
 // To customize the look and feel of this app, you can override
 // the Sass/SCSS variables found in Quasar's source Sass/SCSS files.

package/templates/{app-extension/ae-ts/BASE/playground/quasar-cli-vite/src/pages/ErrorNotFound.vue → ae/js/BASE/playground/src/pages/[...path].vue}

@@ -3,9 +3,9 @@
     class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center"
   >
     <div>
-      <div style="font-size: 30vh">404</div>
+      <div style="font-size: 30vh"> 404 </div>
 
-      <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
+      <div class="text-h2" style="opacity: 0.4"> Oops. Nothing here... </div>
 
       <q-btn
         class="q-mt-xl"

package/templates/ae/js/BASE/playground/src/pages/index/(index).vue

@@ -0,0 +1,11 @@
+<template>
+  <q-page class="flex flex-center">
+    <div class="column items-center">
+      Use the drawer to navigate to different pages in this playground.
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+//
+</script>

package/templates/ae/js/BASE/playground/src/pages/index/test1.vue

@@ -0,0 +1,9 @@
+<template>
+  <q-page padding>
+    <my-component />
+  </q-page>
+</template>
+
+<script setup>
+//
+</script>

package/templates/ae/js/BASE/playground/src/pages/index/test2.vue

@@ -0,0 +1,7 @@
+<template>
+  <q-page padding> Test 2 </q-page>
+</template>
+
+<script setup>
+//
+</script>

package/templates/ae/js/BASE/playground/src/pages/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
+        />
+
+        <q-toolbar-title> Quasar App Extension Playground </q-toolbar-title>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+      <q-list dense>
+        <q-item-label header> Playground Navigation </q-item-label>
+        <q-separator class="q-mb-md" />
+        <DrawerLink v-for="link in linksList" :key="link.name" v-bind="link" />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { routes } from 'vue-router/auto-routes'
+
+import DrawerLink from '@/components/DrawerLink.vue'
+
+const linksList =
+  routes
+    .find(r => r.path === '/')
+    ?.children?.map(c => ({
+      name: c.path || 'Index',
+      path: `/${c.path}`
+    })) || []
+
+const leftDrawerOpen = ref(false)
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
+</script>

package/templates/ae/js/BASE/playground/src/router/index.js

@@ -0,0 +1,42 @@
+import { defineRouter } from '#q-app'
+import { routes, handleHotUpdate } from 'vue-router/auto-routes'
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory
+} from 'vue-router'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default defineRouter(() => {
+  const createHistory = import.meta.env.QUASAR_SERVER
+    ? createMemoryHistory
+    : import.meta.env.QUASAR_VUE_ROUTER_MODE === 'history'
+      ? createWebHistory
+      : createWebHashHistory
+
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+    routes,
+
+    // Leave this as is and make changes in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    history: createHistory(import.meta.env.QUASAR_VUE_ROUTER_BASE)
+  })
+
+  // enable HMR for it
+  if (import.meta.hot) {
+    handleHotUpdate(Router)
+  }
+
+  return Router
+})