Reef works in all modern browsers. That means:
- The latest versions of Edge, Chrome, Firefox, and Safari.
- Mobile Safari, Chrome, and Firefox on iOS.
- WebView, Chrome, and Firefox for Android.
If you need to support older browsers, you’ll need to transpile your code into ES5 with BabelJS.
The code is available under the MIT License.
You can find all available versions under releases.
Version 13 (current version) updates naming and brings rendering improvements.
store()function has been renamed
reef:storeevent has been renamed
reef:signal) to better align with industry norms.
reef:signalevent passes along the name and value of the updated property rather than the entire data object.
setter()function has been renamed
store()to more accurately describe what it is and does.
listeners()function has been removed, as it was deprecated in v12.
- When using
on*event listeners, you can no longer pass in arguments. This was done for XSS attack/security reasons.
- A new
focus()function was added to improve accessibility when rendering UIs.
- Changes were made to the
render()function’s DOM diffing to improve performance.
[reef-ignore]attribute was added that can be used to exclude specific template elements from DOM diffing after initial render.
- Added support for a
[key]attribute to more easily ID list elements for more efficient DOM diffing.
Version 12 shifts to small, decoupled utility functions.
new Reef()constructor and component-focused API.
- Added three small utility functions:
- Focused on more vanilla JS oriented developer experience.
- Removed support for AMD modules.
Version 11 improves the developer experience.
getters(which were causing confusion).
- Updated nested components for easier use.
- Added ability to attach event listeners directly to elements in templates.
- Updated dynamic and default form values to use
#for better ergonomics.
Version 10 brings more layout control.
datais allowed to contain HTML by default.
- The sanitization engine has been updated to be more robust.
on*attributes are no longer allowed on elements.
- Components can now use both a shared
Version 9 reduces under-the-hood complexity.
- Large refactor to reduce abstractions for improved performance and reduced file size.
- Removed all router options.
Version 8 brings more predictability and convenience when building interactive UIs.
reef-default-*versions) for more predictable form field behavior.
- Added new helper methods for more accurate type checking and throwing errors.
- Improved DOM diffing under-the-hood.
- Fixed router issues with module bundlers.
- Improved control for route titles.
- Dropped legacy browser support.
Version 7 introduces new tools for managing more complex applications.
new Reef.Store()data store constructor for reactive shared state.
setterfunctions for more fine-grained control over how data flows in and out of components.
- Improved process for attaching nested components to parent components.
- Removed the
clone()method on individual components (the global
Reef.clone()method still exists).
Version 6 completely changes how data reactivity works.
- Component data is now directly reactive.
getData()methods (previously used for reactivity) have been removed.
- You can get an immutable copy of your data with the
- Added an
emit()method for emitting custom events.
- IE support now requires polyfills or transpiling.
Version 5 adds new build system and filename structure,
- Specific named versions for ES modules, AMD, and CommonJS.
- Default build is browser-only.
- ES modules now natively supported.
Version 4 adds better performance and XSS protection.
- Data is once again automatically encoded to help protect you from cross-site scripting (XSS) attacks.
- Changes to diffing and rendering reduce reflows and improve performance.
- Support pushed back even further to IE9.
- Deprecated: Custom sanitizer methods were removed in favor of built-in, automated HTML encoding. You can still add custom sanitization within template functions.
Version 3 removes built-in sanitization.
- Automatic sanitization has been removed. HTML templates are unsanitized by default.
- Two new hooks to add sanitization to your components have been added. This provides more developer flexibility and keeps Reef as lightweight as possible.
Version 2 adds a better sanitizing engine and markup support.
- DOMPurify is now the template sanitizing engine.
- The attribute exceptions feature has been removed in favor of DOMPurify’s configuration options. The
removeAttributes()methods no longer exist.
- Reef now offers a smaller unsafe version for UIs that don’t use any third-party or user-provided content. It does not sanitize templates before rendering, so use with caution.
- SVGs are now properly supported and will render correctly.
Version 1 removed polyfill dependencies.
- All polyfills have been removed and are no longer needed. This is a breaking change, as the
.polyfillversions of scripts no longer exist.
Version 0.2 introduced some big new features.
- Data reactivity and automatically updating UI
- Support for nested components
- Shared state support (with data reactivity!)
- Custom attribute exceptions for your templates
Hi, I'm Chris Ferdinandi. 👋
Get Daily Developer Tips
Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join over 14k others.