Add Svelte App To 11ty Page With Help From ChatGPT

2023-02-26

Svelte

11ty

Javascript

ChatGPT

Frontend

The Goal

When I was writing the article about Meter And Progress HTML Elements, I wanted to make it interactive and so to use some simple reactive JS framework for it - originally I thought of Svelte because I haven't really used it before, but when I tried to turn one blog page into a Svelte app it didn't look promising - I thought I'd need to redefine the renderer for one page somehow (the blog is in Markdown), so I ended up juts loading SolidJS by CDN URL and using it on the page.

I kinda still wanted to try Svelte so I thought that'd make an interesting exercise of trying ChatGPT - because I wanted to try it and I couldn't come up with anything reasonably relevant.

Look Ma No Hands!

And so I went asking ChatGPT for how to do it - first how to create a Svelte app, by asking "How to create simple Svelte app", and then "Show me simple Svelte app please".

Interestingly enough, first request only gave some command-line suggestions on how to scaffold the app, and second provided actual example:

    <script>
      let count = 0;
      
      function increment() {
        count += 1;
      }
      
      function decrement() {
        count -= 1;
      }
    </script>
    
    <button on:click={increment}>+1</button>
    <span>{count}</span>
    <button on:click={decrement}>-1</button>

and

    <script>
      import Counter from './Counter.svelte';
    </script>
    
    <Counter />

Which resembles Svelte tutorial examples from https://svelte.dev/examples/reactive-assignments as well as sample app created by npm init vite.

And that's good, however the problem was that scaffolding instructions ChatGPT suggested were all outdated - svelte create my-app doesn't work, and neither does npx degit sveltejs/template my-svelte-app - however when googling for the latter, it mentions to use npm init vite.

Then to find a solution to the problem of adding Svelte app t 11ty, I formulated it as "how to add Svelte app to 11ty page". It suggested yet another obsolete scaffolding mechanism, npx create-svelte-app my-svelte-app - it didn't work, but I already help ViteJS-based app operational.

The instructions to add the app to the page were also not entirely correct:

Create your Svelte app: You can create a new Svelte app using a tool like create-svelte-app, or you can use an existing Svelte app.

Build your Svelte app: Once you have created your Svelte app, you need to build it. Run npm run build in your Svelte app directory to build your app. This will create a public/build directory containing your app's JavaScript and CSS files.

Add Svelte files to 11ty project: Copy the Svelte public/build files into your 11ty project directory.

Include Svelte files in 11ty template: In the 11ty template where you want to include your Svelte app, you can include the Svelte JavaScript and CSS files that you copied in step 3.

    <!-- Example 11ty template -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>My 11ty Page</title>
        <link rel="stylesheet" href="/path/to/svelte-app.css" />
      </head>
      <body>
        <div id="svelte-app"></div>
        <script src="/path/to/svelte-app.js"></script>
      </body>
    </html>

In the example above, the link tag references the CSS file generated by your Svelte app, and the script tag references the JavaScript file generated by your Svelte app.

Initialize Svelte app: Finally, you need to initialize your Svelte app by adding the following code to your JavaScript file:

    import App from './App.svelte';
    
    const app = new App({
        target: document.getElementById('svelte-app')
    });

Which is a mix of a correct instructions (building an app and copying build files and adding them to a page) and incorrect ones (importing the App.svelte is already a part of a compiled code).

All In All

In the end, the information direction is legit - make an app, build an app, add build to the page (kinda the same as with a pre-built framework, but the whole app instead). But it's not really reliable - which I actually wasn't expecting it to be, but to outline the impression: it's a nice toy, and I imagine the less precise tasks (like writing a CV or any sort of generic text) would yield a better result, but any strict factual requests are not usable - or not immediately usable, anyway.

So as a result, here's the sample Svelte app - not doing much, but it's working:

Liar Liar Pants On Fire

As a bit of fun, I also tried asking a lesser known but still fairly strictly factual information, such as "Who founded Moscow State University?", to which I received a bunch of pleasantly delivered nonsense:

Moscow State University was founded by Prince Nikolay Ivanovich Lobachevsky and Count Sergey Semenovich Uvarov in 1755. The university is one of the oldest and largest universities in Russia and has a rich history of scientific and academic excellence.

Of which the real thing is only a founding year (and, well, "one of the oldest and largest" part). Which is OK because the way the prediction model works does not promise any correct information - but to emphasise the importance to take it for it is.

The results of "Tell me a fairy tale about a red bug on a shiny platypus in a blue forest of death" were pretty satisfactory though ;)