sucrase
emotion
sucrase | emotion | |
---|---|---|
26 | 52 | |
5,587 | 17,186 | |
- | 0.3% | |
6.1 | 5.8 | |
2 months ago | 10 days ago | |
TypeScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
sucrase
-
Show HN: JSX in Browser with Sucrase
Thanks. As for the code compilation, that can be tested and seen in https://sucrase.io/
The demo page is only to show how we can transpile JSX in browsers.
-
Created a simple online JavaScript Playground, it's a place for you to try out your code and ideas.
Thanks u/OutlandishnessKey953, the playground built with React, Docusaurus(https://docusaurus.io/), CodeMirror(https://codemirror.net/), Sucrase(https://sucrase.io/), etc.
-
The TypeScript compiler is now implemented internally with modules
Hi, Sucrase author here.
To be clear, the benchmark in the README does not allow JIT warm-up. The Sucrase numbers would be better if it did. From testing just now (add `warmUp: true` to `benchmarkJest`), Sucrase is a little over 3x faster than swc if you allow warm-up, but it seemed unfair to disregard warm-up for the comparison in the README.
It's certainly fair to debate whether 360k lines of code is a realistic codebase size for the benchmark; the higher-scale the test case, the better Sucrase looks.
> worse it disables esbuild and swc's multi-threading
At some point I'm hoping to update the README benchmark to run all tools in parallel, which should be more convincing despite the added variability: https://github.com/alangpierce/sucrase/issues/730 . In an ideal environment, the results are pretty much the same as a per-core benchmark, but I do expect that Node's parallelism overhead and the JIT warm-up cost across many cores would make Sucrase less competitive than the current numbers.
-
Should i switch to Typescript?
First, npm i -D sucrase to install sucrase. Now you can do node -r sucrase/register ./index.ts to run TypeScript code directly with Node.
-
🚀 Building your own Javascript Library with bare minimum
As you might know there are a lot of Javascript bundlers out there, such as webpack, sucrase, parcel, rollup and etc. Bear in mind, not because they have thousands of stars on Github that means they're the best. sometimes new libs are as good as the popular ones but they're still building up their image/popularity in the community. what I bring today is a not sooooo, popular JS bundler called esbuild.
-
Five coding interview questions I hate
Sucrase JS was 2x the speed of esBuild and 50% faster than SWC last I checked.
-
I’m Porting the TypeScript Type Checker Tsc to Go
Webpack does way more than esbuild, including running a typechecking compiler instead of just transpiling, running compilers able to downlevel emit to ES5 and providing a deep plugin architecture allowing you to hook into any bit you like. But yes, it hasn't been designed with speed in mind - it has been designed with maximum extensibility instead. Its the same reason why Babel is slow compared to sucrase (written in JS, currently faster than SWC and esbuild but doing somewhat less - https://github.com/alangpierce/sucrase)
tsc has in fact been designed with speed in mind (I've been following the project since before it ended up on GitHub). Going beyond 1 order of magnitude performance improvement is highly unlikely.
- Sucrase: A fast, pure-JavaScript transpiler for JavaScript/TypeScript
- GitHub - alangpierce/sucrase: Super-fast alternative to Babel for when you can target modern JS runtimes
- Sucrase: A fast JavaScript/TypeScript transpiler written in JavaScript
emotion
-
Creating Nx Workspace with Eslint, Prettier and Husky Configuration
emotion [ https://emotion.sh ]
- Why is does modern HTML/CSS seem so complex and convoluted? (details in comment)
-
How are folks feeling about the React team's push toward server components?
dang, I never thought about this implication, and I googled the emotionjs repo there's a currently-active open issue regarding this https://github.com/emotion-js/emotion/issues/2928
-
I created a Zero-Runtime CSS-in-JS Library Compatible with Next.js App Router and RSC
Over my years of working with React, I’ve loved using CSS-in-JS libraries like Emotion and Styled-components. However, their inherent performance overhead from injecting CSS at runtime and their incompatibility with the latest Next.js features such as App Router and React Server Components (RSC) have always been a nagging issue for me.
-
Next.js App Directory Architecture First Impressions
An early difficulty I encountered was using UI component libraries like Mantine and Material UI in the new architecture. After looking through some GitHub issues, the culprit is Emotion, a package many component libraries rely on that does not support server rendering.
- How are you styling in NextJS?
-
CSS Style Guide for Web Dev?
In general I recommend using styled-components or emotion. These directly attach CSS to your components in a scoped way so that your CSS files aren’t stepping on each other’s toes all the time and make sure styling is colocated with the component.
-
Server Components
I ran into this problem as well. The root cause as I understand it is emotion: https://github.com/emotion-js/emotion/issues/2928
-
CSS In JS - The what, why and How's
While integrating component libraries, they may not give you full control over the order in which styles are inserted. (Example issue).
-
Lets create something neat together!
Vanilla Extract (CSS Framework) (Alternative: Emotion)
What are some alternatives?
swc - Rust-based platform for the Web
Tailwind CSS - A utility-first CSS framework for rapid UI development.
ts-node - TypeScript execution and REPL for node.js
JSS - JSS is an authoring tool for CSS which uses JavaScript as a host language.
esbuild - An extremely fast bundler for the web
styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
fork-ts-checker-webpack-plugin - Webpack plugin that runs typescript type checker on a separate process.
styled-jsx - Full CSS support for JSX without compromises
swc-node - Faster ts-node without typecheck
linaria - Zero-runtime CSS in JS library
TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
Sass - Sass makes CSS fun!