1.0.0-alpha.1.39 • Published 7 years agoCLI

st-flat-publish

Licence

MIT

Version

1.0.0-alpha.1.39

Deps

Size

6 kB

Vulns

Weekly

Stars

Summary Dependency Versions

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`)
st-jss - a JSS-like nano library for working with CSS in TS/JS (+~`600 byte`)

...to make your life easier :-)