mirror of https://github.com/sveltejs/svelte
Nico Beierle
4 years ago
committed by
GitHub
commit
bb5d6e044c
@ -0,0 +1,15 @@
|
||||
module.exports = {
|
||||
spec: [
|
||||
'src/**/__test__.ts',
|
||||
],
|
||||
require: [
|
||||
'sucrase/register'
|
||||
],
|
||||
recursive: true,
|
||||
};
|
||||
|
||||
// add coverage options when running 'npx c8 mocha'
|
||||
if (process.env.NODE_V8_COVERAGE) {
|
||||
module.exports.fullTrace = true;
|
||||
module.exports.require.push('source-map-support/register');
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,3 @@
|
||||
{
|
||||
"types": "./index.d.ts"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,91 @@
|
||||
/** ----------------------------------------------------------------------
|
||||
This script gets a list of global objects/functions of browser.
|
||||
This process is simple for now, so it is handled without AST parser.
|
||||
Please run `node scripts/globals-extractor.mjs` at the project root.
|
||||
|
||||
see: https://github.com/microsoft/TypeScript/tree/main/lib
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
import http from 'https';
|
||||
import fs from 'fs';
|
||||
|
||||
const GLOBAL_TS_PATH = './src/compiler/utils/globals.ts';
|
||||
|
||||
// MEMO: add additional objects/functions which existed in `src/compiler/utils/names.ts`
|
||||
// before this script was introduced but could not be retrieved by this process.
|
||||
const SPECIALS = ['global', 'globalThis', 'InternalError', 'process', 'undefined'];
|
||||
|
||||
const get_url = (name) => `https://raw.githubusercontent.com/microsoft/TypeScript/main/lib/lib.${name}.d.ts`;
|
||||
const extract_name = (split) => split.match(/^[a-zA-Z0-9_$]+/)[0];
|
||||
|
||||
const extract_functions_and_references = (name, data) => {
|
||||
const functions = [];
|
||||
const references = [];
|
||||
data.split('\n').forEach(line => {
|
||||
const trimmed = line.trim();
|
||||
const split = trimmed.replace(/[\s+]/, ' ').split(' ');
|
||||
if (split[0] === 'declare' && split[1] !== 'type') {
|
||||
functions.push(extract_name(split[2]));
|
||||
} else if (trimmed.startsWith('/// <reference')) {
|
||||
const matched = trimmed.match(/ lib="(.+)"/);
|
||||
const reference = matched && matched[1];
|
||||
if (reference) references.push(reference);
|
||||
}
|
||||
});
|
||||
return { functions, references };
|
||||
};
|
||||
|
||||
const do_get = (url) => new Promise((resolve, reject) => {
|
||||
http.get(url, (res) => {
|
||||
let body = '';
|
||||
res.setEncoding('utf8');
|
||||
res.on('data', (chunk) => body += chunk);
|
||||
res.on('end', () => resolve(body));
|
||||
}).on('error', (e) => {
|
||||
console.error(e.message);
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
|
||||
const fetched_names = new Set();
|
||||
const get_functions = async (name) => {
|
||||
const res = [];
|
||||
if (fetched_names.has(name)) return res;
|
||||
fetched_names.add(name);
|
||||
const body = await do_get(get_url(name));
|
||||
const { functions, references } = extract_functions_and_references(name, body);
|
||||
res.push(...functions);
|
||||
const chile_functions = await Promise.all(references.map(get_functions));
|
||||
chile_functions.forEach(i => res.push(...i));
|
||||
return res;
|
||||
};
|
||||
|
||||
const build_output = (functions) => {
|
||||
const sorted = Array.from(new Set(functions.sort()));
|
||||
return `\
|
||||
/** ----------------------------------------------------------------------
|
||||
This file is automatically generated by \`scripts/globals-extractor.mjs\`.
|
||||
Generated At: ${new Date().toISOString()}
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
export default new Set([
|
||||
${sorted.map((i) => `\t'${i}'`).join(',\n')}
|
||||
]);
|
||||
`;
|
||||
};
|
||||
|
||||
const get_exists_globals = () => {
|
||||
const regexp = /^\s*["'](.+)["'],?\s*$/;
|
||||
return fs.readFileSync(GLOBAL_TS_PATH, 'utf8')
|
||||
.split('\n')
|
||||
.filter(line => line.match(regexp))
|
||||
.map(line => line.match(regexp)[1]);
|
||||
};
|
||||
|
||||
(async () => {
|
||||
const globals = get_exists_globals();
|
||||
const new_globals = await get_functions('es2021.full');
|
||||
globals.forEach((g) => new_globals.push(g));
|
||||
SPECIALS.forEach((g) => new_globals.push(g));
|
||||
fs.writeFileSync(GLOBAL_TS_PATH, build_output(new_globals));
|
||||
})();
|
||||
@ -0,0 +1,7 @@
|
||||
if (process.env.SKIP_PREPARE) {
|
||||
console.log('Skipped "prepare" script');
|
||||
} else {
|
||||
const { execSync } = require("child_process");
|
||||
const command = process.argv.slice(2).join(" ");
|
||||
execSync(command, { stdio: "inherit" });
|
||||
}
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
title: "What's new in Svelte: August 2022"
|
||||
description: "Changes to SvelteKit's `load` before 1.0 plus support for Vite 3 and `vite.config.js`!"
|
||||
author: Daniel Sandoval
|
||||
authorURL: https://desandoval.net
|
||||
---
|
||||
|
||||
There's a lot to cover this month... big changes are coming to SvelteKit's design before 1.0 can be completed. If you haven't already, check out Rich's Discussion, [Fixing `load`, and tightening up SvelteKit's design before 1.0 #5748](https://github.com/sveltejs/kit/discussions/5748).
|
||||
|
||||
Also, [@dummdidumm](https://github.com/dummdidumm) (Simon H) [has joined Vercel to work on Svelte full-time](https://twitter.com/dummdidumm_/status/1549041206348222464) and [@tcc-sejohnson](https://github.com/tcc-sejohnson) has joined the group of SvelteKit maintainers! We're super excited to have additional maintainers now dedicated to working on Svelte and SvelteKit and have already been noticing their impact. July was the third largest month for SvelteKit changes since its inception!
|
||||
|
||||
Now onto the rest of the updates...
|
||||
|
||||
## What's new in SvelteKit
|
||||
- Dynamically imported styles are now included during SSR ([#5138](https://github.com/sveltejs/kit/pull/5138))
|
||||
- Improvements to routes and prop updates to prevent unnecessary rerendering ([#5654](https://github.com/sveltejs/kit/pull/5654), [#5671](https://github.com/sveltejs/kit/pull/5671))
|
||||
- Lots of improvements to error handling ([#4665](https://github.com/sveltejs/kit/pull/4665), [#5622](https://github.com/sveltejs/kit/pull/5622), [#5619](https://github.com/sveltejs/kit/pull/5619), [#5616](https://github.com/sveltejs/kit/pull/5616))
|
||||
- Custom Vite modes are now respected in SSR builds ([#5602](https://github.com/sveltejs/kit/pull/5602))
|
||||
- Custom Vite config locations are now supported ([#5705](https://github.com/sveltejs/kit/pull/5705))
|
||||
- Private environment variables (aka "secrets") are now much more secure. Now if you accidentally import them to client-side code, you'll see an error ([#5663](https://github.com/sveltejs/kit/pull/5663), [Docs](https://kit.svelte.dev/docs/configuration#env))
|
||||
- Vercel's v3 build output API is now being used in `adapter-vercel` ([#5514](https://github.com/sveltejs/kit/pull/5514))
|
||||
- `vite-plugin-svelte` has reached 1.0 and now supports Vite 3. You'll notice new default ports for `dev` (port 5173) and `preview` (port 4173) ([#5005](https://github.com/sveltejs/kit/pull/5005), [vite-plugin-svelte CHANGELOG](https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md))
|
||||
|
||||
**Breaking changes:**
|
||||
- `mode`, `prod` and `server` are no longer available in `$app/env` ([#5602](https://github.com/sveltejs/kit/pull/5602))
|
||||
- `svelte-kit` CLI commands are now run using the `vite` command and `vite.config.js` is required. This will allow first-class support with other projects in the Vite ecosystem like Vitest and Storybook ([#5332](https://github.com/sveltejs/kit/pull/5332), [Docs](https://kit.svelte.dev/docs/project-structure#project-files-vite-config-js))
|
||||
- `endpointExtensions` is now `moduleExtensions` and can be used to filter param matchers ([#5085](https://github.com/sveltejs/kit/pull/5085), [Docs](https://kit.svelte.dev/docs/configuration#moduleextensions))
|
||||
- Node 16.9 is now the minimum version for SvelteKit ([#5395](https://github.com/sveltejs/kit/pull/5395))
|
||||
- %-encoded filenames are now allowed. If you had a `%` in your route, you must now encode it with `%25` ([#5056](https://github.com/sveltejs/kit/pull/5056))
|
||||
- Endpoint method names are now uppercased to match HTTP specifications ([#5513](https://github.com/sveltejs/kit/pull/5513), [Docs](https://kit.svelte.dev/docs/routing#endpoints))
|
||||
- `writeStatic` has been removed to align with Vite's config ([#5618](https://github.com/sveltejs/kit/pull/5618))
|
||||
- `transformPage` is now `transformPageChunk` ([#5657](https://github.com/sveltejs/kit/pull/5657), [Docs](https://kit.svelte.dev/docs/hooks#handle))
|
||||
- The `prepare` script is no longer needed in `package.json` ([#5760](https://github.com/sveltejs/kit/pull/5760))
|
||||
- `adapter-node` no longer does any compression while we wait for a [bug fix in the `compression` library](https://github.com/expressjs/compression/pull/183) ([#5560](https://github.com/sveltejs/kit/pull/5506))
|
||||
|
||||
For a full list of changes, check out kit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
|
||||
|
||||
|
||||
## What's new in Svelte & Language Tools
|
||||
- The `@layer` [CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) is now supported in Svelte components (**3.49.0**, [PR](https://github.com/sveltejs/svelte/issues/7504))
|
||||
- The `inert` [HTML attribute](https://html.spec.whatwg.org/multipage/interaction.html#the-inert-attribute) is now supported in Svelte's language tools and plugins (**105.20.0**, [PR](https://github.com/sveltejs/language-tools/pull/1565))
|
||||
- The Svelte plugin will now use `SvelteComponentTyped` typings, if available (**105.19.0**, [PR](https://github.com/sveltejs/language-tools/pull/1548))
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Community Showcase
|
||||
|
||||
**Apps & Sites built with Svelte**
|
||||
- [PocketBase](https://github.com/pocketbase/pocketbase) is an open source Go backend with a single file and an admin dashboard built with Svelte
|
||||
- [Hondo](https://www.playhondo.com/how-to-play) is a word guessing game with multiple rounds
|
||||
- [Hexapipes](https://github.com/gereleth/hexapipes) is a site for playing hexagonal pipes puzzle
|
||||
- [Mail Must Move](https://www.mordon.app/) is an email made for those who want to get more done
|
||||
- [Jot Down](https://github.com/brysonbw/vscode-jot-down) is a Visual Studio Code extension for quick and simple note taking
|
||||
- [Kadium](https://kadium.kasper.space/) is an app for staying on top of YouTube channels' uploads
|
||||
- [Samen zjin we #1metS10](https://1mets10.avrotros.nl/) is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish
|
||||
- [On Writing Code](https://onwritingcode.com/) is an interactive website to learn programming design patterns
|
||||
- [Svelte-In-Motion](https://github.com/novacbn/svelte-in-motion) lets you create Svelte-animated videos in your browser
|
||||
- [Svelte Terminal](https://github.com/Nico-Mayer/svelte-terminal) is a terminal-like website
|
||||
- [Bulletlist](https://bulletlist.com/) is a simple tool with a single purpose: making lists
|
||||
- [Remind Me Again](https://github.com/probablykasper/remind-me-again) is an app for toggleable reminders on Mac, Linux and Windows
|
||||
- [Heyweek](https://heyweek.com/) is a timetracking app built for freelancers craving that extra pizzazz
|
||||
|
||||
**Learning Resources**
|
||||
|
||||
_Starring the Svelte team_
|
||||
- [The Svelte Documentary is out!](https://www.svelteradio.com/episodes/the-svelte-documentary-is-out) on Svelte Radio
|
||||
- [Beginner SvelteKit](https://vercel.com/docs/beginner-sveltekit) by Vercel
|
||||
- [Challenge: Explore Svelte by Building a Bubble Popping Game](https://prismic.io/blog/try-svelte-build-game) by Brittney Postma
|
||||
- [Let's write a Client-side Routing Library with Svelte](https://www.youtube.com/watch?v=3foVDSknGEY) by lihautan
|
||||
- [Svelte Sirens July Talk - Testing in Svelte with Jess Sachs](https://sveltesirens.dev/event/testing-in-svelte)
|
||||
|
||||
_To Watch_
|
||||
- [10 Awesome Svelte UI Component Libraries](https://www.youtube.com/watch?v=RkD88ARvucM) by LevelUpTuts
|
||||
- [Learn How SvelteKit Works](https://www.youtube.com/watch?v=VizuTy3uSNE) and [SvelteKit Endpoints](https://www.youtube.com/watch?v=XnVxDLTgCgo) by Joy of Code
|
||||
- [SvelteKit using TS, and Storybook setup](https://www.youtube.com/watch?v=L4F5dSu0FcQ) by Jarrod Kane
|
||||
- [Building Apps with Svelte!](https://www.youtube.com/watch?v=prsXVk1fdW4) by Simon Grimm
|
||||
- [SvelteKit authentication, the better way - Tutorial](https://www.youtube.com/watch?v=Y98KipzwVdM) by Pilcrow
|
||||
|
||||
_To Read_
|
||||
- [Some assorted Svelte demos](https://geoffrich.net/posts/assorted-svelte-demos/) by Geoff Rich
|
||||
- [Three ways to bootstrap a Svelte project](https://maier.tech/posts/three-ways-to-bootstrap-a-svelte-project) by Thilo Maier
|
||||
- [Design & build an app with Svelte](https://bootcamp.uxdesign.cc/design-build-an-app-with-svelte-ecd7ed0729da) by Hugo
|
||||
- [Define routes via JS in SvelteKit](https://dev.to/maxcore/define-routes-via-js-in-sveltekit-27e9) by Max Core
|
||||
- [Integrating Telegram api with SvelteKit](https://dev.to/theether0/integrating-telegram-api-with-sveltekit-5gb) by Shivam Meena
|
||||
- [SvelteKit SSG: how to Prerender your SvelteKit Site](https://rodneylab.com/sveltekit-ssg/) by Rodney Lab
|
||||
- [ADEO Design System: Building a Web Component library with Svelte and Rollup](https://medium.com/adeo-tech/adeo-design-system-building-a-web-component-library-with-svelte-and-rollup-72d65de50163) by Mohamed Mokhtari
|
||||
- [The Svelte Handbook](https://thevalleyofcode.com/svelte/) by The Valley of Code
|
||||
- [Test Svelte Component Using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright) by David Peng
|
||||
- [Transitional Apps with Phoenix and Svelte](https://nathancahill.com/phoenix-svelte) by Nathan Cahill
|
||||
|
||||
_Tech Demos_
|
||||
- [Bringing the best GraphQL experience to Svelte](https://www.the-guild.dev/blog/houdini-and-kitql) by The Guild
|
||||
- [Style your Svelte website faster with Stylify CSS](https://stylifycss.com/blog/style-your-svelte-website-faster-with-stylify-css/) by Stylify
|
||||
- [Revamped Auth Helpers for Supabase (with SvelteKit support)](https://supabase.com/blog/2022/07/13/supabase-auth-helpers-with-sveltekit-support) by Supabase
|
||||
|
||||
|
||||
**Libraries, Tools & Components**
|
||||
- [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
|
||||
- [Skeleton](https://github.com/Brain-Bones/skeleton) is a UI component library for use with Svelte + Tailwind
|
||||
- [pass-composer](https://pass-composer.vercel.app/) helps you compose your postprocessing passes for threlte scenes
|
||||
- [@crikey/stores-*](https://whenderson.github.io/stores-mono/) is a collection of libraries to extend Svelte stores for common use-cases
|
||||
- [Svelte Chrome Storage](https://github.com/shaun-wild/svelte-chrome-storage) is a lightweight abstraction between Svelte stores and Chrome extension storage
|
||||
- [Svelte Schema Form](https://github.com/restspace/svelte-schema-form) is a form generator for JSON schema
|
||||
- [svelte-gesture](https://github.com/wobsoriano/svelte-gesture) is a library that lets you bind richer mouse and touch events to any component or view
|
||||
- [Snap Layout](https://github.com/ThaUnknown/snap-layout) and [universal-title-bar](https://github.com/ThaUnknown/universal-title-bar) bring Windows 11 snap layout and title features to webapps and PWAs. Both can be imported as a `.svelte` module or as a web component
|
||||
- [svelte-adapter-bun](https://github.com/gornostay25/svelte-adapter-bun) is an adapter for SvelteKit apps that generates a standalone Bun server
|
||||
- [json2dir](https://www.npmjs.com/package/json2dir) converts JSON objects into directory trees
|
||||
- [Svelte Command Palette](https://github.com/rohitpotato/svelte-command-palette) is a drop-in command palette component
|
||||
- [svelte-use-drop-outside](https://github.com/untemps/svelte-use-drop-outside) is a Svelte action to drop an element outside an area
|
||||
- [PowerTable](https://github.com/muonw/powertable) is a JavaScript component that turns JSON data into an interactive HTML table
|
||||
- [svelte-slides](https://github.com/rajasegar/svelte-slides) is a slide show template for Svelte using Reveal.js
|
||||
- [Svelte Theme Light](https://marketplace.visualstudio.com/items?itemName=webmaek.svelte-theme-light) is a Visual Studio Code theme based on the Svelte REPL
|
||||
|
||||
Did we miss anything? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
|
||||
|
||||
Still looking for something to do in September? Come join us at the Svelte Summit in Stockholm! [Get your tickets now](https://www.sveltesummit.com/).
|
||||
|
||||
See ya next month!
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
title: "What's new in Svelte: December 2022"
|
||||
description: "Rounding the corner to SvelteKit 1.0"
|
||||
author: Daniel Sandoval
|
||||
authorURL: https://desandoval.net
|
||||
---
|
||||
|
||||
SvelteKit 1.0 is just around the corner! With [99% of the milestone issues completed](https://github.com/sveltejs/kit/milestone/2), there's a lot of new changes from the last month to cover...
|
||||
|
||||
Let's get to it!
|
||||
|
||||
## What's new in SvelteKit
|
||||
- Use the `willUnload` property to find out if the navigation will result the app being unloaded (full page reload/closing/leaving to another page). ([#6813](https://github.com/sveltejs/kit/pull/6813))
|
||||
- `__data.json` requests now allows for caching while ensuring we cache matching responses for all invalidation scenarios ([#7532](https://github.com/sveltejs/kit/pull/7532))
|
||||
- Linking to `<a name="hash">` tags is now supported ([#7596](https://github.com/sveltejs/kit/pull/7596))
|
||||
- Throwing redirects in the `handle` hook is now supported ([#7612](https://github.com/sveltejs/kit/pull/7612))
|
||||
- A fallback component will now be added automatically for layouts without one ([#7619](https://github.com/sveltejs/kit/pull/7619))
|
||||
- The new `preload` function within the `resolve` hook determines what files should be added to the <head> tag to preload it ([Docs](https://kit.svelte.dev/docs/hooks#server-hooks-handle), [#4963](https://github.com/sveltejs/kit/pull/4963), [#7704](https://github.com/sveltejs/kit/pull/7704))
|
||||
- `version` is now available via `$app/environment` ([#7689](https://github.com/sveltejs/kit/pull/7689), [#7694](https://github.com/sveltejs/kit/pull/7694))
|
||||
- `handleError` can now return a promise ([#7780](https://github.com/sveltejs/kit/pull/7780))
|
||||
|
||||
|
||||
**Breaking changes:**
|
||||
- `routeId` is now `route.id` ([#7450](https://github.com/sveltejs/kit/pull/7450))
|
||||
- 'load' has been renamed to 'enter' and 'unload' to 'leave' in the `beforeNavigate` and `afterNavigate` methods. `beforeNavigate` is now called once with type 'unload' on external navigation and will no longer run during redirects ([#7502](https://github.com/sveltejs/kit/pull/7502), [#7529](https://github.com/sveltejs/kit/pull/7529), [#7588](https://github.com/sveltejs/kit/pull/7588))
|
||||
- The `redirect` helper will now only allow status codes between 300-308 for redirects and only `error` status codes between 400-599 are allowed ([#7767](https://github.com/sveltejs/kit/pull/7767)) ([#7615](https://github.com/sveltejs/kit/pull/7615), [#7767](https://github.com/sveltejs/kit/pull/7767))
|
||||
- Special characters will now be encoded with hex/unicode escape sequences in route directory names ([#7644](https://github.com/sveltejs/kit/pull/7644))
|
||||
- devalue is now used to (de)serialize action data - this is only a breaking change for everyone who fetches the actions directly and doesn't go through `use:enhance` ([#7494](https://github.com/sveltejs/kit/pull/7494))
|
||||
- `trailingSlash` is now a page option, rather than configuration ([#7719](https://github.com/sveltejs/kit/pull/7719))
|
||||
- The client-side router now ignores links outside `%sveltekit.body%` ([#7766](https://github.com/sveltejs/kit/pull/7766))
|
||||
- `prerendering` is now named `building`, and `config.kit.prerender.enabled` has been removed ([#7762](https://github.com/sveltejs/kit/pull/7762))
|
||||
- `getStaticDirectory()` has been removed from the builder API ([#7809](https://github.com/sveltejs/kit/pull/7809))
|
||||
- The `format` option has been removed from `generateManifest(...)` ([#7820](https://github.com/sveltejs/kit/pull/7820))
|
||||
- `data-sveltekit-prefetch` has been replaced with `-preload-code` and `-preload-data`, `prefetch` is now `preloadData` and `prefetchRoutes` is now `preloadCode` ([#7776](https://github.com/sveltejs/kit/pull/7776), [#7776](https://github.com/sveltejs/kit/pull/7776))
|
||||
- `SubmitFunction` has been moved from `$app/forms` into `@sveltejs/kit` ([#7003](https://github.com/sveltejs/kit/pull/7003))
|
||||
|
||||
## New in Svelte
|
||||
- The css compiler options of `css: false` and `css: true` have been replaced with `'external' | 'injected' | 'none'` settings to speed up compilation for `ssr` builds and improve clarity (**3.53.0**)
|
||||
|
||||
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**
|
||||
- [Appwrite's new console](https://github.com/appwrite/console) makes its secure backend server for web, mobile & Flutter developers avaiable in the browser
|
||||
- [RepoMagic](https://www.repomagic.com/) is a search and analytics tool for GitHub
|
||||
- [Podman Desktop](https://github.com/containers/podman-desktop) is a graphical tool for developing on containers and Kubernetes
|
||||
- [Ballerine](https://github.com/ballerine-io/ballerine) is a Know Your Customer (KYC) UX for any vertical or geography using modular building blocks, components, and 3rd party integrations
|
||||
- [Budget Pen](https://github.com/Nico-Mayer/budget_pen) is a Codepen-like browser code editor with Tailwind included
|
||||
- [doTogether](https://github.com/SarcevicAntonio/doTogether) helps you keep track of stuff you have get done via a List of recurring Tasks
|
||||
- [Webscraped College Results](https://www.redditcollegeresults.com/) is a collection of visualizations for data from r/collegeresults
|
||||
- [Let's premortem](https://letspremortem.com/) helps avoid lengthy, frustrating post-mortems after a project fails
|
||||
- [BLKMARKET.COM](https://beta.blkmarket.com/) is an illustration library for commercial and personal use
|
||||
- [Sigil](https://sigilspace.com/) is a canvas for anything with spaces organized by the most-voted content
|
||||
- [corpus-activity-streams](https://github.com/ryanatkn/corpus-activity-streams) is an unofficial ActivityStreams 2.0 vocabulary data set and alternative docs
|
||||
- [nodeMyAdmin](https://github.com/Andrea055/nodeMyAdmin) is an alternative to phpMyAdmin written with SvelteKit
|
||||
- [Image to Pattern Conversion](https://www.thread-bare.com/convert) is a cross-stitch pattern conversion tool with [a list of pre-made patterns](https://www.thread-bare.com/store) to start with
|
||||
- [Verbums](https://verbums.vdoc.dev/) is an English vocabulary trainer to improve language comprehension
|
||||
- [SVGPS](https://svgps.app/) removes the burden of working with a cluster of SVG files by converting your icons into a single JSON file
|
||||
- [This 3D retro-themed asteroid shooter](https://photon-alexwarnes.vercel.app/showcase/asteroids) was made with threlte
|
||||
|
||||
|
||||
**Learning Resources**
|
||||
|
||||
_To Hear_
|
||||
- [Catching up after Svelte Summit](https://www.svelteradio.com/episodes/catching-up) and [3D, WebGL and AI](https://www.svelteradio.com/episodes/3d-webgl-and-ai) by Svelte Radio
|
||||
|
||||
_To Watch_
|
||||
- [Domenik Reitzner - The easy way, an introduction to Sveltekit](https://www.youtube.com/watch?v=t-LKRrNedps) from Svelte Society Vienna
|
||||
- [Sirens: Form Actions](https://www.youtube.com/watch?v=2OISk5-EHek) - Kev joins the Sirens again to chat about Form actions in SvelteKit and create a new form for speaker submissions on SvelteSirens.dev
|
||||
- [Introduction To 3D With Svelte (Threlte)](https://www.youtube.com/watch?v=89LYeHOncVk), [How To Use Global Styles In SvelteKit](https://www.youtube.com/watch?v=jHSwChkx3TQ) and [Progressive Form Enhancement With SvelteKit](https://www.youtube.com/watch?v=6pv70d7i-3Q) by Joy of Code
|
||||
|
||||
_To Read_
|
||||
- [Building tic-tac-toe with Svelte](https://geoffrich.net/posts/tic-tac-toe/) by Geoff Rich
|
||||
- [Speed up SvelteKit Pages With a Redis Cache](https://www.captaincodeman.com/speed-up-sveltekit-pages-with-a-redis-cache) by Captain Codeman
|
||||
- [Understanding environment variables in SvelteKit](https://www.okupter.com/blog/environment-variables-in-sveltekit), [Form validation with SvelteKit and Zod](https://www.okupter.com/blog/sveltekit-form-validation-with-zod) and [Build a SvelteKit application with Docker](https://www.okupter.com/blog/build-a-sveltekit-application-with-docker) by Justin Ahinon
|
||||
- [Why I failed to create the "Solid.js's store" for Svelte, and announcing svelte-store-tree v0.3.1](https://dev.to/igrep/why-i-failed-to-create-the-solidjss-store-for-svelte-and-announcing-svelte-store-tree-v031-1am2) by YAMAMOTO Yuji
|
||||
- [Create an offline-first and installable PWA with SvelteKit and workbox-precaching](https://www.sarcevic.dev/offline-first-installable-pwa-sveltekit-workbox-precaching) by Antonio Sarcevic
|
||||
|
||||
|
||||
|
||||
**Libraries, Tools & Components**
|
||||
- [Skeleton](https://www.skeleton.dev/) is a UI toolkit to build fast and reactive web interfaces using Svelte + Tailwind CSS
|
||||
- [svelte-svg-spinners](https://github.com/luluvia/svelte-svg-spinners) is a collection of SVG Spinners components
|
||||
- [Svelte Floating UI](https://github.com/fedorovvvv/svelte-floating-ui) enables floating UIs with actions - no wrapper components or component bindings required
|
||||
- [at-html](https://github.com/micha-lmxt/at-html) lets you use `{@html }` tags with slots in Svelte apps
|
||||
- [html-svelte-parser](https://github.com/PatrickG/html-svelte-parser) is a HTML to Svelte parser that works on both the server (Node.js) and the client (browser)
|
||||
- [svelte-switcher](https://github.com/rohitpotato/svelte-switcher) is a fully customisable, touch-friendly, accessible and tiny toggle component
|
||||
- [sveltkit-hook-html-minifier](https://www.npmjs.com/package/@svackages/sveltkit-hook-html-minifier) is a hook that wrapps `html-minifier`
|
||||
- [sveltekit-hook-redirect](https://www.npmjs.com/package/@svackages/sveltekit-hook-redirect) is a hook that makes redirects easy
|
||||
- [sveltekit-video-meet](https://github.com/harshmangalam/sveltekit-video-meet) is a video calling web app built with SvelteKit and SocketIO
|
||||
- [svelte-colourpicker](https://www.npmjs.com/package/svelte-colourpicker) is a lightweight opinionated colour picker component for Svelte
|
||||
- [Svelte-HeadlessUI](https://captaincodeman.github.io/svelte-headlessui/) is an unofficial implementation of Tailwind HeadlessUI for Svelte
|
||||
- [svelte-lazyimage-cache](https://github.com/binsarjr/svelte-lazyimage-cache) is a Lazy Image component with IntersectionObserver and cache action
|
||||
- [threlte v5.0](https://www.reddit.com/r/sveltejs/comments/ywit18/threlte_v50_is_here_a_completely_new_developer/) is a completely new developer experience that is faster, more powerful, and incredibly flexible
|
||||
|
||||
|
||||
That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte)
|
||||
|
||||
See ya next near 🎆
|
||||
@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Getting started
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
To try Svelte in an interactive online environment you can try [the REPL](https://svelte.dev/repl) or [StackBlitz](https://node.new/svelte).
|
||||
|
||||
To create a project locally we recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
|
||||
```
|
||||
npm create svelte@latest myapp
|
||||
cd myapp
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment. [SvelteKit](https://kit.svelte.dev/) utilizes [Vite](https://vitejs.dev/) to build your code and handle server-side rendering (SSR). There are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation, which will output `.js` and `.css` that you can insert into your HTML, but most others won't handle SSR.
|
||||
|
||||
The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well.
|
||||
|
||||
If you're having trouble, get help on [Discord](https://svelte.dev/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue