@crispcode/shimmer 5.0.2 → 5.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispcode/shimmer",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "A PIXI.JS wrapper plugin for MODUX",
   "author": "Crisp Code ( contact@crispcode.ro )",
   "access": "public",
@@ -17,39 +17,39 @@
     "url": "https://github.com/CrispCode/shimmer/issues"
   },
   "dependencies": {
-    "@pixi/canvas-display": "^6.4.0",
-    "@pixi/canvas-extract": "^6.4.0",
-    "@pixi/canvas-graphics": "^6.4.0",
-    "@pixi/canvas-mesh": "^6.4.0",
-    "@pixi/canvas-particle-container": "^6.4.0",
-    "@pixi/canvas-prepare": "^6.4.0",
-    "@pixi/canvas-renderer": "^6.4.0",
-    "@pixi/canvas-sprite": "^6.4.0",
-    "@pixi/canvas-sprite-tiling": "^6.4.0",
-    "@pixi/canvas-text": "^6.4.0",
-    "@pixi/constants": "^6.4.0",
-    "@pixi/core": "^6.4.0",
-    "@pixi/display": "^6.4.0",
-    "@pixi/graphics": "^6.4.0",
-    "@pixi/interaction": "^6.4.0",
-    "@pixi/loaders": "^6.4.0",
-    "@pixi/math": "^6.4.0",
-    "@pixi/mesh": "^6.4.0",
-    "@pixi/mesh-extras": "^6.4.0",
-    "@pixi/particle-container": "^6.4.0",
-    "@pixi/prepare": "^6.4.0",
-    "@pixi/runner": "^6.4.0",
-    "@pixi/settings": "^6.4.0",
-    "@pixi/sprite": "^6.4.0",
-    "@pixi/sprite-animated": "^6.4.0",
-    "@pixi/sprite-tiling": "^6.4.0",
-    "@pixi/text": "^6.4.0",
-    "@pixi/ticker": "^6.4.0",
-    "@pixi/utils": "^6.4.0",
-    "acorn": "^8.7.1"
+    "@pixi/assets": "^6.5.1",
+    "@pixi/canvas-display": "^6.5.1",
+    "@pixi/canvas-extract": "^6.5.1",
+    "@pixi/canvas-graphics": "^6.5.1",
+    "@pixi/canvas-mesh": "^6.5.1",
+    "@pixi/canvas-particle-container": "^6.5.1",
+    "@pixi/canvas-prepare": "^6.5.1",
+    "@pixi/canvas-renderer": "^6.5.1",
+    "@pixi/canvas-sprite": "^6.5.1",
+    "@pixi/canvas-sprite-tiling": "^6.5.1",
+    "@pixi/canvas-text": "^6.5.1",
+    "@pixi/constants": "^6.5.1",
+    "@pixi/core": "^6.5.1",
+    "@pixi/display": "^6.5.1",
+    "@pixi/extensions": "^6.5.1",
+    "@pixi/graphics": "^6.5.1",
+    "@pixi/interaction": "^6.5.1",
+    "@pixi/math": "^6.5.1",
+    "@pixi/mesh": "^6.5.1",
+    "@pixi/mesh-extras": "^6.5.1",
+    "@pixi/particle-container": "^6.5.1",
+    "@pixi/prepare": "^6.5.1",
+    "@pixi/runner": "^6.5.1",
+    "@pixi/settings": "^6.5.1",
+    "@pixi/sprite": "^6.5.1",
+    "@pixi/sprite-animated": "^6.5.1",
+    "@pixi/sprite-tiling": "^6.5.1",
+    "@pixi/text": "^6.5.1",
+    "@pixi/ticker": "^6.5.1",
+    "@pixi/utils": "^6.5.1"
   },
   "peerDependencies": {
-    "@crispcode/modux": "CrispCode/modux#v5.1.1"
+    "@crispcode/modux": "^5.1.1"
   },
   "devDependencies": {
     "esdoc": "^1.1.0",

package/scripts/shimmer.js

@@ -4,11 +4,12 @@
 
 import { Component, extend, loop, logger } from '@crispcode/modux'
 
-import { autoDetectRenderer, Renderer, BatchRenderer } from '@pixi/core'
-import { Loader } from '@pixi/loaders'
+import { autoDetectRenderer, BatchRenderer } from '@pixi/core'
+import { Assets } from '@pixi/assets'
 import { Ticker } from '@pixi/ticker'
 import { InteractionManager } from '@pixi/interaction'
 import { skipHello, isWebGLSupported } from '@pixi/utils'
+import { extensions } from '@pixi/extensions'
 
 // Canvas support
 import '@pixi/canvas-display'
@@ -25,15 +26,8 @@ import '@pixi/canvas-text'
 import { Element } from './element.js'
 import { Controls } from './controls.js'
 
-Renderer.registerPlugin( 'interaction', InteractionManager )
-Renderer.registerPlugin( 'batch', BatchRenderer )
-
-CanvasRenderer.registerPlugin( 'interaction', InteractionManager )
-CanvasRenderer.registerPlugin( 'extract', CanvasExtract )
-CanvasRenderer.registerPlugin( 'graphics', CanvasGraphicsRenderer )
-CanvasRenderer.registerPlugin( 'mesh', CanvasMeshRenderer )
-CanvasRenderer.registerPlugin( 'prepare', CanvasPrepare )
-CanvasRenderer.registerPlugin( 'sprite', CanvasSpriteRenderer )
+extensions.add( InteractionManager )
+extensions.add( BatchRenderer )
 
 /**
  * This class is used to create the shimmer component
@@ -66,19 +60,12 @@ export class Shimmer extends Component {
 
   /**
    * This method preloads a colection of assets
-   * @param {Object} assets A collection of assets
+   * @param {Object} bundle A collection of assets
    * @return {Promise} A promise which is resolved upon loading the assets. It resolves the loaded resources.
    */
-  preload ( assets ) {
-    let loader = new Loader()
-    return new Promise( ( resolve ) => {
-      loop( assets, ( data, name ) => {
-        loader.add( name, data )
-      } )
-      loader.load( ( loader, resources ) => {
-        resolve( resources )
-      } )
-    } )
+  preload ( bundle ) {
+    Assets.addBundle( 'bundle', bundle )
+    return Assets.loadBundle( 'bundle' )
   }
 
   /**
@@ -163,7 +150,17 @@ export class Shimmer extends Component {
      * Stores the renderer
      * @type {Renderer}
      */
-    this.renderer = ( isWebGLSupported() && !this.settings.forceCanvas ) ? autoDetectRenderer( rendererSettings ) : new CanvasRenderer( rendererSettings )
+    this.renderer = null
+    if ( isWebGLSupported() && !this.settings.forceCanvas ) {
+      this.renderer = autoDetectRenderer( rendererSettings )
+    } else {
+      extensions.add( CanvasExtract )
+      extensions.add( CanvasGraphicsRenderer )
+      extensions.add( CanvasMeshRenderer )
+      extensions.add( CanvasPrepare )
+      extensions.add( CanvasSpriteRenderer )
+      this.renderer = new CanvasRenderer( rendererSettings )
+    }
 
     this.renderer.resize( this.element.clientWidth, this.element.clientHeight )
 

package/test/app.js

@@ -1,4 +1,3 @@
 'use strict'
 
-require( './styles/index.scss' )
 require( './scripts/index.js' )

package/test/scripts/components/layout/index.js

@@ -1,9 +1,10 @@
 'use strict'
 
 import { Component } from '@crispcode/modux'
+import template from './template.html'
 
 export class LayoutComponent extends Component {
   get template () {
-    return require( './template.html' )
+    return template
   }
 }

package/test/scripts/components/shimmer/index.js

@@ -37,13 +37,13 @@ export class ShimmerComponent extends Shimmer {
       'image2': '/image2.png'
     } )
       .then( ( resources ) => {
-        this.__button = new ButtonMain( resources[ 'image1' ].texture )
+        this.__button = new ButtonMain( resources[ 'image1' ] )
         this.stage.addElementChild( 'button', this.__button )
 
         this.__moons = {}
 
         for ( let i = 0; i < 20; i++ ) {
-          let moon = new Moon( resources[ 'image2' ].texture )
+          let moon = new Moon( resources[ 'image2' ] )
           moon.setAngle( rnd( 0, 359 ) )
           moon.setRadius( rnd( 200, 500 ) )
           moon.setSpeed( rnd( 10, 50 ) / 10 )

package/test/scripts/index.js

@@ -7,6 +7,8 @@ import { Module, logger } from '@crispcode/modux'
 import { LayoutComponent } from './components/layout'
 import { ShimmerComponent } from './components/shimmer'
 
+import './../styles/index.scss'
+
 let initialize = () => {
   // Create application
   let app = new Module( 'app' )