feat: rewrite to be fully es compatible

BREAKING CHANGE: by default all components are included as before but may introduce breaking changes

Author: Pooya Parsa

lib/module.js

@@ -1,12 +1,15 @@
 const { resolve, relative } = require('path')
-const { defaultsDeep, omit } = require('lodash')
+const { defaultsDeep, omit, startCase } = require('lodash')
 const f7BuildConfig = require('./f7-config')
 
 const resolvePath = (...args) => resolve(__dirname, ...args)
 
 module.exports = function nuxt7 (_options) {
   const options = defaultsDeep({}, _options, this.options.framework7, defaults)
 
+  // CamelCase component names
+  options.build._components = normalizeComponents(options.build.components)
+
   // Router Mode
   if (options.mode === 'history') {
     options.view.pushStateSeparator = "__window.location.origin ? '' : '#'__"
@@ -21,9 +24,6 @@ module.exports = function nuxt7 (_options) {
   // Disable postcss for less transformations
   this.options.build.postcss = false
 
-  // Customize build
-  this.extendBuild(config => extendConfig(config, options))
-
   // Global theme color
   if (options.themeColor) {
     options.build.ios.themeColor = options.themeColor
@@ -40,6 +40,9 @@ module.exports = function nuxt7 (_options) {
   this.addVendor('dom7')
   this.addVendor('template7')
 
+  // Remove custom keys for framework7 plugin
+  options.plugin = omit(options, extraKeys)
+
   // Add templates
   addTemplates.call(this, options)
 
@@ -78,86 +81,64 @@ module.exports = function nuxt7 (_options) {
 // Add templates
 // ----------------------------------------------------------
 function addTemplates (options) {
-  // --- Framework7 templates ---
-
   // Framework7 plugin
   this.addPlugin({
-    src: resolvePath('templates/f7-plugin.js'),
-    fileName: 'f7-plugin.js',
-    options: omit(options, extraKeys)
-  })
-
-  // Framework7 routes
-  this.addTemplate({
-    src: resolvePath('templates/f7-router.js'),
-    fileName: 'f7-router.js',
+    src: resolvePath('templates/framework7/f7.plugin.js'),
+    fileName: 'framework7/f7.plugin.js',
     options
   })
 
-  // Framework7 styles
-  if (options.css) {
+  // Copy all templates
+  for (const template of templates) {
     this.addTemplate({
-      src: resolvePath('templates/framework7.less'),
-      fileName: 'framework7.less',
+      src: resolvePath('templates/' + template),
+      fileName: template,
       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
-  })
-
-  // Nuxt component
-  this.addTemplate({
-    src: resolvePath('templates/components/nuxt.js'),
-    fileName: 'components/nuxt.js',
-    options
-  })
-
-  // Default layout
-  this.addTemplate({
-    src: resolvePath('templates/layouts/default.vue'),
-    fileName: 'layouts/default.vue',
-    options
-  })
-
-  // Vue router
-  this.addTemplate({
-    src: resolvePath('templates/router.js'),
-    fileName: 'router.js',
-    options
-  })
+function tryResolve (path) {
+  try {
+    return require.resolve(path)
+  } catch (err) {
+    return null
+  }
 }
 
-// ----------------------------------------------------------
-// Extend webpack config
-// ----------------------------------------------------------
-function extendConfig (config, options) {
-  // Increase performance check limits to 2M (non-gzipped)
-  const MAX_SIZE = 2 * 1024 * 1024
-  Object.assign(config.performance, {
-    maxEntrypointSize: MAX_SIZE,
-    maxAssetSize: MAX_SIZE
-  })
+function normalizeComponents (components) {
+  return components.map((name) => ({
+    name,
+    camelName: startCase(name).replace(/ /g, ''),
+    js: tryResolve(`framework7/dist/components/${name}/${name}.js`),
+    less: tryResolve(`framework7/dist/components/${name}/${name}.less`)
+  }))
 }
 
-// ----------------------------------------------------------
-// Default options
-// ----------------------------------------------------------
+const templates = [
+  // Framework 7
+  'framework7/f7.router.js',
+  'framework7/f7.styles.less',
+  'framework7/f7.components.js',
+  // Nuxt
+  'App.js',
+  'components/nuxt.js',
+  'layouts/default.vue',
+  'router.js'
+]
+
 const extraKeys = [
-  'build', 'mode', 'themeColor', 'css', 'f7Icons', 'mdIcons', 'f7IconsSrc', 'mdIconsSrc', 'pwa', 'routes'
+  'build',
+  'mode',
+  'themeColor',
+  'css',
+  'f7Icons',
+  'mdIcons',
+  'f7IconsSrc',
+  'mdIconsSrc',
+  'pwa',
+  'routes',
+  'plugin'
 ]
 
 const defaults = {

lib/templates/App.js

@@ -1,10 +1,5 @@
 import Vue from 'vue'
 
-// Framework7 Styles
-<% if (options.css) { %>import './framework7.less'<% } %>
-<% if (options.f7IconsSrc) { %>import '<%= relativeToBuild(resolvePath(options.f7IconsSrc)) %>'<% } %>
-<% if (options.mdIconsSrc) { %>import '<%= relativeToBuild(resolvePath(options.mdIconsSrc)) %>'<% } %>
-
 // Styles
 <% css.forEach(function (c) { %>import '<%= relativeToBuild(resolvePath(c.src || c)) %>'
 <% }) %>

lib/templates/f7-components.js

@@ -0,0 +1,17 @@
+import Framework7 from 'framework7'
+
+import * as components from 'framework7-vue'
+
+<%= options.build._components.filter(c => c.js).map(c =>
+  `import ${c.camelName} from 'framework7/dist/components/${c.name}/${c.name}.js'`
+).join('\n')%>
+
+Framework7.use([
+<%= options.build._components.filter(c => c.js).map(c => c.camelName).join(',  \n') %>
+])
+
+export default {
+  install(Vue) {
+    Vue.mixin({ components })
+  }
+}

lib/templates/f7-plugin.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import Framework7 from 'framework7'
+import Framework7Vue from 'framework7-vue'
+import { routes } from './f7.router'
+import Framework7VueComponents from './f7.components'
+
+// Framework7 Styles
+<% if (options.css) { %>import './f7.styles.less'<% } %>
+<% if (options.f7IconsSrc) { %>import '../<%= relativeToBuild(resolvePath(options.f7IconsSrc)) %>'<% } %>
+<% if (options.mdIconsSrc) { %>import '../<%= relativeToBuild(resolvePath(options.mdIconsSrc)) %>'<% } %>
+
+// Register F7 Vue Components
+Vue.use(Framework7VueComponents)
+
+// Register F7 Vue Plugin
+Vue.use(Framework7Vue, Framework7)
+
+// Register plugin
+export default async function framework7({ app }, inject) {
+  // Framework7 options
+  app.framework7 = <%= serialize(options.plugin).replace(/"__([^_]+)__"/g, "$1") %>
+
+  // Routes
+  app.framework7.routes = routes
+}
+

lib/templates/framework7/f7.components.js

@@ -28,8 +28,10 @@ const _routes = recursiveRoutes(router.routes, '\t\t', _components)
 
 %>
 
-<% uniqBy(_components, '_name').forEach(route => { %>import <%= route._name %> from '<%= relativeToBuild(route.component) %>'
-<% }) %>
+<%= uniqBy(_components, '_name').map(route =>
+  `import ${route._name} from '../${relativeToBuild(route.component)}'`
+).join('\n')
+%>
 
 export const routes = [
 <%= _routes %>

lib/templates/framework7/f7.plugin.js

@@ -30,7 +30,4 @@
 @import url('~framework7/dist/components/modal/modal.less');
 
 // Components
-<%= options.build.components
-    .filter(component => component !== 'form')
-    .map(component => `@import url('~framework7/dist/components/${component}/${component}.less');`).join('\n')
-%>
+<%= options.build._components.filter(c => c.less).map(c => `@import url('${c.less}');`).join('\n') %>