npm dependencies

fixup! npm dependencies

package.json

@@ -14,23 +14,30 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "animate.css": "^3.7.0",
-    "chart.js": "2.5.0",
-    "eagle.js": "^0.4.1",
-    "highlight.js": "^9.12.0",
-    "vue": "^2.1.10",
-    "vue-router": "^2.2.0"
+    "animate.css": "^4.1.1",
+    "chart.js": "2.9.4",
+    "eagle.js": "^0.6.1",
+    "highlight.js": "^10.2.1",
+    "vue": "^2.6.12",
+    "vue-router": "^3.4.7"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.4",
-    "@vue/cli-plugin-eslint": "^3.0.4",
-    "@vue/cli-service": "^3.0.4",
-    "@vue/eslint-config-standard": "^3.0.4",
-    "node-sass": "^4.9.3",
-    "pug": "^2.0.3",
+    "@vue/cli-plugin-babel": "^4.5.8",
+    "@vue/cli-plugin-eslint": "^4.5.8",
+    "@vue/cli-service": "^4.5.8",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.11.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^7.1.0",
+    "node-sass": "^4.14.1",
+    "pug": "^3.0.0",
     "pug-plain-loader": "^1.0.0",
-    "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.5.17"
+    "sass-loader": "^10.0.3",
+    "vue-template-compiler": "^2.6.12"
   },
   "engines": {
     "node": ">= 4.0.0",

src/Home.vue

@@ -24,7 +24,8 @@
           .embedded-slideshow-container
             component(:is="slideshow", :embedded='true',
                       :keyboardNavigation='false',
-                      :mouseNavigation='false')
+                      :mouseNavigation='false',
+                      )
         .caption
           h3 {{slideshow.infos.title}}
           p.thumbnail-description {{slideshow.infos.description}}
