A hackable slideshow framework built with Vue.js

Overview

eagle.js

Eagle.js - A slideshow framework for hackers

npm version Build Status

  • Slideshow system built on top of the Vue.js
  • Supports animations, themes, interactive widgets (for web demos)
  • Easy to reuse components, slides and styles across presentations
  • Lightweight core and various helpful extensions
  • All APIs public, maximum hackability

For a quick tour, see this slideshow:

screenshot

Most of all, eagle.js aims at offering a simple and very hackable API so you can get off the beaten tracks and craft the slideshows you really want.

Here is what the eagle.js syntax looks like (Example here are using Pug, but you can still use plain HTML):

.eg-slideshow
    slide
      h1 My slideshow
      h4 By Zulko

    slide
      h3 Title of this slide
      p  Paragraph 1.
      p  Paragraph 2.

    slide(:steps=3)
      h3 Slide with bullet points
      p(v-if='step >= 2') This will appear first.
      p(v-if='step >= 3') This will appear second.

If you are not familiar with Vue.js you will find eagle.js harder to use than, say, Reveal.js, but on the long term eagle.js makes it easier to organize your slides and implement new ideas.

Templates

Get started

You must have Node.js/npm installed to use eagle.js.

Then the best to get started is to clone the example repo:

$ git clone https://github.com/Zulko/eaglejs-demo.git

Install the dependencies (they will only be downloaded in a local folder):

$ cd eaglejs-demo
$ npm install

Then run npm run dev to start the server, and open your browser at http://localhost:8080 to see the slideshows.

To start editing, click on My first slideshow to display this slideshow, then open the file eagle/src/slideshows/first-slideshow/FirstSlideshow.vue and change the content of the first slide. Observe the changes happen automatically in your browser. The only times you need to refresh the page is when you add remove or add slides to the presentation.

Install

Install by npm

npm install --save eagle.js

Or install by yarn

yarn add eagle.js

Usage

Eagle.js is a vue plugin. You need to use eagle.js in your vue app's main file.
New in 0.3: animate.css is now a peer dependency. User need install their own version.
New in 0.5: By default eagle.js doesn't export all plugins but only core components. You have to explicitly use your widgets or plugins from now on. See more on extensions section.
New in 0.6: You do not need to explicitly import the default style anymore.

import Eagle from 'eagle.js'
// import animate.css for slide transition 
import 'animate.css'

Vue.use(Eagle)

Basic idea

Eagle.js's basic components are slideshow and slide. You use slideshow as mixin to write slideshow component, which could include multiple slides. A very basic Single File Component for slideshow would look like this:

<template lang="pug">
    slide(:steps="4")
      p(v-if="step >= 1")
        | {{step}}
      p(v-if="step >= 2")
        | {{step}}
      p(v-if="step >= 3")
        | {{step}}
      p(v-if="step >= 4")
        | {{step}}
</template>

<script>
import { Slideshow } from 'eagle.js'
export default {
  mixins: [Slideshow]
}
</script>

We use slideshow's data step to control the conditional rendering in slide, thus slideshow is used as a mixin. Also by this way eagle.js exposes the maximum hackability to users.

slideshow

slideshow can only be used as mixin.

Note: For vue mixins, template cannot be extended. slideshow needs one HTML element to wrap around your following slides because there are events registered to slideshow after component mounted. We recommend you to wrap your template in a eg-slideshow div for default styling. Also, do not add conditional rendering on slideshow (for example, add v-if="active" on your slideshow template) as it would break slideshow's events registration as well.

You can configure your authored slideshow component with these properties:

Property Default Description
firstSlide 1
lastSlide null
startStep 1
mouseNavigation true Navigate with mouse click or scroll event
keyboardNavigation true Navigate with keyboard
embedded false
inserted false
onStartExit null event callback for exiting slideshow through first slide
onEndExit null event callback for exiting slideshow through last slide
backBySlide false slideshow navigates back by step by default
repeat false go to first slide automatically when reaching the last one
zoom true alt + click can zoom on slide

More explaination on backBySlide:

By default, slideshow navigates back by step, but you can change the behavior to be slide based: so if you go back to the previous slide, it lands on the first step instead of last step. See a comparison:

Back by Step: Back by slide:
back by step back by slide

Please note, if you have any embedded slideshows, you have to use default back mode, because for now parent slideshow cannot know how many steps child slideshow backs. This is a feature to be implemented in the future.

Nested slideshow

A nested slideshow can be an inserted one or an embedded one. If the nested slideshow's parent is a slideshow, then it's an inserted slideshow; if the parent is a slide, then it's an embedded slideshow. An embedded slideshow would have its own events and embedded styles, while an inserted slideshow does not. Do not mix them up: a embedded slideshow in a slideshow will replace its parent slideshow, while a inserted slideshow inside a slide will simply not work.

slide

slide can be used both as mixin or component. If your want to author a complex slide, writing it as a seperated SFC with slide mixin would really help. Including the following template(pug) as wrapper in your slide component to keep the default style:

