Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/springtype-org/springtype
~1k TypeScript/TSX nano-framework for the web
https://github.com/springtype-org/springtype
development fast framework functional functional-programming micro performance pwa-apps simplicity springtype testable tiny tsx typescript vdom web websites zero-dependency
Last synced: about 1 month ago
JSON representation
~1k TypeScript/TSX nano-framework for the web
- Host: GitHub
- URL: https://github.com/springtype-org/springtype
- Owner: springtype-org
- License: mit
- Created: 2019-05-25T10:30:38.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T20:36:26.000Z (almost 2 years ago)
- Last Synced: 2024-10-05T06:06:12.293Z (about 1 month ago)
- Topics: development, fast, framework, functional, functional-programming, micro, performance, pwa-apps, simplicity, springtype, testable, tiny, tsx, typescript, vdom, web, websites, zero-dependency
- Language: TypeScript
- Homepage: https://springtype.org
- Size: 16.1 MB
- Stars: 20
- Watchers: 2
- Forks: 2
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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:
```tsx
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(
SpringType
);
}, 1000 /* 1 sec */);
return (
Hello, {text}!
)
}
// SpringType renders to document.body by default
// but you can just provide a second argument to change this
render();
```
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! 🙏🏻😎🥳👍
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](./CONTRIBUTORS.md) :tada:
