이 퀘스트 문제는 Ember.js에서 Glimmer 구성 요소의 구현을 추적합니다.

계획

Glimmer.js 구성 요소에는 다음과 같은 기능이 있습니다.

1. "외부 HTML" 템플릿( tagName , attributeBindings 등 없음)
2. 템플릿의 인수는 {{@firstName}} 와 같이 @ 접두사입니다.
3. 구성 요소에 인수가 this.args 로 설정되었습니다.
4. 구성 요소 클래스는 JavaScript 클래스 구문을 사용합니다.
5. 변경 가능한 구성 요소 상태는 @tracked 속성으로 주석 처리됩니다.
6. 구성 요소는 <AngleBracket /> 구문을 통해 호출됩니다.
7. …attributes 를 통해 속성을 "스플래팅"할 수 있습니다.

Ember의 증분주의 정신에 따라 우리는 이 기능을 애드온을 통해 하나씩 도입하고자 합니다. 이를 통해 커뮤니티는 프로세스 초기에 기능을 사용하고 피드백을 제공할 수 있습니다.

사실, 우리는 이미 Ember에서 Glimmer 구성 요소로 가는 길을 시작했습니다. 처음 두 기능은 이미 착륙하기 시작했습니다.

1. 템플릿 전용 구성 요소에서 템플릿은 "외부 HTML"입니다( template-only-glimmer-components 선택적 기능 이 활성화되었다고 가정).
2. @ 접두사(예: {{@firstName}} )를 통해 템플릿에서 인수에 액세스할 수 있습니다.

이번 호에서는 애드온이 대체 구성 요소 구현을 제공하도록 허용한 다음 @glimmer/component 패키지를 Glimmer.js 구성 요소 API를 구현하는 Ember 애드온으로 변환하여 Glimmer 구성 요소를 Ember로 가져오는 프로세스를 완료하는 것을 제안합니다.

우리는 그 작업을 단계로 나눌 것이며, 각각은 기존 Ember 앱과 애드온의 이점을 잠금 해제합니다. 0단계는 대체 구성 요소 구현을 지원하기 위해 Ember.js에 필요한 기본 요소를 추가하는 것입니다. 1, 2, 3단계는 Glimmer.js 구성 요소 API를 점진적으로 활성화하는 것입니다.

0단계와 1단계에 대해 자세히 살펴보는 동안 첫 번째 단계가 완료에 가까워질 때까지 이후 단계의 기술적인 세부 정보 탐색을 연기할 것입니다.

0단계: 구성 요소 동작 사용자 지정

TL;DR: Ember.js에 CustomComponentManager API를 추가하여 애드온이 사용자 지정 구성 요소 API를 구현할 수 있도록 합니다.

현재 Ember 앱의 모든 구성 요소는 Ember.Component 하위 클래스로 간주됩니다. Ember에서 대체 구성 요소 API를 지원하려면 구성 요소 동작이 언제 어떻게 변경되어야 하는지 Ember에 알리는 방법이 필요합니다.

"사용자 지정 구성 요소 동작"이라고 할 때 구체적으로 다음을 의미합니다.

1. 구성 요소 인스턴스가 생성되는 방식입니다.
2. 구성 요소 인스턴스가 파괴되는 방법.
3. 구성 요소 인스턴스에 인수가 제공되는 방식입니다.
4. 이러한 수명 주기 변경 사항을 구성 요소에 알리는 방법입니다.

Glimmer VM은 이러한 결정을 내리는 개체인 "구성 요소 관리자"의 개념을 도입하지만 이 API는 매우 낮은 수준입니다. 작성하기 어렵고 다른 구성 요소를 손상시키는 방식으로 작성하기 쉽고 아직 안정적이지 않기 때문에 Ember에서 공개 API로 직접 채택하는 것은 시기상조입니다.

대신에 대리자 패턴을 구현하는 CustomComponentManager 라는 새로운 Ember API를 제안합니다. CustomComponentManager 는 완전한 ComponentManager Glimmer VM API보다 더 작은 API 노출 영역을 제공하므로 애드온 작성자가 "성공의 구덩이"에 빠질 수 있습니다.

그렇다면 Ember는 주어진 구성 요소에 사용할 구성 요소 관리자를 어떻게 알 수 있습니까? Custom Components RFC 의 원래 반복에서는 Ember에 열심히 등록하고 사용할 구성 요소 관리자를 지정하는 데이터 구조인 ComponentDefinition 개념을 도입했습니다.

