mirror of https://github.com/sveltejs/svelte
Yuichiro Yamashita
4 years ago
commit
b5de4567c5
@ -1,5 +1,18 @@
|
|||||||
|
/** regex of all html void element names */
|
||||||
const void_element_names = /^(?:area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/;
|
const void_element_names = /^(?:area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/;
|
||||||
|
/** regex of all html element names. svg and math are omitted because they belong to the svg elements namespace */
|
||||||
|
const html_element_names = /^(?:a|abbr|address|area|article|aside|audio|b|base|bdi|bdo|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|head|header|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|main|map|mark|meta|meter|nav|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strong|style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|u|ul|var|video|wbr)$/;
|
||||||
|
/** regex of all svg element names */
|
||||||
|
const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
|
||||||
|
|
||||||
export function is_void(name: string) {
|
export function is_void(name: string) {
|
||||||
return void_element_names.test(name) || name.toLowerCase() === '!doctype';
|
return void_element_names.test(name) || name.toLowerCase() === '!doctype';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function is_html(name: string) {
|
||||||
|
return html_element_names.test(name);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function is_svg(name: string) {
|
||||||
|
return svg.test(name);
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,30 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
open: false,
|
||||||
|
border: true
|
||||||
|
},
|
||||||
|
html: '<p>foo</p>',
|
||||||
|
|
||||||
|
test({ assert, component, target, raf }) {
|
||||||
|
component.open = true;
|
||||||
|
raf.tick(100);
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
'<p>foo</p><p class="red svelte-1yszte8 border" style="">bar</p>'
|
||||||
|
);
|
||||||
|
|
||||||
|
component.open = false;
|
||||||
|
raf.tick(150);
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_1333973250_0 100ms linear 0ms 1 both;">bar</p>'
|
||||||
|
);
|
||||||
|
|
||||||
|
component.open = true;
|
||||||
|
raf.tick(250);
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
'<p>foo</p><p class="red svelte-1yszte8 border" style="">bar</p>'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
import { slide } from "svelte/transition";
|
||||||
|
export let open = false;
|
||||||
|
export let color = "red";
|
||||||
|
export let border = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>foo</p>
|
||||||
|
{#if open}
|
||||||
|
<p class={color} class:border transition:slide|local={{ duration: 100 }}>bar</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.border {
|
||||||
|
border: 4px solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,7 +1,10 @@
|
|||||||
<script>
|
<script>
|
||||||
import thisShouldWarnMe from './MyComponent.svelte';
|
import thisShouldWarnMe from './MyComponent.svelte';
|
||||||
|
import { form } from './form';
|
||||||
let i;
|
let i;
|
||||||
|
form;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<thisShouldWarnMe />
|
<thisShouldWarnMe />
|
||||||
<i />
|
<i />
|
||||||
|
<form />
|
||||||
|
|||||||
Loading…
Reference in new issue