druxt 0.18.1 → 0.19.0

package/dist/components/DruxtModule.vue

@@ -38,6 +38,14 @@ export default {
 
   /** */
   props: {
+    /**
+     * The resource langcode.
+     */
+    langcode: {
+      type: String,
+      default: undefined
+    },
+
     /**
      * The module value.
      *
@@ -170,7 +178,17 @@ export default {
     this.component = component
   },
 
+  computed: {
+    lang: ({ langcode, $route }) => langcode || ($route.meta || {}).langcode
+  },
+
   watch: {
+    lang(to, from) {
+      if (to !== from) {
+        this.$fetch()
+      }
+    },
+
     model() {
       if (this.component.props && this.component.props.value !== this.model) {
         this.component.props.value = this.model
@@ -237,7 +255,12 @@ export default {
       let components = []
       for (const set of options.filter(set => Array.isArray(set))) {
         const variants = []
-        components = [...components, ...set.filter((o) => o).map(item => {
+
+        // Add langcode suffix to all sets.
+        // console.log('SET', set)
+        // set.push(this.lang)
+
+        for (const item of set.filter((o) => o)) {
           // Build array of name parts.
           const parts = variants.length ? [...variants[0].parts] : []
           parts.push(pascalCase(splitByCase(item)))
@@ -245,14 +268,26 @@ export default {
           // Convert parts into a pascalCase component name.
           const name = pascalCase([this.$options.name, ...parts])
 
-          // Check if component is globally registered.
-          const global = !!this.$options.components[name]
-
           // Store set variant data to be used in next set item.
           variants.unshift({ global, name, parts })
 
-          return { global, name, parts }
-        })]
+          // Add langcode suffixed component option.
+          if (this.lang) {
+            const langcodeName = pascalCase([this.$options.name, ...parts, this.lang])
+            components.push({
+              global: !!this.$options.components[langcodeName],
+              name: langcodeName,
+              parts: [...parts, this.lang]
+            })
+          }
+
+          // And component option.
+          components.push({
+            global: !!this.$options.components[name],
+            name,
+            parts
+          })
+        }
       }
 
       // Filter unique components.
@@ -280,7 +315,10 @@ export default {
         return {}
       }
 
-      const propsData = this.$options.druxt.propsData.call(this, this)
+      const propsData = {
+        langcode: this.lang,
+        ...this.$options.druxt.propsData.call(this, this)
+      }
 
       // Props.
       const props = {}
@@ -391,8 +429,9 @@ export default {
       props: (this.wrapper || {}).propsData || undefined,
     }
 
-    // Return only wrapper if fetch state is still pending.
-    if (this.$fetchState.pending && this.component.is === 'DruxtWrapper') {
+    // Return only wrapper if fetch state is still pending and Druxt hasn't set
+    // the available component options.
+    if (this.$fetchState.pending && !this.component.options.length) {
       return h((this.wrapper || {}).component || 'div', wrapperData)
     }
 

package/dist/druxt.esm.js

@@ -1,4 +1,5 @@
 import chalk from 'chalk';
+import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
 import { join, resolve } from 'path';
 import axios from 'axios';
 import { stringify } from 'querystring';
@@ -6,168 +7,6 @@ import consola from 'consola';
 import merge from 'deepmerge';
 import md5 from 'md5';
 import Vue from 'vue';
-import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
-
-var name = "druxt";
-var version = "0.18.1";
-var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
-var keywords = [
-	"cms",
-	"decoupled",
-	"drupal",
-	"druxt",
-	"headless",
-	"jsonapi",
-	"json:api",
-	"nuxt",
-	"module",
-	"vue"
-];
-var homepage = "https://druxtjs.org";
-var bugs = {
-	url: "https://github.com/druxt/druxt.js/issues"
-};
-var repository = {
-	type: "git",
-	url: "git+https://github.com/druxt/druxt.js"
-};
-var license = "MIT";
-var exports = {
-	".": {
-		require: "./dist/druxt.ssr.js",
-		"import": "./dist/druxt.esm.js"
-	},
-	"./components/*": "./dist/components/*"
-};
-var main = "dist/druxt.ssr.js";
-var module = "dist/druxt.esm.js";
-var files = [
-	"dist",
-	"stories",
-	"templates"
-];
-var dependencies = {
-	"@nuxtjs/axios": "^5.13.6",
-	"@nuxtjs/proxy": "^2.1.0",
-	chalk: "^4.1.2",
-	deepmerge: "^4.2.2",
-	"drupal-jsonapi-params": "^1.2.1",
-	md5: "^2.3.0",
-	querystring: "^0.2.0",
-	scule: "^0.2.0"
-};
-var devDependencies = {
-	"@storybook/addon-docs": "^6.4.13"
-};
-var peerDependencies = {
-	axios: "*",
-	consola: "*"
-};
-var optionalDependencies = {
-	"core-js": "^3.16.1",
-	vue: "^2.6.14",
-	vuex: "^3.6.2"
-};
-var publishConfig = {
-	access: "public"
-};
-var meta = {
-	name: name,
-	version: version,
-	description: description,
-	keywords: keywords,
-	homepage: homepage,
-	bugs: bugs,
-	repository: repository,
-	license: license,
-	exports: exports,
-	main: main,
-	module: module,
-	files: files,
-	dependencies: dependencies,
-	devDependencies: devDependencies,
-	peerDependencies: peerDependencies,
-	optionalDependencies: optionalDependencies,
-	publishConfig: publishConfig
-};
-
-const DruxtNuxtModule = function(moduleOptions = {}) {
-  var _a;
-  const options = {
-    endpoint: "/jsonapi",
-    ...moduleOptions,
-    ...(this.options || {}).druxt
-  };
-  if (options.proxy) {
-    const proxies = {};
-    if ((options.proxy || {}).api) {
-      proxies[options.endpoint] = options.baseUrl;
-      proxies["/router/translate-path"] = options.baseUrl;
-    }
-    if ((options.proxy || {}).files) {
-      const filesPath = typeof options.proxy.files === "string" ? options.proxy.files : "default";
-      proxies[`/sites/${filesPath}/files`] = options.baseUrl;
-    }
-    if (this.options.proxy) {
-      if (Array.isArray(this.options.proxy)) {
-        this.options.proxy = [
-          ...Object.keys(proxies).map((path) => `${options.baseUrl}${path}`),
-          ...this.options.proxy
-        ];
-      } else {
-        this.options.proxy = {
-          ...proxies,
-          ...this.options.proxy
-        };
-      }
-    } else {
-      this.options.proxy = proxies;
-    }
-    this.addModule("@nuxtjs/proxy");
-  }
-  if (!options.axios) {
-    this.options.axios = {
-      baseURL: options.baseUrl,
-      proxy: !!(options.proxy || {}).api,
-      ...this.options.axios
-    };
-    this.addModule("@nuxtjs/axios");
-  }
-  this.nuxt.hook("components:dirs", (dirs) => {
-    dirs.push({ path: join(__dirname, "components") });
-  });
-  this.addPlugin({
-    src: resolve(__dirname, "../templates/plugin.js"),
-    fileName: "druxt.js",
-    options
-  });
-  const extendPlugins = this.options.extendPlugins;
-  this.options.extendPlugins = (plugins) => {
-    plugins = typeof extendPlugins === "function" ? extendPlugins(plugins) : plugins;
-    const axiosIndex = plugins.findIndex(({ src }) => src === `${this.options.buildDir}/axios.js`);
-    const axiosPlugin = plugins[axiosIndex];
-    plugins.splice(axiosIndex, 1);
-    const druxtIndex = plugins.findIndex(({ src }) => src === `${this.options.buildDir}/druxt.js`);
-    const druxtPlugin = plugins[druxtIndex];
-    plugins.splice(druxtIndex, 1);
-    plugins = [axiosPlugin, druxtPlugin, ...plugins];
-    return plugins;
-  };
-  this.addPlugin({
-    src: resolve(__dirname, "../templates/store.js"),
-    fileName: "store/druxt.js",
-    options
-  });
-  this.options.store = true;
-  this.options.components = (_a = this.options.components) != null ? _a : true;
-  this.options.cli.badgeMessages.push(`${chalk.blue.bold("Druxt")} @ v${meta.version}`);
-  this.options.cli.badgeMessages.push(`${chalk.bold("API:")} ${chalk.blue.underline(options.baseUrl + options.endpoint)}`);
-  this.nuxt.hook("storybook:config", async ({ stories }) => {
-    stories.push("druxt/stories/*.stories.mdx");
-    stories.push("druxt/dist/components/*.stories.mdx");
-    stories.push("druxt/dist/components/*.stories.mjs");
-  });
-};
 
 class DruxtClient {
   constructor(baseUrl, options = {}) {
@@ -183,7 +22,7 @@ class DruxtClient {
     } else {
       this.axios = axios.create({
         ...options.axios || {},
-        baseURL: baseUrl
+        baseURL: baseUrl && !(options.proxy || {}).api ? baseUrl : void 0
       });
     }
     if (options.debug) {
@@ -201,6 +40,7 @@ class DruxtClient {
       jsonapiResourceConfig: "jsonapi_resource_config--jsonapi_resource_config",
       ...options
     };
+    this.index = {};
   }
   addHeaders(headers) {
     if (typeof headers === "undefined") {
@@ -250,11 +90,11 @@ class DruxtClient {
       }
     }
   }
-  async createResource(resource) {
+  async createResource(resource, prefix = "") {
     if (resource.id) {
-      return this.updateResource(resource);
+      return this.updateResource(resource, prefix);
     }
-    const { href } = await this.getIndex(resource.type);
+    const { href } = await this.getIndex(resource.type, prefix);
     if (!href) {
       return false;
     }
@@ -301,8 +141,8 @@ class DruxtClient {
       this.error(err, { url });
     }
   }
-  async getCollection(type, query) {
-    const { href } = await this.getIndex(type);
+  async getCollection(type, query, prefix) {
+    const { href } = await this.getIndex(type, prefix);
     if (!href) {
       return false;
     }
@@ -310,25 +150,25 @@ class DruxtClient {
     const { data } = await this.get(url);
     return data;
   }
-  async getCollectionAll(type, query) {
+  async getCollectionAll(type, query, prefix) {
     const collections = [];
-    let res = await this.getCollection(type, query);
+    let res = await this.getCollection(type, query, prefix);
     collections.push(res);
     while (((res.links || {}).next || {}).href) {
       query = res.links.next.href.split("?")[1];
-      res = await this.getCollection(type, query);
+      res = await this.getCollection(type, query, prefix);
       collections.push(res);
     }
     return collections;
   }
-  async getIndex(resource) {
-    if (this.index && !resource) {
-      return this.index;
+  async getIndex(resource, prefix) {
+    if ((this.index || {})[prefix] && !resource) {
+      return this.index[prefix];
     }
-    if (this.index && resource) {
-      return this.index[resource] ? this.index[resource] : false;
+    if ((this.index || {})[prefix] && resource) {
+      return this.index[prefix][resource] ? this.index[prefix][resource] : false;
     }
-    const url = this.options.endpoint;
+    const url = [prefix, this.options.endpoint].join("");
     const { data } = await this.get(url);
     let index = data.links;
     if (typeof index !== "object") {
@@ -363,14 +203,14 @@ class DruxtClient {
         };
       }
     }
-    this.index = index;
-    return resource ? this.index[resource] || false : this.index;
+    this.index[prefix] = index;
+    return resource ? this.index[prefix][resource] || false : this.index[prefix];
   }
-  async getRelated(type, id, related, query) {
+  async getRelated(type, id, related, query, prefix = "") {
     if (!id || !type || !related) {
       return false;
     }
-    let { href } = await this.getIndex(type);
+    let { href } = await this.getIndex(type, prefix);
     if (!href) {
       href = this.options.endpoint + "/" + type.replace("--", "/");
     }
@@ -378,11 +218,11 @@ class DruxtClient {
     const { data } = await this.get(url);
     return data;
   }
-  async getResource(type, id, query) {
+  async getResource(type, id, query, prefix) {
     if (!id || !type) {
       return false;
     }
-    let { href } = await this.getIndex(type);
+    let { href } = await this.getIndex(type, prefix);
     if (!href) {
       href = this.options.endpoint + "/" + type.replace("--", "/");
     }
@@ -390,8 +230,8 @@ class DruxtClient {
     const { data } = await this.get(url);
     return data;
   }
-  async updateResource(resource) {
-    const { href } = await this.getIndex(resource.type);
+  async updateResource(resource, prefix) {
+    const { href } = await this.getIndex(resource.type, prefix);
     if (!href) {
       return false;
     }
@@ -410,15 +250,187 @@ class DruxtClient {
   }
 }
 
+var name = "druxt";
+var version = "0.19.0";
+var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
+var keywords = [
+	"cms",
+	"decoupled",
+	"drupal",
+	"druxt",
+	"headless",
+	"jsonapi",
+	"json:api",
+	"nuxt",
+	"module",
+	"vue"
+];
+var homepage = "https://druxtjs.org";
+var bugs = {
+	url: "https://github.com/druxt/druxt.js/issues"
+};
+var repository = {
+	type: "git",
+	url: "git+https://github.com/druxt/druxt.js"
+};
+var license = "MIT";
+var exports = {
+	".": {
+		require: "./dist/druxt.ssr.js",
+		"import": "./dist/druxt.esm.js"
+	},
+	"./components/*": "./dist/components/*"
+};
+var main = "dist/druxt.ssr.js";
+var module = "dist/druxt.esm.js";
+var files = [
+	"dist",
+	"stories",
+	"templates"
+];
+var dependencies = {
+	"@nuxtjs/axios": "^5.13.6",
+	"@nuxtjs/proxy": "^2.1.0",
+	chalk: "^4.1.2",
+	deepmerge: "^4.2.2",
+	"drupal-jsonapi-params": "^2.0.0",
+	md5: "^2.3.0",
+	querystring: "^0.2.1",
+	scule: "^0.2.1"
+};
+var devDependencies = {
+	"@storybook/addon-docs": "^6.4.22"
+};
+var peerDependencies = {
+	axios: "*",
+	consola: "*"
+};
+var optionalDependencies = {
+	"core-js": "^3.22.5",
+	vue: "^2.6.14",
+	vuex: "^3.6.2"
+};
+var publishConfig = {
+	access: "public"
+};
+var meta = {
+	name: name,
+	version: version,
+	description: description,
+	keywords: keywords,
+	homepage: homepage,
+	bugs: bugs,
+	repository: repository,
+	license: license,
+	exports: exports,
+	main: main,
+	module: module,
+	files: files,
+	dependencies: dependencies,
+	devDependencies: devDependencies,
+	peerDependencies: peerDependencies,
+	optionalDependencies: optionalDependencies,
+	publishConfig: publishConfig
+};
+
+const DruxtNuxtModule = async function(moduleOptions = {}) {
+  var _a;
+  const options = {
+    endpoint: "/jsonapi",
+    ...moduleOptions,
+    ...(this.options || {}).druxt
+  };
+  const druxt = new DruxtClient(options.baseUrl, {
+    ...options,
+    proxy: { ...options.proxy || {}, api: false }
+  });
+  if (options.proxy) {
+    const proxies = {};
+    if ((options.proxy || {}).api) {
+      proxies[options.endpoint] = options.baseUrl;
+      const resourceType = "configurable_language--configurable_language";
+      const query = new DrupalJsonApiParams().addFields(resourceType, ["drupal_internal__id"]);
+      const languages = (await druxt.getCollectionAll(resourceType, query) || []).map((o) => o.data).flat().filter((o) => !["und", "zxx"].includes(o.attributes.drupal_internal__id)).map((o) => o.attributes.drupal_internal__id);
+      for (const langcode of languages) {
+        proxies[`/${langcode}${options.endpoint}`] = options.baseUrl;
+      }
+      proxies["/router/translate-path"] = options.baseUrl;
+    }
+    if ((options.proxy || {}).files) {
+      const filesPath = typeof options.proxy.files === "string" ? options.proxy.files : "default";
+      proxies[`/sites/${filesPath}/files`] = options.baseUrl;
+    }
+    if (this.options.proxy) {
+      if (Array.isArray(this.options.proxy)) {
+        this.options.proxy = [
+          ...Object.keys(proxies).map((path) => `${options.baseUrl}${path}`),
+          ...this.options.proxy
+        ];
+      } else {
+        this.options.proxy = {
+          ...proxies,
+          ...this.options.proxy
+        };
+      }
+    } else {
+      this.options.proxy = proxies;
+    }
+    this.addModule("@nuxtjs/proxy");
+  }
+  if (!options.axios) {
+    this.options.axios = {
+      baseURL: options.baseUrl,
+      proxy: !!(options.proxy || {}).api,
+      ...this.options.axios
+    };
+    this.addModule("@nuxtjs/axios");
+  }
+  this.nuxt.hook("components:dirs", (dirs) => {
+    dirs.push({ path: join(__dirname, "components") });
+  });
+  this.addPlugin({
+    src: resolve(__dirname, "../templates/plugin.js"),
+    fileName: "druxt.js",
+    options
+  });
+  const extendPlugins = this.options.extendPlugins;
+  this.options.extendPlugins = (plugins) => {
+    plugins = typeof extendPlugins === "function" ? extendPlugins(plugins) : plugins;
+    const axiosIndex = plugins.findIndex(({ src }) => src === `${this.options.buildDir}/axios.js`);
+    const axiosPlugin = plugins[axiosIndex];
+    plugins.splice(axiosIndex, 1);
+    const druxtIndex = plugins.findIndex(({ src }) => src === `${this.options.buildDir}/druxt.js`);
+    const druxtPlugin = plugins[druxtIndex];
+    plugins.splice(druxtIndex, 1);
+    plugins = [axiosPlugin, druxtPlugin, ...plugins];
+    return plugins;
+  };
+  this.addPlugin({
+    src: resolve(__dirname, "../templates/store.js"),
+    fileName: "store/druxt.js",
+    options
+  });
+  this.options.store = true;
+  this.options.components = (_a = this.options.components) != null ? _a : true;
+  this.options.cli.badgeMessages.push(`${chalk.blue.bold("Druxt")} @ v${meta.version}`);
+  this.options.cli.badgeMessages.push(`${chalk.bold("API:")} ${chalk.blue.underline(options.baseUrl + options.endpoint)}`);
+  this.nuxt.hook("storybook:config", async ({ stories }) => {
+    stories.push("druxt/stories/*.stories.mdx");
+    stories.push("druxt/dist/components/*.stories.mdx");
+    stories.push("druxt/dist/components/*.stories.mjs");
+  });
+};
+
 const getDrupalJsonApiParams = (query) => {
   return new DrupalJsonApiParams().initialize(query);
 };
 
-const dehydrateResources = ({ commit, queryObject, resources }) => {
+const dehydrateResources = ({ commit, queryObject, resources, prefix }) => {
   return (resources || []).map((data) => {
     const link = decodeURI(((data.links || {}).self || {}).href || "");
     const href = typeof (queryObject.fields || {})[data.type] === "string" ? [link.split("?")[0], `fields[${data.type}]=${queryObject.fields[data.type]}`].join("?") : link;
     commit("druxt/addResource", {
+      prefix,
       resource: {
         data,
         links: { self: { href } }
@@ -439,21 +451,23 @@ const DruxtStore = ({ store }) => {
       resources: {}
     }),
     mutations: {
-      addCollection(state, { collection, type, hash }) {
+      addCollection(state, { collection, type, hash, prefix }) {
         if (!state.collections[type])
           Vue.set(state.collections, type, {});
+        if (!state.collections[type][hash])
+          Vue.set(state.collections[type], hash, {});
         const link = decodeURI((((collection || {}).links || {}).self || {}).href || "");
         const query = link.split("?")[1] || "";
         const queryObject = getDrupalJsonApiParams(query).getQueryObject();
-        collection.data = dehydrateResources({ commit: this.commit, queryObject, resources: collection.data });
+        collection.data = dehydrateResources({ commit: this.commit, prefix, queryObject, resources: collection.data });
         if (collection.included) {
-          collection.included = dehydrateResources({ commit: this.commit, queryObject, resources: collection.included });
+          collection.included = dehydrateResources({ commit: this.commit, prefix, queryObject, resources: collection.included });
           delete collection.included;
         }
-        collection = merge(state.collections[type][hash] || {}, collection, { arrayMerge: (dst, src) => src });
-        Vue.set(state.collections[type], hash, collection);
+        collection = merge(state.collections[type][hash][prefix] || {}, collection, { arrayMerge: (dst, src) => src });
+        Vue.set(state.collections[type][hash], prefix, collection);
       },
-      addResource(state, { resource, hash }) {
+      addResource(state, { prefix, resource, hash }) {
         if (hash) {
           console.warn("[druxt] The `hash` argument for `druxt/addResource` has been deprecated, see https://druxtjs.org/guide/deprecations.html#druxtstore-addresource-hash");
         }
@@ -468,30 +482,32 @@ const DruxtStore = ({ store }) => {
         resource[flag] = Date.now();
         if (!state.resources[type])
           Vue.set(state.resources, type, {});
+        if (!state.resources[type][id])
+          Vue.set(state.resources[type], id, {});
         if (resource.included) {
-          dehydrateResources({ commit: this.commit, queryObject, resources: resource.included });
+          dehydrateResources({ commit: this.commit, prefix, queryObject, resources: resource.included });
           delete resource.included;
         }
-        resource = merge(state.resources[type][id] || {}, resource, { arrayMerge: (dst, src) => src });
-        Vue.set(state.resources[type], id, resource);
+        resource = merge(state.resources[type][id][prefix] || {}, resource, { arrayMerge: (dst, src) => src });
+        Vue.set(state.resources[type][id], prefix, resource);
       }
     },
     actions: {
-      async getCollection({ commit, state }, { type, query }) {
+      async getCollection({ commit, state }, { type, query, prefix }) {
         const queryObject = getDrupalJsonApiParams(query).getQueryObject();
         const hash = query ? md5(JSON.stringify({ ...queryObject, fields: {}, include: [] })) : "_default";
-        if ((state.collections[type] || {})[hash]) {
+        if (((state.collections[type] || {})[hash] || {})[prefix]) {
           return {
-            ...state.collections[type][hash],
-            data: state.collections[type][hash].data.map((o) => (state.resources[o.type][o.id] || {}).data)
+            ...state.collections[type][hash][prefix],
+            data: state.collections[type][hash][prefix].data.map((o) => ((state.resources[o.type][o.id] || {})[prefix] || {}).data)
           };
         }
-        const collection = await this.$druxt.getCollection(type, query);
-        commit("addCollection", { collection: { ...collection }, type, hash });
+        const collection = await this.$druxt.getCollection(type, query, prefix);
+        commit("addCollection", { collection: { ...collection }, type, hash, prefix });
         return collection;
       },
-      async getResource({ commit, dispatch, state }, { type, id, query }) {
-        const storedResource = (state.resources[type] || {})[id] ? { ...state.resources[type][id] } : null;
+      async getResource({ commit, dispatch, state }, { type, id, query, prefix }) {
+        const storedResource = ((state.resources[type] || {})[id] || {})[prefix] ? { ...state.resources[type][id][prefix] } : null;
         const queryObject = getDrupalJsonApiParams(query).getQueryObject();
         queryObject.include = Array.isArray(queryObject.include) ? queryObject.include.join(",") : queryObject.include;
         if (queryObject.include && typeof (queryObject.fields || {})[type] === "string") {
@@ -535,10 +551,10 @@ const DruxtStore = ({ store }) => {
         }
         let resource;
         if (!storedResource || fields) {
-          resource = await this.$druxt.getResource(type, id, getDrupalJsonApiParams(queryObject));
-          commit("addResource", { resource: { ...resource } });
+          resource = await this.$druxt.getResource(type, id, getDrupalJsonApiParams(queryObject), prefix);
+          commit("addResource", { prefix, resource: { ...resource } });
         }
-        const result = { ...(state.resources[type] || {})[id] };
+        const result = { ...((state.resources[type] || {})[id] || {})[prefix] };
         if (queryObject.include && ((resource || {}).included || (storedResource || {}).included)) {
           included = [
             ...(resource || {}).included || [],
@@ -608,5 +624,4 @@ class DruxtClass {
 
 DruxtNuxtModule.meta = require("../package.json");
 
-export default DruxtNuxtModule;
-export { DruxtClass, DruxtClient, DruxtStore };
+export { DruxtClass, DruxtClient, DruxtStore, DruxtNuxtModule as default };

package/dist/druxt.ssr.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const chalk = require('chalk');
+const drupalJsonapiParams = require('drupal-jsonapi-params');
 const path = require('path');
 const axios = require('axios');
 const querystring = require('querystring');
@@ -10,7 +11,6 @@ const consola = require('consola');
 const merge = require('deepmerge');
 const md5 = require('md5');
 const Vue = require('vue');
-const drupalJsonapiParams = require('drupal-jsonapi-params');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,170 +21,9 @@ const merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 const md5__default = /*#__PURE__*/_interopDefaultLegacy(md5);
 const Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
 
-var name = "druxt";
-var version = "0.18.1";
-var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
-var keywords = [
-	"cms",
-	"decoupled",
-	"drupal",
-	"druxt",
-	"headless",
-	"jsonapi",
-	"json:api",
-	"nuxt",
-	"module",
-	"vue"
-];
-var homepage = "https://druxtjs.org";
-var bugs = {
-	url: "https://github.com/druxt/druxt.js/issues"
-};
-var repository = {
-	type: "git",
-	url: "git+https://github.com/druxt/druxt.js"
-};
-var license = "MIT";
-var exports$1 = {
-	".": {
-		require: "./dist/druxt.ssr.js",
-		"import": "./dist/druxt.esm.js"
-	},
-	"./components/*": "./dist/components/*"
-};
-var main = "dist/druxt.ssr.js";
-var module$1 = "dist/druxt.esm.js";
-var files = [
-	"dist",
-	"stories",
-	"templates"
-];
-var dependencies = {
-	"@nuxtjs/axios": "^5.13.6",
-	"@nuxtjs/proxy": "^2.1.0",
-	chalk: "^4.1.2",
-	deepmerge: "^4.2.2",
-	"drupal-jsonapi-params": "^1.2.1",
-	md5: "^2.3.0",
-	querystring: "^0.2.0",
-	scule: "^0.2.0"
-};
-var devDependencies = {
-	"@storybook/addon-docs": "^6.4.13"
-};
-var peerDependencies = {
-	axios: "*",
-	consola: "*"
-};
-var optionalDependencies = {
-	"core-js": "^3.16.1",
-	vue: "^2.6.14",
-	vuex: "^3.6.2"
-};
-var publishConfig = {
-	access: "public"
-};
-const meta = {
-	name: name,
-	version: version,
-	description: description,
-	keywords: keywords,
-	homepage: homepage,
-	bugs: bugs,
-	repository: repository,
-	license: license,
-	exports: exports$1,
-	main: main,
-	module: module$1,
-	files: files,
-	dependencies: dependencies,
-	devDependencies: devDependencies,
-	peerDependencies: peerDependencies,
-	optionalDependencies: optionalDependencies,
-	publishConfig: publishConfig
-};
-
-const DruxtNuxtModule = function(moduleOptions = {}) {
-  var _a;
-  const options = {
-    endpoint: "/jsonapi",
-    ...moduleOptions,
-    ...(this.options || {}).druxt
-  };
-  if (options.proxy) {
-    const proxies = {};
-    if ((options.proxy || {}).api) {
-      proxies[options.endpoint] = options.baseUrl;
-      proxies["/router/translate-path"] = options.baseUrl;
-    }
-    if ((options.proxy || {}).files) {
-      const filesPath = typeof options.proxy.files === "string" ? options.proxy.files : "default";
-      proxies[`/sites/${filesPath}/files`] = options.baseUrl;
-    }
-    if (this.options.proxy) {
-      if (Array.isArray(this.options.proxy)) {
-        this.options.proxy = [
-          ...Object.keys(proxies).map((path) => `${options.baseUrl}${path}`),
-          ...this.options.proxy
-        ];
-      } else {
-        this.options.proxy = {
-          ...proxies,
-          ...this.options.proxy
-        };
-      }
-    } else {
-      this.options.proxy = proxies;
-    }
-    this.addModule("@nuxtjs/proxy");
-  }
-  if (!options.axios) {
-    this.options.axios = {
-      baseURL: options.baseUrl,
-      proxy: !!(options.proxy || {}).api,
-      ...this.options.axios
-    };
-    this.addModule("@nuxtjs/axios");
-  }
-  this.nuxt.hook("components:dirs", (dirs) => {
-    dirs.push({ path: path.join(__dirname, "components") });
-  });
-  this.addPlugin({
-    src: path.resolve(__dirname, "../templates/plugin.js"),
-    fileName: "druxt.js",
-    options
-  });
-  const extendPlugins = this.options.extendPlugins;
-  this.options.extendPlugins = (plugins) => {
-    plugins = typeof extendPlugins === "function" ? extendPlugins(plugins) : plugins;
-    const axiosIndex = plugins.findIndex(({ src }) => src === `${this.options.buildDir}/axios.js`);
-    const axiosPlugin = plugins[axiosIndex];
-    plugins.splice(axiosIndex, 1);
-    const druxtIndex = plugins.findIndex(({ src }) => src === `${this.options.buildDir}/druxt.js`);
-    const druxtPlugin = plugins[druxtIndex];
-    plugins.splice(druxtIndex, 1);
-    plugins = [axiosPlugin, druxtPlugin, ...plugins];
-    return plugins;
-  };
-  this.addPlugin({
-    src: path.resolve(__dirname, "../templates/store.js"),
-    fileName: "store/druxt.js",
-    options
-  });
-  this.options.store = true;
-  this.options.components = (_a = this.options.components) != null ? _a : true;
-  this.options.cli.badgeMessages.push(`${chalk__default['default'].blue.bold("Druxt")} @ v${meta.version}`);
-  this.options.cli.badgeMessages.push(`${chalk__default['default'].bold("API:")} ${chalk__default['default'].blue.underline(options.baseUrl + options.endpoint)}`);
-  this.nuxt.hook("storybook:config", async ({ stories }) => {
-    stories.push("druxt/stories/*.stories.mdx");
-    stories.push("druxt/dist/components/*.stories.mdx");
-    stories.push("druxt/dist/components/*.stories.mjs");
-  });
-};
-
 class DruxtClient {
   constructor(baseUrl, options = {}) {
-    this.log = consola__default['default'].create({ defaults: {
+    this.log = consola__default["default"].create({ defaults: {
       tag: "DruxtClient"
     } });
     if (!baseUrl) {
@@ -194,9 +33,9 @@ class DruxtClient {
     if (typeof options.axios === "function") {
       this.axios = options.axios;
     } else {
-      this.axios = axios__default['default'].create({
+      this.axios = axios__default["default"].create({
         ...options.axios || {},
-        baseURL: baseUrl
+        baseURL: baseUrl && !(options.proxy || {}).api ? baseUrl : void 0
       });
     }
     if (options.debug) {
@@ -214,6 +53,7 @@ class DruxtClient {
       jsonapiResourceConfig: "jsonapi_resource_config--jsonapi_resource_config",
       ...options
     };
+    this.index = {};
   }
   addHeaders(headers) {
     if (typeof headers === "undefined") {
@@ -263,11 +103,11 @@ class DruxtClient {
       }
     }
   }
-  async createResource(resource) {
+  async createResource(resource, prefix = "") {
     if (resource.id) {
-      return this.updateResource(resource);
+      return this.updateResource(resource, prefix);
     }
-    const { href } = await this.getIndex(resource.type);
+    const { href } = await this.getIndex(resource.type, prefix);
     if (!href) {
       return false;
     }
@@ -314,8 +154,8 @@ class DruxtClient {
       this.error(err, { url });
     }
   }
-  async getCollection(type, query) {
-    const { href } = await this.getIndex(type);
+  async getCollection(type, query, prefix) {
+    const { href } = await this.getIndex(type, prefix);
     if (!href) {
       return false;
     }
@@ -323,25 +163,25 @@ class DruxtClient {
     const { data } = await this.get(url);
     return data;
   }
-  async getCollectionAll(type, query) {
+  async getCollectionAll(type, query, prefix) {
     const collections = [];
-    let res = await this.getCollection(type, query);
+    let res = await this.getCollection(type, query, prefix);
     collections.push(res);
     while (((res.links || {}).next || {}).href) {
       query = res.links.next.href.split("?")[1];
-      res = await this.getCollection(type, query);
+      res = await this.getCollection(type, query, prefix);
       collections.push(res);
     }
     return collections;
   }
-  async getIndex(resource) {
-    if (this.index && !resource) {
-      return this.index;
+  async getIndex(resource, prefix) {
+    if ((this.index || {})[prefix] && !resource) {
+      return this.index[prefix];
     }
-    if (this.index && resource) {
-      return this.index[resource] ? this.index[resource] : false;
+    if ((this.index || {})[prefix] && resource) {
+      return this.index[prefix][resource] ? this.index[prefix][resource] : false;
     }
-    const url = this.options.endpoint;
+    const url = [prefix, this.options.endpoint].join("");
     const { data } = await this.get(url);
     let index = data.links;
     if (typeof index !== "object") {
@@ -376,14 +216,14 @@ class DruxtClient {
         };
       }
     }
-    this.index = index;
-    return resource ? this.index[resource] || false : this.index;
+    this.index[prefix] = index;
+    return resource ? this.index[prefix][resource] || false : this.index[prefix];
   }
-  async getRelated(type, id, related, query) {
+  async getRelated(type, id, related, query, prefix = "") {
     if (!id || !type || !related) {
       return false;
     }
-    let { href } = await this.getIndex(type);
+    let { href } = await this.getIndex(type, prefix);
     if (!href) {
       href = this.options.endpoint + "/" + type.replace("--", "/");
     }
@@ -391,11 +231,11 @@ class DruxtClient {
     const { data } = await this.get(url);
     return data;
   }
-  async getResource(type, id, query) {
+  async getResource(type, id, query, prefix) {
     if (!id || !type) {
       return false;
     }
-    let { href } = await this.getIndex(type);
+    let { href } = await this.getIndex(type, prefix);
     if (!href) {
       href = this.options.endpoint + "/" + type.replace("--", "/");
     }
@@ -403,8 +243,8 @@ class DruxtClient {
     const { data } = await this.get(url);
     return data;
   }
-  async updateResource(resource) {
-    const { href } = await this.getIndex(resource.type);
+  async updateResource(resource, prefix) {
+    const { href } = await this.getIndex(resource.type, prefix);
     if (!href) {
       return false;
     }
@@ -423,15 +263,187 @@ class DruxtClient {
   }
 }
 
+var name = "druxt";
+var version = "0.19.0";
+var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
+var keywords = [
+	"cms",
+	"decoupled",
+	"drupal",
+	"druxt",
+	"headless",
+	"jsonapi",
+	"json:api",
+	"nuxt",
+	"module",
+	"vue"
+];
+var homepage = "https://druxtjs.org";
+var bugs = {
+	url: "https://github.com/druxt/druxt.js/issues"
+};
+var repository = {
+	type: "git",
+	url: "git+https://github.com/druxt/druxt.js"
+};
+var license = "MIT";
+var exports$1 = {
+	".": {
+		require: "./dist/druxt.ssr.js",
+		"import": "./dist/druxt.esm.js"
+	},
+	"./components/*": "./dist/components/*"
+};
+var main = "dist/druxt.ssr.js";
+var module$1 = "dist/druxt.esm.js";
+var files = [
+	"dist",
+	"stories",
+	"templates"
+];
+var dependencies = {
+	"@nuxtjs/axios": "^5.13.6",
+	"@nuxtjs/proxy": "^2.1.0",
+	chalk: "^4.1.2",
+	deepmerge: "^4.2.2",
+	"drupal-jsonapi-params": "^2.0.0",
+	md5: "^2.3.0",
+	querystring: "^0.2.1",
+	scule: "^0.2.1"
+};
+var devDependencies = {
+	"@storybook/addon-docs": "^6.4.22"
+};
+var peerDependencies = {
+	axios: "*",
+	consola: "*"
+};
+var optionalDependencies = {
+	"core-js": "^3.22.5",
+	vue: "^2.6.14",
+	vuex: "^3.6.2"
+};
+var publishConfig = {
+	access: "public"
+};
+const meta = {
+	name: name,
+	version: version,
+	description: description,
+	keywords: keywords,
+	homepage: homepage,
+	bugs: bugs,
+	repository: repository,
+	license: license,
+	exports: exports$1,
+	main: main,
+	module: module$1,
+	files: files,
+	dependencies: dependencies,
+	devDependencies: devDependencies,
+	peerDependencies: peerDependencies,
+	optionalDependencies: optionalDependencies,
+	publishConfig: publishConfig
+};
+
+const DruxtNuxtModule = async function(moduleOptions = {}) {
+  var _a;
+  const options = {
+    endpoint: "/jsonapi",
+    ...moduleOptions,
+    ...(this.options || {}).druxt
+  };
+  const druxt = new DruxtClient(options.baseUrl, {
+    ...options,
+    proxy: { ...options.proxy || {}, api: false }
+  });
+  if (options.proxy) {
+    const proxies = {};
+    if ((options.proxy || {}).api) {
+      proxies[options.endpoint] = options.baseUrl;
+      const resourceType = "configurable_language--configurable_language";
+      const query = new drupalJsonapiParams.DrupalJsonApiParams().addFields(resourceType, ["drupal_internal__id"]);
+      const languages = (await druxt.getCollectionAll(resourceType, query) || []).map((o) => o.data).flat().filter((o) => !["und", "zxx"].includes(o.attributes.drupal_internal__id)).map((o) => o.attributes.drupal_internal__id);
+      for (const langcode of languages) {
+        proxies[`/${langcode}${options.endpoint}`] = options.baseUrl;
+      }
+      proxies["/router/translate-path"] = options.baseUrl;
+    }
+    if ((options.proxy || {}).files) {
+      const filesPath = typeof options.proxy.files === "string" ? options.proxy.files : "default";
+      proxies[`/sites/${filesPath}/files`] = options.baseUrl;
+    }
+    if (this.options.proxy) {
+      if (Array.isArray(this.options.proxy)) {
+        this.options.proxy = [
+          ...Object.keys(proxies).map((path) => `${options.baseUrl}${path}`),
+          ...this.options.proxy
+        ];
+      } else {
+        this.options.proxy = {
+          ...proxies,
+          ...this.options.proxy
+        };
+      }
+    } else {
+      this.options.proxy = proxies;
+    }
+    this.addModule("@nuxtjs/proxy");
+  }
+  if (!options.axios) {
+    this.options.axios = {
+      baseURL: options.baseUrl,
+      proxy: !!(options.proxy || {}).api,
+      ...this.options.axios
+    };
+    this.addModule("@nuxtjs/axios");
+  }
+  this.nuxt.hook("components:dirs", (dirs) => {
+    dirs.push({ path: path.join(__dirname, "components") });
+  });
+  this.addPlugin({
+    src: path.resolve(__dirname, "../templates/plugin.js"),
+    fileName: "druxt.js",
+    options
+  });
+  const extendPlugins = this.options.extendPlugins;
+  this.options.extendPlugins = (plugins) => {
+    plugins = typeof extendPlugins === "function" ? extendPlugins(plugins) : plugins;
+    const axiosIndex = plugins.findIndex(({ src }) => src === `${this.options.buildDir}/axios.js`);
+    const axiosPlugin = plugins[axiosIndex];
+    plugins.splice(axiosIndex, 1);
+    const druxtIndex = plugins.findIndex(({ src }) => src === `${this.options.buildDir}/druxt.js`);
+    const druxtPlugin = plugins[druxtIndex];
+    plugins.splice(druxtIndex, 1);
+    plugins = [axiosPlugin, druxtPlugin, ...plugins];
+    return plugins;
+  };
+  this.addPlugin({
+    src: path.resolve(__dirname, "../templates/store.js"),
+    fileName: "store/druxt.js",
+    options
+  });
+  this.options.store = true;
+  this.options.components = (_a = this.options.components) != null ? _a : true;
+  this.options.cli.badgeMessages.push(`${chalk__default["default"].blue.bold("Druxt")} @ v${meta.version}`);
+  this.options.cli.badgeMessages.push(`${chalk__default["default"].bold("API:")} ${chalk__default["default"].blue.underline(options.baseUrl + options.endpoint)}`);
+  this.nuxt.hook("storybook:config", async ({ stories }) => {
+    stories.push("druxt/stories/*.stories.mdx");
+    stories.push("druxt/dist/components/*.stories.mdx");
+    stories.push("druxt/dist/components/*.stories.mjs");
+  });
+};
+
 const getDrupalJsonApiParams = (query) => {
   return new drupalJsonapiParams.DrupalJsonApiParams().initialize(query);
 };
 
-const dehydrateResources = ({ commit, queryObject, resources }) => {
+const dehydrateResources = ({ commit, queryObject, resources, prefix }) => {
   return (resources || []).map((data) => {
     const link = decodeURI(((data.links || {}).self || {}).href || "");
     const href = typeof (queryObject.fields || {})[data.type] === "string" ? [link.split("?")[0], `fields[${data.type}]=${queryObject.fields[data.type]}`].join("?") : link;
     commit("druxt/addResource", {
+      prefix,
       resource: {
         data,
         links: { self: { href } }
@@ -452,21 +464,23 @@ const DruxtStore = ({ store }) => {
       resources: {}
     }),
     mutations: {
-      addCollection(state, { collection, type, hash }) {
+      addCollection(state, { collection, type, hash, prefix }) {
         if (!state.collections[type])
-          Vue__default['default'].set(state.collections, type, {});
+          Vue__default["default"].set(state.collections, type, {});
+        if (!state.collections[type][hash])
+          Vue__default["default"].set(state.collections[type], hash, {});
         const link = decodeURI((((collection || {}).links || {}).self || {}).href || "");
         const query = link.split("?")[1] || "";
         const queryObject = getDrupalJsonApiParams(query).getQueryObject();
-        collection.data = dehydrateResources({ commit: this.commit, queryObject, resources: collection.data });
+        collection.data = dehydrateResources({ commit: this.commit, prefix, queryObject, resources: collection.data });
         if (collection.included) {
-          collection.included = dehydrateResources({ commit: this.commit, queryObject, resources: collection.included });
+          collection.included = dehydrateResources({ commit: this.commit, prefix, queryObject, resources: collection.included });
           delete collection.included;
         }
-        collection = merge__default['default'](state.collections[type][hash] || {}, collection, { arrayMerge: (dst, src) => src });
-        Vue__default['default'].set(state.collections[type], hash, collection);
+        collection = merge__default["default"](state.collections[type][hash][prefix] || {}, collection, { arrayMerge: (dst, src) => src });
+        Vue__default["default"].set(state.collections[type][hash], prefix, collection);
       },
-      addResource(state, { resource, hash }) {
+      addResource(state, { prefix, resource, hash }) {
         if (hash) {
           console.warn("[druxt] The `hash` argument for `druxt/addResource` has been deprecated, see https://druxtjs.org/guide/deprecations.html#druxtstore-addresource-hash");
         }
@@ -480,31 +494,33 @@ const DruxtStore = ({ store }) => {
         const flag = typeof (queryObject.fields || {})[((resource || {}).data || {}).type] === "string" ? "_druxt_partial" : "_druxt_full";
         resource[flag] = Date.now();
         if (!state.resources[type])
-          Vue__default['default'].set(state.resources, type, {});
+          Vue__default["default"].set(state.resources, type, {});
+        if (!state.resources[type][id])
+          Vue__default["default"].set(state.resources[type], id, {});
         if (resource.included) {
-          dehydrateResources({ commit: this.commit, queryObject, resources: resource.included });
+          dehydrateResources({ commit: this.commit, prefix, queryObject, resources: resource.included });
           delete resource.included;
         }
-        resource = merge__default['default'](state.resources[type][id] || {}, resource, { arrayMerge: (dst, src) => src });
-        Vue__default['default'].set(state.resources[type], id, resource);
+        resource = merge__default["default"](state.resources[type][id][prefix] || {}, resource, { arrayMerge: (dst, src) => src });
+        Vue__default["default"].set(state.resources[type][id], prefix, resource);
       }
     },
     actions: {
-      async getCollection({ commit, state }, { type, query }) {
+      async getCollection({ commit, state }, { type, query, prefix }) {
         const queryObject = getDrupalJsonApiParams(query).getQueryObject();
-        const hash = query ? md5__default['default'](JSON.stringify({ ...queryObject, fields: {}, include: [] })) : "_default";
-        if ((state.collections[type] || {})[hash]) {
+        const hash = query ? md5__default["default"](JSON.stringify({ ...queryObject, fields: {}, include: [] })) : "_default";
+        if (((state.collections[type] || {})[hash] || {})[prefix]) {
           return {
-            ...state.collections[type][hash],
-            data: state.collections[type][hash].data.map((o) => (state.resources[o.type][o.id] || {}).data)
+            ...state.collections[type][hash][prefix],
+            data: state.collections[type][hash][prefix].data.map((o) => ((state.resources[o.type][o.id] || {})[prefix] || {}).data)
           };
         }
-        const collection = await this.$druxt.getCollection(type, query);
-        commit("addCollection", { collection: { ...collection }, type, hash });
+        const collection = await this.$druxt.getCollection(type, query, prefix);
+        commit("addCollection", { collection: { ...collection }, type, hash, prefix });
         return collection;
       },
-      async getResource({ commit, dispatch, state }, { type, id, query }) {
-        const storedResource = (state.resources[type] || {})[id] ? { ...state.resources[type][id] } : null;
+      async getResource({ commit, dispatch, state }, { type, id, query, prefix }) {
+        const storedResource = ((state.resources[type] || {})[id] || {})[prefix] ? { ...state.resources[type][id][prefix] } : null;
         const queryObject = getDrupalJsonApiParams(query).getQueryObject();
         queryObject.include = Array.isArray(queryObject.include) ? queryObject.include.join(",") : queryObject.include;
         if (queryObject.include && typeof (queryObject.fields || {})[type] === "string") {
@@ -548,10 +564,10 @@ const DruxtStore = ({ store }) => {
         }
         let resource;
         if (!storedResource || fields) {
-          resource = await this.$druxt.getResource(type, id, getDrupalJsonApiParams(queryObject));
-          commit("addResource", { resource: { ...resource } });
+          resource = await this.$druxt.getResource(type, id, getDrupalJsonApiParams(queryObject), prefix);
+          commit("addResource", { prefix, resource: { ...resource } });
         }
-        const result = { ...(state.resources[type] || {})[id] };
+        const result = { ...((state.resources[type] || {})[id] || {})[prefix] };
         if (queryObject.include && ((resource || {}).included || (storedResource || {}).included)) {
           included = [
             ...(resource || {}).included || [],
@@ -624,4 +640,4 @@ DruxtNuxtModule.meta = require("../package.json");
 exports.DruxtClass = DruxtClass;
 exports.DruxtClient = DruxtClient;
 exports.DruxtStore = DruxtStore;
-exports.default = DruxtNuxtModule;
+exports["default"] = DruxtNuxtModule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "description": "The Fully Decoupled Drupal Framework for Nuxt.js.",
   "keywords": [
     "cms",
@@ -42,20 +42,20 @@
     "@nuxtjs/proxy": "^2.1.0",
     "chalk": "^4.1.2",
     "deepmerge": "^4.2.2",
-    "drupal-jsonapi-params": "^1.2.1",
+    "drupal-jsonapi-params": "^2.0.0",
     "md5": "^2.3.0",
-    "querystring": "^0.2.0",
-    "scule": "^0.2.0"
+    "querystring": "^0.2.1",
+    "scule": "^0.2.1"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^6.4.13"
+    "@storybook/addon-docs": "^6.4.22"
   },
   "peerDependencies": {
     "axios": "*",
     "consola": "*"
   },
   "optionalDependencies": {
-    "core-js": "^3.16.1",
+    "core-js": "^3.22.5",
     "vue": "^2.6.14",
     "vuex": "^3.6.2"
   },