create-quasar 2.1.0 → 2.2.0

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/components/ExampleComponent.vue

@@ -11,7 +11,7 @@
     <p>Clicks on todos: {{ clickCount }}</p>
   </div>
 </template>
-<% if (sfcStyle === 'composition-setup') { %>
+
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import type { Todo, Meta } from './models';
@@ -34,100 +34,4 @@ function increment() {
 }
 
 const todoCount = computed(() => props.todos.length);
-</script><% } else if (sfcStyle === 'composition') { %>
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  ref,
-  toRef,
-  type PropType,
-  type Ref,
-} from 'vue';
-import type { Todo, Meta } from './models';
-
-function useClickCount() {
-  const clickCount = ref(0);
-  function increment() {
-    clickCount.value += 1
-    return clickCount.value;
-  }
-
-  return { clickCount, increment };
-}
-
-function useDisplayTodo(todos: Ref<Todo[]>) {
-  const todoCount = computed(() => todos.value.length);
-  return { todoCount };
-}
-
-export default defineComponent({
-  name: 'ExampleComponent',
-
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    todos: {
-      type: Array as PropType<Todo[]>,
-      default: () => []
-    },
-    meta: {
-      type: Object as PropType<Meta>,
-      required: true
-    },
-    active: {
-      type: Boolean
-    }
-  },
-
-  setup (props) {
-    return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
-  }
-});
-</script><% } else if (sfcStyle === 'options') { %>
-<script lang="ts">
-import { defineComponent, type PropType } from 'vue';
-import type { Todo, Meta } from './models';
-
-export default defineComponent({
-  name: 'ExampleComponent',
-
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    todos: {
-      type: Array as PropType<Todo[]>,
-      default: () => [] as Todo[]
-    },
-    meta: {
-      type: Object as PropType<Meta>,
-      required: true
-    },
-    active: {
-      type: Boolean
-    }
-  },
-
-  data(): { clickCount: number } {
-    return {
-      clickCount: 0
-    };
-  },
-
-  methods: {
-    increment (): void {
-      this.clickCount += 1;
-    }
-  },
-
-  computed: {
-    todoCount (): number {
-      return this.todos.length;
-    }
-  }
-});
-</script><% } %>
+</script>

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/layouts/MainLayout.vue

@@ -44,7 +44,7 @@
     </q-page-container>
   </q-layout>
 </template>
-<% if (sfcStyle === 'composition-setup') { %>
+
 <script setup lang="ts">
 import { ref } from 'vue';
 import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue';
@@ -99,143 +99,4 @@ const leftDrawerOpen = ref(false);
 function toggleLeftDrawer () {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
-</script><% } else if (sfcStyle === 'composition') { %>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue';
-
-const linksList: EssentialLinkProps[] = [
-  {
-    title: 'Docs',
-    caption: 'quasar.dev',
-    icon: 'school',
-    link: 'https://quasar.dev'
-  },
-  {
-    title: 'Github',
-    caption: 'github.com/quasarframework',
-    icon: 'code',
-    link: 'https://github.com/quasarframework'
-  },
-  {
-    title: 'Discord Chat Channel',
-    caption: 'chat.quasar.dev',
-    icon: 'chat',
-    link: 'https://chat.quasar.dev'
-  },
-  {
-    title: 'Forum',
-    caption: 'forum.quasar.dev',
-    icon: 'record_voice_over',
-    link: 'https://forum.quasar.dev'
-  },
-  {
-    title: 'Twitter',
-    caption: '@quasarframework',
-    icon: 'rss_feed',
-    link: 'https://twitter.quasar.dev'
-  },
-  {
-    title: 'Facebook',
-    caption: '@QuasarFramework',
-    icon: 'public',
-    link: 'https://facebook.quasar.dev'
-  },
-  {
-    title: 'Quasar Awesome',
-    caption: 'Community Quasar projects',
-    icon: 'favorite',
-    link: 'https://awesome.quasar.dev'
-  }
-];
-
-export default defineComponent({
-  name: 'MainLayout',
-
-  components: {
-    EssentialLink
-  },
-
-  setup () {
-    const leftDrawerOpen = ref(false);
-
-    return {
-      linksList,
-      leftDrawerOpen,
-      toggleLeftDrawer () {
-        leftDrawerOpen.value = !leftDrawerOpen.value;
-      }
-    };
-  }
-});
-</script><% } else if (sfcStyle === 'options') { %>
-<script lang="ts">
-import { defineComponent } from 'vue';
-import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue';
-
-const linksList: EssentialLinkProps[] = [
-  {
-    title: 'Docs',
-    caption: 'quasar.dev',
-    icon: 'school',
-    link: 'https://quasar.dev'
-  },
-  {
-    title: 'Github',
-    caption: 'github.com/quasarframework',
-    icon: 'code',
-    link: 'https://github.com/quasarframework'
-  },
-  {
-    title: 'Discord Chat Channel',
-    caption: 'chat.quasar.dev',
-    icon: 'chat',
-    link: 'https://chat.quasar.dev'
-  },
-  {
-    title: 'Forum',
-    caption: 'forum.quasar.dev',
-    icon: 'record_voice_over',
-    link: 'https://forum.quasar.dev'
-  },
-  {
-    title: 'Twitter',
-    caption: '@quasarframework',
-    icon: 'rss_feed',
-    link: 'https://twitter.quasar.dev'
-  },
-  {
-    title: 'Facebook',
-    caption: '@QuasarFramework',
-    icon: 'public',
-    link: 'https://facebook.quasar.dev'
-  },
-  {
-    title: 'Quasar Awesome',
-    caption: 'Community Quasar projects',
-    icon: 'favorite',
-    link: 'https://awesome.quasar.dev'
-  }
-];
-
-export default defineComponent({
-  name: 'MainLayout',
-
-  components: {
-    EssentialLink
-  },
-
-  data () {
-    return {
-      linksList,
-      leftDrawerOpen: false
-    }
-  },
-
-  methods: {
-    toggleLeftDrawer () {
-      this.leftDrawerOpen = !this.leftDrawerOpen;
-    }
-  }
-});
-</script><% } %>
+</script>

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/pages/ErrorNotFound.vue

@@ -21,14 +21,3 @@
     </div>
   </div>
 </template>
-<% if (sfcStyle === 'composition-setup') { %>
-<script setup lang="ts">
-//
-</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ErrorNotFound'
-});
-</script><% } %>

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/pages/IndexPage.vue

