Some things have changed since I did the original release of my Svelte intrgration for Sitecore JSS. A new version of Sitecore JSS was released with Sitecore 9.2, Svelte has released... let me just check my notes here... 26 minor versions, there have also been some updates to some of the libraries we're using as well. So the time has come.

Routing

My initial release was using svero for routing. At the time, it felt like the most compatible routing library for what I was trying to do. It changed some though. Route matching changed and I felt like I was just fighting it. I decided to check out svelte-routing and it was closer to what I wanted but was still a bit off. I was still having to check if I was receiving a language code or just part of a path in my matched routes because I couldn't embed any constraints in my route patterns.

I thought about writing my own router but I don't have much interest in fighting that fight, so I just forked svelte-routing and modified the library to match my needs. You can view the fork for that library here, the README has a description of some of the things I changed.

GraphQL

In particular, connected GraphQL queries. The server side rendering (SSR) functions that Svelte creates look like this:

const App = require('./App.svelte');

const { head, html, css } = App.render({
	answer: 42
});

(Example taken from the API documents)

render isn't asynchronous though, which is a problem for our GraphQL queries that do run asynchronous. This really comes into play in Experience Editor and in Integrated Mode where your application relies on SSR to generate the page markup.

So we need a solution to work around this. The route I chose to take involved wrapping ApolloClient like this and using this context throughout my views whenever I needed to execute a GraphQL query.

What this allows us to do in a server side rendering situation is it allows us to capture all of the promises in our first rendering pass, wait on them, and render the page again with the queries already resolved and the data just coming from cache.

Thanks to Adam Weber for letting me run this approach by him and sending me some resources on how other frameworks are approaching this problem. Here are some of those resources I found useful:

I chose the graphql-hooks double pass method because I thought for the Svelte implementation it would be easier for me to handle accessing component state in my queries this way. My approach differs some but the basic concept remains the same.

All of this can largely be ignored if you do not need your connected GraphQL queries to run in integrated mode.

i18n

Dictionary support has finally arrived. You can view this functionality on the sample app by clicking the link to the Danish version of the Styleguide. Each time you switch a language it'll make a call to the dictionary service and fetch a new dictionary to re-render the page. The fallback is driven by the defaultLanguage value in project. In the future I'd like to explore integrating with a more complete library such as svelte-i18n.

NPM Package

The sample app now references a newly published NPM package for jss-svelte instead of my GitHub repository. Feels a little more official, right?

The NPM package is here.

Upgrade

I'm putting this last because it's the least interesting...

So not a lot really changed in terms of the project or sample site code. There is a lingering bug around getContext and setContext after a Promise returns, you can read about that bug here. Hopefully that will be merged into a release soon but I think the solution I have in place to work around it is good enough.

I did add some build npm scripts to jss-svelte so it's easier to ensure the core library compiles without issue. The built javascript isn't being used anywhere currently.

What's next?

All roads lead to Sitecore Symposium for this project. I'll be presenting this project and the process of building an integration with a client framework at the 2019 Sitecore Symposium. Here are some of the things I'd like to tackle by then:

  • TagWrapper - Don't look at this. It's embarrassing. I'm not even going to link it here. There's an open proposal in the svelte issues for dynamic tags based on props. The open issue is available here. I might try my hand at it or maybe get creative with finding a solution.
  • Polish - Honestly, while this is PoC, I'm pretty happy with how far it's come. Svelte is launching Typescript eventually (maybe?) and there's some Typescript support using pre-processors already. I'm keeping an eye on that and will adopt it when it's ready.

Conclusion

Overall, this project is inching forward. It's been a great experience working on this and sharing all of the code for it. After I finish up the features I mentioned in 'What's next?' I'll be shifting gears and writing a blog series that will serve as a companion to my Symposium presentation.

Check out the quick "Getting Started" here to start working with this project.