expeditaea 1.0.0

package/packages/vue-app/template/views/loading/nuxt.html

@@ -0,0 +1,59 @@
+<style>
+body, html, #<%= globals.id %> {
+  background: <%= (options.theme === 'dark' ? '#2F4A5F' : 'white') %>;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+#nuxt-loading {
+  animation: opacity 1s ease-in-out;
+  animation-fill-mode: forwards;
+  animation-delay: 1s;
+  opacity: 0;
+}
+#nuxt-loading .logo {
+  position: relative;
+  height: 166px;
+  width: 220px;
+}
+#nuxt-loading-status {
+  font-family: sans-serif;
+  font-weight: 500;
+  text-align: center;
+  color: <%= (options.theme === 'dark' ? 'white' : '#2F4A5F') %>;
+}
+#nuxt-loading-status.errored {
+  color: <%= (options.theme === 'dark' ? '#da6371' : '#D0021B') %>;
+}
+@keyframes opacity {
+  100% {
+    opacity: 1;
+  }
+}
+</style>
+
+<div id="nuxt-loading">
+  <svg class="logo" width="220" height="166" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(-18 -29)" fill="none" fill-rule="evenodd">
+      <path d="M0 176h67.883a22.32 22.32 0 0 1 2.453-7.296L134 57.718 100.881 0 0 176zM218.694 176H250L167.823 32 153 58.152l62.967 110.579a21.559 21.559 0 0 1 2.727 7.269z" />
+      <path d="M86.066 189.388a8.241 8.241 0 0 1-.443-.908 11.638 11.638 0 0 1-.792-6.566H31.976l78.55-138.174 33.05 58.932L154 94.882l-32.69-58.64C120.683 35.1 116.886 29 110.34 29c-2.959 0-7.198 1.28-10.646 7.335L20.12 176.185c-.676 1.211-3.96 7.568-.7 13.203C20.912 191.95 24.08 195 31.068 195h66.646c-6.942 0-10.156-3.004-11.647-5.612z" fill="#00C58E" />
+      <path d="M235.702 175.491L172.321 62.216c-.655-1.191-4.313-7.216-10.68-7.216-2.868 0-6.977 1.237-10.32 7.193L143 75.706v26.104l18.709-32.31 62.704 111.626h-23.845c.305 1.846.134 3.74-.496 5.498a7.06 7.06 0 0 1-.497 1.122l-.203.413c-3.207 5.543-10.139 5.841-11.494 5.841h37.302c1.378 0 8.287-.298 11.493-5.841 1.423-2.52 2.439-6.758-.97-12.668z" fill="#108775" />
+      <path d="M201.608 189.07l.21-.418c.206-.364.378-.745.515-1.139a10.94 10.94 0 0 0 .515-5.58 16.938 16.938 0 0 0-2.152-5.72l-49.733-87.006L143.5 76h-.136l-7.552 13.207-49.71 87.006a17.534 17.534 0 0 0-1.917 5.72c-.4 2.21-.148 4.486.725 6.557.13.31.278.613.444.906 1.497 2.558 4.677 5.604 11.691 5.604h92.592c1.473 0 8.651-.302 11.971-5.93zm-58.244-86.657l45.455 79.52H97.934l45.43-79.52z" fill="<%= (options.theme === 'dark' ? 'white' : '#2F4A5F') %>" fill-rule="nonzero" />
+    </g>
+  </svg>
+  <h3 id="nuxt-loading-status">Loading...</h3>
+</div>
+
+<script>
+  window.addEventListener('error', function () {
+    var e = document.getElementById('nuxt-loading-status');
+    if (e) {
+      e.innerHTML = 'An error occurred';
+      e.className += 'errored'
+    }
+  });
+  </script>

package/packages/vue-app/template/views/loading/pulse.html

@@ -0,0 +1,48 @@
+<style>
+body, html, #<%= globals.id %> {
+  background: <%= options.background %>;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  background-color: <%= options.color %>;
+
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}
+</style>
+
+<div class="spinner">
+  <div class="double-bounce1"></div>
+  <div class="double-bounce2"></div>
+</div>
+
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>

package/packages/vue-app/template/views/loading/rectangle-bounce.html

@@ -0,0 +1,74 @@
+<style>
+body, html, #<%= globals.id %> {
+  background: <%= options.background %>;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.spinner {
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div {
+  background-color: <%= options.color %>;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}
+</style>
+
+<div class="spinner">
+  <div class="rect1"></div>
+  <div class="rect2"></div>
+  <div class="rect3"></div>
+  <div class="rect4"></div>
+  <div class="rect5"></div>
+</div>
+
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>

package/packages/vue-app/template/views/loading/rotating-plane.html

@@ -0,0 +1,44 @@
+<style>
+body, html, #<%= globals.id %> {
+  background: <%= options.background %>;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  background-color: <%= options.color %>;
+
+  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+  animation: sk-rotateplane 1.2s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-rotateplane {
+  0% { -webkit-transform: perspective(120px) }
+  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+}
+
+@keyframes sk-rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+  } 50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+  } 100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }
+}
+</style>
+
+<div class="spinner"></div>
+
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>

