client integration: svelte-i18n-integration

clients/index.js

@@ -0,0 +1,9 @@
+const clients = [['svelte-i18n', () => import('./svelte-i18n')]]
+
+const clientOptions = (client, defaultLocale, { config, options }) => Object.assign(client.processConfig(config, defaultLocale), options)
+
+const fillClientDictionary = (client, data) => data.forEach(d => client.addEntry(d.locale, d.content))
+
+// Init Should be call during render and in client side
+
+module.exports = { clientOptions, fillClientDictionary, clients }

clients/svelte-i18n.js

@@ -0,0 +1,35 @@
+const { addMessages, init, getLocaleFromNavigator } = require('svelte-i18n')
+
+const defaultConfig = {
+  initialLocale: 'default',
+  fallback: 'default'
+}
+
+const addEntry = addMessages
+
+const processInitialLocale = (configInitialLocale, defaultLocale) => {
+  // Add others
+  switch (configInitialLocale) {
+    case 'navigator':
+      return () => getLocaleFromNavigator()
+    case 'default':
+      return defaultLocale
+    default:
+      return configInitialLocale
+  }
+}
+
+const processFallbackLocale = (configFallbackLocale, defaultLocale) => {
+  if (configFallbackLocale === 'default') return defaultLocale
+  return configFallbackLocale
+}
+
+const processConfig = (config, defaultLocale) => {
+  const options = Object.assign({}, defaultConfig, config)
+  return {
+    initialLocale: processInitialLocale(options.initialLocale, defaultLocale),
+    fallbackLocale: processFallbackLocale(options.fallbackLocale, defaultLocale)
+  }
+}
+
+module.exports = { addEntry, init, processConfig }

helpers.js

@@ -1,3 +1,9 @@
+const { fillEntry } = require('./utils')
+
+//
+// Permalinks
+//
+
 // Fix permalink helpers with access to helpers
 const i18nPermalinks = (routes, settings, helpers) =>
   Object.keys(routes).reduce((out, cv) => {
@@ -18,12 +24,17 @@ const generatePermalink = ({ prefix, prefixDefault }, locales, defaultLocale) =>
   return (permalink, locale) => (locale === defaultLocale ? permalink : createi18nPermalink(permalink, locale))
 }
 
+//
+// Helpers
+//
+
 const i18nHelpers = (helpers, settings, routes, plugin) => {
   return {
     generateRequests: (reqs) => {
       const requests = []
       reqs.forEach((req) => {
         plugin.config.locales.all.forEach((locale) => {
+          // TODO: check this out
           // if (plugin.config.excludeLocales.includes(locale.code)) return;
           requests.push(Object.assign({}, req, { locale: locale.code }))
         })
@@ -47,6 +58,11 @@ const i18nHelpers = (helpers, settings, routes, plugin) => {
         }
       })
     },
+    addData: (request, data) => {
+      const newData = {}
+      newData[request.slug] = data
+      fillEntry(plugin.dictionaries.data, request.lang, request.route, newData)
+    },
     dictionaries: plugin.dictionaries,
     locales: () => plugin.locales
   }

hooks.js

@@ -46,6 +46,7 @@ const defaultHooks = [
     }
   }
 ]
+const { clients, clientOptions, fillClientDictionary } = require('./clients/index')
 
 const optionalHooks = {
   hreflang: {
@@ -94,15 +95,55 @@ const optionalHooks = {
         allRequests: allRequests.filter((request) => !plugin.config.locales.excludes.includes(request.locale))
       }
     }
+  },
+  client: [{
+    hook: 'bootstrap',
+    name: 'i18nAddClient',
+    description: 'add client to plugin with its options, according to elder.config',
+    priority: 100,
+    run: async ({ plugin }) => {
+      const client = clients[plugin.settings.client.name]
+      if (client === undefined) {
+        console.error(`I18n Error: client with name: ${plugin.settings.client.name} is not available.`)
+        return
+      }
+      const options = clientOptions(client, plugin.settings.locale.defaultLocale, plugin.settings.client)
+      plugin.clientSide = { client, options }
+    }
+  },
+  {
+    hook: 'data',
+    name: 'i18nClientFillData',
+    description: 'add data added by `addData` helper to i18nClient from, dictionaries.data',
+    priority: 100,
+    run: async ({ request, plugin }) => {
+      plugin.clientSide.client.addEntry(request.lang, plugin.dictionaries.data[request.lang])
+    }
+  },
+  {
+    hook: 'data',
+    name: 'i18nClientInit',
+    description: 'initialise i18n Client',
+    priority: 99,
+    run: async ({ plugin }) => {
+      plugin.clientSide.client.init(plugin.clientSide.options)
+    }
   }
+
+  ]
 }
 
 const getOptionalHooks = (config) => {
   const keys = Object.keys(optionalHooks)
   const hooks = []
   keys.forEach((key) => {
     if (config.seo[key] === true || config[key] === true) {
-      hooks.push(optionalHooks[key])
+      const newHook = optionalHooks[key]
+      if (Array.isArray(newHook)) {
+        hooks.push(...newHook)
+      } else {
+        hooks.push(newHook)
+      }
     }
   })
   return hooks

index.js

@@ -34,6 +34,14 @@ const plugin = {
     seo: {
       hreflang: true,
       lang: true
+    },
+    client: {
+      name: 'svelte-i18n',
+      config: {
+        initialLocale: 'navigator',
+        fallback: 'default'
+      },
+      options: {}
     }
   }
 }

utils.js

@@ -15,6 +15,14 @@ const makeHreflang = (locale, url) => {
 // Dictionnaries
 //
 
+const fillEntry = (dictionary, locale, key, entry) => {
+  if (dictionary[locale][key] === undefined) {
+    dictionary[locale][key] = entry
+  } else {
+    Object.assign(dictionary[locale][key], entry)
+  }
+}
+
 const fillDictionary = async (dictionary, allRequests, getExtraData) => {
   const getData = getExtraData
     ? async (request) => {
@@ -35,10 +43,12 @@ const fillDictionary = async (dictionary, allRequests, getExtraData) => {
     dictionary[request.locale][request.route][request.slug] = data
   })
 }
+
 //
 // Set permalinks to request, based on elderjs code
 // Basically a copy of src/Elder.ts way, but with a refacto to match my taste
 // Need createReadOnlyProxy implementation
+//
 
 const createReadOnlyProxy = (obj, objName, location) => {
   try {
@@ -75,4 +85,4 @@ const getPermalink = async (request, { routes, settings, helpers }) => {
   }
 }
 
-module.exports = { fillDictionary, fillDictionaryWithCopy, makeHreflang, getPermalink }
+module.exports = { fillDictionary, fillEntry, makeHreflang, getPermalink }