Awesome
stage1
High-performance JavaScript micro framework.
Warning: This is alpha software. Test thoroughly before using in production. Please report any bugs you find!
Originally a fork of the excellent https://github.com/Freak613/stage0 project.
TODO
- Add documentation about:
- Internal use of
innerHTML
— potencial risk of XSS etc.; never useh
andhtml
functions with untrusted input- In future we may have
Sanitizer.sanitizeFor(...)
which could be used to sanitize untrusted input- It's unlikely we'll use it internally due to performance overhead but developers should definately sanitize input when untrusted before passing it in... although we could create light wrapper functions
- https://developer.mozilla.org/en-US/docs/Web/API/Sanitizer/sanitizeFor
- https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API
- In future we may have
- New DOM utility functions
createFragment
create
append
prepend
onNodeRemove
- New reactive store feature
- Differences from the original
stage0
project:h
is nowfunction h(template: string): S1Node
e.g.,h('<p>#text<p>')
html
is available to use as a string template literal tag function e.g.,html`<p>#text<p>`
- Import paths
- Other than reconcilers, everything is a named export from
stage1
- Reconcilers all export a
reconcile
function /keyed
-->/reconcile/keyed
/reconcile
-->/reconcile/non-keyed
/reuse-nodes
-->/reconcile/reuse-nodes
- Other than reconcilers, everything is a named export from
- Extra DOM utils
- New reactive
store
factory can be imported fromstage1/store
- Improved TypeScript support
- Reduced size and improved load and runtime performance
process.env.NODE_ENV
must be defined- If
process.env.NODE_ENV === 'production
you must minifyh
/html
strings with a compatible minifier- Add full example with
esbuild
+esbuild-minify-templates
- Add full example with
- Ref names must be lowercase because some browsers normalise element attribute names when rendering HTML
- Internal use of
- Add API and usage documentation
- Add more tests
- Add examples
- Set up benchmarking + compare to
stage0
and other JS frameworks - Submit to https://github.com/krausest/js-framework-benchmark
Browser support
Note: Internet Explorer is not supported.
Minimum browser version required:
- Chrome 26
- Edge 13
- Firefox 22
- Safari 8
- Opera 15
Some optional features require a higher browser version:
- Compiler
html
tagged template literal function usesString.raw
; requirements createFragment
utility function usesDocumentFragment
; requirementsonNodeRemove
utility function usesfor...of
; requirementsstore
usesProxy
; requirements- Also uses logical nullish assignment and optional chaining operator, however, build tools can transform these for old browser targets
SSR via Node.js or Deno is not supported and is not the intended use of this library.
Bugs
Please report any bugs you encounter on the GitHub issue tracker.
Changelog
See releases on GitHub.
License
MIT license. See LICENSE.
© 2023 Max Milton