stage1 v0.7.2

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 use h and html 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
  • New DOM utility functions
    • createFragment
    • create
    • append
    • prepend
    • onRemove
  • New reactive store feature
  • Differences from the original stage0 project:
    • There are now 2 runtime modes:
      • New pre-compiled runtime mode for ultimate performance. Compiles templates at build-time via a bun macro that minifies templates, generates metadata, and then includes minimal runtime code in your JS bundle. Currently only works with Bun.build.
      • The regular mode is still availiable which generates metadata when your JS is run in the browser. Regular mode can be used with or without a build process.
    • Ref nodes are now marked with @ rather than #
    • h is now function h(template: string): S1Node e.g., h('<p>@key<p>')
    • html is available to use as a string template literal tag function e.g., html`<p>@key<p>` (regular mode only)
    • view.collect is now a collect function that needs to be imported seperately
    • Extra DOM utils
    • New reactive store factory can be imported from stage1/store
    • Improved TypeScript support
    • Reduced size and improved load and runtime performance
    • Import paths:
      • Other than reconcilers and the store, 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
  • Ref names must be lowercase because some browsers normalise element attribute names when rendering HTML
• 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:

• html tagged template literal function uses String.raw; requirements
• createFragment utility function uses DocumentFragment; requirements
• onRemove utility function uses for...of and MutationObserver; requirements, requirements
• store uses Proxy; requirements
  • Also uses logical nullish assignment and optional chaining operator, however, build tools can transform these for old browser targets

SSR (server-side rendering) 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