create-quasar 1.6.0 → 1.8.0

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">
+        404
+      </div>
+
+      <div class="text-h2" style="opacity:.4">
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup lang="ts">
+defineOptions({
+  name: 'ErrorNotFound'
+});
+</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 → ts-webpack-4}/BASE/src/pages/IndexPage.vue

@@ -8,11 +8,15 @@
     ></example-component>
   </q-page>
 </template>
-
-<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup lang="ts">
+import { ref } from 'vue';
 import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
-import { ref } from 'vue';
+
+defineOptions({
+  name: 'IndexPage'
+});
 
 const todos = ref<Todo[]>([
   {
@@ -36,17 +40,24 @@ const todos = ref<Todo[]>([
     content: 'ct5'
   }
 ]);
+
 const meta = ref<Meta>({
   totalCount: 1200
-});<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+});
+</script><% } else if (sfcStyle === 'composition') { %>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
 import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
-import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   name: 'IndexPage',
-  components: { ExampleComponent },
-  setup() {
+
+  components: {
+    ExampleComponent
+  },
+
+  setup () {
     const todos = ref<Todo[]>([
       {
         id: 1,
@@ -69,20 +80,28 @@ export default defineComponent({
         content: 'ct5'
       }
     ]);
+
     const meta = ref<Meta>({
       totalCount: 1200
     });
+
     return { todos, meta };
   }
-});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+});
+</script><% } else if (sfcStyle === 'options') { %>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
-import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'IndexPage',
-  components: { ExampleComponent },
-  data() {
+
+  components: {
+    ExampleComponent
+  },
+
+  data () {
     const todos: Todo[] = [
       {
         id: 1,
@@ -105,44 +124,12 @@ export default defineComponent({
         content: 'ct5'
       }
     ];
+
     const meta: Meta = {
       totalCount: 1200
     };
+
     return { todos, meta };
   }
-});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
-import { Vue, Options } from 'vue-class-component'
-import { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
-
-@Options({
-  components: { ExampleComponent }
-})
-export default class IndexPage extends Vue {
-  todos: Todo[] = [
-    {
-      id: 1,
-      content: 'ct1'
-    },
-    {
-      id: 2,
-      content: 'ct2'
-    },
-    {
-      id: 3,
-      content: 'ct3'
-    },
-    {
-      id: 4,
-      content: 'ct4'
-    },
-    {
-      id: 5,
-      content: 'ct5'
-    }
-  ];
-  meta: Meta = {
-    totalCount: 1200
-  };
-};<% } %>
-</script>
+});
+</script><% } %>

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

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

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

@@ -0,0 +1,55 @@
+export async function script ({ scope, utils }) {
+  await utils.prompts(scope, [
+    {
+      type: 'multiselect',
+      name: 'preset',
+      message: 'Check the features needed for your project:',
+      choices: [
+        { title: 'Linting (ESLint)', value: 'lint', description: 'recommended', selected: true },
+        { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
+        { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
+        { title: 'axios', value: 'axios' },
+        { title: 'vue-i18n', value: 'i18n' }
+      ],
+      format: values => {
+        let result = values
+
+        if (values.includes('vuex') && values.includes('pinia')) {
+          console.log()
+          utils.logger.warn('Only one state management package can be used. Picking the recommended Pinia and dropping Vuex.')
+          console.log()
+
+          result = values.filter(entry => entry !== 'vuex')
+        }
+
+        return utils.convertArrayToObject(result)
+      }
+    },
+    {
+      type: (_, { preset }) => (preset.lint ? 'select' : null),
+      name: 'lintConfig',
+      message: 'Pick an ESLint preset:',
+      choices: [
+        { title: 'Prettier', value: 'prettier', description: 'https://github.com/prettier/prettier' },
+        { title: 'Standard', value: 'standard', description: 'https://github.com/standard/standard' },
+        { title: 'Airbnb', value: 'airbnb', description: 'https://github.com/airbnb/javascript' }
+      ]
+    }
+  ])
+
+  utils.createTargetDir(scope)
+  utils.renderTemplate('BASE', scope)
+  utils.renderTemplate(scope.css, scope)
+
+  if (scope.preset.axios) utils.renderTemplate('axios', scope)
+  if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
+  if (scope.preset.lint) {
+    utils.renderTemplate('lint', scope)
+    if (scope.lintConfig === 'prettier') {
+      utils.renderTemplate('prettier', scope)
+    }
+  }
+
+  if (scope.preset.pinia) utils.renderTemplate('pinia', scope)
+  else if (scope.preset.vuex) utils.renderTemplate('vuex', scope)
+}

package/templates/app/quasar-v2/ts-webpack-4/lint/_.eslintignore

@@ -0,0 +1,8 @@
+/dist
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
+.eslintrc.cjs
+babel.config.cjs
+/quasar.config.*.temporary.compiled*

package/templates/app/quasar-v2/{ts-webpack → ts-webpack-4}/lint/_.eslintrc.cjs

@@ -16,8 +16,7 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
-    node: true,
-    'vue/setup-compiler-macros': true
+    node: true
   },
 
   // Rules order is important, please avoid shuffling them

package/templates/app-extension/ae-v1/index.js

@@ -84,11 +84,11 @@ export async function script ({ scope, utils }) {
   ])
 
   utils.createTargetDir(scope)
-  utils.renderTemplate(utils.join(import.meta.url, 'BASE'), scope)
+  utils.renderTemplate('BASE', scope)
 
-  if (scope.preset.prompts) utils.renderTemplate(utils.join(import.meta.url, 'prompts-script'), scope)
-  if (scope.preset.install) utils.renderTemplate(utils.join(import.meta.url, 'install-script'), scope)
-  if (scope.preset.uninstall) utils.renderTemplate(utils.join(import.meta.url, 'uninstall-script'), scope)
+  if (scope.preset.prompts) utils.renderTemplate('prompts-script', scope)
+  if (scope.preset.install) utils.renderTemplate('install-script', scope)
+  if (scope.preset.uninstall) utils.renderTemplate('uninstall-script', scope)
 
   // nothing to install, so we'll skip it
   scope.skipDepsInstall = true

package/templates/ui-kit/quasar-v1/index.js

@@ -1,18 +1,18 @@
 export async function script ({ scope, utils }) {
   utils.createTargetDir(scope)
-  utils.renderTemplate(utils.join(import.meta.url, 'BASE'), scope)
+  utils.renderTemplate('BASE', scope)
 
   if (scope.features.ae) {
-    utils.renderTemplate(utils.join(import.meta.url, 'ae'), scope)
-    if (scope.preset.install) utils.renderTemplate(utils.join(import.meta.url, 'ae-install'), scope)
-    if (scope.preset.prompts) utils.renderTemplate(utils.join(import.meta.url, 'ae-prompts'), scope)
-    if (scope.preset.uninstall) utils.renderTemplate(utils.join(import.meta.url, 'ae-uninstall'), scope)
+    utils.renderTemplate('ae', scope)
+    if (scope.preset.install) utils.renderTemplate('ae-install', scope)
+    if (scope.preset.prompts) utils.renderTemplate('ae-prompts', scope)
+    if (scope.preset.uninstall) utils.renderTemplate('ae-uninstall', scope)
   }
 
-  if (scope.features.component) utils.renderTemplate(utils.join(import.meta.url, 'ui-component'), scope)
-  if (scope.features.directive) utils.renderTemplate(utils.join(import.meta.url, 'ui-directive'), scope)
+  if (scope.features.component) utils.renderTemplate('ui-component', scope)
+  if (scope.features.directive) utils.renderTemplate('ui-directive', scope)
 
   if (scope.features.ae && (scope.features.component || scope.features.directive)) {
-    utils.renderTemplate(utils.join(import.meta.url, 'ui-ae'), scope)
+    utils.renderTemplate('ui-ae', scope)
   }
 }

package/templates/ui-kit/quasar-v2/index.js

@@ -1,18 +1,18 @@
 export async function script ({ scope, utils }) {
   utils.createTargetDir(scope)
-  utils.renderTemplate(utils.join(import.meta.url, 'BASE'), scope)
+  utils.renderTemplate('BASE', scope)
 
   if (scope.features.ae) {
-    utils.renderTemplate(utils.join(import.meta.url, 'ae'), scope)
-    if (scope.preset.install) utils.renderTemplate(utils.join(import.meta.url, 'ae-install'), scope)
-    if (scope.preset.prompts) utils.renderTemplate(utils.join(import.meta.url, 'ae-prompts'), scope)
-    if (scope.preset.uninstall) utils.renderTemplate(utils.join(import.meta.url, 'ae-uninstall'), scope)
+    utils.renderTemplate('ae', scope)
+    if (scope.preset.install) utils.renderTemplate('ae-install', scope)
+    if (scope.preset.prompts) utils.renderTemplate('ae-prompts', scope)
+    if (scope.preset.uninstall) utils.renderTemplate('ae-uninstall', scope)
   }
 
-  if (scope.features.component) utils.renderTemplate(utils.join(import.meta.url, 'ui-component'), scope)
-  if (scope.features.directive) utils.renderTemplate(utils.join(import.meta.url, 'ui-directive'), scope)
+  if (scope.features.component) utils.renderTemplate('ui-component', scope)
+  if (scope.features.directive) utils.renderTemplate('ui-directive', scope)
 
   if (scope.features.ae && (scope.features.component || scope.features.directive)) {
-    utils.renderTemplate(utils.join(import.meta.url, 'ui-ae'), scope)
+    utils.renderTemplate('ui-ae', scope)
   }
 }

package/utils/index.js

