Automatically import Svekyll components

TL;DR: import simple svekyll tags without JS imports

Do you want to use the Svekyll <Map/> component to display a map in your blog? The old way was to do this:

<script>
import Map from '$svekyll/Map.svelte';
</script>

<Map center={"28.36769° N, 80.60061° W"}/>

Now, you only need to use this single line:

<svekyll-map center={"28.36769° N, 80.60061° W"}/>

The Svekyll compiler will automatically convert it into correct Svelte imports and add the import magically.

And, if you ever decide to use a different blogging tool, tags like <svekyll-map/> will get silently ignored and are easier to remove with a quick search and replace.

Reduce blog post complexity by 33%!

This permits you to have markdown with no <script> block; only a front matter section and the content like you would see in a normal Jekyll file, but still use Svekyll components!

Caveats

For some reason, even though I am attempting to check the imports, if you have the import already in your script tag, the replacement will crash. I suspect there is an issue where some imports are in <script global> and some are in the regular <script> tag, but I'm not smart enough to figure this out right now.

The fix is to remove the imports that Svekyll wants to replace (all tags starting with <svekyll-) and let Svekyll add those imports. If you are using <svekyll-map/> then hopefully you know you can omit the import. But, if for some reason you had an import in an old file, you should remove that.

For example, this will not compile:

---
title: hello
published: true
center: [ 23, 45 ]
---

<script>
import Webmention from '$svekyll/Webmention.svelte'; // This is fine, svekyll won't try to import it.

// This following import causes problems; svekyll will try to import it and it will already be there. 
// Just remove it and both <svekyll-map/> and <Map/> will work. 
import Map from '$svekyll/Map.svelte'; 

import Foo from './Foo.svelte';
let foo = 'bar';
</script>

<svekyll-map {center}/>

<Map {center}/>

<Webmention/>

<Foo/>

# Hello

Ok.

## Goodbye

Yeah, farewell.