create-quasar 2.1.1 → 2.2.0

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

@@ -18,7 +18,7 @@
     </q-item-section>
   </q-item>
 </template>
-<% if (sfcStyle === 'composition-setup') { %>
+
 <script setup lang="ts">
 export interface EssentialLinkProps {
   title: string;
@@ -32,39 +32,4 @@ withDefaults(defineProps<EssentialLinkProps>(), {
   link: '#',
   icon: '',
 });
-</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export interface EssentialLinkProps {
-  title: string;
-  caption?: string;
-  link?: string;
-  icon?: string;
-};
-
-export default defineComponent({
-  name: 'EssentialLink',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-
-    caption: {
-      type: String,
-      default: ''
-    },
-
-    link: {
-      type: String,
-      default: '#'
-    },
-
-    icon: {
-      type: String,
-      default: ''
-    }
-  }
-});
-</script><% } %>
+</script>

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-webpack-4/__.eslintrc.cjs

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

package/templates/app/quasar-v2/ts-webpack-4/create-quasar-script.js

@@ -5,6 +5,11 @@ export async function createQuasarScript({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
+        {
+          title: 'Sass CSS preprocessor',
+          value: 'sass',
+          selected: true
+        },
         {
           title: 'Linting (ESLint)',
           value: 'eslint',
@@ -16,8 +21,10 @@ export async function createQuasarScript({ scope, utils }) {
           value: 'pinia',
           description: 'https://pinia.vuejs.org'
         },
-        { title: 'axios', value: 'axios' },
-        { title: 'vue-i18n', value: 'i18n' }
+        {
+          title: 'Internationalization (vue-i18n)',
+          value: 'i18n'
+        }
       ],
       format: utils.convertArrayToObject
     },
@@ -35,9 +42,10 @@ export async function createQuasarScript({ 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

@@ -27,9 +27,7 @@ export default defineConfig(
 
         '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/create-quasar-script.js

@@ -22,21 +22,6 @@ export async function createQuasarScript({ scope, utils }) {
         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 %>