create-quasar 0.0.1 → 1.0.0

package/templates/ui-kit/quasar-v1/BASE/ui/build/script.javascript.js

@@ -0,0 +1,204 @@
+const path = require('path')
+const fs = require('fs')
+const fse = require('fs-extra')
+const rollup = require('rollup')
+const uglify = require('uglify-es')
+const buble = require('@rollup/plugin-buble')
+const json = require('@rollup/plugin-json')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+
+const buildConf = require('./config')
+const buildUtils = require('./utils')
+
+const rollupPlugins = [
+  nodeResolve({
+    extensions: ['.js'],
+    preferBuiltins: false
+  }),
+  json(),
+  buble({
+    objectAssign: 'Object.assign'
+  })
+]
+
+const builds = [
+  {
+    rollup: {
+      input: {
+        input: pathResolve('entry/index.esm.js')
+      },
+      output: {
+        file: pathResolve('../dist/index.esm.js'),
+        format: 'es'
+      }
+    },
+    build: {
+      // unminified: true,
+      minified: true
+    }
+  },
+  {
+    rollup: {
+      input: {
+        input: pathResolve('entry/index.common.js')
+      },
+      output: {
+        file: pathResolve('../dist/index.common.js'),
+        format: 'cjs'
+      }
+    },
+    build: {
+      // unminified: true,
+      minified: true
+    }
+  },
+  {
+    rollup: {
+      input: {
+        input: pathResolve('entry/index.umd.js')
+      },
+      output: {
+        name: '{{umdExportName}}',
+        file: pathResolve('../dist/index.umd.js'),
+        format: 'umd'
+      }
+    },
+    build: {
+      unminified: true,
+      minified: true,
+      minExt: true
+    }
+  }
+]
+
+// Add your asset folders here, if needed
+// addAssets(builds, 'icon-set', 'iconSet')
+// addAssets(builds, 'lang', 'lang')
+
+build(builds)
+
+/**
+ * Helpers
+ */
+
+function pathResolve (_path) {
+  return path.resolve(__dirname, _path)
+}
+
+// eslint-disable-next-line no-unused-vars
+function addAssets (builds, type, injectName) {
+  const
+    files = fs.readdirSync(pathResolve('../../ui/src/components/' + type)),
+    plugins = [ buble(bubleConfig) ],
+    outputDir = pathResolve(`../dist/${type}`)
+
+    fse.mkdirp(outputDir)
+
+  files
+    .filter(file => file.endsWith('.js'))
+    .forEach(file => {
+      const name = file.substr(0, file.length - 3).replace(/-([a-z])/g, g => g[1].toUpperCase())
+      builds.push({
+        rollup: {
+          input: {
+            input: pathResolve(`../src/components/${type}/${file}`),
+            plugins
+          },
+          output: {
+            file: addExtension(pathResolve(`../dist/${type}/${file}`), 'umd'),
+            format: 'umd',
+            name: `{{umdExportName}}.${injectName}.${name}`
+          }
+        },
+        build: {
+          minified: true
+        }
+      })
+    })
+}
+
+function build (builds) {
+  return Promise
+    .all(builds.map(genConfig).map(buildEntry))
+    .catch(buildUtils.logError)
+}
+
+function genConfig (opts) {
+  Object.assign(opts.rollup.input, {
+    plugins: rollupPlugins,
+    external: [ 'vue', 'quasar' ]
+  })
+
+  Object.assign(opts.rollup.output, {
+    banner: buildConf.banner,
+    globals: { vue: 'Vue', quasar: 'Quasar' }
+  })
+
+  return opts
+}
+
+function addExtension (filename, ext = 'min') {
+  const insertionPoint = filename.lastIndexOf('.')
+  return `${filename.slice(0, insertionPoint)}.${ext}${filename.slice(insertionPoint)}`
+}
+
+function buildEntry (config) {
+  return rollup
+    .rollup(config.rollup.input)
+    .then(bundle => bundle.generate(config.rollup.output))
+    .then(({ output }) => {
+      const code = config.rollup.output.format === 'umd'
+        ? injectVueRequirement(output[0].code)
+        : output[0].code
+
+      return config.build.unminified
+        ? buildUtils.writeFile(config.rollup.output.file, code)
+        : code
+    })
+    .then(code => {
+      if (!config.build.minified) {
+        return code
+      }
+
+      const minified = uglify.minify(code, {
+        compress: {
+          pure_funcs: ['makeMap']
+        }
+      })
+
+      if (minified.error) {
+        return Promise.reject(minified.error)
+      }
+
+      return buildUtils.writeFile(
+        config.build.minExt === true
+          ? addExtension(config.rollup.output.file)
+          : config.rollup.output.file,
+        buildConf.banner + minified.code,
+        true
+      )
+    })
+    .catch(err => {
+      console.error(err)
+      process.exit(1)
+    })
+}
+
+function injectVueRequirement (code) {
+  // eslint-disable-next-line
+  const index = code.indexOf(`Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue`)
+
+  if (index === -1) {
+    return code
+  }
+
+  const checkMe = ` if (Vue === void 0) {
+    console.error('[ Quasar ] Vue is required to run. Please add a script tag for it before loading Quasar.')
+    return
+  }
+  `
+
+  return code.substring(0, index - 1) +
+    checkMe +
+    code.substring(index)
+}

