Is support for TS namespaces possible?

[zaydek]

I love using TS namespaces to create conceptual boundaries so it's easier to reason about what different chunks of my code do. Like a Button namespace so I can aggregate relevant variables and components for buttons. One thing I've noticed is that StyleX is incompatible with TS namespaces so I can't do something like namespace Foo { const styles = stylex.create({ ... }); }.

I believe what's going on is that TS namespaces are syntax sugar for objects and therefore it may be impossible to add support for this. That being said, is there a way for me to colocate styles behind something like a namespace so I can do something like the following in the future?

namespace A {
  const styles = stylex.create({
    foo: { ... },
    bar: { ... },
  });
  
  export function Foo() { return <div {...stylex.props(styles.foo)} /> }
  export function Bar() { return <div {...stylex.props(styles.bar)} /> }
}

namespace B {
  const styles = stylex.create({
    foo: { ... },
    bar: { ... },
  });
  
  export function Foo() { return <div {...stylex.props(styles.foo)} /> }
  export function Bar() { return <div {...stylex.props(styles.bar)} /> }
}

...

<A.Foo />
<B.Foo />

I know I can simply create boundary lines using files but I find namespaces allow me to do the job of several files in one file, but when it comes to StyleX APIs, it breaks this convention and I need to prefix styles, which is OK but slightly annoying.

Any ideas or recommendations?

Here is an example of some code where I'd love to have the ability to nest the styles under the namespace instead of prefixing the styles name:

[nmn]

Yes, this should be possible to do and I don't see any concern with doing so.

The current constraint to ensure stylex.create calls are at the root of a module is primarily to disallow using stylex.create within function calls. We do this to ensure that the compiled output is a static object with strict equality.

The compiler could even support usage within functions and automatically hoist the object out to the root of the module.

All of that said, this will be hard to prioritize for us as we don't use Typescript namespaces (or typescript at all) in our codebases at Meta. Hopefully, this can be a contribution opportunity that someone can pick up.

[zaydek]

Thanks for creating #829 linking here in case people come across this.