diff --git a/src/validate/html/index.ts b/src/validate/html/index.ts
index 6698cc7c43..8d1502dc3f 100644
--- a/src/validate/html/index.ts
+++ b/src/validate/html/index.ts
@@ -1,3 +1,4 @@
+import validateComponent from './validateComponent';
import validateElement from './validateElement';
import validateWindow from './validateWindow';
import validateHead from './validateHead';
@@ -35,14 +36,13 @@ export default function validateHtml(validator: Validator, html: Node) {
}
else if (node.type === 'Component' || node.name === 'svelte:self' || node.name === 'svelte:component') {
- validateElement(
+ validateComponent(
validator,
node,
refs,
refCallees,
stack,
- elementStack,
- true
+ elementStack
);
}
@@ -53,8 +53,7 @@ export default function validateHtml(validator: Validator, html: Node) {
refs,
refCallees,
stack,
- elementStack,
- false
+ elementStack
);
a11y(validator, node, elementStack);
diff --git a/src/validate/html/validateComponent.ts b/src/validate/html/validateComponent.ts
new file mode 100644
index 0000000000..9e492e36a2
--- /dev/null
+++ b/src/validate/html/validateComponent.ts
@@ -0,0 +1,44 @@
+import * as namespaces from '../../utils/namespaces';
+import validateEventHandler from './validateEventHandler';
+import validate, { Validator } from '../index';
+import { Node } from '../../interfaces';
+
+export default function validateComponent(
+ validator: Validator,
+ node: Node,
+ refs: Map,
+ refCallees: Node[],
+ stack: Node[],
+ elementStack: Node[]
+) {
+ if (!validator.components.has(node.name)) {
+ validator.error(node, {
+ code: `missing-component`,
+ message: `${node.name} component is not defined`
+ });
+ }
+
+ validator.used.components.add(node.name);
+
+ node.attributes.forEach((attribute: Node) => {
+ if (attribute.type === 'Ref') {
+ if (!refs.has(attribute.name)) refs.set(attribute.name, []);
+ refs.get(attribute.name).push(node);
+ }
+
+ if (attribute.type === 'EventHandler') {
+ validator.used.events.add(attribute.name);
+ validateEventHandler(validator, attribute, refCallees);
+ } else if (attribute.type === 'Transition') {
+ validator.error(attribute, {
+ code: `invalid-transition`,
+ message: `Transitions can only be applied to DOM elements, not components`
+ });
+ } else if (attribute.type === 'Action') {
+ validator.error(attribute, {
+ code: `invalid-action`,
+ message: `Actions can only be applied to DOM elements, not components`
+ });
+ }
+ });
+}
\ No newline at end of file
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index 7d8d19d188..83de0b49aa 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -11,20 +11,8 @@ export default function validateElement(
refs: Map,
refCallees: Node[],
stack: Node[],
- elementStack: Node[],
- isComponent: Boolean
+ elementStack: Node[]
) {
- if (isComponent) {
- validator.used.components.add(node.name);
- }
-
- if (!isComponent && /^[A-Z]/.test(node.name[0])) {
- validator.error(node, {
- code: `missing-component`,
- message: `${node.name} component is not defined`
- });
- }
-
if (elementStack.length === 0 && validator.namespace !== namespaces.svg && svg.test(node.name)) {
validator.warn(node, {
code: `missing-namespace`,
@@ -95,7 +83,7 @@ export default function validateElement(
refs.get(attribute.name).push(node);
}
- if (!isComponent && attribute.type === 'Binding') {
+ if (attribute.type === 'Binding') {
const { name } = attribute;
if (name === 'value') {
@@ -179,13 +167,6 @@ export default function validateElement(
validator.used.events.add(attribute.name);
validateEventHandler(validator, attribute, refCallees);
} else if (attribute.type === 'Transition') {
- if (isComponent) {
- validator.error(attribute, {
- code: `invalid-transition`,
- message: `Transitions can only be applied to DOM elements, not components`
- });
- }
-
validator.used.transitions.add(attribute.name);
const bidi = attribute.intro && attribute.outro;
@@ -238,17 +219,10 @@ export default function validateElement(
}
}
- if (attribute.name === 'slot' && !isComponent) {
+ if (attribute.name === 'slot') {
checkSlotAttribute(validator, node, attribute, stack);
}
} else if (attribute.type === 'Action') {
- if (isComponent) {
- validator.error(attribute, {
- code: `invalid-action`,
- message: `Actions can only be applied to DOM elements, not components`
- });
- }
-
validator.used.actions.add(attribute.name);
if (!validator.actions.has(attribute.name)) {