package/templates/ui-kit/quasar-v1/BASE/ui/build/script.open-umd.js

@@ -0,0 +1,6 @@
+const { resolve } = require('path')
+const open = require('open')
+
+open(
+  resolve(__dirname, '../umd-test.html')
+)

package/templates/ui-kit/quasar-v1/BASE/ui/build/utils.js

@@ -0,0 +1,56 @@
+const
+  fs = require('fs'),
+  path = require('path'),
+  zlib = require('zlib'),
+  { green, blue, red, cyan } = require('chalk'),
+  kebabRegex = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g
+
+function getSize (code) {
+  return (code.length / 1024).toFixed(2) + 'kb'
+}
+
+module.exports.createFolder = function (folder) {
+  const dir = path.join(__dirname, '..', folder)
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir)
+  }
+}
+
+module.exports.writeFile = function (dest, code, zip) {
+  const banner = dest.indexOf('.json') > -1
+    ? red('[json]')
+    : dest.indexOf('.js') > -1
+      ? green('[js]  ')
+      : dest.indexOf('.ts') > -1
+        ? cyan('[ts]  ')
+        : blue('[css] ')
+
+  return new Promise((resolve, reject) => {
+    function report (extra) {
+      console.log(`${banner} ${path.relative(process.cwd(), dest).padEnd(41)} ${getSize(code).padStart(8)}${extra || ''}`)
+      resolve(code)
+    }
+
+    fs.writeFile(dest, code, err => {
+      if (err) return reject(err)
+      if (zip) {
+        zlib.gzip(code, (err, zipped) => {
+          if (err) return reject(err)
+          report(` (gzipped: ${getSize(zipped).padStart(8)})`)
+        })
+      }
+      else {
+        report()
+      }
+    })
+  })
+}
+
+module.exports.readFile = function (file) {
+  return fs.readFileSync(file, 'utf-8')
+}
+
+module.exports.logError = function (err) {
+  console.error('\n' + red('[Error]'), err)
+  console.log()
+}

package/templates/ui-kit/quasar-v1/BASE/ui/dev/README.md

@@ -0,0 +1,3 @@
+# Dev app (playground)
+
+Adding .vue files to src/pages/ will auto-add them to the Index page list.

package/templates/ui-kit/quasar-v1/BASE/ui/dev/_editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/templates/ui-kit/quasar-v1/BASE/ui/dev/_gitignore

@@ -0,0 +1,20 @@
+.quasar
+.DS_Store
+.thumbs.db
+node_modules
+/dist
+/src-cordova/node_modules
+/src-cordova/platforms
+/src-cordova/plugins
+/src-cordova/www
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

