테마 컴포넌트의 JS 실행 순서를 제어하는 것은 무엇인가요?

테마에 j/s를 포함하고 있습니다(이제 유명해졌나요? ;)). 이 j/s는 api.decorateCooked(…를 통해 요소를 추가하여 DOM을 수정합니다. 다양한 HTML head 요소를 삽입합니다.

또한 DiscoTOC 테마 컴포넌트도 설치되어 있습니다.

하지만 DiscoTOC가 감지하고 확장하는 일반적인 <div data-theme-toc="true"> </div>를 추가해도, 동적으로 삽입된 요소를 포함하는 목차가 생성되지 않습니다.

이것은 실행 순서와 관련된 단순한 문제일 수 있다고 추측하고 있습니다… DiscoTOC가 j/s가 더 많은 요소를 추가하기 전에 검색한다면…

여러 테마 j/s 코드가 api.cooked(를 호출할 때 실행 순서는 무엇에 의해 결정됩니까?

bump? :slight_smile:

20자 채우기 위한 장난기

DiscoTOC는 게시글 내용에서만 실행된다는 점에 유의하세요. 게시글 외부에 해당 요소를 삽입하면 인식되지 않습니다.

아직까지 JS 실행 순서를 정의할 필요가 없었던 것 같습니다.

게시물 내부에 삽입하는 것이 맞습니다. 그래서 실행 순서가 문제라고 의심하고 있습니다.

어떤 코드 조각이 실행 순서를 결정하는지 알아내야 합니다… 제 컴포넌트가 TOC보다 먼저 실행되도록 하는 지렛대가 될 것입니다. 예를 들어, 컴포넌트 이름의 알파벳 순서(즉, 관리자 영역의 컴포넌트 목록에 표시되는 이름)라면, 제 컴포넌트 이름을 그에 맞게 지정해 볼 수 있습니다.

컴포넌트 실행 순서는 컴포넌트 이름에 기반하지 않는다고 꽤 확신합니다. 기본적으로 ID에 기반합니다.

그럼에도 불구하고, 고급 사용 사례를 위해 초기화자(initializer) 순서를 설정할 수 있습니다. DiscoTOC를 이름이 지정된 초기화자에 넣으면 DiscoTOC보다 먼저 코드를 실행할 수 있게 해 드릴 수 있지만, 명확한 답변을 드리기 위해 먼저 어떤 작업을 하려는지 알아야 합니다.

여기서 하는 수정 작업은 HTTP/AJAX 요청에 기반한 것이 맞습니까?

AJAX는 맞습니다. 다만 동기식 호출을 사용했습니다. (동기식 AJAX라는 역설적인 표현은 늘 마음에 들어했거든요 :^)

다음 단계로는 제대로 된 컴포넌트를 만드는 것이 필요하다고 생각합니다. 지금은 제 테마의 헤더에 그냥 붙여넣은 j/s 코드일 뿐이거든요. 그러면 신중하게 선택한 ID를 가지고 조금 만져볼 수 있을 겁니다. "_foo"나 “0-foo” 정도면 충분할지도 모르겠네요.

저도 마찬가지죠 :wink:

맞아요. 이름 지정된 초기화자(initializer)와 초기화자 순서를 사용하려면, 컴포넌트에 /javascript 폴더 안에 초기화자가 있어야 합니다.

걱정 마세요. 그 부분에 대해 도와드릴게요. 내일 전체적인 답변을 드리겠습니다.

얼마 전, 제 j/s 해킹 코드를 정식 테마 컴포넌트로 전환했습니다.

제 컴포넌트가 Discourse의 목차(Table of Contents)보다 먼저 실행되도록 순서를 조정하는 작업을 다시 진행해 보고 싶습니다.

기억이 맞다면, 테마 컴포넌트는 플러그인 _이후_에 평가됩니다.

잘못된 정보일 수도 있지만, 이름 순서대로 로드되므로 이름 앞에 x-를 붙이면 특정 테마 컴포넌트가 가장 나중에 평가되도록 하는 데 도움이 되었습니다.

그것은 괜찮습니다. 저는 DiscoTOC( https://github.com/discourse/DiscoTOC.git ) 컴포넌트와 제가 직접 만든 컴포넌트의 순서를 조정하려고 시도하고 있습니다.

위에 다른 사람들의 답변에 따르면, 컴포넌트의 _이름_은 실행 순서에 영향을 미치지 않는다고 합니다. 저는 방금 이름을 aa-mycomponent과 x-last-DiscoTOC로 변경해 보았지만 작동하지 않습니다. [DiscoTOC는 DOM에 동적으로 추가된 제목을 포함하지 않습니다—예, 게시글 본문 내에서]

https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160

@Johani 5월에 생각하신 내용에서 더 이상의 아이디어가 있으신가요?

음… 아마 문제가 순서보다 더 깊은 곳에 있을지도 몰라요. 방금 inspect를 눌러봤더니, DOM에서 HTML 헤딩인 줄 알았던 요소들이 실제로는 class="d-toc-ignore"가 붙은 DIV 태그더라고요.

더 깊이 파고들 때인 것 같아요. 내 _헤딩_들은 어디로 간 걸까요? :slight_smile:

음, 아주 기본적인 예시를 통해 그 주장을 어느 쪽으로든 입증해 볼 수 있을 것 같습니다.

두 개의 간단한 컴포넌트를 만들어 같은 것을 오버라이드하거나 연결해 보세요. 예를 들어, 약간 차이가 있는 간단한 템플릿을 사용할 수 있습니다. 알파벳 순서에서 뒤에 오는 이름으로 한 컴포넌트를 호출하고, 어떤 것이 테마를 오버라이드하는지 확인해 보세요.

여기 모델의 코드에서 이름 순서대로 정렬되는 것이 매우 명확합니다:

이름은 실행 순서에 영향을 주지 않습니다. @merefield 님이 링크한 부분은 관리자 UI에서 어떻게 표시되는지를 결정할 뿐, 실제 실행에는 사용되지 않습니다.

실행 순서에 관련되는 부분은 다음과 같습니다:

즉, 데이터베이스의 ‘id’ 오름차순으로 실행됩니다.

Discourse 인스턴스 간에 이식 가능한 유일한 보증은 theme 코드가 항상 theme component 코드보다 먼저 실행된다는 것입니다.

@Johani 님이 위에서 언급했듯이, 다른 컴포넌트가 로드된 후에 코드를 실행해야 한다면 가장 좋은 방법은 순서를 지정할 수 있는 Ember 이니셜라이저를 사용하는 것입니다. 불행히도 이 경우에는 바로 적용할 수 없는데, DiscoTOC가 Ember 이니셜라이저를 사용하지 않는 것으로 보이기 때문입니다. DiscoTOC를 멀티파일 JavaScript(따라서 Ember 이니셜라이저)를 사용하도록 업데이트하는 것은 분명히 pr-welcome(기여 환영)입니다.

그 점은 아쉽습니다. 유용할 수 있을 것 같거든요. 그래도 설명해 주셔서 감사합니다!

(…그리고 이것은 Theme component order of precedence 와 관련이 있습니다.)

다시 언급하자면, DB ID 우선순위가 실제로 작동합니다. 제 필요를 해결해 주었습니다. 감사합니다!