mirror of https://github.com/sveltejs/svelte
pull/7426/head
Simon H
3 years ago
committed by
GitHub
commit
5a1fb9000a
@ -1,23 +0,0 @@
|
||||
// This script generates the TypeScript definitions
|
||||
|
||||
const { execSync } = require('child_process');
|
||||
const { readFileSync, writeFileSync } = require('fs');
|
||||
|
||||
execSync('tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly', { stdio: 'inherit' });
|
||||
// We need to add these types to the .d.ts files here because if we add them before building, the build will fail,
|
||||
// because the TS->JS transformation doesn't know these exports are types and produces code that fails at runtime.
|
||||
// We can't use `export type` syntax either because the TS version we're on doesn't have this feature yet.
|
||||
|
||||
function modify(path, modifyFn) {
|
||||
const content = readFileSync(path, 'utf8');
|
||||
writeFileSync(path, modifyFn(content));
|
||||
}
|
||||
|
||||
modify(
|
||||
'types/runtime/index.d.ts',
|
||||
content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents')
|
||||
);
|
||||
modify(
|
||||
'types/compiler/index.d.ts',
|
||||
content => content + '\nexport { CompileOptions, ModuleFormat, EnableSourcemap, CssHashGetter } from "./interfaces"'
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,148 +0,0 @@
|
||||
import fs from 'fs';
|
||||
import replace from '@rollup/plugin-replace';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import json from '@rollup/plugin-json';
|
||||
import sucrase from '@rollup/plugin-sucrase';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import pkg from './package.json';
|
||||
|
||||
const is_publish = !!process.env.PUBLISH;
|
||||
|
||||
const ts_plugin = is_publish
|
||||
? typescript({
|
||||
include: 'src/**',
|
||||
typescript: require('typescript')
|
||||
})
|
||||
: sucrase({
|
||||
transforms: ['typescript']
|
||||
});
|
||||
|
||||
const external = id => id.startsWith('svelte/');
|
||||
|
||||
fs.writeFileSync(`./compiler.d.ts`, `export { compile, parse, preprocess, walk, VERSION } from './types/compiler/index';`);
|
||||
|
||||
export default [
|
||||
/* runtime */
|
||||
{
|
||||
input: `src/runtime/index.ts`,
|
||||
output: [
|
||||
{
|
||||
file: `index.mjs`,
|
||||
format: 'esm',
|
||||
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.mjs`
|
||||
},
|
||||
{
|
||||
file: `index.js`,
|
||||
format: 'cjs',
|
||||
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.js`
|
||||
}
|
||||
],
|
||||
external,
|
||||
plugins: [ts_plugin]
|
||||
},
|
||||
|
||||
{
|
||||
input: `src/runtime/ssr.ts`,
|
||||
output: [
|
||||
{
|
||||
file: `ssr.mjs`,
|
||||
format: 'esm',
|
||||
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.mjs`
|
||||
},
|
||||
{
|
||||
file: `ssr.js`,
|
||||
format: 'cjs',
|
||||
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.js`
|
||||
}
|
||||
],
|
||||
external,
|
||||
plugins: [ts_plugin]
|
||||
},
|
||||
|
||||
...fs.readdirSync('src/runtime')
|
||||
.filter(dir => fs.statSync(`src/runtime/${dir}`).isDirectory())
|
||||
.map(dir => ({
|
||||
input: `src/runtime/${dir}/index.ts`,
|
||||
output: [
|
||||
{
|
||||
file: `${dir}/index.mjs`,
|
||||
format: 'esm',
|
||||
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.mjs`
|
||||
},
|
||||
{
|
||||
file: `${dir}/index.js`,
|
||||
format: 'cjs',
|
||||
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.js`
|
||||
}
|
||||
],
|
||||
external,
|
||||
plugins: [
|
||||
replace({
|
||||
__VERSION__: pkg.version
|
||||
}),
|
||||
ts_plugin,
|
||||
{
|
||||
writeBundle(bundle) {
|
||||
if (dir === 'internal') {
|
||||
const mod = bundle['index.mjs'];
|
||||
if (mod) {
|
||||
fs.writeFileSync('src/compiler/compile/internal_exports.ts', `// This file is automatically generated\nexport default new Set(${JSON.stringify(mod.exports)});`);
|
||||
}
|
||||
}
|
||||
|
||||
fs.writeFileSync(`${dir}/package.json`, JSON.stringify({
|
||||
main: './index',
|
||||
module: './index.mjs',
|
||||
types: './index.d.ts'
|
||||
}, null, ' '));
|
||||
|
||||
fs.writeFileSync(`${dir}/index.d.ts`, `export * from '../types/runtime/${dir}/index';`);
|
||||
}
|
||||
}
|
||||
]
|
||||
})),
|
||||
|
||||
/* compiler.js */
|
||||
{
|
||||
input: 'src/compiler/index.ts',
|
||||
plugins: [
|
||||
replace({
|
||||
__VERSION__: pkg.version,
|
||||
'process.env.NODE_DEBUG': false // appears inside the util package
|
||||
}),
|
||||
{
|
||||
resolveId(id) {
|
||||
// util is a built-in module in Node.js, but we want a self-contained compiler bundle
|
||||
// that also works in the browser, so we load its polyfill instead
|
||||
if (id === 'util') {
|
||||
return require.resolve('./node_modules/util'); // just 'utils' would resolve this to the built-in module
|
||||
}
|
||||
}
|
||||
},
|
||||
resolve(),
|
||||
commonjs({
|
||||
include: ['node_modules/**']
|
||||
}),
|
||||
json(),
|
||||
ts_plugin
|
||||
],
|
||||
output: [
|
||||
{
|
||||
file: 'compiler.js',
|
||||
format: is_publish ? 'umd' : 'cjs',
|
||||
name: 'svelte',
|
||||
sourcemap: true,
|
||||
},
|
||||
{
|
||||
file: 'compiler.mjs',
|
||||
format: 'esm',
|
||||
name: 'svelte',
|
||||
sourcemap: true,
|
||||
}
|
||||
],
|
||||
external: is_publish
|
||||
? []
|
||||
: id => id === 'acorn' || id === 'magic-string' || id.startsWith('css-tree')
|
||||
}
|
||||
];
|
||||
@ -0,0 +1,160 @@
|
||||
import fs from 'node:fs';
|
||||
import { createRequire } from 'node:module';
|
||||
import replace from '@rollup/plugin-replace';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import json from '@rollup/plugin-json';
|
||||
import sucrase from '@rollup/plugin-sucrase';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
|
||||
const require = createRequire(import.meta.url);
|
||||
const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
|
||||
|
||||
const is_publish = !!process.env.PUBLISH;
|
||||
|
||||
const ts_plugin = is_publish
|
||||
? typescript({
|
||||
typescript: require('typescript'),
|
||||
})
|
||||
: sucrase({
|
||||
transforms: ['typescript'],
|
||||
});
|
||||
|
||||
fs.writeFileSync(
|
||||
`./compiler.d.ts`,
|
||||
`export { compile, parse, preprocess, walk, VERSION } from './types/compiler/index.js';`
|
||||
);
|
||||
|
||||
const runtime_entrypoints = Object.fromEntries(
|
||||
fs
|
||||
.readdirSync('src/runtime', { withFileTypes: true })
|
||||
.filter((dirent) => dirent.isDirectory())
|
||||
.map((dirent) => [dirent.name, `src/runtime/${dirent.name}/index.ts`])
|
||||
);
|
||||
|
||||
/**
|
||||
* @type {import("rollup").RollupOptions[]}
|
||||
*/
|
||||
export default [
|
||||
{
|
||||
input: {
|
||||
...runtime_entrypoints,
|
||||
index: 'src/runtime/index.ts',
|
||||
ssr: 'src/runtime/ssr.ts'
|
||||
},
|
||||
output: ['es', 'cjs'].map(
|
||||
/** @returns {import('rollup').OutputOptions} */
|
||||
(format) => {
|
||||
const ext = format === 'es' ? 'mjs' : 'js';
|
||||
return {
|
||||
entryFileNames: (entry) => {
|
||||
if (entry.isEntry) {
|
||||
if (entry.name === 'index') return `index.${ext}`;
|
||||
else if (entry.name === 'ssr') return `ssr.${ext}`;
|
||||
|
||||
return `${entry.name}/index.${ext}`;
|
||||
}
|
||||
},
|
||||
chunkFileNames: `internal/[name]-[hash].${ext}`,
|
||||
format,
|
||||
minifyInternalExports: false,
|
||||
dir: '.',
|
||||
};
|
||||
}
|
||||
),
|
||||
plugins: [
|
||||
replace({
|
||||
preventAssignment: true,
|
||||
values: {
|
||||
__VERSION__: pkg.version,
|
||||
},
|
||||
}),
|
||||
ts_plugin,
|
||||
{
|
||||
writeBundle(options, bundle) {
|
||||
if (options.format !== 'es') return;
|
||||
|
||||
for (const entry of Object.values(bundle)) {
|
||||
const dir = entry.name;
|
||||
if (!entry.isEntry || !runtime_entrypoints[dir]) continue;
|
||||
|
||||
if (dir === 'internal') {
|
||||
const mod = bundle[`internal/index.mjs`];
|
||||
if (mod) {
|
||||
fs.writeFileSync(
|
||||
'src/compiler/compile/internal_exports.ts',
|
||||
`// This file is automatically generated\n` +
|
||||
`export default new Set(${JSON.stringify(mod.exports)});`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
fs.writeFileSync(
|
||||
`${dir}/package.json`,
|
||||
JSON.stringify(
|
||||
{
|
||||
main: './index.js',
|
||||
module: './index.mjs',
|
||||
types: './index.d.ts',
|
||||
},
|
||||
null,
|
||||
' '
|
||||
)
|
||||
);
|
||||
|
||||
fs.writeFileSync(
|
||||
`${dir}/index.d.ts`,
|
||||
`export * from '../types/runtime/${dir}/index.js';`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
/* compiler.js */
|
||||
{
|
||||
input: 'src/compiler/index.ts',
|
||||
plugins: [
|
||||
replace({
|
||||
preventAssignment: true,
|
||||
values: {
|
||||
__VERSION__: pkg.version,
|
||||
'process.env.NODE_DEBUG': false // appears inside the util package
|
||||
},
|
||||
}),
|
||||
{
|
||||
resolveId(id) {
|
||||
// util is a built-in module in Node.js, but we want a self-contained compiler bundle
|
||||
// that also works in the browser, so we load its polyfill instead
|
||||
if (id === 'util') {
|
||||
return require.resolve('./node_modules/util'); // just 'utils' would resolve this to the built-in module
|
||||
}
|
||||
},
|
||||
},
|
||||
resolve(),
|
||||
commonjs({
|
||||
include: ['node_modules/**']
|
||||
}),
|
||||
json(),
|
||||
ts_plugin
|
||||
],
|
||||
output: [
|
||||
{
|
||||
file: 'compiler.js',
|
||||
format: is_publish ? 'umd' : 'cjs',
|
||||
name: 'svelte',
|
||||
sourcemap: true,
|
||||
},
|
||||
{
|
||||
file: 'compiler.mjs',
|
||||
format: 'esm',
|
||||
name: 'svelte',
|
||||
sourcemap: true,
|
||||
}
|
||||
],
|
||||
external: is_publish
|
||||
? []
|
||||
: (id) =>
|
||||
id === 'acorn' || id === 'magic-string' || id.startsWith('css-tree')
|
||||
}
|
||||
];
|
||||
@ -1,7 +0,0 @@
|
||||
if (process.env.SKIP_PREPARE) {
|
||||
console.log('Skipped "prepare" script');
|
||||
} else {
|
||||
const { execSync } = require("child_process");
|
||||
const command = process.argv.slice(2).join(" ");
|
||||
execSync(command, { stdio: "inherit" });
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
const items = [ { id: 'a' }, { id: 'b' } ];
|
||||
|
||||
export default {
|
||||
props: {
|
||||
foo: null,
|
||||
items
|
||||
},
|
||||
|
||||
test({ assert, component, target }) {
|
||||
const select = target.querySelector( 'select' );
|
||||
const options = target.querySelectorAll( 'option' );
|
||||
|
||||
assert.equal( options[0].selected, true );
|
||||
assert.equal( options[0].disabled, true );
|
||||
assert.equal( options[1].selected, false );
|
||||
assert.equal( options[1].disabled, false );
|
||||
|
||||
// placeholder option value must be blank string for native required field validation
|
||||
assert.equal( options[0].value, '' );
|
||||
assert.equal( select.checkValidity(), false );
|
||||
|
||||
component.foo = items[0];
|
||||
|
||||
assert.equal( options[0].selected, false );
|
||||
assert.equal( options[1].selected, true );
|
||||
assert.equal( select.checkValidity(), true );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
export let foo;
|
||||
export let items;
|
||||
</script>
|
||||
|
||||
<select bind:value={foo} required>
|
||||
<option value={null} disabled>Select an option</option>
|
||||
{#each items as item}
|
||||
<option value={item}>{item.id}</option>
|
||||
{/each}
|
||||
</select>
|
||||
@ -0,0 +1,3 @@
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
@ -0,0 +1,11 @@
|
||||
export default {
|
||||
html: `
|
||||
<div> </div>
|
||||
|
||||
<div>
|
||||
<span> </span>
|
||||
</div>
|
||||
|
||||
<div> </div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import Component from './Component.svelte'
|
||||
</script>
|
||||
|
||||
<Component> </Component>
|
||||
|
||||
<Component>
|
||||
<span> </span>
|
||||
</Component>
|
||||
|
||||
<Component>
|
||||
{@html " "}
|
||||
</Component>
|
||||
@ -0,0 +1,153 @@
|
||||
import type { Action, ActionReturn } from '$runtime/action';
|
||||
|
||||
// ---------------- Action
|
||||
|
||||
const href: Action<HTMLAnchorElement> = (node) => {
|
||||
node.href = '';
|
||||
// @ts-expect-error
|
||||
node.href = 1;
|
||||
};
|
||||
href;
|
||||
|
||||
const required: Action<HTMLElement, boolean> = (node, param) => {
|
||||
node;
|
||||
param;
|
||||
};
|
||||
required(null as any, true);
|
||||
// @ts-expect-error (only in strict mode) boolean missing
|
||||
required(null as any);
|
||||
// @ts-expect-error no boolean
|
||||
required(null as any, 'string');
|
||||
|
||||
const required1: Action<HTMLElement, boolean> = (node, param) => {
|
||||
node;
|
||||
param;
|
||||
return {
|
||||
update: (p) => p === true,
|
||||
destroy: () => {}
|
||||
};
|
||||
};
|
||||
required1;
|
||||
|
||||
const required2: Action<HTMLElement, boolean> = (node) => {
|
||||
node;
|
||||
};
|
||||
required2;
|
||||
|
||||
const required3: Action<HTMLElement, boolean> = (node, param) => {
|
||||
node;
|
||||
param;
|
||||
return {
|
||||
// @ts-expect-error comparison always resolves to false
|
||||
update: (p) => p === 'd',
|
||||
destroy: () => {}
|
||||
};
|
||||
};
|
||||
required3;
|
||||
|
||||
const optional: Action<HTMLElement, boolean | undefined> = (node, param?) => {
|
||||
node;
|
||||
param;
|
||||
};
|
||||
optional(null as any, true);
|
||||
optional(null as any);
|
||||
// @ts-expect-error no boolean
|
||||
optional(null as any, 'string');
|
||||
|
||||
const optional1: Action<HTMLElement, boolean | undefined> = (node, param?) => {
|
||||
node;
|
||||
param;
|
||||
return {
|
||||
update: (p) => p === true,
|
||||
destroy: () => {}
|
||||
};
|
||||
};
|
||||
optional1;
|
||||
|
||||
const optional2: Action<HTMLElement, boolean | undefined> = (node) => {
|
||||
node;
|
||||
};
|
||||
optional2;
|
||||
|
||||
const optional3: Action<HTMLElement, boolean | undefined> = (node, param) => {
|
||||
node;
|
||||
param;
|
||||
};
|
||||
optional3;
|
||||
|
||||
const optional4: Action<HTMLElement, boolean | undefined> = (node, param?) => {
|
||||
node;
|
||||
param;
|
||||
return {
|
||||
// @ts-expect-error comparison always resolves to false
|
||||
update: (p) => p === 'd',
|
||||
destroy: () => {}
|
||||
};
|
||||
};
|
||||
optional4;
|
||||
|
||||
const no: Action<HTMLElement, never> = (node) => {
|
||||
node;
|
||||
};
|
||||
// @ts-expect-error second param
|
||||
no(null as any, true);
|
||||
no(null as any);
|
||||
// @ts-expect-error second param
|
||||
no(null as any, 'string');
|
||||
|
||||
const no1: Action<HTMLElement, never> = (node) => {
|
||||
node;
|
||||
return {
|
||||
destroy: () => {}
|
||||
};
|
||||
};
|
||||
no1;
|
||||
|
||||
// @ts-expect-error param given
|
||||
const no2: Action<HTMLElement, never> = (node, param?) => {};
|
||||
no2;
|
||||
|
||||
// @ts-expect-error param given
|
||||
const no3: Action<HTMLElement, never> = (node, param) => {};
|
||||
no3;
|
||||
|
||||
// @ts-expect-error update method given
|
||||
const no4: Action<HTMLElement, never> = (node) => {
|
||||
return {
|
||||
update: () => {},
|
||||
destroy: () => {}
|
||||
};
|
||||
};
|
||||
no4;
|
||||
|
||||
// ---------------- ActionReturn
|
||||
|
||||
const requiredReturn: ActionReturn<string> = {
|
||||
update: (p) => p.toString()
|
||||
};
|
||||
requiredReturn;
|
||||
|
||||
const optionalReturn: ActionReturn<boolean | undefined> = {
|
||||
update: (p) => {
|
||||
p === true;
|
||||
// @ts-expect-error could be undefined
|
||||
p.toString();
|
||||
}
|
||||
};
|
||||
optionalReturn;
|
||||
|
||||
const invalidProperty: ActionReturn = {
|
||||
// @ts-expect-error invalid property
|
||||
invalid: () => {}
|
||||
};
|
||||
invalidProperty;
|
||||
|
||||
type Attributes = ActionReturn<never, { a: string; }>['$$_attributes'];
|
||||
const attributes: Attributes = { a: 'a' };
|
||||
attributes;
|
||||
// @ts-expect-error wrong type
|
||||
const invalidAttributes1: Attributes = { a: 1 };
|
||||
invalidAttributes1;
|
||||
// @ts-expect-error missing prop
|
||||
const invalidAttributes2: Attributes = {};
|
||||
invalidAttributes2;
|
||||
@ -0,0 +1,43 @@
|
||||
import { createEventDispatcher } from '$runtime/internal/lifecycle';
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
loaded: never
|
||||
change: string
|
||||
valid: boolean
|
||||
optional: number | null
|
||||
}>();
|
||||
|
||||
// @ts-expect-error: dispatch invalid event
|
||||
dispatch('some-event');
|
||||
|
||||
dispatch('loaded');
|
||||
dispatch('loaded', null);
|
||||
dispatch('loaded', undefined);
|
||||
dispatch('loaded', undefined, { cancelable: true });
|
||||
// @ts-expect-error: no detail accepted
|
||||
dispatch('loaded', 123);
|
||||
|
||||
// @ts-expect-error: detail not provided
|
||||
dispatch('change');
|
||||
dispatch('change', 'string');
|
||||
dispatch('change', 'string', { cancelable: true });
|
||||
// @ts-expect-error: wrong type of detail
|
||||
dispatch('change', 123);
|
||||
// @ts-expect-error: wrong type of detail
|
||||
dispatch('change', undefined);
|
||||
|
||||
dispatch('valid', true);
|
||||
dispatch('valid', true, { cancelable: true });
|
||||
// @ts-expect-error: wrong type of detail
|
||||
dispatch('valid', 'string');
|
||||
|
||||
dispatch('optional');
|
||||
dispatch('optional', 123);
|
||||
dispatch('optional', 123, { cancelable: true });
|
||||
dispatch('optional', null);
|
||||
dispatch('optional', undefined);
|
||||
dispatch('optional', undefined, { cancelable: true });
|
||||
// @ts-expect-error: wrong type of optional detail
|
||||
dispatch('optional', 'string');
|
||||
// @ts-expect-error: wrong type of option
|
||||
dispatch('optional', undefined, { cancelabled: true });
|
||||
@ -0,0 +1,58 @@
|
||||
import { onMount } from '$runtime/index';
|
||||
|
||||
// sync and no return
|
||||
onMount(() => {
|
||||
console.log('mounted');
|
||||
});
|
||||
|
||||
// sync and return value
|
||||
onMount(() => {
|
||||
return 'done';
|
||||
});
|
||||
|
||||
// sync and return sync
|
||||
onMount(() => {
|
||||
return () => {
|
||||
return 'done';
|
||||
};
|
||||
});
|
||||
|
||||
// sync and return async
|
||||
onMount(() => {
|
||||
return async () => {
|
||||
const res = await fetch('');
|
||||
return res;
|
||||
};
|
||||
});
|
||||
|
||||
// async and no return
|
||||
onMount(async () => {
|
||||
await fetch('');
|
||||
});
|
||||
|
||||
// async and return value
|
||||
onMount(async () => {
|
||||
const res = await fetch('');
|
||||
return res;
|
||||
});
|
||||
|
||||
// @ts-expect-error async and return sync
|
||||
onMount(async () => {
|
||||
return () => {
|
||||
return 'done';
|
||||
};
|
||||
});
|
||||
|
||||
// @ts-expect-error async and return async
|
||||
onMount(async () => {
|
||||
return async () => {
|
||||
const res = await fetch('');
|
||||
return res;
|
||||
};
|
||||
});
|
||||
|
||||
// @ts-expect-error async and return any
|
||||
onMount(async () => {
|
||||
const a: any = null as any;
|
||||
return a;
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "../..",
|
||||
"baseUrl": "../../",
|
||||
"paths": {
|
||||
"$runtime/*": ["src/runtime/*"]
|
||||
},
|
||||
// enable strictest options
|
||||
"allowUnreachableCode": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noImplicitReturns": true,
|
||||
"strict": true,
|
||||
},
|
||||
"include": ["."]
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
<!-- VALID -->
|
||||
<div role="presentation" on:mouseup={() => {}} />
|
||||
<div role="button" tabindex="-1" on:click={() => {}} on:keypress={() => {}} />
|
||||
<div role="listitem" aria-hidden on:click={() => {}} on:keypress={() => {}} />
|
||||
<button on:click={() => {}} />
|
||||
<h1 contenteditable="true" on:keydown={() => {}}>Heading</h1>
|
||||
<h1>Heading</h1>
|
||||
|
||||
<!-- INVALID -->
|
||||
<div role="listitem" on:mousedown={() => {}} />
|
||||
<h1 on:click={() => {}} on:keydown={() => {}}>Heading</h1>
|
||||
<h1 role="banner" on:keyup={() => {}}>Heading</h1>
|
||||
<p on:keypress={() => {}} />
|
||||
<div role="paragraph" on:mouseup={() => {}} />
|
||||
@ -0,0 +1,62 @@
|
||||
[
|
||||
{
|
||||
"code": "a11y-no-noninteractive-element-interactions",
|
||||
"end": {
|
||||
"column": 47,
|
||||
"line": 10
|
||||
},
|
||||
"message": "A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.",
|
||||
"start": {
|
||||
"column": 0,
|
||||
"line": 10
|
||||
}
|
||||
},
|
||||
{
|
||||
"code": "a11y-no-noninteractive-element-interactions",
|
||||
"end": {
|
||||
"column": 58,
|
||||
"line": 11
|
||||
},
|
||||
"message": "A11y: Non-interactive element <h1> should not be assigned mouse or keyboard event listeners.",
|
||||
"start": {
|
||||
"column": 0,
|
||||
"line": 11
|
||||
}
|
||||
},
|
||||
{
|
||||
"code": "a11y-no-noninteractive-element-interactions",
|
||||
"end": {
|
||||
"column": 50,
|
||||
"line": 12
|
||||
},
|
||||
"message": "A11y: Non-interactive element <h1> should not be assigned mouse or keyboard event listeners.",
|
||||
"start": {
|
||||
"column": 0,
|
||||
"line": 12
|
||||
}
|
||||
},
|
||||
{
|
||||
"code": "a11y-no-noninteractive-element-interactions",
|
||||
"end": {
|
||||
"column": 28,
|
||||
"line": 13
|
||||
},
|
||||
"message": "A11y: Non-interactive element <p> should not be assigned mouse or keyboard event listeners.",
|
||||
"start": {
|
||||
"column": 0,
|
||||
"line": 13
|
||||
}
|
||||
},
|
||||
{
|
||||
"code": "a11y-no-noninteractive-element-interactions",
|
||||
"end": {
|
||||
"column": 46,
|
||||
"line": 14
|
||||
},
|
||||
"message": "A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.",
|
||||
"start": {
|
||||
"column": 0,
|
||||
"line": 14
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
const dynamicRole = "button";
|
||||
</script>
|
||||
|
||||
<!-- valid -->
|
||||
<button on:click={() => {}} />
|
||||
<!-- svelte-ignore a11y-interactive-supports-focus -->
|
||||
<div on:keydown={() => {}} role="button" />
|
||||
<input type="text" on:click={() => {}} />
|
||||
<div on:copy={() => {}} />
|
||||
<a href="/foo" on:click={() => {}}>link</a>
|
||||
<div role={dynamicRole} on:click={() => {}} />
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<footer on:keydown={() => {}} />
|
||||
|
||||
<!-- invalid -->
|
||||
<div on:keydown={() => {}} />
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a on:mousedown={() => {}} on:mouseup={() => {}} on:copy={() => {}}>link</a>
|
||||
@ -0,0 +1,26 @@
|
||||
[
|
||||
{
|
||||
"code": "a11y-no-static-element-interactions",
|
||||
"end": {
|
||||
"column": 29,
|
||||
"line": 17
|
||||
},
|
||||
"message": "A11y: <div> with keydown handler must have an ARIA role",
|
||||
"start": {
|
||||
"column": 0,
|
||||
"line": 17
|
||||
}
|
||||
},
|
||||
{
|
||||
"code": "a11y-no-static-element-interactions",
|
||||
"end": {
|
||||
"column": 76,
|
||||
"line": 19
|
||||
},
|
||||
"message": "A11y: <a> with mousedown, mouseup handlers must have an ARIA role",
|
||||
"start": {
|
||||
"column": 0,
|
||||
"line": 19
|
||||
}
|
||||
}
|
||||
]
|
||||
Loading…
Reference in new issue