Linting

Prefer html methods like div(...) over DomComponent(tag: 'div', ...).

BAD:

yield DomComponent(
  tag: 'div',
  children: [
    DomComponent(
      tag: 'p',
      child: Text('Hello World'),
    ),
  ],
);

GOOD:

yield div([
  p([text('Hello World')]),
]);

Sort children properties last in html component methods.

This improves readability and best represents actual html.

BAD:

yield div([
  p([text('Hello World')], classes: 'text-red'),
], id: 'main');

GOOD:

yield div(id: 'main', [
  p(classes: 'text-red', [text('Hello World')]),
]);

Creates a new StatelessComponent class.

Creates a new StatefulComponent and respective State class.

Creates a new InheritedComponent class.

Converts a custom StatelessComponent into a StatefulComponent and respective State class.

Converts a custom StatelessComponent into an AsyncStatelessComponent.

Surgically removes the selected component from the component tree, making its children the new direct children of its parent.

Wraps the selected component with a new html component.

yield div([
  p([ 
    span([text('Hello World')]),
  ]), 
]);

Wraps the selected component with a new component.

yield div([
  MyComponent( 
    child: span([text('Hello World')]),
  ), 
]);

Wraps the selected component with a Builder.

yield div([
  Builder(builder: (context) sync* { 
    yield span([text('Hello World')]);
  }), 
]);

Extracts the selected component plus subtree into a new StatelessComponent.

Adds new css styles to the selected component.

This will either add a new class name:

yield div(
  classes: '[...]'
  [],
);

/* ... */

@css
static List<StyleRule> styles = [ 
  css('.[...]').box(...), 
]; 

Or use an existing id or class name:

yield div(id: 'content', []);

/* ... */

@css
static List<StyleRule> styles = [ 
  css('#content').box(...), 
]; 

Converts any import to a web-only import using the @Import annotation.

import 'dart:html'; 

@Import.onWeb('dart:html', show: [#window]) 
import 'filename.imports.dart'; 

This will auto-detect all used members from the import and add them to the show parameter.

Converts any import to a server-only import using the @Import annotation.

import 'dart:io'; 

@Import.onServer('dart:io', show: [#HttpRequest]) 
import 'filename.imports.dart'; 

This will auto-detect all used members from the import and add them to the show parameter.