tsconfig "reactNamespace" setting

[tannerntannern]

Have you considered taking advantage of TypeScript's reactNamespace setting? If you add the following to your tsconfig,

"jsx": "react",
"reactNamespace": "Crank",

you can skip the /* @jsx createElement */ comments and instead do

import * as Crank from '@bikeshaving/crank';

If crank had an export default, you could write it even shorter, just as conveniently as React:

import Crank from '@bikeshaving/crank';

I think this should at least be mentioned in the TS docs. It reduces boilerplate (especially if you have lots of .tsx files) and might make React devs feel more at home. 🙂

Just giving you some food for thought. I love the idea behind this library!

[brainkim]

Hmmm as I look at the docs it looks like --reactNamespace has been deprecated in favor of --jsxFactory according to the docs.

If you use --jsxFactory, it’s true that you don’t need to add the JSX directive. I usually throw it in there anyways however because you never know what development tool relies on there being a directive. Also, it’s two stars at the beginning (/** @jsx Crank.createElement */) not one (/* @jsx Crank.createElement */), this little detail has broken linters and stuff for me in the past.

TypeScript support for JSX libraries that aren’t React is still somewhat lacking. For instance, we use symbols to represent special elements like Fragment and Portal, but TypeScript doesn’t support them yet. And the special <>Hello</> JSX syntax is also not supported for libraries that aren’t React.

In any case, I think the config settings are for users, and it doesn’t really matter what configuration flags the crank repository has set in TSConfig, though I may be wrong.

Re: why not a default module.. Maybe, but that would mean having to reexport every export in the Crank module a second time. I’m personally not a fan of default exports, but if you can come up with a compelling reason why import * as Crank from "@bikeshaving/crank"; is less than optimal I am all ears!

Thanks for checking out Crank!

[tannerntannern]

Thanks for the detailed response. To your last point, having a default export would allow you to do this as well:

import Crank, { Context } from '@bikeshaving/crank';

With the import * as Crank method, you'd be forced to write two separate lines:

import * as Crank from '@bikeshaving/crank';
import { Context } from '@bikeshaving/crank';

Also

Maybe, but that would mean having to reexport every export in the Crank module a second time.

you shouldn't have to. I made myself a little wrapper module to achieve this import effect I'm after, which I think could translate to your code fairly easily.

// crank.ts wrapper module
export * from '@bikeshaving/crank';
import * as Crank from '@bikeshaving/crank';
export default Crank;

then in a component file...

// some-component.tsx
import Crank, { Context } from './crank';

Of course, it would be nice to not need this wrapper. 🙂

[brainkim]

With the import * as Crank method, you'd be forced to write two separate lines

I’m sympathetic to this problem; I wish you could do stuff like import * as Crank, {createElement} from "@bikeshaving/crank". Unfortunately, I’m still hesitant to export everything as a default export, especially given the subtle differences between defaults between CommonJS and ESModule environments. Ultimately, I don’t think a single extra line merits using default exports. Sorry!