Skip to content

Commit

Permalink
✨ Allow to bind: custom elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@ouvreboite
ouvreboite committed May 2, 2024
1 parent 0919128 commit f10f5a9
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 123 deletions.
196 changes: 100 additions & 96 deletions packages/svelte/src/compiler/compile/compiler_warnings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ export default {
* @param {string} component
* @param {string} property
*/ (component, property) => ({
code: 'unused-export-let',
message: `${component} has unused export property '${property}'. If it is for external reference only, please consider using \`export const ${property}\``
}),
code: 'unused-export-let',
message: `${component} has unused export property '${property}'. If it is for external reference only, please consider using \`export const ${property}\``
}),
module_script_reactive_declaration: {
code: 'module-script-reactive-declaration',
message: '$: has no effect in a module script'
Expand All @@ -23,21 +23,20 @@ export default {
},
module_script_variable_reactive_declaration: /** @param {string[]} names */ (names) => ({
code: 'module-script-reactive-declaration',
message: `${names.map((name) => `"${name}"`).join(', ')} ${
names.length > 1 ? 'are' : 'is'
} declared in a module script and will not be reactive`
message: `${names.map((name) => `"${name}"`).join(', ')} ${names.length > 1 ? 'are' : 'is'
} declared in a module script and will not be reactive`
}),
missing_declaration: /**
* @param {string} name
* @param {boolean} has_script
*/ (name, has_script) => ({
code: 'missing-declaration',
message:
`'${name}' is not defined` +
(has_script
? ''
: `. Consider adding a <script> block with 'export let ${name}' to declare a prop`)
}),
code: 'missing-declaration',
message:
`'${name}' is not defined` +
(has_script
? ''
: `. Consider adding a <script> block with 'export let ${name}' to declare a prop`)
}),
missing_custom_element_compile_options: {
code: 'missing-custom-element-compile-options',
message:
Expand Down Expand Up @@ -67,9 +66,9 @@ export default {
* @param {string} name
* @param {string} suggestion
*/ (name, suggestion) => ({
code: 'invalid-html-attribute',
message: `'${name}' is not a valid HTML attribute. Did you mean '${suggestion}'?`
}),
code: 'invalid-html-attribute',
message: `'${name}' is not a valid HTML attribute. Did you mean '${suggestion}'?`
}),
a11y_aria_attributes: /** @param {string} name */ (name) => ({
code: 'a11y-aria-attributes',
message: `A11y: <${name}> should not have aria-* attributes`
Expand All @@ -78,47 +77,47 @@ export default {
* @param {import('aria-query').ARIAPropertyDefinition} schema
* @param {string} attribute
*/ (schema, attribute) => {
let message;
switch (schema.type) {
case 'boolean':
message = `The value of '${attribute}' must be exactly one of true or false`;
break;
case 'id':
message = `The value of '${attribute}' must be a string that represents a DOM element ID`;
break;
case 'idlist':
message = `The value of '${attribute}' must be a space-separated list of strings that represent DOM element IDs`;
break;
case 'tristate':
message = `The value of '${attribute}' must be exactly one of true, false, or mixed`;
break;
case 'token':
message = `The value of '${attribute}' must be exactly one of ${(schema.values || []).join(
', '
)}`;
break;
case 'tokenlist':
message = `The value of '${attribute}' must be a space-separated list of one or more of ${(
schema.values || []
).join(', ')}`;
break;
default:
message = `The value of '${attribute}' must be of type ${schema.type}`;
}
return {
code: 'a11y-incorrect-aria-attribute-type',
message: `A11y: ${message}`
};
},
let message;
switch (schema.type) {
case 'boolean':
message = `The value of '${attribute}' must be exactly one of true or false`;
break;
case 'id':
message = `The value of '${attribute}' must be a string that represents a DOM element ID`;
break;
case 'idlist':
message = `The value of '${attribute}' must be a space-separated list of strings that represent DOM element IDs`;
break;
case 'tristate':
message = `The value of '${attribute}' must be exactly one of true, false, or mixed`;
break;
case 'token':
message = `The value of '${attribute}' must be exactly one of ${(schema.values || []).join(
', '
)}`;
break;
case 'tokenlist':
message = `The value of '${attribute}' must be a space-separated list of one or more of ${(
schema.values || []
).join(', ')}`;
break;
default:
message = `The value of '${attribute}' must be of type ${schema.type}`;
}
return {
code: 'a11y-incorrect-aria-attribute-type',
message: `A11y: ${message}`
};
},
a11y_unknown_aria_attribute: /**
* @param {string} attribute
* @param {string} [suggestion]
*/ (attribute, suggestion) => ({
code: 'a11y-unknown-aria-attribute',
message:
`A11y: Unknown aria attribute 'aria-${attribute}'` +
(suggestion ? ` (did you mean '${suggestion}'?)` : '')
}),
code: 'a11y-unknown-aria-attribute',
message:
`A11y: Unknown aria attribute 'aria-${attribute}'` +
(suggestion ? ` (did you mean '${suggestion}'?)` : '')
}),
a11y_hidden: /** @param {string} name */ (name) => ({
code: 'a11y-hidden',
message: `A11y: <${name}> element should not be hidden`
Expand All @@ -131,9 +130,9 @@ export default {
* @param {string | boolean} role
* @param {string} [suggestion]
*/ (role, suggestion) => ({
code: 'a11y-unknown-role',
message: `A11y: Unknown role '${role}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')
}),
code: 'a11y-unknown-role',
message: `A11y: Unknown role '${role}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')
}),
a11y_no_abstract_role: /** @param {string | boolean} role */ (role) => ({
code: 'a11y-no-abstract-role',
message: `A11y: Abstract role '${role}' is forbidden`
Expand All @@ -146,18 +145,17 @@ export default {
* @param {string} element
* @param {string[]} handlers
*/ (element, handlers) => ({
code: 'a11y-no-static-element-interactions',
message: `A11y: <${element}> with ${handlers.join(', ')} ${
handlers.length === 1 ? 'handler' : 'handlers'
} must have an ARIA role`
}),
code: 'a11y-no-static-element-interactions',
message: `A11y: <${element}> with ${handlers.join(', ')} ${handlers.length === 1 ? 'handler' : 'handlers'
} must have an ARIA role`
}),
a11y_no_interactive_element_to_noninteractive_role: /**
* @param {string | boolean} role
* @param {string} element
*/ (role, element) => ({
code: 'a11y-no-interactive-element-to-noninteractive-role',
message: `A11y: <${element}> cannot have role '${role}'`
}),
code: 'a11y-no-interactive-element-to-noninteractive-role',
message: `A11y: <${element}> cannot have role '${role}'`
}),
a11y_no_noninteractive_element_interactions: /** @param {string} element */ (element) => ({
code: 'a11y-no-noninteractive-element-interactions',
message: `A11y: Non-interactive element <${element}> should not be assigned mouse or keyboard event listeners.`
Expand All @@ -166,33 +164,33 @@ export default {
* @param {string | boolean} role
* @param {string} element
*/ (role, element) => ({
code: 'a11y-no-noninteractive-element-to-interactive-role',
message: `A11y: Non-interactive element <${element}> cannot have interactive role '${role}'`
}),
code: 'a11y-no-noninteractive-element-to-interactive-role',
message: `A11y: Non-interactive element <${element}> cannot have interactive role '${role}'`
}),
a11y_role_has_required_aria_props: /**
* @param {string} role
* @param {string[]} props
*/ (role, props) => ({
code: 'a11y-role-has-required-aria-props',
message: `A11y: Elements with the ARIA role "${role}" must have the following attributes defined: ${props
.map((name) => `"${name}"`)
.join(', ')}`
}),
code: 'a11y-role-has-required-aria-props',
message: `A11y: Elements with the ARIA role "${role}" must have the following attributes defined: ${props
.map((name) => `"${name}"`)
.join(', ')}`
}),
a11y_role_supports_aria_props: /**
* @param {string} attribute
* @param {string} role
* @param {boolean} is_implicit
* @param {string} name
*/ (attribute, role, is_implicit, name) => {
let message = `The attribute '${attribute}' is not supported by the role '${role}'.`;
if (is_implicit) {
message += ` This role is implicit on the element <${name}>.`;
}
return {
code: 'a11y-role-supports-aria-props',
message: `A11y: ${message}`
};
},
let message = `The attribute '${attribute}' is not supported by the role '${role}'.`;
if (is_implicit) {
message += ` This role is implicit on the element <${name}>.`;
}
return {
code: 'a11y-role-supports-aria-props',
message: `A11y: ${message}`
};
},
a11y_accesskey: {
code: 'a11y-accesskey',
message: 'A11y: Avoid using accesskey'
Expand All @@ -213,26 +211,25 @@ export default {
* @param {string} href_attribute
* @param {string} href_value
*/ (href_attribute, href_value) => ({
code: 'a11y-invalid-attribute',
message: `A11y: '${href_value}' is not a valid ${href_attribute} attribute`
}),
code: 'a11y-invalid-attribute',
message: `A11y: '${href_value}' is not a valid ${href_attribute} attribute`
}),
a11y_missing_attribute: /**
* @param {string} name
* @param {string} article
* @param {string} sequence
*/ (name, article, sequence) => ({
code: 'a11y-missing-attribute',
message: `A11y: <${name}> element should have ${article} ${sequence} attribute`
}),
code: 'a11y-missing-attribute',
message: `A11y: <${name}> element should have ${article} ${sequence} attribute`
}),
a11y_autocomplete_valid: /**
* @param {null | true | string} type
* @param {null | true | string} value
*/ (type, value) => ({
code: 'a11y-autocomplete-valid',
message: `A11y: The value '${value}' is not supported by the attribute 'autocomplete' on element <input type="${
type || '...'
}">`
}),
code: 'a11y-autocomplete-valid',
message: `A11y: The value '${value}' is not supported by the attribute 'autocomplete' on element <input type="${type || '...'
}">`
}),
a11y_img_redundant_alt: {
code: 'a11y-img-redundant-alt',
message: 'A11y: Screenreaders already announce <img> elements as an image.'
Expand Down Expand Up @@ -265,9 +262,9 @@ export default {
* @param {string} event
* @param {string} accompanied_by
*/ (event, accompanied_by) => ({
code: 'a11y-mouse-events-have-key-events',
message: `A11y: on:${event} must be accompanied by on:${accompanied_by}`
}),
code: 'a11y-mouse-events-have-key-events',
message: `A11y: on:${event} must be accompanied by on:${accompanied_by}`
}),
a11y_click_events_have_key_events: {
code: 'a11y-click-events-have-key-events',
message:
Expand Down Expand Up @@ -306,5 +303,12 @@ export default {
code: 'illegal-attribute-character',
message:
"Attributes should not contain ':' characters to prevent ambiguity with Svelte directives"
}
},
binding_custom_element: /**
* @param {string} element
* @param {string} binding
*/ (element, binding) => ({
code: 'binding-custom-element',
message: `'Binding on custom element <${element}> is not checked. You need to ensure '${binding}' is a valid property.'`
}),
};
Loading

0 comments on commit f10f5a9

Please sign in to comment.