druxt - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/druxt.esm.js

@@ -1,104 +0,552 @@
-import { warn } from 'consola';
-import { DruxtRouter } from 'druxt-router';
+import { resolve } from 'path';
 
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
 /**
- * Nuxt.js module function.
+ * The Vue.js Druxt component.
  *
- * @param {object} moduleOptions - The Nuxt.js module options.
+ * @example @lang vue
+ * <Druxt
+ *   :module="module"
+ *   :props-data="propsData"
+ *   :wrapper="{
+ *     component,
+ *     propsData: {}
+ *   }"
+ * />
  */
-var DruxtModule = function (moduleOptions) {
+var script = {
+  name: 'Druxt',
 
-  // Use root level Druxt options.
-  if (typeof this.options === 'undefined' || !this.options.druxt) {
-    throw new TypeError('Druxt settings missing.')
-  }
+  /**
+   * Vue.js Props.
+   */
+  props: {
+    /**
+     * The DruxtJS module to render.
+     *
+     * @type {string}
+     *
+     * @example @lang vue <caption>Using the [DruxtJS Site module](https://site.druxtjs.org).</caption>
+     * <Druxt module="site" />
+     */
+    module: {
+      type: String,
+      required: true,
+    },
 
-  warn('The out of the box, decoupled Drupal Site functionality is deprecated. Please see the `druxt-site` module.');
-  this.addModule('druxt-site');
+    /**
+     * Props data to bind to the specified DruxtJS module.
+     *
+     * @type {object}
+     *
+     * @example @lang vue <caption>Using the [DruxtJS Entity module](https://entity.druxtjs.org) to render a 'node--article' resource.</caption>
+     * <Druxt
+     *   module="entity"
+     *   :props-data="{
+     *     mode: 'teaser',
+     *     type: 'node--article',
+     *     uuid
+     *   }"
+     * />
+     */
+    propsData: {
+      type: Object,
+      default: function () { return ({}); }
+    },
+
+    /**
+     * Wrapper theming system.
+     *
+     * @type {object}
+     * @default { component: undefined, propsData: {} }
+     */
+    wrapper: {
+      type: [Object, Boolean],
+      default: function () { return ({
+        component: 'div',
+        propsData: {},
+      }); }
+    },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {objects} components - The module and wrapper components settins.
+   */
+  data: function () { return ({
+    component: {
+      is: undefined,
+      propsData: {},
+    },
+  }); },
+
+  created: function created() {
+    this.setModuleComponent();
+  },
+
+  methods: {
+    /**
+     * Sets the module component and propsData.
+     */
+    setModuleComponent: function setModuleComponent() {
+      var component = "Druxt" + (this.module.split('-').map(function (string) { return string.charAt(0).toUpperCase() + string.slice(1); }).join(''));
+      if (!this.$options.components[component]) {
+        return
+      }
+
+      // Set component data.
+      this.component.is = component;
+      this.component.propsData = this.propsData;
+    },
+  },
 };
 
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    var options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    var hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            var originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            var existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
+}
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.wrapper && _vm.wrapper.component)?_c((_vm.wrapper || {}).component,_vm._b({tag:"component"},'component',(_vm.wrapper || {}).propsData,false),[_c(_vm.component.is,_vm._b({tag:"component"},'component',Object.assign({}, _vm.component.propsData,
+      _vm.$attrs),false))],1):_c(_vm.component.is,_vm._b({tag:"component"},'component',Object.assign({}, _vm.component.propsData,
+    _vm.$attrs),false))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+//
+//
+//
+//
+//
+//
+
 /**
- * The Druxt class.
+ * The default Druxt module wrapper Vue.js component.
  *
- * Core and common functionality for Druxt.js.
+ * This component is used by the Druxt component if an appropriate component can not be found
+ * for the specified module.
+ *
+ * @private
  */
-var Druxt = function Druxt (baseURL, options) {
-  if ( options === void 0 ) options = {};
+var script$1 = {
+  name: 'DruxtWrapper'
+};
 
-  // Check for URL.
-  if (!baseURL) {
-    throw new Error('The \'baseURL\' parameter is required.')
-  }
+/* script */
+var __vue_script__$1 = script$1;
 
-  /**
-   * Druxt.js options.
-   *
-   * @type {object}
-   * @public
-   */
-  this.options = Object.assign({}, {endpoint: 'jsonapi'},
-    options);
+/* template */
+var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t("default")],2)};
+var __vue_staticRenderFns__$1 = [];
 
-  /**
-   * Druxt router instance.
-   *
-   * @type {DruxtRouter}
-   * @public
-   */
-  this.druxtRouter = new DruxtRouter(baseURL, options);
+  /* style */
+  var __vue_inject_styles__$1 = undefined;
+  /* scoped */
+  var __vue_scope_id__$1 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$1 = undefined;
+  /* functional template */
+  var __vue_is_functional_template__$1 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+/**
+ * Nuxt module function to install Druxt.
+ *
+ * @param {ModuleOptions} moduleOptions - DruxtJS module options.
+ *
+ * @example <caption>Nuxt configuration with module options</caption> @lang js
+ * module.exports = {
+ *   modules: [
+ *     ['druxt', { baseUrl: 'https://demo-api.druxtjs.org' }]
+ *   ]
+ * }
+ *
+ * @example <caption>Nuxt configuration with root level options</caption> @lang js
+ * module.exports = {
+ *   modules: [
+ *     'druxt'
+ *   ],
+ *   druxt: {
+ *     baseUrl: 'https://demo-api.druxtjs.org'
+ *   }
+ * }
+ */
+var DruxtNuxtModule = function (moduleOptions) {
+  if ( moduleOptions === void 0 ) moduleOptions = {};
+
+  var options = Object.assign({}, moduleOptions,
+    (this.options || {}).druxt);
+
+  // Add plugin.
+  this.addPlugin({
+    src: resolve(__dirname, '../nuxt/plugin.js'),
+    fileName: 'druxt.js',
+    options: options
+  });
 };
 
-var DruxtStore = function (ref) {
-  var store = ref.store;
+/**
+ * Module options object.
+ *
+ * @typedef {object} ModuleOptions
+ * @property {string} baseUrl - The Base URL of the Drupal JSON:API backend.
+ */
 
-  if (typeof store === 'undefined') {
-    throw new TypeError('Vuex store not found.')
+/**
+ * Druxt utility class.
+ */
+var DruxtClass = function DruxtClass() {};
+
+/**
+ * Get component data from available options.
+ *
+ * @param {object} vm - The DruxtJS module Vue.js component.
+ * @param {string[]} options - The component naming options.
+ * @param {boolean} [all=false] - Returns all options if true, else only globally registered options.
+ * @param {string} [prefix] - A string to prefix all components.
+ *
+ * @returns {WrapperComponents}
+ */
+DruxtClass.prototype.getComponents = function getComponents (vm, options, all, prefix) {
+    if ( all === void 0 ) all = false;
+
+  var results = [];
+
+  options
+    // Filter out incorrectly typed items.
+    .filter(function (item) { return Array.isArray(item); })
+
+    // Process each item.
+    .map(function (item) {
+      var variants = [];
+
+      item.map(function (string) {
+        var last = variants.length ? variants[variants.length - 1] : {};
+        var parts = last.parts ? last.parts.slice(0) : [];
+        parts.push(string);
+
+        var clone = parts.slice(0);
+
+        // Attach prefix as required.
+        if (typeof prefix !== 'string' && (prefix !== false || typeof prefix === 'undefined') && ((vm || {}).$options || {}).name) {
+          prefix = vm.$options.name.match(/[A-Z][a-z]+/g).map(function (word) { return word.toLowerCase(); }).join('-');
+        }
+
+        if (prefix) {
+          clone.unshift(prefix);
+        }
+
+        // Generate component name values.
+        var kebab = clone.map(function (string) { return string.toLowerCase().replace(/--|_/g, '-'); }).join('-');
+        var pascal = kebab.replace(/((\b|[^a-zA-Z0-9]+)[a-zA-Z0-9])/gi, function (match, p1, p2) { return match.toUpperCase().replace(p2, ''); });
+
+        // Check if component is globally registered.
+        var global = false;
+        for (var name of [kebab, pascal]) {
+          if (typeof (((vm || {}).$options || {}).components || {})[name] !== 'undefined') {
+            global = true;
+            break
+          }
+        }
+
+        variants.unshift({ global: global, kebab: kebab, parts: parts, pascal: pascal, prefix: prefix });
+      });
+
+      // Add variants to results.
+      variants.map(function (variant) { return results.push(variant); });
+    });
+
+  // Return globally registered components or all.
+  return results.filter(function (option) { return option.global || !!all; })
+};
+
+/**
+ * Get the Druxt module data from the referenced component.
+ *
+ * @returns {ModuleData}
+ */
+DruxtClass.prototype.getModuleData = async function getModuleData (vm) {
+  if (typeof ((vm || {}).$options || {}).druxt !== 'function') {
+    return false
   }
 
+  var moduleData = await vm.$options.druxt({ vm: vm });
+
+  if ((vm.$options || {}).name) {
+    moduleData.name = vm.$options.name.match(/[A-Z][a-z]+/g).map(function (word) { return word.toLowerCase(); }).join('-');
+  }
+
+  return moduleData
+};
+
+/**
+ * @typedef {object} ModuleData
+ * @property {Array.<string[]>} componentOptions - An array of arrays of strings for component naming.
+ * @property {object} propsData - Property data to bind to the wrapper component.
+ *
+ * @example @lang js
+ * {
+ *   componentOptions: [['wrapper', 'component']],
+ *   propsData: {},
+ * }
+ */
+
+ /**
+  * @typedef {object[]} WrapperComponents
+  * @property {boolean} global - Component global registration state.
+  * @property {string} kebab - The component name in kebab case.
+  * @property {string[]} parts - The component naming parts.
+  * @property {string} pascal - The component name in pascal case.
+  * @property {string} prefix - The component name prefix.
+  *
+  * @example @lang js
+  * [{
+  *   global: true,
+  *   kebab: 'druxt-test-module-wrapper',
+  *   parts: ['wrapper'],
+  *   pascal: 'DruxtTestModuleWrapper',
+  *   prefix: 'druxt-test-module',
+  * }]
+  */
+
+/**
+ * Vue.js Mixin to add Druxt component theming to a Druxt module.
+ *
+ * @name DruxtComponentMixin
+ * @see {@link /guide/#component-theme-system|Wrapper theme system}
+ *
+ * @example @lang vue <caption>CustomDruxtModule.vue</caption>
+ * <template>
+ *   <component :is="component.is" v-bind="component.propsData">
+ *     <!-- -->
+ *   </component>
+ * </template>
+ *
+ * <script>
+ * import { DruxtComponentMixin } from 'druxt'
+ * export default {
+ *   mixins: [DruxtComponentMixin]
+ * }
+ * </script>
+ */
+var DruxtComponentMixin = {
   /**
-   * @namespace
+   * @property {Component} component - The wrapper component and propsData to be rendered.
    */
-  var namespace = 'druxt';
+  data: function () { return ({
+    component: {
+      is: 'DruxtWrapper',
+      options: [],
+      propsData: {},
+    }
+  }); },
 
   /**
-   * The druxt Vuex module.
+   * The Nuxt Fetch hook.
    *
-   * Provides a Vuex state object, mutations and actions for common Druxt.js functionality.
+   * Loads the Druxt module data and applies a wrapper component as required.
    *
-   * @name druxt
-   * @module druxt
+   * **Important:** If your component has an existing `fetch` method, you must manually invoke
+   * the `DruxtComponentMixin.fetch()` hook.
    *
-   * @todo Add Druxt.js common settings functionality to Vuex store.
+   * @see {@link https://nuxtjs.org/api/pages-fetch/}
+   *
+   * @example @lang vue <caption>Manually invoking DruxtComponentMixin.fetch().</caption>
+   * <script>
+   * import { DruxtComponentMixin } from 'druxt'
+   * export default {
+   *   mixins: [DruxtComponentMixin],
+   *
+   *   async fetch {
+   *     await DruxtComponentMixin.fetch.call(this)
+   *   }
+   * }
+   * </script>
    */
-  var module = {
-    namespaced: true,
+  fetch: async function fetch() {
+    // @todo - check for this.$druxt plugin.
+    var druxt = new DruxtClass();
+    var moduleData = await druxt.getModuleData(this);
 
-    /**
-     * Vuex State object.
-     *
-     * @name state
-     * @type {object}
-     * @property {object} settings - Druxt.js settings.
-     */
-    state: function () { return ({
-      settings: {}
-    }); },
+    if (!moduleData.componentOptions) {
+      return
+    }
 
-    /**
-     * Vuex Mutations.
-     */
-    mutations: {},
+    var options = druxt.getComponents(this, moduleData.componentOptions, true);
+    this.component.options = options.map(function (item) { return item.pascal; });
+    var available = options.filter(function (item) { return item.global; });
+    if (!available.length) {
+      return
+    }
 
-    /**
-     * Vuex Actions.
-     */
-    actions: {}
-  };
-
-  store.registerModule(namespace, module, {
-    preserveState: Boolean(store.state[namespace])
-  });
+    this.component.is = available[0].pascal;
+    this.component.propsData = moduleData.propsData || {};
+  },
 };
 
-export default DruxtModule;
-export { Druxt, DruxtStore };
+/**
+ * @typedef {object} Component
+ * @property {string} is=DruxtWrapper - The rendered component name.
+ * @property {string[]} options - The possible component name options.
+ * @property {object} propsData - The component propsData object.
+ *
+ * @example @lang js
+ * {
+ *   is: 'DruxtTestModuleWrapper',
+ *   options: [
+ *     'DruxtTestModuleWrapper',
+ *   ],
+ *   propsData: {},
+ * }
+ */
+
+export default DruxtNuxtModule;
+export { __vue_component__ as Druxt, DruxtClass, DruxtComponentMixin, __vue_component__$1 as DruxtWrapper };

dist/druxt.min.js

@@ -1,1 +0,1 @@
-var Druxt=function(t,e,r){"use strict";return t.Druxt=function(t,e){if(void 0===e&&(e={}),!t)throw new Error("The 'baseURL' parameter is required.");this.options=Object.assign({},{endpoint:"jsonapi"},e),this.druxtRouter=new r.DruxtRouter(t,e)},t.DruxtStore=function(t){var e=t.store;if(void 0===e)throw new TypeError("Vuex store not found.");var r="druxt";e.registerModule(r,{namespaced:!0,state:function(){return{settings:{}}},mutations:{},actions:{}},{preserveState:Boolean(e.state.druxt)})},t.default=function(t){if(void 0===this.options||!this.options.druxt)throw new TypeError("Druxt settings missing.");e.warn("The out of the box, decoupled Drupal Site functionality is deprecated. Please see the `druxt-site` module."),this.addModule("druxt-site")},t}({},consola,druxtRouter);
+var Druxt=function(t,n){"use strict";function e(t,n,e,o,r,a,i,p,s,c){"boolean"!=typeof i&&(s=p,p=i,i=!1);var u,f="function"==typeof e?e.options:e;if(t&&t.render&&(f.render=t.render,f.staticRenderFns=t.staticRenderFns,f._compiled=!0,r&&(f.functional=!0)),o&&(f._scopeId=o),a?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,s(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},f._ssrRegister=u):n&&(u=i?function(t){n.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){n.call(this,p(t))}),u)if(f.functional){var d=f.render;f.render=function(t,n){return u.call(n),d(t,n)}}else{var l=f.beforeCreate;f.beforeCreate=l?[].concat(l,u):[u]}return e}var o=e({render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return t.wrapper&&t.wrapper.component?e((t.wrapper||{}).component,t._b({tag:"component"},"component",(t.wrapper||{}).propsData,!1),[e(t.component.is,t._b({tag:"component"},"component",Object.assign({},t.component.propsData,t.$attrs),!1))],1):e(t.component.is,t._b({tag:"component"},"component",Object.assign({},t.component.propsData,t.$attrs),!1))},staticRenderFns:[]},undefined,{name:"Druxt",props:{module:{type:String,required:!0},propsData:{type:Object,default:function(){return{}}},wrapper:{type:[Object,Boolean],default:function(){return{component:"div",propsData:{}}}}},data:function(){return{component:{is:void 0,propsData:{}}}},created:function(){this.setModuleComponent()},methods:{setModuleComponent:function(){var t="Druxt"+this.module.split("-").map((function(t){return t.charAt(0).toUpperCase()+t.slice(1)})).join("");this.$options.components[t]&&(this.component.is=t,this.component.propsData=this.propsData)}}},undefined,false,undefined,!1,void 0,void 0,void 0),r=e({render:function(){var t=this,n=t.$createElement;return(t._self._c||n)("div",[t._t("default")],2)},staticRenderFns:[]},undefined,{name:"DruxtWrapper"},undefined,false,undefined,!1,void 0,void 0,void 0),a=function(){};a.prototype.getComponents=function(t,n,e,o){void 0===e&&(e=!1);var r=[];return n.filter((function(t){return Array.isArray(t)})).map((function(n){var e=[];n.map((function(n){var r=e.length?e[e.length-1]:{},a=r.parts?r.parts.slice(0):[];a.push(n);var i=a.slice(0);"string"==typeof o||!1===o&&void 0!==o||!((t||{}).$options||{}).name||(o=t.$options.name.match(/[A-Z][a-z]+/g).map((function(t){return t.toLowerCase()})).join("-")),o&&i.unshift(o);var p=i.map((function(t){return t.toLowerCase().replace(/--|_/g,"-")})).join("-"),s=p.replace(/((\b|[^a-zA-Z0-9]+)[a-zA-Z0-9])/gi,(function(t,n,e){return t.toUpperCase().replace(e,"")})),c=!1;for(var u of[p,s])if(void 0!==(((t||{}).$options||{}).components||{})[u]){c=!0;break}e.unshift({global:c,kebab:p,parts:a,pascal:s,prefix:o})})),e.map((function(t){return r.push(t)}))})),r.filter((function(t){return t.global||!!e}))},a.prototype.getModuleData=async function(t){if("function"!=typeof((t||{}).$options||{}).druxt)return!1;var n=await t.$options.druxt({vm:t});return(t.$options||{}).name&&(n.name=t.$options.name.match(/[A-Z][a-z]+/g).map((function(t){return t.toLowerCase()})).join("-")),n};var i={data:function(){return{component:{is:"DruxtWrapper",options:[],propsData:{}}}},fetch:async function(){var t=new a,n=await t.getModuleData(this);if(n.componentOptions){var e=t.getComponents(this,n.componentOptions,!0);this.component.options=e.map((function(t){return t.pascal}));var o=e.filter((function(t){return t.global}));o.length&&(this.component.is=o[0].pascal,this.component.propsData=n.propsData||{})}}};return t.Druxt=o,t.DruxtClass=a,t.DruxtComponentMixin=i,t.DruxtWrapper=r,t.default=function(t){void 0===t&&(t={});var e=Object.assign({},t,(this.options||{}).druxt);this.addPlugin({src:n.resolve(__dirname,"../nuxt/plugin.js"),fileName:"druxt.js",options:e})},t}({},path);

