Using components of one aurelia app as web components in another aurelia app

Help Requests
1

Hi everyone,

I would like to use the components of one aurelia app as web components for other aurelia apps, e.g: My first app “Chat” presents a couple of web components to be used in other projects and my second app “platform” integrates these components.

I found in another discussion (Sharing components between projects) that the general consensus was to use aurelia-plugins for the components and to implement the plugins as a npm module.
My preferred path would be, to be able to reference the “chat” app as a web component in my “platform” app and to not use npm. Just like other web components here: webcomponents.org/element/progress-ring-component or webcomponents.org/element/@zooplus/zoo-web-components/6.0.3

I did try out the aurelia plugin web-components, but so far I was not able to implement the plugins into the “platform” project.

Does anyone know a way, to create web components from an aurelia app and use those components in another aurelia app (other than plugin + npm)?

Kind Regards,
Benzolitz

1 Like
2

May I know what error you got when trying to implement the components to the platform app?

3

I don’t really get any errors. It just does not work. No matter which combination of JavaScript files I add to my platform app, I can’t access the components of the chat app.

1 Like
4

Can you help show what you meant with a gist? maybe pseudo code is fine too, working is more awesome though :stuck_out_tongue:

Please try it here https://gist.dumber.app

6

I uploaded a test project onto github (https://github.com/Benzolitz/MyLoremIpsumHomepage), since I don’t think I can actually show what I want to do with such lightweight IDEs.

I got a step closer to my goal - sadly I haven’t had much time to work on this the last couple of weeks.

I now have two separate projects working:

  • portal which is my portal application I want to add other applications too.
  • todo-list which is supposed to be used as a standalone application, but also as a web-component in other applications.

In the todo-list application I added two web-components (todo-list & todo-list-item) which get set as web-components in the src/resources/index.ts file.
If I start the todo-list application I can use the web-components inside this app as standard html-web-components. When I build the project to produce the todo-components.min.js file I can add this file to my other project portal and use the web-components as standard html-web-components aswell.

My problem at the moment is, that I can not use any aurelia functionality with these web-components - not in my todo-list and also not in my portal application.

Does anyone know any way, to combine the web-components with aurelia functionality?

1 Like
7

The idea of aurelia-web-component plugin is that you can define your web-component custom-element, and drive their behaviors with Aurelia view models. Since it’s about defining your view models and the instructions for those view models, you can, and should be able to easily connect projects together using the view models.

Something like this:

In project 1

export class MyPlugin1TodoList {

}

In project 2

import { MyPlugin1TodoList } from 'project-1';

export function configure(aurelia) {
    
   aurelia
     .start()
     .then(() => {
      const registry = aurelia.container.get(CustomElementRegistry);

      return registry.register(MyPlugin1TodoList);
    });
}