mirror of https://github.com/sveltejs/svelte
Your Name
5 years ago
commit
4b77652127
@ -0,0 +1,28 @@
|
|||||||
|
name: Docs
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
paths:
|
||||||
|
- site/content/**
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
release:
|
||||||
|
name: Deploy docs
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: my-app-install token
|
||||||
|
id: github-app
|
||||||
|
uses: getsentry/action-github-app-token@v1
|
||||||
|
with:
|
||||||
|
app_id: ${{ secrets.GH_APP_ID }}
|
||||||
|
private_key: ${{ secrets.GH_APP_PRIVATE_KEY }}
|
||||||
|
|
||||||
|
- name: run deploy docs workflow
|
||||||
|
uses: 'sveltejs/action-deploy-docs/dispatch@main'
|
||||||
|
with:
|
||||||
|
repo: 'svelte'
|
||||||
|
branch: 'master'
|
||||||
|
docs_path: 'site/content'
|
||||||
|
token: ${{ steps.github-app.outputs.token }}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
title: What's new in Svelte: August 2021
|
||||||
|
description: Shadow DOM, export and await - oh my!
|
||||||
|
author: Daniel Sandoval
|
||||||
|
authorURL: https://desandoval.net
|
||||||
|
---
|
||||||
|
|
||||||
|
From The Changelog ([JS Party Ep. 182](https://changelog.com/jsparty/182)) to Svelte Radio (Episodes [29](https://share.transistor.fm/s/adc23e84) and [30](https://share.transistor.fm/s/6316622d)), it seems that folks couldn't help but talk about Svelte, this month! Also, shadow DOM support and new export and await functionality are new in Svelte.
|
||||||
|
|
||||||
|
## New in Svelte
|
||||||
|
|
||||||
|
July was the most active month for the Svelte core repo since late 2019 as we really worked to reduce the number of outstanding PRs and saw the release of Svelte 3.39.0, 3.40.0, and 3.41.0. Tons of bug fixes were added as well as the following new features:
|
||||||
|
|
||||||
|
- The `|trusted` event modifier allows you to check if an event is trusted before it's called ([#6137](https://github.com/sveltejs/svelte/issues/6137))
|
||||||
|
- The new `svelte/ssr` package to support work on improving SvelteKit SSR ([#6416](https://github.com/sveltejs/svelte/pull/6416))
|
||||||
|
- A new `errorMode` compiler option to support improved preprocessing of TypeScript files ([#6194](https://github.com/sveltejs/svelte/pull/6194))
|
||||||
|
- You can now specify a `ShadowRoot` as the `target` when creating a component - making it possible to render Svelte components inside the shadow DOM ([#5869](https://github.com/sveltejs/svelte/issues/5869))
|
||||||
|
- The `export { ... } from` ([#2214](https://github.com/sveltejs/svelte/issues/2214)), `export let { ... } =` ([#5612](https://github.com/sveltejs/svelte/issues/5612)) and `{#await ... then/catch}` ([#6270](https://github.com/sveltejs/svelte/issues/6270)) syntaxes are all now supported in Svelte components
|
||||||
|
|
||||||
|
For a full list of features and bug fixes, check out the [Svelte changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
|
||||||
|
|
||||||
|
## SvelteKit Updates
|
||||||
|
- `prerender.force` is now `prerender.onError` which lets you fine-tune which errors fail the build and which do not ([#2007](https://github.com/sveltejs/kit/pull/2007))
|
||||||
|
- esbuild's configuration is now exposed for use with SvelteKit adapters ([#1914](https://github.com/sveltejs/kit/pull/1914))
|
||||||
|
- Error messages are friendlier now for common config errors ([#1910](https://github.com/sveltejs/kit/pull/1910)) and compiler errors ([#1827](https://github.com/sveltejs/kit/pull/1827))
|
||||||
|
- Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it ([#1847](https://github.com/sveltejs/kit/pull/1847))
|
||||||
|
- index.js exports will now be changed to directory exports when packaging - making for nicer imports ([#1905](https://github.com/sveltejs/kit/pull/1905))
|
||||||
|
- Vite.js's `mode` is now exposed from `$app/env` ([#1789](https://github.com/sveltejs/kit/pull/1789))
|
||||||
|
- Better types across the board ([#1778](https://github.com/sveltejs/kit/pull/1778), [#1791](https://github.com/sveltejs/kit/pull/1791), [#1646](https://github.com/sveltejs/kit/pull/1646))
|
||||||
|
|
||||||
|
To see all updates to SvelteKit, check out the [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
|
||||||
|
|
||||||
|
## Features & bug fixes from around svelte/*
|
||||||
|
- Language Tools now better support the "Workplace Trust" functionality (used in VS Code)
|
||||||
|
- In svelte2tsx, ambient type declarations are now renamed to avoid conflicting declarations in the future. Users are now expected to provide the ambient type definitions themselves - fixing JS output
|
||||||
|
- Sapper released v0.29.2 which fixes regex routes, status codes when requesting a directory, and exports when a user has not provided a `base` tag ([changelog](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md))
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Community Showcase
|
||||||
|
|
||||||
|
**Apps & Sites**
|
||||||
|
- [Parsnip](https://www.parsnip.ai/) is a mobile-first, progressive-web-app that helps you to learn to cook at home. Check out the [conversation on Reddit](https://www.reddit.com/r/sveltejs/comments/oearb9/learning_to_cook_at_home_with_parsnip_built/) for all the geeky details.
|
||||||
|
- [Central Bank Digital Currency (CBDC) tracker](https://www.atlanticcouncil.org/cbdctracker/) is a site that keeps track of how countries around the world are adopting digital currencies.
|
||||||
|
- [Svelte Commerce](https://github.com/itswadesh/svelte-commerce) is an advanced frontend platform for eCommerce based on Sveltekit.
|
||||||
|
- [neovimcraft](https://neovimcraft.com/) is a SvelteKit site dedicated to neovim plugins
|
||||||
|
|
||||||
|
**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
|
||||||
|
|
||||||
|
**Educational Content**
|
||||||
|
- [How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust](https://css-tricks.com/how-i-built-a-cross-platform-desktop-application-with-svelte-redis-and-rust/) is a blog post by Luke Edwards, Svelte maintainer and Developer Advocate from Cloudflare.
|
||||||
|
- [How to Create a Blog with SvelteKit and Strapi](https://strapi.io/blog/how-to-create-a-blog-with-svelte-kit-strapi) is a step-by-step tutorial by Aarnav Pai from Strapi
|
||||||
|
- [Sveltekit Markdown Blog](https://www.youtube.com/watch?v=sKKgT0SEioI&list=PLm_Qt4aKpfKgonq1zwaCS6kOD-nbOKx7V) is a YouTube tutorial series by WebJeda.
|
||||||
|
- [Using Custom Elements in Svelte](https://css-tricks.com/using-custom-elements-in-svelte/) is a deep dive into custom elements by Geoff Rich.
|
||||||
|
- [learn / graphql / svelte](https://hasura.io/learn/graphql/svelte-apollo/introduction/) is a free 2-hour GraphQL course course from Hasura.
|
||||||
|
- [How to add Magic Link to a SvelteKit application](https://magic.link/posts/magic-svelte) is a guide to the popular password-less login pattern.
|
||||||
|
|
||||||
|
**Libraries, Tools & Components**
|
||||||
|
- [Svelte-Capacitor](https://github.com/drannex42/svelte-capacitor/) just released v2.0.0 - making it even easier to build hybrid mobile apps for iOS and Android using Svelte and Capacitor with near native performance.
|
||||||
|
- [svelte-remixicon](https://github.com/ABarnob/svelte-remixicon) is an icon library for Svelte based on Remix Icon, consisting of more than 2000 icons.
|
||||||
|
- [SveltePress](https://github.com/GeopJr/SveltePress) is a documentation tool built on top of SvelteKit.
|
||||||
|
- [Svelte Starter Kit](https://github.com/one-aalam/svelte-starter-kit/tree/auth-supabase) is a boilerplate to quckly get up and running with Svelte, with Auth and User Profiles powered by Supabase.
|
||||||
|
- [Kahi UI](https://github.com/novacbn/kahi-ui) is a Svelte-first UI kit with Dark Mode built-in.
|
||||||
|
- [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.
|
||||||
|
|
||||||
|
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
|
||||||
|
|
||||||
|
|
||||||
|
## See you next month!
|
||||||
|
|
||||||
|
Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [
|
||||||
|
{
|
||||||
|
code: 'css-unused-selector',
|
||||||
|
end: {
|
||||||
|
character: 111,
|
||||||
|
column: 21,
|
||||||
|
line: 8
|
||||||
|
},
|
||||||
|
frame: `
|
||||||
|
6: color: red;
|
||||||
|
7: }
|
||||||
|
8: a:global(.foo) > div {
|
||||||
|
^
|
||||||
|
9: color: red;
|
||||||
|
10: }
|
||||||
|
`,
|
||||||
|
message: 'Unused CSS selector "a:global(.foo) > div"',
|
||||||
|
pos: 91,
|
||||||
|
start: {
|
||||||
|
character: 91,
|
||||||
|
column: 1,
|
||||||
|
line: 8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
div>div.svelte-xyz.svelte-xyz{color:red}div.svelte-xyz.foo>div.svelte-xyz{color:red}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<div class="svelte-xyz">
|
||||||
|
<div class="svelte-xyz"></div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<style>
|
||||||
|
:global(div) > div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
div:global(.foo) > div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
a:global(.foo) > div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div />
|
||||||
|
</div>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
warnings: []
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
a>b>div.svelte-xyz{color:red}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<div class="svelte-xyz">
|
||||||
|
<div class="svelte-xyz"></div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<style>
|
||||||
|
:global(a) > :global(b) > div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div />
|
||||||
|
</div>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<div class="svelte-xyz">
|
||||||
|
<div class="svelte-xyz"></div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
assign,
|
||||||
|
attr,
|
||||||
|
compute_rest_props,
|
||||||
|
create_component,
|
||||||
|
destroy_component,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
exclude_internal_props,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
mount_component,
|
||||||
|
safe_not_equal,
|
||||||
|
space,
|
||||||
|
transition_in,
|
||||||
|
transition_out
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
import Component from "./Component.svelte";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let div;
|
||||||
|
let div_class_value;
|
||||||
|
let div_style_value;
|
||||||
|
let div_other_value;
|
||||||
|
let t;
|
||||||
|
let component;
|
||||||
|
let current;
|
||||||
|
|
||||||
|
component = new Component({
|
||||||
|
props: {
|
||||||
|
class: "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || ''),
|
||||||
|
style: "\n\t\tcolor: green;\n\t\tbackground: white;\n\t\tfont-size: " + /*size*/ ctx[0] + ";\n \ttransform: " + /*$$restProps*/ ctx[2].scale + " " + /*$$restProps*/ ctx[2].rotate + ";\n\t\t" + /*$$restProps*/ ctx[2].styles,
|
||||||
|
other: "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || '')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
div = element("div");
|
||||||
|
t = space();
|
||||||
|
create_component(component.$$.fragment);
|
||||||
|
attr(div, "class", div_class_value = "button button--size--" + /*size*/ ctx[0] + " button--theme--" + /*theme*/ ctx[1] + " " + (/*$$restProps*/ ctx[2].class || ''));
|
||||||
|
attr(div, "style", div_style_value = "color: green; background: white; font-size: " + /*size*/ ctx[0] + "; transform: " + /*$$restProps*/ ctx[2].scale + " " + /*$$restProps*/ ctx[2].rotate + "; " + /*$$restProps*/ ctx[2].styles);
|
||||||
|
attr(div, "other", div_other_value = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || ''));
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, div, anchor);
|
||||||
|
insert(target, t, anchor);
|
||||||
|
mount_component(component, target, anchor);
|
||||||
|
current = true;
|
||||||
|
},
|
||||||
|
p(ctx, [dirty]) {
|
||||||
|
if (!current || dirty & /*size, theme, $$restProps*/ 7 && div_class_value !== (div_class_value = "button button--size--" + /*size*/ ctx[0] + " button--theme--" + /*theme*/ ctx[1] + " " + (/*$$restProps*/ ctx[2].class || ''))) {
|
||||||
|
attr(div, "class", div_class_value);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!current || dirty & /*size, $$restProps*/ 5 && div_style_value !== (div_style_value = "color: green; background: white; font-size: " + /*size*/ ctx[0] + "; transform: " + /*$$restProps*/ ctx[2].scale + " " + /*$$restProps*/ ctx[2].rotate + "; " + /*$$restProps*/ ctx[2].styles)) {
|
||||||
|
attr(div, "style", div_style_value);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!current || dirty & /*size, theme, $$restProps*/ 7 && div_other_value !== (div_other_value = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || ''))) {
|
||||||
|
attr(div, "other", div_other_value);
|
||||||
|
}
|
||||||
|
|
||||||
|
const component_changes = {};
|
||||||
|
if (dirty & /*size, theme, $$restProps*/ 7) component_changes.class = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || '');
|
||||||
|
if (dirty & /*size, $$restProps*/ 5) component_changes.style = "\n\t\tcolor: green;\n\t\tbackground: white;\n\t\tfont-size: " + /*size*/ ctx[0] + ";\n \ttransform: " + /*$$restProps*/ ctx[2].scale + " " + /*$$restProps*/ ctx[2].rotate + ";\n\t\t" + /*$$restProps*/ ctx[2].styles;
|
||||||
|
if (dirty & /*size, theme, $$restProps*/ 7) component_changes.other = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n \t" + (/*$$restProps*/ ctx[2].class || '');
|
||||||
|
component.$set(component_changes);
|
||||||
|
},
|
||||||
|
i(local) {
|
||||||
|
if (current) return;
|
||||||
|
transition_in(component.$$.fragment, local);
|
||||||
|
current = true;
|
||||||
|
},
|
||||||
|
o(local) {
|
||||||
|
transition_out(component.$$.fragment, local);
|
||||||
|
current = false;
|
||||||
|
},
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(div);
|
||||||
|
if (detaching) detach(t);
|
||||||
|
destroy_component(component, detaching);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
const omit_props_names = ["size","theme"];
|
||||||
|
let $$restProps = compute_rest_props($$props, omit_props_names);
|
||||||
|
let { size } = $$props;
|
||||||
|
let { theme } = $$props;
|
||||||
|
|
||||||
|
$$self.$$set = $$new_props => {
|
||||||
|
$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
|
||||||
|
$$invalidate(2, $$restProps = compute_rest_props($$props, omit_props_names));
|
||||||
|
if ('size' in $$new_props) $$invalidate(0, size = $$new_props.size);
|
||||||
|
if ('theme' in $$new_props) $$invalidate(1, theme = $$new_props.theme);
|
||||||
|
};
|
||||||
|
|
||||||
|
return [size, theme, $$restProps];
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component_1 extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, { size: 0, theme: 1 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component_1;
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
<script>
|
||||||
|
import Component from "./Component.svelte";
|
||||||
|
export let size;
|
||||||
|
export let theme;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="
|
||||||
|
button
|
||||||
|
button--size--{size}
|
||||||
|
button--theme--{theme}
|
||||||
|
{$$restProps.class || ''}"
|
||||||
|
style="
|
||||||
|
color: green;
|
||||||
|
background: white;
|
||||||
|
font-size: {size};
|
||||||
|
transform: {$$restProps.scale} {$$restProps.rotate};
|
||||||
|
{$$restProps.styles}"
|
||||||
|
other="
|
||||||
|
button
|
||||||
|
button--size--{size}
|
||||||
|
button--theme--{theme}
|
||||||
|
{$$restProps.class || ''}" />
|
||||||
|
|
||||||
|
<Component
|
||||||
|
class="
|
||||||
|
button
|
||||||
|
button--size--{size}
|
||||||
|
button--theme--{theme}
|
||||||
|
{$$restProps.class || ''}"
|
||||||
|
style="
|
||||||
|
color: green;
|
||||||
|
background: white;
|
||||||
|
font-size: {size};
|
||||||
|
transform: {$$restProps.scale} {$$restProps.rotate};
|
||||||
|
{$$restProps.styles}"
|
||||||
|
other="
|
||||||
|
button
|
||||||
|
button--size--{size}
|
||||||
|
button--theme--{theme}
|
||||||
|
{$$restProps.class || ''}" />
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
export default {
|
||||||
|
options: {
|
||||||
|
accessors: true
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
|
||||||
|
|
||||||
|
import { f as f_1, g as g_1 } from './d';
|
||||||
|
import { h as h_1 } from './e';
|
||||||
|
import { i as j } from './f';
|
||||||
|
export { d as e } from './c';
|
||||||
|
export { c } from './b';
|
||||||
|
export { a, b } from './a';
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, null, null, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
get f() {
|
||||||
|
return f_1;
|
||||||
|
}
|
||||||
|
|
||||||
|
get g() {
|
||||||
|
return g_1;
|
||||||
|
}
|
||||||
|
|
||||||
|
get h() {
|
||||||
|
return h_1;
|
||||||
|
}
|
||||||
|
|
||||||
|
get j() {
|
||||||
|
return j;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script context="module">
|
||||||
|
export { a, b } from './a';
|
||||||
|
export { c } from './b';
|
||||||
|
export { d as e } from './c';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export { f, g } from './d';
|
||||||
|
export { h } from './e';
|
||||||
|
export { i as j } from './f';
|
||||||
|
</script>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
options: {
|
||||||
|
accessors: true,
|
||||||
|
format: 'cjs'
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const { SvelteComponent, init, safe_not_equal } = require("svelte/internal");
|
||||||
|
const { f: f_1, g: g_1 } = require("./d");
|
||||||
|
const { h: h_1 } = require("./e");
|
||||||
|
const { i: j } = require("./f");
|
||||||
|
exports.e = require("./c").d;
|
||||||
|
exports.c = require("./b").c;
|
||||||
|
exports.a = require("./a").a;
|
||||||
|
exports.b = require("./a").b;
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, null, null, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
get f() {
|
||||||
|
return f_1;
|
||||||
|
}
|
||||||
|
|
||||||
|
get g() {
|
||||||
|
return g_1;
|
||||||
|
}
|
||||||
|
|
||||||
|
get h() {
|
||||||
|
return h_1;
|
||||||
|
}
|
||||||
|
|
||||||
|
get j() {
|
||||||
|
return j;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
exports.default = Component;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script context="module">
|
||||||
|
export { a, b } from './a';
|
||||||
|
export { c } from './b';
|
||||||
|
export { d as e } from './c';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export { f, g } from './d';
|
||||||
|
export { h } from './e';
|
||||||
|
export { i as j } from './f';
|
||||||
|
</script>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
|
||||||
|
|
||||||
|
import './d';
|
||||||
|
import './e';
|
||||||
|
import './f';
|
||||||
|
export { d as e } from './c';
|
||||||
|
export { c } from './b';
|
||||||
|
export { a, b } from './a';
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, null, null, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script context="module">
|
||||||
|
export { a, b } from './a';
|
||||||
|
export { c } from './b';
|
||||||
|
export { d as e } from './c';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export { f, g } from './d';
|
||||||
|
export { h } from './e';
|
||||||
|
export { i as j } from './f';
|
||||||
|
</script>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
export default {
|
||||||
|
options: {
|
||||||
|
hydratable: true
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
append_hydration,
|
||||||
|
children,
|
||||||
|
claim_svg_element,
|
||||||
|
claim_text,
|
||||||
|
detach,
|
||||||
|
init,
|
||||||
|
insert_hydration,
|
||||||
|
noop,
|
||||||
|
safe_not_equal,
|
||||||
|
svg_element,
|
||||||
|
text
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let svg;
|
||||||
|
let title;
|
||||||
|
let t;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
svg = svg_element("svg");
|
||||||
|
title = svg_element("title");
|
||||||
|
t = text("a title");
|
||||||
|
},
|
||||||
|
l(nodes) {
|
||||||
|
svg = claim_svg_element(nodes, "svg", {});
|
||||||
|
var svg_nodes = children(svg);
|
||||||
|
title = claim_svg_element(svg_nodes, "title", {});
|
||||||
|
var title_nodes = children(title);
|
||||||
|
t = claim_text(title_nodes, "a title");
|
||||||
|
title_nodes.forEach(detach);
|
||||||
|
svg_nodes.forEach(detach);
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert_hydration(target, svg, anchor);
|
||||||
|
append_hydration(svg, title);
|
||||||
|
append_hydration(title, t);
|
||||||
|
},
|
||||||
|
p: noop,
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(svg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, null, create_fragment, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
|
After Width: | Height: | Size: 36 B |
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"code": "missing-attribute-value",
|
||||||
|
"message": "Expected value for the attribute",
|
||||||
|
"pos": 12,
|
||||||
|
"start": {
|
||||||
|
"character": 12,
|
||||||
|
"column": 12,
|
||||||
|
"line": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div class= ></div>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div a="" b={''} c='' d="{''}" ></div>
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
{
|
||||||
|
"html": {
|
||||||
|
"start": 0,
|
||||||
|
"end": 38,
|
||||||
|
"type": "Fragment",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 0,
|
||||||
|
"end": 38,
|
||||||
|
"type": "Element",
|
||||||
|
"name": "div",
|
||||||
|
"attributes": [
|
||||||
|
{
|
||||||
|
"start": 5,
|
||||||
|
"end": 9,
|
||||||
|
"type": "Attribute",
|
||||||
|
"name": "a",
|
||||||
|
"value": [
|
||||||
|
{
|
||||||
|
"start": 8,
|
||||||
|
"end": 8,
|
||||||
|
"type": "Text",
|
||||||
|
"raw": "",
|
||||||
|
"data": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"start": 10,
|
||||||
|
"end": 16,
|
||||||
|
"type": "Attribute",
|
||||||
|
"name": "b",
|
||||||
|
"value": [
|
||||||
|
{
|
||||||
|
"start": 12,
|
||||||
|
"end": 16,
|
||||||
|
"type": "MustacheTag",
|
||||||
|
"expression": {
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 13,
|
||||||
|
"end": 15,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 13
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"value": "",
|
||||||
|
"raw": "''"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"start": 17,
|
||||||
|
"end": 21,
|
||||||
|
"type": "Attribute",
|
||||||
|
"name": "c",
|
||||||
|
"value": [
|
||||||
|
{
|
||||||
|
"start": 20,
|
||||||
|
"end": 20,
|
||||||
|
"type": "Text",
|
||||||
|
"raw": "",
|
||||||
|
"data": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"start": 22,
|
||||||
|
"end": 30,
|
||||||
|
"type": "Attribute",
|
||||||
|
"name": "d",
|
||||||
|
"value": [
|
||||||
|
{
|
||||||
|
"start": 25,
|
||||||
|
"end": 29,
|
||||||
|
"type": "MustacheTag",
|
||||||
|
"expression": {
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 26,
|
||||||
|
"end": 28,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 26
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 28
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"value": "",
|
||||||
|
"raw": "''"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"code": "unclosed-attribute-value",
|
||||||
|
"message": "Expected to close the attribute value with }",
|
||||||
|
"pos": 25,
|
||||||
|
"start": {
|
||||||
|
"character": 25,
|
||||||
|
"column": 25,
|
||||||
|
"line": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<Component test={{a: 1} />
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
export default {
|
||||||
|
html: '<div></div>',
|
||||||
|
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const enter = new window.MouseEvent('mouseenter');
|
||||||
|
const leave = new window.MouseEvent('mouseleave');
|
||||||
|
|
||||||
|
await window.document.body.dispatchEvent(enter);
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>
|
||||||
|
<div class="tooltip">Perform an Action</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await window.document.body.dispatchEvent(leave);
|
||||||
|
assert.htmlEqual(target.innerHTML, '<div></div>');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
<script>
|
||||||
|
let container;
|
||||||
|
function tooltip(node, text) {
|
||||||
|
let tooltip = null;
|
||||||
|
|
||||||
|
function onMouseEnter() {
|
||||||
|
tooltip = document.createElement('div');
|
||||||
|
tooltip.classList.add('tooltip');
|
||||||
|
tooltip.textContent = text;
|
||||||
|
container.appendChild(tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseLeave() {
|
||||||
|
if (!tooltip) return;
|
||||||
|
tooltip.remove();
|
||||||
|
tooltip = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener('mouseenter', onMouseEnter);
|
||||||
|
node.addEventListener('mouseleave', onMouseLeave);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('mouseenter', onMouseEnter);
|
||||||
|
node.removeEventListener('mouseleave', onMouseLeave);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:body use:tooltip="{'Perform an Action'}" />
|
||||||
|
<div bind:this={container} />
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
let fulfil;
|
||||||
|
|
||||||
|
let thePromise = new Promise(f => {
|
||||||
|
fulfil = f;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
thePromise
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<br />
|
||||||
|
<p>the promise is pending</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target }) {
|
||||||
|
fulfil(42);
|
||||||
|
|
||||||
|
await thePromise;
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, '<br />');
|
||||||
|
|
||||||
|
let reject;
|
||||||
|
|
||||||
|
thePromise = new Promise((f, r) => {
|
||||||
|
reject = r;
|
||||||
|
});
|
||||||
|
|
||||||
|
component.thePromise = thePromise;
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<br />
|
||||||
|
<p>the promise is pending</p>
|
||||||
|
`);
|
||||||
|
|
||||||
|
reject(new Error());
|
||||||
|
|
||||||
|
await thePromise.catch(() => {});
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>oh no! Something broke!</p>
|
||||||
|
<br />
|
||||||
|
<p>oh no! Something broke!</p>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
export let thePromise;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#await thePromise catch}
|
||||||
|
<p>oh no! Something broke!</p>
|
||||||
|
{/await}
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
{#await thePromise}
|
||||||
|
<p>the promise is pending</p>
|
||||||
|
{:catch}
|
||||||
|
<p>oh no! Something broke!</p>
|
||||||
|
{/await}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
let fulfil;
|
||||||
|
|
||||||
|
let thePromise = new Promise(f => {
|
||||||
|
fulfil = f;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
thePromise
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<p>the promise is pending</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target }) {
|
||||||
|
fulfil();
|
||||||
|
|
||||||
|
await thePromise;
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>the promise is resolved</p>
|
||||||
|
<br>
|
||||||
|
<p>the promise is resolved</p>
|
||||||
|
<br>
|
||||||
|
<p>the promise is resolved</p>
|
||||||
|
`);
|
||||||
|
|
||||||
|
let reject;
|
||||||
|
|
||||||
|
thePromise = new Promise((f, r) => {
|
||||||
|
reject = r;
|
||||||
|
});
|
||||||
|
|
||||||
|
component.thePromise = thePromise;
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<p>the promise is pending</p>
|
||||||
|
`);
|
||||||
|
|
||||||
|
reject(new Error('something broke'));
|
||||||
|
|
||||||
|
await thePromise.catch(() => {});
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>oh no! something broke</p>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<script>
|
||||||
|
export let thePromise;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#await thePromise then}
|
||||||
|
<p>the promise is resolved</p>
|
||||||
|
{:catch theError}
|
||||||
|
<p>oh no! {theError.message}</p>
|
||||||
|
{/await}
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
{#await thePromise then}
|
||||||
|
<p>the promise is resolved</p>
|
||||||
|
{/await}
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
{#await thePromise}
|
||||||
|
<p>the promise is pending</p>
|
||||||
|
{:then}
|
||||||
|
<p>the promise is resolved</p>
|
||||||
|
{/await}
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p>selected: null</p>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value='a'>a</option>
|
||||||
|
<option value='b'>b</option>
|
||||||
|
<option value='c'>c</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<p>selected: null</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target }) {
|
||||||
|
const select = target.querySelector('select');
|
||||||
|
const options = [...target.querySelectorAll('option')];
|
||||||
|
|
||||||
|
assert.equal(component.selected, null);
|
||||||
|
|
||||||
|
// no option should be selected since none of the options matches the bound value
|
||||||
|
assert.equal(select.value, '');
|
||||||
|
assert.equal(select.selectedIndex, -1);
|
||||||
|
assert.ok(!options[0].selected);
|
||||||
|
|
||||||
|
component.selected = 'a'; // first option should now be selected
|
||||||
|
assert.equal(select.value, 'a');
|
||||||
|
assert.ok(options[0].selected);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>selected: a</p>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value='a'>a</option>
|
||||||
|
<option value='b'>b</option>
|
||||||
|
<option value='c'>c</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<p>selected: a</p>
|
||||||
|
`);
|
||||||
|
|
||||||
|
component.selected = 'd'; // doesn't match an option
|
||||||
|
|
||||||
|
// now no option should be selected again
|
||||||
|
assert.equal(select.value, '');
|
||||||
|
assert.equal(select.selectedIndex, -1);
|
||||||
|
assert.ok(!options[0].selected);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>selected: d</p>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value='a'>a</option>
|
||||||
|
<option value='b'>b</option>
|
||||||
|
<option value='c'>c</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<p>selected: d</p>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<script>
|
||||||
|
// set as null so no option will be selected by default
|
||||||
|
export let selected = null;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>selected: {selected}</p>
|
||||||
|
|
||||||
|
<select bind:value={selected}>
|
||||||
|
<option>a</option>
|
||||||
|
<option>b</option>
|
||||||
|
<option>c</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<p>selected: {selected}</p>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
const THING = { a: 1, b: { c: 2, d: [3, 4, writable(5)] }, e: [6], h: 8 };
|
||||||
|
const default_g = 9;
|
||||||
|
|
||||||
|
export let { a, b: { c, d: [d_one,,d_three], f }, e: [e_one], g = default_g } = THING;
|
||||||
|
export const { a: A, b: { c: C } } = THING;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
a: {a},
|
||||||
|
b: {typeof b},
|
||||||
|
c: {c},
|
||||||
|
d_one: {d_one},
|
||||||
|
d_three: {$d_three},
|
||||||
|
f: {f},
|
||||||
|
g: {g},
|
||||||
|
e: {typeof e},
|
||||||
|
e_one: {e_one},
|
||||||
|
A: {A},
|
||||||
|
C: {C}
|
||||||
|
</div>
|
||||||
|
<div>{JSON.stringify(THING)}</div>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>a: 1, b: undefined, c: 2, d_one: 3, d_three: 5, f: undefined, g: 9, e: undefined, e_one: 6, A: 1, C: 2</div>
|
||||||
|
<div>{"a":1,"b":{"c":2,"d":[3,4,{}]},"e":[6],"h":8}</div>
|
||||||
|
<br>
|
||||||
|
<div>a: a, b: undefined, c: 2, d_one: d_one, d_three: 5, f: f, g: g, e: undefined, e_one: 6, A: 1, C: 2</div>
|
||||||
|
<div>{"a":1,"b":{"c":2,"d":[3,4,{}]},"e":[6],"h":8}</div>
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import A from './A.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<A />
|
||||||
|
<br />
|
||||||
|
<A a="a" d_one="d_one" list_one="list_one" f="f" list_two_b="list_two_b" g="g" A="A" C="C" />
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
let default_b = 5;
|
||||||
|
const LIST = [1, { a: 2 }, [3, writable(4)]];
|
||||||
|
export const [x, { a: list_two_a, b: list_two_b = default_b }, [, y]] = LIST;
|
||||||
|
export let [m, { a: n, b: o = default_b }, [p, q]] = LIST;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
x: {x},
|
||||||
|
list_two_a: {list_two_a},
|
||||||
|
list_two_b: {list_two_b},
|
||||||
|
y: {$y},
|
||||||
|
m: {m},
|
||||||
|
n: {n},
|
||||||
|
o: {o},
|
||||||
|
p: {p},
|
||||||
|
q: {$q}
|
||||||
|
</div>
|
||||||
|
<div>{JSON.stringify(LIST)}</div>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>x: 1, list_two_a: 2, list_two_b: 5, y: 4, m: 1, n: 2, o: 5, p: 3, q: 4</div>
|
||||||
|
<div>[1,{"a":2},[3,{}]]</div>
|
||||||
|
<br><div>x: 1, list_two_a: 2, list_two_b: 5, y: 4, m: m, n: n, o: o, p: p, q: q</div>
|
||||||
|
<div>[1,{"a":2},[3,{}]]</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ component, assert, target }) {
|
||||||
|
await component.update();
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>x: 1, list_two_a: 2, list_two_b: 5, y: 4, m: 1, n: 2, o: 5, p: 3, q: 4</div>
|
||||||
|
<div>[1,{"a":2},[3,{}]]</div>
|
||||||
|
<br><div>x: 1, list_two_a: 2, list_two_b: 5, y: 4, m: MM, n: NN, o: OO, p: PP, q: QQ</div>
|
||||||
|
<div>[1,{"a":2},[3,{}]]</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<script>
|
||||||
|
import A from './A.svelte';
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
let x = 'x',
|
||||||
|
list_two_a = 'list_two_a',
|
||||||
|
list_two_b = 'list_two_b',
|
||||||
|
y = writable('y'),
|
||||||
|
m = 'm',
|
||||||
|
n = 'n',
|
||||||
|
o = 'o',
|
||||||
|
p = 'p',
|
||||||
|
q = writable('q');
|
||||||
|
|
||||||
|
export function update() {
|
||||||
|
x = 'XX';
|
||||||
|
list_two_a = 'LIST_TWO_A';
|
||||||
|
list_two_b = 'LIST_TWO_B';
|
||||||
|
y = writable('YY');
|
||||||
|
m = 'MM';
|
||||||
|
n = 'NN';
|
||||||
|
o = 'OO';
|
||||||
|
p = 'PP';
|
||||||
|
q = writable('QQ');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<A />
|
||||||
|
<br />
|
||||||
|
<A {x} {list_two_a} {list_two_b} {y} {m} {n} {o} {p} {q} />
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
const { i, j, k } = { i: 9, j: 10, k: writable(11) }, l = 12, m = 13, n = writable(14);
|
||||||
|
let { a, b, c } = { a: 9, b: 10, c: writable(11) }, d = 12, e = 13, f = writable(14);
|
||||||
|
|
||||||
|
export { i, k, l, n, a, c, d, f };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>i: {i}, j: {j}, k: {$k}, l: {l}, m: {m}, n: {$n}, a: {a}, b: {b}, c: {$c}, d: {d}, e: {e}, f: {$f}</div>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, a: 9, b: 10, c: 11, d: 12, e: 13, f: 14</div>
|
||||||
|
<br>
|
||||||
|
<div>i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, a: a, b: 10, c: c, d: d, e: 13, f: f</div>
|
||||||
|
`,
|
||||||
|
async test({ component, target, assert }) {
|
||||||
|
await component.update();
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, a: 9, b: 10, c: 11, d: 12, e: 13, f: 14</div>
|
||||||
|
<br>
|
||||||
|
<div>i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, a: aa, b: 10, c: cc, d: dd, e: 13, f: ff</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<script>
|
||||||
|
import A from './A.svelte';
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
let i = 'i',
|
||||||
|
k = writable('k'),
|
||||||
|
l = 'l',
|
||||||
|
n = writable('n'),
|
||||||
|
a = 'a',
|
||||||
|
c = writable('c'),
|
||||||
|
d = 'd',
|
||||||
|
f = writable('f');
|
||||||
|
|
||||||
|
export function update() {
|
||||||
|
i = 'ii';
|
||||||
|
k = writable('kk');
|
||||||
|
l = 'll';
|
||||||
|
n = writable('nn');
|
||||||
|
a = 'aa';
|
||||||
|
c = writable('cc');
|
||||||
|
d = 'dd';
|
||||||
|
f = writable('ff');
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<A />
|
||||||
|
<br />
|
||||||
|
<A {i} {k} {l} {n} {a} {c} {d} {f} />
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<script context="module">
|
||||||
|
export { a, b } from './B.svelte';
|
||||||
|
export { c as d } from './B.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export { d, e } from './B.svelte';
|
||||||
|
export { f as g } from './B.svelte';
|
||||||
|
let e = 123;
|
||||||
|
let b = 234;
|
||||||
|
function foo() {
|
||||||
|
e = 456;
|
||||||
|
b = 567;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
a: {typeof a}<br />
|
||||||
|
b: {typeof b}<br />
|
||||||
|
c: {typeof c}<br />
|
||||||
|
d: {typeof d}<br />
|
||||||
|
e: {typeof e}<br />
|
||||||
|
f: {typeof f}<br />
|
||||||
|
g: {typeof g}<br />
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<script context="module">
|
||||||
|
export const a = 'a';
|
||||||
|
export const b = 'b';
|
||||||
|
export const c = 'c';
|
||||||
|
export const d = 'd';
|
||||||
|
export const e = 'e';
|
||||||
|
export const f = 'f';
|
||||||
|
</script>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
a,b,undefined,c
|
||||||
|
<br />
|
||||||
|
a: undefined<br />
|
||||||
|
b: number<br />
|
||||||
|
c: undefined<br />
|
||||||
|
d: undefined<br />
|
||||||
|
e: number<br />
|
||||||
|
f: undefined<br />
|
||||||
|
g: undefined<br />
|
||||||
|
<br />
|
||||||
|
{"d":"d","e":"e","g":"f"}
|
||||||
|
`,
|
||||||
|
ssrHtml: `
|
||||||
|
a,b,undefined,c
|
||||||
|
<br />
|
||||||
|
a: undefined<br />
|
||||||
|
b: number<br />
|
||||||
|
c: undefined<br />
|
||||||
|
d: undefined<br />
|
||||||
|
e: number<br />
|
||||||
|
f: undefined<br />
|
||||||
|
g: undefined<br />
|
||||||
|
<br />
|
||||||
|
{}
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
import A, { a, b, c, d } from './A.svelte';
|
||||||
|
import {onMount} from 'svelte';
|
||||||
|
|
||||||
|
let component;
|
||||||
|
let props = {};
|
||||||
|
onMount(() => {
|
||||||
|
props = {
|
||||||
|
d: component.d,
|
||||||
|
e: component.e,
|
||||||
|
f: component.f,
|
||||||
|
g: component.g,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{a},{b},{c},{d}
|
||||||
|
<br />
|
||||||
|
<A bind:this={component} />
|
||||||
|
<br />
|
||||||
|
{JSON.stringify(props)}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
<div><span class="name">item 1</span><span>something</span></div>
|
||||||
|
<div><span class="name">item 2</span><span>something</span></div>
|
||||||
|
<div><span class="name">item 3</span><span>something</span></div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
component.sortById = false;
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<div>
|
||||||
|
<div><span class="name">item 3</span><span>something</span></div>
|
||||||
|
<div><span class="name">item 2</span><span>something</span></div>
|
||||||
|
<div><span class="name">item 1</span><span>something</span></div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<script>
|
||||||
|
export let sortById = true;
|
||||||
|
let items = [
|
||||||
|
{ id: 1, name: "item 1", value: 3 },
|
||||||
|
{ id: 2, name: "item 2", value: 2 },
|
||||||
|
{ id: 3, name: "item 3", value: 1 },
|
||||||
|
];
|
||||||
|
|
||||||
|
$: items = items.sort((a, b) => { return sortById ? a.id - b.id : a.value - b.value; });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{#each items as item (item.id)}
|
||||||
|
<div>
|
||||||
|
{#if item.name}
|
||||||
|
<span class="name">
|
||||||
|
{item.name}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
<span>something</span>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>$userName1: user1</div>
|
||||||
|
<div>$userName2: undefined</div>
|
||||||
|
<div>$userName3: undefined</div>
|
||||||
|
<div>$userName4: user4</div>
|
||||||
|
<div>$userName5: undefined</div>
|
||||||
|
<div>$userName6: user6</div>
|
||||||
|
<div>$userName7: undefined</div>
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
let userName1 = writable('init1');
|
||||||
|
let userName2 = writable('init2');
|
||||||
|
let userName3 = writable('init3');
|
||||||
|
let userName4 = writable('init4');
|
||||||
|
let userName5 = writable('init5');
|
||||||
|
let userName6 = writable('init6');
|
||||||
|
let userName7 = writable('init7');
|
||||||
|
|
||||||
|
let obj = {
|
||||||
|
userName1: 'user1',
|
||||||
|
userName2: 'user2',
|
||||||
|
userName3: 'user3',
|
||||||
|
$userName4: 'user4',
|
||||||
|
userName5: 'user5',
|
||||||
|
$userName6: 'user6',
|
||||||
|
userName7: 'user7',
|
||||||
|
};
|
||||||
|
|
||||||
|
({userName1: $userName1, $userName2 } = obj);
|
||||||
|
({$userName3} = obj);
|
||||||
|
({$userName4} = obj);
|
||||||
|
({$userName5, $userName6, $userName7} = obj);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>$userName1: {$userName1}</div>
|
||||||
|
<div>$userName2: {$userName2}</div>
|
||||||
|
<div>$userName3: {$userName3}</div>
|
||||||
|
<div>$userName4: {$userName4}</div>
|
||||||
|
<div>$userName5: {$userName5}</div>
|
||||||
|
<div>$userName6: {$userName6}</div>
|
||||||
|
<div>$userName7: {$userName7}</div>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let name = 'World';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>Hello {name}</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
export default {
|
||||||
|
skip_if_ssr: true,
|
||||||
|
compileOptions: {
|
||||||
|
cssHash: () => 'svelte-xyz'
|
||||||
|
},
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
assert.htmlEqual(
|
||||||
|
window.document.head.innerHTML,
|
||||||
|
'<style id="svelte-xyz">div.svelte-xyz{color:red}</style>'
|
||||||
|
);
|
||||||
|
assert.htmlEqual(
|
||||||
|
component.div.innerHTML,
|
||||||
|
'<div class="svelte-xyz">Hello World</div>'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
import App from './App.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
export let div;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
div = document.createElement('div');
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: div
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
app.$destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let name = 'World';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>Hello {name}</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
export default {
|
||||||
|
skip_if_ssr: true,
|
||||||
|
compileOptions: {
|
||||||
|
cssHash: () => 'svelte-xyz'
|
||||||
|
},
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
assert.htmlEqual(
|
||||||
|
window.document.head.innerHTML,
|
||||||
|
'<style id="svelte-xyz">div.svelte-xyz{color:red}</style>'
|
||||||
|
);
|
||||||
|
assert.htmlEqual(
|
||||||
|
component.div.innerHTML,
|
||||||
|
'<div class="svelte-xyz">Hello World</div>'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
import App from './App.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
export let div;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const app = new App({
|
||||||
|
target: div
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
app.$destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={div} />
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue