Skip to content

feat: add quasar v1 support #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 18, 2019
Merged

feat: add quasar v1 support #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
30755ee
feat: add support for quasar v1, closes #12
nklayman Feb 17, 2019
8bbaf8f
fix: remove ide file
nklayman Feb 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 116 additions & 52 deletions generator/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
const
fs = require('fs'),
const fs = require('fs'),
extendPluginOptions = require('../lib/extendPluginOptions'),
extendBabel = require('../lib/extendBabel')

Expand All @@ -18,39 +17,58 @@ Enjoy! - Quasar Team
`

module.exports = (api, opts, rootOpts) => {
const
components = [
'QBtn',
'QLayout',
'QLayoutHeader',
'QLayoutDrawer',
'QPage',
'QPageContainer',
'QToolbar',
'QToolbarTitle',
'QList',
'QListHeader',
'QItemSeparator',
'QItem',
'QItemSide',
'QItemMain',
],
const components = opts.quasar.v1
? [
'QLayout',
'QHeader',
'QDrawer',
'QPageContainer',
'QPage',
'QToolbar',
'QToolbarTitle',
'QBtn',
'QIcon',
'QList',
'QItem',
'QItemSection',
'QItemLabel'
]
: [
'QBtn',
'QLayout',
'QLayoutHeader',
'QLayoutDrawer',
'QPage',
'QPageContainer',
'QToolbar',
'QToolbarTitle',
'QList',
'QListHeader',
'QItemSeparator',
'QItem',
'QItemSide',
'QItemMain'
],
directives = [],
plugins = []

const
tsPath = api.resolve('./src/main.ts'),
const tsPath = api.resolve('./src/main.ts'),
jsPath = api.resolve('./src/main.js'),
hasTS = fs.existsSync(tsPath)

const dependencies = opts.quasar.v1
? {
quasar: '^1.0.0-beta.1',
'@quasar/extras': '^1.0.0'
}
: {
'quasar-framework': '^0.17.0',
'quasar-extras': '^2.0.4'
}
const deps = {
dependencies: {
'quasar-framework': '^0.17.0',
'quasar-extras': '^2.0.4'
},
dependencies,
devDependencies: {
'babel-plugin-transform-imports': '1.5.0',
'stylus': '^0.54.5',
stylus: '^0.54.5',
'stylus-loader': '^3.0.2'
}
}
Expand All @@ -72,8 +90,13 @@ module.exports = (api, opts, rootOpts) => {
if (opts.quasar.all) {
pluginOptions.quasar.importAll = true
}

transpileDependencies.push(/[\\/]node_modules[\\/]quasar-framework[\\/]/)
if (opts.quasar.v1) {
pluginOptions.quasar.v1 = true
}
const transpileRegex = opts.quasar.v1
? /[\\/]node_modules[\\/]quasar[\\/]/
: /[\\/]node_modules[\\/]quasar-framework[\\/]/
transpileDependencies.push(transpileRegex)

return { pluginOptions, transpileDependencies }
})
Expand All @@ -83,26 +106,30 @@ module.exports = (api, opts, rootOpts) => {
api.render('./templates/rtl')
}
if (opts.quasar.replaceComponents) {
const
extension = hasTS ? 'ts' : 'js',
const extension = hasTS ? 'ts' : 'js',
routerFile = api.resolve(`src/router.${extension}`),
hasRouter = fs.existsSync(routerFile)

api.render(`./templates/with${hasRouter ? '' : 'out'}-router`, opts)
api.render(`./templates/with${hasRouter ? '' : 'out'}-router-base`, opts)
api.render(
`./templates/with${hasRouter ? '' : 'out'}-router-${
opts.quasar.v1 ? 'v1' : 'legacy'
}`,
opts
)
if (hasRouter) {
api.render(`./templates/with-router-${extension}`)
}
}

api.onCreateComplete(() => {
if (!opts.quasar.all) {
extendBabel(api, opts.quasar.theme)
extendBabel(api, opts.quasar)
}

let lines = '\n'

const
hasLang = opts.quasar.i18n !== 'en-us',
const hasLang = opts.quasar.i18n !== 'en-us',
hasIconSet = opts.quasar.iconSet !== 'material-icons'

if (!opts.quasar.features.includes(opts.quasar.iconSet)) {
Expand All @@ -112,29 +139,63 @@ module.exports = (api, opts, rootOpts) => {
lines += `\nimport './styles/quasar.styl'`

if (opts.quasar.features.includes('ie')) {
lines += `\nimport 'quasar-framework/dist/quasar.ie.polyfills'`
lines += `\nimport 'quasar${
opts.quasar.v1 ? '' : '-framework'
}/dist/quasar.ie.polyfills'`
}
const v1IconsMap = {
'material-icons': 'material-icons',
ionicons: 'ionicons-v4',
fontawesome: 'fontawesome-v5',
mdi: 'mdi-v3'
}
// Return either legacy or v1 name
const getIconSetName = name => (opts.quasar.v1 ? v1IconsMap[name] : name)
if (hasIconSet) {
lines += `\nimport iconSet from 'quasar-framework/icons/${opts.quasar.iconSet}'`
lines += `\nimport iconSet from 'quasar${
opts.quasar.v1 ? '' : '-framework'
}/${opts.quasar.v1 ? 'icon-set' : 'icons'}/${getIconSetName(
opts.quasar.iconSet
)}'`
}
if (hasLang) {
lines += `\nimport lang from 'quasar-framework/i18n/${opts.quasar.i18n}'`
lines += `\nimport lang from 'quasar${
opts.quasar.v1 ? '' : '-framework'
}/i18n/${opts.quasar.i18n}'`
}
const iconSets = [
'material-icons',
'fontawesome-v5',
'mdi-v3',
'ionicons-v4',
'fontawesome',
'mdi',
'ionicons'
]
opts.quasar.features
.filter(feat => feat !== 'ie')
.forEach(feat => {
lines += `\nimport 'quasar-extras/${feat}'`
if (iconSets.includes(feat)) feat = getIconSetName(feat)
lines += `\nimport '${
opts.quasar.v1 ? '@quasar/extras' : 'quasar-extras'
}/${feat}${
// Path must be iconpack/iconpack.css with @quasar/extras
iconSets.includes(feat) && opts.quasar.v1 ? `/${feat}.css` : ''
}'`
})

