<commit_before>import { get, PROPERTY_DID_CHANGE } from '@ember/-internals/metal';
import { getOwner } from '@ember/-internals/owner';
import { TargetActionSupport } from '@ember/-internals/runtime';
import { symbol } from '@ember/-internals/utils';
import {
  ActionSupport,
  ChildViewsSupport,
  ClassNamesSupport,
  CoreView,
  getViewElement,
  ViewMixin,
  ViewStateSupport,
} from '@ember/-internals/views';
import { assert } from '@ember/debug';
import { DirtyableTag } from '@glimmer/reference';
import { normalizeProperty, SVG_NAMESPACE } from '@glimmer/runtime';

import { RootReference, UPDATE } from './utils/references';

export const DIRTY_TAG = symbol('DIRTY_TAG');
export const ARGS = symbol('ARGS');
export const ROOT_REF = symbol('ROOT_REF');
export const IS_DISPATCHING_ATTRS = symbol('IS_DISPATCHING_ATTRS');
export const HAS_BLOCK = symbol('HAS_BLOCK');
export const BOUNDS = symbol('BOUNDS');

/**
@module @ember/component
*/

/**
  A `Component` is a view that is completely
  isolated. Properties accessed in its templates go
  to the view object and actions are targeted at
  the view object. There is no access to the
  surrounding context or outer controller; all
  contextual information must be passed in.

  The easiest way to create a `Component` is via
  a template. If you name a template
  `app/templates/components/my-foo.hbs`, you will be able to use
  `<MyFoo />` or `{{my-foo}}` in other templates, which will make
  an instance of the isolated component.

  ```app/templates/components/my-foo.hbs
  <PersonProfile @person={{this.currentUser}} />
  ```

  or

  ```app/templates/components/my-foo.hbs
  {{person-profile person=this.currentUser}}
  ```

  ```app/templates/components/person-profile.hbs
  <h1>{{person.title}}</h1>
  <img src={{person.avatar}}>
  <p class='signature'>{{person.signature}}</p>
  ```

  You can use `yield` inside a template to
  include the **contents** of any block attached to
  the component. The block will be executed in the
  context of the surrounding context or outer controller:

  ```handlebars
  <PersonProfile @person={{this.currentUser}}>
    <p>Admin mode</p>
    {{! Executed in the controller's context. }}
  </PersonProfile>
  ```

  or
  ```handlebars
  {{#person-profile person=this.currentUser}}
    <p>Admin mode</p>
    {{! Executed in the controller's context. }}
  {{/person-profile}}
  ```

  ```app/templates/components/person-profile.hbs
  <h1>{{person.title}}</h1>
  {{! Executed in the component's context. }}
  {{yield}} {{! block contents }}<commit_msg>[WIP] API docs for nested angle invocation<commit_after>import { get, PROPERTY_DID_CHANGE } from '@ember/-internals/metal';
import { getOwner } from '@ember/-internals/owner';
import { TargetActionSupport } from '@ember/-internals/runtime';
import { symbol } from '@ember/-internals/utils';
import {
  ActionSupport,
  ChildViewsSupport,
  ClassNamesSupport,
  CoreView,
  getViewElement,
  ViewMixin,
  ViewStateSupport,
} from '@ember/-internals/views';
import { assert } from '@ember/debug';
import { DirtyableTag } from '@glimmer/reference';
import { normalizeProperty, SVG_NAMESPACE } from '@glimmer/runtime';

import { RootReference, UPDATE } from './utils/references';

export const DIRTY_TAG = symbol('DIRTY_TAG');
export const ARGS = symbol('ARGS');
export const ROOT_REF = symbol('ROOT_REF');
export const IS_DISPATCHING_ATTRS = symbol('IS_DISPATCHING_ATTRS');
export const HAS_BLOCK = symbol('HAS_BLOCK');
export const BOUNDS = symbol('BOUNDS');

/**
@module @ember/component
*/

/**
  A `Component` is a view that is completely
  isolated. Properties accessed in its templates go
  to the view object and actions are targeted at
  the view object. There is no access to the
  surrounding context or outer controller; all
  contextual information must be passed in.

  The easiest way to create a `Component` is via
  a template. If you name a template
  `app/templates/components/person-profile.hbs`:

  ```app/templates/components/person-profile.hbs
  <h1>{{@person.name}}</h1>
  <img src={{@person.avatar}}>
  <p class='signature'>{{@person.signature}}</p>
  ```

  You will be able to use `<PersonProfile />` to
  refer to this component elsewhere in your
  application:

  ```app/templates/application.hbs
  <PersonProfile @person={{this.currentUser}} />
  ```

  Note that component names are capitalized here
  in order to distinguish them from regular HTML
  elements.

  While the angle bracket is generally preferred,
  it is also possible to invoke the same component
  with the `{{person-profile}}` syntax:

  ```app/templates/application.hbs
  {{person-profile person=this.currentUser}}
  ```

  Not that with this syntax, component names are
  dashified and arguments are passed without the `@`
  sign.

  In both cases, it will render the content of the
  component template we created above. The end result
  will be something like this:

  ```hbs
  <h1>Tomster</h1>
  <img src="https://emberjs.com/tomster.jpg">
  <p class='signature'>Out of office this week</p>
  ```

  Components can be nested inside sub-folders for
  logical groupping. For example, if we placed our
  template in `app/templates/components/person/short-profile.hbs`,
  we can invoke it as `<Person::ShortProfile />`:

  ```app/templates/application.hbs
  <Person::ShortProfile @person={{this.currentUser}} />
  ```

  Or equivalently, `{{person/short-profile}}`:

  ```app/templates/application.hbs
  {{person/short-profile person=this.currentUser}}
  ```

  You can use `yield` inside a template to
  include the **contents** of any block attached to
  the component. The block will be executed in the
  context of the surrounding context or outer controller:

  ```handlebars
  <PersonProfile @person={{this.currentUser}}>
    <p>Admin mode</p>
    {{! Executed in the controller's context. }}
  </PersonProfile>
  ```

  or
  ```handlebars
  {{#person-profile person=this.currentUser}}
    <p>Admin mode</p>
    {{! Executed in the controller's context. }}
  {{/person-profile}}
  ```

  ```app/templates/components/person-profile.hbs
  <h1>{{person.title}}</h1>
  {{! Executed in the component's context. }}
  {{yield}} {{! block contents }}
{'fraction_non_alphanumeric': 0.13052597612132946, 'fraction_numerical': 0.0016134236850596966, 'mean_word_length': 4.293766011955594, 'pattern_counts': {'":': 0, '<': 40, '<?xml version=': 0, '>': 40, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '130265', 'n_tokens_mistral': 1906, 'n_tokens_neox': 1851, 'n_words': 584}