luigi with vite

[lukascivil]

I have a large monolith project that uses Vite (with MUI, react-admin, typescript....) and I would like to transform it into a microfront-end. Is there any guide for using Luigi with Vite? And more examples of using the container?

I'm working on a complex example of use with Luigi here https://github.com/lukascivil/luigi-microfrontend. My study aims to validate this tool for implementation in the company I work for.

[lukascivil]

Second question, taking advantage of the momentum. Do you plan to support typescript in the core package? It would be of enormous value as it would catch errors before compilation and improve devx.

[lukascivil]

Third question, where can I find an example of use with luigi-container and luigi-compound-container? I couldn't make it work by importing an html file, just a JS file. Another detail is that there is no intellisense to guide me and the documentation didn't help much, here's my feedback.

[lukascivil]

After a lot of study, and trial and error I did it. But I had a question as to why it only works without the "webcomponent" property.

https://github.com/lukascivil/luigi-microfrontend/blob/master/apps/remote-2/src/remote2.tsx

<luigi-container
      data-test-id="iframe-based-container-test"
      viewURL="http://localhost:3004/#/posts"
      context='{"title": "Projects", "content":" "}'
      // It only works if I don't pass webcomponent. (What???)
      // If it passes false or true, it gives an error. "GET http://localhost:3004/ net::ERR_ABORTED 404 (Not Found)"
      webcomponent="false"
    >
</luigi-container>

[ndricimrr]

Hi @lukascivil ,
Thanks for the questions.

1. Is there any guide for using Luigi with Vite?

There is no specific guide on using Luigi with Vite. Whether you are using Webpack or Vite or any other build tools, you would deal with it as you do with other npm packages too. Is there a specific thing that you found difficult in using Luigi with Vite ?

2. And more examples of using the container?

Luigi Container is a relatively new addition to our set of packages. It is still growing and we are continuously working to add and improve its documentation. We will surely add more simple examples of using the container to help people get a quick start into it. Thanks for pointing this out.

3. Second question, taking advantage of the momentum. Do you plan to support typescript in the core package? It would be of enormous value as it would catch errors before compilation and improve devx.

Typescript support for core package has been delayed due to other issues at hand, but it is certainly in our goals and we definitely plan to support it in the future.

4. Third question, where can I find an example of use with luigi-container and luigi-compound-container? I couldn't make it work by importing an html file, just a JS file.

We will be adding more get-started examples regarding this. Thanks again for pointing it out.

5. Another detail is that there is no intellisense to guide me and the documentation didn't help much, here's my feedback.

Attributes that you can pass to / can be found in the documentation links here:
container api
compound container api
Regarding adding Intellisense: luigi-container in itself is a webcomponent on its own (that can host a webcomponent or iframe-based microfrontend). Adding intellisense to support autocompletion for better devx is a good idea, but its currently limited as Code Editors (VSCode etc. ) don't have autocomplete for custom web components yet, but it would be certainly something that we would look forward to add in the future.

Since we have added Typescript support for Luigi Container you can already make use of it by programmatically building your luigi container.
Example:

     // define your luigi container with defer-init set.  
     <luigi-container defer-init></luigi-container>
    
    // grab the container element to modify
    const myContainerA = (document.querySelector('luigi-container') as LuigiContainer);
    myContainerA. -> would show the Intellisense options/suggestions 
    
    // initialize the luigi-container
    myContainerA.init();
    

6. After a lot of study, and trial and error I did it. But I had a question as to why it only works without the "webcomponent" property.
   webcomponent="false"

This is actually due to the Boolean attribute properties for HTML elements which apply to our luigi-container as well. In that case any value you set would be taken as true by convention and not setting the attribute would be a false. If you are using a viewURL that is not a webcomponent JS file it would expect the webcomponent value to not be set in this case.

This has been misleading for developers and we will definitely try to document that properly and make it more intuitive.

Hope this helps with getting started. If there are any other questions let us know :)