feat!: add hooks (#164)

BREAKING CHANGE: callbacks onLocaleChange and beforeLocaleChange was replaced by hooks

docs/.vuepress/config.js

@@ -43,6 +43,7 @@ module.exports = {
           title: 'Configuration',
           collapsable: false,
           children: [
+            'configuration/hooks',
             'configuration/i18n',
             'configuration/domains',
             'configuration/static-generate',

docs/configuration/hooks.md

@@ -0,0 +1,30 @@
+# Hooks
+You can use hooks to extend default behavior or override data. 
+
+## Available hooks
+
+### Before context is setup by router middleware
+
+```js
+$nuxt.$typo3.hook('context', (context, response) => {})
+```
+
+### Before redirect in router middleware 
+```js
+$nuxt.$typo3.hook('redirect', (context, redirectData) => {})
+```
+
+### Before locale change
+```js
+$nuxt.$typo3.hook('beforeLocaleChange', (newLocale, oldLocale) => {})
+```
+
+### On locale change
+```js
+$nuxt.$typo3.hook('localeChange', (newLocale, oldLocale) => {})
+```
+
+### Before initialData is setup in the store
+```js
+$nuxt.$typo3.hook('initialData', (response) => {})
+```

docs/configuration/i18n.md

@@ -38,14 +38,17 @@ Display current language
 
 Switch language by localeCode
 
-#### \$typo3.i18n.onLocaleChange(oldLocale, newLocale)
+## React to locale change
 
-Callback on locale change.
+You can use `$nuxt.$typo3.hook()` to detect locale change. 
 
-#### \$typo3.i18n.beforeLocaleChange(oldLocale, newLocale)
-
-Callback before locale change.
+```js
+app.$typo3.hook('localeChange', (newLocale, oldLocale) => {})
+```
 
+```js
+app.$typo3.hook('beforeLocaleChange', (newLocale, oldLocale) => {})
+```
 ## Third-party i18n plugin example
 
 This example shows how to connect third-party i18n plugin to your application. For example we use standard [nuxt-i18n](https://nuxt-community.github.io/nuxt-i18n/) plugin which use [vue-i18n](https://github.com/kazupon/vue-i18n).
@@ -129,11 +132,12 @@ Create `plugins/i18n.js`
 ```js
 export default ({ app }) => {
   app.i18n.locale = app.$typo3.i18n.locale
-
-  app.$typo3.i18n.onLocaleChange = (oldLocale, newLocale) => {
+  
+  app.$typo3.hook('onLocaleChange', (newLocale, oldLocale) => {
     app.i18n.locale = newLocale
-  }
+  })
 }
+
 ```
 
 Edit `nuxt.config.js`:

example/nuxt.config.js

@@ -39,7 +39,7 @@ module.exports = {
   /*
    ** Add components/layouts overrides
    */
-  plugins: ['~/plugins/components', '~/plugins/layouts', '~/plugins/i18n'],
+  plugins: ['~/plugins/components', '~/plugins/layouts', '~/plugins/i18n', '~/plugins/hooks'],
   /*
    ** Register required modules
    */
@@ -51,8 +51,8 @@ module.exports = {
   ],
 
   i18n: {
-    strategy: 'no_prefix',
     localeConfig,
+    strategy: 'no_prefix', // because route strategy is handled on nuxt-typo3 side
     vueI18n: {
       fallbackLocale: 'en',
       messages: {

example/plugins/hooks.js

@@ -0,0 +1,6 @@
+export default ({ app }) => {
+  app.$typo3.hook('beforeRedirect', (context, data) => {
+    data.redirectUrl = '/'
+    return data
+  })
+}

example/plugins/i18n.js

@@ -1,7 +1,6 @@
 export default ({ app }) => {
   app.i18n.locale = app.$typo3.i18n.locale
-
-  app.$typo3.i18n.onLocaleChange = (oldLocale, newLocale) => {
+  app.$typo3.hook('onLocaleChange', (newLocale, oldLocale) => {
     app.i18n.locale = newLocale
-  }
+  })
 }

lib/lib/context.js

@@ -9,9 +9,9 @@ import { getBackendLayout, getFrontendLayout } from '~typo3/lib/layouts'
  * @param {Object} response - page response
  * @returns {Object} context
  */
-function setContext (context, response) {
+async function setContext (context, response) {
   const { data } = response
-  const { store } = context
+  const { store, app } = context
 
   if (data) {
     const { appearance } = data
@@ -28,6 +28,8 @@ function setContext (context, response) {
 
     context.pageContent = data
     store.commit(SET_PAGE, data)
+
+    await app.$typo3.callHook('context', context, data)
   }
 
   return context
@@ -81,6 +83,7 @@ async function contextMiddleware (context) {
 
       if (data && data.redirectUrl) {
         const { redirectUrl, statusCode } = data
+        await app.$typo3.callHook('redirect', context, data)
         return redirect(context, redirectUrl, statusCode)
       }
 

lib/lib/i18n.js

@@ -36,22 +36,22 @@ function setLocale (
   localeCode,
   updateInitialData = true
 ) {
-  app.$typo3.i18n.beforeLocaleChange(store.state.typo3.locale, localeCode)
+  app.$typo3.callHook('beforeLocaleChange', localeCode, store.state.typo3.locale)
   return new Promise((resolve, reject) => {
     if (localeCode) {
       if (updateInitialData) {
         store
           .dispatch('getInitialData', { path: params.pathMatch })
           .then((response) => {
-            app.$typo3.i18n.onLocaleChange(store.state.typo3.locale, localeCode)
+            app.$typo3.callHook('localeChange', localeCode, store.state.typo3.locale)
             store.commit(SET_LOCALE, localeCode)
             resolve(response)
           })
           .catch((error) => {
             reject(error)
           })
       } else {
-        app.$typo3.i18n.onLocaleChange(store.state.typo3.locale, localeCode)
+        app.$typo3.callHook('localeChange', localeCode, store.state.typo3.locale)
         store.commit(SET_LOCALE, localeCode)
         resolve({
           localeCode

lib/middleware/i18n.js

@@ -6,5 +6,3 @@ middleware.typo3i18n = function ({ app, store }) {
     app.$typo3.i18n.setLocale(localeCode)
   }
 }
-
-export default function () {}

lib/options.js

@@ -9,9 +9,7 @@ export default {
   layouts: {},
   i18n: {
     locales: ['en'],
-    defaultLocale: 'en',
-    onLocaleChange: () => null,
-    beforeLocaleChange: () => null
+    defaultLocale: 'en'
   },
   registerComponents: true,
   registerLayouts: true,

lib/plugins/context.js

@@ -1,4 +1,5 @@
 import defu from 'defu'
+import Hookable from 'hable'
 import api from '~typo3/plugins/api'
 import i18n from '~typo3/plugins/i18n'
 import domains from '~typo3/plugins/domains'
@@ -10,11 +11,14 @@ export default function (context, inject) {
     moduleOptions = defu(runtimeConfig, moduleOptions)
   }
 
+  const hooks = new Hookable()
+
   const _options = {
     api: api(context, moduleOptions),
     i18n: i18n(context, moduleOptions),
     domains: domains(context, moduleOptions),
-    options: moduleOptions
+    options: moduleOptions,
+    ...hooks
   }
   inject('typo3', _options)
 }

lib/plugins/i18n.js

@@ -20,8 +20,7 @@ export default (context, options) => {
     getLocaleCodePath: () => getLocaleCodePath(context),
     getLocaleByPath: () => getLocaleByPath(context),
     setLocale: (localeCode, updateInitialData) =>
-      setLocale(context, localeCode, updateInitialData),
-    onLocaleChange: () => null,
-    beforeLocaleChange: () => null
+      setLocale(context, localeCode, updateInitialData)
+
   }
 }

lib/store/actions.js

@@ -4,7 +4,7 @@ export default {
   /**
    * Called during SSR init
    */
-  async nuxtServerInit ({ commit, dispatch, state }, { app }) {
+  async nuxtServerInit ({ dispatch }, { app }) {
     if (app.$typo3.domains) {
       app.$typo3.domains.setDomain(app.$typo3.domains.getDomain())
     }
@@ -18,7 +18,7 @@ export default {
    * @return {void}
    */
   getInitialData (
-    { commit, state },
+    { commit },
     params = {
       path: this.$router.currentRoute.params.pathMatch
     }
@@ -31,9 +31,11 @@ export default {
     }
     return this.$typo3.api
       .getInitialData(params)
-      .then((response) => {
-        commit(SET_INITIAL, response.data)
-        Promise.resolve(response.data)
+      .then(async (response) => {
+        const { data } = response
+        await this.$typo3.callHook('initialData', data)
+        commit(SET_INITIAL, data)
+        Promise.resolve(data)
       })
       .catch(error => Promise.reject(error))
   }

lib/types.d.ts

@@ -18,10 +18,6 @@ export namespace TYPO3 {
       locales: string[],
       /** default/fallback locale */
       defaultLocale: string,
-      /** register your callback method on locale change */
-      onLocaleChange(oldLocale: string, newLocale: string): void,
-      /** register your callback method before locale change */
-      beforeLocaleChange(oldLocale: string, newLocale: string): void
     }
 
     interface Endpoints {
@@ -74,10 +70,6 @@ export namespace TYPO3 {
       getLocaleByPath(): string,
       /** Set current locale and get initialData */
       setLocale(localeCode: string, updateInitialData: boolean): Promise<void>,
-      /** Call method on locale change */
-      onLocaleChange(oldLocale: string, newLocale: string): void,
-      /** Call method before locale change */
-      beforeLocaleChange(oldLocale: string, newLocale: string): void
     }
 
     interface Domains {