script function

Component script(
  1. List<Component> children, {
  2. bool? async,
  3. bool? defer,
  4. required String src,
  5. Key? key,
  6. String? id,
  7. String? classes,
  8. Styles? styles,
  9. Map<String, String>? attributes,
  10. Map<String, EventCallback>? events,
})

The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.

  • async: For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.

    For module scripts, if the async attribute is present then the scripts and all their dependencies will be executed in the defer queue, therefore they will get fetched in parallel to parsing and evaluated as soon as they are available.

    This attribute allows the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse. defer has a similar effect in this case.

  • defer: This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

    Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.

    Scripts with the defer attribute will execute in the order in which they appear in the document.

    This attribute allows the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse. async has a similar effect in this case.

  • src: This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document.

Implementation

Component script(List<Component> children,
    {bool? async,
    bool? defer,
    required String src,
    Key? key,
    String? id,
    String? classes,
    Styles? styles,
    Map<String, String>? attributes,
    Map<String, EventCallback>? events}) {
  return DomComponent(
    tag: 'script',
    key: key,
    id: id,
    classes: classes,
    styles: styles,
    attributes: {
      ...attributes ?? {},
      if (async == true) 'async': '',
      if (defer == true) 'defer': '',
      'src': src,
    },
    events: events,
    children: children,
  );
}