create-quasar 0.0.1 → 1.0.0

package/templates/ui-kit/index.js

@@ -0,0 +1,110 @@
+
+module.exports = async function ({ scope, utils }) {
+  await utils.prompts(scope, [
+    utils.commonPrompts.quasarVersion,
+
+    {
+      type: 'text',
+      name: 'name',
+      message: 'Project name (npm name, kebab-case, without "quasar-ui" prefix)',
+      validate: (val) =>
+        utils.isValidPackageName(val) || 'Invalid package.json name'
+    },
+
+    utils.commonPrompts.author,
+    utils.commonPrompts.license,
+
+    {
+      type: 'multiselect',
+      name: 'features',
+      message: 'Pick what you will be interested in:',
+      format: utils.convertArrayToObject,
+      choices: [
+        {
+          title: 'Vue component',
+          value: 'component',
+          selected: true
+        },
+        {
+          title: 'Vue directive',
+          value: 'directive'
+        },
+        {
+          title: 'Quasar App Extension',
+          value: 'ae',
+          selected: true
+        }
+      ]
+    },
+
+    {
+      type: 'text',
+      name: 'packageDescription',
+      message: 'Package description',
+      initial: 'My awesome component',
+    },
+
+    {
+      type: 'text',
+      name: 'umdExportName',
+      message: 'UMD export name (global variable, camelCased)',
+      validate: val => val && val.length > 0
+    },
+
+    {
+      type: (_, { features }) => features.component ? 'text' : null,
+      name: 'componentName',
+      message: 'Component name (PascalCase)',
+      initial: 'MyComponent',
+      validate: val => val && val.length > 0
+    },
+
+    {
+      type: (_, { features }) => features.directive ? 'text' : null,
+      name: 'directiveName',
+      message: 'Directive name (kebab-case, without "v-" prefix)',
+      initial: 'my-directive',
+      validate: val => val && val.length > 0
+    },
+
+    {
+      type: (_, { features }) => features.ae ? 'text' : null,
+      name: 'aeDescription',
+      message: 'App Extension description',
+      initial: 'A Quasar App Extension',
+      validate: val => val && val.length > 0
+    },
+
+    {
+      type: (_, { features }) => features.ae ? 'multiselect' : null,
+      name: 'preset',
+      message: 'Pick the needed App Extension scripts:',
+      format: utils.convertArrayToObject,
+      choices: [
+        {
+          title: 'Prompts script',
+          value: 'prompts'
+        },
+        {
+          title: 'Install script',
+          value: 'install'
+        },
+        {
+          title: 'Uninstall script',
+          value: 'uninstall'
+        }
+      ]
+    },
+
+    utils.commonPrompts.repositoryType,
+    utils.commonPrompts.repositoryURL,
+    utils.commonPrompts.homepage,
+    utils.commonPrompts.bugs
+  ])
+
+  const script = require(`./quasar-${scope.quasarVersion}`)
+  await script({ scope, utils })
+
+  // we don't want to install
+  scope.skipDepsInstall = true
+}

package/templates/ui-kit/quasar-v1/BASE/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) <%= author %>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

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

@@ -0,0 +1,16 @@
+<img src="https://img.shields.io/npm/v/quasar-ui-<%= name %>.svg?label=quasar-ui-<%= name %>">
+<% if (features.ae) { %><img src="https://img.shields.io/npm/v/quasar-app-extension-<%= name %>.svg?label=quasar-app-extension-<%= name %>"><% } %>
+
+Compatible with Quasar UI v1 and Vue 2.
+
+# Structure
+* [/ui](ui) - standalone npm package
+<% if (features.ae) { %>
+* [/app-extension](app-extension) - Quasar app extension
+<% } %>
+
+# Donate
+If you appreciate the work that went into this project, please consider [donating to Quasar](https://donate.quasar.dev).
+
+# License
+<%= license %> (c) <%= author %>

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

@@ -0,0 +1,16 @@
+.DS_Store
+.thumbs.db
+node_modules
+dist
+yarn.lock
+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/jsconfig.json

@@ -0,0 +1,9 @@
+
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "ui/*": ["src/*"]
+    }
+  }
+}

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

