go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(direction): el atributo `dir` se estampaba VACIO cuando nadie lo afirmaba

Browse Source 
El contrato de `013ceac57` dice que `dir` se OMITE cuando nadie ha afirmado una
direccion. `6.5` habia visto `dir=""` en sidebar y tree-view sin averiguar de
donde salia. Es el shorthand `{dir}`: para `dir` Svelte emite una asignacion de
PROPIEDAD ademas del atributo, y con `undefined` el resultado es la cadena
vacia en vez de la omision. Atrapado con un trap sobre `setAttribute` + el
descriptor de la propiedad: dos escrituras, la segunda por propiedad.

No estaba en el SSR (`dir=""` no aparece ni una vez en el HTML servido) — lo
escribia el cliente al hidratar.

Un valor invalido HEREDA, asi que nada pintaba mal; pero contradice la letra
del contrato y hace que `[dir]` matchee.

Arreglado con spread condicional, que si omite:

    {dir}  ->  {...dir ? { dir } : {}}

- `tree-view` (eidos): el wrapper LO NECESITA cuando el valor es concreto — el
  recipe selecciona con `[data-tree-view-root]:dir(rtl)` y ese div es el
  ANCESTRO del provider que estampa el attr. Con el valor ausente hereda, que
  es lo correcto.
- 26 demos: el arnes estandar (`data-uix-stage-area` / `data-uix-canvas-inner`).

Verificado: en `auto` solo quedan `<html>` (la proyeccion de prefs) y el
provider con su valor resuelto — cero `dir=""`; en `rtl` los tres elementos lo
reciben concreto; al volver a `auto` desaparece limpiamente. Las 26 rutas
sirven 200 y ninguna trae `dir=""`.

METODO: mi primer regex tambien matcheaba dentro de `dir={dir}` y dejo
`dir={...}` — dos ficheros con parse error que `check` cazo (76 vs 74). Contar
ficheros modificados NO basta; hay que mirar el diff.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
alpha-0.1-dir-prefs
dev 2 months ago
parent 3bfe2c6527
commit b906dd4077
27 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File

9
src/uix/eidos/components/tree-view/tree-view.svelte
Unescape View File

@ -63,6 +63,13 @@
});
</script>
<!-- The recipe selects with `[data-tree-view-root]:dir(rtl)` and this div is the
ANCESTOR of the provider that stamps the attr, so it needs its own `dir`
whenever the consumer asserted one. Spread, NOT `{dir}`: for `dir` Svelte
emits a property assignment alongside the attribute, and an `undefined`
value lands as `dir=""` instead of being omitted. Empty inherits, so
nothing painted wrong — but it contradicts the contract, which is that the
attribute is ABSENT when nobody asserted a direction. -->
<div
data-tree-view-root=""
data-size={resolvedSize}
@ -72,7 +79,7 @@
data-block={block ? '' : undefined}
data-indent-guides={showIndentGuides ? '' : undefined}
data-scrollable={maxHeight ? '' : undefined}
{dir}
{...dir ? { dir } : {}}
style={composedStyle}
>
<TreeView.Provider {...rest} {dir} bind:expandedValue bind:selectedValue>

2
web/routes/uix/components/anchor-nav/+page.svelte
Unescape View File

@ -93,7 +93,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
>
<div style="display: flex; gap: var(--space-6); align-items: start;">

2
web/routes/uix/components/aura/+page.svelte
Unescape View File

@ -225,7 +225,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={`--scaling: ${scaling}; --border-width: ${borderWidth}px;`}
>
<!-- Studio overrides the three orb-size tokens: a shader cannot be

2
web/routes/uix/components/barcode/+page.svelte
Unescape View File

@ -180,7 +180,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<div style="display: flex; align-items: center; gap: var(--uix-space-4); flex-wrap: wrap;">

2
web/routes/uix/components/button/+page.svelte
Unescape View File

