¿Qué controla el orden de ejecución del j/s de los componentes de Theme?

I have j/s in my theme (am I infamous yet? ;) which is modifying the DOM by adding elements via api.decorateCooked(…. It inserts a variety HTML head elements.

I also have the DiscoTOC Theme component installed.

However, adding the usual <div data-theme-toc="true"> </div> that DiscoTOC notices and expands, doesn’t generate a table-of-contents including my dynamically inserted elements.

I’m figuring this might be as simple as execution order… if DiscoTOC looks before my j/s adds more elements . . .

What determines the ordering of execution if multiple bits of theme j/s code are calling api.cooked(?

3 Me gusta

bump? :slight_smile:

plus silliness to get to 20 characters

Note that DiscoTOC only runs on post contents - if you’re inserting those elements outside posts, it won’t see them.

I don’t think we’ve needed to define JS execution order yet.

1 me gusta

I’m inserting within the post, yes. That’s why I suspect execution order.

Some bit of code determines the execution order… that’s the leverage point for me to get my component before TOC. eg, if it’s alpha by component name (ie, as displayed in the Component list in Admin area) then I can try namin my component accordingly, etc

Pretty sure that the component execution order is not based on the name of the component. It’s based on the ID by default.

That said, you can set initializer order for advanced use cases. I can put DiscoTOC in a named initializer so you can run your code before DiscoTOC, but I need to know what you’re trying to do first to give you a clear answer.

Your modifications here are based on an HTTP/AJAX request, correct?

1 me gusta

Yes AJAX, but using a synchronous call. (I’ve always loved the oxymoron of synchronous AJAX :^)

I’m feeling like my next step is create a proper component—atm, it’s just some j/s pasted into my Theme’s Header. Then I can try fiddling with a judiciously chosen ID. “_foo” or “0-foo” might be all I need.

1 me gusta

Don’t we all :wink:

Correct. If you want to use named initializers and initializer order, your component will need to have an initializer in the /javascript folder.

No worries, though. I can help with all of that. I’ll get back to you on this tomorrow with a full answer.

1 me gusta

Hace un tiempo, convertí mi hackeo de j/s en un componente temático adecuado.

Me encantaría volver a conseguir que el orden sea tal que mi componente se ejecute antes que la tabla de contenidos de Discourse.

Si no recuerdo mal, los componentes de tema se evalúan después de los complementos.

Y puedo estar equivocado, pero se cargan en orden alfabético, por lo que poner una x- delante del nombre me ha ayudado en el pasado a asegurar que un componente de tema específico se evalúe al final.

Está bien. Estoy intentando organizar el orden del componente DiscoTOC ( https://github.com/discourse/DiscoTOC.git ) y un componente de mi propia creación.

Las respuestas de otros sugieren que el nombre del componente no afecta el orden de ejecución. Acabo de renombrarlos a aa-mycomponent y x-last-DiscoTOC y no funciona. [DiscoTOC no incluye encabezados añadidos dinámicamente al DOM, sí, dentro del cuerpo de la publicación]

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

@Johani ¿alguna idea adicional de tu tren de pensamiento de mayo?

hmmmmmmm… tal vez lo que está mal es más que el pedido. Acabo de inspeccionar… y las cosas en el DOM que pensé que eran encabezados HTML… son en realidad etiquetas DIV con class=\"d-toc-ignore\"

Hora de que profundice más. ¿A dónde fueron mis encabezados? :slight_smile:

Bueno, creo que podrías demostrarlo de cualquier manera probando un ejemplo muy básico.

Crea dos componentes simples, anulando o conectando lo mismo, quizás una plantilla simple con una ligera diferencia, llama a uno por un nombre que comience más tarde en el alfabeto, observa cuál termina anulando el tema.

Está muy claramente ordenado por nombre en el código aquí en el modelo:

1 me gusta

El nombre no afecta el orden de ejecución. @merefield la línea que enlazaste afecta cómo se muestran en la interfaz de administración, pero no se usa para la ejecución real.

Esta es la línea relevante para el orden de ejecución:

Por lo tanto, se ejecutan en orden ascendente de ‘id’ en la base de datos.

La única garantía que es portable entre instancias de Discourse es que el código del tema siempre se ejecuta antes que el código del componente del tema.

Como mencionó @Johani anteriormente, si necesita ejecutar código después de que se haya cargado algún otro componente, la mejor opción probablemente sea usar un inicializador de Ember, que admite el orden. Desafortunadamente, eso no será posible de inmediato en este caso, ya que parece que DiscoTOC no está utilizando inicializadores de Ember. Actualizar DiscoTOC para usar javascript de múltiples archivos (y, por lo tanto, inicializadores de Ember) ciertamente sería pr-welcome

3 Me gusta

Es una lástima porque podría ser útil. ¡Gracias por aclarar de todos modos!

1 me gusta

(…y esto está relacionado con Theme component order of precedence)

Solo para confirmar que el orden de precedencia de los ID de la base de datos funciona; Satisface mi necesidad. ¡Gracias a todos!

2 Me gusta