CODEWITHSUNDEEP
jquerysveltesapper
ZAky
ZAky

Reputation: 1307

Importing UI external DOM manipulator to svelte client

I am not a frontend developer so I hope I use the right terms here.

I am playing with sapper.

I found a free jQuery, Bootstrap html template and migrate it to sapper.

I extracted some code segment to be components and put all the resources under static folder. Actually every thing is working fine.

The problem is I have a repetitive script tag in all of my routes. It seems to me that there is a better way to do this.

<svelte:head>
  <script src="js/modernizr-2.6.2.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.flexslider-min.js"></script>
  <script src="js/main.js"></script>
  <!-- FOR IE9 below -->
  <!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]-->
</svelte:head>

Please don't tell me I should not use jQuery with sapper. I download templates and I understand the jQuery code is for visual effects.

Upvotes: 2

Views: 1796

Answers (2)

CreativeDifference
CreativeDifference

Reputation: 64

A possible solution is to put

<svelte:head>
  <script src="js/modernizr-2.6.2.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.flexslider-min.js"></script>
  <script src="js/main.js"></script>
  <!-- FOR IE9 below -->
  <!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]-->
</svelte:head>

<slot/>

into a _layout.svelte file inside of your src/routes directory, as the contents of it are applied to every route in your project. Read more about layouts in Sapper here.

Upvotes: 0

Dawid Loranc
Dawid Loranc

Reputation: 892

You can add jQuery or other scripts via npm by using commands like npm install jquery. Or if you prefer yarn package manager, by yarn add jquery.

Then you can import necessary scripts in your component, by using:

import jQuery from 'jquery';

An example of usage on Borat image in routes/index.svelte from Sapper template:

<script>
import jQuery from 'jquery';
import { onMount } from 'svelte';

onMount(() => {
    jQuery('img').click(() => {
        console.log('test');
    });
});
</script>

Upvotes: 4

Related Questions