diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 688780e692..e76447c924 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -93,6 +93,11 @@ const passive_events = new Set([ 'touchcancel' ]); +const react_attributes = new Map([ + ['className', 'class'], + ['htmlFor', 'for'], +]); + function get_namespace(parent: Element, element: Element, explicit_namespace: string) { const parent_element = parent.find_nearest(/^Element/); @@ -444,6 +449,13 @@ export default class Element extends Node { }); } + if (react_attributes.has(attribute.name)) { + component.warn(attribute, { + code: 'use-the-platform', + message: `'${attribute.name}' is not a valid html attribute. Did you mean '${react_attributes.get(attribute.name)}'? If you are a recovering React developer, remember, Svelte actually uses the web platform.` + }); + } + attribute_map.set(attribute.name, attribute); }); } diff --git a/test/validator/samples/use-the-platform/input.svelte b/test/validator/samples/use-the-platform/input.svelte new file mode 100644 index 0000000000..bff03d2ed5 --- /dev/null +++ b/test/validator/samples/use-the-platform/input.svelte @@ -0,0 +1,2 @@ +
+ \ No newline at end of file diff --git a/test/validator/samples/use-the-platform/warnings.json b/test/validator/samples/use-the-platform/warnings.json new file mode 100644 index 0000000000..e377a98ecf --- /dev/null +++ b/test/validator/samples/use-the-platform/warnings.json @@ -0,0 +1,32 @@ +[ + { + "code": "use-the-platform", + "message": "'className' is not a valid html attribute. Did you mean 'class'? If you are a recovering React developer, remember, Svelte actually uses the web platform.", + "pos": 5, + "start": { + "character": 5, + "column": 5, + "line": 1 + }, + "end": { + "character": 20, + "column": 20, + "line": 1 + } + }, + { + "code": "use-the-platform", + "message": "'htmlFor' is not a valid html attribute. Did you mean 'for'? If you are a recovering React developer, remember, Svelte actually uses the web platform.", + "pos": 35, + "start": { + "character": 35, + "column": 7, + "line": 2 + }, + "end": { + "character": 46, + "column": 18, + "line": 2 + } + } +]