mirror of https://github.com/sveltejs/svelte
Ben McCann
3 years ago
committed by
GitHub
commit
5baf255c69
@ -0,0 +1 @@
|
||||
open_collective: svelte
|
||||
@ -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
|
||||
@ -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.
|
||||
@ -1,28 +0,0 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
title: ''
|
||||
labels: 'New Feature'
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
<!--
|
||||
If you'd like to propose an implementation for a large new feature or change then please create an RFC:
|
||||
https://github.com/sveltejs/rfcs
|
||||
-->
|
||||
|
||||
**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.
|
||||
@ -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
|
||||
@ -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.
|
||||
@ -1,36 +1,101 @@
|
||||
name: CI
|
||||
on: [push, pull_request]
|
||||
on:
|
||||
push:
|
||||
branches: [ master ]
|
||||
pull_request:
|
||||
permissions:
|
||||
contents: read # to fetch code (actions/checkout)
|
||||
jobs:
|
||||
Setup:
|
||||
runs-on: ${{ matrix.os }}
|
||||
strategy:
|
||||
matrix:
|
||||
os: [ubuntu-latest, windows-latest, macOS-latest]
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18
|
||||
cache: npm
|
||||
- run: npm install
|
||||
env:
|
||||
SKIP_PREPARE: true
|
||||
- run: npm run build
|
||||
env:
|
||||
PUBLISH: true
|
||||
- name: Upload build assets
|
||||
id: upload-artifact
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: build-assets
|
||||
path: |
|
||||
index.*
|
||||
compiler.*
|
||||
ssr.*
|
||||
action/
|
||||
animate/
|
||||
easing/
|
||||
internal/
|
||||
motion/
|
||||
store/
|
||||
transition/
|
||||
types/
|
||||
Tests:
|
||||
needs: Setup
|
||||
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, 18]
|
||||
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@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
cache: npm
|
||||
- name: Download build assets
|
||||
uses: actions/download-artifact@v3
|
||||
id: download-artifact
|
||||
with:
|
||||
name: build-assets
|
||||
- name: Get Node version ${{ runner.os }}
|
||||
run: echo "NODE_VERSION=`node --version`" >> $GITHUB_ENV
|
||||
if: runner.os != 'Windows'
|
||||
- name: Get Node version ${{ runner.os }}
|
||||
run: |
|
||||
chcp 65001
|
||||
echo ("NODE_VERSION=$(node --version)") >> $env:GITHUB_ENV
|
||||
if: runner.os == 'Windows'
|
||||
- run: npm install --save-dev puppeteer@13
|
||||
if: ${{ runner.os == 'Linux' && (!startsWith(env.NODE_VERSION, 'v8.') && !startsWith(env.NODE_VERSION, 'v10.')) }}
|
||||
- run: npm install
|
||||
env:
|
||||
SKIP_PREPARE: true
|
||||
- run: npm run test:integration
|
||||
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@v3
|
||||
- uses: actions/setup-node@v3
|
||||
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@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
cache: npm
|
||||
- run: npm install
|
||||
env:
|
||||
SKIP_PREPARE: true
|
||||
- run: npm run test:unit
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
name: Docs
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
paths:
|
||||
- site/content/**
|
||||
|
||||
permissions: {}
|
||||
|
||||
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 }}
|
||||
@ -0,0 +1,15 @@
|
||||
module.exports = {
|
||||
spec: [
|
||||
'src/**/__test__.ts',
|
||||
],
|
||||
require: [
|
||||
'sucrase/register'
|
||||
],
|
||||
recursive: true,
|
||||
};
|
||||
|
||||
// add coverage options when running 'npx c8 mocha'
|
||||
if (process.env.NODE_V8_COVERAGE) {
|
||||
module.exports.fullTrace = true;
|
||||
module.exports.require.push('source-map-support/register');
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
This repository is governed by the Svelte Code of Conduct.
|
||||
|
||||
https://github.com/sveltejs/community/blob/main/CODE_OF_CONDUCT.md
|
||||
@ -1,4 +1,4 @@
|
||||
Copyright (c) 2016-21 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
|
||||
Copyright (c) 2016-23 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,3 @@
|
||||
{
|
||||
"types": "./index.d.ts"
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
// This script generates the TypeScript definitions
|
||||
|
||||
const { execSync } = require('child_process');
|
||||
const { readFileSync, writeFileSync } = require('fs');
|
||||
|
||||
execSync('tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly', { stdio: 'inherit' });
|
||||
// We need to add these types to the .d.ts files here because if we add them before building, the build will fail,
|
||||
// because the TS->JS transformation doesn't know these exports are types and produces code that fails at runtime.
|
||||
// We can't use `export type` syntax either because the TS version we're on doesn't have this feature yet.
|
||||
|
||||
function modify(path, modifyFn) {
|
||||
const content = readFileSync(path, 'utf8');
|
||||
writeFileSync(path, modifyFn(content));
|
||||
}
|
||||
|
||||
modify(
|
||||
'types/runtime/index.d.ts',
|
||||
content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents')
|
||||
);
|
||||
modify(
|
||||
'types/compiler/index.d.ts',
|
||||
content => content + '\nexport { CompileOptions, ModuleFormat, EnableSourcemap, CssHashGetter } from "./interfaces"'
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,91 @@
|
||||
/** ----------------------------------------------------------------------
|
||||
This script gets a list of global objects/functions of browser.
|
||||
This process is simple for now, so it is handled without AST parser.
|
||||
Please run `node scripts/globals-extractor.mjs` at the project root.
|
||||
|
||||
see: https://github.com/microsoft/TypeScript/tree/main/lib
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
import http from 'https';
|
||||
import fs from 'fs';
|
||||
|
||||
const GLOBAL_TS_PATH = './src/compiler/utils/globals.ts';
|
||||
|
||||
// MEMO: add additional objects/functions which existed in `src/compiler/utils/names.ts`
|
||||
// before this script was introduced but could not be retrieved by this process.
|
||||
const SPECIALS = ['global', 'globalThis', 'InternalError', 'process', 'undefined'];
|
||||
|
||||
const get_url = (name) => `https://raw.githubusercontent.com/microsoft/TypeScript/main/lib/lib.${name}.d.ts`;
|
||||
const extract_name = (split) => split.match(/^[a-zA-Z0-9_$]+/)[0];
|
||||
|
||||
const extract_functions_and_references = (name, data) => {
|
||||
const functions = [];
|
||||
const references = [];
|
||||
data.split('\n').forEach(line => {
|
||||
const trimmed = line.trim();
|
||||
const split = trimmed.replace(/[\s+]/, ' ').split(' ');
|
||||
if (split[0] === 'declare' && split[1] !== 'type') {
|
||||
functions.push(extract_name(split[2]));
|
||||
} else if (trimmed.startsWith('/// <reference')) {
|
||||
const matched = trimmed.match(/ lib="(.+)"/);
|
||||
const reference = matched && matched[1];
|
||||
if (reference) references.push(reference);
|
||||
}
|
||||
});
|
||||
return { functions, references };
|
||||
};
|
||||
|
||||
const do_get = (url) => new Promise((resolve, reject) => {
|
||||
http.get(url, (res) => {
|
||||
let body = '';
|
||||
res.setEncoding('utf8');
|
||||
res.on('data', (chunk) => body += chunk);
|
||||
res.on('end', () => resolve(body));
|
||||
}).on('error', (e) => {
|
||||
console.error(e.message);
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
|
||||
const fetched_names = new Set();
|
||||
const get_functions = async (name) => {
|
||||
const res = [];
|
||||
if (fetched_names.has(name)) return res;
|
||||
fetched_names.add(name);
|
||||
const body = await do_get(get_url(name));
|
||||
const { functions, references } = extract_functions_and_references(name, body);
|
||||
res.push(...functions);
|
||||
const chile_functions = await Promise.all(references.map(get_functions));
|
||||
chile_functions.forEach(i => res.push(...i));
|
||||
return res;
|
||||
};
|
||||
|
||||
const build_output = (functions) => {
|
||||
const sorted = Array.from(new Set(functions.sort()));
|
||||
return `\
|
||||
/** ----------------------------------------------------------------------
|
||||
This file is automatically generated by \`scripts/globals-extractor.mjs\`.
|
||||
Generated At: ${new Date().toISOString()}
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
export default new Set([
|
||||
${sorted.map((i) => `\t'${i}'`).join(',\n')}
|
||||
]);
|
||||
`;
|
||||
};
|
||||
|
||||
const get_exists_globals = () => {
|
||||
const regexp = /^\s*["'](.+)["'],?\s*$/;
|
||||
return fs.readFileSync(GLOBAL_TS_PATH, 'utf8')
|
||||
.split('\n')
|
||||
.filter(line => line.match(regexp))
|
||||
.map(line => line.match(regexp)[1]);
|
||||
};
|
||||
|
||||
(async () => {
|
||||
const globals = get_exists_globals();
|
||||
const new_globals = await get_functions('es2021.full');
|
||||
globals.forEach((g) => new_globals.push(g));
|
||||
SPECIALS.forEach((g) => new_globals.push(g));
|
||||
fs.writeFileSync(GLOBAL_TS_PATH, build_output(new_globals));
|
||||
})();
|
||||
@ -0,0 +1,7 @@
|
||||
if (process.env.SKIP_PREPARE) {
|
||||
console.log('Skipped "prepare" script');
|
||||
} else {
|
||||
const { execSync } = require("child_process");
|
||||
const command = process.argv.slice(2).join(" ");
|
||||
execSync(command, { stdio: "inherit" });
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
/*
|
||||
!/Dockerfile
|
||||
!/package.json
|
||||
!/package-lock.json
|
||||
!/__sapper__
|
||||
/__sapper__/*
|
||||
!/__sapper__/build
|
||||
!/static
|
||||
!/content
|
||||
@ -1,13 +0,0 @@
|
||||
NODE_ENV=
|
||||
|
||||
PORT=
|
||||
BASEURL=
|
||||
GITHUB_CLIENT_ID=
|
||||
GITHUB_CLIENT_SECRET=
|
||||
MAPBOX_ACCESS_TOKEN=
|
||||
|
||||
PGHOST=hostname
|
||||
PGPORT=port
|
||||
PGUSER=username
|
||||
PGPASSWORD=password
|
||||
PGDATABASE=database_name
|
||||
@ -1,58 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
rules: {
|
||||
indent: [2, 'tab', { SwitchCase: 1 }],
|
||||
semi: [2, 'always'],
|
||||
'keyword-spacing': [2, { before: true, after: true }],
|
||||
'space-before-blocks': [2, 'always'],
|
||||
'no-mixed-spaces-and-tabs': [2, 'smart-tabs'],
|
||||
'no-cond-assign': 0,
|
||||
'no-unused-vars': 2,
|
||||
'object-shorthand': [2, 'always'],
|
||||
'no-const-assign': 2,
|
||||
'no-class-assign': 2,
|
||||
'no-this-before-super': 2,
|
||||
'no-var': 2,
|
||||
'no-unreachable': 2,
|
||||
'valid-typeof': 2,
|
||||
'quote-props': [2, 'as-needed'],
|
||||
'one-var': [2, 'never'],
|
||||
'prefer-arrow-callback': 2,
|
||||
'prefer-const': [2, { destructuring: 'all' }],
|
||||
'arrow-spacing': 2,
|
||||
'no-inner-declarations': 0,
|
||||
'require-atomic-updates': 0
|
||||
},
|
||||
env: {
|
||||
es6: true,
|
||||
browser: true,
|
||||
node: true,
|
||||
mocha: true
|
||||
},
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:import/errors',
|
||||
'plugin:import/warnings'
|
||||
],
|
||||
plugins: ['svelte3'],
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
processor: 'svelte3/svelte3'
|
||||
}
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 9,
|
||||
sourceType: 'module'
|
||||
},
|
||||
settings: {
|
||||
'import/core-modules': ['svelte'],
|
||||
'svelte3/compiler': (() => {
|
||||
try {
|
||||
return require('svelte/compiler');
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
})()
|
||||
}
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
#!include:.dockerignore
|
||||
@ -1,11 +0,0 @@
|
||||
sudo: false
|
||||
language: node_js
|
||||
node_js:
|
||||
- "stable"
|
||||
env:
|
||||
global:
|
||||
- BUILD_TIMEOUT=10000
|
||||
install:
|
||||
- npm install
|
||||
- npm install cypress
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
# IMPORTANT: Don't use this Dockerfile in your own Sapper projects without also looking at the .dockerignore file.
|
||||
# Without an appropriate .dockerignore, this Dockerfile will copy a large number of unneeded files into your image.
|
||||
|
||||
FROM mhart/alpine-node:12
|
||||
|
||||
# install dependencies
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci --production
|
||||
|
||||
###
|
||||
# Only copy over the Node pieces we need
|
||||
# ~> Saves 35MB
|
||||
###
|
||||
FROM mhart/alpine-node:slim-12
|
||||
|
||||
WORKDIR /app
|
||||
COPY --from=0 /app .
|
||||
COPY . .
|
||||
|
||||
EXPOSE 3000
|
||||
CMD ["node", "__sapper__/build"]
|
||||
@ -1,22 +0,0 @@
|
||||
HASH := `git rev-parse --short HEAD`
|
||||
|
||||
SERVICE := svelte-website
|
||||
PROJECT := svelte-dev
|
||||
|
||||
IMAGE := gcr.io/$(PROJECT)/$(SERVICE):$(HASH)
|
||||
|
||||
sapper:
|
||||
@echo "\n~> updating template & contributors list"
|
||||
@npm run update
|
||||
@echo "\n~> building Sapper app"
|
||||
@npm run build
|
||||
|
||||
|
||||
docker:
|
||||
@echo "\n~> building docker image"
|
||||
@gcloud builds submit --project $(PROJECT) -t $(IMAGE)
|
||||
|
||||
|
||||
deploy: sapper docker
|
||||
@echo "\n~> deploying $(SERVICE) to Cloud Run servers"
|
||||
@gcloud run deploy $(SERVICE) --project $(PROJECT) --allow-unauthenticated --platform managed --region us-central1 --image $(IMAGE) --memory=512Mi
|
||||
@ -1,80 +0,0 @@
|
||||
## Running locally
|
||||
|
||||
Set up the site sub-project:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/sveltejs/svelte.git
|
||||
cd site
|
||||
npm ci
|
||||
npm run update
|
||||
npm run dev
|
||||
```
|
||||
|
||||
and navigate to [localhost:3000](http://localhost:3000).
|
||||
|
||||
## Running using the local copy of Svelte
|
||||
|
||||
By default, the REPL will fetch the most recent version of Svelte from https://unpkg.com/svelte. When running the site locally, you can also use your local copy of Svelte.
|
||||
|
||||
To produce the proper browser-compatible UMD build of the compiler, you will need to run `npm run build` (or `npm run dev`) in the root of this repository with the `PUBLISH` environment variable set to any non-empty string:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/sveltejs/svelte.git
|
||||
cd svelte
|
||||
npm ci
|
||||
PUBLISH=1 npm run build
|
||||
cd site
|
||||
npm ci
|
||||
npm run update
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Then visit the REPL at [localhost:3000/repl?version=local](http://localhost:3000/repl?version=local). Please note that the local REPL only works with `npm run dev` and not when building the site for production usage.
|
||||
|
||||
## REPL GitHub integration
|
||||
|
||||
In order for the REPL's GitHub integration to work properly when running locally, you will need to:
|
||||
- [create a GitHub OAuth app](https://github.com/settings/developers):
|
||||
- set `Authorization callback URL` to `http://localhost:3000/auth/callback`;
|
||||
- set `Application name` as you like, and `Homepage URL` as `http://localhost:3000/`;
|
||||
- create the app and take note of `Client ID` and `Client Secret`
|
||||
- in this repo, create `site/.env` containing:
|
||||
```
|
||||
GITHUB_CLIENT_ID=[your app's Client ID]
|
||||
GITHUB_CLIENT_SECRET=[your app's Client Secret]
|
||||
BASEURL=http://localhost:3000
|
||||
```
|
||||
|
||||
## Building the site
|
||||
|
||||
To build the website, run `npm run build`. The output can be found in `__sapper__/build`.
|
||||
|
||||
## Testing
|
||||
|
||||
Tests can be run using `npm run test`.
|
||||
|
||||
|
||||
## Linking `@sveltejs/site-kit` and `@sveltejs/site-repl`
|
||||
|
||||
This site depends on `@sveltejs/site-kit`, a collection of styles, components and icons used in common by *.svelte.dev websites, and `@sveltejs/site-repl`.
|
||||
|
||||
In order to work on features that depend on those packages, you need to [link](https://docs.npmjs.com/cli/link) their repositories:
|
||||
|
||||
- `cd <somewhere>`
|
||||
- `git clone https://github.com/sveltejs/site-kit`
|
||||
- `git clone https://github.com/sveltejs/svelte-repl`
|
||||
- `cd <somewhere>/site-kit`
|
||||
- `npm link`
|
||||
- `cd <somewhere>/svelte-repl`
|
||||
- `npm link`
|
||||
- `cd <svelte-repo>/site`
|
||||
- `npm link @sveltejs/site-kit`
|
||||
- `npm link @sveltejs/svelte-repl`
|
||||
|
||||
|
||||
|
||||
## Translating the API docs
|
||||
|
||||
Anchors are automatically generated using headings in the documentation and by default (for the english language) they are latinised to make sure the URL is always conforming to RFC3986.
|
||||
|
||||
If we need to translate the API documentation to a language using unicode chars, we can setup this app to export the correct anchors by setting up `SLUG_PRESERVE_UNICODE` to `true` in `config.js`.
|
||||
@ -1,17 +0,0 @@
|
||||
version: "{build}"
|
||||
|
||||
shallow_clone: true
|
||||
|
||||
init:
|
||||
- git config --global core.autocrlf false
|
||||
|
||||
build: off
|
||||
|
||||
environment:
|
||||
matrix:
|
||||
# node.js
|
||||
- nodejs_version: stable
|
||||
|
||||
install:
|
||||
- ps: Install-Product node $env:nodejs_version
|
||||
- npm install
|
||||
@ -1,2 +0,0 @@
|
||||
export const SLUG_PRESERVE_UNICODE = false;
|
||||
export const SLUG_SEPARATOR = '_';
|
||||
@ -1,65 +0,0 @@
|
||||
---
|
||||
title: The easiest way to get started with Svelte
|
||||
description: This'll only take a minute.
|
||||
author: Rich Harris
|
||||
authorURL: https://twitter.com/Rich_Harris
|
||||
---
|
||||
|
||||
Svelte is a [new kind of framework](/blog/frameworks-without-the-framework). Rather than putting a `<script src='svelte.js'>` tag on the page, or bringing it into your app with `import` or `require`, Svelte is a compiler that works behind the scenes to turn your component files into beautifully optimised JavaScript.
|
||||
|
||||
Because of that, getting started with it can be a little bit confusing at first. How, you might reasonably ask, do you make a Svelte app?
|
||||
|
||||
|
||||
## 1. Use the REPL
|
||||
|
||||
The [Svelte REPL](repl) is the easiest way to begin. You can choose from a list of examples to get you started, and tweak them until they do what you want.
|
||||
|
||||
<aside><p>You'll need to have <a href="https://nodejs.org/">Node.js</a> installed, and know how to use the terminal</p></aside>
|
||||
|
||||
At some point, your app will outgrow the REPL. Click the **download** button to save a `svelte-app.zip` file to your computer and uncompress it.
|
||||
|
||||
Open a terminal window and set the project up...
|
||||
|
||||
```bash
|
||||
cd /path/to/svelte-app
|
||||
npm install
|
||||
```
|
||||
|
||||
...then start up a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
This will serve your app on [localhost:5000](http://localhost:5000) and rebuild it with [Rollup](https://rollupjs.org) every time you make a change to the files in `svelte-app/src`.
|
||||
|
||||
|
||||
## 2. Use degit
|
||||
|
||||
When you download from the REPL, you're getting a customised version of the [sveltejs/template](https://github.com/sveltejs/template) repo. You can skip messing around with zip files by using [degit](https://github.com/Rich-Harris/degit), a project scaffolding tool.
|
||||
|
||||
In the terminal, you can instantly create a new project like so:
|
||||
|
||||
```bash
|
||||
npx degit sveltejs/template my-svelte-project
|
||||
cd my-svelte-project
|
||||
# to use TypeScript run:
|
||||
# node scripts/setupTypeScript.js
|
||||
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
This will create a new project in the `my-svelte-project` directory, install its dependencies, and start a server on http://localhost:5000.
|
||||
|
||||
You can find more information about using TypeScript [here](blog/svelte-and-typescript).
|
||||
|
||||
Once you've tinkered a bit and understood how everything fits together, you can fork [sveltejs/template](https://github.com/sveltejs/template) and start doing this instead:
|
||||
|
||||
```bash
|
||||
npx degit your-name/template my-new-project
|
||||
```
|
||||
|
||||
And that's it! Do `npm run build` to create a production-ready version of your app, and check the project template's [README](https://github.com/sveltejs/template/blob/master/README.md) for instructions on how to easily deploy your app to the web with [Vercel](https://vercel.com) or [Surge](http://surge.sh/).
|
||||
|
||||
You're not restricted to using Rollup — there are also integrations for [webpack](https://github.com/sveltejs/svelte-loader), [Browserify](https://github.com/tehshrike/sveltify) and others, or you can use the [Svelte CLI](https://github.com/sveltejs/svelte-cli) (Update from 2019: with Svelte 3 the CLI was deprecated and we now use [sirv-cli](https://www.npmjs.com/package/sirv-cli) in our template. Feel free to use whatever tool you like!) or the [API](https://github.com/sveltejs/svelte/tree/v2#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Discord chatroom](chat), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter!
|
||||
@ -1,84 +0,0 @@
|
||||
---
|
||||
title: Sapper: Towards the ideal web app framework
|
||||
description: Taking the next-plus-one step
|
||||
author: Rich Harris
|
||||
authorURL: https://twitter.com/Rich_Harris
|
||||
---
|
||||
|
||||
> Quickstart for the impatient: [the Sapper docs](https://sapper.svelte.dev), and the [starter template](https://github.com/sveltejs/sapper-template)
|
||||
|
||||
If you had to list the characteristics of the perfect Node.js web application framework, you'd probably come up with something like this:
|
||||
|
||||
1. It should do server-side rendering, for fast initial loads and no caveats around SEO
|
||||
2. As a corollary, your app's codebase should be universal — write once for server *and* client
|
||||
3. The client-side app should *hydrate* the server-rendered HTML, attaching event listeners (and so on) to existing elements rather than re-rendering them
|
||||
4. Navigating to subsequent pages should be instantaneous
|
||||
5. Offline, and other Progressive Web App characteristics, must be supported out of the box
|
||||
6. Only the JavaScript and CSS required for the first page should load initially. That means the framework should do automatic code-splitting at the route level, and support dynamic `import(...)` for more granular manual control
|
||||
7. No compromise on performance
|
||||
8. First-rate developer experience, with hot module reloading and all the trimmings
|
||||
9. The resulting codebase should be easy to grok and maintain
|
||||
10. It should be possible to understand and customise every aspect of the system — no webpack configs locked up in the framework, and as little hidden 'plumbing' as possible
|
||||
11. Learning the entire framework in under an hour should be easy, and not just for experienced developers
|
||||
|
||||
[Next.js](https://github.com/zeit/next.js) is close to this ideal. If you haven't encountered it yet, I strongly recommend going through the tutorials at [learnnextjs.com](https://learnnextjs.com). Next introduced a brilliant idea: all the pages of your app are files in a `your-project/pages` directory, and each of those files is just a React component.
|
||||
|
||||
Everything else flows from that breakthrough design decision. Finding the code responsible for a given page is easy, because you can just look at the filesystem rather than playing 'guess the component name'. Project structure bikeshedding is a thing of the past. And the combination of SSR (server-side rendering) and code-splitting — something the React Router team [gave up on](https://reacttraining.com/react-router/web/guides/code-splitting), declaring 'Godspeed those who attempt the server-rendered, code-split apps' — is trivial.
|
||||
|
||||
But it's not perfect. As churlish as it might be to list the flaws in something *so, so good*, there are some:
|
||||
|
||||
* Next uses something called 'route masking' to create nice URLs (e.g. `/blog/hello-world` instead of `/post?slug=hello-world`). This undermines the guarantee about directory structure corresponding to app structure, and forces you to maintain configuration that translates between the two forms
|
||||
* All your routes are assumed to be universal 'pages'. But it's very common to need routes that only render on the server, such as a 301 redirect or an [API endpoint](/blog/sapper-towards-the-ideal-web-app-framework.json) that serves the data for your pages, and Next doesn't have a great solution for this. You can add logic to your `server.js` file to handle these cases, but it feels at odds with the declarative approach taken for pages
|
||||
* To use the client-side router, links can't be standard `<a>` tags. Instead, you have to use framework-specific `<Link>` components, which is impossible in the markdown content for a blog post such as this one, for example
|
||||
|
||||
The real problem, though, is that all that goodness comes for a price. The simplest possible Next app — a single 'hello world' page that renders some static text — involves 66kb of gzipped JavaScript. Unzipped, it's 204kb, which is a non-trivial amount of code for a mobile device to parse at a time when performance is a critical factor determining whether or not your users will stick around. And that's the *baseline*.
|
||||
|
||||
We can do better!
|
||||
|
||||
|
||||
## The compiler-as-framework paradigm shift
|
||||
|
||||
[Svelte introduced a radical idea](blog/frameworks-without-the-framework): what if your UI framework wasn't a framework at all, but a compiler that turned your components into standalone JavaScript modules? Instead of using a library like React or Vue, which knows nothing about your app and must therefore be a one-size-fits-all solution, we can ship highly-optimised vanilla JavaScript. Just the code your app needs, and without the memory and performance overhead of solutions based on a virtual DOM.
|
||||
|
||||
The JavaScript world is [moving towards this model](https://tomdale.net/2017/09/compilers-are-the-new-frameworks/). [Stencil](https://stenciljs.com), a Svelte-inspired framework from the Ionic team, compiles to web components. [Glimmer](https://glimmerjs.com) *doesn't* compile to standalone JavaScript (the pros and cons of which deserve a separate blog post), but the team is doing some fascinating research around compiling templates to bytecode. (React is [getting in on the action](https://twitter.com/trueadm/status/944908776896978946), though their current research focuses on optimising your JSX app code, which is arguably more similar to the ahead-of-time optimisations that Angular, Ractive and Vue have been doing for a few years.)
|
||||
|
||||
What happens if we use the new model as a starting point?
|
||||
|
||||
|
||||
## Introducing Sapper
|
||||
|
||||
<aside><p>The <a href="https://sapper.svelte.dev/docs#Why_the_name">name comes from</a> the term for combat engineers, and is also short for Svelte app maker</p></aside>
|
||||
|
||||
[Sapper](https://sapper.svelte.dev) is the answer to that question. **Sapper is a Next.js-style framework that aims to meet the eleven criteria at the top of this article while dramatically reducing the amount of code that gets sent to the browser.** It's implemented as Express-compatible middleware, meaning it's easy to understand and customise.
|
||||
|
||||
The same 'hello world' app that took 204kb with React and Next weighs just 7kb with Sapper. That number is likely to fall further in the future as we explore the space of optimisation possibilities, such as not shipping any JavaScript *at all* for pages that aren't interactive, beyond the tiny Sapper runtime that handles client-side routing.
|
||||
|
||||
What about a more 'real world' example? Conveniently, the [RealWorld](https://github.com/gothinkster/realworld) project, which challenges frameworks to develop an implementation of a Medium clone, gives us a way to find out. The [Sapper implementation](https://github.com/sveltejs/realworld) takes 39.6kb (11.8kb zipped) to render an interactive homepage.
|
||||
|
||||
<aside><p>Code-splitting isn't free — if the reference implementation used code-splitting, it would be larger still</p></aside>
|
||||
|
||||
The entire app costs 132.7kb (39.9kb zipped), which is significantly smaller than the reference React/Redux implementation at 327kb (85.7kb), but even if it was as large it would *feel* faster because of code-splitting. And that's a crucial point. We're told we need to code-split our apps, but if your app uses a traditional framework like React or Vue then there's a hard lower bound on the size of your initial code-split chunk — the framework itself, which is likely to be a significant portion of your total app size. With the Svelte approach, that's no longer the case.
|
||||
|
||||
But size is only part of the story. Svelte apps are also extremely performant and memory-efficient, and the framework includes powerful features that you would sacrifice if you chose a 'minimal' or 'simple' UI library.
|
||||
|
||||
|
||||
## Trade-offs
|
||||
|
||||
The biggest drawback for many developers evaluating Sapper would be 'but I like React, and I already know how to use it', which is fair.
|
||||
|
||||
If you're in that camp, I'd invite you to at least try alternative frameworks. You might be pleasantly surprised! The [Sapper RealWorld](https://github.com/sveltejs/realworld) implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you're able to express concepts very concisely using Svelte's template syntax (which [takes all of five minutes to master](https://v2.svelte.dev/guide#template-syntax)). You get [scoped CSS](blog/the-zen-of-just-writing-css), with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it's just string concatenation. And we recently introduced [svelte/store](https://v2.svelte.dev/guide#state-management), a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you'll end up feeling vindicated!
|
||||
|
||||
But there are trade-offs nonetheless. Some people have a pathological aversion to any form of 'template language', and maybe that applies to you. JSX proponents will clobber you with the 'it's just JavaScript' mantra, and therein lies React's greatest strength, which is that it is infinitely flexible. That flexibility comes with its own set of trade-offs, but we're not here to discuss those.
|
||||
|
||||
And then there's *ecosystem*. The universe around React in particular — the devtools, editor integrations, ancillary libraries, tutorials, StackOverflow answers, hell, even job opportunities — is unrivalled. While it's true that citing 'ecosystem' as the main reason to choose a tool is a sign that you're stuck on a local maximum, apt to be marooned by the rising waters of progress, it's still a major point in favour of incumbents.
|
||||
|
||||
|
||||
## Roadmap
|
||||
|
||||
We're not at version 1.0.0 yet, and a few things may change before we get there. Once we do (soon!), there are a lot of exciting possibilities.
|
||||
|
||||
I believe the next frontier of web performance is 'whole-app optimisation'. Currently, Svelte's compiler operates at the component level, but a compiler that understood the boundaries *between* those components could generate even more efficient code. The React team's [Prepack research](https://twitter.com/trueadm/status/944908776896978946) is predicated on a similar idea, and the Glimmer team is doing some interesting work in this space. Svelte and Sapper are well positioned to take advantage of these ideas.
|
||||
|
||||
Speaking of Glimmer, the idea of compiling components to bytecode is one that we'll probably steal in 2018. A framework like Sapper could conceivably determine which compilation mode to use based on the characteristics of your app. It could even serve JavaScript for the initial route for the fastest possible startup time, then lazily serve a bytecode interpreter for subsequent routes, resulting in the optimal combination of startup size and total app size.
|
||||
|
||||
Mostly, though, we want the direction of Sapper to be determined by its users. If you're the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on [GitHub](https://github.com/sveltejs/svelte) and [Discord](chat).
|
||||
@ -1,204 +0,0 @@
|
||||
---
|
||||
title: Svelte v2 is out!
|
||||
description: Here's what you need to know
|
||||
author: Rich Harris
|
||||
authorURL: https://twitter.com/Rich_Harris
|
||||
---
|
||||
|
||||
<aside>Our motto is 'move slowly and break things'. No, wait, that came out wrong...</aside>
|
||||
|
||||
Almost a year after we first started talking about version 2 on the Svelte issue tracker, it's finally time to make some breaking changes. This blog post will explain what changed, why it changed, and what you need to do to bring your apps up to date.
|
||||
|
||||
|
||||
## tl;dr
|
||||
|
||||
Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Discord chatroom](chat).
|
||||
|
||||
- Install Svelte v2 from npm
|
||||
- Upgrade your templates with [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade)
|
||||
- Remove calls to `component.observe`, or add the `observe` method from [svelte-extras](https://github.com/sveltejs/svelte-extras)
|
||||
- Rewrite calls to `component.get('foo')` as `component.get().foo`
|
||||
- Return `destroy` from your custom event handlers, rather than `teardown`
|
||||
- Make sure you're not passing numeric string props to components
|
||||
|
||||
|
||||
## New template syntax
|
||||
|
||||
The most visible change: we've made some improvements to the template syntax.
|
||||
|
||||
A common piece of feedback we heard was 'ewww, Mustache' or 'ewww, Handlebars'. A lot of people who used string-based templating systems in a previous era of web development *really* dislike them. Because Svelte adopted the `{{curlies}}` from those languages, a lot of people assumed that we somehow shared the limitations of those tools, such as weird scoping rules or an inability to use arbitrary JavaScript expressions.
|
||||
|
||||
<aside>If you need to show an actual `{` character, it's as easy as `&#123;`</aside>
|
||||
|
||||
Beyond that, JSX proved that double curlies are unnecessary. So we've made our templates more... svelte, by adopting single curlies. The result feels much lighter to look at and is more pleasant to type:
|
||||
|
||||
```html
|
||||
<h1>Hello {name}!</h1>
|
||||
```
|
||||
|
||||
There are a few other updates. But you don't need to make them manually — just run [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade) on your codebase:
|
||||
|
||||
```bash
|
||||
npx svelte-upgrade v2 src
|
||||
```
|
||||
|
||||
This assumes any `.html` files in `src` are Svelte components. You can specify whichever directory you like, or target a different directory — for example, you'd do `npx svelte-upgrade v2 routes` to update a [Sapper](https://sapper.svelte.technology) app.
|
||||
|
||||
To see the full set of changes, consult the [svelte-upgrade README](https://github.com/sveltejs/svelte-upgrade#svelte-v2-syntax-changes).
|
||||
|
||||
|
||||
## Computed properties
|
||||
|
||||
Another thing that people often found confusing about Svelte is the way computed properties work. To recap, if you had a component with this...
|
||||
|
||||
```js
|
||||
export default {
|
||||
computed: {
|
||||
d: (a, b, c) => a = b + c
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
...then Svelte would first look at the function arguments to see which values `d` depended on, and then it would write code that updated `d` whenever those values changed, by injecting them into the function. That's cool, because it allows you to derive complex values from your component's inputs without worrying about when they need to recomputed, but it's also... *weird*. JavaScript doesn't work that way!
|
||||
|
||||
In v2, we use [destructuring](http://www.jstips.co/en/javascript/use-destructuring-in-function-parameters/) instead:
|
||||
|
||||
```js
|
||||
export default {
|
||||
computed: {
|
||||
d: ({ a, b, c }) => a = b + c
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
The Svelte compiler can still see which values `d` depends on, but it's no longer injecting values — it just passes the component state object into each computed property.
|
||||
|
||||
Again, you don't need to make this change manually — just run svelte-upgrade on your components, as shown above.
|
||||
|
||||
|
||||
## Sorry, IE11. It's not you, it's... well actually, yeah. It's you
|
||||
|
||||
Svelte v1 was careful to only emit ES5 code, so that you wouldn't be forced to faff around with transpilers in order to use it. But it's 2018 now, and almost all browsers support modern JavaScript. By ditching the ES5 constraint, we can generate leaner code.
|
||||
|
||||
If you need to support IE11 and friends, you will need to use a transpiler like [Babel](http://babeljs.io/repl) or [Bublé](http://buble.surge.sh/).
|
||||
|
||||
|
||||
## New lifecycle hooks
|
||||
|
||||
In addition to `oncreate` and `ondestroy`, Svelte v2 adds two more [lifecycle hooks](https://v2.svelte.dev/guide#lifecycle-hooks) for responding to state changes:
|
||||
|
||||
```js
|
||||
export default {
|
||||
onstate({ changed, current, previous }) {
|
||||
// this fires before oncreate, and
|
||||
// whenever state changes
|
||||
},
|
||||
|
||||
onupdate({ changed, current, previous }) {
|
||||
// this fires after oncreate, and
|
||||
// whenever the DOM has been updated
|
||||
// following a state change
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
You can also listen to those events programmatically:
|
||||
|
||||
```js
|
||||
component.on('state', ({ changed, current, previous }) => {
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## component.observe
|
||||
|
||||
With the new lifecycle hooks, we no longer need the `component.observe(...)` method:
|
||||
|
||||
```js
|
||||
// before
|
||||
export default {
|
||||
oncreate() {
|
||||
this.observe('foo', foo => {
|
||||
console.log(`foo is now ${foo}`);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// after
|
||||
export default {
|
||||
onstate({ changed, current }) {
|
||||
if (changed.foo) {
|
||||
console.log(`foo is now ${current.foo}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
This shrinks the amount of code Svelte needs to generate, and gives you more flexibility. For example, it's now very easy to take action when any one of *several* properties have changed, such as redrawing a canvas without debouncing several observers.
|
||||
|
||||
However, if you prefer to use `component.observe(...)`, then you can install it from [svelte-extras](https://github.com/sveltejs/svelte-extras):
|
||||
|
||||
```js
|
||||
import { observe } from 'svelte-extras';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
observe
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
## component.get
|
||||
|
||||
This method no longer takes an optional `key` argument — instead, it always returns the entire state object:
|
||||
|
||||
```js
|
||||
// before
|
||||
const foo = this.get('foo');
|
||||
const bar = this.get('bar');
|
||||
|
||||
// after
|
||||
const { foo, bar } = this.get();
|
||||
```
|
||||
|
||||
This change might seem annoying initially, but it's the right move: among other things, it's likely to play better with type systems as we explore that space more fully in future.
|
||||
|
||||
|
||||
## event_handler.destroy
|
||||
|
||||
If your app has [custom event handlers](https://v2.svelte.dev/guide#custom-event-handlers), they must return an object with a `destroy` method, *not* a `teardown` method (this aligns event handlers with the component API).
|
||||
|
||||
|
||||
## No more type coercion
|
||||
|
||||
Previously, numeric values passed to components were treated as numbers:
|
||||
|
||||
```html
|
||||
<Counter start='1'/>
|
||||
```
|
||||
|
||||
That causes unexpected behaviour, and has been changed: if you need to pass a literal number, do so as an expression:
|
||||
|
||||
```html
|
||||
<Counter start={1}/>
|
||||
```
|
||||
|
||||
|
||||
## Compiler changes
|
||||
|
||||
In most cases you'll never need to deal with the compiler directly, so this shouldn't require any action on your part. It's worth noting anyway: the compiler API has changed. Instead of an object with a mish-mash of properties, the compiler now returns `js`, `css`, `ast` and `stats`:
|
||||
|
||||
```js
|
||||
const { js, css, ast, stats } = svelte.compile(source, options);
|
||||
```
|
||||
|
||||
`js` and `css` are both `{ code, map }` objects, where `code` is a string and `map` is a sourcemap. The `ast` is an abstract syntax tree of your component, and the `stats` object contains metadata about the component, and information about the compilation.
|
||||
|
||||
Before, there was a `svelte.validate` method which checked your component was valid. That's been removed — if you want to check a component without actually compiling it, just pass the `generate: false` option.
|
||||
|
||||
|
||||
## My app is broken! Help!
|
||||
|
||||
Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren't mentioned here, swing by [Discord chatroom](chat) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues).
|
||||
@ -1,29 +0,0 @@
|
||||
---
|
||||
title: Using CSS-in-JS with Svelte
|
||||
description: You don't need to, but you can
|
||||
author: Rich Harris
|
||||
authorURL: https://twitter.com/Rich_Harris
|
||||
---
|
||||
|
||||
CSS is a core part of any web app. By extension, a UI framework that doesn't have a built-in way to add styles to your components is unfinished.
|
||||
|
||||
That's why Svelte allows you to add CSS in a component's `<style>` tag. Co-locating your CSS with your markup means we can [solve the biggest problems developers face when writing CSS](/blog/the-zen-of-just-writing-css) without introducing new ones, all while providing a rather nice development experience.
|
||||
|
||||
But Svelte's style handling does have some limitations. It's too difficult to share styles between components, or apply app-level optimisations. These are areas we plan to address in future versions, but in the meantime if you need those things you can use any framework-agnostic CSS-in-JS library.
|
||||
|
||||
|
||||
## For example
|
||||
|
||||
Here, we're using [Emotion](https://emotion.sh) to generate scoped class names that can be used across multiple components:
|
||||
|
||||
<div class="max">
|
||||
<iframe
|
||||
title="Aphrodite example"
|
||||
src="/repl/embed?example=blog-svelte-css-in-js"
|
||||
scrolling="no"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate <code>.css</code> file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application!
|
||||
|
||||
Note that you can mix-and-match — you can still use Svelte's built-in CSS handling alongside a CSS-in-JS library.
|
||||
@ -1,149 +0,0 @@
|
||||
---
|
||||
title: Virtual DOM is pure overhead
|
||||
description: Let's retire the 'virtual DOM is fast' myth once and for all
|
||||
author: Rich Harris
|
||||
authorURL: https://twitter.com/Rich_Harris
|
||||
---
|
||||
|
||||
If you've used JavaScript frameworks in the last few years, you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the *real* DOM. It's a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn't use a virtual DOM.
|
||||
|
||||
It's time to take a closer look.
|
||||
|
||||
|
||||
## What is the virtual DOM?
|
||||
|
||||
In many frameworks, you build an app by creating `render()` functions, like this simple [React](https://reactjs.org/) component:
|
||||
|
||||
```js
|
||||
function HelloMessage(props) {
|
||||
return (
|
||||
<div className="greeting">
|
||||
Hello {props.name}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
You can do the same thing without JSX...
|
||||
|
||||
```js
|
||||
function HelloMessage(props) {
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ className: 'greeting' },
|
||||
'Hello ',
|
||||
props.name
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
...but the result is the same — an object representing how the page should now look. That object is the virtual DOM. Every time your app's state updates (for example when the `name` prop changes), you create a new one. The framework's job is to *reconcile* the new one against the old one, to figure out what changes are necessary and apply them to the real DOM.
|
||||
|
||||
|
||||
## How did the meme start?
|
||||
|
||||
Misunderstood claims about virtual DOM performance date back to the launch of React. In [Rethinking Best Practices](https://www.youtube.com/watch?v=x7cQ3mrcKaY), a seminal 2013 talk by former React core team member Pete Hunt, we learned the following:
|
||||
|
||||
> This is actually extremely fast, primarily because most DOM operations tend to be slow. There's been a lot of performance work on the DOM, but most DOM operations tend to drop frames.
|
||||
|
||||
<figure>
|
||||
<img alt="Pete Hunt at JSConfEU 2013" src="media/rethinking-best-practices.jpg">
|
||||
<figcaption>Screenshot from <a href="https://www.youtube.com/watch?v=x7cQ3mrcKaY">Rethinking Best Practices</a> at JSConfEU 2013</figcaption>
|
||||
</figure>
|
||||
|
||||
But hang on a minute! The virtual DOM operations are *in addition to* the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no-one actually does:
|
||||
|
||||
```js
|
||||
onEveryStateChange(() => {
|
||||
document.body.innerHTML = renderMyApp();
|
||||
});
|
||||
```
|
||||
|
||||
Pete clarifies soon after...
|
||||
|
||||
> React is not magic. Just like you can drop into assembler with C and beat the C compiler, you can drop into raw DOM operations and DOM API calls and beat React if you wanted to. However, using C or Java or JavaScript is an order of magnitude performance improvement because you don't have to worry...about the specifics of the platform. With React you can build applications without even thinking about performance and the default state is fast.
|
||||
|
||||
...but that's not the part that stuck.
|
||||
|
||||
|
||||
|
||||
## So... is the virtual DOM *slow*?
|
||||
|
||||
Not exactly. It's more like 'the virtual DOM is usually fast enough', but with certain caveats.
|
||||
|
||||
The original promise of React was that you could re-render your entire app on every single state change without worrying about performance. In practice, I don't think that's turned out to be accurate. If it was, there'd be no need for optimisations like `shouldComponentUpdate` (which is a way of telling React when it can safely skip a component).
|
||||
|
||||
Even with `shouldComponentUpdate`, updating your entire app's virtual DOM in one go is a lot of work. A while back, the React team introduced something called React Fiber which allows the update to be broken into smaller chunks. This means (among other things) that updates don't block the main thread for long periods of time, though it doesn't reduce the total amount of work or the time an update takes.
|
||||
|
||||
|
||||
## Where does the overhead come from?
|
||||
|
||||
Most obviously, [diffing isn't free](https://twitter.com/pcwalton/status/1015694528857047040). You can't apply changes to the real DOM without first comparing the new virtual DOM with the previous snapshot. To take the earlier `HelloMessage` example, suppose the `name` prop changed from 'world' to 'everybody'.
|
||||
|
||||
1. Both snapshots contain a single element. In both cases it's a `<div>`, which means we can keep the same DOM node
|
||||
2. We enumerate all the attributes on the old `<div>` and the new one to see if any need to be changed, added or removed. In both cases we have a single attribute — a `className` with a value of `"greeting"`
|
||||
3. Descending into the element, we see that the text has changed, so we'll need to update the real DOM
|
||||
|
||||
Of these three steps, only the third has value in this case, since — as is the case in the vast majority of updates — the basic structure of the app is unchanged. It would be much more efficient if we could skip straight to step 3:
|
||||
|
||||
```js
|
||||
if (changed.name) {
|
||||
text.data = name;
|
||||
}
|
||||
```
|
||||
|
||||
(This is almost exactly the update code that Svelte generates. Unlike traditional UI frameworks, Svelte is a compiler that knows at *build time* how things could change in your app, rather than waiting to do the work at *run time*.)
|
||||
|
||||
|
||||
## It's not just the diffing though
|
||||
|
||||
The diffing algorithms used by React and other virtual DOM frameworks are fast. Arguably, the greater overhead is in the components themselves. You wouldn't write code like this...
|
||||
|
||||
```js
|
||||
function StrawManComponent(props) {
|
||||
const value = expensivelyCalculateValue(props.foo);
|
||||
|
||||
return (
|
||||
<p>the value is {value}</p>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
...because you'd be carelessly recalculating `value` on every update, regardless of whether `props.foo` had changed. But it's extremely common to do unnecessary computation and allocation in ways that seem much more benign:
|
||||
|
||||
```js
|
||||
function MoreRealisticComponent(props) {
|
||||
const [selected, setSelected] = useState(null);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>Selected {selected ? selected.name : 'nothing'}</p>
|
||||
|
||||
<ul>
|
||||
{props.items.map(item =>
|
||||
<li>
|
||||
<button onClick={() => setSelected(item)}>
|
||||
{item.name}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Here, we're generating a new array of virtual `<li>` elements — each with their own inline event handler — on every state change, regardless of whether `props.items` has changed. Unless you're unhealthily obsessed with performance, you're not going to optimise that. There's no point. It's plenty fast enough. But you know what would be even faster? *Not doing that.*
|
||||
|
||||
<aside><p><a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a> doubles down on defaulting to doing unnecessary work, with <a href="https://twitter.com/thekitze/status/1078582382201131008">predictable results</a>.</p></aside>
|
||||
|
||||
The danger of defaulting to doing unnecessary work, even if that work is trivial, is that your app will eventually succumb to 'death by a thousand cuts' with no clear bottleneck to aim at once it's time to optimise.
|
||||
|
||||
Svelte is explicitly designed to prevent you from ending up in that situation.
|
||||
|
||||
|
||||
## Why do frameworks use the virtual DOM then?
|
||||
|
||||
It's important to understand that virtual DOM *isn't a feature*. It's a means to an end, the end being declarative, state-driven UI development. Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is *generally good enough*. That means less buggy code, and more time spent on creative tasks instead of tedious ones.
|
||||
|
||||
But it turns out that we can achieve a similar programming model without using virtual DOM — and that's where Svelte comes in.
|
||||
@ -1,65 +0,0 @@
|
||||
---
|
||||
title: Setting up your editor
|
||||
description: Instructions for configuring linting and syntax highlighting
|
||||
author: Rich Harris
|
||||
authorURL: https://twitter.com/Rich_Harris
|
||||
draft: true
|
||||
---
|
||||
|
||||
*__Coming soon__*
|
||||
|
||||
This post will walk you through setting up your editor so that recognises Svelte files:
|
||||
|
||||
* eslint-plugin-svelte3
|
||||
* svelte-vscode
|
||||
* associating .svelte files with HTML in VSCode, Sublime, etc.
|
||||
|
||||
## Atom
|
||||
|
||||
To treat `*.svelte` files as HTML, open *__Edit → Config...__* and add the following lines to your `core` section:
|
||||
|
||||
```cson
|
||||
"*":
|
||||
core:
|
||||
…
|
||||
customFileTypes:
|
||||
"text.html.basic": [
|
||||
"svelte"
|
||||
]
|
||||
```
|
||||
|
||||
## Vim/Neovim
|
||||
|
||||
You can use the [coc-svelte extension](https://github.com/coc-extensions/coc-svelte) which utilises the official language-server.
|
||||
|
||||
As an alternative you can treat all `*.svelte` files as HTML. Add the following line to your `init.vim`:
|
||||
|
||||
```
|
||||
au! BufNewFile,BufRead *.svelte set ft=html
|
||||
```
|
||||
|
||||
To temporarily turn on HTML syntax highlighting for the current buffer, use:
|
||||
|
||||
```
|
||||
:set ft=html
|
||||
```
|
||||
|
||||
To set the filetype for a single file, use a [modeline](https://vim.fandom.com/wiki/Modeline_magic):
|
||||
|
||||
```
|
||||
<!-- vim: set ft=html :-->
|
||||
```
|
||||
|
||||
## Visual Studio Code
|
||||
|
||||
We recommend using the official [Svelte for VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
||||
|
||||
## JetBrains WebStorm
|
||||
|
||||
The [Svelte Framework Integration](https://plugins.jetbrains.com/plugin/12375-svelte/) can be used to add support for Svelte to WebStorm, or other Jetbrains IDEs. Consult the [WebStorm plugin installation guide](https://www.jetbrains.com/help/webstorm/managing-plugins.html) on the JetBrains website for more details.
|
||||
|
||||
## Sublime Text 3
|
||||
|
||||
Open any `.svelte` file.
|
||||
|
||||
Go to *__View → Syntax → Open all with current extension as... → HTML__*.
|
||||
@ -1,107 +0,0 @@
|
||||
---
|
||||
title: Svelte for new developers
|
||||
description: Never used Node.js or the command line? No problem
|
||||
author: Rich Harris
|
||||
authorURL: https://twitter.com/Rich_Harris
|
||||
---
|
||||
|
||||
This short guide is designed to help you — someone who has looked at the [tutorial](/tutorial) and wants to start creating Svelte apps, but doesn't have a ton of experience using JavaScript build tooling — get up and running.
|
||||
|
||||
If there are things that don't make sense, or that we're glossing over, feel free to [raise an issue](https://github.com/sveltejs/svelte/issues) or [suggest edits to this page](https://github.com/sveltejs/svelte/blob/master/site/content/blog/2019-04-16-svelte-for-new-developers.md) that will help us help more people.
|
||||
|
||||
If you get stuck at any point following this guide, the best place to ask for help is in the [chatroom](https://svelte.dev/chat).
|
||||
|
||||
|
||||
## First things first
|
||||
|
||||
You'll be using the *command line*, also known as the terminal. On Windows, you can access it by running **Command Prompt** from the Start menu; on a Mac, hit `Cmd` and `Space` together to bring up **Spotlight**, then start typing `Terminal.app`. On most Linux systems, `Ctrl-Alt-T` brings up the command line.
|
||||
|
||||
The command line is a way to interact with your computer (or another computer! but that's a topic for another time) with more power and control than the GUI (graphical user interface) that most people use day-to-day.
|
||||
|
||||
Once on the command line, you can navigate the filesystem using `ls` (`dir` on Windows) to list the contents of your current directory, and `cd` to change the current directory. For example, if you had a `Development` directory of your projects inside your home directory, you would type
|
||||
|
||||
```bash
|
||||
cd Development
|
||||
```
|
||||
|
||||
to go to it. From there, you could create a new project directory with the `mkdir` command:
|
||||
|
||||
```bash
|
||||
mkdir svelte-projects
|
||||
cd svelte-projects
|
||||
```
|
||||
|
||||
A full introduction to the command line is out of the scope of this guide, but here are a few more useful commands:
|
||||
|
||||
* `cd ..` — navigates to the parent of the current directory
|
||||
* `cat my-file.txt` — on Mac/Linux (`type my-file.txt` on Windows), lists the contents of `my-file.txt`
|
||||
* `open .` (or `start .` on Windows) — opens the current directory in Finder or File Explorer
|
||||
|
||||
|
||||
## Installing Node.js
|
||||
|
||||
[Node](https://nodejs.org/en/) is a way to run JavaScript on the command line. It's used by many tools, including Svelte. If you don't yet have it installed, the easiest way is to download the latest version straight from the [website](https://nodejs.org/en/).
|
||||
|
||||
Once installed, you'll have access to three new commands:
|
||||
|
||||
* `node my-file.js` — runs the JavaScript in `my-file.js`
|
||||
* `npm [subcommand]` — [npm](https://www.npmjs.com/) is a way to install 'packages' that your application depends on, such as the [svelte](https://www.npmjs.com/package/svelte) package
|
||||
* `npx [subcommand]` — a convenient way to run programs available on npm without permanently installing them
|
||||
|
||||
|
||||
## Installing a text editor
|
||||
|
||||
To write code, you need a good editor. The most popular choice is [Visual Studio Code](https://code.visualstudio.com/) or VSCode, and justifiably so — it's well-designed and fully-featured, and has a wealth of extensions ([including one for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which provides syntax highlighting and diagnostic messages when you're writing components).
|
||||
|
||||
|
||||
## Creating a project
|
||||
|
||||
We're going to follow the instructions in part two of [The easiest way to get started with Svelte](/blog/the-easiest-way-to-get-started).
|
||||
|
||||
First, we'll use npx to run [degit](https://github.com/Rich-Harris/degit), a program for cloning project templates from [GitHub](https://github.com) and other code storage websites. You don't have to use a project template, but it means you have to do a lot less setup work. You will need to have [Git](https://git-scm.com/) installed in order to use degit. (Eventually you'll probably have to learn [Git](https://git-scm.com/) itself, which most programmers use to manage their projects.)
|
||||
|
||||
On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you'll develop better muscle memory if you get into the habit of writing each line out one at a time then running it):
|
||||
|
||||
```bash
|
||||
npx degit sveltejs/template my-svelte-project
|
||||
cd my-svelte-project
|
||||
npm install
|
||||
```
|
||||
|
||||
This creates a new directory, `my-svelte-project`, adds files from the [sveltejs/template](https://github.com/sveltejs/template) code repository, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app's 'source code' lives in the `src` directory, while the files your app can load are in `public`.
|
||||
|
||||
In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application — `dev`, `build` and `start`. To launch your app in development mode, type the following:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Running the `dev` script starts a program called [Rollup](https://rollupjs.org/guide/en/). Rollup's job is to take your application's source files (so far, just `src/main.js` and `src/App.svelte`), pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.
|
||||
|
||||
Speaking of which, open a browser and navigate to http://localhost:5000. This is your application running on a local *web server* (hence 'localhost') on port 5000.
|
||||
|
||||
Try changing `src/App.svelte` and saving it. The application will reload with your changes.
|
||||
|
||||
|
||||
## Building your app
|
||||
|
||||
In the last step, we were running the app in 'development mode'. In dev mode, Svelte adds extra code that helps with debugging, and Rollup skips the final step where your app's JavaScript is compressed using [Terser](https://terser.org/).
|
||||
|
||||
When you share your app with the world, you want to build it in 'production mode', so that it's as small and efficient as possible for end users. To do that, use the `build` command:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Your `public` directory now contains a compressed `bundle.js` file containing your app's JavaScript. You can run it like so:
|
||||
|
||||
```bash
|
||||
npm run start
|
||||
```
|
||||
|
||||
This will run the app on http://localhost:5000.
|
||||
|
||||
|
||||
## Next steps
|
||||
|
||||
To share your app with the world you'll need to *deploy* it. There are many ways to do so — some are listed in the `README.md` file inside your project.
|
||||
@ -1,85 +0,0 @@
|
||||
---
|
||||
title: What's new in Svelte: October 2020
|
||||
description: New object methods, in-depth learning resources and tons of integration examples!
|
||||
author: Daniel Sandoval
|
||||
authorURL: https://desandoval.net
|
||||
---
|
||||
|
||||
Welcome to the first edition of our "What's new in Svelte" series! We'll try to make this a monthly blog post in which you'll find out about new features, bug fixes, and a showcase of Svelte projects from around the community.
|
||||
|
||||
## New features
|
||||
1. `use:obj.method` allows functions defined within objects to be used within actions ([Example](https://svelte.dev/repl/c305722adb4a4545b27b198ea8ff9bde?version=3.27.0), **3.26.0**, warning removed in **3.27.0**)
|
||||
2. `_` is now supported as a "numerical separator", similar to a `.` or `,` ([Example](https://svelte.dev/repl/844c39e91d1248649fe54af839fab570?version=3.26.0), **3.26.0**)
|
||||
3. `import.meta` now works in template expressions ([Example](https://svelte.dev/repl/9630de41957a4c80a4fce264360a6bc7?version=3.26.0), **3.26.0**)
|
||||
4. CSS Selectors with `~` and `+` combinators are now supported ([Example](https://svelte.dev/repl/91ad9257d2d1430185a504a18cc60172?version=3.29.0), **3.27.0**, with a compiler fix in **3.29.0**)
|
||||
5. The `{#key}` block is now available to key arbitrary content on an expression. Whever the expression changes, the contents inside the `{#key}` block will be destroyed and recreated. For an in-depth explanation and to find out how it's implemented, check out the [new blog post](https://lihautan.com/contributing-to-svelte-implement-key-block/) of Svelte Team member Tan Li Hau. ([More info](https://github.com/sveltejs/svelte/issues/1469), **3.29.0**)
|
||||
6. Slots can now be forwarded through child components! This used to only be possible by adding extra wrapper `<div>`s ([More info](https://github.com/sveltejs/svelte/issues/2079), **3.29.0**)
|
||||
7. When using TypeScript, you can now type the `createEventDispatcher` method:
|
||||
```html
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
/**
|
||||
* you can also add docs
|
||||
*/
|
||||
checked: boolean; // Will translate to `CustomEvent<boolean>`
|
||||
hello: string;
|
||||
}>();
|
||||
|
||||
// ...
|
||||
</script>
|
||||
```
|
||||
This will make sure that you can invoke dispatch only with the specified event names and its types. The Svelte for VS Code extension was also updated to deal with this new feature. It will provide strong typings for these events as well as autocompletion and hover information.
|
||||
|
||||
**New from Sapper!**
|
||||
Sapper 0.28.9 just came out. The highlights from it include much better support for CSP nonces, asset preload support for exported pages, and error details are now available in the `$page` store on error pages.
|
||||
|
||||
In addition, Sapper's CSS handling has been rewritten over the course of recent releases in order to fix existing CSS handling bugs, refactor the CSS handling to occur entirely within a Rollup plugin, and remove the need internally to register CSS in the routing system. Congrats and thank you to the folks working on Sapper for all their solid work!
|
||||
|
||||
|
||||
## Impactful bug fixes
|
||||
- CSS compilation will no longer remove rules for the `open` attribute on `<details>` elements ([Example](https://svelte.dev/repl/ab4c0c177d1f4fab92f46eb8539cea9a?version=3.26.0), **3.26.0**)
|
||||
- `prettier-plugin-svelte` will do a better job now at dealing with whitespaces, especially around inline elements. It will also preserve formatting inside `<pre>` tags and will no longer format languages which are not supported by Prettier, like SASS, Pug or Stylus.
|
||||
|
||||
|
||||
## Coming up
|
||||
- [Svelte Summit](https://sveltesummit.com/), Svelte's second global online conference, is taking place on October 18! Sign up for free to get reminders and talk updates!
|
||||
|
||||
For all the features and bugfixes see the CHANGELOG for [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Svelte Showcase
|
||||
- [This CustomMenu example](https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) demos how to replace the OS right-click menu
|
||||
- [Github Tetris](https://svelte.dev/repl/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history
|
||||
- [Who are my representatives?](https://whoaremyrepresentatives.us/) is a website built with Svelte to help US residents get more info on their congressional representatives
|
||||
- [Pick Palette](https://github.com/bluwy/pick-palette) is a color palette manager made with Svelte!
|
||||
|
||||
#### In-depth learning:
|
||||
- [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/ref=cm_sw_r_tw_dp_x_OQMtFb3GPQCB2) is a new book about building production-ready static web apps with Svelte 3
|
||||
- [Sapper Tutorial (Crash Course)](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gdr4Qhx83gBBcID-KMe-PQ) walks through the ins-and-outs of Sapper, the Svelte-powered application framework
|
||||
- [Svelte Society Day France](https://france.sveltesociety.dev/) happened September 27th featuring a wide variety of topics all in French! You can find the full recording [here](https://www.youtube.com/watch?v=aS1TQ155JK4).
|
||||
|
||||
#### Plug-and-play components:
|
||||
- [svelte-zoom](https://github.com/vaheqelyan/svelte-zoom) brings "nearly native" pan-and-zoom to images on desktop and mobile
|
||||
- [svelte-materialify](https://github.com/TheComputerM/svelte-materialify) is a Material component library for Svelte with over 50 components
|
||||
- [svelte-undoable](https://github.com/macfja/svelte-undoable) makes it easy to introduce undo and redo functionality using `bind:`
|
||||
- [This Tilt component](https://svelte.dev/repl/7b23ad9d2693424482cd411b0378b55b?version=3.24.1) implements a common UX pattern where the hovered element tilts to follow the mouse
|
||||
|
||||
#### Lots of examples of how use JS tech came out this month:
|
||||
- [Sapper with PostCSS and Tailwind](https://codechips.me/sapper-with-postcss-and-tailwind/)
|
||||
- [PrismJS (Code block syntax highlighting)](https://github.com/phptuts/Svelte-PrismJS)
|
||||
- [Filepond (Drag-and-drop file upload)](https://github.com/pqina/svelte-filepond)
|
||||
- [Ionic (UI Components)](https://github.com/Tommertom/svelte-ionic-app)
|
||||
- [Pell (WYSIWYG Editor)](https://github.com/Demonicious/svelte-pell/)
|
||||
- [Leaflet (Mapping)](https://github.com/anoram/leaflet-svelte)
|
||||
|
||||
**Reminder**: There's a [Svelte integrations repo](https://github.com/sveltejs/integrations) that demonstrates ways to incorporate Svelte into your stack (and vice versa). If you've got questions on how to use a particular piece of tech with Svelte, you may find your answer there... and if you've gotten something to work with Svelte, consider contributing!
|
||||
|
||||
For more amazing Svelte projects, check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)… and be sure to post your own!
|
||||
|
||||
## See you next month!
|
||||
|
||||
By the way, Svelte now has an [OpenCollective](https://opencollective.com/svelte)! All contributions and all expenses are published in our transparent public ledger. Learn who is donating, how much, where that money is going, submit expenses, get reimbursed and more!
|
||||
@ -1,46 +0,0 @@
|
||||
---
|
||||
title: What's new in Svelte: November 2020
|
||||
description: Slot forwarding fixes, SvelteKit for faster local development, and more from Svelte Summit
|
||||
author: Daniel Sandoval
|
||||
authorURL: https://desandoval.net
|
||||
---
|
||||
|
||||
Welcome back to the "What's new in Svelte" series! This month, we're covering new features & bug fixes, last month's Svelte Summit and some stand-out sites and libraries...
|
||||
|
||||
## New features & impactful bug fixes
|
||||
|
||||
1. Destructuring Promises now works as expected by using the `{#await}` syntax
|
||||
(**3.29.3**, [Example](https://svelte.dev/repl/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3))
|
||||
2. Slot forwarding (released in 3.29.0) should no longer hang during compilation (**3.29.3**, [Example](https://svelte.dev/repl/29959e70103f4868a6525c0734934936?version=3.29.3))
|
||||
3. Better typings for the `get` function in `svelte/store` and on lifecycle hooks (**3.29.1**)
|
||||
|
||||
**What's going on in Sapper?**
|
||||
|
||||
Sapper got some new types in its `preload` function, which will make typing easier if you are using TypeScript. See the [Sapper docs](https://sapper.svelte.dev/docs#Typing_the_function) on how to use them. There also were fixes to `preload` links in exported sites. Route layouts got a few fixes too - including ensuring CSS is applied to nested route layouts. You can also better organize your files now that extensions with multiple dots are supported. (**0.28.10**)
|
||||
|
||||
|
||||
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).
|
||||
|
||||
|
||||
## [Svelte Summit](https://sveltesummit.com/) was Svelte-tacular!
|
||||
- Rich Harris demoed the possible future of Svelte development in a talk titled "Futuristic Web Development". The not-yet-public project is called SvelteKit (name may change) and will bring a first-class developer experience and more flexibility for build outputs. If you want to get the full sneak-peek, [check out the video](https://www.youtube.com/watch?v=qSfdtmcZ4d0).
|
||||
- 17 speakers made the best of the conference's virtual format... From floating heads to seamless demos, Svelte developers from every skill level will find something of interest in this year's [YouTube playlist](https://www.youtube.com/playlist?list=PL8bMgX1kyZThM1sbYCoWdTcpiYysJsSeu)
|
||||
|
||||
---
|
||||
|
||||
## Community Showcase
|
||||
- [Svelte Lab](https://sveltelab.app/) showcases a variety of components, visualizations and interactions that can be achieved in Svelte. You can click into any component to see its source or edit it, using the site's built-in REPL
|
||||
- [svelte-electron-boilerplate](https://github.com/hjalmar/svelte-electron-boilerplate) is a fast way to get up and running with a Svelte app built in the desktop javascript framework, Electron
|
||||
- [React Hooks in Svelte](https://github.com/joshnuss/react-hooks-in-svelte) showcases examples of common React Hooks ported to Svelte.
|
||||
- [gurlic](https://gurlic.com/) is a social network and internet experiment that is super snappy thanks to Svelte
|
||||
- [Interference 2020](https://interference2020.org/) visualizes reported foreign interference in the 2020 U.S. elections. You can learn more about how it was built in [YYY's talk at Svelte Summit]()
|
||||
- [jitsi-svelte](https://github.com/relm-us/jitsi-svelte) lets you easily create your own custom Jitsi client by providing out-of-the-box components built with Svelte
|
||||
- [Ellx](https://ellx.io/) is part spreadsheet, part notebook and part IDE. It's super smooth thanks to Svelte 😎
|
||||
- [This New Zealand news site](https://www.nzherald.co.nz/nz/election-2020-latest-results-party-vote-electorate-vote-and-full-data/5CFVO4ENKNQDE3SICRRNPU5GZM/) breaks down the results of the 2020 Parliamentary elections using Svelte
|
||||
- [Budibase](https://github.com/Budibase/budibase) is a no-code app builder, powered by Svelte
|
||||
- [Svelt-yjs](https://github.com/relm-us/svelt-yjs) combines the collaborative, local-first technology of Yjs with the power of Svelte to enable multiple users across the internet to stay in sync.
|
||||
- [tabler-icons-svelte](https://github.com/benflap/tabler-icons-svelte) is a Svelte wrapper for over 850 free MIT-licensed high-quality SVG icons for you to use in your web projects.
|
||||
|
||||
## 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!
|
||||
@ -1,103 +0,0 @@
|
||||
---
|
||||
title: What's the deal with SvelteKit?
|
||||
description: We're rethinking how to build Svelte apps. Here's what you need to know
|
||||
author: Rich Harris
|
||||
authorURL: https://twitter.com/rich_harris
|
||||
---
|
||||
|
||||
<aside><p>If you <em>didn't</em> attend Svelte Summit, you can catch up on the <a href="https://www.youtube.com/c/SvelteSociety/videos">Svelte Society YouTube page</a></p></aside>
|
||||
|
||||
If you attended [Svelte Summit](https://sveltesummit.com/) last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0?
|
||||
|
||||
The answer: never.
|
||||
|
||||
This was slightly tongue-in-cheek — as the talk explains, it's really more of a rewrite of Sapper coupled with a rebrand — but it raised a lot of new questions from the community, and it's time we offered a bit more clarity on what you can expect from Sapper's successor, SvelteKit.
|
||||
|
||||
<div class="max">
|
||||
<figure style="max-width: 960px; margin: 0 auto">
|
||||
<div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
|
||||
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/qSfdtmcZ4d0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<figcaption>'Futuristic Web Development' from <a href="https://sveltesummit.com/">Svelte Summit</a></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
|
||||
## 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](http://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.
|
||||
|
||||
<aside><p>It'll still be possible to create both Node apps and fully pre-rendered (aka exported) sites</a></p></aside>
|
||||
|
||||
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).
|
||||
@ -1,71 +0,0 @@
|
||||
---
|
||||
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: `<slot {...foo} />` (**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 sharable 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 😎
|
||||
@ -1,86 +0,0 @@
|
||||
---
|
||||
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!
|
||||
@ -1,104 +0,0 @@
|
||||
---
|
||||
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)!
|
||||
@ -1,67 +0,0 @@
|
||||
---
|
||||
title: SvelteKit is in public beta
|
||||
description: And we'd love to have your feedback
|
||||
author: Rich Harris
|
||||
authorURL: https://twitter.com/rich_harris
|
||||
---
|
||||
|
||||
<aside><p>Previously: <a href="/blog/whats-the-deal-with-sveltekit">What's the deal with SvelteKit?</a></p></aside>
|
||||
|
||||
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.
|
||||
|
||||
<aside><p>I am eternally grateful for my coworkers' forbearance.</p></aside>
|
||||
|
||||
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.
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: Getting started
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
To try Svelte in an interactive online environment you can try [the REPL](https://svelte.dev/repl) or [StackBlitz](https://node.new/svelte).
|
||||
|
||||
To create a project locally we recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
|
||||
```
|
||||
npm create svelte@latest myapp
|
||||
cd myapp
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment. [SvelteKit](https://kit.svelte.dev/) utilizes [Vite](https://vitejs.dev/) to build your code and handle server-side rendering (SSR). There are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation, which will output `.js` and `.css` that you can insert into your HTML, but most others won't handle SSR.
|
||||
|
||||
If you don't need a full-fledged app framework and instead want to build a simple frontend-only site/app, you can also use Svelte (without Kit) with Vite by running `npm init vite` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory.
|
||||
|
||||
The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well.
|
||||
|
||||
If you're having trouble, get help on [Discord](https://svelte.dev/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).
|
||||
@ -0,0 +1,380 @@
|
||||
---
|
||||
title: Accessibility warnings
|
||||
---
|
||||
|
||||
Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you at compile time if you write inaccessible markup. However, keep in mind that many accessibility issues can only be identified at runtime using other automated tools and by manually testing your application.
|
||||
|
||||
Here is a list of accessibility checks Svelte will do for you.
|
||||
|
||||
---
|
||||
|
||||
### `a11y-accesskey`
|
||||
|
||||
Enforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.
|
||||
|
||||
```sv
|
||||
<!-- A11y: Avoid using accesskey -->
|
||||
<div accessKey='z'></div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-aria-activedescendant-has-tabindex`
|
||||
|
||||
An element with `aria-activedescendant` must be tabbable, so it must either have an inherent `tabindex` or declare `tabindex` as an attribute.
|
||||
|
||||
```sv
|
||||
<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
|
||||
<div aria-activedescendant="some-id" />
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-aria-attributes`
|
||||
|
||||
Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.
|
||||
|
||||
```sv
|
||||
<!-- A11y: <meta> should not have aria-* attributes -->
|
||||
<meta aria-hidden="false">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-autofocus`
|
||||
|
||||
Enforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.
|
||||
|
||||
```sv
|
||||
<!-- A11y: Avoid using autofocus -->
|
||||
<input autofocus>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-click-events-have-key-events`
|
||||
|
||||
Enforce `on:click` is accompanied by at least one of the following: `on:keyup`, `on:keydown`, `on:keypress`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
|
||||
|
||||
This does not apply for interactive or hidden elements.
|
||||
|
||||
```sv
|
||||
<!-- A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event. -->
|
||||
<div on:click={() => {}} />
|
||||
```
|
||||
|
||||
Note that the `keypress` event is now deprecated, so it is officially recommended to use either the `keyup` or `keydown` event instead, accordingly.
|
||||
|
||||
---
|
||||
|
||||
### `a11y-distracting-elements`
|
||||
|
||||
Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.
|
||||
|
||||
The following elements are visually distracting: `<marquee>` and `<blink>`.
|
||||
|
||||
```sv
|
||||
<!-- A11y: Avoid <marquee> elements -->
|
||||
<marquee />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-hidden`
|
||||
|
||||
Certain DOM elements are useful for screen reader navigation and should not be hidden.
|
||||
|
||||
```sv
|
||||
<!-- A11y: <h2> element should not be hidden -->
|
||||
<h2 aria-hidden="true">invisible header</h2>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-img-redundant-alt`
|
||||
|
||||
Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_.
|
||||
|
||||
```sv
|
||||
<img src="foo" alt="Foo eating a sandwich." />
|
||||
|
||||
<!-- aria-hidden, won't be announced by screen reader -->
|
||||
<img src="bar" aria-hidden="true" alt="Picture of me taking a photo of an image" />
|
||||
|
||||
<!-- A11y: Screen readers already announce <img> elements as an image. -->
|
||||
<img src="foo" alt="Photo of foo being weird." />
|
||||
|
||||
<!-- A11y: Screen readers already announce <img> elements as an image. -->
|
||||
<img src="bar" alt="Image of me at a bar!" />
|
||||
|
||||
<!-- A11y: Screen readers already announce <img> elements as an image. -->
|
||||
<img src="foo" alt="Picture of baz fixing a bug." />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-incorrect-aria-attribute-type`
|
||||
|
||||
Enforce that only the correct type of value is used for aria attributes. For example, `aria-hidden`
|
||||
should only receive a boolean.
|
||||
|
||||
```sv
|
||||
<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
|
||||
<div aria-hidden="yes"/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-invalid-attribute`
|
||||
|
||||
Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`.
|
||||
|
||||
```sv
|
||||
<!-- A11y: '' is not a valid href attribute -->
|
||||
<a href=''>invalid</a>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-interactive-supports-focus`
|
||||
|
||||
Enforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable.
|
||||
|
||||
```sv
|
||||
<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->
|
||||
<div role="button" on:keypress={() => {}} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-label-has-associated-control`
|
||||
|
||||
Enforce that a label tag has a text label and an associated control.
|
||||
|
||||
There are two supported ways to associate a label with a control:
|
||||
|
||||
- Wrapping a control in a label tag.
|
||||
- Adding `for` to a label and assigning it the ID of an input on the page.
|
||||
|
||||
```sv
|
||||
<label for="id">B</label>
|
||||
|
||||
<label>C <input type="text" /></label>
|
||||
|
||||
<!-- A11y: A form label must be associated with a control. -->
|
||||
<label>A</label>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-media-has-caption`
|
||||
|
||||
Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).
|
||||
|
||||
The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the `muted` attribute.
|
||||
|
||||
```sv
|
||||
<video><track kind="captions"/></video>
|
||||
|
||||
<audio muted></audio>
|
||||
|
||||
<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
|
||||
<video></video>
|
||||
|
||||
<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
|
||||
<video><track /></video>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-misplaced-role`
|
||||
|
||||
Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props.
|
||||
|
||||
```sv
|
||||
<!-- A11y: <meta> should not have role attribute -->
|
||||
<meta role="tooltip">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-misplaced-scope`
|
||||
|
||||
The scope attribute should only be used on `<th>` elements.
|
||||
|
||||
```sv
|
||||
<!-- A11y: The scope attribute should only be used with <th> elements -->
|
||||
<div scope="row" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-missing-attribute`
|
||||
|
||||
Enforce that attributes required for accessibility are present on an element. This includes the following checks:
|
||||
|
||||
- `<a>` should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697))
|
||||
- `<area>` should have alt, aria-label, or aria-labelledby
|
||||
- `<html>` should have lang
|
||||
- `<iframe>` should have title
|
||||
- `<img>` should have alt
|
||||
- `<object>` should have title, aria-label, or aria-labelledby
|
||||
- `<input type="image">` should have alt, aria-label, or aria-labelledby
|
||||
|
||||
```sv
|
||||
<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
|
||||
<input type="image">
|
||||
|
||||
<!-- A11y: <html> element should have a lang attribute -->
|
||||
<html></html>
|
||||
|
||||
<!-- A11y: <a> element should have an href attribute -->
|
||||
<a>text</a>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-missing-content`
|
||||
|
||||
Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and that the content is accessible to screen readers
|
||||
|
||||
```sv
|
||||
<!-- A11y: <a> element should have child content -->
|
||||
<a href='/foo'></a>
|
||||
|
||||
<!-- A11y: <h1> element should have child content -->
|
||||
<h1></h1>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-mouse-events-have-key-events`
|
||||
|
||||
Enforce that `on:mouseover` and `on:mouseout` are accompanied by `on:focus` and `on:blur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
|
||||
|
||||
```sv
|
||||
<!-- A11y: on:mouseover must be accompanied by on:focus -->
|
||||
<div on:mouseover={handleMouseover} />
|
||||
|
||||
<!-- A11y: on:mouseout must be accompanied by on:blur -->
|
||||
<div on:mouseout={handleMouseout} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-no-redundant-roles`
|
||||
|
||||
Some HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser [has no effect](https://www.w3.org/TR/using-aria/#aria-does-nothing) and is redundant.
|
||||
|
||||
```sv
|
||||
<!-- A11y: Redundant role 'button' -->
|
||||
<button role="button" />
|
||||
|
||||
<!-- A11y: Redundant role 'img' -->
|
||||
<img role="img" src="foo.jpg" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-no-interactive-element-to-noninteractive-role`
|
||||
|
||||
[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.
|
||||
|
||||
```sv
|
||||
<!-- A11y: <textarea> cannot have role 'listitem' -->
|
||||
<textarea role="listitem" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-no-noninteractive-element-to-interactive-role`
|
||||
|
||||
[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` and `textbox`.
|
||||
|
||||
```sv
|
||||
<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->
|
||||
<h3 role="searchbox">Button</h3>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-no-noninteractive-tabindex`
|
||||
|
||||
Tab key navigation should be limited to elements on the page that can be interacted with.
|
||||
|
||||
```sv
|
||||
<!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->
|
||||
<div tabindex='0' />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-positive-tabindex`
|
||||
|
||||
Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
|
||||
|
||||
```sv
|
||||
<!-- A11y: avoid tabindex values above zero -->
|
||||
<div tabindex='1'/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-role-has-required-aria-props`
|
||||
|
||||
Elements with ARIA roles must have all required attributes for that role.
|
||||
|
||||
```sv
|
||||
<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
|
||||
<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-role-supports-aria-props`
|
||||
|
||||
Elements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.
|
||||
|
||||
```sv
|
||||
<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
|
||||
<div role="link" aria-multiline />
|
||||
|
||||
<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
|
||||
<li aria-required />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-structure`
|
||||
|
||||
Enforce that certain DOM elements have the correct structure.
|
||||
|
||||
```sv
|
||||
<!-- A11y: <figcaption> must be an immediate child of <figure> -->
|
||||
<div>
|
||||
<figcaption>Image caption</figcaption>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-unknown-aria-attribute`
|
||||
|
||||
Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA States and Properties spec](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).
|
||||
|
||||
```sv
|
||||
<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
|
||||
<input type="image" aria-labeledby="foo">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `a11y-unknown-role`
|
||||
|
||||
Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
|
||||
|
||||
```sv
|
||||
<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
|
||||
<div role="toooltip"></div>
|
||||
```
|
||||
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
let src = 'tutorial/image.gif';
|
||||
let src = '/tutorial/image.gif';
|
||||
let name = 'Rick Astley';
|
||||
</script>
|
||||
|
||||
<!-- {src} is short for src={src} -->
|
||||
<img {src} alt="{name} dancing">
|
||||
<img {src} alt="{name} dancing">
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<p>Styled!</p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
color: purple;
|
||||
font-family: 'Comic Sans MS', cursive;
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Styled!</p>
|
||||
</style>
|
||||
@ -1,12 +1,12 @@
|
||||
<script>
|
||||
import marked from 'marked';
|
||||
import { marked } from 'marked';
|
||||
let text = `Some words are *italic*, some are **bold**`;
|
||||
</script>
|
||||
|
||||
<textarea bind:value={text}></textarea>
|
||||
|
||||
{@html marked(text)}
|
||||
|
||||
<style>
|
||||
textarea { width: 100%; height: 200px; }
|
||||
</style>
|
||||
|
||||
<textarea bind:value={text}></textarea>
|
||||
|
||||
{@html marked(text)}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue