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";

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

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)

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