@@ -36,7 +37,9 @@ import slideshows from './slideshows/slideshows.js'
 export default {
   data: function () {
     return {
-      slideshows: slideshows.list
+      slideshows: slideshows.list,
+      childWindow: null,
+      parentWindow: null
     }
   },
   mounted: function () {

src/main.js

@@ -3,9 +3,9 @@ import Router from 'vue-router'
 import App from './App'
 import Home from './Home'
 
-import Eagle, { Options } from 'eagle.js'
-import 'eagle.js/dist/eagle.css'
+import Eagle, { Options, Presenter, CodeBlock, CodeComment, Toggle, RadioButton, Timer, TriggeredMessage, Modal, ImageSlide } from 'eagle.js'
 import hljs from 'highlight.js'
+import 'animate.css/animate.compat.css'
 
 import slideshows from './slideshows/slideshows.js'
 /* eslint-disable no-new */
@@ -14,8 +14,17 @@ Vue.use(Eagle)
 Vue.use(Router)
 Vue.config.productionTip = false
 Options.hljs = hljs
+Eagle.use(Presenter)
+Eagle.use(CodeBlock)
+Eagle.use(CodeComment)
+Eagle.use(Toggle)
+Eagle.use(RadioButton)
+Eagle.use(Timer)
+Eagle.use(TriggeredMessage)
+Eagle.use(Modal)
+Eagle.use(ImageSlide)
 
-let routes = []
+const routes = []
 slideshows.list.forEach(function (slideshow) {
   routes.push({
     path: '/' + slideshow.infos.path,
@@ -24,7 +33,7 @@ slideshows.list.forEach(function (slideshow) {
 })
 routes.push({ path: '*', component: Home })
 
-let router = new Router({
+const router = new Router({
   routes
 })
 

src/slideshows/eagle-recipes/DemoSlideshow.vue

@@ -74,10 +74,10 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slideshow } from 'eagle.js'
 
 export default {
-  mixins: [eagle.slideshow],
+  mixins: [Slideshow],
   infos: {
     title: 'Demo recipes',
     description: 'Demos for Eagle recipes',

src/slideshows/eagle-recipes/EagleRecipes.vue

@@ -44,9 +44,9 @@
           The <script> tag loads Eagle and specifies options:
         eg-code-block(lang='html').
           <script>
-          import eagle from 'eagle.js'
+          import  { Slideshow } from 'eagle.js'
           export default {
-            mixins: [ eagle.slideshow ],
+            mixins: [Slideshow],
             infos: {
               title: 'Your First Slideshow',
               description: 'A boilerplate to get you started',
@@ -198,19 +198,19 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slideshow, Slide } from 'eagle.js'
 import DemoSlideshow from './DemoSlideshow'
 
 var TransitionedSlide = {
-  mixins: [eagle.slide],
+  mixins: [Slide],
   props: {
     enter: { default: 'slideInRight' },
     leave: { default: 'slideOutLeft' }
   }
 }
 
 export default {
-  mixins: [eagle.slideshow],
+  mixins: [Slideshow],
   data: function () {
     return {
       fullPageWidth: null,

src/slideshows/first-slideshow/FirstSlideshow.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slideshow } from 'eagle.js'
 export default {
-  mixins: [ eagle.slideshow ],
+  mixins: [Slideshow],
   infos: {
     // These infos appear on the home page, below the slideshow's thumbnail
     title: 'Your First Slideshow',

src/slideshows/introducing-eagle/AwesomeEmbeddedSlideshow.vue

@@ -39,12 +39,14 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slideshow } from 'eagle.js'
 import ExampleImageSlideshow from './ExampleImageSlideshow'
 
 export default {
-  mixins: [eagle.slideshow],
+  mixins: [Slideshow],
   props: {
+    childWindow: null,
+    parentWindow: null,
     preference: { default: 'baby bunnies' },
     username: { default: 'Tracy' }
   },

src/slideshows/introducing-eagle/AwesomeInsertedSlide.vue

@@ -50,7 +50,7 @@ eg-transition(:enter='enter', :leave='leave')
 
 <script>
 import AwesomeEmbeddedSlideshow from './AwesomeEmbeddedSlideshow'
-import eagle from 'eagle.js'
+import { Slide } from 'eagle.js'
 export default {
   props: {
     steps: { default: 14 },
@@ -60,7 +60,7 @@ export default {
   components: {
     'awesome-embedded-slideshow': AwesomeEmbeddedSlideshow
   },
-  mixins: [eagle.slide]
+  mixins: [Slide]
 }
 </script>
 <style lang='scss' scoped>

src/slideshows/introducing-eagle/ExampleImageSlideshow.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slideshow } from 'eagle.js'
 
 export default {
-  mixins: [eagle.slideshow],
+  mixins: [Slideshow],
   props: {
     preference: { default: 'funny kitties' }
   },

src/slideshows/introducing-eagle/FiguresSlide.vue

@@ -22,7 +22,7 @@ eg-transition(:enter='enter', :leave='leave')
                   :height='250')
 </template>
 <script>
-import eagle from 'eagle.js'
+import { Slide } from 'eagle.js'
 import chart from './Chart'
 export default {
   components: { chart },
@@ -104,7 +104,7 @@ export default {
       }
     }
   },
-  mixins: [eagle.slide]
+  mixins: [Slide]
 }
 </script>
 <style lang='scss' scoped>

src/slideshows/introducing-eagle/IntroducingEagle.vue

@@ -217,10 +217,10 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slideshow } from 'eagle.js'
 
 export default {
-  mixins: [eagle.slideshow],
+  mixins: [Slideshow],
   infos: {
     title: 'Introducing Eagle.js',
     description: 'Watch this first if you are new to Eagle.js',
@@ -234,6 +234,8 @@ export default {
   },
   data: function () {
     return {
+      childWindow: null,
+      parentWindow: null,
       username: 'Tracy',
       preference: 'baby bunnies',
       preferences: [
@@ -282,9 +284,9 @@ export default {
         'baby bunnies': 'Yeeeeah my favorite too !',
         'fluffy puppies': 'Wow so original.',
         'funny kitties': 'Good for you ' + this.username + '.',
-        'Theming': 'Ok ' + this.username + ', whatever.',
+        Theming: 'Ok ' + this.username + ', whatever.',
         'Slide reuse': 'Seriously ' + this.username + ' you <em>want</em> to see this.',
-        'Interactivity': 'Well that\'s this slide, ' + this.username +
+        Interactivity: 'Well that\'s this slide, ' + this.username +
                          '. <br /> A bit too late to unsee it, heh ?'
       }[name]
     }

src/slideshows/introducing-eagle/components/EndCredits.vue

@@ -21,7 +21,7 @@ export default {
   data: function () {
     return {
       categories: {
-        'Crew': [
+        Crew: [
           {
             name: this.username,
             role: 'Internet Person'
@@ -39,7 +39,7 @@ export default {
             role: 'Author'
           }
         ],
-        'Software': [
+        Software: [
           {
             name: 'Vue.js',
             role: 'Front-end engine'
@@ -65,7 +65,7 @@ export default {
             role: '(Bad) highlighting'
           }
         ],
-        'Assets': [
+        Assets: [
           {
             name: 'Irfan iLias',
             role: 'Background Pattern'

src/slideshows/themes-slideshow/ThemesSlideshow.vue

@@ -42,9 +42,9 @@
         h3 Your bad taste is the limit
 </template>
 <script>
-import eagle from 'eagle.js'
+import { Slideshow } from 'eagle.js'
 export default {
-  mixins: [eagle.slideshow],
+  mixins: [Slideshow],
   infos: {
     title: 'Themes Slideshows',
     description: 'You can change everything !',

vue.config.js

@@ -1,4 +1,12 @@
 module.exports = {
   lintOnSave: 'error',
   // runtimeCompiler: process.env.NODE_ENV !== 'production'
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(args => {
+        args.compilerOptions.whitespace = 'preserve'
+      })
+  }
 }