ComponentDefinition 접근 방식의 주요 이점 중 하나는 구성 요소 관리자 확인이 빌드 시 발생할 수 있다는 것입니다. 불행히도 이는 정확히 어떻게 등록되는지에 대한 API를 설계해야 하며 빌드 파이프라인과의 일종의 통합을 의미할 수 있습니다.

대신 컴포넌트 클래스의 주석을 통해 런타임에 컴포넌트의 관리자를 설정하기 위한 API를 제안합니다. 이 증분 단계를 통해 장기적인 솔루션이 설계되는 동안 사용자 지정 구성 요소 관리자에 대한 작업을 계속할 수 있습니다.

사용자 지정 구성 요소 관리자 검색

이 반복에서 구성 요소는 명시적으로 대체 구성 요소 관리자를 선택해야 합니다. Ember에서 내보낸 특수 componentManager 함수를 통해 이 작업을 수행합니다. 이 함수는 런타임 시 특정 구성 요소 클래스에 사용해야 하는 구성 요소 관리자에 주석을 추가합니다.

import { componentManager } from '@ember/custom-component-manager';
import EmberObject from '@ember/object';

export default componentManager(EmberObject.extend({
  // ...
}), 'glimmer');

결국 이것은 클래스 데코레이터가 될 수 있습니다.

import { componentManager } from '@ember/custom-component-manager';

export default @componentManager('glimmer') class {
  // ...
}

이 구성 요소가 처음 호출될 때 Ember는 클래스를 검사하여 사용자 지정 구성 요소 관리자 주석이 있는지 확인합니다. 그렇다면 문자열 값을 사용하여 컨테이너에 대한 조회를 수행합니다. 위의 예에서 Ember는 컨테이너 키가 component-manager:glimmer 개체에 대해 컨테이너에 요청합니다.

따라서 애드온은 일반 해상도 의미 체계를 사용하여 사용자 지정 구성 요소 관리자를 제공할 수 있습니다. 우리의 Glimmer 구성 요소 애드온은 addon/component-managers/glimmer.js 에서 구성 요소 관리자를 내보낼 수 있으며 이는 일반 해결 규칙을 통해 자동으로 검색됩니다.

이 API는 장황하고 특별히 인체공학적이지 않지만 앱과 애드온은 주석이 있는 자체 기본 클래스를 도입하여 이를 추상화할 수 있습니다. 예를 들어 turbo-component 라는 애드온이 사용자 지정 구성 요소 관리자를 제공하려는 경우 다음과 같이 기본 클래스를 내보낼 수 있습니다.

// addon/index.js
import EmberObject from '@ember/object';
import { componentManager } from '@ember/custom-component-manager';

export default componentManager(EmberObject.extend({
  // ...
}), 'turbo');

이 애드온의 사용자는 TurboComponent 기본 클래스를 하위 클래스로 지정하여 올바른 구성 요소 관리자를 사용하는 구성 요소를 정의할 수 있습니다.

import TurboComponent from 'turbo-component';

export default TurboComponent.extend({
  didInsertElementQuickly() {
    // ...
  }
});

커스텀 컴포넌트 API

어떤 구성 요소도 섬이 아니며 하위 호환성을 위해 새 구성 요소 API의 도입으로 인해 기존 구성 요소가 손상되지 않는 것이 중요합니다.

이에 대한 한 가지 예는 기존 보기 계층 구조 API입니다. Ember 구성 요소는 parentView 속성을 통해 상위 구성 요소를 검사할 수 있습니다. 부모가 Ember.Component 가 아니더라도 자식 Ember 구성 요소에는 여전히 null이 아닌 parentView 속성이 있어야 합니다.

현재 Ember의 CurlyComponentManager 는 이 상태뿐만 아니라 작업 대상과 같은 다른 주변 "범위 상태"를 유지 관리하는 역할을 합니다.

제대로 구현되지 않은 구성 요소 관리자가 기존 시스템의 불변성을 위반하는 것을 방지하기 위해 구성 패턴을 사용하여 기본 API의 날카로운 모서리를 숨기면서 동작을 사용자 지정합니다.

import CustomComponentManager from "@ember/custom-component-manager";

