Angular plugin

Hello

I am playing around with carte blance to attempt to create a prototype of it using angular2. the initial setup was pretty nice, and getting the carteblanche running the frontend in a working environment with webpack.

Now I have a couple of questions regarding the webpack hooks and the frontend. Mainly 2 things :

1 ) I am using the carte-blanche-plugin-before-processing hook to analyze my component. In angular2 components define inputs (equivalent to props in react). I am using http://typedoc.io/ to analyze the component and it gives me a nice representation of the inputs and its types (because most angular2 apps use typescript I am focusing on that now, simplifies a lot). Now the thing is this function is asyncronous and I get this value in a callback. Something like

compilation.plugin('carte-blanche-plugin-before-processing', (data) => {
    // Read the data from this component
    type_doc_parser(data.source, (parsedComponent) => {
        data.AngularSouce = parsedComponent;
    });
});

However this does not work, it is as if this hook is expecting whatever to get applied to the data object to be syncronous. If I do a simple assignment it works fine, but if I assign inside the callback or in any async way it does not work. Maybe something obvious…but I cant seem to figure out why. this can be seen here https://github.com/joaogarin/carte-blanche-angular2/blob/master/plugin.js#L89

2 ) The frontend essencially runs fine, but I am not sure how to actually render stuff in there if that makes sense. In the examples I see from the plugins you provide you use react which renders HTML directly in javscript. That’s not how it works with angular. So in Angular the natural way to do this is to render a component which can then use something called the dynamic component loader to render other components dynamically. but for that I first need to be able to render something inside my frontend. Even if I try to just render static HTML in there, it does not work and prints it as a string only. https://github.com/joaogarin/carte-blanche-angular2/blob/master/frontend/index.ts Right now I am not really doing anything in there…but I would like to just figure out how to get my HTML to render in there properly. Maybe I need to understand better what the return in this function means, where does it go to.

I think cartblance would play very well with angular. There are some tricky things and I dont think getting the metadata from the components is that part, that is actually fairly easy at least with apps running typescript (which are the vast majority). But rendering might be the tricky part.

Angular needs to do a bootstrap to render stuff in the frontend. This means basically that I need to run a “Angular” app in the frontend. This means having a main HTML tag like <app-carte-blanche></app-carte-blanche> and a piece of javascript that will take this and bootstrap the angular app inside it.

This angular app will then load a main component (much like your playground) which will be responsible for rendering the component dynamically depending on the inputs chosen by the user, or the randomize algorythm…I would get into that later as soon as I can render a simple component in the frontend. If I get a component rendering in the frontend everything after that will just fall into place.

If this does not make perfect sense I would say lets get the first issue going, that the second one I still can investigate more. I havent spend all that much time on it, also javascript is kind of my hobbie so I do have some limited experience with it. but seems like this can be a fun thing at least to kickstart and someone can pick up and improve it with me.

[joaogarin]

React.createElement seems to be what I was looking for;P

[mxstbr]

Awesome!! 👍 👍