@@ -8,7 +8,7 @@
     ></example-component>
   </q-page>
 </template>
-<% if (sfcStyle === 'composition-setup') { %>
+
 <script setup lang="ts">
 import { ref } from 'vue';
 import type { Todo, Meta } from 'components/models';
@@ -40,92 +40,4 @@ const todos = ref<Todo[]>([
 const meta = ref<Meta>({
   totalCount: 1200
 });
-</script><% } else if (sfcStyle === 'composition') { %>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-import type { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
-
-export default defineComponent({
-  name: 'IndexPage',
-
-  components: {
-    ExampleComponent
-  },
-
-  setup () {
-    const todos = ref<Todo[]>([
-      {
-        id: 1,
-        content: 'ct1'
-      },
-      {
-        id: 2,
-        content: 'ct2'
-      },
-      {
-        id: 3,
-        content: 'ct3'
-      },
-      {
-        id: 4,
-        content: 'ct4'
-      },
-      {
-        id: 5,
-        content: 'ct5'
-      }
-    ]);
-
-    const meta = ref<Meta>({
-      totalCount: 1200
-    });
-
-    return { todos, meta };
-  }
-});
-</script><% } else if (sfcStyle === 'options') { %>
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
-
-export default defineComponent({
-  name: 'IndexPage',
-
-  components: {
-    ExampleComponent
-  },
-
-  data () {
-    const todos: Todo[] = [
-      {
-        id: 1,
-        content: 'ct1'
-      },
-      {
-        id: 2,
-        content: 'ct2'
-      },
-      {
-        id: 3,
-        content: 'ct3'
-      },
-      {
-        id: 4,
-        content: 'ct4'
-      },
-      {
-        id: 5,
-        content: 'ct5'
-      }
-    ];
-
-    const meta: Meta = {
-      totalCount: 1200
-    };
-
-    return { todos, meta };
-  }
-});
-</script><% } %>
+</script>

package/templates/app/quasar-v2/{ts-vite-2/.eslintrc.cjs → ts-webpack-4/__.eslintrc.cjs}

@@ -12,7 +12,6 @@ module.exports = {
       'productName',
 
       // Quasar v2 - TS
-      'sfcStyle',
       'css',
       'preset',
       'prettier'

package/templates/app/quasar-v2/{js-webpack-4/index.js → ts-webpack-4/create-quasar-script.js}

@@ -1,14 +1,30 @@
-export async function script ({ scope, utils }) {
+export async function createQuasarScript({ scope, utils }) {
   await utils.prompts(scope, [
     {
       type: 'multiselect',
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'Linting (ESLint)', value: 'eslint', description: 'recommended', selected: true },
-        { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
-        { title: 'axios', value: 'axios' },
-        { title: 'vue-i18n', value: 'i18n' }
+        {
+          title: 'Sass CSS preprocessor',
+          value: 'sass',
+          selected: true
+        },
+        {
+          title: 'Linting (ESLint)',
+          value: 'eslint',
+          description: 'recommended',
+          selected: true
+        },
+        {
+          title: 'State Management (Pinia)',
+          value: 'pinia',
+          description: 'https://pinia.vuejs.org'
+        },
+        {
+          title: 'Internationalization (vue-i18n)',
+          value: 'i18n'
+        }
       ],
       format: utils.convertArrayToObject
     },
@@ -26,9 +42,10 @@ export async function script ({ scope, utils }) {
 
   utils.createTargetDir(scope)
   utils.renderTemplate('BASE', scope)
-  utils.renderTemplate(scope.css, scope)
 
-  if (scope.preset.axios) utils.renderTemplate('axios', scope)
+  const css = scope.preset.sass ? 'sass' : 'css'
+  utils.renderTemplate(css, scope)
+
   if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
   if (scope.preset.eslint) utils.renderTemplate('eslint', scope)
   if (scope.prettier) utils.renderTemplate('prettier', scope)

package/templates/app/quasar-v2/ts-webpack-4/eslint/_eslint.config.js

@@ -2,8 +2,8 @@ import js from '@eslint/js'
 import globals from 'globals'
 import pluginVue from 'eslint-plugin-vue'
 import pluginQuasar from '@quasar/app-webpack/eslint'
-import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'<% if (prettier) { %>
-import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+<% if (scope.prettier) { %>import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
 
 export default defineConfigWithVueTs(
   {
@@ -81,7 +81,7 @@ export default defineConfigWithVueTs(
         ...globals.serviceworker
       }
     }
-  }<% if (prettier) { %>,
+  }<% if (scope.prettier) { %>,
 
   prettierSkipFormatting<% } %>
 )

package/templates/app/quasar-v2/ts-webpack-4/i18n/src/boot/i18n.ts

@@ -23,8 +23,8 @@ declare module 'vue-i18n' {
 
 export default defineBoot(({ app }) => {
   const i18n = createI18n<{ message: MessageSchema }, MessageLanguages>({
-    locale: 'en-US',<% if (sfcStyle === 'composition' || sfcStyle === 'composition-setup') { %>
-    legacy: false,<% } %>
+    locale: 'en-US',
+    legacy: false,
     messages,
   });
 

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

@@ -1,8 +1,8 @@
+import { defineConfig } from 'eslint/config'
 import globals from 'globals'
-import tseslint from 'typescript-eslint'
 import baseConfig from '../eslint.config.base.js'
 
-export default tseslint.config(
+export default defineConfig(
   ...baseConfig,
 
   {
@@ -27,9 +27,7 @@ export default tseslint.config(
 
         'preset',
         'orgName',
-        'license',
-
-        'codeFormat'
+        'license'
       ]
     },
 

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

@@ -1,4 +1,4 @@
-Quasar App Extension <%= name %>
+Quasar App Extension <%= scope.name %>
 ===
 
 _Be sure to change this readme as appropriate for your app extension._
@@ -7,15 +7,15 @@ _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?
 
-<%= description %>
+<%= scope.description %>
 
 # Install
 ```bash
-quasar ext add <%= name %>
+quasar ext add <%= scope.name %>
 ```
 Quasar CLI will retrieve it from the NPM registry and install the extension to your project.
 
-<% if (preset.prompts) { %>
+<% if (scope.preset.prompts) { %>
 ## Prompts
 
 > Explain the prompts here
@@ -23,7 +23,7 @@ Quasar CLI will retrieve it from the NPM registry and install the extension to y
 <% } %>
 # Uninstall
 ```bash
-quasar ext remove <%= name %>
+quasar ext remove <%= scope.name %>
 ```
 
 # Info

package/templates/app-extension/ae-js/BASE/_package.json

@@ -1,11 +1,11 @@
 {
-  <% if (needOrgName) { %>"name": "@<%= orgName %>/quasar-app-extension-<%= name %>",
-  <% } else { %>"name": "quasar-app-extension-<%= name %>",<% } %>
+  <% if (scope.needOrgName) { %>"name": "@<%= scope.orgName %>/quasar-app-extension-<%= scope.name %>",
+  <% } else { %>"name": "quasar-app-extension-<%= scope.name %>",<% } %>
   "version": "0.0.1",
-  "description": "<%= description %>",
-  "author": "<%= author %>",
-  "license": "<%= license %>",
-  "type": "<%= codeFormat === 'esm' ? 'module' : 'commonjs' %>",
+  "description": "<%= scope.description %>",
+  "author": "<%= scope.author %>",
+  "license": "<%= scope.license %>",
+  "type": "module",
   "scripts": {
     "test": "echo \"No test specified\" && exit 0"
   },

package/templates/app-extension/ae-js/BASE/src/index.js

@@ -5,6 +5,6 @@
  * Docs: https://quasar.dev/app-extensions/development-guide/index-api
  */
 
-<%= codeFormat === 'esm' ? 'export default' : 'module.exports =' %> function (api) {
+export default function (api) {
   //
 }

package/templates/app-extension/ae-js/{index.js → create-quasar-script.js}

@@ -1,4 +1,4 @@
-export async function script ({ scope, utils }) {
+export async function createQuasarScript({ scope, utils }) {
   await utils.prompts(scope, [
     {
       type: 'confirm',
@@ -16,22 +16,12 @@ export async function script ({ scope, utils }) {
     {
       type: 'text',
       name: 'name',
-      message: 'Quasar App Extension ext-id (without "quasar-app-extension" prefix), eg. "my-ext"',
-      validate: (val) =>
+      message:
+        'Quasar App Extension ext-id (without "quasar-app-extension" prefix), eg. "my-ext"',
+      validate: val =>
         utils.isValidPackageName(val) || 'Invalid App Extension name'
     },
 
-    {
-      type: 'select',
-      name: 'codeFormat',
-      message: 'Pick AE code format:',
-      initial: 0,
-      choices: [
-        { title: 'ESM (q/app-vite >= 1.5, q/app-webpack >= 3.10)', value: 'esm', description: 'recommended' },
-        { title: 'CommonJS', value: 'commonjs' }
-      ]
-    },
-
     utils.commonPrompts.description
   ])
 

package/templates/app-extension/ae-js/install-script/src/install.js

@@ -4,6 +4,6 @@
  * Docs: https://quasar.dev/app-extensions/development-guide/install-api
  */
 
-<%= codeFormat === 'esm' ? 'export default' : 'module.exports =' %> function (api) {
+export default function (api) {
   //
 }

package/templates/app-extension/ae-js/prompts-script/src/prompts.js

@@ -39,6 +39,6 @@
 
  */
 
-<%= codeFormat === 'esm' ? 'export default' : 'module.exports =' %> function (api) {
+export default function (api) {
   return []
 }

package/templates/app-extension/ae-js/uninstall-script/src/uninstall.js

@@ -4,6 +4,6 @@
  * Docs: https://quasar.dev/app-extensions/development-guide/uninstall-api
  */
 
-<%= codeFormat === 'esm' ? 'export default' : 'module.exports =' %> function (api) {
+export default function (api) {
   //
 }

package/templates/app-extension/ae-ts/BASE/README.md

@@ -14,17 +14,17 @@ Compatible with:
 # Development
 
 ```bash
-$ <%= packageManager?.name ?? 'pnpm' %> i # install the dependencies
+$ <%= scope.packageManager?.name ?? 'pnpm' %> i # install the dependencies
 
-$ <%= packageManager?.name ?? 'pnpm' %> build # build the app-extension. Run this after making any change in ./app-extension
+$ <%= scope.packageManager?.name ?? 'pnpm' %> build # build the app-extension. Run this after making any change in ./app-extension
 
-$ <%= packageManager?.name ?? 'pnpm' %> dev:vite # start the app-vite playground
-$ <%= packageManager?.name ?? 'pnpm' %> dev:webpack # start the app-webpack playground
+$ <%= scope.packageManager?.name ?? 'pnpm' %> dev:vite # start the app-vite playground
+$ <%= scope.packageManager?.name ?? 'pnpm' %> dev:webpack # start the app-webpack playground
 ```
 
 For more development-related explanation, see:
 - [`app-extension/src/runtime/README.md`](app-extension/src/runtime/README.md)
-<% if (preset.install) { %>- [`app-extension/src/templates/README.md`](app-extension/src/templates/README.md)<% } %>
+<% if (scope.preset.install) { %>- [`app-extension/src/templates/README.md`](app-extension/src/templates/README.md)<% } %>
 
 # Donate
 
@@ -32,4 +32,4 @@ If you appreciate the work that went into this project, please consider [donatin
 
 # License
 
-<%= license %> (c) <%= author %>
+<%= scope.license %> (c) <%= scope.author %>

package/templates/app-extension/ae-ts/BASE/_eslint.config.js

@@ -1,11 +1,12 @@
 import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
+import { defineConfig } from 'eslint/config';
 import pluginVue from 'eslint-plugin-vue';
 import configPrettier from 'eslint-config-prettier';
 import globals from 'globals';
+import tseslint from 'typescript-eslint';
 import { version as vueVersion } from 'vue';
 
-export default tseslint.config(
+export default defineConfig(
   {
     name: 'eslint/recommended',
     ...eslint.configs.recommended,