package/templates/ui-kit/quasar-v1/BASE/ui/dev/_postcssrc.js

@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  plugins: [
+    // to edit target browsers: use "browserslist" field in package.json
+    require('autoprefixer')
+  ]
+}

package/templates/ui-kit/quasar-v1/BASE/ui/dev/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@quasar/babel-preset-app'
+  ]
+}

package/templates/ui-kit/quasar-v1/BASE/ui/dev/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "dev",
+  "version": "1.0.0",
+  "description": "A Quasar Framework app",
+  "productName": "Quasar App",
+  "private": true,
+  "scripts": {
+    "dev": "quasar dev",
+    "dev:ssr": "quasar dev -m ssr",
+    "dev:ios": "quasar dev -m ios",
+    "dev:android": "quasar dev -m android",
+    "dev:electron": "quasar dev -m electron"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.0.0",
+    "core-js": "^3.0.0"
+  },
+  "devDependencies": {
+    "@quasar/app": "^2.0.0"
+  },
+  "browserslist": [
+    "last 10 Chrome versions",
+    "last 10 Firefox versions",
+    "last 4 Edge versions",
+    "last 7 Safari versions",
+    "last 8 Android versions",
+    "last 8 ChromeAndroid versions",
+    "last 8 FirefoxAndroid versions",
+    "last 10 iOS versions",
+    "last 5 Opera versions"
+  ],
+  "engines": {
+    "node": ">= 8.9.0",
+    "npm": ">= 5.6.0",
+    "yarn": ">= 1.6.0"
+  }
+}

package/templates/ui-kit/quasar-v1/BASE/ui/dev/quasar.config.js

@@ -0,0 +1,61 @@
+// Configuration for your app
+// https://quasar.dev/quasar-cli/quasar-conf-js
+
+const path = require('path')
+const webpack = require('webpack')
+
+module.exports = function (ctx) {
+  return {
+    // app boot file (/src/boot)
+    // --> boot files are part of "main.js"
+    boot: [
+      'register.js'
+    ],
+
+    css: [
+      'app.sass'
+    ],
+
+    extras: [
+      // 'ionicons-v4',
+      // 'mdi-v5',
+      // 'fontawesome-v5',
+      // 'eva-icons',
+      // 'themify',
+      // 'line-awesome',
+      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+
+      'roboto-font', // optional, you are not bound to it
+      'material-icons' // optional, you are not bound to it
+    ],
+
+    framework: {
+      // iconSet: 'material-icons', // Quasar icon set
+      // lang: 'en-US', // Quasar language pack
+
+      config: {},
+
+      // Quasar plugins
+      plugins: []
+    },
+
+    // animations: 'all', // --- includes all animations
+    animations: [],
+
+    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
+    build: {
+      vueRouterMode: 'history',
+
+      chainWebpack (chain) {
+        chain.resolve.alias.merge({
+          'ui': path.resolve(__dirname, '../src/index.js')
+        })
+      }
+    },
+
+    devServer: {
+      // port: 8080,
+      open: true // opens browser window automatically
+    }
+  }
+}

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="q-app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/boot/register.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VuePlugin from 'ui' // "ui" is aliased in quasar.conf.js
+
+Vue.use(VuePlugin)

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/css/app.sass

@@ -0,0 +1,2 @@
+// app global css in Sass form
+@import '../../../src/index.sass'

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/css/quasar.variables.sass

@@ -0,0 +1,22 @@
+// Quasar Sass (& SCSS) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Stylus variables found in Quasar's source Stylus files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary   : #027BE3
+$secondary : #26A69A
+$accent    : #9C27B0
+
+$positive  : #21BA45
+$negative  : #C10015
+$info      : #31CCEC
+$warning   : #F2C037

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/index.template.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= '\<%= productName %\>' %></title>
+
+    <meta charset="utf-8">
+    <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 \<% } %\>' %>">
+  </head>
+  <body>
+    <!-- DO NOT touch the following DIV -->
+    <div id="q-app"></div>
+  </body>
+</html>

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/layouts/MyLayout.vue