// build import
lines += `\nimport `
if (opts.quasar.all) {
lines += `Quasar`
}
else {
} else {
lines += `{\n Quasar, `
components.concat(directives).concat(plugins)
.forEach(part => { lines += `\n ${part},` })
components
.concat(directives)
.concat(plugins)
.forEach(part => {
lines += `\n ${part},`
})
lines += `\n}`
}
lines += ` from 'quasar'`
Expand All @@ -145,19 +206,22 @@ module.exports = (api, opts, rootOpts) => {

// if not 'all' we want to include specific defaults
if (!opts.quasar.all) {
lines+= ',\n components: {'
components
.forEach(part => { lines += `\n ${part},` })
lines += ',\n components: {'
components.forEach(part => {
lines += `\n ${part},`
})
lines += `\n }`

lines+= ',\n directives: {'
directives
.forEach(part => { lines += `\n ${part},` })
lines += ',\n directives: {'
directives.forEach(part => {
lines += `\n ${part},`
})
lines += `\n }`

lines+= ',\n plugins: {'
plugins
.forEach(part => { lines += `\n ${part},` })
lines += ',\n plugins: {'
plugins.forEach(part => {
lines += `\n ${part},`
})
lines += `\n }`
}

Expand Down
0 generator/templates/with-router/src/App.vue → ...or/templates/with-router-base/src/App.vue
View file
Open in desktop
File renamed without changes.
0 ...templates/with-router/src/views/About.vue → ...ates/with-router-base/src/views/About.vue
View file
Open in desktop
File renamed without changes.
0 .../templates/with-router/src/views/Home.vue → ...lates/with-router-base/src/views/Home.vue
View file
Open in desktop
File renamed without changes.
0 ...lates/with-router/src/layouts/Default.vue → ...ith-router-legacy/src/layouts/Default.vue
View file
Open in desktop
File renamed without changes.
125 changes: 125 additions & 0 deletions generator/templates/with-router-v1/src/layouts/Default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated class="glossy">
<q-toolbar>
<q-btn
flat
dense
round
@click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu"
>
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>menu<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-bars<% } else if (quasar.iconSet === "ionicons") { %>ion-android-menu<% } else if (quasar.iconSet === "mdi") { %>mdi-menu<% } %>" />
</q-btn>

