Merge pull request #2 from sveltejs/master
swyx
5 years ago
committed by
GitHub
|
Before Width: | Height: | Size: 46 KiB |
@ -1,9 +1,9 @@
|
||||
<script>
|
||||
import FancyButton from './FancyButton.svelte';
|
||||
import CustomButton from './CustomButton.svelte';
|
||||
|
||||
function handleClick() {
|
||||
alert('clicked');
|
||||
}
|
||||
</script>
|
||||
|
||||
<FancyButton on:click={handleClick}/>
|
||||
<CustomButton on:click={handleClick}/>
|
||||
@ -0,0 +1,22 @@
|
||||
<style>
|
||||
button {
|
||||
height: 4rem;
|
||||
width: 8rem;
|
||||
background-color: #aaa;
|
||||
border-color: #f1c40f;
|
||||
color: #f1c40f;
|
||||
font-size: 1.25rem;
|
||||
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
|
||||
background-position: 100%;
|
||||
background-size: 400%;
|
||||
transition: background 300ms ease-in-out;
|
||||
}
|
||||
button:hover {
|
||||
background-position: 0;
|
||||
color: #aaa;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button on:click>
|
||||
Click me
|
||||
</button>
|
||||
@ -1,15 +0,0 @@
|
||||
<style>
|
||||
button {
|
||||
font-family: 'Comic Sans MS', cursive;
|
||||
font-size: 2em;
|
||||
padding: 0.5em 1em;
|
||||
color: royalblue;
|
||||
background: gold;
|
||||
border-radius: 1em;
|
||||
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<button on:click>
|
||||
Click me
|
||||
</button>
|
||||
@ -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 VSCode to syntax-highlight my .svelte files?
|
||||
---
|
||||
|
||||
There is an [official VSCode extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), however it is still in the **beta** testing stage, and not all issues have been ironed out.
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
question: What about Typescript support?
|
||||
---
|
||||
|
||||
You need to install a [community supported preprocessor](https://github.com/sveltejs/integrations#preprocessors) such as [svelte-preprocess](https://github.com/kaisermann/svelte-preprocess). Work is ongoing to improve [IDE support](https://github.com/sveltejs/language-tools/issues/83). You can also run type checking from command line with [svelte-check](https://www.npmjs.com/package/svelte-check).
|
||||
@ -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,9 +1,9 @@
|
||||
<script>
|
||||
import FancyButton from './FancyButton.svelte';
|
||||
import CustomButton from './CustomButton.svelte';
|
||||
|
||||
function handleClick() {
|
||||
alert('clicked');
|
||||
}
|
||||
</script>
|
||||
|
||||
<FancyButton on:click={handleClick}/>
|
||||
<CustomButton on:click={handleClick}/>
|
||||
@ -0,0 +1,22 @@
|
||||
<style>
|
||||
button {
|
||||
height: 4rem;
|
||||
width: 8rem;
|
||||
background-color: #aaa;
|
||||
border-color: #f1c40f;
|
||||
color: #f1c40f;
|
||||
font-size: 1.25rem;
|
||||
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
|
||||
background-position: 100%;
|
||||
background-size: 400%;
|
||||
transition: background 300ms ease-in-out;
|
||||
}
|
||||
button:hover {
|
||||
background-position: 0;
|
||||
color: #aaa;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button>
|
||||
Click me
|
||||
</button>
|
||||
@ -1,15 +0,0 @@
|
||||
<style>
|
||||
button {
|
||||
font-family: 'Comic Sans MS', cursive;
|
||||
font-size: 2em;
|
||||
padding: 0.5em 1em;
|
||||
color: royalblue;
|
||||
background: gold;
|
||||
border-radius: 1em;
|
||||
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<button>
|
||||
Click me
|
||||
</button>
|
||||
@ -1,9 +1,9 @@
|
||||
<script>
|
||||
import FancyButton from './FancyButton.svelte';
|
||||
import CustomButton from './CustomButton.svelte';
|
||||
|
||||
function handleClick() {
|
||||
alert('clicked');
|
||||
}
|
||||
</script>
|
||||
|
||||
<FancyButton on:click={handleClick}/>
|
||||
<CustomButton on:click={handleClick}/>
|
||||
@ -0,0 +1,22 @@
|
||||
<style>
|
||||
button {
|
||||
height: 4rem;
|
||||
width: 8rem;
|
||||
background-color: #aaa;
|
||||
border-color: #f1c40f;
|
||||
color: #f1c40f;
|
||||
font-size: 1.25rem;
|
||||
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
|
||||
background-position: 100%;
|
||||
background-size: 400%;
|
||||
transition: background 300ms ease-in-out;
|
||||
}
|
||||
button:hover {
|
||||
background-position: 0;
|
||||
color: #aaa;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button on:click>
|
||||
Click me
|
||||
</button>
|
||||
@ -1,15 +0,0 @@
|
||||
<style>
|
||||
button {
|
||||
font-family: 'Comic Sans MS', cursive;
|
||||
font-size: 2em;
|
||||
padding: 0.5em 1em;
|
||||
color: royalblue;
|
||||
background: gold;
|
||||
border-radius: 1em;
|
||||
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<button on:click>
|
||||
Click me
|
||||
</button>
|
||||
@ -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: 4.0 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 |