diff --git a/.editorconfig b/.editorconfig index ed2a319d58..90846de5ee 100644 --- a/.editorconfig +++ b/.editorconfig @@ -13,4 +13,3 @@ insert_final_newline = false [{package.json,.travis.yml,.eslintrc.json}] indent_style = space -indent_size = 2 diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000000..a299a4435a --- /dev/null +++ b/.gitattributes @@ -0,0 +1,3 @@ +/site/** -linguist-detectable +/test/**/samples/** -linguist-detectable +/**/*.svelte linguist-detectable diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000000..d632634540 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +open_collective: svelte diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md deleted file mode 100644 index f5369e9991..0000000000 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -name: Bug report -about: Create a report to help us improve -title: '' -labels: 'Bug' -assignees: '' - ---- - -**Describe the bug** -A clear and concise description of what the bug is. - -**Logs** -Please include browser console and server logs around the time this bug occurred. - -**To Reproduce** -To help us help you, if you've found a bug please consider the following: - -* If you can demonstrate the bug using https://svelte.dev/repl, please do. -* If that's not possible, we recommend creating a small repo that illustrates the problem. -* Reproductions should be small, self-contained, correct examples – http://sscce.org. - -Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that Svelte is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster. - -**Expected behavior** -A clear and concise description of what you expected to happen. - -**Stacktraces** -If you have a stack trace to include, we recommend putting inside a `
` block for the sake of the thread's readability: - -
- Stack trace - - Stack trace goes here... -
- -**Information about your Svelte project:** -- Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10) - -- Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc) - -- Svelte version (Please check you can reproduce the issue with the latest release!) - -- Whether your project uses Webpack or Rollup - -**Severity** -How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely? - -Note: the more honest and specific you are here the more we will take you seriously. - -**Additional context** -Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml new file mode 100644 index 0000000000..38a971864b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -0,0 +1,50 @@ +name: "\U0001F41E Bug report" +description: Report an issue with Svelte +labels: ["triage: bug"] +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to fill out this bug report! + - type: textarea + id: bug-description + attributes: + label: Describe the bug + description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks! + placeholder: Bug description + validations: + required: true + - type: textarea + id: reproduction + attributes: + label: Reproduction + description: Please provide a link to a repo or REPL that can reproduce the problem you ran into. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided within a reasonable time-frame, the issue will be closed. + placeholder: Reproduction + validations: + required: true + - type: textarea + id: logs + attributes: + label: Logs + description: "Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text." + render: shell + - type: textarea + id: system-info + attributes: + label: System Info + description: Output of `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers` + render: shell + placeholder: System, Binaries, Browsers + validations: + required: true + - type: dropdown + id: severity + attributes: + label: Severity + description: Select the severity of this issue + options: + - annoyance + - blocking an upgrade + - blocking all usage of svelte + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000000..ee3e5a41b9 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,5 @@ +blank_issues_enabled: false +contact_links: + - name: Discord Chat + url: https://svelte.dev/chat + about: Ask questions and discuss with other Svelte users in real time. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index 923bfdb50c..0000000000 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -name: Feature request -about: Suggest an idea for this project -title: '' -labels: 'New Feature' -assignees: '' - ---- - - - -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. For example: I'm always frustrated when [...] - -**Describe the solution you'd like** -A clear and concise description of what you want to happen. - -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. - -**How important is this feature to you?** -Note: the more honest and specific you are here the more we will take you seriously. - -**Additional context** -Add any other context or screenshots about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml new file mode 100644 index 0000000000..2174f851a0 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -0,0 +1,42 @@ +name: "Feature Request" +description: Request a new Svelte feature +labels: [enhancement] +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to request this feature! If your feature request is complex or substantial enough to warrant in-depth discussion, maintainers may close the issue and ask you to open an [RFC](https://github.com/sveltejs/rfcs). + - type: textarea + id: problem + attributes: + label: Describe the problem + description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better. + placeholder: I'm always frustrated when... + validations: + required: true + - type: textarea + id: solution + attributes: + label: Describe the proposed solution + description: Please provide a clear and concise description of what you would like to happen. + placeholder: I would like to see... + validations: + required: true + - type: textarea + id: alternatives + attributes: + label: Alternatives considered + description: "Please provide a clear and concise description of any alternative solutions or features you've considered." + validations: + required: true + - type: dropdown + id: importance + attributes: + label: Importance + description: How important is this feature to you? + options: + - nice to have + - would make my life easier + - i cannot use svelte without it + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/questions-and-help.md b/.github/ISSUE_TEMPLATE/questions-and-help.md deleted file mode 100644 index a6e0dc6e19..0000000000 --- a/.github/ISSUE_TEMPLATE/questions-and-help.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -name: Questions and help -about: If you think you need help with something related to Svelte -title: '' -labels: 'Question' -assignees: '' - ---- - -This issue tracker is intended to collect bug reports and feature requests. - -For help with installation, information on how features work, or questions about specific features of Svelte, please come and join us in the [Svelte Discord](https://svelte.dev/chat), or ask your question on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte). Any issues open for help requests will be closed to keep from clogging up the issue tracker. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index d14a0f9fe4..7de5a35e13 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,5 +1,6 @@ ### Before submitting the PR, please make sure you do the following - [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs +- [ ] Prefix your PR title with `[feat]`, `[fix]`, `[chore]`, or `[docs]`. - [ ] This message body should clearly illustrate what problems it solves. - [ ] Ideally, include a test that fails without this PR but passes with it. diff --git a/.github/stale.yml b/.github/stale.yml new file mode 100644 index 0000000000..3bc3fa6b99 --- /dev/null +++ b/.github/stale.yml @@ -0,0 +1,52 @@ +# Configuration for probot-stale - https://github.com/probot/stale + +# Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled) +onlyLabels: [] + +# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable +exemptLabels: + - popular + - pinned + - security + - bug + - "[Status] Maybe Later" + +# Set to true to ignore issues in a project (defaults to false) +exemptProjects: false + +# Set to true to ignore issues in a milestone (defaults to false) +exemptMilestones: false + +# Set to true to ignore issues with an assignee (defaults to false) +exemptAssignees: false + +# Label to use when marking as stale +staleLabel: stale-bot + +# Comment to post when removing the stale label. +# unmarkComment: > +# Your comment here. + +# Limit the number of actions per hour, from 1-30. Default is 30 +limitPerRun: 30 + +# Optionally, specify configuration settings that are specific to just 'issues' or 'pulls': +pulls: + daysUntilStale: 210 + daysUntilClose: 25 + markComment: > + This pull request has been automatically marked as stale because it has not had + recent activity. It will be closed if no further activity occurs. Thank you + for your contributions. + closeComment: > + This pull request has been closed as it was previously marked as stale and saw no subsequent activity. + +issues: + daysUntilStale: 180 + daysUntilClose: 14 + markComment: > + This issue has been automatically marked as stale because it has not had + recent activity. It will be closed if no further activity occurs. Thank you + for your contributions. + closeComment: > + This issue has been closed as it was previously marked as stale and saw no subsequent activity. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4e04386fcc..bbfde04f67 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -3,34 +3,39 @@ on: [push, pull_request] jobs: Tests: runs-on: ${{ matrix.os }} - timeout-minutes: 10 + timeout-minutes: 15 strategy: matrix: - node-version: [8, 10, 12, 14] + node-version: [8, 10, 12, 14, 16] os: [ubuntu-latest, windows-latest, macOS-latest] steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - run: npm install - - run: npm test - env: - CI: true + - uses: actions/checkout@v1 + - uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + cache: npm + - run: npm install + - run: npm test + env: + CI: true Lint: runs-on: ubuntu-latest - timeout-minutes: 2 + timeout-minutes: 5 steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v1 - - run: 'npm i && npm run lint' + - uses: actions/checkout@v1 + - uses: actions/setup-node@v2 + with: + cache: npm + - run: 'npm i && npm run lint' Unit: runs-on: ${{ matrix.os }} - timeout-minutes: 5 + timeout-minutes: 10 strategy: matrix: os: [ubuntu-latest, windows-latest, macOS-latest] steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v1 - - run: 'npm i && npm run test:unit' + - uses: actions/checkout@v1 + - uses: actions/setup-node@v2 + with: + cache: npm + - run: 'npm i && npm run test:unit' diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml new file mode 100644 index 0000000000..ea6e0f5a60 --- /dev/null +++ b/.github/workflows/docs.yml @@ -0,0 +1,28 @@ +name: Docs + +on: + push: + branches: + - master + paths: + - site/content/** + +jobs: + release: + name: Deploy docs + runs-on: ubuntu-latest + steps: + - name: my-app-install token + id: github-app + uses: getsentry/action-github-app-token@v1 + with: + app_id: ${{ secrets.GH_APP_ID }} + private_key: ${{ secrets.GH_APP_PRIVATE_KEY }} + + - name: run deploy docs workflow + uses: 'sveltejs/action-deploy-docs/dispatch@main' + with: + repo: 'svelte' + branch: 'master' + docs_path: 'site/content' + token: ${{ steps.github-app.outputs.token }} \ No newline at end of file diff --git a/.gitignore b/.gitignore index f7fac04eba..32582b2774 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ node_modules /compiler.d.ts /compiler.*js /index.*js +/ssr.*js /internal /store /easing @@ -18,24 +19,18 @@ node_modules /coverage/ /coverage.lcov /test/*/samples/_ -/test/sourcemaps/samples/*/output.js -/test/sourcemaps/samples/*/output.js.map -/test/sourcemaps/samples/*/output.css -/test/sourcemaps/samples/*/output.css.map /yarn-error.log _actual*.* _output /types -/site/cypress/screenshots/ -/site/__sapper__/ +/site/.svelte-kit/ +/site/build/ /site/.env -/site/.sessions /site/static/svelte-app.json /site/static/contributors.jpg -/site/static/workers -/site/static/organisations -/site/scripts/svelte-app -/site/scripts/community +/site/static/donors.jpg +/site/static/workers/ +/site/scripts/svelte-app/ /site/src/routes/_contributors.js -/site/src/routes/_components/WhosUsingSvelte.svelte +/site/src/routes/_donors.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c1fd83e52..24eb142803 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,302 @@ # Svelte changelog -## Unreleased +## 3.44.2 +* Fix overly restrictive preprocessor types ([#6904](https://github.com/sveltejs/svelte/pull/6904)) +* More specific typing for crossfade function - returns a tuple, not an array ([#6926](https://github.com/sveltejs/svelte/issues/6926)) +* Add `URLSearchParams` as a known global ([#6938](https://github.com/sveltejs/svelte/pull/6938)) +* Add `types` field to `exports` map ([#6939](https://github.com/sveltejs/svelte/issues/6939)) + +## 3.44.1 + +* Fix code generation when a multi-line `return` statement contains comments ([code-red#36](https://github.com/Rich-Harris/code-red/issues/36)) +* Fix code generation when `for`/`if`/`while` statements have empty bodies ([#6884](https://github.com/sveltejs/svelte/issues/6884)) + +## 3.44.0 + +* Add `enableSourcemap` compiler option ([#6835](https://github.com/sveltejs/svelte/pull/6835)) + +## 3.43.2 + +* Fix regression where user-specified `import`s were not rewritten according to the `sveltePath` option ([#6834](https://github.com/sveltejs/svelte/issues/6834)) + +## 3.43.1 + +* Prevent a rejecting promise used in `{#await}` during SSR from appearing as an unhandled rejection ([#6789](https://github.com/sveltejs/svelte/issues/6789)) + +## 3.43.0 + +* Use export map to expose no-op versions of lifecycle functions for SSR ([#6743](https://github.com/sveltejs/svelte/pull/6743)) +* Prefer `context` passed to component constructor, even when running synchronously in another component ([#6753](https://github.com/sveltejs/svelte/issues/6753)) +* Handle preprocessors that return empty sourcemaps ([#6757](https://github.com/sveltejs/svelte/pull/6757)) + +## 3.42.6 + +* Hide private preprocess typings ([#6622](https://github.com/sveltejs/svelte/issues/6622)) +* Fix reactive function in `{:else if}` expression not being properly re-run ([#6727](https://github.com/sveltejs/svelte/pull/6727)) + +## 3.42.5 + +* In `draw` transition, account for `stroke-linecap` in determining length ([#4540](https://github.com/sveltejs/svelte/issues/4540)) +* Fix regression with destructuring assignments with default values ([#6699](https://github.com/sveltejs/svelte/issues/6699)) + +## 3.42.4 + +* Only apply optimized `src` attribute handling when in an `html` namespace ([#6575](https://github.com/sveltejs/svelte/issues/6575)) +* Fix styles for transitions and animations being attached to the wrong `document` in ` + + +
'Futuristic Web Development' from Svelte Summit
+ + + + +## What's Sapper? + +[Sapper](https://sapper.svelte.dev) is an *app framework* (or 'metaframework') built on top of Svelte (which is a *component* framework). Its job is to make it easy to build Svelte apps with all the modern best practices like server-side rendering (SSR) and code-splitting, and to provide a project structure that makes development productive and fun. It uses *filesystem-based routing* (as popularised by [Next](https://nextjs.org/) and adopted by many other frameworks, albeit with some enhancements) — your project's file structure mirrors the structure of the app itself. + +While the Svelte homepage and documentation encourages you to [degit](https://github.com/Rich-Harris/degit) the [sveltejs/template](https://github.com/sveltejs/template) repo to start building an app, Sapper has long been our recommended way to build apps; this very blog post is (at the time of writing!) rendered with Sapper. + + +## Why are we migrating to something new? + +Firstly, the distinction between [sveltejs/template](https://github.com/sveltejs/template) and [sveltejs/sapper-template](https://github.com/sveltejs/sapper-template) is confusing, particularly to newcomers to Svelte. Having a single recommended way to start building apps with Svelte will bring enormous benefits: we simplify onboarding, reduce the maintenance and support burden, and can potentially begin to explore the new possibilities that are unlocked by having a predictable project structure. (This last part is deliberately vague because it will take time to fully understand what those possibilities are.) + +Aside from all that, we've been tempted by the thought of rewriting Sapper for a while. This is partly because the codebase has become a little unkempt over the years ([Sapper started in 2017](/blog/sapper-towards-the-ideal-web-app-framework)), but mostly because the web has changed a lot recently, and it's time to rethink some of our foundational assumptions. + + +## How is this new thing different? + +The first of those foundational assumptions is that you need to use a module bundler like [webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/) to build apps. These tools trace the dependency graph of your application, analysing and transforming code along the way (turning Svelte components to JS modules, for example), in order to create bundles of code that can run anywhere. As the original creator of Rollup, I can attest that it is a surprisingly complex problem with fiendish edge cases. + +You certainly needed a bundler several years ago, because browsers didn't natively support the `import` keyword, but it's much less true today. Right now, we're seeing the rise of the *unbundled development* workflow, which is radically simpler: instead of eagerly bundling your app, a dev server can serve modules (converted to JavaScript, if necessary) *on-demand*, meaning startup is essentially instantaneous however large your app becomes. + +[Snowpack](https://www.snowpack.dev/) is at the vanguard of this movement, and it's what powers SvelteKit. It's astonishingly fast, and has a beautiful development experience (hot module reloading, error overlays and so on), and we've been working closely with the Snowpack team on features like SSR. The hot module reloading is particularly revelatory if you're used to using Sapper with Rollup (which has never had first-class HMR support owing to its architecture, which prioritises the most efficient output). + +That's not to say we're abandoning bundlers altogether. It's still essential to optimise your app for production, and SvelteKit uses Rollup to make your apps as fast and lean as they possibly can be (which includes things like extracting styles into static `.css` files). + +The other foundational assumption is that a server-rendered app needs, well, a server. Sapper effectively has two modes — `sapper build`, which creates a standalone app that has to run on a Node server, and `sapper export` which bakes your app out as a collection of static files suitable for hosting on services like GitHub Pages. + +Static files can go pretty much anywhere, but running a Node server (and monitoring/scaling it etc) is less straightforward. Nowadays we're witnessing a shift towards *serverless platforms*, in which you as the app author don't need to think about the server your code is running on, with all the attendant complexity. You can get Sapper apps running on serverless platforms, thanks to things like [vercel-sapper](https://github.com/thgh/vercel-sapper), but it's certainly not what you'd call idiomatic. + + + +SvelteKit fully embraces the serverless paradigm, and will launch with support for all the major serverless providers, with an 'adapter' API for targeting any platforms that we don't officially cater to. In addition, we'll be able to do partial pre-rendering, which means that static pages can be generated at build time but dynamic ones get rendered on-demand. + + +## When can I start using it? + +If you're feeling brave, you can start right now: + +```bash +npm init svelte@next +``` + +This will scaffold a new project and install the `@sveltejs/kit` CLI, which provides the tools for developing and building an app. + +We don't recommend it though! There are no docs, and we won't be able to offer any form of support. It's also likely to break often. + +The work is being done in a private monorepo while we're still in exploration mode. Our plan is to get a public beta ready and announce it here once we've closed a few issues — the repo itself will remain private at that time, but we'll create a place to collect feedback from the YOLO crowd. After that, we'll work towards a 1.0 release which will involve opening the repo up. + +I'm not going to make any firm promises about timings, because I don't like to break promises. But I *think* we're talking about weeks rather than months. + + +## What if I don't want to use SvelteKit? + +You won't have to — it will always be possible to use Svelte as a standalone package or via a bundler integration like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte). We think it's essential that you can bend Svelte to fit your workflow, however esoteric, and use third-party app frameworks like [Elder.js](https://github.com/Elderjs/elderjs), [Routify](https://routify.dev/), [Plenti](https://plenti.co/), [Crown](https://crownframework.com/), [JungleJS](https://www.junglejs.org/) and others. + + +## TypeScript? + +Don't worry, we won't launch without full TypeScript support. + + +## How can I migrate my existing Sapper apps? + +For the most part, it should be relatively straightforward to migrate a Sapper codebase. + +There are some unavoidable changes (being able to run on serverless platforms means we need to replace custom `server.js` files and `(req, res) => {...}` functions with more portable equivalents), and we're taking the opportunity to fix a few design flaws, but on the whole a SvelteKit app will feel very familiar to Sapper users. + +Detailed migration guides will accompany the 1.0 launch. + + +## How can I contribute? + +Keep your eyes peeled for announcements about when we'll launch the public beta and open up the repo. (Also, blog post TODO but I would be remiss if I didn't mention that we now have an [OpenCollective](https://opencollective.com/svelte) where you can contribute financially to the project if it's been valuable to you. Many, many thanks to those of you who already have.) + + +## Where can I learn more? + +Follow [@sveltejs](https://twitter.com/sveltejs) and [@SvelteSociety](https://twitter.com/SvelteSociety) on Twitter, and visit [svelte.dev/chat](https://svelte.dev/chat). You should also subscribe to [Svelte Radio](https://www.svelteradio.com/), where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) with your additional questions). \ No newline at end of file diff --git a/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md new file mode 100644 index 0000000000..58ee10cb18 --- /dev/null +++ b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md @@ -0,0 +1,71 @@ +--- +title: "What's new in Svelte: December 2020" +description: Better tooling, export maps and improvements to slots and context +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +It's the last "What's new in Svelte" of the year and there's lots to celebrate! This month's coverage includes updates from `rollup-plugin-svelte`, `Sapper` and `SvelteKit` and a bunch of showcases from the Svelte community! + +## New features & impactful bug fixes + +1. `$$props`, `$$restProps`, and `$$slots` are all now supported in custom web components (**3.29.5**, [Example](https://svelte.dev/repl/ad8e6f39cd20403dacd1be84d71e498d?version=3.29.5)) and `slot` components now support spread props: `` (**3.30.0**) +2. A new `hasContext` lifecycle function makes it easy to check whether a `key` has been set in the context of a parent component (**3.30.0** & **3.30.1**, [Docs](https://svelte.dev/docs#hasContext)) +3. There is now a new `SvelteComponentTyped` class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: `export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {}` (**3.31.0**, [RFC](https://github.com/sveltejs/rfcs/pull/37)) +4. Transitions within `{:else}` blocks should now complete successfully (**3.29.5**, [Example](https://svelte.dev/repl/49cef205e5da459594ef2eafcbd41593?version=3.29.5)) +5. Svelte now includes an export map, which explicitly states which files can be imported from its npm package (**3.29.5** with some fixes in **3.29.6**, **3.29.7** and **3.30.0**) +6. `rollup-plugin-svelte` had a new [7.0.0 release](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md). The biggest change is that the `css` option was removed. Users who were using that option should add another plugin like `rollup-plugin-css-only` as demonstrated [in the template](https://github.com/sveltejs/template/blob/5b1135c286f7a649daa99825a077586655051649/rollup.config.js#L48) + + +## What's going on in Sapper? +Lots of new TypeScript definition improvements to make editing Sapper apps even easier! CSS for dynamic imports also should now work in `client.js` files. (Unreleased) + +## What's the deal with SvelteKit? +We're glad you asked! If you didn't catch Rich's blog post from early last month, [you can find it here](https://svelte.dev/blog/whats-the-deal-with-sveltekit)! + +For all the features and bugfixes see the CHANGELOGs for [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md). + +--- + +## Community Showcase + +**Apps & Sites** +- [narration.studio](https://narration.studio/) (Chrome Only) is an automatic in-browser audio recording & editing platform for voice over narration. +- [Vippet](https://vippet.netlify.app/) is a video recording and editing tool for the browser. +- [Pattern Monster](https://pattern.monster/) is a simple online pattern generator to create repeatable SVG patterns. +- [Plant-based diets](https://planetbaseddiets.panda.org/) is a website from the World Wildlife Foundation (WWF) built with Svelte. +- [johnells.se](https://www.johnells.se/) is a Swedish fashion e-commerce site, built with [Crown](https://crownframework.com/) - a Svelte-powered framework. +- [sentence-length](https://sentence-length.netlify.app/) is a learning and analysis tool to show how some authors play with different lengths, while others stick with one. +- [svelte-presenter](https://github.com/stephane-vanraes/svelte-presenter) lets you quickly make good looking presentations using Svelte and mdsvex. + +**Demos** +- [u/loopcake got SSR working in Java Spring Boot](https://www.reddit.com/r/sveltejs/comments/jkh5up/svelte_ssr_but_its_java_spring_boot_and_its_native/) for all the Java shops out there looking to render Svelte server-side. +- [svelte-liquid-swipe](https://github.com/tncrazvan/svelte-liquid-swipe) shows off a fancy interaction pattern using svg paths. +- [Crossfade Link Animation](https://svelte.dev/repl/7f68e148caf04b2787bb6f296208f870?version=3.29.7) demonstrates how to animate between navigation links using a crossfade (made by Blu, from the Discord community) +- [Clip-Path Transitions](https://svelte.dev/repl/b5ad281ae8024b629b545c70c9e8764d?version=3.29.7) showcases how to use clip paths and custom transitions to create magical in-and-out transitions (made by Faber, from the Discord community) + +**Learning Resources** +- [lihautan](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ/featured) has been making easy-to-follow videos to share his in-depth knowledge of Svelte. +- [Lessons From Building a Static Site Generator](https://nicholasreese.com/lessons-from-building-a-static-site-generator/) shares the backstory and thinking behind Elder.js - and the design decision made along the way. +- [Svelte Tutorial and Projects Course ](https://www.udemy.com/course/svelte-tutorial-and-projects-course/) is a udemy course by John Smilga where students learn Svelte.js by building interesting projects. +- [Building Pastebin on IPFS - with FastAPI, Svelte, and IPFS](https://amalshaji.wtf/building-pastebin-on-ipfs-with-fastapi-svelte-and-ipfs) explains how to make a distributed pastebin-like application. + + +**Components, Libraries & Tools** +- [svelte-crossword](https://russellgoldenberg.github.io/svelte-crossword/) is a customizable crossword puzzle component for Svelte. +- [svelte-cloudinary](https://github.com/cupcakearmy/svelte-cloudinary) makes it easy to integrate Cloudinary with Svelte (including Typescript and SSR support) +- [Svelte Nova](https://extensions.panic.com/extensions/sb.lao/sb.lao.svelte-nova/) extends the new Nova editor to support Svelte +- [saos](https://github.com/shiryel/saos) is a small svelte component to animate your elements on scroll. +- [Svelte-nStore](https://github.com/lacikawiz/svelte-nStore) is a general purpose store replacement that fulfills the Svelte store contract and adds getter and calculation features. +- [svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) is a Svelte Action that transforms any div into a scrollable area with a nice scrollbar. +- [svelte-typewriter](https://github.com/henriquehbr/svelte-typewriter) is a simple and reusable typewriter effect for your Svelte applications +- [svelte-store-router](https://github.com/zyxd/svelte-store-router) is a store-based router for Svelte that suggests that routing is just another global state and History API changes are just an optional side-effects of this state. +- [Routify](https://routify.dev/blog/routify-2-released) just released version 2 of its Svelte router. +- [svelte-error-boundary](https://www.npmjs.com/package/@crownframework/svelte-error-boundary) provides a simple error boundary component for Svelte that can be can be used with both DOM and SSR targets. +- [svelte2dts](https://www.npmjs.com/package/svelte2dts) generates d.ts files from svelte files, creating truly shareable and well typed components. + +## See you next month! + +Got an idea for something to add to the Showcase? Want to get involved more with Svelte? We're always looking for maintainers, contributors and fanatics... Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved! + +That's all for the year, folks! See you in January 😎 diff --git a/site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md b/site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md new file mode 100644 index 0000000000..ba82146cd5 --- /dev/null +++ b/site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md @@ -0,0 +1,86 @@ +--- +title: "What's new in Svelte: January 2021" +description: A Svelte-packed showcase to kick-off the new year! +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +Happy new year from Svelte! In the last month we made progress on Sapper's upcoming release, fine-tuned our `SvelteComponent` typings, and have seen some amazing apps, sites, and libraries coming out in the showcase. + +## What's changed in Svelte? + +A new minor release replaces the `SvelteComponent` class with a `SvelteComponentTyped` class. This renaming should help with backwards compatibility. We've updated [last month's blog post](https://svelte.dev/blog/whats-new-in-svelte-december-2020) to avoid any confusion with the name change. + +If you're using `SvelteComponent` or the new `SvelteComponentTyped` in your project or library, let us know what you're using it for and we'll add it to the showcase! + + +## What's going on in Sapper? + +More quality of life features are landing in the upcoming release every day. `0.29.0` will include new TypeScript definitions, fixes to scroll tracking and prefetching behavior, and improvements to the runtime router to support encoded query parameters. + +If you're upgrading from 0.28.x, check out [the migration guide](https://sapper.svelte.dev/migrating/#0_28_to_0_29) for steps on updating to Sapper 0.29. + + +## Is SvelteKit ready yet? + +To avoid too much churn during development, SvelteKit is still being worked on in a private repo. There will be an announcement on the Discord, blog and Twitter when it's ready for a larger group of users and contributors. + +In the meantime, you can explore the current build by running `npm init svelte@next` from your command line. + +As cautioned in _[What's the deal with SvelteKit?](https://svelte.dev/blog/whats-the-deal-with-sveltekit)_, there are no docs or support available yet... So use at your own risk / for your own enjoyment! + + +--- + +## Community Showcase + +**Apps & Sites** + +- [manitu.me](https://manitu.me/) is a background sound / pomodoro timer for focus and relaxation +- [Answer Socrates](https://answersocrates.com/) helps you find trending questions on the internet so that you can write the most relevant blog post, tweet, or billboard +- [multris](https://multris.s1h.org/) is a multiplayer Tetris game. You can read about its development [here](https://blog.s1h.org/svelte-multiplayer-game/) +- [weather-ab](https://github.com/ganochenkodg/weather-ab) compares the archive of weather in different cities of the world. Indispensable for people thinking about migration +- [Game Nibs](https://gamenibs.com/) is a platform for gamers to find and share concise bite-sized bits of gaming advice, tips, tricks, screenshots, builds, and much more +- [Ora](https://github.com/cupcakearmy/ora) is an open source website tracking and limiting tool for Chrome and Firefox +- [vscode-dms](https://github.com/techsyndicate/vscode-dms) is a group direct messaging chat app for VSCode +- [Zero.2](https://zero.oleksandrdemian.tech/) is a math-based challenge game where you try to get to zero as quickly as possible +- [Octave Compass](https://octavecompass.com/2741) is a chord table and scale explorer for many popular musical scales +- [Infinite Walking Bass Generator 2](https://github.com/elialbert/infinitewalkingbass2) is an online music player that generates a unique walking bass line +- [ListenAddict](https://www.listenaddict.com/) is a site that notifies you whenever a person has a new talk/interview on podcast + +**Demos, Libraries & Components** + +- [svelte-tiny-virtual-list](https://github.com/Skayo/svelte-tiny-virtual-list) speeds up long lists by only rendering visible items +- [svelte-query](https://github.com/TanStack/svelte-query) is a collection of helpful hooks for managing, caching and syncing asynchronous and remote data +- [svelte-previous](https://github.com/bryanmylee/svelte-previous) is a svelte store to remember previous values - helpful for transitions or a quick undo stack +- [Let's Build a Confetti Cannon](https://varun.ca/confetti/) explains how to build a particle system and integrate a Canvas based animation into a larger application +- [svelte-micro](https://github.com/ayndqy/svelte-micro) is a one-component router +- [svelte-standalone-router](https://github.com/hjalmar/svelte-standalone-router) is a standalone router with an API based on [standalone-router](https://github.com/hjalmar/standalone-router) +- [svelte-datepicker](https://github.com/beyonk-adventures/svelte-datepicker) is a datepicker component with variations for time selection, date ranges and responsive themes +- [svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) is a action for Svelte.js, which can transforms any div into a scrollable area with a nice scrollbar. +- [Svelte Zoomable](https://svelte.dev/repl/58dfe87756ee4db897c281b52fdef7b7?version=3.31.0) is a custom transition with a nice zoom effect + +**Have a component you'd like to share?** Check out the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). + +**Learning Resources** + +- [Using Svelte to create a scroll video effect](https://blog.koenvangilst.nl/tutorial-svelte-scroll-video/) showcases how the `bind` command can be used to create a cool scroll video effect with very little code +- [How to make a flappybird game in svelte and typescript](https://www.youtube.com/watch?v=nhrYBoVI8pQ) is a video tutorial including docs and code for reference +- [Accessible Svelte Transition](https://www.youtube.com/watch?v=QK_QuRL7nSo&feature=youtu.be) walks through `prefers-reduced-motion` to make svelte transitions more accessible +- [Svelte's module scripts explained](https://codechips.me/svelte-module-scripts-explained/) is a great introduction to the module context, a common Sapper pattern +- [Awesome Svelte](https://github.com/TheComputerM/awesome-svelte#readme) is a curated list of Svelte resources +- [.NET Core and Svelte](https://dev.to/cainux/net-core-and-svelte-f8o) explains how to get Svelte up and running with .NET Core +- [A la découverte de Svelte JS](https://www.youtube.com/watch?v=SLpx1Y8e1ek&list=PLff5I1miao9ZEUhpqkrOx7k8RGAZt-nm9) is a svelte tutorial series in French! +- [Svelte for React Developers](https://soshace.com/svelte-for-react-developers/) explains Svelte's core concepts to folks who are used to React +- [Building a Svelte Static Website with Smooth Page Transitions](https://www.youtube.com/watch?v=dvPfmcGtmrI&feature=emb_title) shows how to build a static website with Svelte and add smooth page transitions using Three.js and GSAP. +- [Using Apollo Client in Sapper](https://bjornlu.com/blog/using-apollo-client-in-sapper/) explains the "simplest" solutions to integrate the Apollo query client into Sapper +- [Reactive web apps with Crystal + Svelte](https://www.youtube.com/watch?v=i1xjLd6z7BU) explores how to build full-stack, server-rendered Svelte apps with a [Crystal](https://crystal-lang.org) backend + +**Related Projects** + +- [Snowpack's v3 release candidate](https://www.snowpack.dev/posts/2020-12-03-snowpack-3-release-candidate) is out now in preparation for a January 6 release date. Check out the [Getting Started with Svelte](https://www.snowpack.dev/tutorials/svelte) for more info on how to use Snowpack. +- [Uppy](https://uppy.io/blog/2020/12/1.24/), the open source file uploader, announced Svelte support in its new version 1.24 + +## See you next month! + +Want to add your work to the Showcase? Want to contribute to Svelte? Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved! diff --git a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md new file mode 100644 index 0000000000..2d09a3c439 --- /dev/null +++ b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md @@ -0,0 +1,86 @@ +--- +title: "What's new in Svelte: February 2021" +description: Integrations and improvements at lightning speed... +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +With the shortest month of the year coming up, Svelte maintainers and community members alike have been busy this last month – from big changes in `svelte-loader`, `prettier-plugin-svelte`, `rollup-plugin-svelte`, and `language-tools` to steady progress in Sapper and `svelte-preprocess`. Meanwhile, lots of folks have been busy integrating Svelte with other popular frameworks. + +## New compiler features +- Aria roles from the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0/#role_definitions) are now recognized as valid aria roles in Svelte components (**3.31.1**) +- Compiler warnings for the common React attributes, `className` and `htmlFor`, now make it easier to port React components to Svelte (**3.31.1**) + +Have a suggestion for a compiler feature or want to help implement new features/bug fixes? Check out the ["triage: good first issue" tag for Svelte](https://github.com/sveltejs/svelte/issues?q=is%3Aopen+is%3Aissue+label%3A%22triage%3A+good+first+issue%22) + + +## New bits in language-tools + +- User disabled auto import suggestions no longer show in VS Code (**103.0.0**) +- Renaming a variable is now safer with smart additions of a prefix/suffix to renamed variables (**104.0.0**) +- Semantic (token) highlighting for TypeScript users lets theme makers apply semantic styling in their themes, if they support it (**104.0.0**) +- "Extract Component" has been added to the context menu - allowing you to extract components out of files without having to open the command window to type "Svelte: Extract Component" (**104.0.0**) +- The VS Code extension now listens to JavaScript/TypeScript file changes - you no longer need to save the files for the changes to be noticed (**104.1.0**) + +For the complete list of changes, check out the language-tools [Releases page](https://github.com/sveltejs/language-tools/releases). + +A great way to try the language tools is to download the [Svelte Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). This extension provides syntax highlighting and rich intellisense for Svelte components in VS Code, using the svelte language server. Check your editor's extension sources to see if there's a Svelte plugin for your IDE or build your own (see [coc-svelte](https://github.com/coc-extensions/coc-svelte) for example)! + +## Big improvements across the Svelte ecosystem + +- [svelte-loader](https://github.com/sveltejs/svelte-loader) released a major version, 3.0.0 - featuring Webpack 5 and Node 14 support, better hot reloading, and new `compilerOptions` to match `rollup-plugin-svelte`. Breaking changes include dropping Svelte 2 and Node 8 support. [More info in the changelog](https://github.com/sveltejs/svelte-loader/blob/master/CHANGELOG.md) +- [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) is now at version 7.x - with support for relative filenames, better handling of sourcemaps, and consistent `compilerOptions`. Be sure to [checkout the changelog](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md) for breaking changes when upgrading +- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) iterated through some 4.6.x releases this month to improve postcss and scss handling and fix sourcemap transformation for typescript users. [More info in the changelog](https://github.com/sveltejs/svelte-preprocess/blob/main/CHANGELOG.md) +- [Sapper](https://github.com/sveltejs/sapper) got some improvements in scroll tracking and handling encoding query parameters. Dynamic imports also now work as expected in browsers that don't support ES modules. These changes from 0.29.0 and a step-by-step migration guide can be found [in the changelog](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md) +- [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) version 2 was released. It received an overhaul and comes with a rewrite of the HTML formatting. The output is now much more in line with how standard Prettier formats HTML. Better defaults for `svelteBracketNewLine` and `options-scripts-markup-styles` should now match how the majority of users like to order the code blocks. Additionally, Prettier's `htmlWhitespaceSensitivity` setting is now supported. [More info in the changelog](https://github.com/sveltejs/prettier-plugin-svelte/blob/master/CHANGELOG.md) + +New changes to the Svelte Society website include [a new cheat sheet](https://sveltesociety.dev/cheatsheet) for easy access to useful code patterns and some smaller visual fixes across the site. **Want to help make the Svelte Society website ready for prime time**? [Checkout the GitHub repo](https://github.com/svelte-society/sveltesociety.dev) to get started! + +--- + +## Community Showcase + +**Apps & Sites** + +- [The official German vaccination dashboard](https://impfdashboard.de/) tracks the current COVID vaccine rollout and features some well-done dataviz. +- [La neuva era de la educatión conectada](https://elfuturoesapasionante.vodafone.es/especiales/educacion-conectada/) is a Vodaphone site that highlights the ways that technology and COVID-19 has changed the education landscape +- [sho.rest](https://github.com/Melonai/shorest) is a self-hostable url shortener +- [night.fm](https://night.fm/) is a cyberpunk-themed radio station + + +**Demos, Libraries & Components** + +- [Svelte Reactive Debugger](https://addons.mozilla.org/en-US/firefox/addon/svelte-reactive-debugger/) is a way to monitor Svelte reactive statements in Firefox devtools +- [svelte-actions](https://github.com/sw-yx/svelte-actions) is a set of prototype Svelte actions for inclusion into official actions in future. [See RFC](https://github.com/sveltejs/rfcs/pull/24) and [Discuss High Level Policy](https://github.com/sw-yx/svelte-actions/issues/7). +- [This css grid gallery](https://svelte.dev/repl/3a1b7fae13b242fe9cd4a4f7aa092fa4?version=3.31.2) made by @joja (in the Svelte Discord) features grid transitions based on a user's mouse position +- [Patchcab](https://github.com/spectrome/patchcab) is a modular Eurorack style synthesizer made with Web Audio. +- [svelte-knob](https://github.com/MelihAltintas/svelte-knob) is a knob control to help with speedometer-style visualization +- [descent-ripple](https://github.com/micha-lmxt/descent-ripple) is a highly customizable javascript ripple animation for buttons +- [makeItSnow](https://github.com/florianlouvet/make-it-snow/blob/main/makeItSnowAction.js) is a Svelte action made by @MrPoule (in the Svelte Discord) that can be used to add ❄️snow❄️ to any component ([Demo](https://svelte.dev/repl/de5223beb45540a5a11c9bd7b318304f?version=3.31.2)) +- [svelte-video-player](https://github.com/meigo/svelte-video-player) is a customizable `VideoPlayer` component +- [svelte-readonly](https://github.com/Crisfole/svelte-readonly) is a very small store that exposes only a readable interface. + + +**New Integrations & Starters** +- [svelte-derver-starter](https://github.com/AlexxNB/svelte-derver-starter) is a starter for baking fullstack application with the client based on Svelte and server side powered by Derver. +- [eleventy-plugin-embed-svelte](https://github.com/shalomscott/eleventy-plugin-embed-svelte) makes it easy to embed Svelte components into an 11ty site. +- [svelte-tailwind-extension-boilerplate](https://github.com/kyrelldixon/svelte-tailwind-extension-boilerplate) is a good foundation for a Chrome extension using either JavaScript or TypeScript, Svelte for the frontend, Tailwind CSS for styling, Jest for testing, and Rollup as the build system. +- [snowpack-ui](https://github.com/rajasegar/snowpack-ui) lets you run & manage Snowpack projects from the browser instead of the terminal +- [Svelte for Appwrite](https://dev.to/torstendittmann/svelte-for-appwrite-4fkg) explains how to integrate with Appwrite, a self-hosted Firebase alternative [Github Repo](https://github.com/appwrite/sdk-for-svelte) +- [here-maps-svelte](https://github.com/peopledrivemecrazy/here-maps-svelte) makes it easy to include HERE maps in a Svelte app +- [p5-svelte](https://github.com/tonyketcham/p5-svelte) is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project +- [svelte-windicss-preprocess](https://github.com/voorjaar/svelte-windicss-preprocess) is a Svelte preprocessor to compile tailwindcss at build time based on windicss compiler +- [MitzaCoder/svelte-boilerplate](https://github.com/MitzaCoder/svelte-boilerplate) features configurations for Typescript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules. + +**Want to share your Svelte Component with the world?** Head over to the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). + +**Learning Resources** + +- [lihautan's Svelte Actions Playlist](https://www.youtube.com/watch?v=ciaMT_MswzE&list=PLoKaNN3BjQX3Gl14MBygFf8buPIw9pAeK) teaches how actions work and how they can help solve common problems when developing Svelte applications +- [One-click Portfolio/Personal blog generator from dev.to API ](https://dev.to/shriji/one-click-portfolio-personal-blog-generator-from-dev-to-api-3apb) walks through creating a Sapper site that also fetches your articles from DEV.to using the API +- [How to Code a VSCode Extension](https://www.youtube.com/watch?v=a5DX5pQ9p5M) features Svelte as a way to render a custom UI within VSCode +- [This YouTube series on Plenti](https://www.youtube.com/watch?v=wyNC7R_VVyQ&list=PLbWvcwWtuDm12y3Hye6oKDwI2gAS0ccHW) walks through the new static site generator in detail + +## See you next month! + +Want to add your work to the Showcase? Want to contribute to Svelte? Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved! diff --git a/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md new file mode 100644 index 0000000000..8ae5c9d625 --- /dev/null +++ b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md @@ -0,0 +1,104 @@ +--- +title: "What's new in Svelte: March 2021" +description: Call for Svelte Summit Speakers! Improved SSR, non-HTML5 compilation targets, and ESLint TypeScript support +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +Lots to cover this month with releases from across the Svelte ecosystem. Most importantly, Svelte Summit Spring 2021 has an [Open Call for Speakers](https://sessionize.com/svelte-summit-spring-2021). **The deadline is March 14** so if you have an idea for a talk, submit it now! + +Let's dive into the news 🐬 + +## What's new in `sveltejs/svelte` +* SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples#custom-stores) and [Server-side component API ](https://svelte.dev/docs#Server-side_component_API)) +* Multiple instances of the same action are now allowed on an element (**3.32.0**, [example](https://svelte.dev/repl/01a14375951749dab9579cb6860eccde?version=3.32.0)) +* The new `foreign` namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (**3.32.0**, [more info](https://github.com/sveltejs/svelte/pull/5652)) +* Support for inline comment sourcemaps in code from preprocessors (**3.32.0**) +* Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0)) +* Custom elements will now call `onMount` functions when connecting and clean up when disconnecting (**3.33.0**, checkout [this PR](https://github.com/sveltejs/svelte/pull/4522) for an interesting conversation on how folks are using Svelte with Web Components) +* A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://svelte.dev/docs#svelte_compile)) +* Continued improvement to Typescript definitions + +For a complete list of changes, including bug fixes and links to PRs, check out [the CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) + + +## New from `sveltejs/language-tools` + +- For language server clients that don't support `didChangeWatchedFiles`, a fallback file watcher will be used instead +- New highlighting rules for store accessors and element directives (like `bind:` and `class:`) +- HTML tags can now be renamed together +- Mustache tags parsing is now more robust and will provide better intellisense in more situations + +Haven't tried the language-tools yet? Check out [Svelte Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) or find a plugin for your favorite IDE! + +## Other changes from `sveltejs/*` + +- [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3) now supports TypeScript as of 3.1.0 +- [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte/) released a number of minor versions to address whitespace and comment trimming issues. +- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess/) bug fixes this month include fixes to postcss transformations and support for both v2 and v3 of `postcss-load-config` +- [sapper](https://github.com/sveltejs/sapper/)'s 0.29.1 release fixes some bad imports in type definitions, updates typings to be compatible with express/polka, and restores hashing of all CSS file names. + +--- + +## Community Showcase + +**Apps & Sites** + +- [Tracking the Coronavirus](https://www.nytimes.com/interactive/2021/us/new-york-city-new-york-covid-cases.html) from NYTimes is an example of SvelteKit in production +- [Budibase](https://github.com/Budibase/budibase) is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools 50x faster on their own infrastructure. +- [Track the Parcel](https://tracktheparcel.com/) is a one-stop tool for tracking parcel status with all major package shippers. +- [Memo](https://sendmemo.app/features/) is a replacement for email that uses Svelte for modern messaging +- [Userscripts Safari](https://github.com/quoid/userscripts) is an open-source userscript editor for Safari... a native Svelte app for Mac OS! +- [SVGX](https://svgx.app/) is "the desktop SVG asset manager designers and developers wished they had." +- [Armoria](https://azgaar.github.io/Armoria/) is a procedural heraldry generator and editor +- [FictionBoard](https://www.fictionboard.com) is a virtual table top (VTT) platform that just released fillable and responsive character sheets +- [Castles & Crusades Treasure Generator](https://treasure.playaheadgames.com/) is a treasure generator for the table top RPG: Castles and Crusades. +- [NESBit Studio](https://jensa.org/NESBitStudio-web/graphics/spritesheets) is a toolkit to help the development of homebrew NES games +- [ElectroBlocks](https://electroblocks.org/) is an online Arduino IDE with a built-in simulator (Chrome Only) +- [Goblin.life](https://store.steampowered.com/app/552180/GoblinLife/) is a 3D world builder whose UI is built with Svelte +- [farmbox](https://farmbox.ae/) is a UAE-based grocery delivery services +- [heroeswearmasks.fun](https://heroeswearmasks.fun/) is a client-side machine learning tool that determines whether or not you're wearing a mask. +- [weatherify](https://brdtheo-weatherify.netlify.app/) is a very pretty (and [open source](https://github.com/brdtheo/weatherify)) weather app +- [DSN Live](https://dsn-live.netlify.app/#/) lets you monitor connections between NASA/JPL and interplanetary spacecraft missions in real time. + + + +**Demos, Libraries, Tools & Components** + +- [spc](https://github.com/khang-nd/spc) is a special characters picker component for the web +- [svelte-injector](https://www.npmjs.com/package/svelte-injector) lets you inject Svelte components in React, Angular, Vue, jQuery, Vanilla JS. +- [Felte](https://felte.dev/) is a form library for Svelte with simple validation reporting. +- [svelte-use-form](https://github.com/noahsalvi/svelte-use-form#readme) is form library that "is easy to use and has 0 boilerplate." +- [Formula](https://formula.svelte.codes/) provides "Zero Configuration Reactive Forms for Svelte." +- [Houdini](https://github.com/AlecAivazis/houdini) is "the disappearing GraphQL client built for Sapper and Sveltekit." +- [svelte-split-pane](https://www.reddit.com/r/sveltejs/comments/leoe33/sveltesplitpane/) is a draggable split pane component +- [svelte-virtualized-auto-sizer](https://github.com/micha-lmxt/svelte-virtualized-auto-sizer) is a high-order component that automatically adjusts the width and height of a single child. +- [svelte-window](https://github.com/micha-lmxt/svelte-window) are components for efficiently rendering large, scrollable lists and tabular data. +- [Svelte Persistent store](https://github.com/MacFJA/svelte-persistent-store) is a Svelte store that keep its value through pages and reloads +- [Svelte Dark](https://marketplace.visualstudio.com/items?itemName=NickScialli.svelte-dark) is a VSCode theme inspired by the svelte.dev REPL +- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) has been updated to support Svelte libraries and help developers keep their bundle size under control. +- [Tree-sitter-svelte](https://github.com/Himujjal/tree-sitter-svelte) provides tree-sitter grammar for svelte +- [Svelte Ripple](https://svelte.dev/repl/b73224a0fd4248178e3eab41943d41a9?version=3.31.2) is a Material Design ripple effect that doesn't depend on `@material/ripple` (made by @karakara in the Svelte Discord) +- [Analog SVG Clock](https://svelte.dev/repl/270e83f43e7a48918d8f2d497760904f?version=3.32.1) is a great example of easing functions (made by @tonmcg in the Svelte Discord) +- [Console Log Styler](https://svelte.dev/repl/11f609d0d90746f08da6d3d90bba84fc?version=3.32.0) lets you generate a styled console log using pseudo HTML and CSS (made by @EmNudge in the Svelte Discord) +- [svelte-heroicons](https://github.com/martinse/svelte-heroicons) is a handy wrapper for the Heroicons icon library +- [supabase-ui-svelte](https://github.com/joshnuss/supabase-ui-svelte) are UI components for Supabase authentication + +**Have your own Svelte Component to share?** Check out the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). + + +**Learning Resources & Starters** + +- [The **unofficial** SvelteKit docs](https://sk-incognito.vercel.app/learn/what-is-sveltekit) were built using SvelteKit and are [open for contributions](https://github.com/GrygrFlzr/kit-docs) +- [📦 Svelte Store](https://www.youtube.com/playlist?list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK) course by lihautan covers the basics of Svelte Stores and best practices. +- [Svelte Events](https://www.youtube.com/watch?v=cbxxbBofjAw&feature=youtu.be) by WebJeda explains how directives like `on:` can be used to listen to DOM events. +- [How to Set Up Protected Routes in Your Svelte Application](https://www.webtips.dev/how-to-set-up-protected-routes-in-your-svelte-application) describes how to authenticate your users to access your routes +- [Using Fauna's streaming feature to build a chat with Svelte](https://dev.to/fauna/using-fauna-s-streaming-feature-to-build-a-chat-with-svelte-1gkd) demonstrates how to setup and configure Fauna to build a real-time chat interface with Svelte +- [Using TakeShape with Sapper](https://www.takeshape.io/articles/using-takeshape-with-sapper/) demonstrates how to connect the TakeShape CMS with Sapper +- [YastPack](https://github.com/rodabt/yastpack) is Yet Another Snowpack-Svelte-TailwindCss-Routify Template Pack +- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) is a Snowpack + Svelte + TailwindCSS + Typescript template +- [tonyketcham/sapper-tailwind2-template](https://github.com/tonyketcham/sapper-tailwind2-template) is a Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier + +## See you next month! + +Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)! diff --git a/site/content/blog/2021-03-23-sveltekit-beta.md b/site/content/blog/2021-03-23-sveltekit-beta.md new file mode 100644 index 0000000000..58acf8c988 --- /dev/null +++ b/site/content/blog/2021-03-23-sveltekit-beta.md @@ -0,0 +1,67 @@ +--- +title: SvelteKit is in public beta +description: And we'd love to have your feedback +author: Rich Harris +authorURL: https://twitter.com/rich_harris +--- + + + +It's time. After five months and hundreds of commits, you're finally invited to try out the SvelteKit beta. It's not finished — there are a few known bugs and several missing features — but we're really happy with how it's shaping up and can't wait for you to try it. + +Starting a new project is easy: + +```bash +# create the project +mkdir my-app +cd my-app +npm init svelte@next + +# install dependencies +npm install + +# start dev server and open a browser tab +npm run dev -- --open +``` + +You'll find documentation at [kit.svelte.dev/docs](https://kit.svelte.dev/docs). If you have a [Sapper](https://sapper.svelte.dev) app that you'd like to migrate to SvelteKit, you'll find instructions at [kit.svelte.dev/migrating](https://kit.svelte.dev/migrating). + +The source code is available at [github.com/sveltejs/kit](https://github.com/sveltejs/kit). Issues and pull requests are disabled while we finish getting our house in order, but we'll be making it fully open in the near future. + + +## Wait, what is SvelteKit? + +Think of it as [Next](https://nextjs.org/) for Svelte. It's a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on. + +If you're familiar with [Sapper](https://sapper.svelte.dev), SvelteKit is Sapper's successor. + +## From Snowpack to Vite + +One thing that might seem surprising after the [announcement video](/blog/whats-the-deal-with-sveltekit), in which I waxed lyrical about [Snowpack](https://www.snowpack.dev/), is that SvelteKit uses [Vite](https://vitejs.dev) under the hood. When we tried Snowpack back when we started thinking about what form SvelteKit should take, it was love at first sight. + +Snowpack created an entirely new category of dev tooling. Rather than _bundling_ your app in development, as we've been doing with webpack and Rollup for the last several years, Snowpack is an _unbundled dev server_ that uses the browser's native `import` and does 1:1 transformations of things like Svelte components on the fly. As a result you get quick startup, simple caching and instant hot module reloading. Once you experience this way of working, it will ruin you for anything else. + +Vite falls into the same category as Snowpack. While Vite 1 wasn't suitable for SvelteKit — it was Vue-centric (Vite and Vue are both created by [Evan You](https://twitter.com/youyuxi)) and made server-side rendering difficult — Vite 2 is framework-agnostic and designed with SSR at the core. It also has powerful features, like CSS code-splitting, that we previously had to implement ourselves. When we evaluated the two technologies side-by-side we were forced to conclude that Vite is a closer match for SvelteKit's requirements and would give us the best chance to deliver the framework of our imaginations. + +We owe a deep debt of gratitude to the Snowpack team, both for the close collaboration earlier in development and for lighting the path that web development will take over the next few years. It's a wonderful tool, and you should absolutely try it out. + + +## Dogfooding as extreme sport + +SvelteKit is very much in beta, but that doesn't mean it hasn't been used in production. + +My day job is at the New York Times, where I've spent much of the last twelve months working on our [coronavirus tracker](https://www.nytimes.com/interactive/2020/us/coronavirus-us-cases.html). It uses a customised version of the workflow that powers the majority of graphics at the Times, which isn't designed for large multi-page projects. When we decided late last year to create pages for each of the ~3,000 counties in the US, we quickly realised we would need to completely rearchitect the project. + +Even though it was far from ready, SvelteKit was the only framework that matched our esoteric requirements. (Anyone who has worked in a newsroom and done battle with their CMS will know what I'm talking about.) Today it powers our [county risk pages](https://www.nytimes.com/interactive/2021/us/tom-green-texas-covid-cases.html) and we're in the process of migrating existing pages to the SvelteKit app. + + + +Using unfinished software to build an app that will be seen by millions of people is a risk, and in general I don't recommend it. But it has enabled us to develop the app much faster, and has made the framework itself much stronger than it otherwise would be. + +## The road to 1.0 + +You can see the list of outstanding issues with the 1.0 milestone on our [issue tracker](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0). Alongside that work, we plan to upgrade the documentation and add more [adapters](https://kit.svelte.dev/docs#adapters). + +Most importantly though, we need your feedback to help us make the best possible app framework. Try it out, and let us know which pieces are missing. + +Many thanks to everyone who has tried SvelteKit out despite the 'here be dragons' warnings and lack of documentation; your back-channel feedback has been invaluable. In particular, I want to acknowledge the work of [GrygrFlzr](https://github.com/GrygrFlzr), who maintained unofficial docs and a fork that added Windows support when we lacked it; and [dominikg](https://github.com/dominikg) whose work on [Svite](https://github.com/svitejs/svite) laid essential groundwork for SvelteKit's Vite integration. Both have now been welcomed onto the team. \ No newline at end of file diff --git a/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md b/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md new file mode 100644 index 0000000000..d21c9e907e --- /dev/null +++ b/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md @@ -0,0 +1,73 @@ +--- +title: "What's new in Svelte: April 2021" +description: SvelteKit beta and new way to use slots +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +Two projects that have been months (even years) in the making have made their way out into the world. SvelteKit is now in public beta and slotted components are now available in Svelte! + +## What's up with SvelteKit? +[SvelteKit](https://kit.svelte.dev/) - Svelte's versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the [latest blog post](https://svelte.dev/blog/sveltekit-beta). Want to know when 1.0 is close? Check out the milestone on [github](https://github.com/sveltejs/kit/milestone/2). + +Want to learn more about how to get started, what's different compared to Sapper, new features and migration paths? Check out this week's [episode of Svelte Radio](https://www.svelteradio.com/episodes/svelte-kit-public-beta) for a deep dive with Antony, Kev and Swyx. + +## New in Svelte & Language Tools +- Slotted components, including `` lets component consumers target specific slots with rich content (**Svelte 3.35.0, Language Tools [104.5.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.5.0)**, check out the [docs](https://svelte.dev/docs#svelte_fragment) and the [tutorial](https://svelte.dev/tutorial/svelte-fragment)) +- Linked editing now works for HTML in Svelte files (**Language Tools, [104.6.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.6.0)**) +- Type definitions `svelte.d.ts` are now resolved in order, allowing library authors to ship type definitions with their svelte components (**Language Tools, [104.7.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.7.0)**) +- [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) is available for general use of Svelte in Vite. `npm init @vitejs/app` includes Svelte options using this plugin. + +--- + +## Community Showcase + +**Apps & Sites** + +- [Nagato](https://nagato.app/) is a task management tool that connects popular time tracking and to-do tools all in one place. +- [type-kana](https://type-kana.cass.moe/setup) is a quiz app to help you learn ひらがな (hiragana) and カタカナ (katakana), the Japanese syllabaries. +- [Pittsburgh Steps](https://pittsburgh-steps.samlearner.com/) is an interactive map of the more than 800 sets of public outdoor stairways in Pittsburgh, PA. +- [Music Mode Wheels](https://tobx.github.io/music-mode-wheels/) is a website that displays music modes as interactive wheels. +- [Critical Notes](https://www.critical-notes.com/) helps game masters and players keep track of their roleplaying games campaigns and adventures. +- [Svelte Game of Life](https://github.com/alanrsoares/svelte-game-of-life) is an educational implementation of Conway's Game of Life in TypeScript + Svelte +- [foxql](https://github.com/foxql) is a peer to peer full text search engine that runs on your browser. + + +**Demos, Libraries, Tools & Components** + +- [svelte-nodegui](https://github.com/nodegui/svelte-nodegui) is a way to build performant, native and cross-platform desktop applications with Node.js and Svelte +- [Svelte Story Format](https://www.npmjs.com/package/@storybook/addon-svelte-csf) allows you to write your "stories" in Storybook using the Svelte syntax. More info in the [Storybook blog](https://storybook.js.org/blog/storybook-for-svelte/) +- [SelectMadu](https://github.com/pavish/select-madu) is a replacement for the select menu, with support for searching, multiple selections, async data loading and more. +- [Svelte Checklist](https://www.npmjs.com/package/svelte-checklist) is a customizable CheckList built with Svelte. +- [Suspense for Svelte](https://www.npmjs.com/package/@jamcart/suspense) is a Svelte component that implements the core idea of React's ``. +- [MiniRx](https://spierala.github.io/mini-rx-store/) is a RxJS Redux Store that works with Svelte and TypeScript +- [svelte-formly](https://github.com/arabdevelop/svelte-formly) generates dynamic forms for Svelte and Sapper +- [7ty](https://www.npmjs.com/package/@jamcart/7ty) is a static site generator that uses Svelte, supports partial hydration of components, and uses file based routing resembling Sapper and 11ty. + +**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). + + +**Starters** + +- [sveltekit-electron](https://github.com/FractalHQ/sveltekit-electron) is a starter kit for Electron using SvelteKit +- [sveltekit-tailwindcss-external-api](https://github.com/acidlake/sveltekit-tailwindcss-external-api) is everything you need to build a Svelte project with TailwindCSS and an external API, powered by create-svelte. +- [Sapper Netlify](https://www.npmjs.com/package/sapper-netlify) is a Sapper project that can run on a Netlify function. + + +**Looking for a particular starter?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) + +**Learning Resources** +- [How to Build a Website with Svelte and SvelteKit](https://prismic.io/blog/svelte-sveltekit-tutorial) is a step-by-step tutorial walking through the new SvelteKit setup. +- [A Svelte store for prefers-reduced-motion](https://geoffrich.net/posts/svelte-prefers-reduced-motion-store/) demonstrates how to make a custom Svelte store whose value will indicate whether the user has requested reduced motion and improve accessibility. +- [TypeScript support in Svelte](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) is an MDN guide to using TypeScript in Svelte. +- [How to merge cells with svelte-window](https://gradientdescent.de/merging-cells/) is a walkthrough of svelte-window, a port of the popular react-window tool for merging table cells. For more on this migration, see [from react-window 1:1 to svelte-window](https://gradientdescent.de/porting-react-window/). +- [Easy-to-Embed Svelte Components](https://codeandlife.com/2021/03/06/easy-to-embed-svelte-components/) explains how to use Rollup and a script tag to embed Svelte components anywhere. +- [Convert Svelte project from Rollup to Snowpack](https://www.youtube.com/watch?v=-sHcqj4YLeQ) walks through a common migration pattern on video. +- [How to internationalize routing in Svelte & Sapper](https://www.leaf.cloud/blog/how-to-internationalize-routing-in-svelte-sapper?utm_medium=story&utm_source=reddit.com&utm_campaign=awareness&utm_content=sapper_routing) explains how leaf.cloud translated their site to Dutch. +- [Svelte Store: Reactive context using Svelte Store](https://www.youtube.com/watch?v=-rTnWlbdjoY) is a video answer to the question, "How do we make [a] context value reactive?" +- [Creating Social Sharing Images with Cloudinary and Svelte](https://www.youtube.com/watch?v=-Si5o-R7KHY) is a video from Cloudinary that demonstrates how to dynamically develop Open Graph images and Twitter Cards for a JAMstack website. + + +## See you next month! + +Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)! diff --git a/site/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md b/site/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md new file mode 100644 index 0000000000..924e52f287 --- /dev/null +++ b/site/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md @@ -0,0 +1,76 @@ +--- +title: "What's new in Svelte: May 2021" +description: Working toward SvelteKit 1.0 and a showcase full of SvelteKit sites! +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +Last week, Svelte Summit blew us away with a mountain of content! [Check out the full recording](https://www.youtube.com/watch?v=fnr9XWvjJHw) or an audio-only (p)review [on Svelte Radio](https://www.svelteradio.com/episodes/svelte-summit-party-episode). Now let's get into this month's news... + +## New features in the Svelte Compiler +- `:global()` is now supported as part of compound CSS selectors (**3.38.0**, [Example](https://svelte.dev/repl/54148fd2af484f2c84977c94e523c7c5?version=3.38.0)) +- CSS custom properties can now be passed to components for use cases such as theming (**3.38.0**, [Docs coming soon](https://github.com/sveltejs/svelte/issues/6268)) + +## New in SvelteKit +- [kit.svelte.dev](https://kit.svelte.dev/) has a fresh new look and the [SvelteKit Demo Site](https://netlify.demo.svelte.dev/) got a fresh set of paint. Check it out by running `npm init svelte@next` +- You can now use `@sveltejs/adapter-static` to create a single-page app or SPA by specifying a fallback page ([PR](https://github.com/sveltejs/kit/pull/1181), [Docs](https://github.com/sveltejs/kit/tree/master/packages/adapter-static)) +- Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis ([PR](https://github.com/sveltejs/kit/pull/713), [Docs](https://kit.svelte.dev/docs#ssr-and-javascript-ssr)) +- Error messages thrown during pre-rendering are now much more informative and readable ([PR](https://github.com/sveltejs/kit/pull/1062), [Docs](https://kit.svelte.dev/docs#layouts-error-pages)) +- Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation ([PR](https://github.com/sveltejs/kit/pull/1061), [Docs](https://kit.svelte.dev/docs#layouts-resets)) +- `fetch` in SvelteKit code will now use the environment-provided implementation, whenever possible. If `fetch` is unavailable, it will be polyfilled by adapters ([PR](https://github.com/sveltejs/kit/pull/1066), [Docs](https://kit.svelte.dev/docs#loading-input-fetch)) + +## New in Svelte & Language Tools +- `svelte-preprocess` now supports the "extends" field of the tsconfig.json (4.7.2) +- HTML `style` attributes now have hover & auto-complete. Foreign namespaces and ESM configs are now supported in the Svelte language server & extensions +- The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined + +--- + +## Community Showcase + +**Apps & Sites** + +- [gitpod.io](https://github.com/gitpod-io/website) recently rewrote its site with SvelteKit +- [highlight eel](https://highlighteel.com/) is a web-based editor to mark your favorite parts of any YouTube video to clip and share with anyone +- [The Far Star Mission](https://thefarstar.apotheus.net/) is an interactive audiobook companion to the album, The Far Star by Apotheus +- [JavaScript quiz](https://github.com/nclskfm/javascript-quiz) is a small quiz application that saves your answers locally +- [ExtensionPay](https://extensionpay.com/) lets developers accept secure payments in browser extensions with no backend server code. +- [mk48.io](https://mk48.io/) is a naval warship game made with SvelteKit +- [Frog Safety](https://frog-safety.vercel.app/) is a guide for African Dwarf Frogs and the API freshwater master kit +- [Stardew Valley Character Preview](https://github.com/overscore-media/stardew-valley-character-preview) loads your character's attributes from your Stardew Valley savefile and lets you play around with different outfits, colours, and accessories. + + +**Demos, Libraries, Tools & Components** + +- [svelte-parallax](https://github.com/kindoflew/svelte-parallax) is a spring-based parallax component for Svelte +- [@svelte-plugins/viewable](https://github.com/svelte-plugins/viewable) is a simple rule-based approach to tracking element viewability. +- [Sveltekit-JUI](https://github.com/Wolfr/sveltekit-jui) is a kit of UI components to be used in conjunction with Svelte and Svelte Kit. +- [EZGesture](https://github.com/mhmd-22/ezgesture#integrating-with-other-frameworks) makes it easy to add gestures functionality with simple native DOM events + +**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). + + +**Starters** +- [How to use Vercel Analytics with SvelteKit](https://ivoberger.com/posts/using-vercel-analytics-with-svelte-kit) teaches how to track Web Vitals across your users' devices +- [Asp.NETCore + Svelte + Vite](https://github.com/Kiho/aspcore-spa-cli/tree/master/samples/SviteSample) connects the three frameworks with SpaCliMiddleware (VS2019) +- [Add CoffeeScript to Svelte](https://github.com/Leftium/coffeescript-adder) is an experimental command to run to add CoffeeScript to your SvelteKit project or Vite-powered Svelte app +- [Adds Supabase to Svelte](https://github.com/joshnuss/svelte-supabase) is an experimental command to run to add Supabase to your SvelteKit project +- [svelte-babylon](https://github.com/SectorXUSA/svelte-babylon) lets you use BabylonJS like A-Frame through reactive Svelte Components + +**Looking for a starter or integration?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates) + + +**Learning Resources** +- [Amazing macOS Dock animation in Svelte](https://dev.to/puruvj/amazing-macos-dock-animation-in-svelte-5hfb) demonstrates how nice Svelte and popmotion look together +- [Solving the Tower of Hanoi with recursive Svelte templates](https://geoffrich.net/posts/svelte-tower-of-hanoi/) incorporates the `` element into a common computer science problem +- [DIY SvelteKit CDK adapter](https://dev.to/juranki/diy-sveltekit-cdk-adapter-3enp) puts together SvelteKit and AWS CDK +- Fireship's [Svelte in 100 Seconds](https://www.youtube.com/watch?v=rv3Yq-B8qp4) is a quick and easy introduction to Svelte's core concepts +- [Tech Downtime](https://www.youtube.com/watch?v=tsePBA2JC7o&list=PLualcIC6WNK1LHIYx2Tg9AQfTQDv4zNPu) has been diving into SvelteKit in this playlist - from getting up and running to debugging. +- lihautan's latest video updates in the [Svelte 101](https://www.youtube.com/watch?v=rwYgOU0WmVk&list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR&index=59) and [Svelte Store](https://www.youtube.com/watch?v=p4GmT0trCPE&list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK&index=19) playlists cover slots, stores and context - and when to use which +- [DavidParkerW](https://www.youtube.com/c/DavidParkerW/playlists) has been exploring Svelte, Sapper and SvelteKit in some real-world scenarios, like [displaying a blog post list from an API](https://www.youtube.com/watch?v=kAPVFgFnxaM&list=PLPqKsyEGhUna6cvm6d4vZNI6gbt_0S4Xx&index=15) + + + +## See you next month! + +Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)! diff --git a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md new file mode 100644 index 0000000000..d1e3af95fb --- /dev/null +++ b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md @@ -0,0 +1,65 @@ +--- +title: "What's new in Svelte: June 2021" +description: Progress towards SvelteKit 1.0 and tighter TypeScript/Svelte integrations in language tools +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +This month, we saw lots of contributions to SvelteKit and its docs. The language tools also got some new features, most notably deeper integration with Svelte files within JavaScript or TypeScript files. Let's jump into the updates... + +## New in SvelteKit +- `svelte.config.js` config files are now loaded in ESM format (`.js` instead of `.cjs`). +- AMP pages will now use the rendered CSS, rather than emitted CSS +- `svelte-check` has been added to the TypeScript template ([sveltejs/kit#1556](https://github.com/sveltejs/kit/pull/1556)) +- Support for https keypair [sveltejs/kit#1456](https://github.com/sveltejs/kit/pull/1456) +- Now bundling Vite with SvelteKit and using an upgraded version. Remove Vite from your `package.json` if it's there +- Etags for binary responses [sveltejs/kit#1382](https://github.com/sveltejs/kit/pull/1382) +- Renamed `$layout` to `__layout` and `$error` to `__error` +- Removed `getContext` in favor of `request.locals` +- Renamed `.svelte` output directory to `.svelte-kit`. Update your `.gitignore` accordingly +- `trailingSlash: 'never' | 'always' | 'ignore'` is now available in the config. This should make it easier to build sites that work with static hosting providers that expect a trailing slash for `index.html` pages, and provides an escape hatch for anyone that needs more complex behaviour. + +## Notable bug fixes in SvelteKit +- `adapter-netlify` got a fix [sveltejs/kit#1467](https://github.com/sveltejs/kit/pull/1467) and new documentation in the readme https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify +- The router will no longer intercept navigation for URLs that the app does not own. This fixes a crash for apps that have `` elements on the page with the same origin but don't share a base path with the app. +- Hash only changes are now handled by the router fixing the browser's "back" navigation between hash changes in some circumstances. + + + +## New in Svelte & Language Tools +- Svelte 3.38.1 and 3.38.2 fixed an issue with hydration that was causing duplicate elements. If you're seeing this in your project, be sure to update the latest version! +- A new TypeScript plugin provides deeper integration with Svelte files within JavaScript or TypeScript files. This includes diagnostics, references and renaming of variables. It comes packaged with the VS Code extension but is turned off by default for now. You can enable it through [this setting](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#svelteenable-ts-plugin). We encourage you to test it out and [provide feedback](https://github.com/sveltejs/language-tools/issues/580) +- In the latest version of `svelte-check` you can now provide the path to your `tsconfig.json` or `jsconfig.json`. Example: `svelte-check --tsconfig "./tsconfig.json"`. This ensures the diagnostics are only run on files that are referenced in that config. It also runs diagnostics on JavaScript and/or TypeScript files which removes the need to run another check (like `tsc --noEmit`) for non-Svelte files (`svelte-check` version [**1.6.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-1.6.0)) +- The VS Code extension and `svelte-check` got a new major release. Previously, properties that had no initializer (`export let foo;`) were only required if the user was using both TypeScript and activated `strict` mode. This is changed now: People using TypeScript, and those using `checkJs` also in JavaScript files, will now always have these properties marked as required (`svelte-check` version [**2.0.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-2.0.0), extension version [**105.0.0**](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.0.0)) + +--- + +## Community Showcase + +**Apps & Sites** + +- [vidu](https://github.com/pa-nic/vidu) is a minimal web analytics collector and dashboard +- [River Runner](https://river-runner.samlearner.com/) is a virtual way to follow rivers downstream - built with Mapbox and Svelte. +- [JSDoc Type Generator](https://rafistrauss.github.io/jsdoc-generator/) generates JSDoc types for valid JSON. +- [pagereview.io](https://pagereview.io/) is a website feedback tool that lets you leave comments directly on the site being reviewed. +- [gamesroom.io](https://gamesroom.io/) is an online board game platform with video chat built-in. +- [Greedy Goblin](https://greedygoblin-fe11c.web.app/) is a recipe app for old-school Runescape players. +- [hashbrown.geopjr.dev](https://hashbrown.geopjr.dev/) is a GNOME-shell inspired webpage to learn about, explore the source code and download the Hashbrown GTK app ([link to source](https://github.com/GeopJr/Hashbrown/tree/website)). + + +**Libraries, Tools & Components** + +- [svelte-image-crop](https://novacbn.github.io/svelte-image-crop/) is a simple click'n'drag image cropping library using Web APIs. +- [svelte-datepicker](https://github.com/andrew-secret/svelte-datepicker) is a lightweight and inclusive date picker build with Svelte. +- [svelte-regex-router](https://www.npmjs.com/package/svelte-regex-router) is a simple, lightweight library for you to easily handle routes in your Svelte application. +- [Svelte Micro](https://www.npmjs.com/package/svelte-micro) is a light & reactive one-component router for Svelte. +- [svelte-entity-store](https://www.npmjs.com/package/svelte-entity-store) is to provide a simple, generic solution for storing collections of entity objects. +- [svelte-animation-store](https://github.com/joshnuss/svelte-animation-store) is a store that is based on Svelte's tweened store, that lets you pause, continue, reset, replay, reverse or adjust speed of a tween. + + +**Want to contribute a component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). + + +## See you next month! + +Did we miss something? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)! diff --git a/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md b/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md new file mode 100644 index 0000000000..c7510143a8 --- /dev/null +++ b/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md @@ -0,0 +1,65 @@ +--- +title: "What's new in Svelte: July 2021" +description: Keeping cool with fixes, TypeScript tooling and tonnes of new features +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +As the northern hemisphere heats up, Svelte has stayed cool with lots of performance and bug fixes, better TypeScript support, and lots of new components & tools from around the ecosystem. Let's take a peek 👀 + +## New in SvelteKit +- `adapter-node` now precompresses assets using gzip & brotli ([#1693](https://github.com/sveltejs/kit/pull/1693)) +- Support for TypeScript transpilation has been added to the `svelte-kit package` tooling ([#1633](https://github.com/sveltejs/kit/pull/1633)) +- Improved caching defaults in `adapter-node` ([#1416](https://github.com/sveltejs/kit/pull/1416)) +- Allow configuring Rollup output options ([#1572](https://github.com/sveltejs/kit/pull/1572)) +- Fixed usage of SSL with HMR ([#1517](https://github.com/sveltejs/kit/pull/1517)) + + + +## Features & bug fixes from around svelte/* +- [Svelte 3.38.3](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3383) (released June 22) includes a bunch of performance and bug fixes - including hydration optimizations, `this` preservation in bubbled events, and more! +- The latest language tools releases added support for prop renaming from outside of a component, PostCSS syntax grammar, and a `.d.ts` output target in `svelte2tsx` which can be used to create type definitions from Svelte files. +- Also in language tools, some long-awaited experimental features for enhanced TypeScript support were added - including explicitly typing all possible component events or slots, and using generics. Have a look at [the RFC](https://github.com/sveltejs/rfcs/pull/38) for more details and leave feedback in [this issue](https://github.com/sveltejs/language-tools/issues/442) if you are using it. +- `svelte-scroller` got some quality-of-life fixes in 2.0.7 - fixing an initial width bug and updating its `index` more conservatively + + +## Coming soon to Svelte +- Constants in markup ([RFC](https://github.com/sveltejs/rfcs/blob/master/text/0000-markup-constants.md)): Adds a new `{@const ...}` tag that defines a local constant ([PR](https://github.com/sveltejs/svelte/pull/6413)) + +--- + +## Community Showcase + +**Apps & Sites** +- [SvelteThemes](https://sveltethemes.dev/) is a curated list of Svelte themes and templates built using svelte, sveltekit, elderjs, routify etc. +- [Beatbump](https://github.com/snuffyDev/Beatbump) is an alternative frontend for YouTube Music created using Svelte/SvelteKit. +- [Sveltuir](https://github.com/webspaceadam/sveltuir) is an app help you memorize the guitar fretboard + + +**Educational Content** +- [Svelte Radio: A Jolly Good Svelte Summer](https://share.transistor.fm/s/60880542) is a conversation about what's new in Svelte and a celebration of Svelte Radio's 1-year anniversary +- [Class properties in Svelte](https://navillus.dev/blog/svelte-class-props) is a refresher on the power of `class` for developers switching over to Svelte from React +- [Sveltekit Tutorial for Beginners](https://www.youtube.com/playlist?list=PLm_Qt4aKpfKjf77S8UD79Ockhwp_699Ms) is a video playlist for learning SvelteKit by WebJeda +- [How To Cache Dynamic Pages On Demand With A Service Worker In SvelteKit](https://jochemvogel.medium.com/how-to-cache-dynamic-pages-on-demand-with-a-service-worker-in-sveltekit-4b4a7652583d) walks through the power of service workers when used within SvelteKit for on-demand caching +- [Vue vs Svelte: Comparing Framework Internals](https://www.vuemastery.com/blog/vue-vs-svelte-comparing-framework-internals/) dives deep into the differences between Vue and Svelte from the inside out +- [Setting up a development environment for SvelteKit with Docker and Docker Compose](https://jenyus.web.app/blog/2021-05-30-setting-up-a-development-environment-for-sveltekit-with-docker-and-compose) walks through how to use Docker to create reusable development environments, no matter what kind of device you run your code on +- Scalable Scripts released three videos this month documenting how to deploy dockerized Svelte Apps to [AWS](https://youtu.be/VOs2Od5jYOc), [Azure](https://youtu.be/gdg4ne_uDm8) and [Google Cloud](https://youtu.be/_-uBb61Tikw) +- [Render Katex with Svelte from zero to hero](https://www.youtube.com/watch?v=euowJs9CblA) demonstrates how to implement Katex in a Svelte project +- [Using Custom Elements in Svelte](https://css-tricks.com/using-custom-elements-in-svelte/) shows some of the quirks to look out for when using custom elements in a Svelte site + + +**Libraries, Tools & Components** +- [svelte-pipeline](https://github.com/novacbn/svelte-pipeline) provides custom Javascript contexts and the Svelte Compiler as Svelte Stores, for REPLs, Editors, etc. +- [Sveltotron](https://github.com/Salemmous/sveltotron) is an Electron-based app made to inspect your Svelte app +- [svelte-qr-reader-writer](https://github.com/pleasemarkdarkly/svelte-qr-reader-writer) is a Svelte component that helps read and write data from QR codes +- [svelte-stack-router](https://www.npmjs.com/package/svelte-stack-router) Aims to make Svelte apps feel more native by routing with Stacks +- [svelte-typed-context](https://www.npmjs.com/package/svelte-typed-context) provides an interface which, when provided to `getContext` or `setContext`, allows for stricter types +- [svelte-modals](https://svelte-modals.mattjennings.io/) is a simple, flexible, zero-dependency modal manager for Svelte + + +**Want to contribute a component? Interested in helping make Svelte's presence on the web better?** Submit a Component to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety-2021/blob/main/src/routes/components/components.json) or check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit. + + +## See you next month! + +Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)! diff --git a/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md b/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md new file mode 100644 index 0000000000..0dd54ca22f --- /dev/null +++ b/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md @@ -0,0 +1,71 @@ +--- +title: "What's new in Svelte: August 2021" +description: Shadow DOM, export and await - oh my! +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +From The Changelog ([JS Party Ep. 182](https://changelog.com/jsparty/182)) to Svelte Radio (Episodes [29](https://share.transistor.fm/s/adc23e84) and [30](https://share.transistor.fm/s/6316622d)), it seems that folks couldn't help but talk about Svelte, this month! Also, shadow DOM support and new export and await functionality are new in Svelte. + +## New in Svelte + +July was the most active month for the Svelte core repo since late 2019 as we really worked to reduce the number of outstanding PRs and saw the release of Svelte 3.39.0, 3.40.0, and 3.41.0. Tons of bug fixes were added as well as the following new features: + +- The `|trusted` event modifier allows you to check if an event is trusted before it's called ([#6137](https://github.com/sveltejs/svelte/issues/6137)) +- The new `svelte/ssr` package to support work on improving SvelteKit SSR ([#6416](https://github.com/sveltejs/svelte/pull/6416)) +- A new `errorMode` compiler option to support improved preprocessing of TypeScript files ([#6194](https://github.com/sveltejs/svelte/pull/6194)) +- You can now specify a `ShadowRoot` as the `target` when creating a component - making it possible to render Svelte components inside the shadow DOM ([#5869](https://github.com/sveltejs/svelte/issues/5869)) +- The `export { ... } from` ([#2214](https://github.com/sveltejs/svelte/issues/2214)), `export let { ... } =` ([#5612](https://github.com/sveltejs/svelte/issues/5612)) and `{#await ... then/catch}` ([#6270](https://github.com/sveltejs/svelte/issues/6270)) syntaxes are all now supported in Svelte components + +For a full list of features and bug fixes, check out the [Svelte changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md). + +## SvelteKit Updates +- `prerender.force` is now `prerender.onError` which lets you fine-tune which errors fail the build and which do not ([#2007](https://github.com/sveltejs/kit/pull/2007)) +- esbuild's configuration is now exposed for use with SvelteKit adapters ([#1914](https://github.com/sveltejs/kit/pull/1914)) +- Error messages are friendlier now for common config errors ([#1910](https://github.com/sveltejs/kit/pull/1910)) and compiler errors ([#1827](https://github.com/sveltejs/kit/pull/1827)) +- Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it ([#1847](https://github.com/sveltejs/kit/pull/1847)) +- index.js exports will now be changed to directory exports when packaging - making for nicer imports ([#1905](https://github.com/sveltejs/kit/pull/1905)) +- Vite.js's `mode` is now exposed from `$app/env` ([#1789](https://github.com/sveltejs/kit/pull/1789)) +- Better types across the board ([#1778](https://github.com/sveltejs/kit/pull/1778), [#1791](https://github.com/sveltejs/kit/pull/1791), [#1646](https://github.com/sveltejs/kit/pull/1646)) + +To see all updates to SvelteKit, check out the [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). + +## Features & bug fixes from around svelte/* +- Language Tools now better support the "Workplace Trust" functionality (used in VS Code) +- In svelte2tsx, ambient type declarations are now renamed to avoid conflicting declarations in the future. Users are now expected to provide the ambient type definitions themselves - fixing JS output +- Sapper released v0.29.2 which fixes regex routes, status codes when requesting a directory, and exports when a user has not provided a `base` tag ([changelog](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md)) + +--- + +## Community Showcase + +**Apps & Sites** +- [Parsnip](https://www.parsnip.ai/) is a mobile-first, progressive-web-app that helps you to learn to cook at home. Check out the [conversation on Reddit](https://www.reddit.com/r/sveltejs/comments/oearb9/learning_to_cook_at_home_with_parsnip_built/) for all the geeky details. +- [Central Bank Digital Currency (CBDC) tracker](https://www.atlanticcouncil.org/cbdctracker/) is a site that keeps track of how countries around the world are adopting digital currencies. +- [Svelte Commerce](https://github.com/itswadesh/svelte-commerce) is an advanced frontend platform for eCommerce based on Sveltekit. +- [neovimcraft](https://neovimcraft.com/) is a SvelteKit site dedicated to neovim plugins + +**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit. + +**Educational Content** +- [How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust](https://css-tricks.com/how-i-built-a-cross-platform-desktop-application-with-svelte-redis-and-rust/) is a blog post by Luke Edwards, Svelte maintainer and Developer Advocate from Cloudflare. +- [How to Create a Blog with SvelteKit and Strapi](https://strapi.io/blog/how-to-create-a-blog-with-svelte-kit-strapi) is a step-by-step tutorial by Aarnav Pai from Strapi +- [Sveltekit Markdown Blog](https://www.youtube.com/watch?v=sKKgT0SEioI&list=PLm_Qt4aKpfKgonq1zwaCS6kOD-nbOKx7V) is a YouTube tutorial series by WebJeda. +- [Using Custom Elements in Svelte](https://css-tricks.com/using-custom-elements-in-svelte/) is a deep dive into custom elements by Geoff Rich. +- [learn / graphql / svelte](https://hasura.io/learn/graphql/svelte-apollo/introduction/) is a free 2-hour GraphQL course course from Hasura. +- [How to add Magic Link to a SvelteKit application](https://magic.link/posts/magic-svelte) is a guide to the popular password-less login pattern. + +**Libraries, Tools & Components** +- [Svelte-Capacitor](https://github.com/drannex42/svelte-capacitor/) just released v2.0.0 - making it even easier to build hybrid mobile apps for iOS and Android using Svelte and Capacitor with near native performance. +- [svelte-remixicon](https://github.com/ABarnob/svelte-remixicon) is an icon library for Svelte based on Remix Icon, consisting of more than 2000 icons. +- [SveltePress](https://github.com/GeopJr/SveltePress) is a documentation tool built on top of SvelteKit. +- [Svelte Starter Kit](https://github.com/one-aalam/svelte-starter-kit/tree/auth-supabase) is a boilerplate to quckly get up and running with Svelte, with Auth and User Profiles powered by Supabase. +- [Kahi UI](https://github.com/novacbn/kahi-ui) is a Svelte-first UI kit with Dark Mode built-in. +- [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies. + +Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem. + + +## See you next month! + +Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)! diff --git a/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md b/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md new file mode 100644 index 0000000000..87d1a838fe --- /dev/null +++ b/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md @@ -0,0 +1,83 @@ +--- +title: "What's new in Svelte: September 2021" +description: StackOverflow's most loved web framework +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +This month, Svelte was [voted StackOverflow's most loved web framework](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks), Tan Li Hau [talked to Svelte Radio](https://share.transistor.fm/s/84c7521b) about his [Svelte-filled YouTube channel](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ), and SvelteKit made even more progress towards its 1.0 release! + +## New in Svelte + +- `use:actions` can now be used on `` (**3.42.0**) +- `HTMLElement`, `SVGElement` (**3.42.2**) and `BigInt` (**3.42.3**) are now known globals +- There is less code in Svelte's output thanks to the following improvements in **3.42.2**: + - Whitespace is now collapsed in class and style attributes + - Hydrated components have been updated to only rely upon helpers for creating the types of elements present in the component +- Scaling is now accounted for in `flip` animations (**3.42.2**) +- All `

From Blender Open Projects. CC-BY

+ +
+ + +
+ + +
+ {format(time)} + click anywhere to {paused ? 'play' : 'pause'} / drag to seek + {format(duration)} +
+
+
+ - -

Caminandes: Llamigos

-

From Blender Open Projects. CC-BY

- -
- - -
- - -
- {format(time)} - click anywhere to {paused ? 'play' : 'pause'} / drag to seek - {format(duration)} -
-
-
diff --git a/site/content/examples/05-bindings/10-dimensions/App.svelte b/site/content/examples/05-bindings/10-dimensions/App.svelte index ca992599c1..c955aeba8e 100644 --- a/site/content/examples/05-bindings/10-dimensions/App.svelte +++ b/site/content/examples/05-bindings/10-dimensions/App.svelte @@ -5,11 +5,6 @@ let text = 'edit me'; - - @@ -17,4 +12,9 @@
{text} -
\ No newline at end of file + + + \ No newline at end of file diff --git a/site/content/examples/05-bindings/11-bind-this/App.svelte b/site/content/examples/05-bindings/11-bind-this/App.svelte index 439d240670..8612e8f5e3 100644 --- a/site/content/examples/05-bindings/11-bind-this/App.svelte +++ b/site/content/examples/05-bindings/11-bind-this/App.svelte @@ -38,6 +38,12 @@ }); + + - - + \ No newline at end of file diff --git a/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte index c457a15cb5..631f7964e2 100644 --- a/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte +++ b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte @@ -10,19 +10,6 @@ const submit = () => dispatch('submit'); - -
@@ -37,4 +24,17 @@ -
\ No newline at end of file + + + \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte index 1b83727627..b6c3100e58 100644 --- a/site/content/examples/06-lifecycle/00-onmount/App.svelte +++ b/site/content/examples/06-lifecycle/00-onmount/App.svelte @@ -9,6 +9,20 @@ }); +

