SvelteKit Support?

[sjmcdowall]

Just a question really -- now that SvelteKit is getting more mature and (hopefully soon) ready for 1.0. I was wondering if there is any work being done on making this package compatible with it and the Vite thing it uses -- etc. etc. :) I want to use this package in a new SvelteKit project I am creating and just wondering how much PITA I am going to have .. any ideas? :)

[illright]

To be honest, we are keeping tabs on SvelteKit and eagerly waiting for its stable release, but we haven't done any work on trying to adapt Attractions, seeing as we don't currently see practical benefit in SvelteKit (and also because we are like scared kittens who don't know where to turn for advice on things like backwards-compatibility).

However, I don't think there's that much work to be done for Attractions to support SvelteKit. I encourage you to try just running it as it is, and you may use this issue to report your findings and troubles and we will do our best to assist!

[geoidesic]

I had a go. It kinda works...

The standard installation instructions work. You can then import attractions components and use them.

What doesn't work is themeing. I have installed SCSS/SASS with Sveltkit and it works. However when I try the overrides shown in the Attractions docs, it breaks the build with the following error:

12:28:12 AM [vite] hmr update /src/routes/examples/attractions.svelte
Can't find stylesheet to import.
  ╷
2 │ @forward '~attractions/_variables' with ($button-radius: 4px)
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/routes/examples/attractions.svelte 2:1  root stylesheet
Error: Can't find stylesheet to import.
  ╷
2 │ @forward '~attractions/_variables' with ($button-radius: 4px)
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/routes/examples/attractions.svelte 2:1  root stylesheet
    at Object._newRenderError (/Users/repo/GitHub/myApp/node_modules/sass/sass.dart.js:13190:19)

[Side note: why in the world would you default to such a huge button-radius!?]

I presume this has something to do with the svelte.config.js not being right. I note that the installation instructions show the require syntax, which Sveltekit doesn't support afaik. So I had to change it to this: import makeAttractionsImporter from 'attractions/importer.js'; instead of const makeAttractionsImporter = require('attractions/importer.js');

I don't know if that's the problem or what but it doesn't like this: @forward '~attractions/_variables' with ($button-radius: 4px), although it seems happy with @use '~attractions/_variables' with ($button-radius: 4px).. but then I can't override that horrible button-radius.

[geoidesic]

Once I added the static/css/theme.scss and put the full config in like this:

import preprocess from 'svelte-preprocess';
import makeAttractionsImporter from 'attractions/importer.js';
import path from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess({
    scss: {
      importer: makeAttractionsImporter({
        // specify the path to your theme file, relative to this file
        themeFile: path.resolve('./static/css/theme.scss')
      }),
      // not mandatory but nice to have for concise imports
      includePaths: [path.resolve('./static/css')]
    }
};

export default config;

Then I get this error:

Can't find stylesheet to import.
  ╷
1 │ @use 'node_modules/attractions/_variables' as vars;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/attractions/dropdown/dropdown.svelte 1:1  root stylesheet
Error: Can't find stylesheet to import.

[geoidesic]

Then I discovered that I'd put the static/css folder in the wrong place. Moved that and now it seems to be mostly working.

One problem is that I can't seem to figure out how to adjust other theme. variables. I tried adding $border-radius like so:

@forward '~attractions/_variables' with (
  $main: green,
  $font: "'Open Sans', sans-serif",
  $border-radius: 4px,
);
$something-else: red;

but I get this error:

This variable was not declared with !default in the @used module.
  ╷
4 │   $border-radius: 4px
  │   ^^^^^^^^^^^^^^^^^^^
  ╵
  static/css/theme.scss 4:3                   @use
  src/routes/examples/attractions.svelte 2:1  root stylesheet

[geoidesic]

And then I discovered that I can't spell $button-radius! Which is why it wasn't working.

TLDR; So yeah, if you aren't absolutely useless at following instructions like me, it works :D

[illright]

Good job :D I just read through the current SvelteKit docs page and I think that we can get everything to work just by altering the behaviour of the noPrefetch prop of Buttons.

[geoidesic]

Congratulations for being the first working UI library for Sveltekit.

[johannesrave]

I also tried using it in svelte-kit, and also everything worked until I got to themeing, because of the ESM import thing... In the end I got it to work by setting importing path and __dirname in my svelte.config.js like this:

import preprocess from 'svelte-preprocess';
import makeAttractionsImporter from "attractions/importer.js";
import path from "path";
const __dirname = path.resolve();

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess({
        scss: {
            importer: makeAttractionsImporter({
                // specify the path to your theme file, relative to this file
                themeFile: path.join(__dirname, 'static/css/theme.scss'),
            }),
            // not mandatory but nice to have for concise imports
            includePaths: [path.join(__dirname, './static/css')],
        },
    }),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte'
    }
};

I realize that that was probably a noob problem to have, but if another noob finds this, happy themeing.

[saankim]

The code above worked great with the other instructions. (Maybe, I'm the noob here.) But you may add this to the instruction page for the noob like me. It's gonna really helpful!

[ar4hc]

n00b here...

but using 'pnpm`, this could be relevant

i tried the snippet https://github.com/illright/attractions/issues/258#issuecomment-864398262 above, and created an empty static/css/theme.scssfile, which got e past the first error but then and got this error:

Undefined variable.
  ╷
4 │   border-radius: vars.$chip-radius;
  │                  ^^^^^^^^^^^^^^^^^
  ╵
  node_modules/.pnpm/attractions@3.3.0_17592ffe0e35a56eeee14de95fefae03/node_modules/attractions/chip/chip.svelte 4:18  root stylesheet
2  |    import classes from '../utils/classes.js';
3  |
4  |    let _class = null;
   |                    ^
5  |    export { _class as class };
6  |    /**
Error: Undefined variable.
  ╷
4 │   border-radius: vars.$chip-radius;
  │                  ^^^^^^^^^^^^^^^^^
  ╵
  node_modules/.pnpm/attractions@3.3.0_17592ffe0e35a56eeee14de95fefae03/node_modules/attractions/chip/chip.svelte 4:18  root stylesheet

What does it try to tell me....?

[illright]

Hi n00b, I'm Dad

The theme.scss file should not be empty — it should use or forward the SCSS file of Attractions. For an example of what could be valid contents of your theme.scss file, see the third comment by geoidesic in this thread or refer to the Overriding Sass variables section of the docs on theming.