~1k TypeScript/TSX nano-framework for the web
MIT License
SpringType combines the best parts of the React API with the simplicity of jQuery:
import { tsx, render, Ref } from "springtype";
import { $ } from "st-query";
interface HelloMessageProps {
text: string;
}
// a functional component, just like in React
// but it only renders one time
const HelloMessage = ({ text }: HelloMessageProps) => {
// reference is stored when the element is created
const messageRef: Ref = {};
// because there is no magic re-rendering,
// we can safely use setInterval() and can also
// safely wave goodbye to fancy hooks like useCallback() or useEffect()!
setInterval(() => {
// in case we want to change the rendering,
// we just do this programmatically, where it's needed
$(messageRef.current).html(<p>SpringType </p>);
}, 1000 /* 1 sec */);
return (
<div ref={messageRef}>
Hello, {text}!
</div>
)
}
// SpringType renders to document.body by default
// but you can just provide a second argument to change this
render(<HelloMessage text="World" />);
For a more complex demo, see: TODO list demo
ref
TSX
- supports standard class
1008 byte
(best, brotli) - 1319 byte
(worst, umd, gz)Less is more! Complexity is the devil! SpringType does render the TSX structure only one-time.
SpringType does NOT update the DOM. This takes away tons of complexity and performance headaches.
After initial rendering, you can basically go with pure TypeScript/DOM APIs to mutate the DOM wherever and whenever it is actually needed - not when the framework thinks it's needed.
However there is...
500 byte
)400 byte
)150 byte
)200 byte
)500 byte
)600 byte
)...to make your life easier :-)
Thank you so much for supporting us financially! 🙏🏻😎🥳👍
SpringType is brought to you by:
Please help out to make this project even better and see your name added to the list of our CONTRIBUTORS.md 🎉