export default new CustomComponentManager({
  // major and minor Ember version this manager targets
  version: "3.1",
  create({ ComponentClass, args }) {
    // Responsible for instantiating the component class and passing provided
    // component arguments.
    // The value returned here is passed as `component` in the below hooks.
  },
  getContext(component) {
    // Returns the object that serves as the root scope of the component template.
    // Most implementations should return `component`, so the component's properties
    // are looked up in curly expressions.
  },
  update(component, args) {
    // Called whenever the arguments to a component change.
  },
  destroy(component) {
  }
});

1단계: Ember Object Glimmer 구성 요소

Ember의 Component 기본 클래스는 더 이상 많이 사용되지 않는 긴 기능 목록을 지원합니다. 이러한 기능은 사용하지 않는 경우에도 성능 비용을 부과할 수 있습니다.

첫 번째 단계로 @glimmer/component 패키지를 통해 간소화된 Glimmer.js 구성 요소 API를 선택하는 방법을 제공하고자 합니다. 마이그레이션을 쉽게하기 위해, 우리는 희미한 빛의 구현을 제공 할 것입니다 Component 기본 클래스와는 상속 Ember.Object 에서 @glimmer/component/compat .

다음은 "Ember-Glimmer 구성 요소"가 어떻게 보이는지에 대한 예입니다.

// src/ui/components/user-profile/component.js
import Component from '@glimmer/component/compat';
import { computed } from '@ember/object';

export default Component({
  fullName: computed('args.firstName', 'args.lastName', function() {
    let { firstName, lastName } = this.args
    return `${firstName} ${lastName}`;
  })

  isAdmin: false,

  toggleAdmin() {
    this.set('isAdmin', !this.isAdmin);
  }
});

{{!-- src/ui/components/user-profile/template.hbs --}}
<h1>{{fullName}}</h1>
<p>
  Welcome back, {{@firstName}}!
  {{#if isAdmin}}
    <strong>You are an admin.</strong>
  {{/if}}
</p>
<button {{action toggleAdmin}}>Toggle Admin Status</button>

이러한 구성 요소의 주목할만한 특성:

• 템플릿은 외부 HTML 입니다. 위의 예제 템플릿에는 단일 루트 요소가 없기 때문에 "태그 없는 구성 요소"로 렌더링됩니다.
• 작업은 구성 요소의 뿐이며 actions 해시에 중첩될 필요가 없습니다.
• 구성 요소의 개별 속성을 직접 설정하는 대신 args 속성에 인수가 설정 됩니다.
• 그들은 Ember 개체 모델을 사용합니다 . 이는 Ember 개발자에게 이미 친숙한 계산 속성 및 믹스인과 같은 도구가 계속 작동한다는 것을 의미합니다.

포함 되지 않은 항목 도 중요합니다.

• @tracked 속성은 3단계까지 지원되지 않습니다.
• 구성 요소에 layout 또는 template 속성이 없습니다.
• childViews , parentView , nearestWithProperty 등과 같은 뷰 계층 구조와 관련된 메서드 또는 속성이 없습니다.
• 루트 요소를 수정하기 위한 tagName , attributeBindings 또는 기타 사용자 정의 JavaScript DSL이 없습니다.
• 이벤트 디스패치에 send 또는 sendAction 가 없습니다.
• 필수 ember-view 클래스 또는 자동 생성된 guid 요소 ID가 없습니다.
• 수동 rerender() 방법이 없습니다.
• attrs 속성이 없습니다(대신 args 사용).
• 전달된 인수는 "단방향"이며 양방향 바인딩을 생성하지 않습니다.
• 전달된 인수는 구성 요소 인스턴스의 속성으로 설정되지 않아 디버그하기 어려운 이름 충돌 가능성을 방지합니다.
• 구성 요소 요소에 대한 jQuery 개체를 만드는 데 this.$() 가 없습니다.
• DOM에 수동 appendTo 구성 요소가 없습니다.
• 다음 수명 주기 이벤트는 지원하지 않습니다.
  
  
  
  • willInsertElement
  
  
  • didRender
  
  
  • willRender
  
  
  • willClearRender
  
  
  • willUpdate
  
  
  • didReceiveAttrs
  
  
  • didUpdateAttrs
  
  
  • parentViewDidChange
  
  
• 구성 요소 수명 주기 이벤트에 대한 on() 이벤트 리스너가 없습니다. 후크는 메서드로 구현해야 합니다.

이 기능 세트의 흥미로운 부작용 중 하나는 JavaScript 클래스 를 ES Classes RFC 에서 제안된 설계와 함께 위 구성 요소의 대체 구현을 제공할 수 있습니다.

// src/ui/components/user-profile/component.js
import Component from '@glimmer/component/compat';
import { computed } from 'ember-decorators/object';

export default class extends Component {
  isAdmin = false;

  @computed('args.firstName', 'args.lastName')
  get fullName() {
    let { firstName, lastName } = this.args;
    return `${firstName} ${lastName}`;
  })

  toggleAdmin() {
    this.set('isAdmin', !this.isAdmin);
  }
});

