Push recent changes

pull/8237/head
Puru Vijay 4 years ago
parent 5a14b6955a
commit c7d9862008

@ -0,0 +1,5 @@
{
"singleQuote": true,
"printWidth": 120,
"useTabs": true
}

@ -0,0 +1,105 @@
---
title: "What's new in Svelte: February 2023"
description: 'Minor versions and major satisfaction'
author: Dani Sandoval
authorURL: https://dreamindani.com
---
Since last month, we've seen a couple of minor versions across Svelte and SvelteKit, a bunch of educational content to support the 1.0 release, as well as the [State of JS survey](https://stateofjs.com) results...
Svelte, once again, increased in satisfaction and interest, so thanks to everyone who voted!
Let's dive into the updates...
## What's new in SvelteKit
Work in the Svelte ecosystem this month has been focused on SvelteKit bug fixes and addressing feedback from the 1.0 launch. One of the more awaited [bug fixes to SvelteKit's base path support](https://github.com/sveltejs/kit/issues/2958) landed, which means that you can now create SvelteKit projects on remote development environments. There have been several [new releases](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md) with these fixes as well as a handful of new features such as:
- The submitter's value will now be included automatically when progressively enhancing <form method="get"> (**1.0.3**, [#8273](https://github.com/sveltejs/kit/pull/8273))
- Added an error in dev mode if global fetch is used with relative URL (**1.0.8**, [#8370](https://github.com/sveltejs/kit/pull/8370))
- A warning will now indicated that hydration may break if comments are removed from HTML (**1.0.11**, [#8423](https://github.com/sveltejs/kit/pull/8423))
- A warning will occur when of page options are used in `.svelte` files or a missing `<slot />` in layout is detected (**1.1.0**, [#8475](https://github.com/sveltejs/kit/pull/8475))
- The new `text(...)` helper makes it easy to generate text responses (**1.2.0**, [#8371](https://github.com/sveltejs/kit/pull/8371))
- The public env can now be accessed within app.html (**1.2.0**, [Docs](https://kit.svelte.dev/docs/project-structure#project-files-src), [#8449](https://github.com/sveltejs/kit/pull/8449))
- An error will now be thrown if cookie exceeds size limit (**1.2.1**, [#8591](https://github.com/sveltejs/kit/pull/8591))
- The generated `tsconfig` can now be modified (**1.3.0**, [#8606](https://github.com/sveltejs/kit/pull/8606))
## What's new in Svelte and Language Tools
- Added support for `html.customData` from the VS Code HTML language service (**extensions-107.0.0**, [#1824](https://github.com/sveltejs/language-tools/pull/1824))
- Autocompletion for stores that need to be imported ([#1823](https://github.com/sveltejs/language-tools/pull/1823)) and object/class member snippets ([#1817](https://github.com/sveltejs/language-tools/pull/1817)) has been added to the Svelte extension (**extensions-107.0.0**)
- Improve detection of promises that are also functions (**Svelte 3.55.1**, [#8162](https://github.com/sveltejs/svelte/pull/8162))
- Add missing types and properties for the global `part` attribute and `on:submit`, respectively (**Svelte 3.55.1**, [#8181](https://github.com/sveltejs/svelte/issues/8181))
- Lots of performance and bug fixes (**Svelte 3.55.1\*** and **extensions-107.0.x**)
\*for all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
---
## Community Showcase
**Apps & Sites built with Svelte**
- [Titowest.com](https://titowest.com/) is a series of photographic films by the writer & photographer, Tito West
- [Verve](https://github.com/ParthJadhav/verve) is a lightweight and blazingly fast launcher for accessing and opening applications, files and documents
- [Round The World](https://rtw.voyage/) is an interactive guide to the travels of Andrew Carnegie
- [Linear Regression](https://mlu-explain.github.io/linear-regression/) is an interactive blog post visual introduction to (almost) everything you should know about linear regression
- [Flotes](https://flotes.app/) is a free note taking app enhanced with flashcard features
- [nomie](https://github.com/open-nomie/nomie6-oss) is a Daily Journal for short attention spans
- [nocode.gallery](https://nocode.gallery/) is a collection of stunning websites made with no code
- [Whom to Follow](https://whomtofollow.com/) helps you find accounts you'll love by searching the network of accounts you already follow
- [poker-simulator](https://github.com/hucancode/poker-simulator) is a poker simulation and evaluation tool
- [Pixelicious](https://www.pixelicious.xyz/) converts your images into pixel art
- [Apple Music](https://music.apple.com/us/browse) is now built with Svelte ([proof](https://twitter.com/BrittneyPostma/status/1615381017300271104))
**Learning Resources**
_Featuring Svelte Contributors and Ambassadors_
- [SvelteKit | Rich Harris | ViteConf 2022](https://www.youtube.com/watch?v=-OMPfr56kXI)
- [Talking Gradio and AI with pngwn 🐧](https://www.svelteradio.com/episodes/gradio-with-pngwn) from Svelte Radio
- [Progressively enhancing the Marvel By Year filter](https://geoffrich.net/posts/marvel-filter-state/) and [Advent of SvelteKit 2022: my favorite demos](https://geoffrich.net/posts/advent-of-sveltekit-2022/) by Geoff Rich
- [EP 13: Contributing more to open source + a Svelte Newsletter showcase rewind ⏪](https://bookmarkbeat.substack.com/p/contributing-more-to-open-source) by Dani Sandoval
_To Watch or Hear_
- [I built a $5 chat app with Pocketbase & Svelte. Will it scale?](https://www.youtube.com/watch?v=gUYBFDPZ5qk) by Fireship
- [The Comprehensive Introduction To SvelteKit](https://www.youtube.com/watch?v=obmiLi3bhkQ), [What Svelte UI Library Should You Use?](https://www.youtube.com/watch?v=O0mNU0maItY) and [Learn Everything About SvelteKit Routing (Pages, Layout, Nested Routes)](https://www.youtube.com/watch?v=7hXHbGj6iE0) by Joy of Code
- [Progressive Enhancement in SvelteKit (use:enhance)](https://www.youtube.com/watch?v=jXtzWMhdI2U), [Are Your Routes Actually Protected?](https://www.youtube.com/watch?v=UbhhJWV3bmI) and [10X Your SvelteKit Developer Experience in VSCode](https://www.youtube.com/watch?v=13v50nLh67Q) by Huntabyte
- [The easiest realtime app Ive ever built](https://www.youtube.com/watch?v=UbOaAtHWidc) by Beyond Fireship
- [Angular developers can learn Svelte so fast...](https://www.youtube.com/watch?v=lKdw_z9qmPU) by Joshua Morony
- [SvelteKit + PocketBase Integration: User Login and Registration](https://www.youtube.com/watch?v=AxPB3e-3yEM) by Jian Yuan Lee
- [Marvels Of Using Svelte and SvelteKit - JSJ 566](https://topenddevs.com/podcasts/javascript-jabber/episodes/marvels-of-using-svelte-and-sveltekit-jsj-566) with Tracey Lee and Adam L Barrett
_To Read_
- [A practical first look at the Svelte framework](https://mainmatter.com/blog/2023/01/24/sveltekit-super-rentals/) by Daniel Beer
- [State Modeling in Svelte with XState](https://github.com/annaghi/xstate-svelte-workshop) is the port of the Frontend Masters React + XState workshop written in Svelte and built with SvelteKit!
- [🚀 Code your SvelteKit website faster with Stylify CSS](https://stylifycss.com/blog/code-your-sveltekit-website-faster-with-stylify-css/) by Stylify CSS
- [🎮 Five Svelte Games To Learn How To Code](https://tomaszs2.medium.com/five-svelte-games-to-learn-how-to-code-f36ae6e58923) by Tom Smykowski
- [How to make declarative (code-based) router instead of file-based router in SvelteKit](https://dev.to/devpunk/how-to-make-declarativecode-based-router-instead-of-file-based-router-in-sveltekit-2-3dd4) by Dev Punk
- [How to import tailwindcss custom config in JS/TS parts of a SvelteKit app](https://gist.github.com/0gust1/aa8c8b831428cdd7a5535e92cbf02f04) by 0gust1
- [SvelteKit Internals: Load function](https://www.okupter.com/blog/sveltekit-internals-load-function) and [Svelte and CSS](https://www.okupter.com/blog/svelte-and-css) by Justin Ahinon
- [Internationalization Formatting with Intl + SSR + SvelteKit](https://www.captaincodeman.com/internationalization-formatting-with-intl-ssr-sveltekit) by Captain Codeman
- [Typesafe i18n with SvelteKit](https://blog.encodeart.dev/typesafe-i18n-with-sveltekit) by Andreas Söderlund
- [Authorization in your SvelteKit app](https://cerbos.dev/blog/authorization-in-your-sveltekit-app) by Adam Barrett
- [Validate your form using Sveltekit, Tailwindcss, Felte and Yup](https://medium.com/@Heesel/validate-your-form-using-sveltekit-tailwindcss-felte-and-yup-ddc11cd04717) by Hessel
- [SvelteKit Form Actions bound to TypeScript class + Validation (yup) w/dynamic array](http://enehana.nohea.com/general/sveltekit-form-actions-bound-to-typescript-class-validation-yup-w-dynamic-array/) by Hekili Tech
- [Smooth Page Transitions with SvelteKit](https://philkruft.dev/blog/smooth-page-transitions-with-sveltekit/) by Phil Kruft
- [Redis Integration in SvelteKit: A Game-Changer for Session Management](https://dev.to/theether0/redis-integration-in-sveltekit-a-game-changer-for-session-management-84i) by Shivam Meena
- [SvelteKit and GitHub Pages](https://andrewlester.net/blog/posts/sveltekit-and-github-pages) by Andrew Lester
- [Tailwind + Sveltekit in 2023](https://medium.com/@gentmitch/tailwind-sveltkit-in-2023-44c19d91c8fd) by Mitch Gent
- [Svelte Stores Tutorial: Share Data Between Multiple Components](https://learnjavascripts.com/development/web-development/frameworks/svelte/svelte-stores-tutorial-share-data-between-multiple-components/) by Vincent Widerberg
**Libraries, Tools & Components**
- [Sveltepress](https://sveltepress.site/) is a simple, easy to use, content centered site build tool with the full power of SvelteKit
- [Svelte Form Helper](https://www.npmjs.com/package/svelte-form-helper) is a lightweight helper for form validation with Svelte
- [Dapper UI](https://github.com/Bastian/dapper-ui) is a sleek and modern UI component library for Svelte, offering full TypeScript support and extensive documentation
- [TeilUI](https://sidharth-anand.github.io/teil-ui/) is a better way to build design systems with Svelte
- [Neodrag](https://www.neodrag.dev/) is an SSR-friendly, multi-framework draggable library
- [Svelvet](https://www.svelvet.io/), a UI library for Svelte, is now 5.0 (read more [here](https://medium.com/@efergus1/svelvet-5-0-a-community-driven-update-cfcc93e7b7a7))
- [Svelte Inview](https://github.com/maciekgrzybek/svelte-inview) is a Svelte action that monitors an element enters or leaves the viewport/parent element
- [html2svelte](https://github.com/drbh/html2svelte) makes it easy to convert HTML to Svelte components in a snap
Thanks for reading! Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte)

@ -8,18 +8,18 @@
"name": "svelte.dev", "name": "svelte.dev",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@supabase/supabase-js": "^2.5.0", "@supabase/supabase-js": "^2.7.0",
"@sveltejs/repl": "0.0.1", "@sveltejs/repl": "0.0.3",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"devalue": "^4.2.2", "devalue": "^4.2.3",
"do-not-zip": "^1.0.0", "do-not-zip": "^1.0.0",
"flru": "^1.0.2" "flru": "^1.0.2"
}, },
"devDependencies": { "devDependencies": {
"@resvg/resvg-js": "^2.2.0", "@resvg/resvg-js": "^2.2.0",
"@sveltejs/adapter-auto": "^1.0.2", "@sveltejs/adapter-auto": "^1.0.2",
"@sveltejs/kit": "^1.3.3", "@sveltejs/kit": "^1.3.7",
"@sveltejs/site-kit": "3.1.0", "@sveltejs/site-kit": "../../../site-kit/packages/site-kit/package",
"@sveltejs/vite-plugin-svelte": "^2.0.2", "@sveltejs/vite-plugin-svelte": "^2.0.2",
"degit": "^2.8.4", "degit": "^2.8.4",
"dotenv": "^16.0.3", "dotenv": "^16.0.3",
@ -35,9 +35,22 @@
"shelljs": "^0.8.5", "shelljs": "^0.8.5",
"svelte": "^3.55.1", "svelte": "^3.55.1",
"svelte-check": "^3.0.3", "svelte-check": "^3.0.3",
"typescript": "^4.9.4", "typescript": "^4.9.5",
"vite": "^4.0.4", "vite": "^4.0.4",
"vite-imagetools": "^4.0.17" "vite-imagetools": "^4.0.18"
}
},
"../../../site-kit/packages/site-kit/package": {
"name": "@sveltejs/site-kit",
"version": "3.0.3",
"dev": true,
"license": "MIT",
"devDependencies": {
"@sveltejs/kit": "^1.3.6",
"@sveltejs/package": "^1.0.2",
"svelte": "^3.55.1",
"typescript": "^4.9.5",
"vite": "^4.0.4"
} }
}, },
"node_modules/@babel/runtime": { "node_modules/@babel/runtime": {
@ -1190,9 +1203,9 @@
} }
}, },
"node_modules/@supabase/gotrue-js": { "node_modules/@supabase/gotrue-js": {
"version": "2.10.1", "version": "2.10.2",
"resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.10.1.tgz", "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.10.2.tgz",
"integrity": "sha512-vn7gMCfv9GQlZjpb+fU5GB69ktZ+5WnxaaofGO1DSmJYrir2rcy6FY/tbyTs6h51waVpXQUu1FACjD9lHIfwzw==", "integrity": "sha512-tzfPtEPnLfeghxDvSS28/AiWgBcwNPjG70Tn1owlB2mumsf4xkTfXiZBYUjtCCL65/bUncs8Pbive4tL+vfIgA==",
"dependencies": { "dependencies": {
"cross-fetch": "^3.1.5" "cross-fetch": "^3.1.5"
} }
@ -1206,9 +1219,9 @@
} }
}, },
"node_modules/@supabase/realtime-js": { "node_modules/@supabase/realtime-js": {
"version": "2.4.0", "version": "2.6.0",
"resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.4.0.tgz", "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.6.0.tgz",
"integrity": "sha512-cq+hfzOg06pF1WknQbfRLS4iMo2kuQ5ZXPRzsDoD4nnHXLgzgf52TDOIpRl443u7K3TPH3CBL5cJtbEmc1DiMw==", "integrity": "sha512-tOVulMobhpxyDuu8VIImpL8FXmZOKsGNOSyS5ihJdj2xYmPPvYG+D2J51Ewfl+MFF65tweiB6p9N9bNIW1cDNA==",
"dependencies": { "dependencies": {
"@types/phoenix": "^1.5.4", "@types/phoenix": "^1.5.4",
"websocket": "^1.0.34" "websocket": "^1.0.34"
@ -1223,12 +1236,12 @@
} }
}, },
"node_modules/@supabase/supabase-js": { "node_modules/@supabase/supabase-js": {
"version": "2.5.0", "version": "2.7.0",
"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.5.0.tgz", "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.7.0.tgz",
"integrity": "sha512-8GwMdtx1pOBtNfFryZ/3zZ5erfhz1eA133q4IyvXqXvqxp4uHyjZuJDEhA6HTpdIH0nMAdWZpny1APx7Vrrchw==", "integrity": "sha512-0Ry6rcxeya0VRbPh6fHfgPcmH7X9gMILon7/PWoVJSjYsQntv7EGUNNeHtLutBlm8St74s5Q4sjsqJOPslDG4Q==",
"dependencies": { "dependencies": {
"@supabase/functions-js": "^2.0.0", "@supabase/functions-js": "^2.0.0",
"@supabase/gotrue-js": "^2.7.2", "@supabase/gotrue-js": "^2.10.2",
"@supabase/postgrest-js": "^1.1.1", "@supabase/postgrest-js": "^1.1.1",
"@supabase/realtime-js": "^2.4.0", "@supabase/realtime-js": "^2.4.0",
"@supabase/storage-js": "^2.1.0", "@supabase/storage-js": "^2.1.0",
@ -1248,16 +1261,16 @@
} }
}, },
"node_modules/@sveltejs/kit": { "node_modules/@sveltejs/kit": {
"version": "1.3.3", "version": "1.3.7",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.3.3.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.3.7.tgz",
"integrity": "sha512-z/Of+rnKhNCvFArymTpmiNsAZZnclD8qR9d/YZJi3ZziLh/OI7L/Ca8/n6Hnd5NqLKB6/NzOC0Fgr12VHMY3nQ==", "integrity": "sha512-H0V8qpd7sax/f/i90lSBEVjubuCkex9M1KvARdptwirLDL9qtJXRUClK25zrDi9IpqIMtbxYnZmfiaaTLcxTGQ==",
"dev": true, "dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"@sveltejs/vite-plugin-svelte": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^2.0.0",
"@types/cookie": "^0.5.1", "@types/cookie": "^0.5.1",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"devalue": "^4.2.2", "devalue": "^4.2.3",
"esm-env": "^1.0.0", "esm-env": "^1.0.0",
"kleur": "^4.1.5", "kleur": "^4.1.5",
"magic-string": "^0.27.0", "magic-string": "^0.27.0",
@ -1280,11 +1293,11 @@
} }
}, },
"node_modules/@sveltejs/repl": { "node_modules/@sveltejs/repl": {
"version": "0.0.1", "version": "0.0.3",
"resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.0.1.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.0.3.tgz",
"integrity": "sha512-k4D4e5kcPQ2rjT6Bmklj5innp9qfvR7v6DM9e8id99f1yTy/5g+QWUMYxENY1A+QlH3goUr0ITGrU37AJ+Xo7Q==", "integrity": "sha512-IcJa1SjS6ZopT4hpCA3iGmcQ6fn44M7GPLiSDeWQwVvRc7npyCoNB6G9POwsWxFdsBV1gzCHTmEnmOOpFsRnmQ==",
"dependencies": { "dependencies": {
"@sveltejs/site-kit": "2.1.3", "@sveltejs/site-kit": "2.1.4",
"acorn": "^8.7.0", "acorn": "^8.7.0",
"codemirror": "^5.65.1", "codemirror": "^5.65.1",
"estree-walker": "^3.0.1", "estree-walker": "^3.0.1",
@ -1294,18 +1307,16 @@
} }
}, },
"node_modules/@sveltejs/repl/node_modules/@sveltejs/site-kit": { "node_modules/@sveltejs/repl/node_modules/@sveltejs/site-kit": {
"version": "2.1.3", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-2.1.3.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-2.1.4.tgz",
"integrity": "sha512-yu1ot40b1X+JWnCAyqxe4tahPE9iDQpmV3S8kdrSopoQSU1Jyt3M2wPYfwxuJxiQfYLUlIYaT3VJpM2jYa7tFw==", "integrity": "sha512-PxpbiCWYXJ320abc6ucp3AXhh6YCggf6ea+EVA6W+wCBe45UFoChfoeQYeD6sQxPZN25XntoS4clZeYnt9H93Q==",
"dependencies": { "dependencies": {
"golden-fleece": "^1.0.9" "golden-fleece": "^1.0.9"
} }
}, },
"node_modules/@sveltejs/site-kit": { "node_modules/@sveltejs/site-kit": {
"version": "3.1.0", "resolved": "../../../site-kit/packages/site-kit/package",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.1.0.tgz", "link": true
"integrity": "sha512-Vv9Efzax+NMRZUfZ9TdUqQYicj2Z3kynLkUUdGPfahjlFEwQ3EGyj1vVCg5jxyqvNUgOsVVUb35nXI5CPsmCfA==",
"dev": true
}, },
"node_modules/@sveltejs/vite-plugin-svelte": { "node_modules/@sveltejs/vite-plugin-svelte": {
"version": "2.0.2", "version": "2.0.2",
@ -1340,9 +1351,9 @@
"integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==" "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ=="
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "16.9.1", "version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.9.1.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
"integrity": "sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==", "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
"dev": true "dev": true
}, },
"node_modules/@types/phoenix": { "node_modules/@types/phoenix": {
@ -1804,9 +1815,9 @@
} }
}, },
"node_modules/devalue": { "node_modules/devalue": {
"version": "4.2.2", "version": "4.2.3",
"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.2.2.tgz", "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.2.3.tgz",
"integrity": "sha512-Pkwd8qrI9O20VJ14fBNHu+on99toTNZFbgWRpZbC0zbDXpnE2WHYcrC1fHhMsF/3Ee+2yaW7vEujAT7fCYgqrA==" "integrity": "sha512-JG6Q248aN0pgFL57e3zqTVeFraBe+5W2ugvv1mLXsJP6YYIYJhRZhAl7QP8haJrqob6X10F9NEkuCvNILZTPeQ=="
}, },
"node_modules/do-not-zip": { "node_modules/do-not-zip": {
"version": "1.0.0", "version": "1.0.0",
@ -2209,6 +2220,12 @@
"@types/node": "16.9.1" "@types/node": "16.9.1"
} }
}, },
"node_modules/image-q/node_modules/@types/node": {
"version": "16.9.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.9.1.tgz",
"integrity": "sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==",
"dev": true
},
"node_modules/imagetools-core": { "node_modules/imagetools-core": {
"version": "3.3.1", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-3.3.1.tgz", "resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-3.3.1.tgz",
@ -3565,9 +3582,9 @@
} }
}, },
"node_modules/typescript": { "node_modules/typescript": {
"version": "4.9.4", "version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"dev": true, "dev": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
@ -3672,9 +3689,9 @@
} }
}, },
"node_modules/vite-imagetools": { "node_modules/vite-imagetools": {
"version": "4.0.17", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-4.0.17.tgz", "resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-4.0.18.tgz",
"integrity": "sha512-Nwe9zYrQBcIsmb21ABgr18WXycIa0CPnXpwJ6CmCHBZq0iies5PiYg2J45hQFmuEVNErX6ixARmNZILXxeJUXw==", "integrity": "sha512-PpvOy7eDQadfuJNarwPU9X8nK0AjtRsyxhfMjqg/wrAyssNgeaZWMGlWQK/U3YhV9+wpdV5Mep8FZvGa31IY1Q==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@rollup/pluginutils": "^5.0.0", "@rollup/pluginutils": "^5.0.0",
@ -3685,9 +3702,9 @@
} }
}, },
"node_modules/vite/node_modules/rollup": { "node_modules/vite/node_modules/rollup": {
"version": "3.12.0", "version": "3.12.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.0.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz",
"integrity": "sha512-4MZ8kA2HNYahIjz63rzrMMRvDqQDeS9LoriJvMuV0V6zIGysP36e9t4yObUfwdT9h/szXoHQideICftcdZklWg==", "integrity": "sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==",
"dev": true, "dev": true,
"bin": { "bin": {
"rollup": "dist/bin/rollup" "rollup": "dist/bin/rollup"
@ -4559,9 +4576,9 @@
} }
}, },
"@supabase/gotrue-js": { "@supabase/gotrue-js": {
"version": "2.10.1", "version": "2.10.2",
"resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.10.1.tgz", "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.10.2.tgz",
"integrity": "sha512-vn7gMCfv9GQlZjpb+fU5GB69ktZ+5WnxaaofGO1DSmJYrir2rcy6FY/tbyTs6h51waVpXQUu1FACjD9lHIfwzw==", "integrity": "sha512-tzfPtEPnLfeghxDvSS28/AiWgBcwNPjG70Tn1owlB2mumsf4xkTfXiZBYUjtCCL65/bUncs8Pbive4tL+vfIgA==",
"requires": { "requires": {
"cross-fetch": "^3.1.5" "cross-fetch": "^3.1.5"
} }
@ -4575,9 +4592,9 @@
} }
}, },
"@supabase/realtime-js": { "@supabase/realtime-js": {
"version": "2.4.0", "version": "2.6.0",
"resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.4.0.tgz", "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.6.0.tgz",
"integrity": "sha512-cq+hfzOg06pF1WknQbfRLS4iMo2kuQ5ZXPRzsDoD4nnHXLgzgf52TDOIpRl443u7K3TPH3CBL5cJtbEmc1DiMw==", "integrity": "sha512-tOVulMobhpxyDuu8VIImpL8FXmZOKsGNOSyS5ihJdj2xYmPPvYG+D2J51Ewfl+MFF65tweiB6p9N9bNIW1cDNA==",
"requires": { "requires": {
"@types/phoenix": "^1.5.4", "@types/phoenix": "^1.5.4",
"websocket": "^1.0.34" "websocket": "^1.0.34"
@ -4592,12 +4609,12 @@
} }
}, },
"@supabase/supabase-js": { "@supabase/supabase-js": {
"version": "2.5.0", "version": "2.7.0",
"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.5.0.tgz", "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.7.0.tgz",
"integrity": "sha512-8GwMdtx1pOBtNfFryZ/3zZ5erfhz1eA133q4IyvXqXvqxp4uHyjZuJDEhA6HTpdIH0nMAdWZpny1APx7Vrrchw==", "integrity": "sha512-0Ry6rcxeya0VRbPh6fHfgPcmH7X9gMILon7/PWoVJSjYsQntv7EGUNNeHtLutBlm8St74s5Q4sjsqJOPslDG4Q==",
"requires": { "requires": {
"@supabase/functions-js": "^2.0.0", "@supabase/functions-js": "^2.0.0",
"@supabase/gotrue-js": "^2.7.2", "@supabase/gotrue-js": "^2.10.2",
"@supabase/postgrest-js": "^1.1.1", "@supabase/postgrest-js": "^1.1.1",
"@supabase/realtime-js": "^2.4.0", "@supabase/realtime-js": "^2.4.0",
"@supabase/storage-js": "^2.1.0", "@supabase/storage-js": "^2.1.0",
@ -4614,15 +4631,15 @@
} }
}, },
"@sveltejs/kit": { "@sveltejs/kit": {
"version": "1.3.3", "version": "1.3.7",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.3.3.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.3.7.tgz",
"integrity": "sha512-z/Of+rnKhNCvFArymTpmiNsAZZnclD8qR9d/YZJi3ZziLh/OI7L/Ca8/n6Hnd5NqLKB6/NzOC0Fgr12VHMY3nQ==", "integrity": "sha512-H0V8qpd7sax/f/i90lSBEVjubuCkex9M1KvARdptwirLDL9qtJXRUClK25zrDi9IpqIMtbxYnZmfiaaTLcxTGQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@sveltejs/vite-plugin-svelte": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^2.0.0",
"@types/cookie": "^0.5.1", "@types/cookie": "^0.5.1",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"devalue": "^4.2.2", "devalue": "^4.2.3",
"esm-env": "^1.0.0", "esm-env": "^1.0.0",
"kleur": "^4.1.5", "kleur": "^4.1.5",
"magic-string": "^0.27.0", "magic-string": "^0.27.0",
@ -4635,11 +4652,11 @@
} }
}, },
"@sveltejs/repl": { "@sveltejs/repl": {
"version": "0.0.1", "version": "0.0.3",
"resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.0.1.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.0.3.tgz",
"integrity": "sha512-k4D4e5kcPQ2rjT6Bmklj5innp9qfvR7v6DM9e8id99f1yTy/5g+QWUMYxENY1A+QlH3goUr0ITGrU37AJ+Xo7Q==", "integrity": "sha512-IcJa1SjS6ZopT4hpCA3iGmcQ6fn44M7GPLiSDeWQwVvRc7npyCoNB6G9POwsWxFdsBV1gzCHTmEnmOOpFsRnmQ==",
"requires": { "requires": {
"@sveltejs/site-kit": "2.1.3", "@sveltejs/site-kit": "2.1.4",
"acorn": "^8.7.0", "acorn": "^8.7.0",
"codemirror": "^5.65.1", "codemirror": "^5.65.1",
"estree-walker": "^3.0.1", "estree-walker": "^3.0.1",
@ -4649,9 +4666,9 @@
}, },
"dependencies": { "dependencies": {
"@sveltejs/site-kit": { "@sveltejs/site-kit": {
"version": "2.1.3", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-2.1.3.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-2.1.4.tgz",
"integrity": "sha512-yu1ot40b1X+JWnCAyqxe4tahPE9iDQpmV3S8kdrSopoQSU1Jyt3M2wPYfwxuJxiQfYLUlIYaT3VJpM2jYa7tFw==", "integrity": "sha512-PxpbiCWYXJ320abc6ucp3AXhh6YCggf6ea+EVA6W+wCBe45UFoChfoeQYeD6sQxPZN25XntoS4clZeYnt9H93Q==",
"requires": { "requires": {
"golden-fleece": "^1.0.9" "golden-fleece": "^1.0.9"
} }
@ -4659,10 +4676,14 @@
} }
}, },
"@sveltejs/site-kit": { "@sveltejs/site-kit": {
"version": "3.1.0", "version": "file:../../../site-kit/packages/site-kit/package",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.1.0.tgz", "requires": {
"integrity": "sha512-Vv9Efzax+NMRZUfZ9TdUqQYicj2Z3kynLkUUdGPfahjlFEwQ3EGyj1vVCg5jxyqvNUgOsVVUb35nXI5CPsmCfA==", "@sveltejs/kit": "^1.3.6",
"dev": true "@sveltejs/package": "^1.0.2",
"svelte": "^3.55.1",
"typescript": "^4.9.5",
"vite": "^4.0.4"
}
}, },
"@sveltejs/vite-plugin-svelte": { "@sveltejs/vite-plugin-svelte": {
"version": "2.0.2", "version": "2.0.2",
@ -4690,9 +4711,9 @@
"integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==" "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ=="
}, },
"@types/node": { "@types/node": {
"version": "16.9.1", "version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.9.1.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
"integrity": "sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==", "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
"dev": true "dev": true
}, },
"@types/phoenix": { "@types/phoenix": {
@ -5025,9 +5046,9 @@
"dev": true "dev": true
}, },
"devalue": { "devalue": {
"version": "4.2.2", "version": "4.2.3",
"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.2.2.tgz", "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.2.3.tgz",
"integrity": "sha512-Pkwd8qrI9O20VJ14fBNHu+on99toTNZFbgWRpZbC0zbDXpnE2WHYcrC1fHhMsF/3Ee+2yaW7vEujAT7fCYgqrA==" "integrity": "sha512-JG6Q248aN0pgFL57e3zqTVeFraBe+5W2ugvv1mLXsJP6YYIYJhRZhAl7QP8haJrqob6X10F9NEkuCvNILZTPeQ=="
}, },
"do-not-zip": { "do-not-zip": {
"version": "1.0.0", "version": "1.0.0",
@ -5352,6 +5373,14 @@
"dev": true, "dev": true,
"requires": { "requires": {
"@types/node": "16.9.1" "@types/node": "16.9.1"
},
"dependencies": {
"@types/node": {
"version": "16.9.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.9.1.tgz",
"integrity": "sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==",
"dev": true
}
} }
}, },
"imagetools-core": { "imagetools-core": {
@ -6304,9 +6333,9 @@
} }
}, },
"typescript": { "typescript": {
"version": "4.9.4", "version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"dev": true "dev": true
}, },
"ultrahtml": { "ultrahtml": {
@ -6361,9 +6390,9 @@
}, },
"dependencies": { "dependencies": {
"rollup": { "rollup": {
"version": "3.12.0", "version": "3.12.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.0.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz",
"integrity": "sha512-4MZ8kA2HNYahIjz63rzrMMRvDqQDeS9LoriJvMuV0V6zIGysP36e9t4yObUfwdT9h/szXoHQideICftcdZklWg==", "integrity": "sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==",
"dev": true, "dev": true,
"requires": { "requires": {
"fsevents": "~2.3.2" "fsevents": "~2.3.2"
@ -6372,9 +6401,9 @@
} }
}, },
"vite-imagetools": { "vite-imagetools": {
"version": "4.0.17", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-4.0.17.tgz", "resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-4.0.18.tgz",
"integrity": "sha512-Nwe9zYrQBcIsmb21ABgr18WXycIa0CPnXpwJ6CmCHBZq0iies5PiYg2J45hQFmuEVNErX6ixARmNZILXxeJUXw==", "integrity": "sha512-PpvOy7eDQadfuJNarwPU9X8nK0AjtRsyxhfMjqg/wrAyssNgeaZWMGlWQK/U3YhV9+wpdV5Mep8FZvGa31IY1Q==",
"dev": true, "dev": true,
"requires": { "requires": {
"@rollup/pluginutils": "^5.0.0", "@rollup/pluginutils": "^5.0.0",

@ -16,18 +16,18 @@
"test": "uvu -r ts-node/register src/lib/server/markdown" "test": "uvu -r ts-node/register src/lib/server/markdown"
}, },
"dependencies": { "dependencies": {
"@supabase/supabase-js": "^2.5.0", "@supabase/supabase-js": "^2.7.0",
"@sveltejs/repl": "0.0.1", "@sveltejs/repl": "0.0.3",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"devalue": "^4.2.2", "devalue": "^4.2.3",
"do-not-zip": "^1.0.0", "do-not-zip": "^1.0.0",
"flru": "^1.0.2" "flru": "^1.0.2"
}, },
"devDependencies": { "devDependencies": {
"@resvg/resvg-js": "^2.2.0", "@resvg/resvg-js": "^2.2.0",
"@sveltejs/adapter-auto": "^1.0.2", "@sveltejs/adapter-auto": "^1.0.2",
"@sveltejs/kit": "^1.3.3", "@sveltejs/kit": "^1.3.7",
"@sveltejs/site-kit": "3.1.0", "@sveltejs/site-kit": "../../../site-kit/packages/site-kit/package",
"@sveltejs/vite-plugin-svelte": "^2.0.2", "@sveltejs/vite-plugin-svelte": "^2.0.2",
"degit": "^2.8.4", "degit": "^2.8.4",
"dotenv": "^16.0.3", "dotenv": "^16.0.3",
@ -43,8 +43,8 @@
"shelljs": "^0.8.5", "shelljs": "^0.8.5",
"svelte": "^3.55.1", "svelte": "^3.55.1",
"svelte-check": "^3.0.3", "svelte-check": "^3.0.3",
"typescript": "^4.9.4", "typescript": "^4.9.5",
"vite": "^4.0.4", "vite": "^4.0.4",
"vite-imagetools": "^4.0.17" "vite-imagetools": "^4.0.18"
} }
} }

@ -2,7 +2,7 @@ export function process_example(files) {
return files return files
.map((file) => { .map((file) => {
const [name, type] = file.name.split('.'); const [name, type] = file.name.split('.');
return { name, type, source: file.source || file.content }; return { name, type, source: file.source ?? file.content ?? '' };
}) })
.sort((a, b) => { .sort((a, b) => {
if (a.name === 'App' && a.type === 'svelte') return -1; if (a.name === 'App' && a.type === 'svelte') return -1;

@ -18,7 +18,7 @@ function munge(files) {
let type = file.name.slice(dot + 1); let type = file.name.slice(dot + 1);
if (type === 'html') type = 'svelte'; if (type === 'html') type = 'svelte';
return { name, type, source: file.source || file.content }; return { name, type, source: file.source ?? file.content ?? '' };
}) })
.sort((a, b) => { .sort((a, b) => {
if (a.name === 'App' && a.type === 'svelte') return -1; if (a.name === 'App' && a.type === 'svelte') return -1;
@ -47,7 +47,7 @@ export async function GET({ params }) {
if (!res.ok) { if (!res.ok) {
return new Response(await res.json(), { return new Response(await res.json(), {
status: res.status, status: res.status,
headers: { 'Content-Type': 'application/json' } headers: { 'Content-Type': 'application/json' },
}); });
} }
@ -58,7 +58,7 @@ export async function GET({ params }) {
name: example.name, name: example.name,
owner: null, owner: null,
relaxed: example.relaxed, // TODO is this right? relaxed: example.relaxed, // TODO is this right?
components: munge(example.files) components: munge(example.files),
}); });
} }
@ -83,7 +83,7 @@ export async function GET({ params }) {
name: app.name, name: app.name,
owner: app.userid, owner: app.userid,
relaxed: false, relaxed: false,
components: munge(app.files) components: munge(app.files),
}); });
} }

@ -1,11 +1,11 @@
<script> <script>
import Blurb from "@sveltejs/site-kit/components/Blurb.svelte"; import Blurb from '@sveltejs/site-kit/components/Blurb.svelte';
import Balls from "./svelte-balls.png?w=640;1280;2560;3840&format=avif;webp;png&picture"; import Supporters from './_components/Supporters/index.svelte';
import Demo from "./_components/Demo.svelte"; import Hero from './_components/Hero.svelte';
import Hero from "./_components/Hero.svelte"; import Image from './_components/Image.svelte';
import Image from "./_components/Image.svelte"; import Demo from './_components/Demo.svelte';
import Supporters from "./_components/Supporters/index.svelte"; import WhosUsingSvelte from './_components/WhosUsingSvelte/index.svelte';
import WhosUsingSvelte from "./_components/WhosUsingSvelte/index.svelte"; import Balls from './svelte-balls.png?w=640;1280;2560;3840&format=avif;webp;png&picture';
</script> </script>
<svelte:head> <svelte:head>
@ -24,45 +24,35 @@
<Blurb> <Blurb>
<div slot="one"> <div slot="one">
<h2>Write less code</h2> <h2>Write less code</h2>
<p> <p>Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript</p>
Build boilerplate-free components using languages you already know —
HTML, CSS and JavaScript
</p>
<a href="/blog/write-less-code" class="cta">learn more</a> <a href="/blog/write-less-code" class="cta">learn more</a>
</div> </div>
<div slot="two"> <div slot="two">
<h2>No virtual DOM</h2> <h2>No virtual DOM</h2>
<p> <p>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p>
Svelte compiles your code to tiny, framework-less vanilla JS — your app
starts fast and stays fast
</p>
<a href="/blog/virtual-dom-is-pure-overhead" class="cta">learn more</a> <a href="/blog/virtual-dom-is-pure-overhead" class="cta">learn more</a>
</div> </div>
<div slot="three"> <div slot="three">
<h2>Truly reactive</h2> <h2>Truly reactive</h2>
<p> <p>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p>
No more complex state management libraries — Svelte brings reactivity to
JavaScript itself
</p>
<a href="/blog/svelte-3-rethinking-reactivity" class="cta">learn more</a> <a href="/blog/svelte-3-rethinking-reactivity" class="cta">learn more</a>
</div> </div>
<div class="description" slot="what"> <div class="description" slot="what">
<p> <p>
Svelte is a radical new approach to building user interfaces. Whereas Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue
traditional frameworks like React and Vue do the bulk of their work in do the bulk of their work in the <em>browser</em>, Svelte shifts that work into a
the <em>browser</em>, Svelte shifts that work into a
<em>compile step</em> that happens when you build your app. <em>compile step</em> that happens when you build your app.
</p> </p>
<p> <p>
Instead of using techniques like virtual DOM diffing, Svelte writes code Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when
that surgically updates the DOM when the state of your app changes. the state of your app changes.
</p> </p>
<p> <p>
@ -71,19 +61,14 @@
>most loved web framework</a >most loved web framework</a
> >
with the with the
<a <a href="https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/">most satisfied developers</a>
href="https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/"
>most satisfied developers</a
>
drawing the drawing the
<a <a
href="https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future" href="https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future"
>most interest in learning it</a >most interest in learning it</a
> >
in a trio of industry surveys. We think you'll love it too. in a trio of industry surveys. We think you'll love it too.
<a href="/blog/svelte-3-rethinking-reactivity" class="cta" <a href="/blog/svelte-3-rethinking-reactivity" class="cta">Read the introductory blog post</a> to learn more.
>Read the introductory blog post</a
> to learn more.
</p> </p>
</div> </div>

@ -1,27 +1,19 @@
<script> <script>
import Image from "./Image.svelte"; import Image from './Image.svelte';
import Machine from "./svelte-machine.png?w=640;1280;2560;3840&format=avif;webp;png&picture"; import Machine from './svelte-machine.png?w=640;1280;2560;3840&format=avif;webp;png&picture';
import SvelteLogotype from "./svelte-logotype.svg"; import SvelteLogotype from './svelte-logotype.svg';
</script> </script>
<div class="hero"> <div class="hero">
<strong>Cybernetically enhanced web apps</strong> <strong>Cybernetically enhanced web apps</strong>
<Image <Image src={Machine} alt="The Svelte compiler packaging up your component code" --max-height="65vh" />
src={Machine}
alt="The Svelte compiler packaging up your component code"
--max-height="65vh"
/>
<img alt="Svelte logotype" class="logotype" src={SvelteLogotype} /> <img alt="Svelte logotype" class="logotype" src={SvelteLogotype} />
</div> </div>
<style> <style>
.hero { .hero {
position: relative; position: relative;
background: radial-gradient( background: radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228));
circle at 40% 30%,
rgb(235, 243, 249),
rgb(214, 222, 228)
);
} }
.logotype { .logotype {

@ -1,6 +1,6 @@
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
import '@sveltejs/site-kit/code.css'; import '@sveltejs/site-kit/styles/code.css';
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;

@ -1,5 +1,5 @@
<script> <script>
import { Contents, Main, Section } from '@sveltejs/site-kit/docs'; // import { Contents, Main, Section } from '@sveltejs/site-kit/docs';
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;
@ -14,9 +14,9 @@
title: subsection.title, title: subsection.title,
sections: subsection.sections.map((subsection) => ({ sections: subsection.sections.map((subsection) => ({
path: `/docs#${subsection.slug}`, path: `/docs#${subsection.slug}`,
title: subsection.title title: subsection.title,
})) })),
})) })),
})); }));
</script> </script>
@ -28,7 +28,7 @@
<meta name="Description" content="Complete documentation for Svelte" /> <meta name="Description" content="Complete documentation for Svelte" />
</svelte:head> </svelte:head>
<Main bind:path> <!-- <Main bind:path>
<h1>Documentation</h1> <h1>Documentation</h1>
{#each data.sections as section} {#each data.sections as section}
@ -40,4 +40,4 @@
{/each} {/each}
</Main> </Main>
<Contents {contents} {path} /> <Contents {contents} {path} /> -->

@ -1,6 +1,6 @@
<script> <script>
import { Permalink } from '@sveltejs/site-kit'; import { Permalink } from '@sveltejs/site-kit';
import '@sveltejs/site-kit/code.css'; import '@sveltejs/site-kit/styles/code.css';
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;

@ -1,5 +1,5 @@
<script> <script>
import '@sveltejs/site-kit/code.css'; import '@sveltejs/site-kit/styles/code.css';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
@ -10,7 +10,7 @@
import { import {
mapbox_setup, // needed for context API tutorial mapbox_setup, // needed for context API tutorial
rollupUrl, rollupUrl,
svelteUrl svelteUrl,
} from '../../../config.js'; } from '../../../config.js';
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
@ -32,7 +32,7 @@
slug: chapter.slug, slug: chapter.slug,
section, section,
chapter, chapter,
prev prev,
}; };
lookup.set(chapter.slug, obj); lookup.set(chapter.slug, obj);
@ -54,13 +54,13 @@
const clone = (file) => ({ const clone = (file) => ({
name: file.name.replace(/.\w+$/, ''), name: file.name.replace(/.\w+$/, ''),
type: file.type, type: file.type,
source: file.content source: file.content,
}); });
$: if (repl) { $: if (repl) {
completed = false; completed = false;
repl.set({ repl.set({
components: data.tutorial.initial.map(clone) components: data.tutorial.initial.map(clone),
}); });
} }
@ -68,13 +68,13 @@
function reset() { function reset() {
repl.update({ repl.update({
components: data.tutorial.initial.map(clone) components: data.tutorial.initial.map(clone),
}); });
} }
function complete() { function complete() {
repl.update({ repl.update({
components: data.tutorial.complete.map(clone) components: data.tutorial.complete.map(clone),
}); });
} }

@ -1,3 +1,3 @@
{ {
"extends": "./.svelte-kit/tsconfig.json" "extends": "./.svelte-kit/tsconfig.json",
} }

@ -1,18 +1,12 @@
import * as fs from "fs"; import * as fs from 'fs';
import { sveltekit } from "@sveltejs/kit/vite"; import { sveltekit } from '@sveltejs/kit/vite';
import { imagetools } from "vite-imagetools"; import { imagetools } from 'vite-imagetools';
process.env.VITE_API_BASE = process.env.DOCS_PREVIEW process.env.VITE_API_BASE = process.env.DOCS_PREVIEW ? 'http://localhost:8787' : 'https://api.svelte.dev';
? "http://localhost:8787"
: "https://api.svelte.dev";
/**
* @param {string[]} ext
* @returns {import('vite').Plugin}
*/
function raw(ext) { function raw(ext) {
return { return {
name: "vite-plugin-raw", name: 'vite-plugin-raw',
transform(_, id) { transform(_, id) {
if (ext.some((e) => id.endsWith(e))) { if (ext.some((e) => id.endsWith(e))) {
const buffer = fs.readFileSync(id); const buffer = fs.readFileSync(id);
@ -24,34 +18,30 @@ function raw(ext) {
/** @type {import('vite').UserConfig} */ /** @type {import('vite').UserConfig} */
const config = { const config = {
logLevel: "info", logLevel: 'info',
plugins: [raw([".ttf"]), imagetools(), sveltekit()], plugins: [raw(['.ttf']), imagetools(), sveltekit()],
esbuild: {
loader: {
html: "text",
},
},
optimizeDeps: { optimizeDeps: {
include: [ include: [
"codemirror", 'codemirror',
"codemirror/mode/javascript/javascript.js", 'codemirror/mode/javascript/javascript.js',
"codemirror/mode/handlebars/handlebars.js", 'codemirror/mode/handlebars/handlebars.js',
"codemirror/mode/htmlmixed/htmlmixed.js", 'codemirror/mode/htmlmixed/htmlmixed.js',
"codemirror/mode/xml/xml.js", 'codemirror/mode/xml/xml.js',
"codemirror/mode/css/css.js", 'codemirror/mode/css/css.js',
"codemirror/mode/markdown/markdown.js", 'codemirror/mode/markdown/markdown.js',
"codemirror/addon/edit/closebrackets.js", 'codemirror/addon/edit/closebrackets.js',
"codemirror/addon/edit/closetag.js", 'codemirror/addon/edit/closetag.js',
"codemirror/addon/edit/continuelist.js", 'codemirror/addon/edit/continuelist.js',
"codemirror/addon/comment/comment.js", 'codemirror/addon/comment/comment.js',
"codemirror/addon/fold/foldcode.js", 'codemirror/addon/fold/foldcode.js',
"codemirror/addon/fold/foldgutter.js", 'codemirror/addon/fold/foldgutter.js',
"codemirror/addon/fold/brace-fold.js", 'codemirror/addon/fold/brace-fold.js',
"codemirror/addon/fold/xml-fold.js", 'codemirror/addon/fold/xml-fold.js',
"codemirror/addon/fold/indent-fold.js", 'codemirror/addon/fold/indent-fold.js',
"codemirror/addon/fold/markdown-fold.js", 'codemirror/addon/fold/markdown-fold.js',
"codemirror/addon/fold/comment-fold.js", 'codemirror/addon/fold/comment-fold.js',
], ],
exclude: ['@sveltejs/repl'],
}, },
server: { server: {
fs: { fs: {

Loading…
Cancel
Save