babel-plugin-macros

Haha, I have spent my fair share of time procrastinating over what a type-safe JSX alternative would look like for React. The most ergonomic solution (well, atleast for me) has been their old factory API upon which I layered a set of convenience utilities [1]. I have been trying it out in a hobby project and I find the reduction of className boilerplate, elimination of closing tags etc. quite productive. And unlike alternatives like react-pug etc. I don't have to compromise with type checking of attributes. I'll probably release it as a library after doing some performance evaluation and if needed, wrapping it in a babel-macro [2] that eliminates the runtime overhead. -- [1] Example in CodeSandbox: https://codesandbox.io/s/pedantic-shape-lq9q9?file=/src/reac... Code in github gist: https://gist.github.com/lorefnon/53377e4d6a6b13adbcfa155f

I do agree that sticking to TSC keeps things a lot simpler, and that should be the default setup. Pandora's box has been opened though. Majority of the JS community seem to have adopted Babel in their workflow. Even as I question it, I must admit it's pretty sweet to have a transpiler in the buid toolchain. It frees one from the browser/backward compatibility question, more or less, and opens up the language to be extensible - for better or worse. For example, Babel macros ¹ is an interesting concept, using the language to extend the language during compile time. To bring it back to the topic at hand (PgTyped, Typesafe SQL) - one thing that I'd like to see in TSC is a way to output type definitions (either inlined metadata or external JSON schema), to be consumed for run-time type checking. That would "complete the circle" for me. TypeScr

I got interested in Reason last year after reading lorefnon's article [1] comparing Reason with TypeScript. Recently, after evaluating both for a large project we decided to prefer TypeScript primarily because TypeScript's support for intersection types, mapped types and conditional types is really awesome and make integration with javascript libraries a lot easier. As far as I could find, similar things can't be done in ReasonML at all (although I could be wrong on it). The tooling integration of TypeScript is also really awesome. Besides the usual refactoring, jump to definition support etc. a lot of effort has gone into small things that makes life easier. For example, if you have ctrl+click on a mapped type's property it will jump to the original type being mapped. In libraries like io-ts if you add doc comments on methods which are u

Yeah, this is something I had hoped for as well. Mobx-state-tree [1] also makes use of generators for asynchronous tasks and typescript's inability to infer types of values returned from a yield is a pain. But fortunately, atleast in this particular case the usage semantics are really close to async/await so I have had success using a babel macro [2][3] to transform async functions to generators which restores type-safety. This is of-course a hack but has proven to work fairly well in practice. [1] https://github.com/mobxjs/mobx-state-tree [2] https://github.com/kentcdodds/babel-plugin-macros [3] https://github.com/ts-delight/async-to-generator.macro

I've only recently learned about Babel Plugin Macros and haven't used it in production - but here are a few links in case anyone's interested. https://babeljs.io/blog/2017/09/11/zero-config-with-babel-ma... https://github.com/kentcdodds/babel-plugin-macros https://github.com/jgierer12/awesome-babel-macros These "macros" take a different approach than Sweet.js: they're not syntax extensions, but rather code transformers that you import and use explicitly.

The pitfall being that this approach only works with string arguments. Having some Ruby experience, I don't like any of the JavaScript DSLs using template strings for function invocation so far (like styled-components and graphql), and would rather just use macros: - Sweet.js: https://jlongster.com/Stop-Writing-JavaScript-Compilers--Mak... - Babel-plugin-macros: https://github.com/kentcdodds/babel-plugin-macros