2단계 - 앵글 브래킷 구문

2 단계 (각괄호 통해 컴포넌트를 호출 가능 <UserAvatar @user={{currentUser}} /> (중괄호 이외에) {{my-component user=currentUser}} ). 이 구문은 구성 요소 인수와 HTML 속성을 명확하게 구분하기 때문에 이 기능을 사용하면 …attributes 를 통해 속성을 구성 요소 템플릿에 "분할"할 수도 있습니다.

{{! src/ui/components/UserAvatar/template.hbs }}
<div ...attributes> {{! <-- attributes will be inserted here }}
  <h1>Hello, {{@firstName}}!</h1>
</div>

<UserAvatar @user={{currentUser}} aria-expanded={{isExpanded}} />

그러면 다음과 유사한 출력이 렌더링됩니다.

<div aria-expanded="true">
  <h1>Hello, Steven!</h1>
</div>

3단계 - 추적된 속성

3단계에서는 Ember의 @tracked 데코레이터를 통해 추적된 속성을 활성화합니다. Ember의 개체 모델과 추적된 속성 간의 상호 운용성에 대한 세부 사항은 작업 중입니다. 추적된 속성이 표시되면 사용자는 @glimmer/component/compat 모듈을 삭제하고 Ember.Object가 아닌 일반 구성 요소 기본 클래스를 사용할 수 있습니다.

최근에 병합된 "자동 추적" 기능(계산된 속성 종속성을 자동으로 추론)과 함께 이는 애플리케이션 코드를 더욱 단순화하는 결과를 가져옵니다.

import Component, { tracked } from '@glimmer/component';

export default class extends Component {
  <strong i="24">@tracked</strong> isAdmin = false;

  <strong i="25">@tracked</strong> get fullName() {
    let { firstName, lastName } = this.args;
    return `${firstName} ${lastName}`;
  }

  toggleAdmin() {
    this.isAdmin = !this.isAdmin;
  }
}

Q&A

기존 CSS와의 호환성을 위해 ember-view 클래스 이름 또는 자동 생성된 id 속성과 같은 항목을 Glimmer 구성 요소에 다시 추가할 수 있습니까?

예. 예시:

<div class="ember-view" id="{{uniqueId}}">
  Component content goes here.
</div>

import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';

export default class extends Component {
  get uniqueId() {
    return guidFor(this);
  }
}

자원

• Ember 커뮤니티 Slack의 #st-glimmer-components 채널
  
  
  
  • 우리는 여기에서 작업을 조정하고 있습니다.
  
  
• 사용자 지정 구성 요소 RFC
• custom-component-manager 지점
  
  
  
  • 기능 플래그 뒤에 CustomComponentManager 구현이 있는 Ember.js의 진행 중인 분기
  
  
• tracked 지점
  
  
  
  • @tracked 속성과 Ember 개체 간의 상호 운용성에 대한 작업이 있는 Ember.js의 진행 중인 분기
  
  

작업

아래 목록을 사용하여 진행 중인 작업을 추적합니다. 구현하는 동안 더 많이 배우면 목록에 항목을 추가하거나 제거합니다.

사용자 지정 구성 요소 관리자 API

• [x] 위의 변경 사항을 반영하도록 사용자 지정 구성 요소 RFC 업데이트(@chancancode)
  
  
  
  • https://github.com/emberjs/rfcs/pull/213#issuecomment -370494713
  
  
• [x] glimmer-custom-component-manager 기능 플래그 추가
• [x] componentManager 기능 구현
  
  
  
  • [x] { componentManager } from '@ember/custom-component-manager' 로 노출
  
  
• [x] 해석기는 주석이 있는 클래스를 감지해야 합니다.
• [x] 리졸버는 지정된 구성 요소 관리자를 조회해야 합니다.
  
  
  
  • [ ] 구성 요소 관리자를 발견할 수 있도록 어디에 둘 것인지에 대한 애드온 작성자를 위한 지침
  
  
  • [ ] 이것은 모듈 통합과 어떻게 작동합니까? (@mixonic)
  
  
