MDsveX + SvelteKit #217

janosh · 2020-10-24T14:43:27Z

janosh
Oct 24, 2020

Has anyone already tried out/figured out how to use MDsveX with svelte@next using Snowpack as bundler as demoed in https://youtu.be/qSfdtmcZ4d0? I.e. start a project with npm init svelte@next my-app && cd my-app && npm i && npm i -D mdsvex. Do I just import mdsvex in svelte.config.js and it should work?

const { mdsvex } = require(`mdsvex`)

module.exports = {
  adapter: `@sveltejs/adapter-static`,
  preprocess: mdsvex(),
  extensions: [`.svelte`, `.svx`],
}

Answered by rmunn

Mar 31, 2021

I just tried it today, and it Just Works™:

// svelte.config.cjs
const { mdsvex } = require(`mdsvex`)

module.exports = {
    extensions: ['.svelte', '.svx'],
    preprocess: [ mdsvex() ],
    // kit: { ... } omitted for brevity (unchanged from default)
};

With that svelte.config.cjs file, I can create src/routes/blogpost.svx and it Just Works. I was also able to create src/routes/[slug].svx and it was handled correctly too:

<script context="module">
    export function load({ page }) {
        const { slug } = page.params;
        if (slug) {
            return { props: { title: slug }};
        }
    }
</script>

<script>
    import Counter from '$lib/Counter.svelte';
    export let title;

View full answer

pngwn · 2020-10-24T19:27:30Z

pngwn
Oct 24, 2020
Maintainer

Something like that should work, yeah.

I have not tested this yet though.

0 replies

janosh · 2020-10-25T07:53:41Z

janosh
Oct 25, 2020
Author

I'm missing something. If I try the above config and create the following file at src/routes/test.svx,

---
title: test
---

# { title }

then start the dev server and navigate to http://localhost:3000/test, I get the following error

GET is not implemented for /test

0 replies

janosh · 2020-11-06T10:58:57Z

janosh
Nov 6, 2020
Author

Forgot to mention, I also tried this (as per the docs) but didn't work either:

module.exports = {
  extends: `@sveltejs/snowpack-config`,
  installOptions: {
    rollup: {
      plugins: [
        require(`rollup-plugin-svelte`)({
          extensions: [`.svelte`, `.svx`],
          preprocess: require(`mdsvex`).mdsvex(),
        }),
      ],
    },
  },
}

That threw

Error: Failed to load /_app/routes/test.js: NOT_FOUND
at node_modules/@sveltejs/kit/src/api/dev/loader.ts:41:10
at Generator.throw ()
at rejected node_modules/node_modules/.pnpm/[email protected]/node_modules/tslib/tslib.es6.js:72:65

0 replies

rmunn · 2021-01-05T15:03:57Z

rmunn
Jan 5, 2021

I'm hitting the same thing. Preliminary findings:

The error "GET is not implemented for /some-route" comes from @sveltejs/kit, in its render_route function in dist/renderer.js (lines 2259 to 2325 in the version I have; those line numbers will undoubtedly change in the future, but that should get you close-ish to the function location).
The render_route function is looking up endpoints in the manifest, and if options.manifest.endpoints.find((route) => route.pattern.test(request.path)); returns a falsy value then render_route does nothing.
That endpoints.find call is returning undefined for pages with a .svelte extension.
For pages with an .svx extension, OTOH, it returns an object that looks like { pattern: /^\/about\/?$/, params: [Function], load: [Function: load] }
The rest of the render_route function looks like this:

return route.load().then(async (mod) => {
    const handler = mod[request.method.toLowerCase().replace('delete', 'del')]; // 'delete' is a reserved word
    if (handler) {
        // ... very long success path omitted ...
    } else {
        return {
            status: 501,
            body: `${request.method} is not implemented for ${request.path}`,
            headers: {}
        };
}

The module that is loaded for the route when the file has an .svx extension looks like: { default: { render: [Function: render], '$$render': [Function: $$render] } }. There's no get property, only a default property, so the render_route function fails.

I also found that the manifest looked different when I used the .svelte extension and when I used the .svx extension. For a minimal repro, I created three routes:

routes/index.svelte
routes/about/index.svx (named index.svx in first test, then renamed to index.svelte in second test)
routes/about/foo.svx

By renaming index.svx to index.svelte, I was able to notice a difference in the .svelte/assets/generated/manifest.js files:

First test, with routes/about/index.svx:

import * as layout from "/_app/assets/components/layout.svelte";

const components = [
	() => import("/_app/routes/index.svelte"),
	() => import("/_app/routes/about/foo.svelte")
];

const d = decodeURIComponent;
const empty = () => ({});

export const pages = [
	{
		// index.svelte
		pattern: /^\/$/,
		params: empty,
		parts: [components[0]]
	},

	{
		// about/foo.svelte
		pattern: /^\/about\/foo\/?$/,
		params: empty,
		parts: [components[1]]
	}
];

export const ignore = [
	/^\/about\/?$/
];

export { layout };

Second test, with routes/about/index.svelte:

import * as layout from "/_app/assets/components/layout.svelte";

const components = [
	() => import("/_app/routes/index.svelte"),
	() => import("/_app/routes/about/index.svelte"),
	() => import("/_app/routes/about/foo.svelte")
];

const d = decodeURIComponent;
const empty = () => ({});

export const pages = [
	{
		// index.svelte
		pattern: /^\/$/,
		params: empty,
		parts: [components[0]]
	},

	{
		// about/index.svelte
		pattern: /^\/about\/?$/,
		params: empty,
		parts: [components[1]]
	},

	{
		// about/foo.svelte
		pattern: /^\/about\/foo\/?$/,
		params: empty,
		parts: [components[2]]
	}
];

export const ignore = [
	
];

export { layout };

The about/index.svelte entry in pages, present in the second test, is missing in the first test, and instead that pattern is found in the ignore block.

That's as far as I've gotten and I'm running out of time to investigate this today. But it looks like something is different about the manifest between having a .svelte extension and having an .svx extension, and that's causing this behavior.

0 replies

rmunn · 2021-01-05T15:09:43Z

rmunn
Jan 5, 2021

Update: This appears to have nothing to do with mdsvex!

I commented out the msdvex pre-processor in my svelte.config.js and the problem persisted. A bit more poking around led me to the create_manifest_data function in @svelte/kit's create_app.js file. Its first few lines are:

function create_manifest_data(config, extensions = '.svelte') {
	// TODO support .svelte.md etc?
	const cwd = config.files.routes;
	const component_extensions = extensions.split(' ');

And it's called in two places in @svelte/kit, one in index.js and one in index2.js. The first call looks like this:

	update() {
		const manifest_data = create_app.create_manifest_data(this.config);

		create_app.create_app({
			manifest_data,
			output: '.svelte/assets'
		});

And the second one looks like this:

async function build(config) {
	const manifest = create_app.create_manifest_data(config);

	utils.mkdirp(ASSETS);
	await rimraf(UNOPTIMIZED);
	await rimraf(OPTIMIZED);

	create_app.create_app({
		manifest_data: manifest,
		output: '.svelte/assets'
	});

In both cases, no second parameter is given to create_app.create_manifest_data, so there's no way to override the .svelte extension. Currently, that is: the TODO comment strongly hints that that ability will be added sometime in the future. But for now, the reason you're getting the "GET is not implemented for /test" errors or the 404s appears to be because svelte-kit doesn't yet handle extensions other than .svelte when it's writing manifests, and with an incorrect manifest you get incorrect behavior.

0 replies

janosh · 2021-01-05T15:41:30Z

janosh
Jan 5, 2021
Author

Thanks for this detailed report of your findings. Really excited for when the official docs for svelte-kit land and using it becomes less like a minefield.

0 replies

utherpally · 2021-01-14T08:37:29Z

utherpally
Jan 14, 2021

My current approach (work with latest sveltekit@next version)

<!-- src/routes/index.svelte -->
<script>
// Router will ignore all files start with underscore,
//  don't treat them as endpoint
  import Index from './_Index.svx';
</script>

<Index />

// svelte.config.js
module.exports = {
  extensions: [".svelte", ".svx"],
  preprocess: [
    mdsvex()
  ],
}

Tested with npm init svelte@next

0 replies

rmunn · 2021-01-14T09:51:13Z

rmunn
Jan 14, 2021

I use a similar approach, except I also want to write plain Markdown files as well. So I use .md for plain Markdown files, and .svx for Markdown+Svelte files. I also decided to put my plain Markdown files in a src/pages directory. So here's my setup:

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');
const { mdsvex } = require('mdsvex');

const mdsvex_config = {
	extensions: ['.md', '.svx'],
}
module.exports = {
	extensions: ['.svelte', ...mdsvex_config.extensions],
	preprocess: [
		sveltePreprocess(),
		mdsvex(mdsvex_config),
	],
	kit: {
		adapter: '@sveltejs/adapter-node',
		target: '#svelte'
	}
};

The extra .md extension needs to be specified in two places, once in the extensions config and once in the msdvex() call in preprocess.

Then I add a mount location and import alias for src/pages to my Snowpack config:

// snowpack.config.js
module.exports = {
	extends: '@sveltejs/snowpack-config',
	plugins: ['@snowpack/plugin-typescript'],
	mount: {
		'src/components': '/_components',
		'src/pages': '/_pages'
	},
	alias: {
		$components: './src/components',
		$pages: './src/pages'
	}
};

And then the boilerplate route file:

<!-- src/routes/about.svelte -->
<script>
    import About from '$pages/about.md'
</script>

<About/>

0 replies

jamesb93 · 2021-03-27T13:55:22Z

jamesb93
Mar 27, 2021

Has anyone here managed to get mdsvex configured with the new SvelteKit release that uses Vite?

0 replies

mcmxcdev · 2021-03-27T19:03:56Z

mcmxcdev
Mar 27, 2021

Yeah, would be great to have an example for SvelteKit!
I am especially looking for one for dynamic blog posts with .svx extension.

0 replies

DrMagPie · 2021-03-27T19:58:13Z

DrMagPie
Mar 27, 2021

Hi @jamesb93 and @mhatvan
I just started playing around with it.
and it works fine for me.

I started with ts+scss template.
and here is svelte.config.cjs that works for me

const sveltePreprocess = require('svelte-preprocess');
const adapter = require('@sveltejs/adapter-node');
const pkg = require('./package.json');
const { mdsvex } = require(`mdsvex`);

const extensions = [`.svelte`, '.md', `.mdx`, '.svx']

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
	preprocess:
		[
			sveltePreprocess(),
			mdsvex({ extensions: extensions }),
		],
	extensions: extensions,
	kit: {
		adapter: adapter(),
		target: '#svelte', // hydrate the <div id="svelte"> element in src/app.html
		vite: {
			ssr: {
				noExternal: Object.keys(pkg.dependencies || {})
			}
		}
	}
};

0 replies

mcmxcdev · 2021-03-27T20:49:49Z

mcmxcdev
Mar 27, 2021

@DrMagPie yeah that most likely works for an import of e.g. Foo.svx, but how to do make it work with a [slug].svelte where you inject a .svx blog post file named like the slug as a <slot/> ? That's how I had it with Sapper currently.

0 replies

pngwn · 2021-03-27T22:23:45Z

pngwn
Mar 27, 2021
Maintainer

I've converted this into a discussion as I think it will be valuable for others users trying to do the same!

I'll be putting together a kit & mdsvex example very soon, and will update as soon as I have it working. If people have some example sapper apps that I can take a look at, I'd love to see the sort of thing that people are doing with mdsvex and sapper, so I can try to cover the common cases.

Thanks!

2 replies

jamesb93 Mar 27, 2021

I'm using it currently to make my personal website :) https://github.com/jamesb93/personal-svelte. I also am writing my PhD in it right now where markdown is an incredibly fluid way of getting from draft > final version with a bit of styling. Luckily my institution is open to non-traditional submission types.

mcmxcdev Mar 28, 2021

This is the blog part of my project: https://github.com/mhatvan/markushatvan.com/tree/master/src/routes/blog
The only way I was able to get it work was really hacky.

The /blog/_layout.svelte file currently handles both the /blog and the /blog/[slug] views.
I would prefer a cleaner solution here moving forward anyways.

janosh · 2021-03-30T07:48:15Z

janosh
Mar 30, 2021
Author

Haven't tried it myself yet but this might be helpful: https://github.com/svelte-add/mdsvex. Linked by the official SvelteKit docs.

0 replies

rmunn · 2021-03-31T07:14:17Z

rmunn
Mar 31, 2021

I just tried it today, and it Just Works™:

// svelte.config.cjs
const { mdsvex } = require(`mdsvex`)

module.exports = {
    extensions: ['.svelte', '.svx'],
    preprocess: [ mdsvex() ],
    // kit: { ... } omitted for brevity (unchanged from default)
};

With that svelte.config.cjs file, I can create src/routes/blogpost.svx and it Just Works. I was also able to create src/routes/[slug].svx and it was handled correctly too:

<script context="module">
    export function load({ page }) {
        const { slug } = page.params;
        if (slug) {
            return { props: { title: slug }};
        }
    }
</script>

<script>
    import Counter from '$lib/Counter.svelte';
    export let title;
</script>

# Blog post

Title from URL: {title}

This page is written in Markdown. Here's some **bold** and *italic* to prove it.

And here's a counter, too: <Counter/> and it's inline.

So with the current version of Svelte-Kit (1.0.0-next.64 as of when I wrote this), everything in mdsvex just works out-of-the-box. At least, everything I've tried so far, which is quite a bit. (Layouts using Markdown frontmatter also work, though I didn't show them above). @mhatvan I think this example is what you were looking for; it's not quite what you described in #217 (comment), but I think it's better. The .svx file can be the route, instead of having to create a .svelte file for the route that does nothing but import a dynamically-named .svx file.

2 replies

DrMagPie Mar 31, 2021

Hi, might you know, is there a way to get a list of sub pages?

the goal is to dynamically create list of links to posts.
but I can't find anyway to get a list of rendered routes/pages

<ul>
  {#each posts as post }
    <li><a href="{post.url}">{post.name}</a></li>
  {/each}
</ul>

Something like this

janosh Mar 31, 2021
Author

@DrMagPie You could write a little node script that creates a module with an array containing all your blog posts in it. Something like this:

// src/listPosts.js
import fs from 'fs'

const dirname = `src/routes/blog`

const posts = fs
  .readdirSync(dirname)
  .filter((filename) => !filename.startsWith(`.`)) // remove hidden system files

fs.writeFileSync(
  `src/routes/posts.js`,
  `export default ` + JSON.stringify(posts)
)

Then in your package.json. just call that script before you build and develop:

"scripts": {
   // ...
    "prebuild": "node src/listPosts.js",
    "predev": "node src/listPosts.js",
  }

In your Svelte app, you would import the auto-generated module and render your list based on the array it contains.

rmunn · 2021-03-31T07:26:56Z

rmunn
Mar 31, 2021

See https://github.com/rmunn/svelte-kit-mdsvex-example to see this all working just as expected.

2 replies

jamesb93 Mar 31, 2021

wow! nice work.

janosh Mar 31, 2021
Author

Same experience. MDsveX and SvelteKit working together like a charm: https://github.com/janosh/svelte-geometric-bayes

janosh · 2021-04-02T07:02:32Z

janosh
Apr 2, 2021
Author

Slightly off topic but perhaps interesting to people here: I started a new repo https://github.com/janosh/awesome-svelte-kit to collect excellent SvelteKit sites in production that might serve as learning resources and/or inspiration. Everyone feel free to submit PRs for sites you've come across that you think should be added to the list, even if it's your own site. The site should be open source and fully production ready.

0 replies

vinkodlak · 2021-04-19T03:38:18Z

vinkodlak
Apr 19, 2021

Hello guys, did anyone try it with compile function imported from mdsvex instead of .svx file?

0 replies

ebauger · 2021-05-27T20:50:27Z

ebauger
May 27, 2021

Note for myself. If you want configure mdsevx with the last version of svelte kit with vite

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';
import { mdsvex } from 'mdsvex';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	extensions: ['.svelte', '.svx'],
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: [preprocess(), mdsvex()],
	//preprocess: mdsvex(),

	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: null
		})
	}
};

export default config;

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MDsveX + SvelteKit #217

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 19 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

MDsveX + SvelteKit #217

Replies: 19 comments · 6 replies

pngwn Oct 24, 2020 Maintainer

janosh Oct 25, 2020 Author

janosh Nov 6, 2020 Author

janosh Jan 5, 2021 Author

pngwn Mar 27, 2021 Maintainer

janosh Mar 30, 2021 Author

janosh Mar 31, 2021 Author

janosh Mar 31, 2021 Author

janosh Apr 2, 2021 Author

Replies: 19 comments 6 replies

pngwn
Oct 24, 2020
Maintainer

janosh
Oct 25, 2020
Author

janosh
Nov 6, 2020
Author

janosh
Jan 5, 2021
Author

pngwn
Mar 27, 2021
Maintainer

janosh
Mar 30, 2021
Author

janosh Mar 31, 2021
Author

janosh Mar 31, 2021
Author

janosh
Apr 2, 2021
Author