Skip to content

Commit

Permalink
fix changable -> changeable (#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
tchak authored Oct 26, 2023
2 parents 055b97c + 2f082dc commit 97d673b
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 33 deletions.
6 changes: 6 additions & 0 deletions .changeset/lemon-apples-lay.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@coldwired/router': patch
'@coldwired/utils': patch
---

fix changable -> changeable
2 changes: 1 addition & 1 deletion packages/router/src/directives/submit-on-change.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export class SubmitOnChange extends Directive implements EventListenerObject {

private onChange(form: HTMLFormElement, target: EventTarget) {
matchInputElement(target, {
changable: () => {
changeable: () => {
form.requestSubmit();
},
});
Expand Down
16 changes: 8 additions & 8 deletions packages/utils/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,8 @@ export function isInputableElement(node: unknown): node is HTMLInputElement | HT
return isTextAreaElement(node) || (isInputElement(node) && isInputableType(node.type));
}

export function isChangableElement(node: unknown): node is HTMLInputElement | HTMLSelectElement {
return isSelectElement(node) || (isInputElement(node) && isChangableType(node.type));
export function isChangeableElement(node: unknown): node is HTMLInputElement | HTMLSelectElement {
return isSelectElement(node) || (isInputElement(node) && isChangeableType(node.type));
}

export function isElementOrText(node: unknown): node is Element | Text {
Expand Down Expand Up @@ -356,9 +356,9 @@ function isInputableType(type: string) {
return INPUTABLE_TYPES.includes(type);
}

const CHANGABLE_TYPES = ['checkbox', 'radio', 'range', 'file', 'color'];
function isChangableType(type: string) {
return CHANGABLE_TYPES.includes(type);
const CHANGEABLE_TYPES = ['checkbox', 'radio', 'range', 'file', 'color'];
function isChangeableType(type: string) {
return CHANGEABLE_TYPES.includes(type);
}

type InputMatcher<T extends HTMLElement = HTMLInputElement> = (element: T) => void;
Expand All @@ -367,7 +367,7 @@ export function matchInputElement(
node: unknown,
matcher: {
inputable?: InputMatcher<HTMLInputElement | HTMLTextAreaElement>;
changable?: InputMatcher<HTMLInputElement | HTMLSelectElement>;
changeable?: InputMatcher<HTMLInputElement | HTMLSelectElement>;
text?: InputMatcher<HTMLInputElement | HTMLTextAreaElement>;
select?: InputMatcher<HTMLSelectElement>;
date?: InputMatcher;
Expand Down Expand Up @@ -395,7 +395,7 @@ export function matchInputElement(
} else {
matcher.inputable?.(node);
}
} else if (isChangableElement(node)) {
} else if (isChangeableElement(node)) {
if (matcher.select && isSelectElement(node)) {
matcher.select(node);
} else if (matcher.checkbox && isCheckboxInputElement(node)) {
Expand All @@ -409,7 +409,7 @@ export function matchInputElement(
} else if (matcher.color && isColorInputElement(node)) {
matcher.color(node);
} else {
matcher.changable?.(node);
matcher.changeable?.(node);
}
} else if (isHiddenInputElement(node)) {
matcher.hidden?.(node);
Expand Down
48 changes: 24 additions & 24 deletions packages/utils/src/utils.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
isFormInputElement,
isSelectElement,
isInputableElement,
isChangableElement,
isChangeableElement,
matchInputElement,
} from '.';

Expand Down Expand Up @@ -96,34 +96,34 @@ describe('@coldwired/utils', () => {
});
});

describe('isChangableElement', () => {
describe('isChangeableElement', () => {
it('should match checkbox input element', () => {
expect(isChangableElement(createInputElement('checkbox'))).toBeTruthy();
expect(isChangeableElement(createInputElement('checkbox'))).toBeTruthy();
});
it('should match radio input element', () => {
expect(isChangableElement(createInputElement('radio'))).toBeTruthy();
expect(isChangeableElement(createInputElement('radio'))).toBeTruthy();
});
it('should match range input element', () => {
expect(isChangableElement(createInputElement('range'))).toBeTruthy();
expect(isChangeableElement(createInputElement('range'))).toBeTruthy();
});
it('should match color input element', () => {
expect(isChangableElement(createInputElement('color'))).toBeTruthy();
expect(isChangeableElement(createInputElement('color'))).toBeTruthy();
});
it('should match file input element', () => {
expect(isChangableElement(createInputElement('file'))).toBeTruthy();
expect(isChangeableElement(createInputElement('file'))).toBeTruthy();
});
it('should match select element', () => {
expect(isChangableElement(document.createElement('select'))).toBeTruthy();
expect(isChangeableElement(document.createElement('select'))).toBeTruthy();
});

it('should not match text input element', () => {
expect(isChangableElement(createInputElement('text'))).toBeFalsy();
expect(isChangeableElement(createInputElement('text'))).toBeFalsy();
});
it('should not match textarea element', () => {
expect(isChangableElement(document.createElement('textarea'))).toBeFalsy();
expect(isChangeableElement(document.createElement('textarea'))).toBeFalsy();
});
it('should not match div element', () => {
expect(isChangableElement(document.createElement('div'))).toBeFalsy();
expect(isChangeableElement(document.createElement('div'))).toBeFalsy();
});
});

Expand All @@ -137,7 +137,7 @@ describe('@coldwired/utils', () => {
inputable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
});
Expand All @@ -152,7 +152,7 @@ describe('@coldwired/utils', () => {
inputable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
});
Expand All @@ -169,7 +169,7 @@ describe('@coldwired/utils', () => {
inputable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
},
Expand All @@ -186,7 +186,7 @@ describe('@coldwired/utils', () => {
inputable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
});
Expand All @@ -201,7 +201,7 @@ describe('@coldwired/utils', () => {
inputable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
});
Expand All @@ -216,7 +216,7 @@ describe('@coldwired/utils', () => {
inputable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
});
Expand All @@ -228,7 +228,7 @@ describe('@coldwired/utils', () => {
text: (target) => {
expect(target).toBeInstanceOf(HTMLTextAreaElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
});
Expand All @@ -255,7 +255,7 @@ describe('@coldwired/utils', () => {
inputable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
});
Expand All @@ -267,13 +267,13 @@ describe('@coldwired/utils', () => {
inputable: (target) => {
expect(target).toBeInstanceOf(HTMLTextAreaElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
});
});

it('should match input changable element', () => {
it('should match input changeable element', () => {
expect.assertions(1);
matchInputElement(createInputElement('checkbox'), {
checkbox: (target) => {
Expand All @@ -282,13 +282,13 @@ describe('@coldwired/utils', () => {
inputable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
});
});

it('should match select changable element', () => {
it('should match select changeable element', () => {
expect.assertions(1);
matchInputElement(document.createElement('select'), {
select: (target) => {
Expand All @@ -297,7 +297,7 @@ describe('@coldwired/utils', () => {
inputable: (target) => {
expect(target).toBeInstanceOf(HTMLInputElement);
},
changable: (target) => {
changeable: (target) => {
expect(target).toBeInstanceOf(HTMLSelectElement);
},
});
Expand Down

0 comments on commit 97d673b

Please sign in to comment.