Skip to content

springtype-org/springtype

Repository files navigation

SpringType

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

SpringType NPM version LGTM Code Quality Rating LGTM Total alerts License Circle CI Gitter Chat

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)
  • 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 🎉