How to import and use PhotoSwipe with Aurelia / Typescript?

Question

I am trying to use PhotoSwipe in an Aurelia project, but cannot find a way to make it work.

In my aurelio.json under bundles, I have:

{
    "name": "photoswipe",
    "path": "../node_modules/photoswipe/dist/",
    "main": "photoswipe.min",
    "resources": [
        "photoswipe-ui-default.min.js",
        "photoswipe.css",
        "default-skin/default-skin.css"
    ]
}

in my package.json, I have:

"@types/photoswipe": "^4.0.27",
"photoswipe": "^4.1.1"

in my .ts module, I have

import PhotoSwipe from 'photoswipe';

The code I use for opening the gallery (just copied from the getting started doc)

imageClicked() { 

    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    var items = [
        {
            src: 'https://placekitten.com/600/400',
            w: 600,
            h: 400
        },
        {
            src: 'https://placekitten.com/1200/900',
            w: 1200,
            h: 900
        }
    ];

    // define options (if needed)
    var options = {
        // optionName: 'option value'
        // for example:
        index: 0 // start at first slide
    };

    // Initializes and opens PhotoSwipe
    var gallery = new PhotoSwipe<PhotoSwipeUI_Default.Options>(pswpElement as HTMLElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
}

The aurelia project builds ok, but runtime i get this error:

Uncaught ReferenceError: PhotoSwipeUI_Default is not defined

I tried adding export to the aurelia.json bundle

"exports": [ "PhotoSwipe", "PhotoSwipeUI_Default" ]

This didn't change anything.

I tried various import statements:

import PhotoSwipeUI_Default from 'photoswipe'; // Now PhotoSwipeUI_Default is of type PhotoSwipe
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default' // Module not found compile error
import PhotoSwipeUI_Default from 'npm:[email protected]/dist/photoswipe-ui-default.min.js'; // Cannot find module

I am in the dark, and my trial and error method of resolving this is going no where.

What am I missing?

Answer 1

You need to change up your configuration. You're pointing Aurelia to the minified file which is causing issues apparently. Let the CLI handle minification of the JS files.

{
  "name": "photoswipe",
  "path": "../node_modules/photoswipe/dist/",
  "main": "photoswipe",
  "resources": [
    "photoswipe-ui-default.js"
  ]
}

You can then import using

import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/photoswipe-ui-default';

Also, the photoswipe css files load image files for certain things. A current limitation of the Aurelia CLI is that it breaks this sort of thing. This should be fixed before final release. But for now, you'll need to load the CSS using link elements.

  <!-- Core CSS file -->
  <link rel="stylesheet" href="node_modules/photoswipe/dist/photoswipe.css">

  <!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
  <link rel="stylesheet" href="node_modules/photoswipe/dist/default-skin/default-skin.css">

Please let me know if this works for you.