Hugo: Create a Proof of Concept using Svelte as JS framework

[bep]

This ties tightly into #5832

And although this exercise should try to be JS framework agnostic, picking Svelte isn't arbitrary:

• It's _truly reactive_ and very fast, which fits nicely into Hugo's life motto.
• It compiles to regular "plain old JavaScript" with a very small runtime (utility functions). One could possibly hope/dream for a Go compiler at some point ...
• it makes total sense on so many levels (for me, at least)

I use the following site outline as a foundation for some of my thoughts below:

svelte
├── content
│   ├── _index.md
│   ├── component.svelte
│   ├── data.json
│   └── svelte
│       ├── _index.md
│       ├── component.svelte
│       ├── data.json
│       └── mycomponent
│           ├── component.svelte
│           ├── data.json
│           └── index.md
└── layouts
    └── _default
        ├── list.html
        ├── list.js
        ├── list.json
        ├── single.html
        ├── single.js
        └── single.json

With the above in mind, this PoC should:

• Try to use the existing Hugo features to solve this: Custom Output Formats, the page/section tree with bundled resources (naming convention for data files and components, routing, bundling and code splitting etc.), shortcodes. Only consider extending Hugo when really needed and it fits nicely into the rest.
• The heavy lifting should be done via Hugo Pipes (i.e. framework agnostic)
• Investigate routing and SSR, PWA and other cool acronyms
• Investigate how shortcodes could be used to embed Svelte components in Markdown (aka mdx)

The above are my initial first thoughts...

[kaushalyap]

If Hugo started supporting Svelte things would be more awesome!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

[djatwood]

Since there is no official support I thought I'd try my hand at bodging one myself. I just took the quickstart template from svelte and modified it a bit to work with hugo. Then I added hugo to the npm scripts. This was just thrown together so feel free contribute.

Install

npx degit [email protected]:datwood/hugo-svelte.git hugo-svelte
cd hugo-svelte
npm install

Dev

npm run dev

Build

npm run build

You website files end up in public/ including the svelte files.

[o-t-w]

• Investigate how shortcodes could be used to embed Svelte components in Markdown (aka mdx)

@bep I assume you have heard of MDsveX - a Svelte equivalent of MDX?

[bep]

I assume you have heard of MDsveX - a Svelte equivalent of MDX?

I haven't, but unless I'm missing something, it wouldn't help us much (it uses markdown-it to parse the markdown, for starters).

Mapping the example in that README into "my world" would maybe look like this:

# Here’s a chart

{{ chart.linline  }}{{ svelte.Load "Chart" }}{{ /chart.linline }}

Or maybe a predefined one:

{{ chart data="foo" }}

Or

{{ svelte component="Chart" }}

I'm not sure what looks "most pretty", but there is, in my eyes, certainly less ambiguity in the "Hugo variant".

[hdoro]

I stopped using Hugo back in 2017 due to my difficulty with the Go templating. As a JS-only dev I really miss my console logs and the likes, and so seeing this thread gave me _tons_ of hope to be able to go back to Hugo!

I'm currently using Svelte + Sapper, and have extensive experience with Gatsby + React, so I might be of help in shaping the APIs. As long as it doesn't involve understanding Go, let me know how I can help, bep ☺️

[stusmitharoo]

@DanielAtwood Thank you that worked perfect in my project nice and simple

[sw-yx]

fwiw mdsvex has moved from markdown-it to remark

[inwardmovement]

Things seem to move a bit according to this discussion: Compiling Svelte with Go?. Particularly see https://github.com/evanw/esbuild/issues/8 and https://github.com/evanw/esbuild/issues/111.