@vue-storefront/nuxt 2.4.2

package/lib/helpers/isProduction.js

@@ -0,0 +1 @@
+module.exports = (options) => process.env.NODE_ENV === 'production' || options.coreDevelopment;

package/lib/helpers/log.js

@@ -0,0 +1,9 @@
+const consola = require('consola');
+const chalk = require('chalk');
+
+module.exports = Object.freeze({
+  info: (message) => consola.info(chalk.bold('VSF'), message),
+  success: (message) => consola.success(chalk.bold('VSF'), message),
+  warning: (message) => consola.warning(chalk.bold('VSF'), message),
+  error: (message) => consola.error(chalk.bold('VSF'), message)
+});

package/lib/helpers/merge.js

@@ -0,0 +1,7 @@
+const { mergeWith, isArray } = require('lodash');
+
+module.exports = (source, destination) => mergeWith(source, destination, (objValue, srcValue) => {
+  if (isArray(objValue)) {
+    return objValue.concat(srcValue);
+  }
+});

package/lib/helpers/resolveDependency.js

@@ -0,0 +1,7 @@
+module.exports = function resolveDependency (name) {
+  try {
+    return require.resolve(name, { paths: [ process.cwd() ] })
+  } catch (error) {
+    return false;
+  }
+};

package/lib/module.js

@@ -0,0 +1,97 @@
+// TODO proper bundling, for now it's just to experiment with nuxt modules api
+const fs = require('fs');
+const path = require('path');
+const log = require('./helpers/log');
+const merge = require('./helpers/merge');
+const resolveDependency = require('./helpers/resolveDependency');
+const performanceModule = require('./modules/performance');
+const storefrontUiModule = require('./modules/storefront-ui');
+const rawSourcesModule = require('./modules/raw-sources-loader');
+
+module.exports = function VueStorefrontNuxtModule (moduleOptions) {
+  const defaultOptions = {
+    coreDevelopment: false,
+    performance : {
+      httpPush: true,
+      purgeCSS: {
+        enabled: false,
+        paths: [
+          '**/*.vue'
+        ]
+      }
+    },
+    useRawSource: {
+      dev: [],
+      prod: []
+    }
+  };
+
+  const options = merge(defaultOptions, moduleOptions);
+
+  // Add meta data
+  this.options.head.meta.push({
+    name: 'generator',
+    content: 'Vue Storefront 2'
+  });
+
+  log.info('Starting Vue Storefront Nuxt Module');
+
+  // Enable HTTP/2 push for JS files
+  if (options.performance.httpPush) {
+    this.options.render = merge(this.options.render, {
+      http2: {
+        push: true,
+        pushAssets: (request, response, publicPath, preloadFiles) => {
+          return preloadFiles
+            .filter(({ asType }) => asType === 'script')
+            .map(({ file, asType }) => `<${publicPath}${file}>; rel=preload; as=${asType}`);
+        }
+      }
+    });
+  }
+
+  // Context plugin
+  this.addPlugin(path.resolve(__dirname, 'plugins/context.js'))
+  log.success('Installed Vue Storefront Context plugin');
+
+  // SSR plugin
+  this.addPlugin(path.resolve(__dirname, 'plugins/ssr.js'));
+  log.success('Installed Vue Storefront SSR plugin');
+
+  // Logger plugin
+  this.addPlugin({
+    src: path.resolve(__dirname, 'plugins/logger.js'),
+    options: moduleOptions.logger || {}
+  });
+  log.success('Installed VSF Logger plugin');
+
+  // Context plugin
+  this.addPlugin(path.resolve(__dirname, 'plugins/e2e-testing.js'))
+  log.success('Installed Vue Storefront E2E testing plugin');
+
+  // i18n-cookies plugin
+  this.addPlugin({
+    src: path.resolve(__dirname, 'plugins/i18n-cookies.js'),
+    options: this.options.i18n
+  });
+  log.success('Installed Internationalization Cookies plugin');
+
+  // Composition API plugin
+  this.addModule('@nuxtjs/composition-api');
+  log.success('Installed nuxt Composition API Module');
+
+  // StorefrontUI module
+  if (fs.existsSync(resolveDependency('@storefront-ui/vue'))) {
+    storefrontUiModule.call(this, options);
+    log.success('Installed StorefrontUI Module');
+  }
+
+  // Performance module
+  performanceModule.call(this, options);
+  log.success('Installed Performance Module');
+
+  // Raw sources loader
+  rawSourcesModule.call(this, options);
+}
+
+module.exports.meta = require('../package.json')

package/lib/modules/performance.js

@@ -0,0 +1,31 @@
+const { merge } = require('lodash');
+
+function pushScripts() {
+  this.options.render = merge(this.options.render, {
+    http2: {
+      push: true,
+      pushAssets: (request, response, publicPath, preloadFiles) => {
+        return preloadFiles
+          .filter(({ asType }) => asType === 'script')
+          .map(({ file, asType }) => `<${publicPath}${file}>; rel=preload; as=${asType}`);
+      }
+    }
+  });
+}
+
+function loadPurgeCss(options) {
+  // PurgeCSS module should be installed after all other modules
+  this.nuxt.hook('modules:done', moduleContainer => moduleContainer.addModule([ 'nuxt-purgecss', options ]));
+}
+
+module.exports = function VueStorefrontPerformanceModule (options) {
+  const { httpPush, purgeCSS } = options.performance;
+
+  if (httpPush) {
+    pushScripts.call(this);
+  }
+
+  if (purgeCSS && purgeCSS.enabled) {
+    loadPurgeCss.call(this, purgeCSS);
+  }
+};

package/lib/modules/raw-sources-loader.js

@@ -0,0 +1,21 @@
+const log = require('../helpers/log');
+const isProduction = require('../helpers/isProduction');
+const resolveDependency = require('../helpers/resolveDependency');
+
+module.exports = function VueStorefrontPerformanceModule (options) {
+  const useRawSource = (package) => {
+    const pkgPath = resolveDependency(`${package}/package.json`);
+    const pkg = require(pkgPath);
+
+    if (pkg.module) {
+      this.extendBuild(config => {
+        config.resolve.alias[pkg.name + '$'] = resolveDependency(`${package}/${pkg.module}`);
+      });
+    }
+
+    this.options.build.transpile.push(package);
+    log.info(`Using raw source/ESM for ${pkg.name}`);
+  };
+
+  options.useRawSource[isProduction(options) ? 'prod' : 'dev'].map(package => useRawSource(package));
+};

package/lib/modules/storefront-ui.js

@@ -0,0 +1,18 @@
+const merge = require('../helpers/merge');
+
+// TODO: Create a separate nuxt module for storefront ui
+function loadStorefrontRawSources (options) {
+  const rawSources = [
+    '@storefront-ui/vue',
+    '@storefront-ui/shared'
+  ];
+
+  options.useRawSource = merge(options.useRawSource, {
+    dev: rawSources,
+    prod: rawSources
+  });
+}
+
+module.exports = function VueStorefrontPerformanceModule (options) {
+  loadStorefrontRawSources.call(this, options);
+};

package/lib/plugins/composition-api.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import VueCompositionApi from '@vue/composition-api';
+
+Vue.use(VueCompositionApi);

package/lib/plugins/context.js

@@ -0,0 +1,18 @@
+
+import { configureContext } from '@vue-storefront/core'
+import { useContext as useBaseContext } from '@nuxtjs/composition-api';
+
+const contextPlugin = (ctx, inject) => {
+  const sharedMap = new Map();
+
+  const useVSFContext = () => {
+    const { $vsf, ...context } = useBaseContext();
+
+    return { $vsf, ...context, ...$vsf }
+  }
+
+  configureContext({ useVSFContext });
+  inject('sharedRefsMap', sharedMap)
+};
+
+export default contextPlugin;