@ -157,7 +157,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
dir={dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
{#snippet glyph()}

2
web/routes/uix/components/callout/+page.svelte
Unescape View File

@ -111,7 +111,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
>
<Callout {intent} {color} style="inline-size: min(100%, 44rem); margin-inline: auto;">

2
web/routes/uix/components/chat-composer/+page.svelte
Unescape View File

@ -140,7 +140,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<div style="inline-size: min(34rem, 100%);">

2
web/routes/uix/components/chat-list/+page.svelte
Unescape View File

@ -121,7 +121,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<div

2
web/routes/uix/components/chat-log/+page.svelte
Unescape View File

@ -195,7 +195,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<div style="inline-size: min(38rem, 100%); block-size: 24rem; border: var(--border-width) solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden;">

2
web/routes/uix/components/chat-message/+page.svelte
Unescape View File

@ -197,7 +197,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<div style="inline-size: min(34rem, 100%);">

2
web/routes/uix/components/chat-typing/+page.svelte
Unescape View File

@ -105,7 +105,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<div

2
web/routes/uix/components/emoji-picker/+page.svelte
Unescape View File

@ -91,7 +91,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<div style="display: flex; align-items: center; gap: var(--space-3);">

2
web/routes/uix/components/empty-state/+page.svelte
Unescape View File

@ -175,7 +175,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={`--scaling: ${scaling}; --border-width: ${borderWidth}px;`}
>
{#if inCollection}

2
web/routes/uix/components/feed/+page.svelte
Unescape View File

@ -139,7 +139,7 @@
);
</script>
<div data-uix-canvas-inner {dir}>
<div data-uix-canvas-inner {...dir ? { dir } : {}}>
<header>
<div data-uix-eyebrow>Data · Feed</div>
<h1 data-uix-page-title>Feed</h1>

2
web/routes/uix/components/gradient-builder/+page.svelte
Unescape View File

@ -170,7 +170,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<div style="inline-size: min(22rem, 100%);">

2
web/routes/uix/components/gradient-picker/+page.svelte
Unescape View File

@ -178,7 +178,7 @@
data-density={density}
data-theme={stageMode === 'inherit' ? undefined : stageMode}
data-mode={stageMode === 'inherit' ? undefined : stageMode}
dir={dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<GradientPicker bind:value bind:open {size} {variant} {mode} {deferValue} {disabled} {presets} {maxPresets}>

2
web/routes/uix/components/media-player/+page.svelte
Unescape View File

@ -168,7 +168,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<div style="width: min(100%, 720px); margin-inline: auto;">

2
web/routes/uix/components/natural-time-picker/+page.svelte
Unescape View File

@ -137,7 +137,7 @@
data-density={density}
data-theme={sysMode === 'inherit' ? undefined : sysMode}
data-mode={sysMode === 'inherit' ? undefined : sysMode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<div style="display: flex; flex-wrap: wrap; gap: var(--uix-space-8); align-items: flex-start; justify-content: center; padding: var(--uix-space-4);">

2
web/routes/uix/components/nav-tree/+page.svelte
Unescape View File

@ -308,7 +308,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
>
<div style="display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: start;">

2
web/routes/uix/components/proof-of-human/+page.svelte
Unescape View File

@ -319,7 +319,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={stageStyle}
>
<ProofOfHuman

2
web/routes/uix/components/prose/+page.svelte
Unescape View File

@ -140,7 +140,7 @@ for (const el of document) style(el);</code></pre>
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
>
<div style="max-block-size: 460px; overflow-y: auto; padding: var(--space-4);">

2
web/routes/uix/components/result/+page.svelte
Unescape View File

@ -146,7 +146,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={`--scaling: ${scaling}; --border-width: ${borderWidth}px;`}
>
<Result {status}>

2
web/routes/uix/components/sidebar/+page.svelte
Unescape View File

@ -126,7 +126,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
>
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->

2
web/routes/uix/components/sticky/+page.svelte
Unescape View File

@ -132,7 +132,7 @@
data-density={density}
data-theme={mode === 'inherit' ? undefined : mode}
data-mode={mode === 'inherit' ? undefined : mode}
{dir}
{...dir ? { dir } : {}}
style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
>
<div

2
web/routes/uix/components/table/+page.svelte
Unescape View File

@ -256,7 +256,7 @@
}
</script>
<div data-uix-canvas-inner {dir}>
<div data-uix-canvas-inner {...dir ? { dir } : {}}>
<header>
<div data-uix-eyebrow>Data · Table</div>
<h1 data-uix-page-title>Table</h1>

2
web/routes/uix/components/tree-grid/+page.svelte
Unescape View File

@ -230,7 +230,7 @@
{/if}
{/snippet}
<div data-uix-canvas-inner {dir}>
<div data-uix-canvas-inner {...dir ? { dir } : {}}>
<header>
<div data-uix-eyebrow>Data · TreeGrid</div>
<h1 data-uix-page-title>TreeGrid</h1>

2
web/routes/uix/components/tree-view/+page.svelte
Unescape View File

@ -196,7 +196,7 @@
{/if}
{/snippet}
<div data-uix-canvas-inner {dir}>
<div data-uix-canvas-inner {...dir ? { dir } : {}}>
<header>
<div data-uix-eyebrow>Data · TreeView</div>
<h1 data-uix-page-title>TreeView</h1>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.