dist/druxt.ssr.js

@@ -1,94 +0,533 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var consola=require('consola'),druxtRouter=require('druxt-router');/**
- * Nuxt.js module function.
- *
- * @param {object} moduleOptions - The Nuxt.js module options.
- */
-var DruxtModule = function (moduleOptions) {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var path=require('path');//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
-  // Use root level Druxt options.
-  if (typeof this.options === 'undefined' || !this.options.druxt) {
-    throw new TypeError('Druxt settings missing.')
-  }
-
-  consola.warn('The out of the box, decoupled Drupal Site functionality is deprecated. Please see the `druxt-site` module.');
-  this.addModule('druxt-site');
-};/**
- * The Druxt class.
+/**
+ * The Vue.js Druxt component.
  *
- * Core and common functionality for Druxt.js.
+ * @example @lang vue
+ * <Druxt
+ *   :module="module"
+ *   :props-data="propsData"
+ *   :wrapper="{
+ *     component,
+ *     propsData: {}
+ *   }"
+ * />
  */
-var Druxt = function Druxt (baseURL, options) {
-  if ( options === void 0 ) options = {};
+var script = {
+  name: 'Druxt',
 
-  // Check for URL.
-  if (!baseURL) {
-    throw new Error('The \'baseURL\' parameter is required.')
-  }
-
   /**
-   * Druxt.js options.
-   *
-   * @type {object}
-   * @public
+   * Vue.js Props.
    */
-  this.options = Object.assign({}, {endpoint: 'jsonapi'},
-    options);
+  props: {
+    /**
+     * The DruxtJS module to render.
+     *
+     * @type {string}
+     *
+     * @example @lang vue <caption>Using the [DruxtJS Site module](https://site.druxtjs.org).</caption>
+     * <Druxt module="site" />
+     */
+    module: {
+      type: String,
+      required: true,
+    },
 
+    /**
+     * Props data to bind to the specified DruxtJS module.
+     *
+     * @type {object}
+     *
+     * @example @lang vue <caption>Using the [DruxtJS Entity module](https://entity.druxtjs.org) to render a 'node--article' resource.</caption>
+     * <Druxt
+     *   module="entity"
+     *   :props-data="{
+     *     mode: 'teaser',
+     *     type: 'node--article',
+     *     uuid
+     *   }"
+     * />
+     */
+    propsData: {
+      type: Object,
+      default: function () { return ({}); }
+    },
+
+    /**
+     * Wrapper theming system.
+     *
+     * @type {object}
+     * @default { component: undefined, propsData: {} }
+     */
+    wrapper: {
+      type: [Object, Boolean],
+      default: function () { return ({
+        component: 'div',
+        propsData: {},
+      }); }
+    },
+  },
+
   /**
-   * Druxt router instance.
+   * Vue.js Data object.
    *
-   * @type {DruxtRouter}
-   * @public
+   * @property {objects} components - The module and wrapper components settins.
    */
-  this.druxtRouter = new druxtRouter.DruxtRouter(baseURL, options);
-};var DruxtStore = function (ref) {
-  var store = ref.store;
+  data: function () { return ({
+    component: {
+      is: undefined,
+      propsData: {},
+    },
+  }); },
 
-  if (typeof store === 'undefined') {
-    throw new TypeError('Vuex store not found.')
+  created: function created() {
+    this.setModuleComponent();
+  },
+
+  methods: {
+    /**
+     * Sets the module component and propsData.
+     */
+    setModuleComponent: function setModuleComponent() {
+      var component = "Druxt" + (this.module.split('-').map(function (string) { return string.charAt(0).toUpperCase() + string.slice(1); }).join(''));
+      if (!this.$options.components[component]) {
+        return
+      }
+
+      // Set component data.
+      this.component.is = component;
+      this.component.propsData = this.propsData;
+    },
+  },
+};function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    var options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    var hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            var originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            var existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
+}/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.wrapper && _vm.wrapper.component)?_c((_vm.wrapper || {}).component,_vm._b({tag:"component"},'component',(_vm.wrapper || {}).propsData,false),[_c(_vm.component.is,_vm._b({tag:"component"},'component',Object.assign({}, _vm.component.propsData,
+      _vm.$attrs),false))],1):_c(_vm.component.is,_vm._b({tag:"component"},'component',Object.assign({}, _vm.component.propsData,
+    _vm.$attrs),false))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = "data-v-1ac5d209";
+  /* functional template */
+  var __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );//
+//
+//
+//
+//
+//
+
+/**
+ * The default Druxt module wrapper Vue.js component.
+ *
+ * This component is used by the Druxt component if an appropriate component can not be found
+ * for the specified module.
+ *
+ * @private
+ */
+var script$1 = {
+  name: 'DruxtWrapper'
+};/* script */
+var __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t("default")],2)};
+var __vue_staticRenderFns__$1 = [];
+
+  /* style */
+  var __vue_inject_styles__$1 = undefined;
+  /* scoped */
+  var __vue_scope_id__$1 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$1 = "data-v-35409ca9";
+  /* functional template */
+  var __vue_is_functional_template__$1 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );/**
+ * Nuxt module function to install Druxt.
+ *
+ * @param {ModuleOptions} moduleOptions - DruxtJS module options.
+ *
+ * @example <caption>Nuxt configuration with module options</caption> @lang js
+ * module.exports = {
+ *   modules: [
+ *     ['druxt', { baseUrl: 'https://demo-api.druxtjs.org' }]
+ *   ]
+ * }
+ *
+ * @example <caption>Nuxt configuration with root level options</caption> @lang js
+ * module.exports = {
+ *   modules: [
+ *     'druxt'
+ *   ],
+ *   druxt: {
+ *     baseUrl: 'https://demo-api.druxtjs.org'
+ *   }
+ * }
+ */
+var DruxtNuxtModule = function (moduleOptions) {
+  if ( moduleOptions === void 0 ) moduleOptions = {};
+
+  var options = Object.assign({}, moduleOptions,
+    (this.options || {}).druxt);
+
+  // Add plugin.
+  this.addPlugin({
+    src: path.resolve(__dirname, '../nuxt/plugin.js'),
+    fileName: 'druxt.js',
+    options: options
+  });
+};
+
+/**
+ * Module options object.
+ *
+ * @typedef {object} ModuleOptions
+ * @property {string} baseUrl - The Base URL of the Drupal JSON:API backend.
+ *//**
+ * Druxt utility class.
+ */
+var DruxtClass = function DruxtClass() {};
+
+/**
+ * Get component data from available options.
+ *
+ * @param {object} vm - The DruxtJS module Vue.js component.
+ * @param {string[]} options - The component naming options.
+ * @param {boolean} [all=false] - Returns all options if true, else only globally registered options.
+ * @param {string} [prefix] - A string to prefix all components.
+ *
+ * @returns {WrapperComponents}
+ */
+DruxtClass.prototype.getComponents = function getComponents (vm, options, all, prefix) {
+    if ( all === void 0 ) all = false;
+
+  var results = [];
+
+  options
+    // Filter out incorrectly typed items.
+    .filter(function (item) { return Array.isArray(item); })
+
+    // Process each item.
+    .map(function (item) {
+      var variants = [];
+
+      item.map(function (string) {
+        var last = variants.length ? variants[variants.length - 1] : {};
+        var parts = last.parts ? last.parts.slice(0) : [];
+        parts.push(string);
+
+        var clone = parts.slice(0);
+
+        // Attach prefix as required.
+        if (typeof prefix !== 'string' && (prefix !== false || typeof prefix === 'undefined') && ((vm || {}).$options || {}).name) {
+          prefix = vm.$options.name.match(/[A-Z][a-z]+/g).map(function (word) { return word.toLowerCase(); }).join('-');
+        }
+
+        if (prefix) {
+          clone.unshift(prefix);
+        }
+
+        // Generate component name values.
+        var kebab = clone.map(function (string) { return string.toLowerCase().replace(/--|_/g, '-'); }).join('-');
+        var pascal = kebab.replace(/((\b|[^a-zA-Z0-9]+)[a-zA-Z0-9])/gi, function (match, p1, p2) { return match.toUpperCase().replace(p2, ''); });
+
+        // Check if component is globally registered.
+        var global = false;
+        for (var name of [kebab, pascal]) {
+          if (typeof (((vm || {}).$options || {}).components || {})[name] !== 'undefined') {
+            global = true;
+            break
+          }
+        }
+
+        variants.unshift({ global: global, kebab: kebab, parts: parts, pascal: pascal, prefix: prefix });
+      });
+
+      // Add variants to results.
+      variants.map(function (variant) { return results.push(variant); });
+    });
+
+  // Return globally registered components or all.
+  return results.filter(function (option) { return option.global || !!all; })
+};
+
+/**
+ * Get the Druxt module data from the referenced component.
+ *
+ * @returns {ModuleData}
+ */
+DruxtClass.prototype.getModuleData = async function getModuleData (vm) {
+  if (typeof ((vm || {}).$options || {}).druxt !== 'function') {
+    return false
   }
 
+  var moduleData = await vm.$options.druxt({ vm: vm });
+
+  if ((vm.$options || {}).name) {
+    moduleData.name = vm.$options.name.match(/[A-Z][a-z]+/g).map(function (word) { return word.toLowerCase(); }).join('-');
+  }
+
+  return moduleData
+};
+
+/**
+ * @typedef {object} ModuleData
+ * @property {Array.<string[]>} componentOptions - An array of arrays of strings for component naming.
+ * @property {object} propsData - Property data to bind to the wrapper component.
+ *
+ * @example @lang js
+ * {
+ *   componentOptions: [['wrapper', 'component']],
+ *   propsData: {},
+ * }
+ */
+
+ /**
+  * @typedef {object[]} WrapperComponents
+  * @property {boolean} global - Component global registration state.
+  * @property {string} kebab - The component name in kebab case.
+  * @property {string[]} parts - The component naming parts.
+  * @property {string} pascal - The component name in pascal case.
+  * @property {string} prefix - The component name prefix.
+  *
+  * @example @lang js
+  * [{
+  *   global: true,
+  *   kebab: 'druxt-test-module-wrapper',
+  *   parts: ['wrapper'],
+  *   pascal: 'DruxtTestModuleWrapper',
+  *   prefix: 'druxt-test-module',
+  * }]
+  *//**
+ * Vue.js Mixin to add Druxt component theming to a Druxt module.
+ *
+ * @name DruxtComponentMixin
+ * @see {@link /guide/#component-theme-system|Wrapper theme system}
+ *
+ * @example @lang vue <caption>CustomDruxtModule.vue</caption>
+ * <template>
+ *   <component :is="component.is" v-bind="component.propsData">
+ *     <!-- -->
+ *   </component>
+ * </template>
+ *
+ * <script>
+ * import { DruxtComponentMixin } from 'druxt'
+ * export default {
+ *   mixins: [DruxtComponentMixin]
+ * }
+ * </script>
+ */
+var DruxtComponentMixin = {
   /**
-   * @namespace
+   * @property {Component} component - The wrapper component and propsData to be rendered.
    */
-  var namespace = 'druxt';
+  data: function () { return ({
+    component: {
+      is: 'DruxtWrapper',
+      options: [],
+      propsData: {},
+    }
+  }); },
 
   /**
-   * The druxt Vuex module.
+   * The Nuxt Fetch hook.
    *
-   * Provides a Vuex state object, mutations and actions for common Druxt.js functionality.
+   * Loads the Druxt module data and applies a wrapper component as required.
    *
-   * @name druxt
-   * @module druxt
+   * **Important:** If your component has an existing `fetch` method, you must manually invoke
+   * the `DruxtComponentMixin.fetch()` hook.
    *
-   * @todo Add Druxt.js common settings functionality to Vuex store.
+   * @see {@link https://nuxtjs.org/api/pages-fetch/}
+   *
+   * @example @lang vue <caption>Manually invoking DruxtComponentMixin.fetch().</caption>
+   * <script>
+   * import { DruxtComponentMixin } from 'druxt'
+   * export default {
+   *   mixins: [DruxtComponentMixin],
+   *
+   *   async fetch {
+   *     await DruxtComponentMixin.fetch.call(this)
+   *   }
+   * }
+   * </script>
    */
-  var module = {
-    namespaced: true,
+  fetch: async function fetch() {
+    // @todo - check for this.$druxt plugin.
+    var druxt = new DruxtClass();
+    var moduleData = await druxt.getModuleData(this);
 
-    /**
-     * Vuex State object.
-     *
-     * @name state
-     * @type {object}
-     * @property {object} settings - Druxt.js settings.
-     */
-    state: function () { return ({
-      settings: {}
-    }); },
+    if (!moduleData.componentOptions) {
+      return
+    }
 
-    /**
-     * Vuex Mutations.
-     */
-    mutations: {},
+    var options = druxt.getComponents(this, moduleData.componentOptions, true);
+    this.component.options = options.map(function (item) { return item.pascal; });
+    var available = options.filter(function (item) { return item.global; });
+    if (!available.length) {
+      return
+    }
 
-    /**
-     * Vuex Actions.
-     */
-    actions: {}
-  };
+    this.component.is = available[0].pascal;
+    this.component.propsData = moduleData.propsData || {};
+  },
+};
 
-  store.registerModule(namespace, module, {
-    preserveState: Boolean(store.state[namespace])
-  });
-};exports.Druxt=Druxt;exports.DruxtStore=DruxtStore;exports.default=DruxtModule;
+/**
+ * @typedef {object} Component
+ * @property {string} is=DruxtWrapper - The rendered component name.
+ * @property {string[]} options - The possible component name options.
+ * @property {object} propsData - The component propsData object.
+ *
+ * @example @lang js
+ * {
+ *   is: 'DruxtTestModuleWrapper',
+ *   options: [
+ *     'DruxtTestModuleWrapper',
+ *   ],
+ *   propsData: {},
+ * }
+ */exports.Druxt=__vue_component__;exports.DruxtClass=DruxtClass;exports.DruxtComponentMixin=DruxtComponentMixin;exports.DruxtWrapper=__vue_component__$1;exports.default=DruxtNuxtModule;

nuxt/plugin.js

@@ -1,13 +0,14 @@
-import { Druxt } from 'druxt'
+import Vue from 'vue'
+import { Druxt, DruxtWrapper } from 'druxt'
 
-export default (context, inject) => {
-  const baseUrl = '<%= options.baseUrl %>'
-  const options = {}
+// Install the Druxt Vue.js component.
+Vue.use({
+  install: function (Vue) {
+    if (Vue._druxt_installed) return
+    Vue._druxt_installed = true
 
-  <% if (options.endpoint) { %>
-  options.endpoint = '<%= options.endpoint %>'
-  <% } %>
-
-  const druxt = new Druxt(baseUrl, options)
-  inject('druxt', druxt)
-}
+    // Register components.
+    Vue.component(Druxt.name, Druxt)
+    Vue.component(DruxtWrapper.name, DruxtWrapper)
+  }
+})