<q-toolbar-title>
Quasar App
</q-toolbar-title>

<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>

<q-drawer
v-model="leftDrawerOpen"
bordered
content-class="bg-grey-2"
>
<q-list
no-border
link
inset-delimiter
>
<q-list no-border link inset-delimiter>
<q-item-label header>Navigation</q-item-label>
<q-item to="/" exact>
<q-item-section avatar>
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>home<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-home<% } else if (quasar.iconSet === "ionicons") { %>ion-home<% } else if (quasar.iconSet === "mdi") { %>mdi-home<% } %>" />
</q-item-section>
<q-item-section>
<q-item-label>Home</q-item-label>
</q-item-section>
</q-item>
<q-item to="/about" exact>
<q-item-section avatar>
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>info<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-info<% } else if (quasar.iconSet === "ionicons") { %>ion-information-circle-outline<% } else if (quasar.iconSet === "mdi") { %>mdi-information-outline<% } %>" />
</q-item-section>
<q-item-section>
<q-item-label>About</q-item-label>
</q-item-section>
</q-item>

<q-item-label header>Essential Links</q-item-label>
<q-item clickable tag="a" target="_blank" href="http://v1.quasar-framework.org">
<q-item-section avatar>
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>school<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-graduation-cap<% } else if (quasar.iconSet === "ionicons") { %>ion-school<% } else if (quasar.iconSet === "mdi") { %>mdi-school<% } %>" />
</q-item-section>
<q-item-section>
<q-item-label>Docs</q-item-label>
<q-item-label caption>v1.quasar-framework.org</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
<q-item-section avatar>
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>code<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-code<% } else if (quasar.iconSet === "ionicons") { %>ion-code<% } else if (quasar.iconSet === "mdi") { %>mdi-code-tags<% } %>" />
</q-item-section>
<q-item-section>
<q-item-label>Github</q-item-label>
<q-item-label caption>github.com/quasarframework</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="http://chat.quasar-framework.org">
<q-item-section avatar>
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>chat<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-comments<% } else if (quasar.iconSet === "ionicons") { %>ion-chatbubbles<% } else if (quasar.iconSet === "mdi") { %>mdi-message-text<% } %>" />
</q-item-section>
<q-item-section>
<q-item-label>Discord Chat Channel</q-item-label>
<q-item-label caption>chat.quasar-framework.org</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://forum.quasar-framework.org">
<q-item-section avatar>
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>forum<% } else if (quasar.iconSet === "fontawesome") { %>far fa-clipboard<% } else if (quasar.iconSet === "ionicons") { %>ion-chatboxes<% } else if (quasar.iconSet === "mdi") { %>mdi-forum<% } %>" />
</q-item-section>
<q-item-section>
<q-item-label>Forum</q-item-label>
<q-item-label caption>forum.quasar-framework.org</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
<q-item-section avatar>
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>rss_feed<% } else if (quasar.iconSet === "fontawesome") { %>fab fa-twitter<% } else if (quasar.iconSet === "ionicons") { %>ion-logo-twitter<% } else if (quasar.iconSet === "mdi") { %>mdi-twitter<% } %>" />
</q-item-section>
<q-item-section>
<q-item-label>Twitter</q-item-label>
<q-item-label caption>@quasarframework</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-list>
</q-drawer>

<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>

<script>
import { openURL } from 'quasar'

export default {
name: 'LayoutDefault',
data () {
return {
leftDrawerOpen: this.$q.platform.is.desktop
}
},
methods: {
openURL
}
}
</script>

<style>
</style>
0 ...hout-router/src/components/HelloWorld.vue → ...router-base/src/components/HelloWorld.vue
View file
Open in desktop
File renamed without changes.
0 ...ator/templates/without-router/src/App.vue → ...mplates/without-router-legacy/src/App.vue
View file
Open in desktop
File renamed without changes.
Loading