@@ -0,0 +1,39 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          to="/"
+          icon="home"
+        />
+
+        <q-toolbar-title>
+          quasar-ui-<%= name %> v{{ version }}
+        </q-toolbar-title>
+
+        <div>Quasar v{{ $q.version }}</div>
+      </q-toolbar>
+    </q-header>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script>
+import { version } from 'ui' // "ui" is aliased in quasar.conf.js
+
+export default {
+  name: 'MyLayout',
+
+  data () {
+    return {
+      version
+    }
+  }
+}
+</script>

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/pages/Index.vue

@@ -0,0 +1,38 @@
+<template>
+  <q-page padding class="row justify-center">
+    <q-list dense class="list">
+      <div class="text-h4 q-mb-md">Test pages</div>
+      <q-item
+        v-for="page in pages"
+        :key="page.path"
+        :to="page.path"
+      >
+        <q-item-section avatar>
+          <q-icon name="pages" />
+        </q-item-section>
+        <q-item-section>
+          {{ page.title }}
+        </q-item-section>
+        <q-item-section side>
+          <q-icon name="chevron_right" />
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-page>
+</template>
+
+<script>
+import pages from '../router/pages'
+
+export default {
+  created () {
+    this.pages = pages
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+.list
+  width: 700px
+  max-width: 100%
+</style>

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/pages/Test1.vue

@@ -0,0 +1,18 @@
+<template>
+  <q-page padding>
+    <% if (features.component) { %>
+    <<%= componentName %> />
+    <% } %>
+    <% if (features.directive) { %>
+    <div v-<%= directiveName %> class="directive-target">
+      x
+    </div>
+    <% } %>
+  </q-page>
+</template>
+
+<style lang="sass" scoped>
+.directive-target
+  width: 50px
+  height: 50px
+</style>

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/router/index.js

@@ -0,0 +1,43 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import routes from './routes'
+
+Vue.use(VueRouter)
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation
+ */
+
+export default function (/* { store, ssrContext } */) {
+  const Router = new VueRouter({
+    scrollBehavior: () => ({ x: 0, y: 0 }),
+    routes,
+
+    // Leave these as is and change from quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    mode: process.env.VUE_ROUTER_MODE,
+    base: process.env.VUE_ROUTER_BASE
+  })
+
+  // we get each page from server first!
+  if (process.env.MODE === 'ssr' && process.env.CLIENT) {
+    console.log('!!!!')
+    console.log('On route change we deliberately load page from server -- in order to test hydration errors')
+    console.log('!!!!')
+
+    let reload = false
+    Router.beforeEach((to, _, next) => {
+      if (reload) {
+        window.location.href = to.fullPath
+        return
+      }
+      reload = true
+      next()
+    })
+  }
+
+  return Router
+}

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/router/pages.js

@@ -0,0 +1,27 @@
+/*
+ * Export files list for /pages folder
+ */
+
+function kebabCase (str) {
+  const result = str.replace(
+    /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,
+    match => '-' + match.toLowerCase()
+  )
+  return (str[0] === str[0].toUpperCase())
+    ? result.substring(1)
+    : result
+}
+
+function slugify (str) {
+  return encodeURIComponent(String(str).trim().replace(/\s+/g, '-'))
+}
+
+export default require.context('../pages', true, /^\.\/.*\.vue$/)
+  .keys()
+  .map(page => page.slice(2).replace('.vue', ''))
+  .filter(page => page !== 'Index')
+  .map(page => ({
+    file: page,
+    title: page + '.vue',
+    path: slugify(kebabCase(page))
+  }))

package/templates/ui-kit/quasar-v1/BASE/ui/dev/src/router/routes.js

@@ -0,0 +1,18 @@
+import pages from './pages'
+
+const children = pages.map(page => ({
+  path: page.path,
+  component: () => import('pages/' + page.file + '.vue')
+}))
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('layouts/MyLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Index.vue') }
+    ].concat(children)
+  }
+]
+
+export default routes