Photo album

+ +
+ {#each photos as photo} +
+ {photo.title} +
{photo.title}
+
+ {:else} + +

loading...

+ {/each} +
+ - -

Photo album

- -
- {#each photos as photo} -
- {photo.title} -
{photo.title}
-
- {:else} - -

loading...

- {/each} -
\ No newline at end of file diff --git a/site/content/examples/06-lifecycle/02-update/App.svelte b/site/content/examples/06-lifecycle/02-update/App.svelte index 419e763c57..ee3bca32df 100644 --- a/site/content/examples/06-lifecycle/02-update/App.svelte +++ b/site/content/examples/06-lifecycle/02-update/App.svelte @@ -51,6 +51,20 @@ } +
+

Eliza

+ +
+ {#each comments as comment} +
+ {comment.text} +
+ {/each} +
+ + +
+ - -
-

Eliza

- -
- {#each comments as comment} -
- {comment.text} -
- {/each} -
- - -
diff --git a/site/content/examples/06-lifecycle/03-tick/App.svelte b/site/content/examples/06-lifecycle/03-tick/App.svelte index 477b5ffb79..e678020d3d 100644 --- a/site/content/examples/06-lifecycle/03-tick/App.svelte +++ b/site/content/examples/06-lifecycle/03-tick/App.svelte @@ -27,11 +27,11 @@ } + + - - + \ No newline at end of file diff --git a/site/content/examples/08-motion/00-tweened/App.svelte b/site/content/examples/08-motion/00-tweened/App.svelte index 83f3b50a04..ee3c7a1b5d 100644 --- a/site/content/examples/08-motion/00-tweened/App.svelte +++ b/site/content/examples/08-motion/00-tweened/App.svelte @@ -8,13 +8,6 @@ }); - - \ No newline at end of file + + + \ No newline at end of file diff --git a/site/content/examples/08-motion/01-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte index 9918cf40e8..251bf640ee 100644 --- a/site/content/examples/08-motion/01-spring/App.svelte +++ b/site/content/examples/08-motion/01-spring/App.svelte @@ -9,11 +9,6 @@ let size = spring(10); - -
+ + diff --git a/site/content/examples/11-easing/00-easing/Controls.svelte b/site/content/examples/11-easing/00-easing/Controls.svelte index 66a297323f..3123b8a25b 100644 --- a/site/content/examples/11-easing/00-easing/Controls.svelte +++ b/site/content/examples/11-easing/00-easing/Controls.svelte @@ -14,6 +14,72 @@ $: mobile = width && width < 600; +
+
+

Ease

+ {#if mobile} + + {:else} +
    + {#each [...eases] as [name]} +
  • current_ease = name} + > + {name} +
    • + {/each} +
+ {/if} +

Type

+ {#if mobile } + + {:else} +
    + {#each types as [name, type]} +
  • current_type = type} + > + {name} +
    • + {/each} +
+ {/if} +
+

+ Duration +

+
+ + + + + + +
+
+ + - -
-
-

Ease

- {#if mobile} - - {:else} -
    - {#each [...eases] as [name]} -
  • current_ease = name} - > - {name} -
    • - {/each} -
- {/if} -

Type

- {#if mobile } - - {:else} -
    - {#each types as [name, type]} -
  • current_type = type} - > - {name} -
    • - {/each} -
- {/if} -
-

- Duration -

-
- - - - - - -
-
\ No newline at end of file + \ No newline at end of file diff --git a/site/content/examples/11-easing/00-easing/Grid.svelte b/site/content/examples/11-easing/00-easing/Grid.svelte index e704f46cf7..c0c9d47913 100644 --- a/site/content/examples/11-easing/00-easing/Grid.svelte +++ b/site/content/examples/11-easing/00-easing/Grid.svelte @@ -2,19 +2,6 @@ export let x, y; - - \ No newline at end of file +/> + + diff --git a/site/content/examples/12-svg/01-clock/App.svelte b/site/content/examples/12-svg/01-clock/App.svelte index 49d3a7f809..44f7e484a1 100644 --- a/site/content/examples/12-svg/01-clock/App.svelte +++ b/site/content/examples/12-svg/01-clock/App.svelte @@ -20,44 +20,6 @@ }); - - @@ -101,4 +63,42 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/site/content/examples/12-svg/02-bar-chart/App.svelte b/site/content/examples/12-svg/02-bar-chart/App.svelte index b9002bcaea..7ad21545ff 100644 --- a/site/content/examples/12-svg/02-bar-chart/App.svelte +++ b/site/content/examples/12-svg/02-bar-chart/App.svelte @@ -18,7 +18,7 @@ let height = 200; function formatMobile(tick) { - return "'" + tick % 100; + return "'" + tick.toString().slice(-2); } $: xScale = scaleLinear() @@ -33,6 +33,42 @@ $: barWidth = innerWidth / xTicks.length; +

US birthrate by year

+ +
+ + + + {#each yTicks as tick} + + + {tick} {tick === 20 ? ' per 1,000 population' : ''} + + {/each} + + + + + {#each points as point, i} + + {width > 380 ? point.year : formatMobile(point.year)} + + {/each} + + + + {#each points as point, i} + + {/each} + + +
+ - -

US birthrate by year

- -
- - - - {#each yTicks as tick} - - - {tick} {tick === 20 ? ' per 1,000 population' : ''} - - {/each} - - - - - {#each points as point, i} - - {width > 380 ? point.year : formatMobile(point.year)} - - {/each} - - - - {#each points as point, i} - - {/each} - - -
diff --git a/site/content/examples/12-svg/03-area-chart/App.svelte b/site/content/examples/12-svg/03-area-chart/App.svelte index 6aec5943dc..2fe39280e4 100644 --- a/site/content/examples/12-svg/03-area-chart/App.svelte +++ b/site/content/examples/12-svg/03-area-chart/App.svelte @@ -23,7 +23,7 @@ $: area = `${path}L${xScale(maxX)},${yScale(0)}L${xScale(minX)},${yScale(0)}Z`; function formatMobile (tick) { - return "'" + tick % 100; + return "'" + tick.toString().slice(-2); } @@ -108,4 +108,4 @@ .path-area { fill: rgba(0,100,100,0.2); } - + \ No newline at end of file diff --git a/site/content/examples/12-svg/03-area-chart/data.js b/site/content/examples/12-svg/03-area-chart/data.js index 72cb04f0d8..5cb65b397e 100644 --- a/site/content/examples/12-svg/03-area-chart/data.js +++ b/site/content/examples/12-svg/03-area-chart/data.js @@ -36,5 +36,10 @@ export default [ { x: 2013, y: 5.35 }, { x: 2014, y: 5.28 }, { x: 2015, y: 4.63 }, - { x: 2016, y: 4.72 } -]; \ No newline at end of file + { x: 2016, y: 4.72 }, + { x: 2017, y: 4.82 }, + { x: 2018, y: 4.79 }, + { x: 2019, y: 4.36 }, + { x: 2020, y: 4 }, + { x: 2021, y: 4.92 } +]; diff --git a/site/content/examples/12-svg/04-scatterplot/App.svelte b/site/content/examples/12-svg/04-scatterplot/App.svelte index 42a0660b87..1ceb1d221c 100644 --- a/site/content/examples/12-svg/04-scatterplot/App.svelte +++ b/site/content/examples/12-svg/04-scatterplot/App.svelte @@ -3,6 +3,15 @@ import data from './data.js'; +
+

Anscombe's quartet

+ + + + + +
+ - -
-

Anscombe's quartet

- - - - - -
\ No newline at end of file + \ No newline at end of file diff --git a/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte index f7a46899fa..7ae113ab06 100644 --- a/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte +++ b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte @@ -92,4 +92,4 @@ .y-axis text { text-anchor: end; } - + \ No newline at end of file diff --git a/site/content/examples/12-svg/05-svg-transitions/App.svelte b/site/content/examples/12-svg/05-svg-transitions/App.svelte index 6e1e636b20..7f3a774a2c 100644 --- a/site/content/examples/12-svg/05-svg-transitions/App.svelte +++ b/site/content/examples/12-svg/05-svg-transitions/App.svelte @@ -7,6 +7,38 @@ let visible = true; +{#if visible} + + + + + + + +
+ {#each 'SVELTE' as char, i} + {char} + {/each} +
+{/if} + + + + + - -{#if visible} - - - - - - - -
- {#each 'SVELTE' as char, i} - {char} - {/each} -
-{/if} - - - - + \ No newline at end of file diff --git a/site/content/examples/13-actions/00-actions/App.svelte b/site/content/examples/13-actions/00-actions/App.svelte index 171f82762c..bd990a5360 100644 --- a/site/content/examples/13-actions/00-actions/App.svelte +++ b/site/content/examples/13-actions/00-actions/App.svelte @@ -1,30 +1,16 @@ + +{#if showModal} +
(showModal = false)}> + Click outside me! +
+{/if} + - -
\ No newline at end of file diff --git a/site/content/examples/13-actions/00-actions/click_outside.js b/site/content/examples/13-actions/00-actions/click_outside.js new file mode 100644 index 0000000000..e8983c1457 --- /dev/null +++ b/site/content/examples/13-actions/00-actions/click_outside.js @@ -0,0 +1,15 @@ +export function clickOutside(node) { + const handleClick = (event) => { + if (!node.contains(event.target)) { + node.dispatchEvent(new CustomEvent("outclick")); + } + }; + + document.addEventListener("click", handleClick, true); + + return { + destroy() { + document.removeEventListener("click", handleClick, true); + } + }; +} diff --git a/site/content/examples/13-actions/03-actions-pannable/App.svelte b/site/content/examples/13-actions/03-actions-pannable/App.svelte new file mode 100644 index 0000000000..4548a5cbb6 --- /dev/null +++ b/site/content/examples/13-actions/03-actions-pannable/App.svelte @@ -0,0 +1,51 @@ + + +
+ + \ No newline at end of file diff --git a/site/content/examples/13-actions/03-actions-pannable/meta.json b/site/content/examples/13-actions/03-actions-pannable/meta.json new file mode 100644 index 0000000000..b97be8071f --- /dev/null +++ b/site/content/examples/13-actions/03-actions-pannable/meta.json @@ -0,0 +1,3 @@ +{ + "title": "A more complex action" +} \ No newline at end of file diff --git a/site/content/examples/13-actions/00-actions/pannable.js b/site/content/examples/13-actions/03-actions-pannable/pannable.js similarity index 100% rename from site/content/examples/13-actions/00-actions/pannable.js rename to site/content/examples/13-actions/03-actions-pannable/pannable.js diff --git a/site/content/examples/14-classes/00-classes/App.svelte b/site/content/examples/14-classes/00-classes/App.svelte index 4da386991d..1073242bcf 100644 --- a/site/content/examples/14-classes/00-classes/App.svelte +++ b/site/content/examples/14-classes/00-classes/App.svelte @@ -2,17 +2,6 @@ let current = 'foo'; - - \ No newline at end of file +>baz + + \ No newline at end of file diff --git a/site/content/examples/14-classes/01-class-shorthand/App.svelte b/site/content/examples/14-classes/01-class-shorthand/App.svelte index 0f4e0d9f24..c91385e4e5 100644 --- a/site/content/examples/14-classes/01-class-shorthand/App.svelte +++ b/site/content/examples/14-classes/01-class-shorthand/App.svelte @@ -2,12 +2,6 @@ let big = false; - -