create-quasar 0.0.1 → 1.0.0

package/templates/ui-kit/quasar-v2/BASE/ui/_npmignore

@@ -0,0 +1,21 @@
+/build
+/dev
+umd-test.html
+
+.DS_Store
+.thumbs.db
+yarn.lock
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+.editorconfig
+.eslintignore
+.eslintrc.js

package/templates/ui-kit/quasar-v2/BASE/ui/build/config.js

@@ -0,0 +1,13 @@
+const { name, author, version } = require('../package.json')
+const year = (new Date()).getFullYear()
+
+module.exports = {
+  name,
+  version,
+  banner:
+    '/*!\n' +
+    ' * ' + name + ' v' + version + '\n' +
+    ' * (c) ' + year + ' ' + author + '\n' +
+    ' * Released under the MIT License.\n' +
+    ' */\n'
+}

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

@@ -0,0 +1,19 @@
+process.env.NODE_ENV = 'production'
+
+const parallel = require('os').cpus().length > 1
+const runJob = parallel ? require('child_process').fork : require
+const { join } = require('path')
+const { createFolder } = require('./utils')
+const { green, blue } = require('chalk')
+
+console.log()
+
+<% if (features.ae) { %>require('./script.app-ext.js').syncAppExt()<% } %>
+require('./script.clean.js')
+
+console.log(` 📦 Building ${green('v' + require('../package.json').version)}...${parallel ? blue(' [multi-threaded]') : ''}\n`)
+
+createFolder('dist')
+
+runJob(join(__dirname, './script.javascript.js'))
+runJob(join(__dirname, './script.css.js'))

package/templates/ui-kit/quasar-v2/BASE/ui/build/script.clean.js

@@ -0,0 +1,6 @@
+var
+  rimraf = require('rimraf'),
+  path = require('path')
+
+rimraf.sync(path.resolve(__dirname, '../dist/*'))
+console.log(` 💥 Cleaned build artifacts.\n`)

package/templates/ui-kit/quasar-v2/BASE/ui/build/script.css.js

@@ -0,0 +1,75 @@
+const path = require('path')
+const sass = require('sass')
+const postcss = require('postcss')
+const cssnano = require('cssnano')
+const rtl = require('rtlcss')
+const autoprefixer = require('autoprefixer')
+
+const buildConf = require('./config')
+const buildUtils = require('./utils')
+
+const postCssCompiler = postcss([ autoprefixer ])
+const postCssRtlCompiler = postcss([ rtl({}) ])
+
+const nano = postcss([
+  cssnano({
+    preset: ['default', {
+      mergeLonghand: false,
+      convertValues: false,
+      cssDeclarationSorter: false,
+      reduceTransforms: false
+    }]
+  })
+])
+
+Promise
+  .all([
+    generate('src/index.sass', `dist/index`)
+  ])
+  .catch(e => {
+    console.error(e)
+    process.exit(1)
+  })
+
+/**
+ * Helpers
+ */
+
+function resolve (_path) {
+  return path.resolve(__dirname, '..', _path)
+}
+
+function generate (src, dest) {
+  src = resolve(src)
+  dest = resolve(dest)
+
+  return new Promise((resolve, reject) => {
+    sass.render({ file: src, includePaths: ['node_modules'] }, (err, result) => {
+      if (err) {
+        reject(err)
+        return
+      }
+
+      resolve(result.css)
+    })
+  })
+  .then(code => buildConf.banner + code)
+  .then(code => postCssCompiler.process(code, { from: void 0 }))
+  .then(code => {
+    code.warnings().forEach(warn => {
+      console.warn(warn.toString())
+    })
+    return code.css
+  })
+  .then(code => Promise.all([
+    generateUMD(dest, code),
+    postCssRtlCompiler.process(code, { from: void 0 })
+      .then(code => generateUMD(dest, code.css, '.rtl'))
+  ]))
+}
+
+function generateUMD (dest, code, ext = '') {
+  return buildUtils.writeFile(`${dest}${ext}.css`, code, true)
+    .then(code => nano.process(code, { from: void 0 }))
+    .then(code => buildUtils.writeFile(`${dest}${ext}.min.css`, code.css, true))
+}

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

@@ -0,0 +1,213 @@
+const path = require('path')
+const fs = require('fs')
+const fse = require('fs-extra')
+const rollup = require('rollup')
+const uglify = require('uglify-js')
+const buble = require('@rollup/plugin-buble')
+const json = require('@rollup/plugin-json')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const replace = require('@rollup/plugin-replace')
+
+const { version } = require('../package.json')
+
+const buildConf = require('./config')
+const buildUtils = require('./utils')
+
+const rollupPlugins = [
+  replace({
+    preventAssignment: false,
+    values: {
+      __UI_VERSION__: `'${ version }'`
+    }
+  }),
+  nodeResolve({
+    extensions: ['.js'],
+    preferBuiltins: false
+  }),
+  json(),
+  buble({
+    objectAssign: 'Object.assign'
+  })
+]
+
+const builds = [
+  {
+    rollup: {
+      input: {
+        input: pathResolve('../src/index.esm.js')
+      },
+      output: {
+        file: pathResolve('../dist/index.esm.js'),
+        format: 'es'
+      }
+    },
+    build: {
+      // unminified: true,
+      minified: true
+    }
+  },
+  {
+    rollup: {
+      input: {
+        input: pathResolve('../src/index.common.js')
+      },
+      output: {
+        file: pathResolve('../dist/index.common.js'),
+        format: 'cjs'
+      }
+    },
+    build: {
+      // unminified: true,
+      minified: true
+    }
+  },
+  {
+    rollup: {
+      input: {
+        input: pathResolve('../src/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/BASE/ui/dev/babel.config.js

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

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

@@ -0,0 +1,30 @@
+{
+  "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"
+  },
+  "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-v2/BASE/ui/dev/quasar.config.js

@@ -0,0 +1,73 @@
+// 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.esm.js`)
+        })
+
+        chain.plugin('define-ui')
+          .use(webpack.DefinePlugin, [{
+            __UI_VERSION__: `'${require('../package.json').version}'`
+          }])
+      }
+    },
+
+    devServer: {
+      // port: 8080,
+      open: true // opens browser window automatically
+    },
+
+    ssr: {
+      middlewares: [
+        ctx.prod ? 'compression' : '',
+        'render' // keep this as last one
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>

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

@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers'
+import VuePlugin from 'ui' // "ui" is aliased in quasar.conf.js
+
+export default boot(({ app }) => {
+  app.use(VuePlugin)
+})

package/templates/ui-kit/quasar-v2/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-v2/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-v2/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-v2/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',
+
+  setup () {
+    return {
+      version
+    }
+  }
+}
+</script>