package.json

 {
   "name": "druxt",
-  "version": "0.2.1",
-  "description": "Nuxt.js in the front, Drupal in the back.",
+  "version": "0.3.0",
+  "description": "A Bridge between frameworks, NuxtJS in the front, Drupal in the back.",
   "repository": {
@@ -20,3 +20,3 @@ "type": "git",
   },
-  "homepage": "https://github.com/druxt/druxt.js/druxt#readme",
+  "homepage": "https://druxtjs.org",
   "main": "dist/druxt.ssr.js",
@@ -35,4 +35,4 @@ "module": "dist/druxt.esm.js",
     "dev": "nodemon --ext js,vue --exec 'npm run lint && npm run build && npm run test'",
-    "docs:dev": "druxt-docgen dev",
-    "docs:build": "druxt-docgen build",
+    "docs:dev": "npx druxt-docgen dev",
+    "docs:build": "npx druxt-docgen build",
     "lint": "eslint --ext .js,.vue src",
@@ -48,6 +48,3 @@ "start": "npm run dev",
   "dependencies": {
-    "codecov": "^3.7.2",
-    "consola": "^2.15.0",
-    "druxt-router": "^0.16.0",
-    "druxt-site": "^0.1.0",
+    "codecov": "^3.8.0",
     "vuex": "^3.5.1"
@@ -66,3 +63,2 @@ },
     "cross-env": "^6.0.3",
-    "druxt-docgen": "^0.2.7",
     "eslint": "^6.7.2",
@@ -73,2 +69,3 @@ "eslint-plugin-vue": "^6.2.2",
     "jest-mock-axios": "^3.2.0",
+    "md5": "^2.3.0",
     "minimist": "^1.2.0",
@@ -83,4 +80,3 @@ "nodemon": "^2.0.2",
     "vue-template-compiler": "^2.6.12",
-    "vue-test-utils": "^1.0.0-beta.11",
-    "vuepress-theme-druxt": "^0.3.2"
+    "vue-test-utils": "^1.0.0-beta.11"
   },
