WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(forms): preserve regex quantifiers and use inline constraint errors

Browse Source
This commit is contained in:
Clintchiz committed 2026-08-26 17:13:07 +05:30
1 parent 1dd60ded0d
commit fe40cc56df
13 files changed
+132 -26
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

bun.lock
+2 -2
View File
@@ -320,7 +320,7 @@
},
"packages/compiler": {
"name": "@wrnexus/compiler",
"version": "0.8.26",
"version": "0.8.27",
"dependencies": {
"@wrnexus/csr": "workspace:*",
"@wrnexus/store": "workspace:*",
@@ -688,7 +688,7 @@
},
"packages/ui": {
"name": "@wrnexus/ui",
"version": "0.8.57",
"version": "0.8.58",
"dependencies": {
"@wrnexus/core": "workspace:*",
},
packages/compiler/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/compiler",
"version": "0.8.26",
"version": "0.8.27",
"type": "module",
"main": "src/index.ts",
"exports": {
packages/compiler/src/codegen.ts
+6 -4
View File
@@ -912,7 +912,7 @@ function renderNestedComponentInvocation(
const compiledValue = wholeExpression
? `\${__wrnProp(${ctx.resolveExpr(wholeExpression)})}`
: compileAttrValue(attr.value, ctx);
: compileAttrValue(attr.value, ctx, attr.name === "pattern");
const rendered = ` ${attr.name}="${compiledValue}"`;
@@ -2254,7 +2254,7 @@ function compileText(raw: string, ctx: CompCtx): string {
}
/** Compile an attribute value; `{expr}` is baked server-side (loop vars stay literal). */
function compileAttrValue(raw: string, ctx: CompCtx): string {
function compileAttrValue(raw: string, ctx: CompCtx, regexPattern = false): string {
if (!raw.includes("{")) return escLit(attrEscape(raw));
let out = "";
let last = 0;
@@ -2263,7 +2263,9 @@ function compileAttrValue(raw: string, ctx: CompCtx): string {
while ((m = INTERP_RE.exec(raw))) {
out += escLit(attrEscape(raw.slice(last, m.index)));
const expr = m[1]!.trim();
if (ctx.loopVars && exprRefsState(expr, ctx.loopVars)) {
if (regexPattern && /^\d+(?:,\d*)?$/.test(expr)) {
out += escLit(attrEscape(m[0])); // Regex quantifiers are not template expressions.
} else if (ctx.loopVars && exprRefsState(expr, ctx.loopVars)) {
out += escLit(`{${expr}}`); // hydrated per-item by the list renderer
} else {
out += `\${__wrnAttr(${ctx.resolveExpr(expr)})}`;
@@ -2628,7 +2630,7 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string {
const compiledValue =
isExplicitComponentMount && wholeExpression
? `\${__wrnProp(${elementContext.resolveExpr(wholeExpression)})}`
: compileAttrValue(a.value, elementContext);
: compileAttrValue(a.value, elementContext, a.name === "pattern");
/*
* A constraint attribute whose value is only known at render time (a
packages/compiler/test/pattern-quantifiers.test.ts
+22
View File
@@ -0,0 +1,22 @@
import { test, expect } from "bun:test";
import { parse, generate } from "../src/index.ts";
test("HTML and component pattern attributes preserve regex quantifiers", () => {
for (const tag of ["input", "Input"]) {
for (const pattern of ["[0-9]{6}", "[a-z]{2,8}", "[A-Z]{1,}"]) {
const code = generate(parse(`page Example { view { <${tag} pattern="${pattern}" /> } }`));
expect(code).toContain(pattern);
expect(code).not.toContain("__wrnAttr(6)");
expect(code).not.toContain("__wrnAttr(2,8)");
}
}
});
test("dynamic pattern props still compile as expressions", () => {
const code = generate(
parse(
'component Example { props { pattern: string = "" } view { <input pattern="{pattern}" /> } }',
),
);
expect(code).toContain("__wrnAttr(pattern)");
});
packages/ui/COMPONENTS.md
+1 -1
View File
@@ -413,7 +413,7 @@ Theme-aware, responsive file input component.
Theme-aware, responsive input component.
- Mount: `data-component="Input"`
- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Input"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = ""`, `type: string = "text"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `autocomplete: string = ""`, `inputmode: string = ""`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = ""`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `class: string = ""`
- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Input"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = ""`, `type: string = "text"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `invalidMessage: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `autocomplete: string = ""`, `inputmode: string = ""`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = ""`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `class: string = ""`
- Slots: None
- Outputs: `input({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `change({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `focus({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `blur({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `invalid({ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event })`, `keydown({ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event })`, `keyup({ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event })`
packages/ui/component-reference.json
+7
View File
@@ -7065,6 +7065,13 @@
"default": "\"\"",
"options": []
},
{
"name": "invalidMessage",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "inline",
"type": "boolean",
packages/ui/components/StrongPassword.wrn
+13 -4
View File
@@ -41,7 +41,16 @@ component StrongPassword {
state detailsOpen: boolean = false
state revealed: boolean = false
state nativeError: string = ""
functions {
client function handleInvalid(sourceEvent) {
sourceEvent.preventDefault()
sourceEvent.stopPropagation()
nativeError = validationMessage || (sourceEvent.currentTarget.validity.valueMissing ? "Enter your password." : "Enter a password that meets the requirements.")
sourceEvent.currentTarget.setAttribute("aria-invalid", "true")
}
shared function hasMinimumLength() {
return password.length >= Number(minLength)
}
@@ -146,11 +155,11 @@ component StrongPassword {
disabled="{disabled}"
readonly="{readonly}"
required="{required}"
aria-invalid="{invalid ? 'true' : 'false'}"
aria-describedby="{validationMessage ? name + '-validation' : hintText ? name + '-hint' : ''}"
aria-invalid="{invalid || nativeError ? 'true' : 'false'}"
aria-describedby="{(validationMessage || nativeError) ? name + '-validation' : hintText ? name + '-hint' : ''}"
@focus="detailsOpen = true"
@blur="detailsOpen = false"
@input="password = event.target.value; output.input({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() }); output.strength({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
@invalid="handleInvalid(event)" @input="nativeError = ''; password = event.target.value; output.input({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() }); output.strength({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
@change="output.change({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
/>
<button
@@ -231,7 +240,7 @@ component StrongPassword {
</div>
{/if}
<small id="{name}-validation" class="wrn-next__validation" data-error="{name}">{validationMessage}</small>
<small id="{name}-validation" class="wrn-next__validation" data-error="{name}">{(validationMessage || nativeError)}</small>
</div>
}
packages/ui/components/TogglePassword.wrn
+16 -7
View File
@@ -36,7 +36,16 @@ component TogglePassword {
state revealed = visible
state nativeError: string = ""
functions {
client function handleInvalid(sourceEvent) {
sourceEvent.preventDefault()
sourceEvent.stopPropagation()
nativeError = validationMessage || (sourceEvent.currentTarget.validity.valueMissing ? "Enter your password." : "Enter a password that meets the requirements.")
sourceEvent.currentTarget.setAttribute("aria-invalid", "true")
}
shared function toggleVisibility() {
if (disabled || readonly || !toggleable) {
return
@@ -78,8 +87,8 @@ component TogglePassword {
disabled="{disabled || field.disabled}"
readonly="{readonly || field.readonly}"
required="{required || field.required}"
aria-invalid="{invalid ? 'true' : 'false'}"
@input="output.input({ name: event.target.name, value: event.target.value, visible: revealed })"
aria-invalid="{invalid || nativeError ? 'true' : 'false'}"
@invalid="handleInvalid(event)" @input="nativeError = ''; output.input({ name: event.target.name, value: event.target.value, visible: revealed })"
@change="output.change({ name: event.target.name, value: event.target.value, visible: revealed })"
/>
{#if toggleable && toggleMode === "button"}
@@ -122,9 +131,9 @@ component TogglePassword {
disabled="{disabled}"
readonly="{readonly}"
required="{required}"
aria-invalid="{invalid ? 'true' : 'false'}"
aria-describedby="{validationMessage ? name + '-validation' : helpText ? name + '-help' : ''}"
@input="output.input({ value: event.target.value, visible: revealed })"
aria-invalid="{invalid || nativeError ? 'true' : 'false'}"
aria-describedby="{(validationMessage || nativeError) ? name + '-validation' : helpText ? name + '-help' : ''}"
@invalid="handleInvalid(event)" @input="nativeError = ''; output.input({ value: event.target.value, visible: revealed })"
@change="output.change({ value: event.target.value, visible: revealed })"
/>
{#if toggleable && toggleMode === "button"}
@@ -153,12 +162,12 @@ component TogglePassword {
<span>{checkboxLabel}</span>
</label>
{/if}
{#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
{#if helpText && !(validationMessage || nativeError)}<small id="{name}-help">{helpText}</small>{/if}
<small
id="{name}-validation"
class="wrn-next__validation"
data-error="{name}"
>{validationMessage}</small>
>{(validationMessage || nativeError)}</small>
</fieldset>
}
packages/ui/components/input.wrn
+11 -1
View File
@@ -25,6 +25,7 @@ component Input {
helperText: string = ""
cornerHint: string = ""
error: string = ""
invalidMessage: string = ""
inline: boolean = false
readonly: boolean = false
disabled: boolean = false
@@ -56,7 +57,16 @@ component Input {
client function handleChange(sourceEvent) { sourceEvent.stopPropagation(); output.change(detail(sourceEvent)) }
client function handleFocus(sourceEvent) { sourceEvent.stopPropagation(); output.focus(detail(sourceEvent)) }
client function handleBlur(sourceEvent) { sourceEvent.stopPropagation(); output.blur(detail(sourceEvent)) }
client function handleInvalid(sourceEvent) { sourceEvent.stopPropagation(); validationError = sourceEvent.currentTarget.validationMessage; sourceEvent.currentTarget.setAttribute("aria-invalid", "true"); sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", "true"); output.invalid({ value: sourceEvent.currentTarget.value, name: name, message: validationError, sourceEvent: sourceEvent }) }
client function handleInvalid(sourceEvent) {
sourceEvent.preventDefault()
sourceEvent.stopPropagation()
const field = sourceEvent.currentTarget
const validity = field.validity
validationError = error || invalidMessage || (validity.valueMissing ? "This field is required." : validity.typeMismatch ? "Enter a valid " + (type === "email" ? "email address." : "value.") : validity.tooShort ? "Enter at least " + minlength + " characters." : validity.tooLong ? "Enter no more than " + maxlength + " characters." : validity.patternMismatch ? "Enter a value in the required format." : validity.rangeUnderflow ? "Enter a value of at least " + min + "." : validity.rangeOverflow ? "Enter a value no greater than " + max + "." : "Enter a valid value.")
field.setAttribute("aria-invalid", "true")
field.closest(".wrn-next--field").setAttribute("data-invalid", "true")
output.invalid({ value: field.value, name: name, message: validationError, sourceEvent: sourceEvent })
}
client function handleKeydown(sourceEvent) { sourceEvent.stopPropagation(); output.keydown({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
client function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); output.keyup({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
}
packages/ui/components/select.wrn
+1 -1
View File
@@ -46,7 +46,7 @@ size: string = "default"
}
client function handleFocus(sourceEvent) { emitField("focus", sourceEvent); output.open({ name: name, sourceEvent: sourceEvent }) }
client function handleBlur(sourceEvent) { emitField("blur", sourceEvent); output.close({ name: name, sourceEvent: sourceEvent }) }
client function handleInvalid(sourceEvent) { validationError = sourceEvent.currentTarget.validationMessage; sourceEvent.currentTarget.setAttribute("aria-invalid", "true"); sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", "true"); output.invalid({ name: name, message: validationError, sourceEvent: sourceEvent }) }
client function handleInvalid(sourceEvent) { sourceEvent.preventDefault(); sourceEvent.stopPropagation(); validationError = error || "Choose an option."; sourceEvent.currentTarget.setAttribute("aria-invalid", "true"); sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", "true"); output.invalid({ name: name, message: validationError, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--select {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error || validationError ? 'true' : 'false'}" data-readonly="{readonly}">
packages/ui/components/textarea.wrn
+3 -1
View File
@@ -40,7 +40,9 @@ size: string = "default"
output[nameEvent]({ value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
}
client function handleInvalid(sourceEvent) {
validationError = sourceEvent.currentTarget.validationMessage
sourceEvent.preventDefault()
sourceEvent.stopPropagation()
validationError = error || (sourceEvent.currentTarget.validity.valueMissing ? "This field is required." : "Enter text within the allowed length.")
sourceEvent.currentTarget.setAttribute("aria-invalid", "true")
sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", "true")
output.invalid({ value: sourceEvent.currentTarget.value, name: name, message: validationError, sourceEvent: sourceEvent })
packages/ui/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/ui",
"version": "0.8.57",
"version": "0.8.58",
"private": true,
"type": "module",
"main": "src/index.ts",
packages/ui/test/ui.test.ts
+48 -3
View File
@@ -1344,7 +1344,7 @@ test("basic form fields expose shared labels, variants, states, hints, values, a
expect(emitted).toEqual(["input", "change", "focus", "blur", "keydown", "keyup"]);
});
test("basic fields render native constraint messages and select matches field surfaces", async () => {
test("basic fields suppress native popups and render package constraint messages", async () => {
const inputSource = readFileSync(uiComponentPath("Input"), "utf8");
const dom = mountHtml(
await renderComponent(inputSource, {
@@ -1355,9 +1355,14 @@ test("basic fields render native constraint messages and select matches field su
}),
);
const input = dom.querySelector("input") as HTMLInputElement;
input.dispatchEvent(new (dom.window as any).Event("invalid", { bubbles: false }));
const invalidEvent = new (dom.window as any).Event("invalid", {
bubbles: false,
cancelable: true,
});
input.dispatchEvent(invalidEvent);
expect(invalidEvent.defaultPrevented).toBe(true);
expect(dom.querySelector("[data-error='name']")?.textContent?.trim()).toBe(
input.validationMessage,
"This field is required.",
);
expect(dom.querySelector(".wrn-next--input")?.getAttribute("data-invalid")).toBe("true");
@@ -1367,6 +1372,46 @@ test("basic fields render native constraint messages and select matches field su
expect(selectSource).toContain("wrn-next__select-indicator");
});
test("OTP inputs accept six digits and show custom inline errors without native popups", async () => {
const source = readFileSync(uiComponentPath("Input"), "utf8");
const dom = mountHtml(
await renderComponent(source, {
name: "code",
pattern: "[0-9]{6}",
required: true,
invalidMessage: "Enter the six-digit verification code.",
}),
);
const input = dom.querySelector("input") as HTMLInputElement;
input.value = "737651";
expect(input.checkValidity()).toBe(true);
input.value = "123";
const event = new (dom.window as any).Event("invalid", { cancelable: true });
input.dispatchEvent(event);
expect(event.defaultPrevented).toBe(true);
expect(dom.querySelector("[data-error='code']")?.textContent).toContain(
"Enter the six-digit verification code.",
);
});
test("password fields cancel native invalid popups and show inline errors", async () => {
for (const component of ["TogglePassword", "StrongPassword"]) {
const dom = mountHtml(
await renderComponent(readFileSync(uiComponentPath(component), "utf8"), {
name: "password",
required: true,
}),
);
const input = dom.querySelector("input") as HTMLInputElement;
const event = new (dom.window as any).Event("invalid", { cancelable: true });
input.dispatchEvent(event);
expect(event.defaultPrevented).toBe(true);
expect(dom.querySelector("[data-error='password']")?.textContent).toContain(
"Enter your password.",
);
}
});
test("all basic form components render values and their must-have interaction events", async () => {
const components = [
"Checkbox",