eg-transition(:enter='enter', :leave='leave')
  .eg-slide(v-if='active')
    .eg-slide-content
      // Your own markup...

You can configure slide with these properties:

Property Default Description
skip false
enter null Default enter animation
enterPrev null Enter animation for prev direction
enterNext null Enter animation for next direction
leave null Default leave animation
leavePrev null Leave animation for prev direction
leaveNext null Leave animation for next direction
steps 1 Total steps for this slide
mouseNavigation true Navigate with mouse click or scroll event
keyboardNavigation true Navigate with keyboard

enterPrev, enterNext, leavePrev and leaveNext provides flexibility if you want to customize the animation for prev/next direction. If set to null they will use default enter and leave styles.

Note: enter and leave must be set in pairs. Don't only set one property, because slide has two directions to move: prev/next, and both directions needs animations. We recommend either you set animation for all your slide on both enter and leave, or don't set any at all.

eg-transition

Under the hood, eg-transition is just vue's transition that supports animate.css: you can use animate.css's class name for enter and leave property and it just works. All eagle.js's transition effects, including slide, happen with this component, and you can use it just like using vue's transition.

Extensions

Starting from 0.5 we introduced extensions to eagle.js. It includes two categories, namely widgets and plugins:

  1. Widgets are Vue components that can be directly used in a slide.
  2. Plugins are used in slideshow to enhance slide globally.

Both widgets and plugins have the same interface to use, just like how Vue uses plugins, for example:

// plugin
Eagle.use(Zoom, {scale: 2})
// Widget
Eagle.use(CodeBlock)

Widgets

Eagle.js ships several useful widgets that can be used in your slide:

  1. eg-modal
  2. eg-code-block (code highlighted by highlight.js)
  3. eg-code-comment
  4. eg-toggle
  5. eg-radio-button
  6. eg-triggered-message

Using widgets is really simple

import Eagle, { Modal, CodeBlock } from 'eagle.js'

Eagle.use(Modal)
Eagle.use(CodeBlock)

// You can still do this, which eagle does the same under the hood
// Vue.component(Modal.name, Modal)
// Vue.component(CodeBlock.name, CodeBlock)

Widgets' name follows the same rule: uppercase for importing, eg prefixed lowercase connected with dash in HTML. See more of their usage in the demo project.

New in 0.3: highlight.js is not a dependency anymore, so if you need to use eg-code-block, you need to install your own version of highlight.js, then specifiy it in your main.js:

// import your own highlight.js(only for javascript) 
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
// then pass it to eagle
import { Options } from 'eagle.js'
Options.hljs = hljs

This way drastically decrease eagle.js's package size and user could manage their own highlight.js version.

Presenter Plugin

You can use presenter plugin to enable presenter mode:

// first, use plugin in your entry file
import Eagle, {Presenter} from eagle.js

Eagle.use(Presenter, {
  presenterModeKey: 'a' // default is p
})

// second, in your slideshow, declare two `data` property
{
  data: function () {
    return {
      childWindow: null,
      parentWindow: null,
      // .. the rest of your data
    }
  }
}

Press your configured button would toggle presenter mode: you have two windows that share control with each other. Enabling presenter mode gives user two addition data for slideshow: parentWindow and childWindow. For example:

.eg-slideshow
  slide
    p Eagle.is is awesome!
    p(v-if="parentWindow") I can be a note!
    p(v-if="childWindow") I can be a note too!

It might be counter-intuitive that (v-if="parentWindow") is actually child window. It's because it means this window has a parent window, thus making itself a child window. But it is really just user's preference to put notes in either window, as two windows are almost functionally identical, except only parent window could close persenter mode.

Zoom Plugin

You can use zoom plugin to enable zoom mode:

import Eagle, {Zoom} from eagle.js

Eagle.use(Presenter, {
  scale: 1 // default is 2
})

Option+Click (Alt+click on non-Mac) would zoom in and out.

Themes

For minimum working style, you need to wrap your slideshow template in a eg-slideshow container. Eagle.js also has two themes for now: argume and gourmet. You can import theme style instead of default one to use them:

// in your main.js
import 'eagle.js/dist/themes/gourmet/gourmet.css'

To make theme style work, in your slideshow you should also have a wrapper with theme class, for example if you are using gourmet theme:

<div class="eg-theme-gourmet">
  <div class="eg-slideshow">
    ...
  </div>
</div>

Advanced usages

API

If you want to customize eagle.js, most likely you will work on slideshow component. In this case, We recommend you to read through slideshow's source code to get a better understanding of how eagle.js works. Because slideshow works as a vue mixin, all data and method will follow vue's option merging rule. If you are not sure about whether you overwrite eagle.js's API, you can put your functions in afterMounted, which eagle.js exposes explicitly for users.

slideshow's mostly used methods are nextStep, previousStep, nextSlide, previousSlide, which are pretty self-explanatory.

