Hey! How's it going? The integration of Svelte with Sitecore JSS has been moving forward and I wanted to provide an update as to what is new.

It's still pretty exciting times for Svelte as a framework, it appeared on The State of JavaScript 2019 survey and made a real splash in the rankings:

Source: https://2019.stateofjs.com/

It'll be exciting to see it evolve over 2020 and see if adoption spreads over the coming year. It's great to see larger companies starting to adopt Svelte, hopefully that will help it gain momentum as well:

Source: https://2019.stateofjs.com/

Certainly a project worth keeping an eye on.

What about jss-svelte though?

Progress has continued and I've worked to weed out bugs I've discovered as well as trying to keep the project dependencies as up to date as possible. Here are some of the highlights to some things that have changed:

All NPM packages have been upgraded to their latest versions

This includes an upgrade to 3.17.1. There were no breaking changes in this upgrade and everything continued to work as expected.

Rewrite of server.js

These are some of the changes I made as part of my CloudFlare Workers blog post. Some new functions have been added to handle each discrete part of the SSR functionality.

Bye index.html

React has %%PUBLIC_URL%% that you can use to insert the absolute path into your index.html files but I couldn't find a comparable variable in Svelte. I decided to convert the index.html into a Svelte component that you can actually pass variables to. This component is used to generate an index.html dynamically by calling build:index, which is defined in the package.json. This has the added benefit of being able to pass in HTML to be rendered during SSR, so we can avoid doing string replacement.

lerna

This has been on my list to explore for a while because I had seen it in the Sitecore JSS repository and @sitecorey told me about it. I'm not sure how I ever lived without it. lerna helps you manage dependencies in a monorepo and I'm currently using it to manage my reference to jss-svelte from the sample application. It has a lot of other features that I couldn't do justice explaining, check out the project here. Adding this in exposed a small issue with dependency duplication but there is a rollup flag to dedupe dependencies, this only really was an issue when it came to using the context API in Svelte.

graphql:update

This package.json command has finally been implemented and the JSON file that is generated by running that is checked into git. This file is read when the GraphQL Apollo client is created. This eliminates the warning that was being generated at run time.

RIP TagWrapper

So this project used to have this hack TagWrapper component and it had a bunch of hardcoded tags in it that I thought were common wrapper tags. It was gross. The core issue is that Svelte just can't handle dynamic element tags currently. TagWrapper was my attempt at maintaining feature parity with the other JSS sample apps but a real solution for this problem hasn't emerged so I decided to eliminate that feature for now. I did try my hand at an implementation for this and opened a PR for it but it hasn't gained much traction since it's been opened. So now you will responsible for adding a wrapping tag for fields, here's the before and after:

Before:

<Text tag="span" field={whatever} />

After

<span><Text field={whatever} /></span>

Maybe this isn't a bad thing? We'll see. I'll keep an eye on this and explore alternatives in the future.

Conclusion

Those are the highlights, there's been various other bug fixes along the way as well. Feel free to give it a try and open any issues that you encounter along the way, getting started is really just one CLI command away:

jss create sveltetest svelte --r erzr/jss-svelte

Besides general bug fixing, my next focus is going to be adding unit test coverage across the jss-svelte library. Stay tuned!