Skip to content

Commit

Permalink
fix(page-extend): add default page-extend
Browse files Browse the repository at this point in the history
  • Loading branch information
Thorn Walli committed Feb 2, 2020
1 parent fe03faa commit 0123397
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 29 deletions.
1 change: 0 additions & 1 deletion .eslintignore
View file
Expand Up @@ -7,4 +7,3 @@ reports

# Plugin
lib/plugins/*
lib/tmpl/*
34 changes: 17 additions & 17 deletions README.md
View file
Expand Up @@ -80,23 +80,23 @@ yarn add nuxt-page-generator-helper # or npm install nuxt-page-generator-helper

## Options

| Name | Type | Description | Default Value | Required |
| ------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -------- |
| `debug` | `Boolean` | Debug-Mode | `false` | `false` |
| `dev` | `Boolean` | If set, modul is also active in development mode. | `false` | `false` |
| `adapter` | `Object` | Function for querying the page structure with Content. | `null` | `true` |
| `adapterOptions` | `Object` | Adapter to retrieve the payloads. Contains the calls `getRoute`, `getRoutes`, `getLayout` and path specification (`PATH`). | `null` | `true` |
| `pageExtend` | `Object` | Path to the page extension that is used during generation. | `null` | `true` |
| `componentPath` | `String` | Component src Path. Is required for embedding specified components in a page. | `@/components` | `false` |
| `componentPrefix` | `String` | Prefix for component imports in generated pages.<br>Example: Component `Text` -> Component `PrefixText` | `prefix` | `false` |
| `asyncComponentLoad` | `Boolean` | When set, components of a page are loaded asynchronously. | `true` | `false` |
| `asyncComponentMaxEager` | `Number` | Specifies the number of components assigned to the page chunk.<br>Important: Only active if `asyncComponentLoad` is set. | `1` | `false` |
| `lazyHydrateEnable` | `Boolean` | Components that can be reloaded can be controlled with LazyHydration.<br>Example:<br>With the setting `maxEagerComponents: 1,`<br> the first component is initialized at `whenIdle`. All others at `whenVisible`.<br>[vue-lazy-hydration](https://github.com/maoberlehner/vue-lazy-hydration) | `true` | `false` |
| `lazyHydrateRootMargin` | `String` | Specifies when the `whenVisible` event is triggered.<br>Example:<br>Component initialization occurs,<br>Component is less than `80px` away from the visible area. | `80px` | `false` |
| `routesCache` | `Boolean` | If active, the adapter result is stored locally. | `false` | `false` |
| `ignoreRoutes` | `Array` | List of route names, to be ignore by routes extend.<br>Example: `['index', 'page', 'nested-page']` | `null` | `true` |
| `cleanRoutes` | `Boolean` | If set, all already registered routes will be removed from the list. | `false` | `false` |
| `nuxtI18n` | `Object` | Configuration for nuxt-i18n | `null` | `true` |
| Name | Type | Description | Default Value | Required |
| ------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -------- |
| `debug` | `Boolean` | Debug-Mode | `false` | `false` |
| `dev` | `Boolean` | If set, modul is also active in development mode. | `false` | `false` |
| `adapter` | `Object` | Function for querying the page structure with Content. | `null` | `true` |
| `adapterOptions` | `Object` | Adapter to retrieve the payloads. Contains the calls `getRoute`, `getRoutes`, `getLayout` and path specification (`PATH`). | `null` | `true` |
| `pageExtend` | `Object` | Path to the page extension that is used during generation. | `nuxt-page-generator-helper/PageExtend.vue` | `false` |
| `componentPath` | `String` | Component src Path. Is required for embedding specified components in a page. | `@/components` | `false` |
| `componentPrefix` | `String` | Prefix for component imports in generated pages.<br>Example: Component `Text` -> Component `PrefixText` | `prefix` | `false` |
| `asyncComponentLoad` | `Boolean` | When set, components of a page are loaded asynchronously. | `true` | `false` |
| `asyncComponentMaxEager` | `Number` | Specifies the number of components assigned to the page chunk.<br>Important: Only active if `asyncComponentLoad` is set. | `1` | `false` |
| `lazyHydrateEnable` | `Boolean` | Components that can be reloaded can be controlled with LazyHydration.<br>Example:<br>With the setting `maxEagerComponents: 1,`<br> the first component is initialized at `whenIdle`. All others at `whenVisible`.<br>[vue-lazy-hydration](https://github.com/maoberlehner/vue-lazy-hydration) | `true` | `false` |
| `lazyHydrateRootMargin` | `String` | Specifies when the `whenVisible` event is triggered.<br>Example:<br>Component initialization occurs,<br>Component is less than `80px` away from the visible area. | `80px` | `false` |
| `routesCache` | `Boolean` | If active, the adapter result is stored locally. | `false` | `false` |
| `ignoreRoutes` | `Array` | List of route names, to be ignore by routes extend.<br>Example: `['index', 'page', 'nested-page']` | `null` | `true` |
| `cleanRoutes` | `Boolean` | If set, all already registered routes will be removed from the list. | `false` | `false` |
| `nuxtI18n` | `Object` | Configuration for nuxt-i18n | `null` | `true` |

## Build matrix of the page components generation

Expand Down
6 changes: 3 additions & 3 deletions lib/tmpl/Page.vue → lib/Page.tmpl.vue
View file
Expand Up @@ -12,12 +12,12 @@ import {
export default {
scrollToTop: true,
/* PLACEHOLDER_EXTENDS */
/* PLACEHOLDER_EXTENDS */
/* PLACEHOLDER_NUXT_I18N_PATHS */
/* PLACEHOLDER_NUXT_I18N_PATHS */
components: {
/* PLACEHOLDER_COMPONENTS */
/* PLACEHOLDER_COMPONENTS */
},
asyncData ({ $getGeneratorRouteData, error }) {
Expand Down
14 changes: 14 additions & 0 deletions lib/PageExtend.vue
View file
@@ -0,0 +1,14 @@
<template>
<div>{{ $data }}</div>
</template>
<script>
export default {
asyncData ({ $getGeneratorRouteData }) {
return $getGeneratorRouteData()
}
}
</script>
7 changes: 4 additions & 3 deletions lib/module.js
View file
Expand Up @@ -4,7 +4,8 @@ import { cacheRoutes, createStaticComponents, logInfo, logWarn, MODULE_NAME, cle
import { generateRouteTemplates } from './utils/template'
import { isDevMode, isNuxtBuild, isNuxtGenerate, isNuxtTest, addPlugins, getNuxtI18nModule, extendBuild, extendRoutes } from './utils/module'

const DEFAULT_TEMPLATE = path.normalize(path.join(__dirname, '/tmpl/Page.vue'))
const DEFAULT_PAGE_TEMPLATE = path.normalize(path.resolve(__dirname, 'Page.tmpl.vue'))
const DEFAULT_PAGE_EXTEND = path.normalize(path.resolve(__dirname, 'PageExtend.vue'))

function getDefaultOptions (options, isDev) {
return Object.assign({ isDev }, {
Expand Down Expand Up @@ -131,7 +132,7 @@ module.exports = function (moduleOptions) {
* @param ModuleContainer moduleScope
*/
function moduleSetup (moduleScope, options) {
options.pageExtend = options.pageExtend || DEFAULT_TEMPLATE
options.pageExtend = options.pageExtend || DEFAULT_PAGE_EXTEND

registerHooks(moduleScope.nuxt)

Expand All @@ -142,7 +143,7 @@ function moduleSetup (moduleScope, options) {
moduleScope.extendRoutes(extendRoutes(options, routes))
return routes
})
.then(routes => generateRouteTemplates(options, routes))
.then(routes => generateRouteTemplates(DEFAULT_PAGE_TEMPLATE, options, routes))
.then((routes) => {
options.nuxtI18n.parsePages = true
return createStaticComponents(moduleScope, options, routes)
Expand Down
10 changes: 5 additions & 5 deletions lib/utils/template.js
View file
Expand Up @@ -3,8 +3,8 @@ import { getShortName, readFile } from './index'

const LINE_BREAK = '\n'

export async function generateRouteTemplates (options, routes) {
const template = await readFile(path.resolve(__dirname, '../tmpl/Page.vue'))
export async function generateRouteTemplates (templatePath, options, routes) {
const template = await readFile(templatePath)
routes.forEach((route) => {
route.template = getPageTemplate(options, template, route)
})
Expand All @@ -30,15 +30,15 @@ function getPageTemplate (options, template, pageData) {

if ('pageExtend' in options && options.pageExtend) {
imports.push(`import PageExtend from '${options.pageExtend}';`)
template = template.replace('/* PLACEHOLDER_EXTENDS */', ` extends: ${['PageExtend'].join(',')},`)
template = template.replace('/* PLACEHOLDER_EXTENDS */', `extends: ${['PageExtend'].join(',')},`)
}

if (imports.length) {
template = template.replace('/* PLACEHOLDER_IMPORTS */', `${imports.join(LINE_BREAK)}`)
}

if (componentList.length) {
template = template.replace('/* PLACEHOLDER_COMPONENTS */', componentList.join(`,${LINE_BREAK}`))
template = template.replace('/* PLACEHOLDER_COMPONENTS */', '\n' + componentList.join(`,${LINE_BREAK}`) + '\n')
}

return template
Expand All @@ -53,7 +53,7 @@ function getNuxtI18nPaths (locales, pageData) {
return { url, code, exist: pageData[String(code)] }
}).map(({ code, url, exist }) => ` '${code}': ${exist ? `'${url}'` : false}`)
return [
' nuxtI18n: {',
'nuxtI18n: {',
' paths: {',
datas.join(',' + LINE_BREAK),
' }',
Expand Down

0 comments on commit 0123397

Please sign in to comment.