Added support for pswpModule import without absolute path

[brunogrcsada]

This pull request gives the ability for users to import the pswpModule script without an absolute path; it's extremely useful when PhotoSwipe is saved as a node module. However, it still allows for the absolute path to be given instead...

Example:

import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
import {default as PhotoMain} from 'photoswipe/dist/photoswipe.esm.js';
	
import 'photoswipe/dist/photoswipe.css';

let lightbox;

onMount(() => {
        lightbox = new PhotoSwipeLightbox({
	        gallerySelector: '#gallery--simple',
		childSelector: 'a',
		pswpModule: PhotoMain
	});
        lightbox.init();
});

[dimsemenov]

Thank you. Can you please modify the pull request so it changes source files (from src/ folder) and not distribution (dist/), specifically:

• https://github.com/dimsemenov/PhotoSwipe/blob/v5-beta/src/js/lightbox/dynamic-import.js
• https://github.com/dimsemenov/PhotoSwipe/blob/v5-beta/src/js/lightbox/lightbox.js

[brunogrcsada]

No worries :), done and dusted, everything should be good to go.

[dimsemenov]

thanks, should now be working in 5.0.3

import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js';

import 'photoswipe/dist/photoswipe.css';

const options = {
  gallerySelector: '#my-gallery',
  childSelector: 'a',
  pswpModule: PhotoSwipe
};
const lightbox = new PhotoSwipeLightbox(options);
lightbox.init();

npm install --save git://github.com/dimsemenov/photoswipe#v5-beta

[dangelion]

@brunogrcsada @dimsemenov Yes, this works! 🎉 Even if at the build there's this warning

WARNING in ./node_modules/photoswipe/dist/photoswipe-lightbox.esm.js 230:38-52
Critical dependency: the request of a dependency is an expression

webpack compiled with 1 warning

Any way to solve it?

[brunogrcsada]

@dangelion I managed to get the warning myself with a Next.js project. I was using Svelte and it's a breeze, what JS library are you using? The reason for webpack not liking this is because it prefers explicit paths when importing a module; this isn't a big issue but I'll look into it.

Adding webpackIgnore to the import fixes this issue:

return typeof module === 'string' ? import(/* webpackIgnore: true */ module) : module;

I'll push this in a second.

[brunogrcsada]

I've added the suppress comment to my latest pull request :) @dimsemenov @dangelion

[dangelion]

Hi @brunogrcsada thanks, I can't see your latest pr. How can get it?

[brunogrcsada]

@dangelion Here it is, I also added image caption support: #1766

[dangelion]

Thanks @brunogrcsada now I see it 4944ac8

@dimsemenov When you think you'll release it?

[dangelion]

@dimsemenov Is this solved in the new 5.1.0?

[acwolff]

@ dangelion I don't know whether this answers your question, but I use version 5.1.0 with only relative paths:

   	import PhotoSwipeLightbox from './res/photoswipe-lightbox.esm.js';
	import PhotoSwipeDynamicCaption from './res/photoswipe-dynamic-caption-plugin.esm.js';
	const options = {
	  gallerySelector: '#gallery',
	  childSelector: 'a',
 	  pswpModule: './photoswipe.esm.js'
 	};

This works fine!