Fix pending issues (#31)

* fix error with reading cssRules property from 'CSSStyleSheet'

* add a separate style block to set a frame when spinner was initialized

* change some more spinners to a new keyframe binding

* chore: remove minified files from repo

* chore: add `dist` folder to gitignore

* refactor: spinners with dynamic keyframes

* Useless code cuts and some commenting

* chore: add inputs to demo

* chore: add TypeScript declarations

close #8

* minor

* docs: tree shaking info

see #25

* chore: add index.html to .gitignore

* build: tweak config according to #16

close #16

* chore: bump version

.gitignore

@@ -3,6 +3,8 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+dist/
+index.html
 
 # Editor directories and files
 .idea

README.md

@@ -43,6 +43,9 @@ Vue.js usage example
   // import 'epic-spinners/dist/lib/epic-spinners.min.css'
   // import {AtomSpinner} from 'epic-spinners/dist/lib/epic-spinners.min.js'
   
+  // To get tree shaking from webpack (won't import all spinners when you only need one)
+  // import AtomSpinner from 'epic-spinners/src/components/lib/AtomSpinner'
+  
   import {AtomSpinner} from 'epic-spinners'
   export default {
     components: {

build/webpack.lib.conf.js

@@ -23,8 +23,8 @@ var webpackConfig = merge(baseWebpackConfig, {
   devtool: config.lib.productionSourceMap ? '#source-map' : false,
   output: {
     path: config.lib.assetsRoot,
-    filename: utils.assetsLibPath('[name].min.js'),
-    library: '[name]',
+    filename: utils.assetsLibPath('epic-spinners.min.js'),
+    library: 'epic-spinners',
     libraryTarget: 'umd'
   },
   plugins: [
@@ -40,10 +40,10 @@ var webpackConfig = merge(baseWebpackConfig, {
     }),
     // extract css into its own file
     new ExtractTextPlugin({
-      filename: utils.assetsLibPath('[name].min.css')
+      filename: utils.assetsLibPath('epic-spinners.min.css')
     }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
+    // Compress extracted CSS. We are using this plugin so that's possible
+    // for duplicated CSS from different components to be deduped.
     new OptimizeCSSPlugin({
       cssProcessorOptions: {
         safe: true

index.d.ts

@@ -0,0 +1,47 @@
+declare module 'epic-spinners' {
+  import { Component } from 'vue'
+
+  const HollowDotsSpinner: Component
+  const PixelSpinner: Component
+  const FlowerSpinner: Component
+  const IntersectingCirclesSpinner: Component
+  const OrbitSpinner: Component
+  const FingerprintSpinner: Component
+  const TrinityRingsSpinner: Component
+  const FulfillingSquareSpinner: Component
+  const CirclesToRhombusesSpinner: Component
+  const SemipolarSpinner: Component
+  const BreedingRhombusSpinner: Component
+  const SwappingSquaresSpinner: Component
+  const ScalingSquaresSpinner: Component
+  const FulfillingBouncingCircleSpinner: Component
+  const RadarSpinner: Component
+  const SelfBuildingSquareSpinner: Component
+  const SpringSpinner: Component
+  const LoopingRhombusesSpinner: Component
+  const HalfCircleSpinner: Component
+  const AtomSpinner: Component
+
+  export {
+    HollowDotsSpinner,
+    PixelSpinner,
+    FlowerSpinner,
+    IntersectingCirclesSpinner,
+    OrbitSpinner,
+    FingerprintSpinner,
+    TrinityRingsSpinner,
+    FulfillingSquareSpinner,
+    CirclesToRhombusesSpinner,
+    SemipolarSpinner,
+    BreedingRhombusSpinner,
+    SwappingSquaresSpinner,
+    ScalingSquaresSpinner,
+    FulfillingBouncingCircleSpinner,
+    RadarSpinner,
+    SelfBuildingSquareSpinner,
+    SpringSpinner,
+    LoopingRhombusesSpinner,
+    HalfCircleSpinner,
+    AtomSpinner,
+  }
+}

package.json

@@ -1,9 +1,10 @@
 {
   "name": "epic-spinners",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Easy to use css spinners collection with vue.js integration",
   "author": "epicmax <hello@epicmax.co>",
   "main": "src/lib.js",
+  "types": "src/lib.d.ts",
   "private": false,
   "license": "MIT",
   "url": "https://github.com/epicmaxco/epic-spinners",

src/components/Samples.vue

@@ -1,17 +1,41 @@
 <template>
   <div class="samples">
-    <ul>
+    <div>
+      <label>
+        <input type="checkbox" v-model="show" /> Show
+      </label>
+    </div>
+    <div>
+      <label>
+        Duration
+        <input v-model.number="animationDuration" />
+      </label>
+    </div>
+    <div>
+      <label>
+        Size
+        <input v-model.number="size" />
+      </label>
+    </div>
+    <div>
+      <label>
+        Color
+        <input type="color" v-model="spinnerColor" />
+      </label>
+    </div>
+
+    <ul v-if="show">
       <li>
         <flower-spinner
-          :animation-duration="2500"
-          :size="70"
+          :animation-duration="animationDuration"
+          :size="size"
           :color="spinnerColor"
         />
       </li>
       <li>
         <pixel-spinner
-          :animation-duration="2000"
-          :pixel-size="70"
+          :animation-duration="animationDuration"
+          :size="size"
           :color="spinnerColor"
         />
       </li>
@@ -118,8 +142,8 @@
       </li>
       <li>
         <spring-spinner
-          :animation-duration="3000"
-          :size="60"
+          :animation-duration="animationDuration"
+          :size="size"
           :color="spinnerColor"
         />
       </li>
@@ -198,6 +222,9 @@
 
     data () {
       return {
+        animationDuration: 3000,
+        show: true,
+        size: 80,
         spinnerColor: '#ff1d5e'
       }
     }

src/components/lib/FlowerSpinner.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flower-spinner" :style="spinnerStyle">
     <div class="dots-container" :style="dotsContainerStyle">
-      <div class="bigger-dot" :style="biggerDotStyle">
-        <div class="smaller-dot" :style="smallerDotStyle"></div>
+      <div class="big-dot" :style="biggerDotStyle">
+        <div class="small-dot" :style="smallerDotStyle"></div>
       </div>
     </div>
   </div>
@@ -31,10 +31,8 @@
 
     data () {
       return {
-        smallerDotAnimationBaseName: 'flower-spinner-smaller-dot-animation',
-        biggerDotAnimationBaseName: 'flower-spinner-bigger-dot-animation',
-        currentSmallerDotAnimationBaseName: '',
-        currentBiggerDotAnimationBaseName: ''
+        smallDotName: `flower-spinner-small-dot-${Date.now()}`,
+        bigDotName: `flower-spinner-big-dot-${Date.now()}`
       }
     },
 
@@ -61,45 +59,44 @@
         return {
           background: this.color,
           animationDuration: `${this.animationDuration}ms`,
-          animationName: this.currentSmallerDotAnimationBaseName
+          animationName: this.smallDotName
         }
       },
 
       biggerDotStyle () {
         return {
           background: this.color,
           animationDuration: `${this.animationDuration}ms`,
-          animationName: this.currentBiggerDotAnimationBaseName
+          animationName: this.bigDotName
         }
       }
     },
 
     watch: {
-      '$props': {
-        handler () {
-          this.updateAnimation()
-        },
-        deep: true
+      size: {
+        handler: 'updateAnimation',
+        immediate: true
+      },
+      color: {
+        handler: 'updateAnimation',
+        immediate: true
       }
     },
 
-    mounted () {
-      this.updateAnimation()
+    beforeDestroy () {
+      utils.removeKeyframes(this.smallDotName)
+      utils.removeKeyframes(this.bigDotName)
     },
 
     methods: {
       updateAnimation () {
-        this.updateAnimationName()
-        utils.appendKeyframes(this.currentSmallerDotAnimationBaseName, this.generateSmallerDotKeyframes())
-        utils.appendKeyframes(this.currentBiggerDotAnimationBaseName, this.generateBiggerDotKeyframes())
+        utils.removeKeyframes(this.smallDotName)
+        utils.appendKeyframes(this.smallDotName, this.generateSmallDotKeyframes())
+        utils.removeKeyframes(this.bigDotName)
+        utils.appendKeyframes(this.bigDotName, this.generateBigDotKeyframes())
       },
 
-      updateAnimationName () {
-        this.currentSmallerDotAnimationBaseName = `${this.smallerDotAnimationBaseName}-${Date.now()}`
-        this.currentBiggerDotAnimationBaseName = `${this.biggerDotAnimationBaseName}-${Date.now()}`
-      },
-
-      generateSmallerDotKeyframes () {
+      generateSmallDotKeyframes () {
         return `0%, 100% {
                     box-shadow: 0 0 0 ${this.color},
                                 0 0 0 ${this.color},
@@ -133,7 +130,7 @@
                   }`
       },
 
-      generateBiggerDotKeyframes () {
+      generateBigDotKeyframes () {
         return `0%, 100% {
                     box-shadow: 0 0 0 ${this.color},
                                 0 0 0 ${this.color},
@@ -193,25 +190,25 @@
     width: calc(70px / 7);
   }
 
-  .flower-spinner .smaller-dot {
+  .flower-spinner .small-dot {
     background: #ff1d5e;
     height: 100%;
     width: 100%;
     border-radius: 50%;
-    animation: flower-spinner-smaller-dot-animation 2.5s 0s infinite both;
-
+    animation: flower-spinner-small-dot-animation 2.5s 0s infinite both;
   }
 
-  .flower-spinner .bigger-dot {
+  .flower-spinner .big-dot {
     background: #ff1d5e;
     height: 100%;
     width: 100%;
     padding: 10%;
     border-radius: 50%;
-    animation: flower-spinner-bigger-dot-animation 2.5s 0s infinite both;
+    animation: flower-spinner-big-dot-animation 2.5s 0s infinite both;
   }
 
-  @keyframes flower-spinner-bigger-dot-animation {
+  /* NOTE Keyframes here serve as reference. They don't do anything. */
+  @keyframes flower-spinner-big-dot-animation {
     0%, 100% {
       box-shadow: rgb(255, 29, 94) 0px 0px 0px,
       rgb(255, 29, 94) 0px 0px 0px,
@@ -251,7 +248,7 @@
     }
   }
 
-  @keyframes flower-spinner-smaller-dot-animation {
+  @keyframes flower-spinner-small-dot-animation {
     0%, 100% {
       box-shadow: rgb(255, 29, 94) 0px 0px 0px,
       rgb(255, 29, 94) 0px 0px 0px,

src/components/lib/PixelSpinner.vue

@@ -27,8 +27,7 @@
 
     data () {
       return {
-        animationBaseName: 'pixel-spinner-animation',
-        currentAnimationName: ''
+        animationName: `pixel-spinner-animation-${Date.now()}`
       }
     },
 
@@ -47,7 +46,7 @@
       spinnerInnerStyle () {
         return {
           animationDuration: `${this.animationDuration}ms`,
-          animationName: this.currentAnimationName,
+          animationName: this.animationName,
           width: `${this.pixelSize}px`,
           height: `${this.pixelSize}px`,
           backgroundColor: this.color,
@@ -67,26 +66,24 @@
     },
 
     watch: {
-      '$props': {
-        handler () {
-          this.updateAnimation()
-        },
-        deep: true
+      size: {
+        handler: 'updateAnimation',
+        immediate: true
       }
     },
 
     mounted () {
       this.updateAnimation()
     },
 
+    beforeDestroy () {
+      utils.removeKeyframes(this.animationName)
+    },
+
     methods: {
       updateAnimation () {
-        this.updateAnimationName()
-        utils.appendKeyframes(this.currentAnimationName, this.generateKeyframes())
-      },
-
-      updateAnimationName () {
-        this.currentAnimationName = `${this.animationBaseName}-${Date.now()}`
+        utils.removeKeyframes(this.animationName)
+        utils.appendKeyframes(this.animationName, this.generateKeyframes())
       },
 
       generateKeyframes () {
@@ -152,6 +149,7 @@
     animation: pixel-spinner-animation 2000ms linear infinite;
   }
 
+  /* NOTE Keyframes here serve as reference. They don't do anything. */
   @keyframes pixel-spinner-animation {
     50% {
       box-shadow: 20px 20px 0px 0px,