emberjsemberjs
86

Ember Render Modifiers

screenshot of Ember Render Modifiers

Implements did-insert / did-update / will-destroy modifiers for emberjs/rfcs#415

Github

Overview

The @ember/render-modifiers package is a powerful tool for those transitioning from classic Ember components to Glimmer components. Designed to seamlessly integrate with the rendering lifecycle, these modifiers give you the ability to leverage familiar lifecycle hook methods while adapting to modern best practices. This flexibility can be particularly beneficial when updating legacy code, allowing developers to maintain existing functionality without extensive rewrites.

However, while these modifiers provide a helpful bridge, they are not intended for new projects. The Ember community encourages developers to rethink their rendering strategies and utilize custom modifiers when necessary to foster better patterns in code design. Using these modifiers with caution is crucial, as they can sometimes lead to anti-patterns if heavily relied upon.

Features

  • Lifecycle Hook Integration: Easily use familiar lifecycle hook methods for transitioning between classic and Glimmer components, enabling quicker migration.
  • Cautionary Usage: This package is designed primarily for legacy support; new code should prefer custom modifiers.
  • CSS Animation Support: Add or remove CSS classes conditionally to manage animations effectively during the rendering process.
  • Scroll Position Management: Dynamically set and update scroll positions of elements, improving user experience during interactions.
  • Textarea Resizing: Automatically resize text areas to fit their contents when text is modified, ensuring better usability.
  • Support for Latest Ember Versions: Compatible with Ember.js v4.12+, Ember CLI v4.12+, and Node.js v18+, ensuring you get the latest features and security.
eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.