SpringType

„Everything should be made as simple as possible, but no simpler.” - Albert Einstein

Example code

SpringType combines the best parts of the React API with the simplicity of jQuery:

import{tsx,render,Ref}from"springtype";import{$}from"st-query";interfaceHelloMessageProps{text: string;}// a functional component, just like in React// but it only renders one timeconstHelloMessage=({ text }: HelloMessageProps)=>{// reference is stored when the element is createdconstmessageRef: 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(<divref={messageRef}>
Hello, {text}!
</div>)}// SpringType renders to document.body by default// but you can just provide a second argument to change thisrender(<HelloMessagetext="World"/>);

For a more complex demo, see: TODO list demo

Features

• ✅ React-like VDOM supporting native DOM access via ref
• ✅ HTML/SVG-compatible TSX - supports standard class
• ✅ ~1k bundle size: 1008 byte (best, brotli) - 1319 byte (worst, umd, gz)
• ✅ Zero dependencies
• ✅ Purely functional
• ✅ First class TypeScript support
• ✅ 100% Unit Test coverage
• ✅ TestCafé smoke tests

Philosophy

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...

• st-query - a jQuery-like nano library for runtime DOM manipulation (+~500 byte)
• st-route - an Expess-like nano library for client-side DOM routing (+~400 byte)
• st-bus - a socket.io-like nano library for application/component eventing (+~150 byte)
• st-state - a map-like nano library for client-side state management and persistency (+~200 byte)
• st-i18n - a i18next-like nano library for translation and string interpolation (+~500 byte)
• st-jss - a JSS-like nano library for working with CSS in TS/JS (+~600 byte)

...to make your life easier :-)

Backers

Thank you so much for supporting us financially! 🙏🏻😎🥳👍

Tom

Maintainers

SpringType is brought to you by:

Aron Homberg

Tom

Michael Mannseicher

Contributing

Please help out to make this project even better and see your name added to the list of our CONTRIBUTORS.md 🎉