Adding javascript libraries css and custom js (noob question)

[guites]

First of all, thank you so much for this project!

I'm having trouble setting up js libraries css and custom code.

For example, I'm using PhotoSwipe (https://photoswipe.com/getting-started/).

From the docs (https://underscoretw.com/docs/esbuild/) it seems like I should first add the library to javascript/script.js

// assume lib was installed with `npm i photoswip --save`

import PhotoSwipeLightbox from 'photoswipe/lightbox';
window.PhotoSwipeLightbox = PhotoSwipeLightbox;

But what about my custom code? Should I just put it there?

In theme/js/readme.txt it mentions:

The JavaScript code at ../../javascript/*.js will be processed by
esbuild, and the output file(s) will be created in this folder as *.min.js.

So it seems like I should be able to create a file such as javascript/gallery.js and it would be automatically included, right? But it doesn't seem to work.

// javascript/gallery.js

import 'photoswipe/style.css';

const lightbox = new PhotoSwipeLightbox({
    // may select multiple "galleries"
    gallery: '#gallery--getting-started',

    // Elements within gallery (slides)
    children: 'a',

    // setup PhotoSwipe Core dynamic import
    pswpModule: () => import('photoswipe')
});
lightbox.init();

console.log("from gallery.js"); // doesn't show in the browser console

Is my thinking correct? Should I place custom .js somewhere else?

If I copy it all to javascript/script.js, the javascript is loaded, but not the css:

import PhotoSwipeLightbox from 'photoswipe/lightbox';
window.PhotoSwipeLightbox = PhotoSwipeLightbox;

import 'photoswipe/style.css'; // css doesn't loads on the page

const lightbox = new PhotoSwipeLightbox({
    // may select multiple "galleries"
    gallery: '#gallery--getting-started',

    // Elements within gallery (slides)
    children: 'a',

    // setup PhotoSwipe Core dynamic import
    pswpModule: () => import('photoswipe')
});
lightbox.init();

console.log("from script.js"); // works

Sorry if this is explained somewhere else in the docs, I couldn't find it. Thanks for your help.

[gregsullivan]

In theme/js/readme.txt it mentions:

The JavaScript code at ../../javascript/*.js will be processed by
esbuild, and the output file(s) will be created in this folder as *.min.js.

Thanks for flagging this! A few months ago, someone reported that the wildcard (*.js) wasn't working in some (or all?) cases on Windows machines. I concluded I would need to remove wildcard support, but I failed to update the text in the ./js/theme/readme.txt file. I've updated it locally for a pending update. This is the new text:

The three JavaScript files at `../../javascript` will be processed by esbuild,
and the output files will be created in this folder with `.min.js` extensions.
The files `script.min.js`, `block-editor.min.js` and
`tailwind-typography-classes.js` are enqueued by default in `../functions.php`.

If you would like to add new files to be processed by esbuild, add them to the
`../../javascript` folder and then add them to the `development:esbuild` key in
your `package.json` file.

DO NOT directly edit `*.min.js` files, as these files are ignored by git and
will be overwritten the next time esbuild runs.

Does that look good to you?

Meanwhile, I would suggest that putting that code directly in ./javascript/script.js is likely what I would do. It also prevents you from needing to enqueue any other files.

In terms of CSS, esbuild is likely creating the CSS file in your ./theme/js folder. From the esbuild documentation:

You can also import CSS from JavaScript. When you do this, esbuild will gather all CSS files referenced from a given entry point and bundle it into a sibling CSS output file next to the JavaScript output file for that JavaScript entry point. So if esbuild generates app.js it would also generate app.css containing all CSS files referenced by app.js.

If you want this to work seamlessly with the existing Tailwind set up, you would need to find a way to copy that CSS file to the ./tailwind/custom/components folder. If you did that, it would automatically be added to your existing Tailwind build. I've never been able to get this working with esbuild (specifically outputting the CSS file to a different location), but you have other options: You could add a process for copying the file over to your package.json file, or you could just manually create the CSS file there and update it when you update PhotoSwipe.

I'm going to convert this to a discussion—please let me know if you ahve any other questions!