package/lib/plugins/e2e-testing.js

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+
+const e2eTestingPlugin = (ctx) => {
+  Vue.directive('e2e', {
+    bind: (element, binding) => {
+      const enabled = ctx.isDev || ctx.env.NUXT_ENV_E2E === true.toString();
+
+      return enabled && element.setAttribute(`data-e2e`, binding.value);
+    }
+  });
+};
+
+export default e2eTestingPlugin;

package/lib/plugins/i18n-cookies.js

@@ -0,0 +1,34 @@
+const { VSF_CURRENCY_COOKIE, VSF_COUNTRY_COOKIE } = require('@vue-storefront/core');
+
+const i18nCookiesPlugin = ({ $cookies }) => {
+  const i18n = <%= serialize(options) %>;
+
+  const settings = {
+    defaultLocale: i18n.defaultLocale || (i18n.locales.length && i18n.locales[0].code),
+    currency: i18n.currency || (i18n.currencies.length && i18n.currencies[0].name),
+    country: i18n.country || (i18n.countries.length && i18n.countries[0].name)
+  };
+
+  const missingFields = Object
+    .entries(settings)
+    .reduce((carry, [name, value]) => {
+      !value && carry.push(name);
+
+      return carry;
+    }, []);
+
+  if (missingFields.length) {
+    throw new Error(`Following fields are missing in the i18n configuration: ${ missingFields.join(', ') }`);
+  }
+
+  const cookieOptions = {
+    path: '/',
+    sameSite: 'lax',
+    expires: new Date(new Date().setFullYear(new Date().getFullYear() + 1)) // Year from now
+  };
+
+  !$cookies.get(VSF_CURRENCY_COOKIE) && $cookies.set(VSF_CURRENCY_COOKIE, settings.currency, cookieOptions);
+  !$cookies.get(VSF_COUNTRY_COOKIE) && $cookies.set(VSF_COUNTRY_COOKIE, settings.country, cookieOptions);
+};
+
+export default i18nCookiesPlugin;

package/lib/plugins/logger.js

@@ -0,0 +1,8 @@
+import { registerLogger } from '@vue-storefront/core'
+
+const loggerPlugin = (ctx) => {
+  const { verbosity, customLogger, ...args } = <%= serialize(options) %>;
+  registerLogger(customLogger || args, verbosity || 'error')
+};
+
+export default loggerPlugin;

package/lib/plugins/ssr.js

@@ -0,0 +1,31 @@
+import { configureSSR } from '@vue-storefront/core'
+import { ssrRef, getCurrentInstance, onServerPrefetch } from '@nuxtjs/composition-api';
+
+const hasRouteChanged = (ctx) => {
+  const { from } = ctx.$router.app.context;
+  const { current } = ctx.$router.history
+
+  if (!from) {
+    return false
+  }
+
+  return from.fullPath !== current.fullPath
+}
+
+const ssrPlugin = () => {
+  configureSSR({
+    vsfRef: ssrRef,
+    onSSR: (fn) => {
+      onServerPrefetch(fn);
+      if (typeof window !== 'undefined') {
+        const vm = getCurrentInstance();
+
+        if (hasRouteChanged(vm)) {
+          fn();
+        }
+      }
+    }
+  });
+};
+
+export default ssrPlugin;

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@vue-storefront/nuxt",
+  "version": "2.4.2",
+  "description": "",
+  "main": "lib/module.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Vue Storefront",
+  "license": "MIT",
+  "dependencies": {
+    "@nuxt/typescript-build": "^2.0.0",
+    "@vue/composition-api": "1.0.0-beta.21",
+    "@nuxtjs/composition-api": "0.17.0",
+    "@nuxtjs/style-resources": "^1.0.0",
+    "chalk": "^2.4.2",
+    "chokidar": "^3.3.1",
+    "consola": "^2.10.1",
+    "lodash": "^4.17.15",
+    "nuxt-purgecss": "^1.0.0"
+  },
+  "devDependencies": {
+    "@nuxt/types": "^0.7.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}