• [x] CustomComponentManager API 구현
  
  
  
  • [x] CustomComponentManagerDelegate 인터페이스 정의
  
  
  • [x] version
  
  
  • [x] create()
  
  
  • [x] getContext()
  
  
  • [x] update()
  
  
  • [x] destroy?()
  
  
  • [x] didCreate?()
  
  
  • [x] didUpdate?()
  
  
  • [x] getView?()
  
  
  • [x] 생성 시 version 속성 확인
  
  
  • [x] 내부
  
  
  • [x] 기존 구성 요소에서 childViews 및 parentView
  
  
  • [ ] 렌더링 성능을 위한 도구
  
  
  • [ ] Ember Inspector와의 호환성을 위한 도구
  
  

글리머 컴포넌트 애드온

• [x] sparkles-components 애드온 사용 지원
  
  
  
  • [x] 기본 클래스는 Ember에서 사용할 때 componentManager 주석을 가져와 추가해야 합니다.
  
  
  • [x] CustomComponentManager 구현은 Ember의 컨테이너를 통해 검색 가능해야 합니다.
  
  
• [ ] @glimmer/component 를 Ember 애드온으로 사용 지원
  
  
  
  • [ ] Glimmer.js에서 사용할 때 기존 동작 유지
  
  
  • [ ] import Component from '@glimmer/component' 는 일반 JavaScript 기본 클래스를 제공합니다.
  
  
  • [ ] import Component from '@glimmer/component/compat' 는 Ember.Object 기본 클래스를 제공합니다.
    
    조회
  
  
• [ ] 수명 주기 후크
  
  
  
  • [x] 정적 create(injections)
  
  
  • [x] didInsertElement()
  
  
  • [x] willDestroy()
  
  
  • [x] didUpdate()
  
  
  • [x] 이벤트 위임 호출 메서드( click() 등)는 트리거 되지 않아야 합니다.
  
  
• [ ] 요소 액세스
  
  
  
  • [ ] this.bounds
  
  
  • [ ] this.element 계산된 속성 별칭을 this.bounds
  
  
  • [ ] 요소 노출을 위한 요소 수정자 기반 API
  
  
• [ ] 인수
  
  
  
  • [x] this.args 는 생성자에서 사용할 수 있습니다.
  
  
  • [x] this.args didUpdate 가 호출되기 전에 this.args 가 업데이트됩니다.
  
  
  • [ ] this.args 는 무한 재렌더링 주기를 트리거해서는 안 됩니다(확인 필요).
  
  
• [ ] 문서
  
  
  
  • [ ] 설치하는 방법
  
  
  • [ ] 주의 사항
  
  
  • [ ] 카나리아 전용
  
  
  • [ ] 1.0 이전
  
  
  • [ ] Ember-Glimmer "호환" 구성 요소
  
  
  • [ ] 외부 HTML 템플릿
  
  
  • [ ] 수명 주기 후크
  
  
  • [ ] 계산된 속성 정의
    
    
    
    
    
    • [ ] args 에 의존하는 방법
    
    
    
  
  
  • [ ] 마이그레이션 가이드 / Glimmer 구성 요소…
  
  
  • 다른 라이브러리에 익숙한 사람들을 위한 효과적인 Glimmer 구성 요소 작성 가이드
  
  
  • [ ] Ember 개발자를 위한 Glimmer 구성 요소
  
  
  • [ ] React 개발자를 위한 Glimmer 구성 요소
  
  
  • [ ] Angular 개발자를 위한 Glimmer 구성 요소
  
  
  • [ ] COBOL 개발자를 위한 Glimmer 구성 요소
  
  

열린 질문

1. 작업에 대한 모범 사례는 무엇입니까? 이것이 구성 요소 관리자가 연결되도록 허용해야 하는 것입니까?
2. 기본 JavaScript 클래스(정적 create() 메서드가 없는 클래스)를 구성 요소 클래스로 어떻게 사용합니까? 구성 요소를 초기화하는 프로토콜은 간단해 보이지만 의외로 까다롭습니다.
3. CustomComponentManager 와 같은 "애드온 API"를 문서화하기에 가장 좋은 위치는 어디입니까?
4. CustomComponentManager 버전 관리는 어떻게 처리합니까?