Usage without CDN or build step

[wwwbarnamehadotnet]

base on this sample : https://glitch.com/edit/#!/swup-demo-basic

I want to do a simple test, I downloaded the script from npm, as shown in the image, the downloaded files are visible, but still when I test with the address
import Swup from 'https://unpkg.com/swup@4?module';
it works fine, but when I test with the address

import Swup from 'Swup.module.js?module' or
import Swup from 'Swup.module.js

, the fade effect does not run. What is the problem?

I am testing in Visual Studio Code as a server.

What actually happened? 😵‍💫

it now work when i wana test it offline

Swup and plugin versions 📝

• swup: 4.8.2 last version

What browsers are you seeing the problem on? 🧭

Chrome

Relevant log output 🤓

no any error just not work,tested on other browsers too.

URL to minimal reproduction 🔗

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

I‘ve converted the issue into a discussion as it‘s less a bug report than an implementation question.

[daun]

There's no email address. This is an open source project of volunteer contributors. If somebody finds the time to respond, they will get in touch.

[hirasso]

@wwwbarnamehadotnet I think the best way to find help would be to upload your test project as a git repo to your account and share the link to that repo here.

[wwwbarnamehadotnet]

I didn't do anything complicated or difficult, I just downloaded the script using the method below
as i read in main site i have to download package first by these ways

npm install swup
or use by cdn way like as https://unpkg.com/swup@4

but i don't want use node.js and i don't want use CDN because i just want have a simple example just use html CSS java script and run on local server. so i downloaded full package by help of npmjs.org by this address :

https://registry.npmjs.org/swup/-/swup-4.8.2.tgz

content of swup-4.8.2.tgz file are like as below :

I extracted them in a folder named aa, then I was looking for a simple example of usage, so to start, I found this example from the main site and downloaded each of the files from the link below.

https://glitch.com/edit/#!/swup-demo-basic

downloaded files list and moved inside folder aa

files downloaded :

index.html
next.html
swup.js
base.css
transitions.css

And in the previous image, it is clear that I put them together and only gave the script file address next to the files instead of the online script https://unpkg.com/swup@4 address

so i have to replace cdn address import Swup from 'https://unpkg.com/swup@4?module'; with swup.module.js from downloaded pakacge or swup.umd.js as i guess and For the run on the local server, I also used the plugin inside Visual studio Code

uploaded files here too : download from google drive

[daun]

@wwwbarnamehadotnet I think the easy options are those two: use a bundler or a cdn. It‘s certainly possible to import swup as a local ESM module, but you‘ll need to make sure any dependencies of swup (like e.g. delegate-it) are loaded locally as well. This would probably require downloading those packages and creating an import map. So it‘s possible, but somewhat complex, and there‘s currently no example in the docs because it hasn’t been a use case.

[hirasso]

Alternatively, embed Swup.umd.js via a separate <script> tag. Then, swup will be available in your main js file as window.Swup.

The umd version has swup's dependencies bundled in the same file.

[wwwbarnamehadotnet]

I have no professional experience in using bundler or maps or JavaScript. I just want to design a simple control panel for my site that is designed only with jQuery, JavaScript, HTML and CSS and does not depend on any CDN. Everything is local and in the future I want to upload my site and make it online. I would really like to be able to use this script locally and eventually upload it to my own host along with the rest of my pages. If there is a way to solve this problem, please tell me or maybe a small or customized version can be prepared or can be made. Can't all those files that are used with the CDN method be downloaded in one package and downloaded into one folder, like the package I downloaded with npm? Or is this CDN address dependent on node.js and such that it can be done with that method but not locally?

If not any way, my goal is to have a simple control panel containing a right panel and a left panel. By clicking on any link or option on the right, only the left panel or environment will display the page I want, with an interesting effect and of course without the need to refresh the page or change the browser address, that is, it will be practically a single page. At the same time, it is important to me that the scripts or written codes or popups, floating dialogs, etc. on the page that It is supposed to be displayed on the left, not corrupted, and executable.

Before I became familiar with this script, I found an article in Google searches for my purpose about using iFrame and jQuery, but I don't think it's very interesting and not very professional because each of my second, third, or other pages contains internal effects and internal scripts, and I guess I'll run into trouble with this method.

Finally, if you have any suggestions for my purpose, I would be happy to hear them. Maybe there is another or lighter script for this purpose.

[hirasso]

Here is an example for you on how to load swup locally without requiring a build step:

https://swup-with-local-umd.glitch.me/

The Swup.umd.js build is basically the same as any old JS library. It contains all necessary dependencies and can be loaded via a simple script tag:

<script src="Swup.umd.js"></script>
<script type="module" src="main.js"></script>

Inside main.js:

/** 
 * Swup is available on the window
 */
const swup = new window.Swup();

If you don't need your main script to be a module, you can even access Swup directly, without window.Swup:

<script src="Swup.umd.js"></script>
<script src="main.js"></script>

/** 
 * Swup is available globally
 */
const swup = new Swup();

[wwwbarnamehadotnet]

Thanks

Two questions :

So with this method I no longer need the files or folders downloaded in the package and just the Swup.umd.js file is enough?
Can I delete the following folders and files and keep only the file above?

types] folder
Swup.cjs file
Swup.cjs.map file
Swup.modern.js file
Swup.modern.js.map file
Swup.module.js file
Swup.module.js.map file
Swup.umd.js.map file

Can I test all the other examples in the glitch using this single file or do they require script files or other dependent files?

I mean these examples:
https://swup.js.org/getting-started/demos/
or
https://swup.js.org/getting-started/example/

[hirasso]