@@ -87,0 +83,0 @@ "engines": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38231

increased by307.19%

Dependency count

2

decreased by-60%

Dev dependency count

26

decreased by-3.7%

Lines of code

989

increased by446.41%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of package files

6

decreased by-14.29%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedconsola@^2.15.0

• - Removeddruxt-router@^0.16.0

• - Removeddruxt-site@^0.1.0

• - Removed@nuxtjs/proxy@2.1.0(transitive)

• - Removed@types/http-proxy@1.17.15(transitive)

• - Removed@types/node@22.5.5(transitive)

• - Removedaxios@0.19.20.21.4(transitive)

• - Removedbraces@3.0.3(transitive)

• - Removedcall-bind@1.0.7(transitive)

• - Removedcharenc@0.0.2(transitive)

• - Removedconsola@2.15.3(transitive)

• - Removedcrypt@0.0.2(transitive)

• - Removeddefine-data-property@1.1.4(transitive)

• - Removeddrupal-jsonapi-params@1.2.3(transitive)

• - Removeddruxt@0.3.40.4.2(transitive)

• - Removeddruxt-blocks@0.5.00.6.10.7.5(transitive)

• - Removeddruxt-breadcrumb@0.6.1(transitive)

• - Removeddruxt-common@0.1.0(transitive)