Mobile Support

Eagle.js supports basic mouse, keyboard and touch event, but doesn't support any advanced mobile gestures, like 'swipe'. Still, it is very easy to add mobile support with a well-tested library, like hammer.js.

In your slideshow component's mounted lifecycle hook,

mounted: {
  // You can also register to this.$el if you want
  // to control the gesture only on your slideshow component
  const hammer = new Hammer(window)
  hammer.on('swiperight', () => {
    this.previousStep()
  })
  hammer.on('swipeleft', () => {
    this.nextStep()
  })
}

Permalinks

Eagle.js does not comes with permalinks implementation, because eagle.js does not assume your usage with it. Using eagle.js as a completely standalone slideshow, like reveal.js or Remark, or as a component inserted into your routes, permalinks can get quite different. What's more, vue-router is not a dependency for eagle.js. So it's not a 'battery included' situtation. However, it is fairly easy to implement your own.

The most common implementation for permalinks is to use hashbang in URLs. You can achieve with with vue-router's hash mode, or even better, with history mode, to get rid of the ugly hashbang. Also with vue-router, it gives your more flexibility and more granularity control.

For example, if we are using Eagle.js as a standalone application. In our router file:

const router = new VueRouter({
  routes: [
    {
      path: '/:slide/:step',
      component: MySlideshow
    }
  ]
})

And inside a MySlideshow, add watchers to update URL when slides changes, and update slides when URL changes:

 ....
  methods: {
    ....
     updateSlides: function () {
      this.currentSlideIndex = +this.$route.params.slide
      this.$nextTick(() => {
        this.step = +this.$route.params.step
      })
    },
    updateURL: function () {
      this.$router.push(`/${this.currentSlideIndex}/${this.step}`)
    }
  },
  watch: {
    '$route': 'updateSlides',
    step: 'updateURL',
    currentSlideIndex: 'updateURL'
  }

Demo

Code splitting

Intuitively, writing your slide components and then using Vue's async component by dynamically importing slide components in your slideshow sounds like a perfect solution, unfortunately this won't work, as slideshow needs all its $children to be properly initialized. Currently, if you really need to do code splitting, you can consider splitting your slideshow in different routes and lazy-loading them.

Frequently Asked Questions

  • (Vue-CLI v.4+) The white-spaces in my code are not preserved by the CodeBlock widget, how can I fix it?

