mirror of https://github.com/sveltejs/svelte
Conduitry
5 years ago
commit
fb0b2b22cd
@ -1,5 +1,5 @@
|
||||
---
|
||||
question: How can I get VSCode to syntax-highlight my .svelte files?
|
||||
question: How can I get VS Code 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.
|
||||
There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
||||
|
||||
@ -0,0 +1,189 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import {
|
||||
SvelteComponent,
|
||||
attr,
|
||||
create_component,
|
||||
destroy_component,
|
||||
detach,
|
||||
element,
|
||||
init,
|
||||
insert,
|
||||
mount_component,
|
||||
safe_not_equal,
|
||||
set_data,
|
||||
space,
|
||||
text,
|
||||
transition_in,
|
||||
transition_out
|
||||
} from "svelte/internal";
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let t0_value = /*a*/ ctx[0].normal + "";
|
||||
let t0;
|
||||
let t1_value = /*b*/ ctx[1]?.optional + "";
|
||||
let t1;
|
||||
let t2;
|
||||
let t3_value = /*c*/ ctx[2]["computed"] + "";
|
||||
let t3;
|
||||
let t4_value = /*d*/ ctx[3]?.["computed_optional"] + "";
|
||||
let t4;
|
||||
let t5;
|
||||
let t6_value = /*e*/ ctx[4]() + "";
|
||||
let t6;
|
||||
let t7_value = /*f*/ ctx[5]?.() + "";
|
||||
let t7;
|
||||
let t8;
|
||||
let div;
|
||||
let div_a_value;
|
||||
let div_b_value;
|
||||
let div_c_value;
|
||||
let div_d_value;
|
||||
let div_e_value;
|
||||
let div_f_value;
|
||||
let t9;
|
||||
let component;
|
||||
let current;
|
||||
|
||||
component = new /*Component*/ ctx[6]({
|
||||
props: {
|
||||
a: /*a*/ ctx[0].normal,
|
||||
b: /*b*/ ctx[1]?.optional,
|
||||
c: /*c*/ ctx[2]["computed"],
|
||||
d: /*d*/ ctx[3]?.["computed_optional"],
|
||||
e: /*e*/ ctx[4](),
|
||||
f: /*f*/ ctx[5]?.()
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
c() {
|
||||
t0 = text(t0_value);
|
||||
t1 = text(t1_value);
|
||||
t2 = space();
|
||||
t3 = text(t3_value);
|
||||
t4 = text(t4_value);
|
||||
t5 = space();
|
||||
t6 = text(t6_value);
|
||||
t7 = text(t7_value);
|
||||
t8 = space();
|
||||
div = element("div");
|
||||
t9 = space();
|
||||
create_component(component.$$.fragment);
|
||||
attr(div, "a", div_a_value = /*a*/ ctx[0].normal);
|
||||
attr(div, "b", div_b_value = /*b*/ ctx[1]?.optional);
|
||||
attr(div, "c", div_c_value = /*c*/ ctx[2]["computed"]);
|
||||
attr(div, "d", div_d_value = /*d*/ ctx[3]?.["computed_optional"]);
|
||||
attr(div, "e", div_e_value = /*e*/ ctx[4]());
|
||||
attr(div, "f", div_f_value = /*f*/ ctx[5]?.());
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, t0, anchor);
|
||||
insert(target, t1, anchor);
|
||||
insert(target, t2, anchor);
|
||||
insert(target, t3, anchor);
|
||||
insert(target, t4, anchor);
|
||||
insert(target, t5, anchor);
|
||||
insert(target, t6, anchor);
|
||||
insert(target, t7, anchor);
|
||||
insert(target, t8, anchor);
|
||||
insert(target, div, anchor);
|
||||
insert(target, t9, anchor);
|
||||
mount_component(component, target, anchor);
|
||||
current = true;
|
||||
},
|
||||
p(ctx, [dirty]) {
|
||||
if ((!current || dirty & /*a*/ 1) && t0_value !== (t0_value = /*a*/ ctx[0].normal + "")) set_data(t0, t0_value);
|
||||
if ((!current || dirty & /*b*/ 2) && t1_value !== (t1_value = /*b*/ ctx[1]?.optional + "")) set_data(t1, t1_value);
|
||||
if ((!current || dirty & /*c*/ 4) && t3_value !== (t3_value = /*c*/ ctx[2]["computed"] + "")) set_data(t3, t3_value);
|
||||
if ((!current || dirty & /*d*/ 8) && t4_value !== (t4_value = /*d*/ ctx[3]?.["computed_optional"] + "")) set_data(t4, t4_value);
|
||||
if ((!current || dirty & /*e*/ 16) && t6_value !== (t6_value = /*e*/ ctx[4]() + "")) set_data(t6, t6_value);
|
||||
if ((!current || dirty & /*f*/ 32) && t7_value !== (t7_value = /*f*/ ctx[5]?.() + "")) set_data(t7, t7_value);
|
||||
|
||||
if (!current || dirty & /*a*/ 1 && div_a_value !== (div_a_value = /*a*/ ctx[0].normal)) {
|
||||
attr(div, "a", div_a_value);
|
||||
}
|
||||
|
||||
if (!current || dirty & /*b*/ 2 && div_b_value !== (div_b_value = /*b*/ ctx[1]?.optional)) {
|
||||
attr(div, "b", div_b_value);
|
||||
}
|
||||
|
||||
if (!current || dirty & /*c*/ 4 && div_c_value !== (div_c_value = /*c*/ ctx[2]["computed"])) {
|
||||
attr(div, "c", div_c_value);
|
||||
}
|
||||
|
||||
if (!current || dirty & /*d*/ 8 && div_d_value !== (div_d_value = /*d*/ ctx[3]?.["computed_optional"])) {
|
||||
attr(div, "d", div_d_value);
|
||||
}
|
||||
|
||||
if (!current || dirty & /*e*/ 16 && div_e_value !== (div_e_value = /*e*/ ctx[4]())) {
|
||||
attr(div, "e", div_e_value);
|
||||
}
|
||||
|
||||
if (!current || dirty & /*f*/ 32 && div_f_value !== (div_f_value = /*f*/ ctx[5]?.())) {
|
||||
attr(div, "f", div_f_value);
|
||||
}
|
||||
|
||||
const component_changes = {};
|
||||
if (dirty & /*a*/ 1) component_changes.a = /*a*/ ctx[0].normal;
|
||||
if (dirty & /*b*/ 2) component_changes.b = /*b*/ ctx[1]?.optional;
|
||||
if (dirty & /*c*/ 4) component_changes.c = /*c*/ ctx[2]["computed"];
|
||||
if (dirty & /*d*/ 8) component_changes.d = /*d*/ ctx[3]?.["computed_optional"];
|
||||
if (dirty & /*e*/ 16) component_changes.e = /*e*/ ctx[4]();
|
||||
if (dirty & /*f*/ 32) component_changes.f = /*f*/ ctx[5]?.();
|
||||
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(t0);
|
||||
if (detaching) detach(t1);
|
||||
if (detaching) detach(t2);
|
||||
if (detaching) detach(t3);
|
||||
if (detaching) detach(t4);
|
||||
if (detaching) detach(t5);
|
||||
if (detaching) detach(t6);
|
||||
if (detaching) detach(t7);
|
||||
if (detaching) detach(t8);
|
||||
if (detaching) detach(div);
|
||||
if (detaching) detach(t9);
|
||||
destroy_component(component, detaching);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function instance($$self, $$props, $$invalidate) {
|
||||
let { a } = $$props;
|
||||
let { b } = $$props;
|
||||
let { c } = $$props;
|
||||
let { d } = $$props;
|
||||
let { e } = $$props;
|
||||
let { f } = $$props;
|
||||
let Component;
|
||||
|
||||
$$self.$set = $$props => {
|
||||
if ("a" in $$props) $$invalidate(0, a = $$props.a);
|
||||
if ("b" in $$props) $$invalidate(1, b = $$props.b);
|
||||
if ("c" in $$props) $$invalidate(2, c = $$props.c);
|
||||
if ("d" in $$props) $$invalidate(3, d = $$props.d);
|
||||
if ("e" in $$props) $$invalidate(4, e = $$props.e);
|
||||
if ("f" in $$props) $$invalidate(5, f = $$props.f);
|
||||
};
|
||||
|
||||
return [a, b, c, d, e, f, Component];
|
||||
}
|
||||
|
||||
class Component_1 extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, instance, create_fragment, safe_not_equal, { a: 0, b: 1, c: 2, d: 3, e: 4, f: 5 });
|
||||
}
|
||||
}
|
||||
|
||||
export default Component_1;
|
||||
@ -0,0 +1,31 @@
|
||||
<script>
|
||||
export let a;
|
||||
export let b;
|
||||
export let c;
|
||||
export let d;
|
||||
export let e;
|
||||
export let f;
|
||||
let Component;
|
||||
</script>
|
||||
|
||||
{a.normal}{b?.optional}
|
||||
{c['computed']}{d?.['computed_optional']}
|
||||
{e()}{f?.()}
|
||||
|
||||
<div
|
||||
a={a.normal}
|
||||
b={b?.optional}
|
||||
c={c['computed']}
|
||||
d={d?.['computed_optional']}
|
||||
e={e()}
|
||||
f={f?.()}
|
||||
/>
|
||||
|
||||
<Component
|
||||
a={a.normal}
|
||||
b={b?.optional}
|
||||
c={c['computed']}
|
||||
d={d?.['computed_optional']}
|
||||
e={e()}
|
||||
f={f?.()}
|
||||
/>
|
||||
@ -0,0 +1,12 @@
|
||||
import * as assert from "assert";
|
||||
|
||||
export default {
|
||||
preprocess: {
|
||||
script: ({ content, attributes }) => {
|
||||
assert.equal(content, "");
|
||||
return {
|
||||
code: `console.log("${attributes["the-answer"]}");`
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<script the-answer="42"/>
|
||||
@ -0,0 +1 @@
|
||||
<script the-answer="42">console.log("42");</script>
|
||||
@ -0,0 +1,12 @@
|
||||
import * as assert from "assert";
|
||||
|
||||
export default {
|
||||
preprocess: {
|
||||
style: ({ content, attributes: { color } }) => {
|
||||
assert.equal(content, "");
|
||||
return {
|
||||
code: `div { color: ${color}; }`
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
<div class='brand-color'>$brand</div>
|
||||
|
||||
<style color="red"/>
|
||||
@ -0,0 +1,3 @@
|
||||
<div class='brand-color'>$brand</div>
|
||||
|
||||
<style color="red">div { color: red; }</style>
|
||||
@ -0,0 +1,53 @@
|
||||
let calls = [];
|
||||
function callback(refs) {
|
||||
calls.push(refs.map(({ ref }) => ({ ref })));
|
||||
}
|
||||
export default {
|
||||
html: ``,
|
||||
props: {
|
||||
callback,
|
||||
},
|
||||
after_test() {
|
||||
calls = [];
|
||||
},
|
||||
async test({ assert, component, target }) {
|
||||
assert.equal(calls.length, 1);
|
||||
assert.equal(calls[0].length, 0);
|
||||
|
||||
await component.addItem();
|
||||
|
||||
let divs = target.querySelectorAll("div");
|
||||
|
||||
assert.equal(calls.length, 3);
|
||||
assert.equal(calls[1].length, 1);
|
||||
assert.equal(calls[1][0].ref, null);
|
||||
assert.equal(calls[2].length, 1);
|
||||
assert.equal(calls[2][0].ref, divs[0]);
|
||||
|
||||
await component.addItem();
|
||||
|
||||
divs = target.querySelectorAll("div");
|
||||
|
||||
assert.equal(calls.length, 5);
|
||||
assert.equal(calls[3].length, 2);
|
||||
assert.equal(calls[3][0].ref, divs[0]);
|
||||
assert.equal(calls[3][1].ref, null);
|
||||
assert.equal(calls[4].length, 2);
|
||||
assert.equal(calls[4][0].ref, divs[0]);
|
||||
assert.equal(calls[4][1].ref, divs[1]);
|
||||
|
||||
await component.addItem();
|
||||
|
||||
divs = target.querySelectorAll("div");
|
||||
|
||||
assert.equal(calls.length, 7);
|
||||
assert.equal(calls[5].length, 3);
|
||||
assert.equal(calls[5][0].ref, divs[0]);
|
||||
assert.equal(calls[5][1].ref, divs[1]);
|
||||
assert.equal(calls[5][2].ref, null);
|
||||
assert.equal(calls[6].length, 3);
|
||||
assert.equal(calls[6][0].ref, divs[0]);
|
||||
assert.equal(calls[6][1].ref, divs[1]);
|
||||
assert.equal(calls[6][2].ref, divs[2]);
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
import { tick } from 'svelte';
|
||||
let refs = [];
|
||||
|
||||
export function addItem() {
|
||||
refs = refs.concat({ ref: null });
|
||||
return tick();
|
||||
}
|
||||
|
||||
export let callback;
|
||||
|
||||
$: callback(refs);
|
||||
</script>
|
||||
|
||||
{#each refs as xxx}
|
||||
<div bind:this={xxx.ref} />
|
||||
{/each}
|
||||
@ -0,0 +1,15 @@
|
||||
export default {
|
||||
html: `
|
||||
<div contenteditable=""></div>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const div = target.querySelector('div');
|
||||
const text = window.document.createTextNode('a');
|
||||
div.insertBefore(text, null);
|
||||
const event = new window.InputEvent('input');
|
||||
await div.dispatchEvent(event);
|
||||
|
||||
assert.equal(div.textContent, 'a');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
let text = '';
|
||||
const updater = (event) => {text = event.target.textContent}
|
||||
</script>
|
||||
|
||||
<div contenteditable on:input={updater}>{text}</div>
|
||||
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
html: `
|
||||
<span>
|
||||
Style:
|
||||
<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>.
|
||||
</span>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
<span>
|
||||
Style:
|
||||
<!-- prettier-ignore -->
|
||||
<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>.
|
||||
</span>
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export let content;
|
||||
</script>
|
||||
|
||||
{@html content}
|
||||
@ -0,0 +1,33 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>Switch</button>
|
||||
<p>Another first line</p>
|
||||
<p>This line should be last.</p>
|
||||
`,
|
||||
async test({ assert, target, window }) {
|
||||
const btn = target.querySelector("button");
|
||||
const clickEvent = new window.MouseEvent("click");
|
||||
|
||||
await btn.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Switch</button>
|
||||
<p>First line</p>
|
||||
<p>This line should be last.</p>
|
||||
`
|
||||
);
|
||||
|
||||
await btn.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Switch</button>
|
||||
<p>Another first line</p>
|
||||
<p>This line should be last.</p>
|
||||
`
|
||||
);
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
import RawMustache from './RawMustache.svelte';
|
||||
|
||||
let content1 = `<p>First line</p>`;
|
||||
let content2 = `<p>Another first line</p>`;
|
||||
|
||||
let show = false;
|
||||
$: content = show ? content1 : content2;
|
||||
</script>
|
||||
|
||||
<button on:click={() => show = !show}>
|
||||
Switch
|
||||
</button>
|
||||
|
||||
<RawMustache {content} />
|
||||
|
||||
<p>This line should be last.</p>
|
||||
@ -0,0 +1,16 @@
|
||||
export default {
|
||||
async test({ assert, target, window }) {
|
||||
const btn = target.querySelector("button");
|
||||
const clickEvent = new window.MouseEvent("click");
|
||||
|
||||
assert.equal(window.document.head.innerHTML.includes('<style>body { color: blue; }</style><style>body { color: green; }</style>'), true);
|
||||
|
||||
await btn.dispatchEvent(clickEvent);
|
||||
|
||||
assert.equal(window.document.head.innerHTML.includes('<style>body { color: red; }</style><style>body { color: green; }</style>'), true);
|
||||
|
||||
await btn.dispatchEvent(clickEvent);
|
||||
|
||||
assert.equal(window.document.head.innerHTML.includes('<style>body { color: blue; }</style><style>body { color: green; }</style>'), true);
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
let content1 = `<style>body { color: red; }</style>`;
|
||||
let content2 = `<style>body { color: blue; }</style>`
|
||||
|
||||
let show = false;
|
||||
$: content = show ? content1 : content2;
|
||||
</script>
|
||||
|
||||
<button on:click={() => show = !show}>
|
||||
Switch
|
||||
</button>
|
||||
|
||||
<svelte:head>
|
||||
{@html content}
|
||||
<style>body { color: green; }</style>
|
||||
</svelte:head>
|
||||
@ -0,0 +1,2 @@
|
||||
<slot />
|
||||
<p>This line should be last.</p>
|
||||
@ -0,0 +1,33 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>Switch</button>
|
||||
<p>Another first line</p>
|
||||
<p>This line should be last.</p>
|
||||
`,
|
||||
async test({ assert, target, window }) {
|
||||
const btn = target.querySelector("button");
|
||||
const clickEvent = new window.MouseEvent("click");
|
||||
|
||||
await btn.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Switch</button>
|
||||
<p>First line</p>
|
||||
<p>This line should be last.</p>
|
||||
`
|
||||
);
|
||||
|
||||
await btn.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Switch</button>
|
||||
<p>Another first line</p>
|
||||
<p>This line should be last.</p>
|
||||
`
|
||||
);
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
import Component from './Component.svelte';
|
||||
|
||||
let content1 = `<p>First line</p>`;
|
||||
let content2 = `<p>Another first line</p>`
|
||||
|
||||
let show = false;
|
||||
$: content = show ? content1 : content2;
|
||||
</script>
|
||||
|
||||
<button on:click={() => show = !show}>
|
||||
Switch
|
||||
</button>
|
||||
|
||||
<Component>
|
||||
{@html content}
|
||||
</Component>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
error: `Stores must be declared at the top level of the component (this may change in a future version of Svelte)`
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store';
|
||||
const store = writable();
|
||||
|
||||
function foo() {
|
||||
let store = 1;
|
||||
$store = 2;
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
error: `Stores must be declared at the top level of the component (this may change in a future version of Svelte)`
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store';
|
||||
const store = writable();
|
||||
</script>
|
||||
|
||||
<button
|
||||
on:click={(store) => {
|
||||
$store = Math.random();
|
||||
}} />
|
||||
Loading…
Reference in new issue