From fb63025b69421c4954cdf49e6ffad911097bea5f Mon Sep 17 00:00:00 2001 From: Scotty Simpson Date: Mon, 22 Apr 2019 21:35:50 -0700 Subject: [PATCH 01/25] typo I'm very helpful --- .../content/tutorial/14-composition/02-slot-fallbacks/text.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/text.md b/site/content/tutorial/14-composition/02-slot-fallbacks/text.md index c8fbde91dc..fd2ef28fb6 100644 --- a/site/content/tutorial/14-composition/02-slot-fallbacks/text.md +++ b/site/content/tutorial/14-composition/02-slot-fallbacks/text.md @@ -12,7 +12,7 @@ A component can specify *fallbacks* for any slots that are left empty, by puttin ``` -We can now create instances of `` eithout any children: +We can now create instances of `` without any children: ```html @@ -21,4 +21,4 @@ We can now create instances of `` eithout any children: -``` \ No newline at end of file +``` From a93bf24b610451d25879aede86b3f1613e8d2c84 Mon Sep 17 00:00:00 2001 From: Jesse Wicks Date: Tue, 23 Apr 2019 00:18:07 -0500 Subject: [PATCH 02/25] fix tutorial link --- site/content/tutorial/06-bindings/11-bind-this/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/tutorial/06-bindings/11-bind-this/text.md b/site/content/tutorial/06-bindings/11-bind-this/text.md index e1aed607b0..25a7bc9169 100644 --- a/site/content/tutorial/06-bindings/11-bind-this/text.md +++ b/site/content/tutorial/06-bindings/11-bind-this/text.md @@ -12,4 +12,4 @@ The readonly `this` binding applies to every element (and component) and allows > ``` -Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorials/onmount). \ No newline at end of file +Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorial/onmount). \ No newline at end of file From 20518cd2fe9504fb7239404b824b467ea7e539df Mon Sep 17 00:00:00 2001 From: Gregor Aisch Date: Tue, 23 Apr 2019 07:08:50 +0000 Subject: [PATCH 03/25] fix link to CSS in JS blog post --- site/src/routes/index.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte index 3b2447c222..dc31a14df2 100644 --- a/site/src/routes/index.svelte +++ b/site/src/routes/index.svelte @@ -173,7 +173,7 @@
-

CSS is component-scoped by default — no more style collisions or specificity wars. Or you can use your favourite CSS-in-JS library.

+

CSS is component-scoped by default — no more style collisions or specificity wars. Or you can use your favourite CSS-in-JS library.

From a4fea823f854f483b3a4d1a5c87be8eacba2026d Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 23 Apr 2019 06:42:47 -0400 Subject: [PATCH 04/25] site: more link fixes in blog posts --- .../blog/2016-11-26-frameworks-without-the-framework.md | 4 ++-- .../2017-12-31-sapper-towards-the-ideal-web-app-framework.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/blog/2016-11-26-frameworks-without-the-framework.md b/site/content/blog/2016-11-26-frameworks-without-the-framework.md index 933b0fbc48..4efac90b52 100644 --- a/site/content/blog/2016-11-26-frameworks-without-the-framework.md +++ b/site/content/blog/2016-11-26-frameworks-without-the-framework.md @@ -28,7 +28,7 @@ Given that, what if the framework *didn't actually run in the browser*? What if, ## Introducing Svelte -Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible. +Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](https://v2.svelte.dev/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible. The [Svelte implementation of TodoMVC](http://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM *without any app code* weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC. @@ -52,4 +52,4 @@ Finally, something I've wrestled with a great deal as an open source maintainer: Svelte is very new. There's a lot of work still left to do – creating build tool integrations, adding a server-side renderer, hot reloading, transitions, more documentation and examples, starter kits, and so on. -But you can already build rich components with it, which is why we've gone straight to a stable 1.0.0 release. [Read the guide](/guide), [try it out in the REPL](/repl), and head over to [GitHub](https://github.com/sveltejs/svelte) to help kickstart the next era of front end development. +But you can already build rich components with it, which is why we've gone straight to a stable 1.0.0 release. [Read the guide](https://v2.svelte.dev/guide), [try it out in the REPL](/repl), and head over to [GitHub](https://github.com/sveltejs/svelte) to help kickstart the next era of front end development. diff --git a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md index 790b0fabac..040e95a8c3 100644 --- a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md +++ b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md @@ -28,7 +28,7 @@ Everything else flows from that breakthrough design decision. Finding the code r 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](/api/blog/sapper-towards-the-ideal-web-app-framework) 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 +* 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 `` tags. Instead, you have to use framework-specific `` 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*. From d808d9ee5d592c3f5626a5ef357f93fb76a19d6b Mon Sep 17 00:00:00 2001 From: Konstantin Alikhanov Date: Tue, 23 Apr 2019 18:20:22 +0400 Subject: [PATCH 05/25] Fixing issue with cursor jumping in Safari #2506 --- src/compile/render-dom/wrappers/Element/Binding.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/compile/render-dom/wrappers/Element/Binding.ts b/src/compile/render-dom/wrappers/Element/Binding.ts index 828d664001..a34a9466fc 100644 --- a/src/compile/render-dom/wrappers/Element/Binding.ts +++ b/src/compile/render-dom/wrappers/Element/Binding.ts @@ -111,7 +111,7 @@ export default class BindingWrapper { let update_conditions: string[] = this.needs_lock ? [`!${lock}`] : []; - const dependency_array = [...this.node.expression.dependencies] + const dependency_array = [...this.node.expression.dependencies]; if (dependency_array.length === 1) { update_conditions.push(`changed.${dependency_array[0]}`) @@ -121,6 +121,14 @@ export default class BindingWrapper { ) } + if (parent.node.name === 'input') { + const type = parent.node.get_static_attribute_value('type'); + + if (type === null || type === "" || type === "text") { + update_conditions.push(`(${parent.var}.${this.node.name} !== ${this.snippet})`) + } + } + // model to view let update_dom = get_dom_updater(parent, this); From 9e9ea411f7eae178e0a62337fb7cea998f6c178d Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 23 Apr 2019 11:32:37 -0400 Subject: [PATCH 06/25] handle unknown nodes in extract_identifiers (#2510) (#2514) --- src/compile/utils/scope.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/compile/utils/scope.ts b/src/compile/utils/scope.ts index d4427c44ff..20cca46cba 100644 --- a/src/compile/utils/scope.ts +++ b/src/compile/utils/scope.ts @@ -106,7 +106,7 @@ export function extract_names(param: Node) { export function extract_identifiers(param: Node) { const nodes: Node[] = []; - extractors[param.type](nodes, param); + extractors[param.type] && extractors[param.type](nodes, param); return nodes; } From 6dad5bdc2b82003b6f51a00cff25dd6b6e8cb0e2 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 23 Apr 2019 11:39:21 -0400 Subject: [PATCH 07/25] add test --- test/runtime/samples/reactive-value-mutate/_config.js | 3 +++ test/runtime/samples/reactive-value-mutate/main.svelte | 7 +++++++ 2 files changed, 10 insertions(+) create mode 100644 test/runtime/samples/reactive-value-mutate/_config.js create mode 100644 test/runtime/samples/reactive-value-mutate/main.svelte diff --git a/test/runtime/samples/reactive-value-mutate/_config.js b/test/runtime/samples/reactive-value-mutate/_config.js new file mode 100644 index 0000000000..e408816834 --- /dev/null +++ b/test/runtime/samples/reactive-value-mutate/_config.js @@ -0,0 +1,3 @@ +export default { + html: `{"bar":42}` +}; diff --git a/test/runtime/samples/reactive-value-mutate/main.svelte b/test/runtime/samples/reactive-value-mutate/main.svelte new file mode 100644 index 0000000000..59fc5b7eb5 --- /dev/null +++ b/test/runtime/samples/reactive-value-mutate/main.svelte @@ -0,0 +1,7 @@ + + +{JSON.stringify(foo)} From e717daa23919bd486dbe95fe625fd49473606318 Mon Sep 17 00:00:00 2001 From: Scotty Simpson Date: Tue, 23 Apr 2019 08:40:03 -0700 Subject: [PATCH 08/25] add multiple class toggles example This answers the immediate question I had when I first saw the `class:foo` syntax. --- site/content/docs/02-template-syntax.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 5bbd7b4e1e..47ac9f6f0e 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -600,6 +600,9 @@ A `class:` directive provides a shorter way of toggling a class on an element.
...
+ + +
...
``` From 181dd855f67e92f848384972f02cb833b40779d3 Mon Sep 17 00:00:00 2001 From: Scotty Simpson Date: Tue, 23 Apr 2019 09:39:49 -0700 Subject: [PATCH 09/25] is-admin => isAdmin --- site/content/docs/02-template-syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 47ac9f6f0e..37810d0c68 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -602,7 +602,7 @@ A `class:` directive provides a shorter way of toggling a class on an element.
...
-
...
+
...
``` From bfd2a3b9031a35e427ae563c529acf7a5d5cf395 Mon Sep 17 00:00:00 2001 From: Hongarc Date: Wed, 24 Apr 2019 00:56:19 +0700 Subject: [PATCH 10/25] Remove whitespace at end of line --- .../transition-js-if-block-in-each-block-bidi/main.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte b/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte index 5d85e51c73..5e8979b2d4 100644 --- a/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte +++ b/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte @@ -11,8 +11,8 @@ } -{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as number} +{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as number} {#if threshold >= number}
{number}
{/if} -{/each} \ No newline at end of file +{/each} From df27ced1efa45e5c63e0fe9b3afacf6c5b052dc1 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 23 Apr 2019 14:07:54 -0400 Subject: [PATCH 11/25] fix unit test under Node 12 --- test/runtime/samples/binding-select/_config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/runtime/samples/binding-select/_config.js b/test/runtime/samples/binding-select/_config.js index 6fd7e60b2a..a5995061a0 100644 --- a/test/runtime/samples/binding-select/_config.js +++ b/test/runtime/samples/binding-select/_config.js @@ -31,7 +31,7 @@ export default { const select = target.querySelector('select'); const options = [...target.querySelectorAll('option')]; - assert.deepEqual(options, select.options); + assert.deepEqual(options, [...select.options]); assert.equal(component.selected, 'one'); const change = new window.Event('change'); From 74f429bfebd7eefe9858b5fe2184f1fae52972be Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 23 Apr 2019 14:48:18 -0400 Subject: [PATCH 12/25] site: in examples.json don't return sections with no title --- site/src/routes/examples/index.json.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/routes/examples/index.json.js b/site/src/routes/examples/index.json.js index 4cb4d9c554..8617d70cab 100644 --- a/site/src/routes/examples/index.json.js +++ b/site/src/routes/examples/index.json.js @@ -5,7 +5,7 @@ let cached; export function get(req, res) { try { if (!cached || process.env.NODE_ENV !== 'production') { - cached = JSON.stringify(get_examples()); + cached = JSON.stringify(get_examples().filter(section => section.title)); } res.writeHead(200, { From 0ffd1bbdf2b414df8a72df630c0fbbd978df9324 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 23 Apr 2019 14:49:25 -0400 Subject: [PATCH 13/25] site: move svelte-css-in-js REPL embed into example --- site/content/blog/2018-12-26-svelte-css-in-js.md | 3 +-- .../20181225-blog-svelte-css-in-js/App.svelte | 10 ++++++++++ .../20181225-blog-svelte-css-in-js/Hero.svelte | 15 +++++++++++++++ .../20181225-blog-svelte-css-in-js/meta.json | 3 +++ site/content/examples/99-embeds/meta.json | 1 + 5 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json create mode 100644 site/content/examples/99-embeds/meta.json diff --git a/site/content/blog/2018-12-26-svelte-css-in-js.md b/site/content/blog/2018-12-26-svelte-css-in-js.md index 5e8e6ed71b..f77eb83206 100644 --- a/site/content/blog/2018-12-26-svelte-css-in-js.md +++ b/site/content/blog/2018-12-26-svelte-css-in-js.md @@ -19,7 +19,7 @@ Here, we're using [Emotion](https://emotion.sh) to generate scoped class names t
@@ -27,4 +27,3 @@ Here, we're using [Emotion](https://emotion.sh) to generate scoped class names t 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 .css 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. - diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte new file mode 100644 index 0000000000..c8487abefe --- /dev/null +++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte @@ -0,0 +1,10 @@ + + + + +
+

Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder and record yourself for a whole day. I think you'll be surprised at some of your phrasing.

+
\ No newline at end of file diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte new file mode 100644 index 0000000000..9f60c276ce --- /dev/null +++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte @@ -0,0 +1,15 @@ + + +
+

+
+
+
CSS
+ in JS +
+ in HTML +
+

+
\ No newline at end of file diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json new file mode 100644 index 0000000000..eaa2a1da63 --- /dev/null +++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json @@ -0,0 +1,3 @@ +{ + "title": "-" +} diff --git a/site/content/examples/99-embeds/meta.json b/site/content/examples/99-embeds/meta.json new file mode 100644 index 0000000000..0967ef424b --- /dev/null +++ b/site/content/examples/99-embeds/meta.json @@ -0,0 +1 @@ +{} From 0a4c75a9b9e863bca579a24b21c454deb7d5eed0 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 23 Apr 2019 14:49:48 -0400 Subject: [PATCH 14/25] site: move write-less-code REPL embed into example --- .../blog/2019-04-20-write-less-code.md | 4 +-- .../20181225-blog-svelte-css-in-js/styles.js | 33 +++++++++++++++++++ .../20190420-blog-write-less-code/App.svelte | 9 +++++ .../20190420-blog-write-less-code/meta.json | 3 ++ 4 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js create mode 100644 site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte create mode 100644 site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md index daa22b9206..d6c8b77193 100644 --- a/site/content/blog/2019-04-20-write-less-code.md +++ b/site/content/blog/2019-04-20-write-less-code.md @@ -42,7 +42,7 @@ Reducing the amount of code you have to write is an explicit goal of Svelte. To
@@ -161,4 +161,4 @@ In Vue, meanwhile, we have a default export with a `data` function that returns These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](https://svelte.dev/tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change). -How? By choosing a different set of constraints. Because [Svelte is a compiler](blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps. \ No newline at end of file +How? By choosing a different set of constraints. Because [Svelte is a compiler](blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps. diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js new file mode 100644 index 0000000000..faf91b13d4 --- /dev/null +++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js @@ -0,0 +1,33 @@ +import { css } from 'emotion/dist/emotion.umd.min.js'; + +const brand = '#74D900'; + +export const title = css` + color: ${brand}; + font-size: 1em; + white-space: nowrap; +`; + +export const comicSans = css` + font-family: 'Comic Sans MS'; +`; + +export const box = css` + position: relative; + display: inline-block; + border: 2px solid ${brand}; + line-height: 1; + padding: 4px; + border-radius: 4px; +`; + +export const link = css` + color: inherit; + font-weight: bold; + text-decoration: none; + border-bottom: 1px solid ${brand}; + &:hover { + text-decoration: none; + background: ${brand}; + } +`; \ No newline at end of file diff --git a/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte b/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte new file mode 100644 index 0000000000..46cf93b0fc --- /dev/null +++ b/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte @@ -0,0 +1,9 @@ + + + + + +

{a} + {b} = {a + b}

\ No newline at end of file diff --git a/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json b/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json new file mode 100644 index 0000000000..eaa2a1da63 --- /dev/null +++ b/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json @@ -0,0 +1,3 @@ +{ + "title": "-" +} From bb6855ef594388e430c90082b2e6e59665710ad0 Mon Sep 17 00:00:00 2001 From: swyx Date: Tue, 23 Apr 2019 14:50:45 -0400 Subject: [PATCH 15/25] update quick start instructions since the front page links to this slightly out of date blogpost - i copied over and updated instructions so otherse wont be as confused as i was... --- ...17-08-07-the-easiest-way-to-get-started.md | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md index 394cee6a69..e91166430c 100644 --- a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md +++ b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md @@ -38,28 +38,21 @@ This will serve your app on [localhost:5000](http://localhost:5000) and rebuild 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, install degit globally (you only need to do this once): +In the terminal, you can instantly create a new project like so: ```bash -npm install -g degit -``` - -After that, you can instantly create a new project like so: - -```bash -degit sveltejs/template my-new-project -cd my-new-project - +npx degit sveltejs/template my-svelte-project +cd my-svelte-project npm install -npm run dev +npm run dev & open http://localhost:5000 ``` 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 -degit your-name/template my-new-project +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 [Now](https://zeit.co/now) 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) 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](https://discord.gg/yy75DKs), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter! +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](https://discord.gg/yy75DKs), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter! From b085ea374e44add6375f9b4de773c909be0d78e5 Mon Sep 17 00:00:00 2001 From: Rubens Mariuzzo Date: Tue, 23 Apr 2019 14:47:02 -0400 Subject: [PATCH 16/25] Add missing dot. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ff409c86a9..605eee8fa8 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ npm run test -- -g transition ## svelte.dev -The source code for https://svelte.dev, including all the documentation, lives in the [site](site) directory. The site is built with [Sapper](https://sapper.svelte.technology) To develop locally: +The source code for https://svelte.dev, including all the documentation, lives in the [site](site) directory. The site is built with [Sapper](https://sapper.svelte.technology). To develop locally: ```bash cd site From 09af4880084b9631dcfd7196623b45a7a99d63a4 Mon Sep 17 00:00:00 2001 From: sidgo Date: Wed, 24 Apr 2019 00:32:07 +0530 Subject: [PATCH 17/25] Add Razorpay to WhosUsingSvelte --- site/src/routes/_components/WhosUsingSvelte.svelte | 1 + site/static/organisations/razorpay.svg | 1 + 2 files changed, 2 insertions(+) create mode 100644 site/static/organisations/razorpay.svg diff --git a/site/src/routes/_components/WhosUsingSvelte.svelte b/site/src/routes/_components/WhosUsingSvelte.svelte index a7d4fec78e..1700312055 100644 --- a/site/src/routes/_components/WhosUsingSvelte.svelte +++ b/site/src/routes/_components/WhosUsingSvelte.svelte @@ -52,6 +52,7 @@ Mustlab logo Nesta logo The New York Times logo + Razorpay logo Stone Payments logo + your company?
diff --git a/site/static/organisations/razorpay.svg b/site/static/organisations/razorpay.svg new file mode 100644 index 0000000000..003a1bfc3d --- /dev/null +++ b/site/static/organisations/razorpay.svg @@ -0,0 +1 @@ + \ No newline at end of file From 2d9697839c2dbfa7336c33d6bcb327895c39538b Mon Sep 17 00:00:00 2001 From: John Chesley Date: Wed, 24 Apr 2019 00:19:48 -0400 Subject: [PATCH 18/25] failing test for #2542 --- .../samples/export-function-hoisting/_config.js | 3 +++ .../samples/export-function-hoisting/main.svelte | 11 +++++++++++ 2 files changed, 14 insertions(+) create mode 100644 test/runtime/samples/export-function-hoisting/_config.js create mode 100644 test/runtime/samples/export-function-hoisting/main.svelte diff --git a/test/runtime/samples/export-function-hoisting/_config.js b/test/runtime/samples/export-function-hoisting/_config.js new file mode 100644 index 0000000000..c56851d065 --- /dev/null +++ b/test/runtime/samples/export-function-hoisting/_config.js @@ -0,0 +1,3 @@ +export default { + html: 'Compile plz' +} diff --git a/test/runtime/samples/export-function-hoisting/main.svelte b/test/runtime/samples/export-function-hoisting/main.svelte new file mode 100644 index 0000000000..4b54049ed9 --- /dev/null +++ b/test/runtime/samples/export-function-hoisting/main.svelte @@ -0,0 +1,11 @@ + + +Compile plz From b2e5becb12b595afe91ecefb28ea2c61b3fad0a6 Mon Sep 17 00:00:00 2001 From: John Chesley Date: Wed, 24 Apr 2019 00:38:02 -0400 Subject: [PATCH 19/25] fix cycle check for exported functions --- src/compile/Component.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/compile/Component.ts b/src/compile/Component.ts index bf2fdf9a5a..7d4aa72f03 100644 --- a/src/compile/Component.ts +++ b/src/compile/Component.ts @@ -1002,9 +1002,11 @@ export default class Component { if (walking.has(other_declaration)) { hoistable = false; + } else if (other_declaration.type === 'ExportNamedDeclaration' && walking.has(other_declaration.declaration)) { + hoistable = false; } else if (!is_hoistable(other_declaration)) { hoistable = false; - } + } } else { From ad79c53f8fc1d6fccc6ba53e8dd58dafe466d654 Mon Sep 17 00:00:00 2001 From: Vytautas Jakutis Date: Wed, 24 Apr 2019 16:05:32 +0300 Subject: [PATCH 20/25] site: docs: fix a typo in HTML example in template syntax --- site/content/docs/02-template-syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 5bbd7b4e1e..e12d9972df 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -934,7 +934,7 @@ Named slots allow consumers to target specific areas. They can also have fallbac
No header was provided

Some content between header and footer

- +
``` From 09db4d947b3ae994eb81f192e6c6450b51a5bef3 Mon Sep 17 00:00:00 2001 From: Allan Tito Date: Tue, 23 Apr 2019 20:46:43 -0400 Subject: [PATCH 21/25] Added comma --- site/content/tutorial/18-debugging/01-debug/text.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/tutorial/18-debugging/01-debug/text.md b/site/content/tutorial/18-debugging/01-debug/text.md index 8c9f59d082..76fa77805e 100644 --- a/site/content/tutorial/18-debugging/01-debug/text.md +++ b/site/content/tutorial/18-debugging/01-debug/text.md @@ -2,7 +2,7 @@ title: The @debug tag --- -Occasionally it's useful to inspect a piece of data as it flows through your app. +Occasionally, it's useful to inspect a piece of data as it flows through your app. One approach is to use `console.log(...)` inside your markup. If you want to pause execution, though, you can use the `{@debug ...}` tag with a comma-separated list of values you want to inspect: @@ -12,4 +12,4 @@ One approach is to use `console.log(...)` inside your markup. If you want to pau

Hello {user.firstname}!

``` -If you now open your devtools and start interacting with the `` elements, you'll trigger the debugger as the value of `user` changes. \ No newline at end of file +If you now open your devtools and start interacting with the `` elements, you'll trigger the debugger as the value of `user` changes. From 5affa57bc2e09287290539330b6d75bde5390406 Mon Sep 17 00:00:00 2001 From: Allan Tito Date: Wed, 24 Apr 2019 10:20:41 -0400 Subject: [PATCH 22/25] Update text.md, line 34 (#2541) * Added comma * Update text.md; added comma --- .../tutorial/10-transitions/04-custom-css-transitions/text.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md index 4bae964c4c..0745a5924d 100644 --- a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md +++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md @@ -31,7 +31,7 @@ The `t` value is `0` at the beginning of an intro or the end of an outro, and `1 Most of the time you should return the `css` property and *not* the `tick` property, as CSS animations run off the main thread to prevent jank where possible. Svelte 'simulates' the transition and constructs a CSS animation, then lets it run. -For example the `fade` transition generates a CSS animation somewhat like this: +For example, the `fade` transition generates a CSS animation somewhat like this: ```css 0% { opacity: 0 } @@ -69,4 +69,4 @@ We can get a lot more creative though. Let's make something truly gratuitous: ``` -Remember: with great power comes great responsibility. \ No newline at end of file +Remember: with great power comes great responsibility. From 49389e0f1632f3d1f8a1f55e6ade5fc7e2e9616d Mon Sep 17 00:00:00 2001 From: thollander Date: Tue, 23 Apr 2019 23:48:45 +0200 Subject: [PATCH 23/25] Fix the shadow in scrollbar of docs sidebar --- site/src/routes/docs/index.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte index 07cd1fa191..1dd51db502 100644 --- a/site/src/routes/docs/index.svelte +++ b/site/src/routes/docs/index.svelte @@ -117,7 +117,7 @@ position: absolute; left: 0; bottom: 1.9em; - width: 100%; + width: calc(100% - 1em); height: 2em; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%); pointer-events: none; From ef2a4b463a597e0b9a3887fb7d2340eb22200733 Mon Sep 17 00:00:00 2001 From: thollander Date: Tue, 23 Apr 2019 22:57:54 +0200 Subject: [PATCH 24/25] Don't show/hide nav when clicking in docs sidebar - Listens to hashchange event - Changes only the navbar visibilty when scroll not triggered by hashchange Resolves #2456 --- site/src/components/TopNav.svelte | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/site/src/components/TopNav.svelte b/site/src/components/TopNav.svelte index 4254e99152..49a1be50d1 100644 --- a/site/src/components/TopNav.svelte +++ b/site/src/components/TopNav.svelte @@ -35,12 +35,21 @@ }; }); + // Prevents navbar to show/hide when clicking in docs sidebar + let hash_changed = false; + function handle_hashchange() { + hash_changed = true; + } + let last_scroll = 0; function handle_scroll() { const scroll = window.pageYOffset; - visible = (scroll < 50 || scroll < last_scroll); + if (!hash_changed) { + visible = (scroll < 50 || scroll < last_scroll); + } last_scroll = scroll; + hash_changed = false; } @@ -227,7 +236,7 @@ } - +