The way Vue-CLI treats white-spaces has changed in the version 4. If you use Vue-CLI to create your slideshow, you will need to add the following configuration in your vue.config.js file (see issue#90).

// vue.config.js
module.exports = {
    chainWebpack: config => {
      config.module
        .rule('vue')
          .use('vue-loader')
            .tap(args => {
              args.compilerOptions.whitespace = 'preserve'
            })
    }
  }

Contribute

Eagle.js is an open source framework originally written by Zulko and released on Github under the ISC licence. Everyone is welcome to contribute!

Below are a few ideas that deserve more attention in the future:

  • Bundler to make standalone HTML presentations
  • PDF export?
  • Themes
  • Better docs? (What do JavaScript people use to write docs?)

Development

Eagle.js uses storybook for development:

$ git clone https://github.com/Zulko/eagle.js.git
$ npm install
$ npm run storybook

Maintainers

  1. Zulko(owner)
  2. Yao Ding
Comments
  • Trigger reload of slide container when adding slides dynamically

    Trigger reload of slide container when adding slides dynamically

    Hey there,

    I've currently implemented a basic slideshow with various different slides. My slides are stored in an array called active slides and are iterated as shown in the following example:

    slide(v-for="(slide, index) in activeSlides"...

    Everything works fine and slides are rendered successfully. How ever I want do add new slides dynamically to my presentation so I decided to add them to my activeSlide array. Unfortunately eagle.js does not show the newly added slides. I'm adding the slides in my mounted method as following:

    mounted() {
            setInterval(() => {
                this.nextStep();
            }, 5000);
    
            Vue.http
                .get('/allSlides')
                .then(
                    (response) => {
                        this.fillActiveArray(response.body);
                    },
                    (error) => {
                        console.log(error);
                    },
                );
    

    I'm successfully retrieving the slides from the server but my array is not update and the slides are not rendered successfully. Documentation says:

    The only times you need to refresh the page is when you add remove or add slides to the presentation.

    How can I trigger this refresh? Or are you referring to an entire site refresh? If I refresh my entire site it wont have any effects though because my activeSlide array will be re initialized and I'll receive the same state as before. Any hints on how this is supposed to work would be highly appreciated! :)

    question 
    opened by raLaaaa 13
  • Adding slides dynamically with v-for

    Adding slides dynamically with v-for

    I have a case where I need to display slides from an array with v-for.

    If I have the array in component's data function, everything works fine (seems like slides are initialized when the slideshow is mounted).

    However, if my array is empty when the slideshow is mounted, and later changed (via Vuex), then I get the following error:

    [Vue warn]: Error in mounted hook: "TypeError: Cannot set property 'step' of undefined"

    Is it possible to render slides with v-for if the data is not yet available when component is mounted?

    question 
    opened by moteey 11
  • Missing CSS Dependencies

    Missing CSS Dependencies

    Under Usage, the documentation says to import 'eagle.js/dist/eagle.css' into your main.js file. I did this and don't see any styles applied.

    I installed eagle.js via npm (yarn add eagle.js) into a project bootstrapped with vue init webpack.

    Also, the documentation mentions that eagle supports animate.css transitions. Is animate.css included within eagle.css or is it a separate dependency that should be documented to be manually added?

    opened by aminimalanimal 9
  • [Vue warn]: The computed property

    [Vue warn]: The computed property "active" is already defined in data.

    This is my setup:

    <template>
      <div>
        <slide :steps=3>
          <h1>Test</h1>
          <p v-if="step >= 2">Test</p>
          <p v-if="step >= 3">Test</p>
        </slide>
    
        <slide>
          Test!
        </slide>
      </div>
    </template>
    
    <script>
      import eagle from 'eagle.js'
    
      export default {
        mixins: [eagle.slideshow]
      }
    </script>
    

    And I get this warning:

    vue.common.js?e881:436 [Vue warn]: The computed property "active" is already defined in data.

    found in

    ---> at /app/src/Root.vue at /app/src/App.vue

    opened by ndabAP 9
  • Throttle/debounce needed

    Throttle/debounce needed

    Just tested on chrome, mac os with Apple Magic Mouse. The scroll here is very sensitive and with one, 'normal' finger swiper i moved all slides. I needed to use keyboard to see anything from demos ;)

    bug help wanted 
    opened by lkostrowski 9
  • nuxt babel-runtime-error

    nuxt babel-runtime-error

    Getting this error when tyring to use nuxt:

    This dependency was not found:

    • babel-runtime/core-js/object/assign in ./node_modules/eagle.js/dist/eagle.es.js

    sombody had a similar isssue and knows how to fix it?

    opened by rollakal 7
  • Suggestion: make it easier to only include some components

    Suggestion: make it easier to only include some components

    As the title says — currently the webpack bundle when using default eagle.js becomes quite big (I think mine jumped from ~90kb to ~700kb). The biggest culprit is the highlight.js dependency but ideally any component besides the main slideshow and slide component should only be included if explicitly imported/used.

    enhancement 
    opened by larsenwork 7
  • Add CommonJS build: Bug? Unexpected token {

    Add CommonJS build: Bug? Unexpected token {

    Using it with Nuxt (with server side rendering turned off for the plugin) and I'm getting this error when I reload a page:

    { /Users/andreaslarsen/Git/larsenwork.github.io/node_modules/eagle.js/dist/eagle.js:8
    import { throttle } from 'lodash';
           ^
    
    SyntaxError: Unexpected token {
        at new Script (vm.js:74:7)
        at createScript (vm.js:246:10)
        at Object.runInThisContext (vm.js:298:10)
        at Module._compile (internal/modules/cjs/loader.js:670:28)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
        at Module.load (internal/modules/cjs/loader.js:612:32)
        at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
        at Function.Module._load (internal/modules/cjs/loader.js:543:3)
        at Module.require (internal/modules/cjs/loader.js:650:17)
        at require (internal/modules/cjs/helpers.js:20:18)
        at r (/Users/andreaslarsen/Git/larsenwork.github.io/node_modules/vue-server-renderer/build.js:8330:16)
        at Object.<anonymous> (server-bundle.js:3613:18)
        at __webpack_require__ (webpack:/webpack/bootstrap 3d086a4db7f344e8b701:25:0)
        at Object.67 (pages/talks/piter.vue?6872:1:0)
        at __webpack_require__ (webpack:/webpack/bootstrap 3d086a4db7f344e8b701:25:0)
        at Object.49 (pages/talks/piter.vue:1:0) statusCode: 500, name: 'SyntaxError' }
    

    The vue file looks like this:

    <template>
      <div class="c-presentation eg-slideshow">
        <slide :steps="4">
          <p v-if="step >= 1">{{ step }}</p>
          <p v-if="step >= 2">{{ step }}</p>
          <p v-if="step >= 3">{{ step }}</p>
          <p v-if="step >= 4">{{ step }}</p>
        </slide>
      </div>
    </template>
    
    <script>
    import eagle from 'eagle.js'
    export default {
      mixins: [eagle.slideshow],
    }
    </script>
    

    and I'm registering the plugin like this

    import Vue from 'vue'
    import Eagle from 'eagle.js'
    
    Vue.use(Eagle)
    

    and then like this in nuxt config

      plugins: [
        { src: '~/plugins/eagle', ssr: false },
      ],
    
    enhancement question 
    opened by larsenwork 7
  • Can I become a maintainer?

    Can I become a maintainer?

    @Zulko I have been trying to find your contact but failed to do so, thus I open this issue hoping you could grant my permission to become a maintainer for this project and also the demo project.

    I have been actively contributing to this project (issue 18 23 24 25 26 27 28) and also using Vue on work. I believe I could help other people make better use of this wonderful project.

    Thank you!

    opened by yaodingyd 7
  • swipe support for mobile

    swipe support for mobile

    Hi! Looks like a great project, but when I opened a deck on my phone, it doesn't work. it suggests i use ctrl-arrow for navigation.

    is there an example of using hammerJS or other tap/touch events to swipe for mobile?

    enhancement 
    opened by dcsan 7
  • Check if click event came from keyboard  #82

    Check if click event came from keyboard #82

    This is a proposed fix for a click event being emitted by keyboard navigation on a link.

    Issue described below https://github.com/Zulko/eagle.js/issues/82#issue-446209408

    opened by jaylandro 6
  • Error: btoa is not defined

    Error: btoa is not defined

    I keep getting this error at build time when creating static versions of this Vue app. Not sure what this function/variable is meant to reference.

    ReferenceError: btoa is not defined
    3:47:47 PM:     at addStyle (/opt/build/repo/node_modules/eagle.js/dist/eagle.cjs.js:444:7)
    3:47:47 PM:     at /opt/build/repo/node_modules/eagle.js/dist/eagle.cjs.js:424:12
    3:47:47 PM:     at a.__vue_inject_styles__ (/opt/build/repo/node_modules/eagle.js/dist/eagle.cjs.js:482:5)
    3:47:47 PM:     at a.hook (/opt/build/repo/node_modules/eagle.js/dist/eagle.cjs.js:397:13)
    3:47:47 PM:     at Ft (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:11191)
    3:47:47 PM:     at Ze (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:25133)
    3:47:47 PM:     at a.e._init (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:32564)
    3:47:47 PM:     at new a (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:30340)
    3:47:47 PM:     at Vi (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:66341)
    3:47:47 PM:     at io (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70571)
    3:47:47 PM:     at ro (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70244)
    3:47:47 PM:     at _t.eo [as renderNode] (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:67491)
    3:47:47 PM:     at _t.next (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:20507)
    3:47:47 PM:     at n (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:18719)
    3:47:47 PM:     at /opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:68602
    3:47:47 PM:     at eo (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:68610)
    3:47:47 PM: Done in 35.13s.
    
    opened by jbool24 3
  • [Feature] Added VuePress for documentation

    [Feature] Added VuePress for documentation

    Did basic setup for documentation https://errajswami.github.io/eagle.js/

    There is a lot of scope for improvements, it is a just first step towards it.

    • Can create a workflow for automatically publishing document on merge.
    • Pages cab separated at its own page. Right now everything is at single page.
    opened by errajswami 6
  • Use in vuepress?

    Use in vuepress?

    I'm trying to use your vue-eagle-modal module in vuepress. I can build and use it in development mode with 'npm run dev', but when I try to build "production" version with 'npm run build', I get the following error:

    WAIT Extracting site metadata... [2:17:14 AM] Compiling Client [2:17:14 AM] Compiling Server [2:17:27 AM] Compiled Server in 13s [2:17:34 AM] Compiled Client in 20s WAIT Rendering static HTML... Rendering page: / FAIL Error rendering /: C:\Users\borislav.iordanov\code\gweb\website\node_modules\vue-eagle-modal\src\Plugin.js:5 import M from './components/List'; ^

    SyntaxError: Unexpected identifier at Module._compile (internal/modules/cjs/loader.js:721:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:690:17) at require (internal/modules/cjs/helpers.js:25:18) at C:\Users\borislav.iordanov\code\gweb\website\node_modules\vue-server-renderer\build.prod.js:1:77671 at Object.module.exports.FUNC_ERROR_TEXT (webpack:/external "vue-eagle-modal":1:0) at webpack_require (webpack/bootstrap:25:0) at Module. (server-bundle.js:6678:33) at webpack_require (webpack/bootstrap:25:0) at Object. (server-bundle.js:3187:18) at webpack_require (webpack/bootstrap:25:0) at server-bundle.js:118:18 at Object. (server-bundle.js:121:10)

    opened by bolerio 1
  • build(deps-dev): bump eslint from 3.19.0 to 6.6.0

    build(deps-dev): bump eslint from 3.19.0 to 6.6.0

    Bumps eslint from 3.19.0 to 6.6.0.

    Release notes

    Sourced from eslint's releases.

    v6.6.0

    • 39dfe08 Update: false positives in function-call-argument-newline (fixes #12123) (#12280) (Scott O'Hara)
    • 4d84210 Update: improve report location for no-trailing-spaces (fixes #12315) (#12477) (Milos Djermanovic)
    • c6a7745 Update: no-trailing-spaces false negatives after comments (fixes #12479) (#12480) (Milos Djermanovic)
    • 0bffe95 Fix: no-misleading-character-class crash on invalid regex (fixes #12169) (#12347) (Milos Djermanovic)
    • c6a9a3b Update: Add enforceForIndexOf option to use-isnan (fixes #12207) (#12379) (Milos Djermanovic)
    • 364877b Update: measure plugin loading time and output in debug message (#12395) (Victor Homyakov)
    • 1744fab Fix: operator-assignment removes and duplicates comments (#12485) (Milos Djermanovic)
    • 52ca11a Fix: operator-assignment invalid autofix with adjacent tokens (#12483) (Milos Djermanovic)
    • 0f6d0dc Fix: CLIEngine#addPlugin reset lastConfigArrays (fixes #12425) (#12468) (Toru Nagashima)
    • 923a8cb Chore: Fix lint failure in JSDoc comment (#12489) (Brandon Mills)
    • aac3be4 Update: Add ignored prop regex no-param-reassign (#11275) (Luke Bennett)
    • e5382d6 Chore: Remove unused parameter in dot-location (#12464) (Milos Djermanovic)
    • 49faefb Fix: no-obj-calls false positive (fixes #12437) (#12467) (Toru Nagashima)
    • b3dbd96 Fix: problematic installation issue (fixes #11018) (#12309) (Toru Nagashima)
    • cd7c29b Sponsors: Sync README with website (ESLint Jenkins)
    • 8233873 Docs: Add note about Node.js requiring SSL support (fixes #11413) (#12475) (Nicholas C. Zakas)
    • 89e8aaf Fix: improve report location for no-tabs (#12471) (Milos Djermanovic)
    • 7dffe48 Update: Enable function string option in comma-dangle (fixes #12058) (#12462) (YeonJuan)
    • e15e1f9 Docs: fix doc for no-unneeded-ternary rule (fixes #12098) (#12410) (Sam Rae)
    • b1dc58f Sponsors: Sync README with website (ESLint Jenkins)
    • 61749c9 Chore: Provide debug log for parser errors (#12474) (Brad Zacher)
    • 7c8bbe0 Update: enforceForOrderingRelations no-unsafe-negation (fixes #12163) (#12414) (Sam Rae)
    • 349ed67 Update: improve report location for no-mixed-operators (#12328) (Chiawen Chen)
    • a102eaa Fix: prefer-numeric-literals invalid autofix with adjacent tokens (#12387) (Milos Djermanovic)
    • 6e7c18d Update: enforceForNewInMemberExpressions no-extra-parens (fixes #12428) (#12436) (Milos Djermanovic)
    • 51fbbd7 Fix: array-bracket-newline consistent error with comments (fixes #12416) (#12441) (Milos Djermanovic)
    • e657d4c Fix: report full dot location in dot-location (#12452) (Milos Djermanovic)
    • 2d6e345 Update: make isSpaceBetweenTokens() ignore newline in comments (#12407) (YeonJuan)
    • 84f71de Update: remove default overrides in keyword-spacing (fixes #12369) (#12411) (YeonJuan)
    • 18a0b0e Update: improve report location for no-space-in-parens (#12364) (Chiawen Chen)
    • d61c8a5 Update: improve report location for no-multi-spaces (#12329) (Chiawen Chen)
    • 561093f Upgrade: bump inquirer to ^7.0.0 (#12440) (Joe Graham)
    • fb633b2 Chore: Add a script for testing with more control (#12444) (Eric Wang)
    • 012ec51 Sponsors: Sync README with website (ESLint Jenkins)
    • 874fe16 New: pass cwd from cli engine (#12389) (Eric Wang)
    • b962775 Update: no-self-assign should detect member expression with this (#12279) (Tibor Blenessy)
    • 02977f2 Docs: Clarify eslint:recommended semver policy (#12429) (Kevin Partington)
    • 97045ae Docs: Fixes object type for rules in "Use a Plugin" (#12409) (Daisy Develops)
    • 24ca088 Docs: Fix typo in v6 migration guide (#12412) (Benjamim Sonntag)
    • b094008 Chore: update version parameter name (#12402) (Toru Nagashima)
    • e5637ba Chore: enable jsdoc/require-description (#12365) (Kai Cataldo)
    • d31f337 Sponsors: Sync README with website (ESLint Jenkins)
    • 7ffb22f Chore: Clean up inline directive parsing (#12375) (Jordan Eldredge)
    • 84467c0 Docs: fix wrong max-depth example (fixes #11991) (#12358) (Gabriel R Sezefredo)
    • 3642342 Docs: Fix minor formatting/grammar errors (#12371) (cherryblossom000)
    • c47fa0d Docs: Fix missing word in sentence (#12361) (Dan Boulet)
    • 8108f49 Chore: enable additional eslint-plugin-jsdoc rules (#12336) (Kai Cataldo)
    • b718d2e Chore: update issue template with --eslint-fix flag (#12352) (James George)
    • 20ba14d Sponsors: Sync README with website (ESLint Jenkins)
    ... (truncated)
    Changelog

    Sourced from eslint's changelog.

    v6.6.0 - October 25, 2019

    • 39dfe08 Update: false positives in function-call-argument-newline (fixes #12123) (#12280) (Scott O'Hara)
    • 4d84210 Update: improve report location for no-trailing-spaces (fixes #12315) (#12477) (Milos Djermanovic)
    • c6a7745 Update: no-trailing-spaces false negatives after comments (fixes #12479) (#12480) (Milos Djermanovic)
    • 0bffe95 Fix: no-misleading-character-class crash on invalid regex (fixes #12169) (#12347) (Milos Djermanovic)
    • c6a9a3b Update: Add enforceForIndexOf option to use-isnan (fixes #12207) (#12379) (Milos Djermanovic)
    • 364877b Update: measure plugin loading time and output in debug message (#12395) (Victor Homyakov)
    • 1744fab Fix: operator-assignment removes and duplicates comments (#12485) (Milos Djermanovic)
    • 52ca11a Fix: operator-assignment invalid autofix with adjacent tokens (#12483) (Milos Djermanovic)
    • 0f6d0dc Fix: CLIEngine#addPlugin reset lastConfigArrays (fixes #12425) (#12468) (Toru Nagashima)
    • 923a8cb Chore: Fix lint failure in JSDoc comment (#12489) (Brandon Mills)
    • aac3be4 Update: Add ignored prop regex no-param-reassign (#11275) (Luke Bennett)
    • e5382d6 Chore: Remove unused parameter in dot-location (#12464) (Milos Djermanovic)
    • 49faefb Fix: no-obj-calls false positive (fixes #12437) (#12467) (Toru Nagashima)
    • b3dbd96 Fix: problematic installation issue (fixes #11018) (#12309) (Toru Nagashima)
    • cd7c29b Sponsors: Sync README with website (ESLint Jenkins)
    • 8233873 Docs: Add note about Node.js requiring SSL support (fixes #11413) (#12475) (Nicholas C. Zakas)
    • 89e8aaf Fix: improve report location for no-tabs (#12471) (Milos Djermanovic)
    • 7dffe48 Update: Enable function string option in comma-dangle (fixes #12058) (#12462) (YeonJuan)
    • e15e1f9 Docs: fix doc for no-unneeded-ternary rule (fixes #12098) (#12410) (Sam Rae)
    • b1dc58f Sponsors: Sync README with website (ESLint Jenkins)
    • 61749c9 Chore: Provide debug log for parser errors (#12474) (Brad Zacher)
    • 7c8bbe0 Update: enforceForOrderingRelations no-unsafe-negation (fixes #12163) (#12414) (Sam Rae)
    • 349ed67 Update: improve report location for no-mixed-operators (#12328) (Chiawen Chen)
    • a102eaa Fix: prefer-numeric-literals invalid autofix with adjacent tokens (#12387) (Milos Djermanovic)
    • 6e7c18d Update: enforceForNewInMemberExpressions no-extra-parens (fixes #12428) (#12436) (Milos Djermanovic)
    • 51fbbd7 Fix: array-bracket-newline consistent error with comments (fixes #12416) (#12441) (Milos Djermanovic)
    • e657d4c Fix: report full dot location in dot-location (#12452) (Milos Djermanovic)
    • 2d6e345 Update: make isSpaceBetweenTokens() ignore newline in comments (#12407) (YeonJuan)
    • 84f71de Update: remove default overrides in keyword-spacing (fixes #12369) (#12411) (YeonJuan)
    • 18a0b0e Update: improve report location for no-space-in-parens (#12364) (Chiawen Chen)
    • d61c8a5 Update: improve report location for no-multi-spaces (#12329) (Chiawen Chen)
    • 561093f Upgrade: bump inquirer to ^7.0.0 (#12440) (Joe Graham)
    • fb633b2 Chore: Add a script for testing with more control (#12444) (Eric Wang)
    • 012ec51 Sponsors: Sync README with website (ESLint Jenkins)
    • 874fe16 New: pass cwd from cli engine (#12389) (Eric Wang)
    • b962775 Update: no-self-assign should detect member expression with this (#12279) (Tibor Blenessy)
    • 02977f2 Docs: Clarify eslint:recommended semver policy (#12429) (Kevin Partington)
    • 97045ae Docs: Fixes object type for rules in "Use a Plugin" (#12409) (Daisy Develops)
    • 24ca088 Docs: Fix typo in v6 migration guide (#12412) (Benjamim Sonntag)
    • b094008 Chore: update version parameter name (#12402) (Toru Nagashima)
    • e5637ba Chore: enable jsdoc/require-description (#12365) (Kai Cataldo)
    • d31f337 Sponsors: Sync README with website (ESLint Jenkins)
    • 7ffb22f Chore: Clean up inline directive parsing (#12375) (Jordan Eldredge)
    • 84467c0 Docs: fix wrong max-depth example (fixes #11991) (#12358) (Gabriel R Sezefredo)
    • 3642342 Docs: Fix minor formatting/grammar errors (#12371) (cherryblossom000)
    • c47fa0d Docs: Fix missing word in sentence (#12361) (Dan Boulet)
    • 8108f49 Chore: enable additional eslint-plugin-jsdoc rules (#12336) (Kai Cataldo)
    • b718d2e Chore: update issue template with --eslint-fix flag (#12352) (James George)
    ... (truncated)
    Commits
    • 879c373 6.6.0
    • c8ba30a Build: changelog update for 6.6.0
    • 39dfe08 Update: false positives in function-call-argument-newline (fixes #12123) (#12...
    • 4d84210 Update: improve report location for no-trailing-spaces (fixes #12315) (#12477)
    • c6a7745 Update: no-trailing-spaces false negatives after comments (fixes #12479) (#12...
    • 0bffe95 Fix: no-misleading-character-class crash on invalid regex (fixes #12169) (#12...
    • c6a9a3b Update: Add enforceForIndexOf option to use-isnan (fixes #12207) (#12379)
    • 364877b Update: measure plugin loading time and output in debug message (#12395)
    • 1744fab Fix: operator-assignment removes and duplicates comments (#12485)
    • 52ca11a Fix: operator-assignment invalid autofix with adjacent tokens (#12483)
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by eslintbot, a new releaser for eslint since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v0.6.1)
  • v0.6.1(Oct 23, 2019)

    • chore: remove lockfile https://github.com/sindresorhus/ama/issues/479#issuecomment-310661514 31c447b
    • chore: update readme 637e32d
    • fix: prevSlide/nextSlide triggers direction change. close #88 ae7abac
    • Addition of FAQ section (#91) d8f8586
    • fix: typos (#86) 7a9e92e
    • Merge pull request #85 from rummanhasnayeen/master 9d6d97d
    • Intellij and vscode dependency d286c29

    https://github.com/zulko/eagle.js/compare/v0.5.1...v0.6.1

    Source code(tar.gz)
    Source code(zip)
  • v0.6.0(Jun 10, 2019)

    • chore: update tooling dependency a4c92bd
    • Check if click event came from keyboard #82 (#83) ba34431

    https://github.com/zulko/eagle.js/compare/v0.5.1...v0.6.0

    Source code(tar.gz)
    Source code(zip)
  • v0.5.1(Mar 28, 2019)

  • v0.5.0(Mar 28, 2019)

:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

花裤衩 80.1k Dec 31, 2022
:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

Aleksandr Komarov 4k Dec 30, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

Архипцев Евгений 63 Dec 30, 2022
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | 简体中文 Talk is cheap,

Baidi Liu 187 Jan 2, 2023
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Alan Morel 10 Oct 7, 2022
The Intuitive Vue Framework

Build your next Vue.js application with confidence using Nuxt: a framework making web development simple and powerful. Links ?? Documentation: https:/

Nuxt 41.8k Jan 5, 2023
🐉 Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

vuetify 36.2k Jan 3, 2023
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

vue-next This is the repository for Vue 3.0. Quickstart Via CDN: <script src="https://unpkg.com/vue@next"></script> In-browser playground on Codepen S

vuejs 34.6k Jan 9, 2023
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 4, 2023
Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native Visit our website at vue-native.io or read the official documentation here. Build native mobile apps using Vue Vue Native is a framework to

GeekyAnts 8.4k Jan 6, 2023
⚡️ The Jamstack framework for Vue.js

Gridsome Build super fast, modern websites with Vue.js Gridsome is a Vue-powered static site generator for building CDN-ready websites for any headles

Gridsome 8.4k Dec 30, 2022
New Framework Components for Vue.js 2

Supporting through Patreon Vuesax is an open source MIT project if you want to contribute to keep improving, If you are interested in supporting this

Lusaxweb 5.5k Dec 30, 2022
AT-UI is a modular front-end UI framework for developing fast and powerful web interfaces based on Vue.js.

AT UI AT-UI is a modular front-end UI framework for developing fast and powerful web interfaces based on Vue.js. 中文 README Features Based on Vue A npm

null 2.3k Jan 4, 2023
A high quality UI Toolkit built on Vue.js 2.0

iView A high quality UI Toolkit built on Vue.js. Docs 3.x | 2.x | 1.x Features Dozens of useful and beautiful components. Friendly API. It's made for

iView 24k Jan 5, 2023
Lightweight Mobile UI Components built on Vue

Vant Mobile UI Components built on Vue ?? 文档网站(国内) ?? 文档网站(GitHub) ???? 中文版介绍 Features 65+ Reusable components 1kb Component average size (min+gzip) 9

有赞 20.7k Dec 31, 2022
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.

AnimXYZ animxyz.com AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless

Ingram Projects 2.1k Jan 2, 2023