For swup core, the Swup.umd.js file is enough. You can safely delete the other files.

For any demos that make use of plugins, like for example the reveal demo, you will need to also download the umd versions of any plugins and load them via script tag, as well. For example for swup/parallel-plugin, it's this: https://unpkg.com/@swup/[email protected]/dist/index.umd.js. You can find the umd version by simply going to https://unpkg.com/@swup/[email protected], unpkg will redirect you to the umd file.

1. Download that file to your project
2. Rename the downloaded file so that you can later remember which plugin and version it is, e.g. parallel-plugin.0.4.0.umd.js
3. Include it in your project:

<script src="Swup.umd.js"></script>
<script src="parrallel-plugin.0.4.0.umd.js"></script>
<script src="main.js"></script>

/** 
 * Swup and SwupParallelPlugin are available globally
 */
const swup = new Swup({
  plugins: [new SwupParallelPlugin()]
});

[wwwbarnamehadotnet]

Thanks, I am currently doing tests, I will leave this section open so I can come back and put the result.

[wwwbarnamehadotnet]

I tried the examples at this address according to the method you mentioned:
https://swup.js.org/getting-started/demos

I am currently stuck at this point (fragment-support-modal section) :
https://swup.js.org/getting-started/demos/#fragment-support-modal

and the effect is not being displayed correctly. What is the reason?

parrallel-plugin.0.4.0.umd.js is same index.umd.js renamed from https://unpkg.com/@swup/parallel-plugin@0?module
[email protected] is same index.umd.js renamed from https://unpkg.com/@swup/preload-plugin@3?module'
fragment.1.1.1.umd.js is same index.umd.js renamed from https://www.unpkg.com/@swup/fragment-plugin@1?module

index.html :

swup.js :

Does it need any other dependent files? The examples before this section all worked fine and operated correctly, but why is this section not working?

[hirasso]

You need to copy the file that https://unpkg.com/@swup/parallel-plugin points to, not https://unpkg.com/@swup/parallel-plugin@0?module (so without the ?module suffix. The browser should redirect you to an index.umd.js file. That's the one you need to download.

For ALL plugins. Download the non-module file. Then you should be fine.

[wwwbarnamehadotnet]

I mentioned the same thing in the previous text. The files I renamed were usually the same file index.umd.js in dist folder. It was mentioned that, for example, I used the plugin fragment from the name index.umd.js to the name fragment.1.1.1.umd.js downloaded from https://app.unpkg.com/@swup/[email protected]/files/dist, but the effect does not run. I have attached the source of the image above.

I also mentioned that everything was working fine until Example fragment, but I ran into a problem in this part.

fragment.rar
Fragment.zip

[daun]

Please don't expect strangers on the Internet to download RAR files from your Google Drive. That's a major security issue. The best way to get others to look at your code is by creating a public repo on GitHub and linking to it. Or paste it here directly if it's not too long and a single file.

[wwwbarnamehadotnet]

The zipped version was also attached in the previous answer for better security.

Dont stuck on Rar file and here you go -> zip version address here :
https://drive.google.com/file/d/1QsII0iLlRQfKCP4yccUPSfqUsW4l5qd1/view?usp=sharing

There is no reason to upload the codes when they already exist in another address and their address is:
https://swup.js.org/getting-started/demos/#fragment-support-modal
And there is no reason to upload them again in a different form here, while the codes are not mine, the only change is about 4-5 short lines according to the same path as explained earlier.

[daun]

ZIP files aren't any better. Who knows what's in there? Virus, keylogger, whatever. I'm not downloading that, and anybody who does hasn't been online for long enough to have learned the lesson.

[daun]

There actually is a reason to upload the code here again: you want help, and that's the way you get help.

[hirasso]

@wwwbarnamehadotnet

Please learn these things and then come back here:

• how to use a bundler
• how to post a decent issue report, including error messages and minimal reproductions ("does not run" is the worst by all means)
• how to properly show your gratitude to people that are trying to help you for free

Thank you.

[wwwbarnamehadotnet]

Came back because you wanted ;) , now you have to stay here and read these kid for a few times, ok? good job :3

Explain Again just for you :

• It is based on following the same path explained by yourself and explained twice in my previous explanation.
• The path is clear, the sources are the same as the source at the following address (mentioned before)

https://swup.js.org/getting-started/demos/#fragment-support-modal

the only change is the download of the main files (index.umd.js of each plugins as mentioned before twice) and the addition of a few short lines in the script address section also clear at images and uploaded as a rar and zip files (you can see clear)

  <script src="Swup.umd.js"></script>
  <script src="fragment.1.1.1.umd.js"></script>
  <script src="[email protected]"></script>
  <script type="module" src="swup.js"></script>

• Enough thanks have already been given, two of which you can see in the previous answers and if you need more thanks, here you go: Thank you, thank you, thank you. Although I don't have time to thank you too much ;)

• Make your job easier by downloading the zip or rar file and see where the problem is. It has been mentioned twice before that the effect does not work. Just run the index file as a server.

• If you have problem with the text, it is Google Translate.

But it seems that you are having a hard time understanding my content, so don't waste any more of my time, and if you know there are problems with your script, fix it. I don't have time to listen to useless and worthless content.

Whenever you solve the problem, come back and announce the result to everyone.good kidy kid.
good luck :)).

[daun]

The library works fine. It's you making things more complicated than necessary. As you stated, you "have no professional experience in using bundler or maps or JavaScript". The maintainers of this library do, and they've been giving you enough advice to solve your problem. They also have limited patience with people that don't care enough to create a proper reproduction. It's not our job to help you. It's your job to make it easy to help you. So far, you haven't, and I don't suspect you will.