@@ -1,6 +1,6 @@
 import { readFileSync, writeFileSync, existsSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
-import { sep, normalize, join as pathJoin, resolve, extname } from 'node:path'
+import { sep, dirname, normalize, join, resolve, extname } from 'node:path'
 import { spawn, execSync as exec } from 'node:child_process'
 
 import { emptyDirSync, ensureDirSync, ensureFileSync, copySync } from 'fs-extra/esm'
@@ -13,10 +13,6 @@ import logger from './logger.js'
 
 const TEMPLATING_FILE_EXTENSIONS = [ '', '.json', '.js', '.cjs', '.ts', '.vue', '.md', '.html', '.sass' ]
 
-function join (importMetaUrl, targetPath) {
-  return fileURLToPath(new URL('./' + targetPath, importMetaUrl))
-}
-
 async function prompts (scope, questions, opts) {
   const options = opts || {
     onCancel: () => {
@@ -53,7 +49,21 @@ const runningPackageManager = (() => {
   }
 })()
 
-function renderTemplate (templateDir, scope) {
+function getCallerPath () {
+  const _prepareStackTrace = Error.prepareStackTrace
+  Error.prepareStackTrace = (_, stack) => stack
+  const stack = new Error().stack.slice(1)
+  Error.prepareStackTrace = _prepareStackTrace
+  const filename = stack[ 1 ].getFileName()
+  return dirname(
+    filename.startsWith('file://')
+      ? fileURLToPath(filename)
+      : filename
+  )
+}
+
+function renderTemplate (relativePath, scope) {
+  const templateDir = join(getCallerPath(), relativePath)
   const files = fglob.sync([ '**/*' ], { cwd: templateDir })
 
   for (const rawPath of files) {
@@ -217,13 +227,13 @@ function ensureOutsideProject () {
 
   while (dir.length && dir[ dir.length - 1 ] !== sep) {
     for (const name of quasarConfigFilenameList) {
-      const filename = pathJoin(dir, name)
+      const filename = join(dir, name)
       if (existsSync(filename)) {
         logger.fatal('Error. This command must NOT be executed inside of a Quasar project folder.')
       }
     }
 
-    dir = normalize(pathJoin(dir, '..'))
+    dir = normalize(join(dir, '..'))
   }
 }
 
@@ -312,7 +322,6 @@ const commonPrompts = {
 export default {
   logger,
 
-  join,
   prompts,
   createTargetDir,
   convertArrayToObject,

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

@@ -1,11 +0,0 @@
-<template>
-  <router-view />
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'App'
-})
-</script>

package/templates/app/quasar-v2/js-vite/BASE/src/layouts/MainLayout.vue

@@ -1,116 +0,0 @@
-<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
-        </q-toolbar-title>
-
-        <div>Quasar v{{ $q.version }}</div>
-      </q-toolbar>
-    </q-header>
-
-    <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-    >
-      <q-list>
-        <q-item-label
-          header
-        >
-          Essential Links
-        </q-item-label>
-
-        <EssentialLink
-          v-for="link in essentialLinks"
-          :key="link.title"
-          v-bind="link"
-        />
-      </q-list>
-    </q-drawer>
-
-    <q-page-container>
-      <router-view />
-    </q-page-container>
-  </q-layout>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-import EssentialLink from 'components/EssentialLink.vue'
-
-const linksList = [
-  {
-    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 {
-      essentialLinks: linksList,
-      leftDrawerOpen,
-      toggleLeftDrawer () {
-        leftDrawerOpen.value = !leftDrawerOpen.value
-      }
-    }
-  }
-})
-</script>

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

@@ -1,11 +0,0 @@
-<template>
-  <router-view />
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'App'
-})
-</script>

package/templates/app/quasar-v2/js-vite-beta/BASE/src/layouts/MainLayout.vue

@@ -1,116 +0,0 @@
-<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
-        </q-toolbar-title>
-
-        <div>Quasar v{{ $q.version }}</div>
-      </q-toolbar>
-    </q-header>
-
-    <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-    >
-      <q-list>
-        <q-item-label
-          header
-        >
-          Essential Links
-        </q-item-label>
-
-        <EssentialLink
-          v-for="link in essentialLinks"
-          :key="link.title"
-          v-bind="link"
-        />
-      </q-list>
-    </q-drawer>
-
-    <q-page-container>
-      <router-view />
-    </q-page-container>
-  </q-layout>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-import EssentialLink from 'components/EssentialLink.vue'
-
-const linksList = [
-  {
-    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 {
-      essentialLinks: linksList,
-      leftDrawerOpen,
-      toggleLeftDrawer () {
-        leftDrawerOpen.value = !leftDrawerOpen.value
-      }
-    }
-  }
-})
-</script>

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

@@ -1,11 +0,0 @@
-<template>
-  <router-view />
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'App'
-})
-</script>