[Bug?]: data attribute set to false || undefined becomes "false"

[zhengkyl]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Setting a data attribute to false || undefined will lead to "false" in the SSR output.

import { createSignal } from "solid-js";

export default function App() {
  const [falseSignal1] = createSignal(false)
  return (
    <main
      data-false={false || undefined} // "false"
      data-reverse={undefined || false} // "false"
      data-signal={falseSignal1() || undefined} // "false"
      bool:data-bool={false || undefined} // "false"
      
      data-undefined={undefined} // nothing
      data-string={"" || undefined} // nothing
      data-null={null || undefined} // nothing
    >
    why
    </main>
  );
}

Hardcoded false || undefined always seems to appear as "false", but it can be flaky sometimes, maybe HMR or client side navigation instead of SSR work properly.

I have tested in dev and after build, cleared .vinxi cache, tested in bare template and old codebase, updated dependencies to latest.

EDIT:
Something in dom-expressions is changing it to escape(false, true) || escape(undefined, true) which becomes "false" || undefined

Expected behavior 🤔

The data attribute should be removed.

Steps to reproduce 🕹

Steps:

1. Create new bare solidstart app (pnpm create solid)
2. Add data-test={false || undefined} to any element
3. Inspect element
4. See data-test="false"

Context 🔦

I am using data attributes to apply dynamic tailwind styles. By writing data-[something] to match existence instead of data-[something=true] I type less characters. Removing attribute by setting undefined is common practice, see kobalte code https://github.com/search?q=repo%3Akobaltedev%2Fkobalte%20%7C%7C%20undefined&type=code

Your environment 🌎

"dependencies": {
    "@solidjs/start": "^1.2.1",
    "solid-js": "^1.9.11",
    "vinxi": "^0.5.11"
  },

[zhengkyl]

This has to do with how dom-expressions handles attributes. Some stuff is escaped, some stuff isn't.
Boolean literals in attributes are always escaped into the string form, e.g data-test={false || undefined} becomes data-test={"false" || undefined}. I thought this was a reduced case, but actually different from my actual problem.

Not sure on exacts, but passing a signal through props ends up going through an escaped path.

I had code like this.

const [signal, setSignal] = createSignal(false)
return <Comp signal={signal()}/>

const Comp = (props) => <div data-test={props.signal || undefined}/>

Changed to this which fixes it.

const [signal, setSignal] = createSignal(false)
return <Comp signal={signal() || undefined}/>

const Comp = (props) => <div data-test={props.signal}/>

Although this is weird, I don't understand what escaping attributes is accomplishing enough to say if this should even be considered a bug.

[lxsmnsyc]

This might be an SSR bug.

data-test={false || undefined} outputs setAttribute(el, 'data-test', false || undefined) which actually removes the attribute by implementation. https://github.com/ryansolid/dom-expressions/blob/bf18bbaee93cd986fbac54a5a841c341ac58af98/packages/dom-expressions/src/client.js#L113-L117

However, notice the isHydrating check which skips this process.

If we check the compilation output of the same attribute in SSR, we actually see escape(false, true) || escape(undefined, true), which outputs "false" || undefined, which leads to this issue.

I'm moving this issue to dom-expressions