prepack VS jsx

Hello HN,

I'm considering the development of a new programming language, drawing inspiration from Rust's strengths, with a focus on compiling to JavaScript. Here what I'm considering are some key features:

Strict Type System

Algebraic Data Types

*Unsafe Mode for JS/TS Interaction*: Facilitate direct interaction with existing JavaScript and TypeScript code.

No Null Usage: Option/Result patterns to avoid null.

Trait Implementation

Backend Development Priority: Initially targeting server-side applications.

Efficient Compiler Design: Including features like dead-code elimination and partial evaluation, similar to the approach of Prepack[0] (by Facebook).

I believe this approach could bring significant benefits, especially with recent advancements like Uint8Array and worker threads.

Would this be of interest to the community? Looking forward to your insights and discussion.

[0] https://github.com/facebookarchive/prepack

You can still do optimisations based purely on Javascript semantics. This is similar to the first example you give with dead function elimination, and many minifiers do some amount of this already, but you can take it to some extremes. One example of this is the (no longer maintained) Prepack project from Facebook. The core idea is to evaluate as much Javascript as possible at compile time, with the expectation that the result will probably be smaller (albeit less human readable) than the initial code.

It's no longer maintained, but I think prepack is roughly what you're looking for.

i've had code where it intentionally relied on the wrong behavior (missing hook dependencies) and when I fixed it it caused an unintentional bug (hook fired too often or sometimes infinite rerendering). Yes it is more of a bug in the code rather than React hooks issue but it is also really hard to fix/rewrite. while i'd love to jump on the hype train projects like https://github.com/facebookarchive/prepack and how concurrent mode is still experimental after five+ years doesn't give me a lot of confidence.

Some real examples in JavaScript can be seen on Prepack[2]. Consequently it is natural to wonder whether we can AOT compile components of client side frameworks, to achieve a reduction in the final bundle size, but also to increase application execution speed.

Less or more it’s likely to happen, and could have been expected 2-3 years ago.

Especially with https://github.com/facebook/prepack. They want to eventually ship pre-compiled components rather than React.createElement() to end user

https://github.com/facebook/react/issues/7324

I also think this is why facebook had been investing in `prepack` - https://github.com/facebook/prepack

Svelte syntax? Yes, there is upcoming initiative JSX 2.0 which includes shorthands like that. However, have no idea whether it will be released any time soon. So let's say "this is part of React/JSX 1.0" (shrugging)

Inherent support for JSX in the language itself

JavaScript ＋ HTML（DOM）＝　JSX

FWIW, the className prop is a React thing not a JSX thing. Other libraries which use JSX will happily accept a plain class prop. The React limitation is abstraction leakage: props are not attributes, they map to DOM properties.

But to the point that JSX is a DSL, that limitation is specifically because React itself is very tightly coupled to DOM semantics… but JSX explicitly has no built in semantics[1].

1: First sentence of https://facebook.github.io/jsx/ - “JSX is an XML-like syntax extension to ECMAScript without any defined semantics.”

JSX stands for 'JavaScript XML' and is a syntax extension for JavaScript. It is used to create DOM elements that are then rendered in the React DOM. Although it looks like HTML, it is actually an XML-like syntax specifically written for use in React. Interestingly, JSX is not valid JavaScript either. JSX needs to be compiled by a tool like Babel to be translated into regular JavaScript that a browser can understand. Put simply, JSX describes what the UI should look like, and React takes care of properly rendering it.

Alternatively, you can use JSX syntax (like with React), but then you need build-tools.

Note: For React component files (JSX) we'll use .tsx to maintain JSX support and for non React files we'll use the .ts file extension. However, if you want you could still use .ts file extension for React components without any problem.

I’m concerned that you’re falling into the same trap here with integrating your own variant of JSX, and mulling over adding more things like hyphens in unquoted object literal keys.

JSX is popular enough that it’s safe, ECMAScript isn’t going to break it, but your alterations to JSX are already significantly incompatible: you have being equivalent to JSX("input", {"class": "search"}, null), but the JSX everyone else is using has that equivalent to JSX(input.search, {}, null). I’m not certain if your JSX syntax is supposed to be able to be used with React code or anything else that uses JSX syntax, but if yes then it’ll be broken in a significant number of cases so that it’s worse than useless, and if no, well, it’s going to be misleading, and what if JSX did get merged into ECMAScript in some form? Then you’d be incompatible with ECMAScript again.

Same deal with hyphens in unquoted object literal keys: it’s not part of ECMAScript now, but just because it’d be a syntax error now doesn’t mean it always will be. Decorators in TypeScript are a good example of things going badly wrong even when an extremely popular project is involved.

I say: if you want to go JavaScript, go JavaScript, maaaaaybe plus standard JSX conforming with <https://facebook.github.io/jsx/>, and no further. Even if what you do is obviously superior, &c. &c. I’d apply the same reasoning on your fork of CSS: you introduced it for a good reason back then, but now it’s just friction, even if it’s a little better in a vacuum (and maybe it is in parts, maybe it isn’t in other parts).

Then it might be time for a pull request which identifies these parts as JSX.