* upstream/master: (190 commits) invalidate $$props and $$restProps only when there are changes (#5123) site: use https in link in blog (#5148) Simplify each block bindings example (#5094) fix $$props reactive for slots (#5125) site: add FAQ entry for how to document a svelte component (#5131) site: remove an obsolete TODO in blog post (#5135) Increase timeout for unit build Increase timeout for unit tests -> v3.24.0 spread condition for input element (#5004) update changelog fix(5018): compare wholeText instead of data (#5028) html anchor in head (#5071) error on expression scope store (#5079) update changelog preprocess self-closing script and style tags (#5082) update changelog fix: Parameters with default values are optional (#5083) make builds time out after a reasonable period (#5100) site: fix blog typo (#5090) ...pull/4522/head
hontas
5 years ago
@ -1,8 +1,8 @@
|
||||
|
||||
|
||||
### Before submitting the PR, please make sure you do the following
|
||||
- [ ] It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases features are absent for a reason.
|
||||
- [ ] It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases, features are absent for a reason.
|
||||
- [ ] This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them.
|
||||
- [ ] Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to `npm run lint`!)
|
||||
### Tests
|
||||
- [ ] Run the tests tests with `npm test` or `yarn test`)
|
||||
- [ ] Run the tests with `npm test` or `yarn test`)
|
||||
|
||||
|
Before Width: | Height: | Size: 46 KiB |
@ -0,0 +1,7 @@
|
||||
---
|
||||
question: I'm new to Svelte. Where should I start?
|
||||
---
|
||||
|
||||
We think the best way to get started is playing through the interactive [Tutorial](https://svelte.dev/tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
|
||||
|
||||
Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
question: How can I update my components written in Svelte v2?
|
||||
---
|
||||
|
||||
svelte-upgrade isn't fully working for v2->v3 yet, [but it's close](https://github.com/sveltejs/svelte-upgrade/pull/12).
|
||||
@ -0,0 +1,7 @@
|
||||
---
|
||||
question: Is Svelte v2 still available?
|
||||
---
|
||||
|
||||
New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.
|
||||
|
||||
The documentation is still available [here](https://v2.svelte.dev/guide).
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
question: How do I do hot module reloading?
|
||||
---
|
||||
|
||||
Use the community plugins for [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) and [webpack](https://github.com/rixo/svelte-loader-hot).
|
||||
@ -0,0 +1,10 @@
|
||||
---
|
||||
question: Are there any video courses?
|
||||
---
|
||||
|
||||
There are no official ones, but here are a couple of third-part ones that we know of.
|
||||
|
||||
- [Egghead](https://egghead.io/playlists/getting-started-with-svelte-3-05a8541a)
|
||||
- [Udemy](https://www.udemy.com/sveltejs-the-complete-guide/)
|
||||
|
||||
Note that Udemy very frequently has discounts over 90%.
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
question: How can I get VS Code to syntax-highlight my .svelte files?
|
||||
---
|
||||
|
||||
There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
||||
@ -0,0 +1,32 @@
|
||||
---
|
||||
question: How do I document my components?
|
||||
---
|
||||
|
||||
In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.
|
||||
|
||||
````svelte
|
||||
<script>
|
||||
/** What should we call the user? */
|
||||
export let name = 'world';
|
||||
</script>
|
||||
|
||||
<!--
|
||||
@component
|
||||
Here's some documentation for this component.
|
||||
It will show up on hover.
|
||||
|
||||
- You can use markdown here.
|
||||
- You can also use code blocks here.
|
||||
- Usage:
|
||||
```tsx
|
||||
<main name="Arethra">
|
||||
```
|
||||
-->
|
||||
<main>
|
||||
<h1>
|
||||
Hello, {name}
|
||||
</h1>
|
||||
</main>
|
||||
````
|
||||
|
||||
Note: The `@component` is necessary in the HTML comment which describes your component.
|
||||
@ -0,0 +1,12 @@
|
||||
---
|
||||
question: What about TypeScript support?
|
||||
---
|
||||
|
||||
You need to install a preprocessor such as [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess). You can run type checking from the command line with [svelte-check](https://www.npmjs.com/package/svelte-check).
|
||||
|
||||
To declare the type of a reactive variable in a Svelte template, you should use the following syntax:
|
||||
|
||||
```
|
||||
let x: number;
|
||||
$: x = count + 1;
|
||||
```
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
question: Does Svelte scale?
|
||||
---
|
||||
|
||||
There will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546).
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
question: Is there a UI component library?
|
||||
---
|
||||
|
||||
There are several UI component libraries. Find them under the [code section](https://svelte-community.netlify.com/code) of the Svelte Community website.
|
||||
@ -0,0 +1,6 @@
|
||||
---
|
||||
question: How do I test Svelte apps?
|
||||
---
|
||||
|
||||
We don't have a good answer to this yet, but it is a priority. There are a few approaches that people take when testing, but it generally involves compiling the component and mounting it to something and then performing the tests.
|
||||
You essentially need to create a bundle for each component you're testing (since svelte is a compiler and not a normal library) and then mount them. You can mount to a JSDOM instance, or you can use Puppeteer if you need a real browser, or you can use a tool like Cypress. There is an example of this in the Sapper starter template.
|
||||
@ -0,0 +1,13 @@
|
||||
---
|
||||
question: Is there a router?
|
||||
---
|
||||
|
||||
You can use any router lib you want. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar.
|
||||
|
||||
If you prefer a declarative HTML approach, there's [svelte-routing](https://github.com/EmilTholin/svelte-routing).
|
||||
|
||||
If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router), or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/), a mature router for business software.
|
||||
|
||||
For filesystem-based routing, you can take a look at [Routify](https://routify.dev).
|
||||
|
||||
For an official solution, there's nothing that's simply a routing library. There is, however, the official [Sapper](https://sapper.svelte.dev/) framework, a Next.js-style application framework built on Svelte, which includes its own filesystem-based routing.
|
||||
@ -1,4 +0,0 @@
|
||||
export function get(req, res) {
|
||||
res.writeHead(302, { Location: 'https://github.com/sveltejs/svelte/wiki/FAQ' });
|
||||
res.end();
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { extract_frontmatter, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
|
||||
import marked from 'marked';
|
||||
import { makeSlugProcessor } from '../../utils/slug';
|
||||
import { highlight } from '../../utils/highlight';
|
||||
import { SLUG_PRESERVE_UNICODE } from '../../../config';
|
||||
|
||||
const makeSlug = makeSlugProcessor(SLUG_PRESERVE_UNICODE);
|
||||
|
||||
export default function get_faqs() {
|
||||
return fs
|
||||
.readdirSync('content/faq')
|
||||
.map(file => {
|
||||
if (path.extname(file) !== '.md') return;
|
||||
|
||||
const match = /^([0-9]+)-(.+)\.md$/.exec(file);
|
||||
if (!match) throw new Error(`Invalid filename '${file}'`);
|
||||
|
||||
const [, order, slug] = match;
|
||||
|
||||
const markdown = fs.readFileSync(`content/faq/${file}`, 'utf-8');
|
||||
|
||||
const { content, metadata } = extract_frontmatter(markdown);
|
||||
|
||||
const renderer = new marked.Renderer();
|
||||
|
||||
renderer.link = link_renderer;
|
||||
|
||||
renderer.code = highlight;
|
||||
|
||||
renderer.heading = (text, level, rawtext) => {
|
||||
const fragment = makeSlug(rawtext);
|
||||
|
||||
return `
|
||||
<h${level}>
|
||||
<span id="${fragment}" class="offset-anchor"></span>
|
||||
<a href="faq#${fragment}" class="anchor" aria-hidden="true"></a>
|
||||
${text}
|
||||
</h${level}>`;
|
||||
};
|
||||
|
||||
const answer = marked(
|
||||
content.replace(/^\t+/gm, match => match.split('\t').join(' ')),
|
||||
{ renderer }
|
||||
);
|
||||
|
||||
const fragment = makeSlug(slug);
|
||||
|
||||
return {
|
||||
fragment,
|
||||
order,
|
||||
answer,
|
||||
metadata
|
||||
};
|
||||
})
|
||||
.sort((a, b) => a.order - b.order);
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import send from '@polka/send';
|
||||
import get_faqs from './_faqs.js';
|
||||
|
||||
let json;
|
||||
|
||||
export function get(req, res) {
|
||||
if (!json || process.env.NODE_ENV !== 'production') {
|
||||
const faqs = get_faqs()
|
||||
.map(faq => {
|
||||
return {
|
||||
fragment: faq.fragment,
|
||||
answer: faq.answer,
|
||||
metadata: faq.metadata
|
||||
};
|
||||
});
|
||||
|
||||
json = JSON.stringify(faqs);
|
||||
}
|
||||
|
||||
send(res, 200, json, {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': `max-age=${5 * 60 * 1e3}` // 5 minutes
|
||||
});
|
||||
}
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 275 B After Width: | Height: | Size: 184 B |
|
Before Width: | Height: | Size: 229 B After Width: | Height: | Size: 168 B |
|
Before Width: | Height: | Size: 221 B After Width: | Height: | Size: 161 B |
|
Before Width: | Height: | Size: 405 B After Width: | Height: | Size: 320 B |
|
Before Width: | Height: | Size: 212 B After Width: | Height: | Size: 155 B |
|
Before Width: | Height: | Size: 213 B After Width: | Height: | Size: 155 B |
|
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 256 B |
|
Before Width: | Height: | Size: 411 B After Width: | Height: | Size: 315 B |
|
Before Width: | Height: | Size: 415 B After Width: | Height: | Size: 344 B |
|
Before Width: | Height: | Size: 356 B After Width: | Height: | Size: 258 B |
|
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 215 B |
|
Before Width: | Height: | Size: 320 B After Width: | Height: | Size: 260 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 280 B After Width: | Height: | Size: 221 B |
|
Before Width: | Height: | Size: 303 B After Width: | Height: | Size: 242 B |
|
Before Width: | Height: | Size: 260 B After Width: | Height: | Size: 200 B |
|
Before Width: | Height: | Size: 354 B After Width: | Height: | Size: 311 B |
|
Before Width: | Height: | Size: 334 B After Width: | Height: | Size: 280 B |
|
Before Width: | Height: | Size: 262 B After Width: | Height: | Size: 193 B |
|
Before Width: | Height: | Size: 292 B After Width: | Height: | Size: 239 B |
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 108 KiB |