1import"./DsnmJJEf.js";import"./BIgZka8i.js";import{f as c,A as e,z as ee,w as n,a as p,y as s,n as ne}from"./i4PsxTnU.js";import{h as a}from"./BzzV_2Ex.js";import{S as T}from"./CIjudhMk.js";import{C as H}from"./CMMW53Jc.js";const se={title:"Breaking changes in SvelteKit, August 2022",date:"2022-08-17",updated:"2022-08-19",categories:["svelte","javascript","web"],coverImage:"sveltekit-breaking-changes.png",coverWidth:16,coverHeight:9,excerpt:"SvelteKit introduced breaking changes to its routing and data loading in August 2022. Learn how to convert from the old way of doing things to the new."},{title:ke,date:fe,updated:me,categories:ve,coverImage:ye,coverWidth:we,coverHeight:be,excerpt:je}=se;var ae=c("<p>The migration tool is very nice. However, it likely canât fix everything for you automatically; youâll probably be left with a list of to-dos after running it.</p>"),oe=c("<p><code>.md</code> files wonât work in SvelteKit out of the box; it requires some setup. This is just to show an example of how you might structure a blog.</p>"),te=c("<p>In fact, you actually <em>canât</em> prefix a file or folder inside of <code>src/routes</code> with a <code>+</code>, as itâs now a special, reserved symbol.</p>"),pe=c("<p>In the new routing system, we <em>opt in</em> to routes, rather than selectively opting files and folders out.</p>"),ce=c("<p>Any <code>.js</code> files mentioned could also be <code>.ts</code> files instead, if using TypeScript.</p>"),re=c('<p>SvelteKit introduced a new syntax for its routing, as well as for its data loading, in the newest pre-1.0 release. Itâs a complete overhaul of how <code>src/routes</code> works (from pages to endpoints), as well as a significant change to how and where you can use SvelteKitâs powerful <code>load</code> function.</p> <p>If you were on an older version of SvelteKit prior to the new release (August 16, 2022), youâll probably need to make some serious changes to your file structure and code before you can update your version of SvelteKit.</p> <p><a href="https://github.com/sveltejs/kit/discussions/5774" rel="nofollow">This guide</a> will walk you through the technical steps you need to go through in order to make the changes. It contains a handy <code>npx</code> script you can run that will make many of the necessary changes for you, and will highlight <em>in your code</em> where you need to make further updates manually.</p> <!> <p>This post will help cover whatâs changed, and how to convert the syntax and structure from the old to the new.</p> <p>Letâs dig in.</p> <h2 id="routing-syntax"><a aria-hidden="true" tabindex="-1" href="#routing-syntax"><span class="icon icon-link"></span></a>Routing syntax</h2> <p>Previously, SvelteKit routes could be either files or folders. For example, this would be how youâd structure a site with <code>/about</code>, <code>/blog</code>, and <code>/blog/post-title</code> pages:</p> <pre class="language-fs"><!></pre> <!> <p>In the latest update, <strong>every route must be inside a folder</strong>; no more <code>index</code> files or files named for the page they represent.</p> <p>Instead, the route will take the folderâs name, and a new <code>+page.svelte</code> component is the contents of the page:</p> <pre class="language-fs"><!></pre> <p>If you think that looks worse: I agree with you. Itâs much messier, and further away from the routing structure weâve come to know from PHP, and other meta frameworks.</p> <p>However, give it a chance; thereâs good reason for the changes. <code>+page</code> isnât the only new file in this system. In fact, there are a handful of <code>+</code> files that have special meaning in the new routing system.</p> <p>Plus, this makes page creation much more explicit. No route or page will exist unless thereâs a corresponding <code>+</code> file. There are advantages to this weâll cover later.</p> <!> <h3 id="converting-to-the-new-routing-syntax"><a aria-hidden="true" tabindex="-1" href="#converting-to-the-new-routing-syntax"><span class="icon icon-link"></span></a>Converting to the new routing syntax</h3> <p>Again, <a href="https://github.com/sveltejs/kit/discussions/5774" rel="nofollow">
1the migration guide</a> and migration tool in it can do much of the work of converting for you. This is just to help understand the changes (in case you have to do anything manually).</p> <ul><li>Any <code>index.*</code> file becomes <code>+page.*</code> instead</li> <li>Any named page goes inside a folder named for the page slug, and the file gets renamed to <code>+page.svelte</code>.</li></ul> <p><strong>Example:</strong></p> <ul><li><code>src/routes/index.svelte</code> now becomes <code>src/routes/+page.svelte</code></li> <li><code>src/routes/about.svelte</code> now becomes <code>src/routes/about/+page.svelte</code></li></ul> <p>If you were previously plopping a bunch of Markdown files together in the same folderâor using a <em>lot</em> of named page filesâthis probably sounds <em>incredibly</em> daunting.</p> <p>For pages, you may have to just bite the bullet and tuck all those files into their own folders.</p> <p>For posts, however, rather than changing all of their names and nesting them in their own individual folders, you can convert to a dynamic route, and load the files indirectly. That requires some setup in the siteâs code, but it saves renaming and relocating all your Markdown files.</p> <p>A dynamic route is wrapped in braces (<code>[]</code>), and uses its <code>+page.svelte</code> file (and probably a <code>load</code> function) to dynamically load the proper post. That would look something like this:</p> <pre class="language-fs"><!></pre> <p>Within the dynamic <code>[slug]/+page.svelte</code> file, you can grab whichever markdown file corresponds with <code>slug</code>, and render its contents.</p> <p>Itâs a little weird to explain, but thereâs more on that in my <a href="/blog/build-static-sveltekit-markdown-blog">SvelteKit Markdown Blog post</a>. Also, see the <a href="https://kit.svelte.dev/docs/routing#page" rel="nofollow">routing docs</a>. I only mention it here so you know you have options that <em>donât</em> require creating specially named folders for each of your individual posts.</p> <h2 id="layouts"><a aria-hidden="true" tabindex="-1" href="#layouts"><span class="icon icon-link"></span></a>Layouts</h2> <p>Layouts fortunately havenât changed much. The only real difference is that now, instead of beginning with <code>__</code>, layout files <em>also</em> begin with <code>+</code>.</p> <pre class="language-fs"><!></pre> <pre class="language-fs"><!></pre> <p>That means the conversion is pretty much as simple as changing the name of the file from <code>__layout.svelte</code> to <code>+layout.svelte</code>âalthough depending on what you were doing <em>inside</em> the layout, there may be more to it. More on that in a bit.</p> <p>Also worth noting: the same applies to <code>__error.svelte</code>; it can simply be changed to <code>+error.svelte</code> instead.</p> <h2 id="hidden-files-and-folders-in-srcroutes"><a aria-hidden="true" tabindex="-1" href="#hidden-files-and-folders-in-srcroutes"><span class="icon icon-link"></span></a>Hidden files and folders in <code>src/routes</code></h2> <p>Previously, any file or folder inside of <code>src/routes</code> could be âhiddenâ from the router by prefixing its name with an underscore (<code>_</code>). For example, a folder full of Markdown posts you intended to load with a dynamic route, or perhaps a component you only intended to <code>import</code>:</p> <pre class="language-fs"><!></pre> <p>One big benefit of the new <code>+</code> file system is that <strong>we no longer need to explicitly hide files and folders from the router</strong>. This lets us colocate files related to a specific route within that routeâs folder, without worrying about inadvertently creating new routes.</p> <!> <p>Want a page there? Put a <code>+page.svelte</code> component in.</p> <p>Want an endpoint? Make that a <code>+server.js</code> file instead. (<em>More on those in a bit.</em>)</p> <p>In all other cases: that thing wonât get a route, even though itâs inside the <code>routes</code> folder, like it would have before. If it ainât a <code>+</code> file, it ainât gonna show up.</p> <p>This means you donât actually <em>need</em> to do any conversion here; a <code>_hidden</code> folder is still hidden. You just donât <em>need</em> the underscore in front of its name anymore.</p> <h2 id="the-load-function"><a aria-hidden="true" tabindex="-1" href="#the-load-function"><span class="icon icon-link"></span></a>The <code>load</code> function</h2> <p>This is the other really big part of the newest breaking changes.</p> <p><strong>Previously</strong>, a <code>load</code> function went inside a second <code><script></code> tag in a pageâs Svelte file, with a <code>context="module"</code> attribute separating that tag from the normal Svelte component <code><script></code> tag:</p> <pre class="language-svelte"><!></pre> <p><strong>In the new system</strong>, thereâs no more <code><script context="module"></code>. In fact, the <code>load</code> function now lives in a file all its own, named either <code>+page.js</code> or <code>+page.server.js</code>. Weâll cover the difference between the two in a moment.</p> <p>Either way, the file is colocated with a corresponding <code>+page.svelte</code> file, like so:</p> <pre class="language-fs"><!></pre> <p><strong>Before rendering the page</strong>, SvelteKit will run the <code>load</code> function found in <code>+page.js</code> (or <code>+page.server.js</code>) automatically, and pass whatever that function returns to the page component as a <code>data</code> prop.</p> <!> <p>Beyond that, everything is the same as before with the <code>load</code> function:</p> <ul><li>The <code>load</code> function must be exported;</li> <li><code>load</code> has access to parameters like <code>url</code> and <code>params</code>; and</li> <li><code>load</code> must <code>return</code> an object (which, again, is passed to the page as a prop, to be used in the template). (<em>It does <strong>not</strong> need to pass the data using a <code>prop</code> property anymore, however</em>.)</li></ul> <p><strong>One other thing:</strong> to execute a <code>load</code> function on <em>all</em> pages, youâll do so in a <code>+layout.js</code> file, which lives alongside the <code>+layout.svelte</code> file.</p> <h3 id="converting-from-the-old-load-function-to-the-new">
1<a aria-hidden="true" tabindex="-1" href="#converting-from-the-old-load-function-to-the-new"><span class="icon icon-link"></span></a>Converting from the old <code>load</code> function to the new</h3> <p>Depending on what your <code>load</code> function is doing, this may be a simple conversion, or it may require some finessing. But for starters:</p> <ol><li><p>Anywhere you have a <code><script context="module"></code> tag in a Svelte page component, copy its contents into a <code>+page.js</code> (or <code>+page.server.js</code>) file, and place that file alongside the one you copied the function out of.</p></li> <li><p>Be sure your <code>load</code> function <code>return</code>s data. Previously, you needed to do so inside a <code>props</code> object; now you no longer need to. Whatever <em>was</em> inside of <code>props</code> can now just <em>be</em> the returned object.</p></li> <li><p>Modify your template files accordingly. Wherever the <code>load</code> functionâs data was being consumed, youâll probably need to update the variable names.</p></li></ol> <p>Data returned from the <code>load</code> function is available in the template as the <code>data</code> prop. So you now only export one prop, named <code>data</code>, and use it from there.</p> <pre class="language-svelte"><!></pre> <h3 id="differences-between-pagejs-and-pageserverjs"><a aria-hidden="true" tabindex="-1" href="#differences-between-pagejs-and-pageserverjs"><span class="icon icon-link"></span></a>Differences between <code>+page.js</code> and <code>+page.server.js</code></h3> <p>The main differences between the two are:</p> <ul><li><code>+page.js</code> <strong>runs on both the server and the client</strong> (<em>as the load function did previously</em>).</li> <li><code>+page.server.js</code> <strong>runs on the <em>server only</em></strong>. It can also respond to HTTP verbs.</li></ul> <p>Which to use will depend mainly on your use case. Thereâs one key thing to remember though, which is: <strong>fetch works differently in the two files!</strong></p> <ul><li><p>In <code>+page.js</code>, youâll pass <code>fetch</code> as a parameter, like this:</p> <pre class="language-js"><!></pre></li></ul> <p>Thatâs because <strong>the client and server have different versions of fetch</strong>; the Node version and the browser <code>fetch</code> API are <em>not</em> identical. So when you pass <code>fetch</code> as a parameter to a <code>load</code> function, SvelteKit does a bit of magic (and adds some niceties) to make sure your fetch call works, and works well, on both the server and client.</p> <p>This is unnecessary when using <code>+page.server.js</code>, however, for obvious reasons; code that only runs on the server only needs the server version of <code>fetch</code>. (In fact, if you <em>try</em> to pass <code>fetch</code> as a parameter inside <code>+page.server.js</code>, youâll get an error.)</p> <p>This also means when using <code>fetch</code> on the server only, youâll need to be explicit about the domain of the request; no relative paths. (Easy enough, with <code>url.origin</code>.) But you can use relative routes with the <code>fetch</code> helper in <code>+page.js</code>.</p> <pre class="language-js"><!></pre> <h2 id="server-routes-api-endpoints"><a aria-hidden="true" tabindex="-1" href="#server-routes-api-endpoints"><span class="icon icon-link"></span></a>Server routes (API endpoints)</h2> <p>Previously, to create an endpoint, you would drop a <code>.js</code> (or <code>.ts</code> file) somewhere into <code>src/routes</code>, and include the data type it was meant to return as part of the name of that file.</p> <p>For example: if you wanted to return a list of posts as JSON at the path <code>/api/posts.json</code>, this would be your folder structure:</p> <pre class="language-fs"><!></pre> <p>The new structure is similar. By now, youâve probably guessed the file we need begins with a <code>+</code>. In this case, itâs <code>+server.js</code>, and while we <em>can</em> have <code>.json</code> be a part of the path name, we donât actually have to.</p> <pre class="language-fs"><!></pre> <p>Again, the <code>posts</code> folder <em>could</em> be named <code>posts.json</code>, if you wanted to keep the path the same. It really just depends what you want the route to look like when visited in the browser; thereâs no practical difference. (<em>In the new example above, the route would be <code>/api/posts</code>, with no filetype suffix; renaming the folder to <code>posts.json</code> would make the route <code>/api/posts.json</code>.</em>)</p> <p>Another change to be aware of: previously, SvelteKit handled setting the proper headers for our endpoint responses, as well as convert
1ing the data to the proper format. (<em>It could do all this easily, since we were required to put the data type in the file name.</em>)</p> <pre class="language-js"><!></pre> <p><em>Now</em>, however, <strong>server routes <em>must</em> return a proper <a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/Response" rel="nofollow">Response object</a></strong>.</p> <p>That would be a pain to do on our own, but fortunately, SvelteKit ships with a <code>json</code> function available to do all the conversion and everything for us. We just need to import it, then wrap whatever data we return in that function call.</p> <pre class="language-js"><!></pre> <p>Even if you use the conversion script mentioned above, youâll still need to adjust your endpointsâ responses; adjust relative file paths (since SvelteKitâs new routing syntax often requires nesting files a level deeper); and handle implementing the <code>json()</code> responses.</p> <p>The only other big difference to be aware ofâwhich you may have noticed alreadyâis that the HTTP verb functions accepted by a server route (endpoint) now must be capitalized.</p> <pre class="language-js"><!></pre> <p>Oh, and one last thing: since weâre not returning an object with a <code>status</code> and a <code>body</code> anymore, weâll want to import SvelteKitâs <code>error</code> function wherever we need to return a non-200 status.</p> <pre class="language-js"><!></pre> <h3 id="converting-server-routes"><a aria-hidden="true" tabindex="-1" href="#converting-server-routes"><span class="icon icon-link"></span></a>Converting server routes</h3> <p>As with pages, you may need to create new named folders for any server routes (API endpoints).</p> <ul><li>Any <code>index</code> files should be renamed to <code>+server.js</code> files;</li> <li>Any named endpoint file should be put in a folder, named for the endpoint path, and be renamed to <code>+server.js</code>.</li></ul> <p><strong>Example:</strong></p> <ul><li><code>src/routes/api/index.json.js</code> becomes <code>src/routes/api/+server.js</code></li> <li><code>src/routes/api/posts.json.js</code> becomes <code>src/routes/api/post/+server.js</code></li></ul> <p>Youâll also need to convert any HTTP verb function names to all-uppercase (<code>get</code> becomes <code>GET</code>, <code>post</code> becomes <code>POST</code>, etc.)</p> <p>And rather than <code>return</code> a JavaScript object with a <code>status</code> and <code>body</code>, youâll need to either use SvelteKitâs <code>json</code> helper (if returning JSON); or, return a <code>new Response()</code> constructor, which takes two arguments: body, and options.</p> <h2 id="wrapup"><a aria-hidden="true" tabindex="-1" href="#wrapup"><span class="icon icon-link"></span></a>Wrapup</h2> <p>Thatâs it for the major changes. Best of luck converting your SvelteKit sites!</p> <p>Once more, be sure to check out <a href="https://github.com/sveltejs/kit/discussions/5774" rel="nofollow">the official migration guide</a> for more details on converting your existing site. Itâs got an excellent migration tool that will help do much of the hard work for you. It goes into much more detail than I have here on many things (especially including TypeScript and typing your code).</p> <p>If Iâve left anything out, or made any mistakes, feel free to let me know in the comments.</p>',1);function xe($){var I=re(),S=e(ee(I),6);H(S,{children:(o,r)=>{var t=ae();p(o,t)}});var l=e(S,10),B=n(l);a(B,()=>`<code class="language-fs">-- Old routing structure: 2 3ð src 4â ð routes 5 ⣠ð index.svelte 6 ⣠ð about.svelte 7 â ð blog 8 ⣠ð index.svelte 9 â ð post-title.md</code>`),s(l);var P=e(l,2);T(P,{children:(o,r)=>{var t=oe();p(o,t)}});var i=e(P,6),E=n(i);a(E,()=>`<code class="language-fs">-- New routing structure: 10 11ð src 12â ð routes 13 ⣠ð +page.svelte 14 ⣠ð about 15 â â ð +page.svelte 16 â ð blog 17 ⣠ð +page.svelte 18 â ð post-title 19 â ð +page.md</code>`),s(i);var A=e(i,8);T(A,{children:(o,r)=>{var t=te();p(o,t)}});var d=e(A,20),M=n(d);a(M,()=>`<code class="language-fs">ð src 20â ð routes 21 â ð blog 22 ⣠ð (a bunch of markdown files here) 23 â ð [slug] 24 â +page.svelte</code>`),s(d);var u=e(d,10),q=n(u);a(q,()=>`<code class="language-fs">-- Old layout naming: 25 26ð src 27â ð routes 28 â ð __layout.svelte</code>`),s(u);var h=e(u,2),C=n(h);a(C,()=>`<code class="language-fs">-- New layout naming: 29 30ð src 31â ð routes 32 â ð +layout.svelte</code>`),s(h);var g=e(h,10),F=n(g);a(F,()=>`<code class="language-fs">-- Old hidden file/folder structure: 33 34ð src 35â ð routes 36 ⣠ð _hidden-folder 37 â ð _hidden-component.svelte</code>`),s(g);var K=e(g,4);H(K,{children:(o,r)=>{var t=pe();p(o,t)}});var k=e(K,16),R=n(k);a(R,()=>`<code class="language-svelte"><span class="token comment"><!-- Old load function --></span> 38<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">context</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 39 <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">load</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 40 <span class="token comment">// Do stuff here</span> 41 <span class="token keyword">return</span> <span class="token punctuation">{</span> 42 <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span> 43 <span class="token comment">// The stuff to return</span> 44 <span class="token punctuation">}</span> 45 <span class="token punctuation">}</span><span class="token punctuation">;</span> 46 <span class="token punctuation">}</span><span class="token punctuation">;</span> 47</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> 48 49<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 50 <span class="token comment">// Normal Svelte component stuff here</span> 51</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code>`),s(k);var f=e(k,6),L=n(f);a(L,()=>`<code class="language-fs">ð src 52â ð routes 53 ⣠ð +page.svelte 54 â ð +page.js
55 (or +page.server.js)</code>`),s(f);var O=e(f,4);T(O,{children:(o,r)=>{var t=ce();p(o,t)}});var m=e(O,16),z=n(m);a(z,()=>`<code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 56 <span class="token comment">// Data returned from `load` is automatically available as `data`</span> 57 <span class="token keyword">export</span> <span class="token keyword">let</span> data<span class="token punctuation">;</span> 58</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> 59 60<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> 61 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>data<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> 62 63 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>data<span class="token punctuation">.</span>date<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 64<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span></code>`),s(m);var v=e(m,10),N=n(v),W=e(n(N),2),G=n(W);a(G,()=>`<code class="language-js"><span class="token comment">// +page.js only</span> 65<span class="token keyword">import</span> <span class="token punctuation">{</span> json <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">
65'@sveltejs/kit'</span><span class="token punctuation">;</span> 66 67<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">load</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> fetch <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 68 <span class="token keyword">const</span> myData <span class="token operator">=</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'/relative/path/here'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 69 <span class="token keyword">return</span> <span class="token function">json</span><span class="token punctuation">(</span>myData<span class="token punctuation">)</span><span class="token punctuation">;</span> 70<span class="token punctuation">}</span><span class="token punctuation">;</span></code>`),s(W),s(N),s(v);var y=e(v,8),J=n(y);a(J,()=>`<code class="language-js"><span class="token comment">// +page.server only</span> 71<span class="token keyword">import</span> <span class="token punctuation">{</span> json <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">
71'@sveltejs/kit'</span><span class="token punctuation">;</span> 72 73<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">load</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> url <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 74 <span class="token keyword">const</span> myData <span class="token operator">=</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token punctuation">.</span>origin<span class="token interpolation-punctuation punctuation">}
74</span></span><span class="token string">/my/api/path</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> 75 <span class="token keyword">return</span> <span class="token function">json</span><span class="token punctuation">(</span>myData<span class="token punctuation">)</span><span class="token punctuation">;</span> 76<span class="token punctuation">}</span><span class="token punctuation">;</span></code>`),s(y);var w=e(y,8),Y=n(w);a(Y,()=>`<code class="language-fs">-- Old endpoint structure: 77 78ð src 79â ð routes 80 â ð api 81 â ð posts.json.js</code>`),s(w);var b=e(w,4),Q=n(b);a(Q,()=>`<code class="language-fs">-- New endpoint structure: 82 83ð src 84â ð routes 85 â ð api 86 â ð posts 87 â ð +server.js</code>`),s(b);var j=e(b,6),U=n(j);a(U,()=>`<code class="language-js"><span class="token comment">// Previously:</span> 88<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">get</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 89 <span class="token keyword">const</span> message <span class="token operator">=</span> <span class="token string">'Hello!'</span><span class="token punctuation">;</span> 90 91 <span class="token keyword">return</span> <span class="token punctuation">{</span> 92 <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> 93 <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token punctuation">{</span> 94 message 95 <span class="token punctuation">}</span> 96 <span class="token punctuation">}</span><span class="token punctuation">;</span> 97<span class="token punctuation">}</span><span class="token punctuation">;</span></code>`),s(j);var x=e(j,6),V=n(x);a(V,()=>`<code class="language-js"><span class="token comment">// The new way:</span> 98<span class="token keyword">import</span> <span class="token punctuation">{</span> json <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">
98'@sveltejs/kit'</span><span class="token punctuation">;</span> 99 100<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">GET</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 101 <span class="token keyword">const</span> message <span class="token operator">=</span> <span class="token string">'Hello!'</span><span class="token punctuation">;</span> 102 <span class="token keyword">return</span> <span class="token function">json</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> 103<span class="token punctuation">}</span><span class="token punctuation">;</span></code>`),s(x);var _=e(x,6),X=n(_);a(X,()=>`<code class="language-js"><span class="token comment">// Old:</span> 104<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">get</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 105 <span class="token comment">// Do the thing</span> 106<span class="token punctuation">}</span><span class="token punctuation">;</span> 107 108<span class="token comment">// New:</span> 109<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">
109GET</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 110 <span class="token comment">// Do the thing</span> 111<span class="token punctuation">}</span><span class="token punctuation">;</span></code>`),s(_);var D=e(_,4),Z=n(D);a(Z,()=>`<code class="language-js"><span class="token comment">// Old:</span> 112<span class="token keyword">return</span> <span class="token punctuation">{</span> 113 <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> 114 <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'not found'</span><span class="token punctuation">)</span> 115<span class="token punctuation">}</span><span class="token punctuation">;</span> 116 117<span class="token comment">// New:</span> 118<span class="token keyword">import</span> <span class="token punctuation">{</span> error <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">
118'@sveltejs/kit'</span><span class="token punctuation">;</span> 119 120<span class="token keyword">try</span> <span class="token punctuation">{</span> 121 <span class="token comment">//return something here</span> 122<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> message <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 123 <span class="token keyword">throw</span> <span class="token function">error</span><span class="token punctuation">(</span><span class="token number">400</span><span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span> 124<span class="token punctuation">}</span></code>`),s(D),ne(22),p($,I)}export{xe as default,se as metadata};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.