package/packages/vue-app/template/views/loading/three-bounce.html

@@ -0,0 +1,61 @@
+<style>
+body, html, #<%= globals.id %> {
+  background: <%= options.background %>;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.spinner {
+  width: 70px;
+  text-align: center;
+}
+
+.spinner > div {
+  width: 18px;
+  height: 18px;
+  background-color: <%= options.color %>;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}
+</style>
+
+<div class="spinner">
+  <div class="bounce1"></div>
+  <div class="bounce2"></div>
+  <div class="bounce3"></div>
+</div>
+
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>

package/packages/vue-app/template/views/loading/wandering-cubes.html

@@ -0,0 +1,68 @@
+<style>
+body, html, #<%= globals.id %> {
+  background: <%= options.background %>;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.cube1, .cube2 {
+  background-color: <%= options.color %>;
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
+  animation: sk-cubemove 1.8s infinite ease-in-out;
+}
+
+.cube2 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+@-webkit-keyframes sk-cubemove {
+  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
+  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
+  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
+  100% { -webkit-transform: rotate(-360deg) }
+}
+
+@keyframes sk-cubemove {
+  25% {
+    transform: translateX(42px) rotate(-90deg) scale(0.5);
+    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
+  } 50% {
+    transform: translateX(42px) translateY(42px) rotate(-179deg);
+    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
+  } 50.1% {
+    transform: translateX(42px) translateY(42px) rotate(-180deg);
+    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
+  } 75% {
+    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
+    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
+  } 100% {
+    transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg);
+  }
+}
+</style>
+
+<div class="spinner">
+  <div class="cube1"></div>
+  <div class="cube2"></div>
+</div>
+
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>

package/packages/vue-app/test/__utils__/index.js

@@ -0,0 +1,73 @@
+import path from 'path'
+import { remove } from 'fs-extra'
+import consola from 'consola'
+import { getNuxtConfig, Nuxt, Builder } from '../../../../test/utils'
+
+const rootDir = path.resolve(__dirname, '..')
+
+export async function compileTemplate (template, destination, options = {}) {
+  if (arguments.length < 3) {
+    options = destination || {}
+    destination = undefined
+  }
+
+  const config = getNuxtConfig(options)
+
+  config.rootDir = rootDir
+  config.dev = false
+  config.test = false
+  config.server = false
+
+  const nuxt = new Nuxt(config)
+  const builder = new Builder(nuxt)
+
+  const templateContext = builder.createTemplateContext()
+
+  const multipleTemplates = Array.isArray(template)
+  if (!multipleTemplates) {
+    template = [template]
+  }
+
+  templateContext.templateFiles = template.map((template) => {
+    if (typeof template === 'string') {
+      return {
+        src: path.resolve(rootDir, '../template', template),
+        dst: path.join(rootDir, '.nuxt', destination || path.basename(template)),
+        custom: false
+      }
+    }
+
+    return {
+      src: path.resolve(rootDir, '../template', template.src),
+      dst: path.join(rootDir, '.nuxt', template.dst),
+      custom: template.custom
+    }
+  })
+
+  try {
+    // clear all destinations
+    await Promise.all(templateContext.templateFiles.map(({ dst }) => remove(dst)))
+
+    await builder.compileTemplates(templateContext)
+
+    if (multipleTemplates) {
+      return templateContext.templateFiles.map(template => template.dst)
+    }
+
+    const [template] = templateContext.templateFiles
+    return template.dst
+  } catch (err) {
+    consola.error('Could not compile template', err.message, template)
+    return false
+  }
+}
+
+export function importComponent (componentPath) {
+  return import(componentPath).then(m => m.default || m)
+}
+
+export const vmTick = (vm) => {
+  return new Promise((resolve) => {
+    vm.$nextTick(resolve)
+  })
+}

package/packages/vue-app/test/nuxt-link.client.prefetch.test.js

@@ -0,0 +1,153 @@
+/**
+ * @jest-environment jsdom
+ */
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import { vmTick, compileTemplate, importComponent } from './__utils__'
+
+/* eslint-disable no-console */
+describe('nuxt-link prefetch', () => {
+  beforeAll(() => {
+    jest.useFakeTimers()
+
+    jest.spyOn(console, 'warn')
+    jest.spyOn(console, 'error')
+  })
+
+  afterAll(() => jest.restoreAllMocks())
+
+  test('when router.prefetchLinks is set to false, link with no prop should not be prefetched',
+    async () => {
+      const compiledTemplatePath = await compileTemplate(
+        'components/nuxt-link.client.js',
+        'nuxt-link.client.prefetch.0.js',
+        { router: { prefetchLinks: false } }
+      )
+
+      const Component = await importComponent(compiledTemplatePath)
+      const observe = jest.spyOn(Component.methods, 'observe')
+      Component.extends = RouterLinkStub
+
+      const wrapper = mount(Component, {
+        propsData: { to: '/link' }
+      })
+
+      jest.runAllTimers()
+      await vmTick(wrapper.vm)
+
+      expect(console.warn).not.toHaveBeenCalled()
+      expect(console.error).not.toHaveBeenCalled()
+
+      expect(wrapper.props('prefetch')).toBe(false)
+      expect(wrapper.props('noPrefetch')).toBe(false)
+      expect(observe).not.toHaveBeenCalled()
+    })
+
+  test('when router.prefetchLinks is set to false, link with prefetch prop set to true should be prefetched',
+    async () => {
+      const compiledTemplatePath = await compileTemplate(
+        'components/nuxt-link.client.js',
+        'nuxt-link.client.prefetch.1.js',
+        { router: { prefetchLinks: false } }
+      )
+
+      const Component = await importComponent(compiledTemplatePath)
+      const observe = jest.spyOn(Component.methods, 'observe')
+      Component.extends = RouterLinkStub
+
+      const wrapper = mount(Component, {
+        propsData: { to: '/link', prefetch: true }
+      })
+
+      jest.runAllTimers()
+      await vmTick(wrapper.vm)
+
+      expect(console.warn).not.toHaveBeenCalled()
+      expect(console.error).not.toHaveBeenCalled()
+
+      expect(wrapper.props('prefetch')).toBe(true)
+      expect(wrapper.props('noPrefetch')).toBe(false)
+      expect(observe).toHaveBeenCalled()
+    })
+
+  test('when router.prefetchLinks is set to true (default), link with no prop should be prefetched',
+    async () => {
+      const compiledTemplatePath = await compileTemplate(
+        'components/nuxt-link.client.js',
+        'nuxt-link.client.prefetch.2.js',
+        {}
+      )
+
+      const Component = await importComponent(compiledTemplatePath)
+      const observe = jest.spyOn(Component.methods, 'observe')
+      Component.extends = RouterLinkStub
+
+      const wrapper = mount(Component, {
+        propsData: { to: '/link' }
+      })
+
+      jest.runAllTimers()
+      await vmTick(wrapper.vm)
+
+      expect(console.warn).not.toHaveBeenCalled()
+      expect(console.error).not.toHaveBeenCalled()
+
+      expect(wrapper.props('prefetch')).toBe(true)
+      expect(wrapper.props('noPrefetch')).toBe(false)
+      expect(observe).toHaveBeenCalled()
+    })
+
+  test('when router.prefetchLinks is set to true (default), link with prefetch prop set to false should not be prefetched',
+    async () => {
+      const compiledTemplatePath = await compileTemplate(
+        'components/nuxt-link.client.js',
+        'nuxt-link.client.prefetch.3.js',
+        {}
+      )
+
+      const Component = await importComponent(compiledTemplatePath)
+      const observe = jest.spyOn(Component.methods, 'observe')
+      Component.extends = RouterLinkStub
+
+      const wrapper = mount(Component, {
+        propsData: { to: '/link', prefetch: false }
+      })
+
+      jest.runAllTimers()
+      await vmTick(wrapper.vm)
+
+      expect(console.warn).not.toHaveBeenCalled()
+      expect(console.error).not.toHaveBeenCalled()
+
+      expect(wrapper.props('prefetch')).toBe(false)
+      expect(wrapper.props('noPrefetch')).toBe(false)
+      expect(observe).not.toHaveBeenCalled()
+    })
+
+  test('when router.prefetchLinks is set to true (default), link with noPrefetch prop should not be prefetched',
+    async () => {
+      const compiledTemplatePath = await compileTemplate(
+        'components/nuxt-link.client.js',
+        'nuxt-link.client.prefetch.4.js',
+        {}
+      )
+
+      const Component = await importComponent(compiledTemplatePath)
+      const observe = jest.spyOn(Component.methods, 'observe')
+      Component.extends = RouterLinkStub
+
+      const wrapper = mount(Component, {
+        propsData: { to: '/link', noPrefetch: true }
+      })
+
+      jest.runAllTimers()
+      await vmTick(wrapper.vm)
+
+      expect(console.warn).not.toHaveBeenCalled()
+      expect(console.error).not.toHaveBeenCalled()
+
+      expect(wrapper.props('prefetch')).toBe(true)
+      expect(wrapper.props('noPrefetch')).toBe(true)
+      expect(observe).not.toHaveBeenCalled()
+    })
+})
+/* eslint-enable no-console */