@@ -0,0 +1,156 @@
+# <% if (features.component) { %>Component <%= componentName %><% if (features.directive) { %> and <% } } %><% if (features.directive) { %>Directive v-<%= directiveName %><% } %>
+
+[![npm](https://img.shields.io/npm/v/quasar-ui-<%= name %>.svg?label=quasar-ui-<%= name %>)](https://www.npmjs.com/package/quasar-ui-<%= name %>)
+[![npm](https://img.shields.io/npm/dt/quasar-ui-<%= name %>.svg)](https://www.npmjs.com/package/quasar-ui-<%= name %>)
+
+**Compatible with Quasar UI v1 and Vue 2**.
+
+<% if (features.component) { %>
+# Component <%= componentName %>
+> Short description of the component
+<% } %>
+
+<% if (features.directive) { %>
+# Directive v-<%= directiveName %>
+> Short description of the directive
+<% } %>
+
+# Usage
+
+## Quasar CLI project
+<% if (features.ae) { %>
+
+Install the [App Extension](../app-extension).
+
+**OR**:
+
+<% } %>
+Create and register a boot file:
+
+```js
+import Vue from 'vue'
+import Plugin from 'quasar-ui-<%= name %>'
+import 'quasar-ui-<%= name %>/dist/index.css'
+
+Vue.use(Plugin)
+```
+
+**OR**:
+
+```html
+<style src="quasar-ui-<%= name %>/dist/index.css"></style>
+
+<script>
+import { <% if (features.component) { %>Component as <%= componentName %><% if (features.directive) { %>, <% } %><% } %><% if (features.directive) { %>Directive<% } %> } from 'quasar-ui-<%= name %>'
+
+export default {
+  <% if (features.component) { %>
+  components: {
+    <%= componentName %>
+  }<% if (features.directive) { %>,<% } %>
+  <% } %>
+  <% if (features.directive) { %>
+  directives: {
+    Directive
+  }
+  <% } %>
+}
+</script>
+```
+
+## Vue CLI project
+
+```js
+import Vue from 'vue'
+import Plugin from 'quasar-ui-<%= name %>'
+import 'quasar-ui-<%= name %>/dist/index.css'
+
+Vue.use(Plugin)
+```
+
+**OR**:
+
+```html
+<style src="quasar-ui-<%= name %>/dist/index.css"></style>
+
+<script>
+import { <% if (features.component) { %>Component as <%= componentName %><% if (features.directive) { %>, <% } %><% } %><% if (features.directive) { %>Directive<% } %> } from 'quasar-ui-<%= name %>'
+
+export default {
+  <% if (features.component) { %>
+  components: {
+    <%= componentName %>
+  }<% if (features.directive) { %>,<% } %>
+  <% } %>
+  <% if (features.directive) { %>
+  directives: {
+    Directive
+  }
+  <% } %>
+}
+</script>
+```
+
+## UMD variant
+
+Exports `window.<%= umdExportName %>`.
+
+Add the following tag(s) after the Quasar ones:
+
+```html
+<head>
+  <!-- AFTER the Quasar stylesheet tags: -->
+  <link href="https://cdn.jsdelivr.net/npm/quasar-ui-<%= name %>/dist/index.min.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  <!-- at end of body, AFTER Quasar script(s): -->
+  <script src="https://cdn.jsdelivr.net/npm/quasar-ui-<%= name %>/dist/index.umd.min.js"></script>
+</body>
+```
+If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
+```html
+<link href="https://cdn.jsdelivr.net/npm/quasar-ui-<%= name %>/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
+```
+
+# Setup
+```bash
+$ yarn
+```
+
+# Developing
+```bash
+# start dev in SPA mode
+$ yarn dev
+
+# start dev in UMD mode
+$ yarn dev:umd
+
+# start dev in SSR mode
+$ yarn dev:ssr
+
+# start dev in Cordova iOS mode
+$ yarn dev:ios
+
+# start dev in Cordova Android mode
+$ yarn dev:android
+
+# start dev in Electron mode
+$ yarn dev:electron
+```
+
+# Building package
+```bash
+$ yarn build
+```
+
+# Adding Testing Components
+in the `ui/dev/src/pages` you can add Vue files to test your component/directive. When using `yarn dev` to build the UI, any pages in that location will automatically be picked up by dynamic routing and added to the test page.
+
+# Adding Assets
+If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the `ui/build/script.javascript.js` file, you will find a couple of commented out commands that call `addAssets`. Uncomment what you need and add your assets to have them be built and put into the `ui/dist` folder.
+
+# Donate
+If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).
+
+# License
+<%= license %> (c) <%= author %>

package/templates/ui-kit/quasar-v1/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-v1/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-v1/BASE/ui/build/entry/index.common.js

@@ -0,0 +1,3 @@
+import Plugin from '../../src/index'
+
+export default Plugin

package/templates/ui-kit/quasar-v1/BASE/ui/build/entry/index.esm.js

@@ -0,0 +1,4 @@
+import Plugin from '../../src/index'
+
+export default Plugin
+export * from '../../src/index'

package/templates/ui-kit/quasar-v1/BASE/ui/build/entry/index.umd.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import Plugin from '../../src/index'
+
+Vue.use(Plugin)
+
+export * from '../../src/index'

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

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

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

@@ -0,0 +1,60 @@
+const
+  fs = require('fs'),
+  path = require('path'),
+  root = path.resolve(__dirname, '../..'),
+  resolvePath = file => path.resolve(root, file),
+  { blue } = require('chalk')
+
+const writeJson = function (file, json) {
+  return fs.writeFileSync(file, JSON.stringify(json, null, 2) + '\n', 'utf-8')
+}
+
+module.exports.syncAppExt = function (both = true) {
+  // make sure this project has an app-extension project
+  const appExtDir = resolvePath('app-extension')
+  if (!fs.existsSync(appExtDir)) {
+    return
+  }
+
+  // make sure this project has an ui project
+  const uiDir = resolvePath('ui')
+  if (!fs.existsSync(uiDir)) {
+    return
+  }
+
+  // get version and name from ui package.json
+  const { name, version } = require(resolvePath(resolvePath('ui/package.json')))
+
+  // read app-ext package.json
+  const appExtFile = resolvePath('app-extension/package.json')
+  let appExtJson = require(appExtFile),
+    finished = false
+
+  // sync version numbers
+  if (both === true) {
+    appExtJson.version = version
+  }
+
+  // check dependencies
+  if (appExtJson.dependencies !== void 0) {
+    if (appExtJson.dependencies[name] !== void 0) {
+      appExtJson.dependencies[name] = '^' + version
+      finished = true
+    }
+  }
+  // check devDependencies, if not finished
+  if (finished === false && appExtJson.devDependencies !== void 0) {
+    if (appExtJson.devDependencies[name] !== void 0) {
+      appExtJson.devDependencies[name] = '^' + version
+      finished = true
+    }
+  }
+
+  if (finished === true) {
+    writeJson(appExtFile, appExtJson)
+    console.log(` ⭐️ App Extension version ${blue(appExtJson.name)} synced with UI version.\n`)
+    return
+  }
+
+  console.error(`   App Extension version and dependency NOT synced.\n`)
+}

package/templates/ui-kit/quasar-v1/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-v1/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))
+}