• - Removeddruxt-entity@0.6.30.7.2(transitive)

• - Removeddruxt-menu@0.5.0(transitive)

• - Removeddruxt-router@0.16.1(transitive)

• - Removeddruxt-schema@0.6.2(transitive)

• - Removeddruxt-search@0.1.1(transitive)

• - Removeddruxt-site@0.1.1(transitive)

• - Removeddruxt-views@0.4.2(transitive)

• - Removedes-define-property@1.0.0(transitive)

• - Removedes-errors@1.3.0(transitive)

• - Removedeventemitter3@4.0.7(transitive)

• - Removedfill-range@7.1.1(transitive)

• - Removedfollow-redirects@1.15.91.5.10(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedget-intrinsic@1.2.4(transitive)

• - Removedgopd@1.0.1(transitive)

• - Removedhas-property-descriptors@1.0.2(transitive)

• - Removedhas-proto@1.0.3(transitive)

• - Removedhas-symbols@1.0.3(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedhttp-proxy@1.18.1(transitive)

• - Removedhttp-proxy-middleware@1.3.1(transitive)

• - Removedis-buffer@1.1.6(transitive)

• - Removedis-extglob@2.1.1(transitive)

• - Removedis-glob@4.0.3(transitive)

• - Removedis-number@7.0.0(transitive)

• - Removedis-plain-obj@3.0.0(transitive)

• - Removedmd5@2.3.0(transitive)

• - Removedmicromatch@4.0.8(transitive)

• - Removedobject-inspect@1.13.2(transitive)

• - Removedpicomatch@2.3.1(transitive)

• - Removedqs@6.13.0(transitive)

• - Removedquerystring@0.2.1(transitive)

• - Removedquerystringify@2.2.0(transitive)

• - Removedrequires-port@1.0.0(transitive)

• - Removedset-function-length@1.2.2(transitive)

• - Removedside-channel@1.0.6(transitive)

• - Removedto-regex-range@5.0.1(transitive)

• - Removedundici-types@6.19.8(transitive)

• - Removedurl-parse@1.5.10(transitive)

• Updatedcodecov@^3.8.0