feat: optimize builds

Also new build options to customize less files

Author: Pooya Parsa

Diff for: README.md

@@ -60,13 +60,16 @@ Add options in `framework7` section inside `nuxt.config.js` file.
 
 Option          | Type         | Default   |  Description
 ----------------|--------------|-----------|--------------------------------------------------------------
-`css`           | Boolean      | `true`    | Include Framework7 css (disable to provide a custom build)
+`css`           | Boolean      | `true`    | Include Framework7 styles (Useful to disable and provide your own)
 `rtl`           | Boolean      | `false`   | Enable RTL layout
 `f7Icons`       | Boolean      | `true`    | Include Framework7 Icons (IOS)
 `mdIcons`       | Boolean      | `true`    | Include MD Icons
+`pwa`           | Boolean      | `true`    | Enable [@nuxtjs/pwa](https://github.com/nuxt-community/pwa-module) module
 `routes`        | Object       | `true`    | Route overrides (see below)
 `mode`          | String       | `hash`    | Router mode. Can be `hash` or `history`
-`view`          | Object       | `{ ... }` | Options passed to root view of framework7
+`view`          | Object       | defaults  | Options passed to root view of framework7
+`build`         | Object       | [framework7 defaults](https://unpkg.com/framework7/scripts/build-config.js) | Framework7 build config used for customizing less variables
+`themeColor`    | String       | `undefined` | If specified, automatically sets all global theme colors to this value
 
 ### routes override
 Routes are auto generated using pages directory structure.

Diff for: examples/kitchen-sink/components/tab.vue

@@ -12,10 +12,10 @@ module.exports = {
   },
   manifest: {
     name: 'Nuxt7',
-    description: 'Nuxt7 PWA Demo',
-    theme_color: '#2196f3'
+    description: 'Nuxt7 PWA Demo'
   },
   framework7: {
+    themeColor: '#2196f3',
     mode: 'history',
     routes: {
       'tabs-routable': {

Diff for: examples/kitchen-sink/nuxt.config.js

@@ -1,38 +1,17 @@
 const { resolve } = require('path')
-const { defaultsDeep, cloneDeep } = require('lodash')
-
-const defaults = {
-  css: true,
-  rtl: false,
-
-  f7Icons: true,
-  mdIcons: true,
-
-  routes: {},
-
-  mode: 'hash',
-
-  view: {
-    main: true,
-    pushState: true,
-    pushStateSeparator: '!#',
-    pushStateRoot: null
-  }
-}
+const { defaultsDeep } = require('lodash')
+const f7BuildConfig = require('framework7/scripts/build-config')
 
 const resolvePath = (...args) => resolve(__dirname, ...args)
-const resolveDep = p => require.resolve(p)
 
-module.exports = function nuxt7 (moduleOptions) {
-  const options = defaultsDeep({}, moduleOptions, this.options.framework7, defaults)
-  const cloneOptions = () => cloneDeep(options)
+module.exports = function nuxt7 (_options) {
+  const options = defaultsDeep({}, _options, this.options.framework7, defaults)
 
   // Router Mode
   if (options.mode === 'history') {
     options.view.pushStateSeparator = '__window.location.origin ? \'\' : \'#\'__'
     options.view.pushStateRoot = '__window.location.origin__'
   }
-  delete options.mode
 
   // Force mode to SPA
   this.options.mode = 'spa'
@@ -42,35 +21,104 @@ module.exports = function nuxt7 (moduleOptions) {
   // Customize build
   this.extendBuild(config => extendConfig(config, options))
 
-  // Force add F7 dependencies to common chunk
-  this.addVendor(`framework7`)
+  // Global theme color
+  if (options.themeColor) {
+    options.build.ios.themeColor = options.themeColor
+    options.build.md.themeColor = options.themeColor
+
+    if (!this.options.manifest) {
+      this.options.manifest = {}
+    }
+    this.options.manifest.theme_color = options.themeColor
+  }
+
+  // Move F7 dependencies to common chunk
   this.addVendor(`framework7-vue`)
   this.addVendor('dom7')
   this.addVendor('template7')
 
-  // Framework7 css files
-  if (options.css) {
-    this.options.css.push(resolveDep(`framework7/dist/css/framework7${options.rtl ? '.rtl' : ''}.css`))
-  }
-  delete options.css
+  // Add templates
+  addTemplates.call(this, options)
 
   // Icons
   if (options.f7Icons) {
-    this.options.css.push('framework7-icons/css/framework7-icons.css')
+    options.f7IconsSrc = 'framework7-icons/css/framework7-icons.css'
   }
-  delete options.f7Icons
 
   if (options.mdIcons) {
-    this.options.css.push(resolvePath('assets/material-icons/material-icons.css'))
+    options.mdIconsSrc = resolvePath('assets/material-icons/material-icons.css')
   }
-  delete options.mdIcons
+
+  // Enable IOS specific meta for web app
+  if (!this.options.meta) {
+    this.options.meta = {}
+  }
+  this.options.meta.mobileAppIOS = true
+
+  // Prevent zooming page for a better Native experience
+  this.options.meta.viewport = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui'
+
+  // Require PWA module
+  if (options.pwa !== false) {
+    return this.requireModule('@nuxtjs/pwa')
+  }
+
+  return Promise.resolve()
+}
+
+// ----------------------------------------------------------
+// Add templates
+// ----------------------------------------------------------
+function addTemplates (options) {
+  // --- Framework7 templates ---
+
+  // Build framework7 from source
+  // options.require = require
+  // this.addTemplate({
+  //   src: resolvePath('templates/framework7.js'),
+  //   fileName: 'framework7.js',
+  //   options
+  // })
+
+  // Framework7 plugin
+  this.addPlugin({
+    src: resolvePath('templates/f7-plugin.js'),
+    fileName: 'f7-plugin.js',
+    options
+  })
+
+  // Framework7 routes
+  this.addTemplate({
+    src: resolvePath('templates/f7-router.js'),
+    fileName: 'f7-router.js',
+    options
+  })
+
+  // Framework7 styles
+  if (options.css) {
+    this.addTemplate({
+      src: resolvePath('templates/framework7.less'),
+      fileName: 'framework7.less',
+      options
+    })
+  }
+
+  // Framework 7 components
+  this.addTemplate({
+    src: resolvePath('templates/f7-components.js'),
+    fileName: 'f7-components.js',
+    options
+  })
+
+  // --- Nuxt internals ---
 
   // App.js
   this.addTemplate({
     src: resolvePath('templates/App.js'),
     fileName: 'App.js',
     options
   })
+
   // ... Support for nuxt <= 1.0.0-rc11
   this.addTemplate({
     src: resolvePath('templates/App.vue'),
@@ -84,6 +132,7 @@ module.exports = function nuxt7 (moduleOptions) {
     fileName: 'components/nuxt.js',
     options
   })
+
   // ... Support for nuxt <= 1.0.0-rc11
   this.addTemplate({
     src: resolvePath('templates/components/nuxt.vue'),
@@ -104,60 +153,47 @@ module.exports = function nuxt7 (moduleOptions) {
     fileName: 'router.js',
     options
   })
-
-  // Framework7 routes
-  this.addTemplate({
-    src: resolvePath('templates/f7-router.js'),
-    fileName: 'f7-router.js',
-    options: cloneOptions()
-  })
-  delete options.routes
-
-  // Framework7 plugin
-  this.addPlugin({
-    src: resolvePath('templates/f7.js'),
-    fileName: 'f7.js',
-    options
-  })
-
-  // Framework 7 components
-  this.addPlugin({
-    src: resolvePath('templates/f7-components.js'),
-    fileName: 'f7-components.js',
-    options
-  })
-
-  // Enable IOS specific meta for web app
-  if (!this.options.meta) this.options.meta = {}
-  this.options.meta.mobileAppIOS = true
-
-  // Prevent zooming page for a better Native experience
-  this.options.meta.viewport = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui'
-
-  // Require PWA module
-  return Promise.all([
-    this.requireModule('@nuxtjs/pwa')
-  ])
 }
 
+// ----------------------------------------------------------
+// Extend webpack config
+// ----------------------------------------------------------
 function extendConfig (config, options) {
+  // Don't exclude babel for F7 stuff
+  const babelLoader = config.module.rules.find(r => r.loader === 'babel-loader')
+  babelLoader.exclude = /node_modules\/(?!(framework7|framework7-vue|template7|dom7)\/).*/
+
   // Increase performance check limits to 2M (non-gzipped)
   const MAX_SIZE = 2 * 1024 * 1024
   Object.assign(config.performance, {
     maxEntrypointSize: MAX_SIZE,
     maxAssetSize: MAX_SIZE
   })
 
-  // Don't exclude babel for F7 stuff
-  const babelLoader = config.module.rules.find(r => r.loader === 'babel-loader')
-  babelLoader.exclude = /node_modules\/(?!(framework7|framework7-vue|template7|dom7)\/).*/
-
   // Disable warning for babel on framework7 dist files
   babelLoader.options.compact = false
+}
+
+// ----------------------------------------------------------
+// Default options
+// ----------------------------------------------------------
+const defaults = {
+  css: true,
+  rtl: false,
+
+  f7Icons: true,
+  mdIcons: true,
+
+  routes: {},
 
-  // framework7
-  config.resolve.alias['framework7'] = resolveDep(`framework7/dist/js/framework7.esm.bundle.js`)
+  mode: 'hash',
+
+  build: Object.assign({}, f7BuildConfig),
 
-  // framework7-vue
-  config.resolve.alias['framework7-vue'] = resolveDep(`framework7-vue/dist/framework7-vue.esm.js`)
+  view: {
+    main: true,
+    pushState: true,
+    pushStateSeparator: '#',
+    pushStateRoot: null
+  }
 }

Diff for: lib/module.js

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import { Framework7Vue } from 'framework7-vue'
+
+import { routes } from './f7-router'
+import Framework7VueComponents from './f7-components'
+
+// Imports styles
+<% if (options.css) { %>import './framework7.less'<% } %>
+<% if (options.f7IconsSrc) { %>import '<%= options.f7IconsSrc %>'<% } %>
+<% if (options.mdIconsSrc) { %>import '<%= options.mdIconsSrc %>'<% } %>
+
+// Async import F7 core
+const _Framework7 = import('framework7/dist/js/framework7.esm.bundle'/* webpackChunkName: f7 */).then(m => m.default)
+
+// Register F7 Vue Components
+Vue.use(Framework7VueComponents)
+
+// Register plugin
+export default async function framework7({ app }, inject) {
+    // Register F7 Vue Plugin
+    const Framework7 = await _Framework7
+    Vue.use(Framework7Vue, Framework7)
+
+    // Framework7 options
+    app.framework7 = <%= serialize({mode: options.mode,view: options.view}).replace(/"__([^_]+)__"/g,"$1") %>
+
+    // Routes
+    app.framework7.routes = routes
+}
+