I'm excited to finally share what I've been working on lately with everyone. It'll be my largest public release and I'm pretty excited about it. If you've been following me on Twitter, which uh... you should! Anyway, I've been teasing some development snapshots from a Sitecore JSS application that I've been building using Svelte as a framework.

I love the official frameworks and I've been reading through their implementations a lot to see how things are implemented. I also ended up using pieces of them, in particular, around field type implementations. I love that they're open source and they have some pretty amusing comments sprinkled through them.

Thoughts on Svelte

Svelte compiles your application and does a lot of the work that some other frameworks do at compile time instead of at run-time. The framework disappears during compilation and you're left with only your compiled application at the end.

There's also zero boilerplate. Zero. Your components have a <script> tag and all of the logic, props, imports and variable declarations go in there. You can also have a <style> tag where you can write super generic (for example, target the div tag) and it will scope those styles to just that single component during compilation.

Example Svelte Component

The rest of the file is dedicated to building out your component. There is specific syntax for loops and if statements and a really neat syntax for waiting for promises to complete.

Svelte also supports server side rendering, which is important because Sitecore JSS does a full server side rendering of pages when you're in integrated mode situations (including Experience Editor).

Svelte is moving fast. There's probably been eight minor releases since I started this project so it might be a little difficult to keep up with the latest and greatest. There are some things you will miss if you've been working and you'll probably type className everywhere (it's just class in Svelte...) It's kind of refreshing and you should give it a try.

Some useful Svelte links:

Svelte Component Library

I followed the pattern of the official Sitecore JSS libraries and created a dedicated package for all of the global and shared fields that are used in the project. All that code is available here.

A lot of these components have been adapted from the official React/Vue components and they all support Experience Editor in the same ways.

Currently supported fields:

  • Date
  • File
  • Image
  • Link
  • Placeholder
  • Rich Text
  • Text

You can of course write your own fields in your projects and leverage them to build out components. I'd love to see any field components you build for your projects. I'll be putting this on npm in the near future as well.

Svelte Sample Application

Staying consistent with the official frameworks, I'm providing a sample application that uses the component library and handles server side rendering and many other things out of the box. All of that code is available here. The entire Sitecore JSS style guide is available to get you started with some examples and showcase what is available.

A few small things aren't currently available. I haven't implemented the dictionary yet and it isn't set up to translate hard coded text. It'll be added in the near future though. GraphQL is functional thanks to svelte-apollo and there are example integrated and connected queries in the sample application. You may need to work around some issues around Experience Editor if you're using connected queries, there isn't a good solution for that quite yet.

Some components allow a tag prop to be passed in, which you might be used to doing with React. I have a solution in place for this but it's not ideal and relies on a hardcoded list of tags allowed. I'm watching this GitHub issue for Svelte to hopefully add support for this and to replace my temporary implementation.

Check out the README on the GitHub repository to get started.

Some related links:

  • Svero - the router the sample application uses
  • svelte-apollo - GraphQL library used to execute queries
  • Rollup - used in the sample application

Summary

Give it a try! I'd love to hear some feedback. This has been a learning experience from me and I took this from a blank folder and built it out step by step. I couldn't have done it without the official frameworks being open sourced, so thank you to Sitecore for making those available.