Merge pull request #43 from jngbng/pr_incremental_build_fix

hot-reload/incremental build JSON language files

Author: jimmyn

README.md

@@ -15,9 +15,11 @@ Easily translate your Gatsby website into multiple languages.
 
 When you build multilingual sites, Google recommends using different URLs for each language version of a page rather than using cookies or browser settings to adjust the content language on the page. [(read more)](https://support.google.com/webmasters/answer/182192?hl=en&ref_topic=2370587)
 
-## How is it different from other gatsby i18next plugins?
+## :boom: Breaking change since v0.0.27
 
-This plugin does not require fetching translations with graphql query on each page, everything is done automatically. Just use `react-i18next` to translate your pages.
+As of v0.0.28, language JSON resources should be loaded by `gatsby-source-filesystem` plugin and than fetched by GraphQL query. It enables incremental build and hot-reload as language JSON files change.
+
+Users who have loaded language JSON files using `path` option will be affected. Please check configuration example on below.
 
 ## Demo
 
@@ -50,9 +52,17 @@ npm install --save gatsby-plugin-react-i18next i18next react-i18next
 // In your gatsby-config.js
 plugins: [
   {
-    resolve: `gatsby-plugin-react-i18next`,
+    resolve: `gatsby-source-filesystem`,
     options: {
       path: `${__dirname}/locales`,
+      name: `locale`,
+      ignore: [`**/\.*`, `**/*~`]
+    }
+  },
+  {
+    resolve: `gatsby-plugin-react-i18next`,
+    options: {
+      localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin.
       languages: [`en`, `es`, `de`],
       defaultLanguage: `en`,
       // if you are using Helmet, you must include siteUrl, and make sure you add http:https
@@ -149,6 +159,20 @@ const IndexPage = () => {
 };
 
 export default IndexPage;
+
+export const query = graphql`
+  query($language: String!) {
+    locales: allLocale(filter: {language: {eq: $language}}) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`;
 ```
 
 and in `locales/en/translations.json` you will have
@@ -243,15 +267,16 @@ const Header = ({siteTitle}) => {
 
 ## Plugin Options
 
-| Option          | Type     | Description                                                                                                                                                                                                      |
-| --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| path            | string   | path to the folder with JSON translations                                                                                                                                                                        |
-| languages       | string[] | supported language keys                                                                                                                                                                                          |
-| defaultLanguage | string   | default language when visiting `/page` instead of `/es/page`                                                                                                                                                     |
-| redirect        | boolean  | if the value is `true`, `/` or `/page-2` will be redirected to the user's preferred language router. e.g) `/es` or `/es/page-2`. Otherwise, the pages will render `defaultLangugage` language. Default is `true` |
-| siteUrl         | string   | public site url, is used to generate language specific meta tags                                                                                                                                                 |
-| pages           | array    | an array of [page options](#page-options) used to modify plugin behaviour for specific pages                                                                                                                     |
-| i18nextOptions  | object   | [i18next configuration options](https://www.i18next.com/overview/configuration-options)                                                                                                                          |
+| Option               | Type     | Description                                                                                                                                                                                                      |
+| -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| localeJsonSourceName | string   | name of JSON translation file nodes that are loaded by `gatsby-source-filesystem` (set by `option.name`). Default is `locale`                                                                                    |
+| localeJsonNodeName   | string   | name of GraphQL node that holds locale data. Default is `locales`                                                                                                                                                |
+| languages            | string[] | supported language keys                                                                                                                                                                                          |
+| defaultLanguage      | string   | default language when visiting `/page` instead of `/es/page`                                                                                                                                                     |
+| redirect             | boolean  | if the value is `true`, `/` or `/page-2` will be redirected to the user's preferred language router. e.g) `/es` or `/es/page-2`. Otherwise, the pages will render `defaultLangugage` language. Default is `true` |
+| siteUrl              | string   | public site url, is used to generate language specific meta tags                                                                                                                                                 |
+| pages                | array    | an array of [page options](#page-options) used to modify plugin behaviour for specific pages                                                                                                                     |
+| i18nextOptions       | object   | [i18next configuration options](https://www.i18next.com/overview/configuration-options)                                                                                                                          |
 
 ## Page options
 
@@ -371,6 +396,26 @@ export const query = graphql`
 `;
 ```
 
+## How to fetch translations of specific namespaces only
+
+You can use `ns` and `language` field in gatsby page queries to fetch specific namespaces that are being used in the page. This will be useful when you have several big pages with lots of translations.
+
+```javascript
+export const query = graphql`
+  query($language: String!) {
+    locales: allLocale(filter: {ns: {regex: "/common|about/"}, language: {eq: $language}}) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`;
+```
+
 ## How to add `sitemap.xml` for all language specific pages
 
 You can use [gatsby-plugin-sitemap](https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/) to automatically generate a sitemap during build time. You need to customize `query` to fetch only original pages and then `serialize` data to build a sitemap. Here is an example:

gatsby-node.js

@@ -1,2 +1,7 @@
 const {onCreatePage} = require('./dist/plugin/onCreatePage');
+const {onCreateNode} = require('./dist/plugin/onCreateNode');
+const {onPreBootstrap} = require('./dist/plugin/onPreBootstrap');
+
 exports.onCreatePage = onCreatePage;
+exports.onCreateNode = onCreateNode;
+exports.onPreBootstrap = onPreBootstrap;

package.json

@@ -65,7 +65,6 @@
   "dependencies": {
     "bluebird": "^3.7.2",
     "browser-lang": "^0.1.0",
-    "glob": "^7.1.6",
     "path-to-regexp": "^6.1.0"
   },
   "peerDependencies": {

src/plugin/onCreateNode.ts

@@ -0,0 +1,89 @@
+import {CreateNodeArgs, Node} from 'gatsby';
+import {FileSystemNode, PluginOptions, LocaleNodeInput} from '../types';
+
+export function unstable_shouldOnCreateNode({node}: {node: Node}) {
+  // We only care about JSON content.
+  return node.internal.mediaType === `application/json`;
+}
+
+export const onCreateNode = async (
+  {
+    node,
+    actions,
+    loadNodeContent,
+    createNodeId,
+    createContentDigest,
+    reporter
+  }: CreateNodeArgs<FileSystemNode>,
+  {localeJsonSourceName = 'locale'}: PluginOptions
+) => {
+  if (!unstable_shouldOnCreateNode({node})) {
+    return;
+  }
+
+  const {
+    absolutePath,
+    internal: {mediaType, type},
+    sourceInstanceName,
+    relativeDirectory,
+    name,
+    id
+  } = node;
+
+  // Currently only support file resources
+  if (type !== 'File') {
+    return;
+  }
+
+  // User is not using this feature
+  if (localeJsonSourceName == null) {
+    return;
+  }
+
+  if (sourceInstanceName !== localeJsonSourceName) {
+    return;
+  }
+
+  const activity = reporter.activityTimer(
+    `gatsby-plugin-react-i18next: create node: ${relativeDirectory}/${name}`
+  );
+  activity.start();
+
+  // relativeDirectory name is language name.
+  const language = relativeDirectory;
+  const content = await loadNodeContent(node);
+
+  // verify & canonicalize indent. (do not care about key order)
+  let data: string;
+  try {
+    data = JSON.stringify(JSON.parse(content), undefined, '');
+  } catch {
+    const hint = node.absolutePath ? `file ${node.absolutePath}` : `in node ${node.id}`;
+    throw new Error(`Unable to parse JSON: ${hint}`);
+  }
+
+  const {createNode, createParentChildLink} = actions;
+
+  const localeNode: LocaleNodeInput = {
+    id: createNodeId(`${id} >>> Locale`),
+    children: [],
+    parent: id,
+    internal: {
+      content: data,
+      contentDigest: createContentDigest(data),
+      type: `Locale`
+    },
+    language: language,
+    ns: name,
+    data,
+    fileAbsolutePath: absolutePath
+  };
+
+  createNode(localeNode);
+
+  // @ts-ignore
+  // staled issue: https://github.com/gatsbyjs/gatsby/issues/19993
+  createParentChildLink({parent: node, child: localeNode});
+
+  activity.end();
+};

src/plugin/onCreatePage.ts

@@ -1,27 +1,7 @@
-import _glob from 'glob';
 import {CreatePageArgs, Page} from 'gatsby';
 import BP from 'bluebird';
-import fs from 'fs';
-import util from 'util';
 import {match} from 'path-to-regexp';
-import {PageContext, PageOptions, PluginOptions, Resources} from '../types';
-
-const readFile = util.promisify(fs.readFile);
-const glob = util.promisify(_glob);
-
-const getResources = async (path: string, language: string) => {
-  const files = await glob(`${path}/${language}/*.json`);
-  return BP.reduce<string, Resources>(
-    files,
-    async (result, file) => {
-      const [, ns] = /[\/(\w+|\-)]+\/([\w|\-]+)\.json/.exec(file)!;
-      const content = await readFile(file, 'utf8');
-      result[language][ns] = JSON.parse(content);
-      return result;
-    },
-    {[language]: {}}
-  );
-};
+import {PageContext, PageOptions, PluginOptions} from '../types';
 
 export const onCreatePage = async (
   {page, actions}: CreatePageArgs<PageContext>,
@@ -49,7 +29,6 @@ export const onCreatePage = async (
     routed = false,
     pageOptions
   }: GeneratePageParams): Promise<Page<PageContext>> => {
-    const resources = await getResources(pluginOptions.path, language);
     return {
       ...page,
       path,
@@ -61,7 +40,6 @@ export const onCreatePage = async (
           languages: pageOptions?.languages || languages,
           defaultLanguage,
           routed,
-          resources,
           originalPath,
           path
         }

src/plugin/onPreBootstrap.ts

@@ -0,0 +1,12 @@
+import {ParentSpanPluginArgs} from 'gatsby';
+import {PluginOptions} from '../types';
+import report from 'gatsby-cli/lib/reporter';
+
+export const onPreBootstrap = (_args: ParentSpanPluginArgs, pluginOptions: PluginOptions) => {
+  // Check for deprecated option.
+  if (pluginOptions.hasOwnProperty('path')) {
+    report.error(
+      `gatsby-plugin-react-i18next: 💥💥💥 "path" option is deprecated and won't be working as it was before. Please update setting on your gastby-config.js.\n\nSee detail: https://github.com/microapps/gatsby-plugin-react-i18next\n\n`
+    );
+  }
+};

src/plugin/wrapPageElement.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {withPrefix, WrapPageElementBrowserArgs} from 'gatsby';
 // @ts-ignore
 import browserLang from 'browser-lang';
-import {I18NextContext, LANGUAGE_KEY, PageContext, PluginOptions} from '../types';
+import {I18NextContext, LANGUAGE_KEY, PageContext, PluginOptions, LocaleNode} from '../types';
 import i18next, {i18n as I18n} from 'i18next';
 import {I18nextProvider} from 'react-i18next';
 import {I18nextContext} from '../i18nextContext';
@@ -19,19 +19,11 @@ const withI18next = (i18n: I18n, context: I18NextContext) => (children: any) =>
 
 export const wrapPageElement = (
   {element, props}: WrapPageElementBrowserArgs<any, PageContext>,
-  {i18nextOptions = {}, redirect = true, siteUrl}: PluginOptions
+  {i18nextOptions = {}, redirect = true, siteUrl, localeJsonNodeName = 'locales'}: PluginOptions
 ) => {
   if (!props) return;
-  const {pageContext, location} = props;
-  const {
-    routed,
-    language,
-    languages,
-    originalPath,
-    defaultLanguage,
-    resources,
-    path
-  } = pageContext.i18n;
+  const {data, pageContext, location} = props;
+  const {routed, language, languages, originalPath, defaultLanguage, path} = pageContext.i18n;
   const isRedirect = redirect && !routed;
 
   if (isRedirect) {
@@ -66,18 +58,18 @@ export const wrapPageElement = (
       ...i18nextOptions,
       lng: language,
       fallbackLng: defaultLanguage,
-      resources,
       react: {
         useSuspense: false
       }
     });
   }
 
-  Object.keys(resources[language]).map((ns) => {
-    if (!i18n.hasResourceBundle(language, ns)) {
-      i18n.addResourceBundle(language, ns, resources[language][ns]);
-    }
-  });
+  if (data && data[localeJsonNodeName]) {
+    data[localeJsonNodeName].edges.forEach(({node}: {node: LocaleNode}) => {
+      const parsedData = JSON.parse(node.data);
+      i18n.addResourceBundle(node.language, node.ns, parsedData);
+    });
+  }
 
   if (i18n.language !== language) {
     i18n.changeLanguage(language);