How to do constructor injection? about slim.js HOT 11 CLOSED

1. use injections <my-tag template-provider="{myTemplateProvider}" ...>
2. before the element is created, declare the injection Slim.inject('myTemplateProvider', () => templateProviderInstance)
3. on the class itself, declare a template getter.... class MyClass { get template() { return this.myTemplateProvider.getTemplate() } }

during the creation routine the injection will take place, during the rendering phase it will take the template string from the provider

for that tag, don't use the template decorator

from slim.js.

Please let me know if that works for you and we can close this thread

from slim.js.

the Example component's prototype will have a template getter that returns null.
Try in your main.ts doing this:

template(templateProvider.templates['sws-example'])
class SomeNewElementClass extends ExampleComponent {}

let eC = new SomeNewElementClass()

can you put your code in webpackbin or similar?

from slim.js.

I did put together a sandbox in webpackbin

https://www.webpackbin.com/bins/-KpPuTpl9q-E_E6KSmBr

And we here at the office wanted to ask you, if there is a specific reason why you emit "Illegal constructor TypeError" and do not allow injections? Or is there a possible fork that we can provide to the issue?

With very kind regards and thanks for you help
tilman

from slim.js.

for some reason i cannot edit or view any of the files in your bin

from slim.js.

basically, custom elements should not have arguments in their constructors, as they are created from the HTML. slim provides an injection mechanism (currently not yet documented) that is invoked between the "onBeforeCreated" and "onCreated". example:

<my-element some-property="{injectionName}"></my-element>

and in your source code best used before the HTML is created

let SomeSingleton = new MySingleton();

Slim.inject('injectionName', (element) => {
  //element is optional
  return SomeSingleton;
})

...

@tag('my-element')
class extends Slim {
  onCreated() {
    console.log(this.someProperty); // Injection!
  }
}

if The injection is declared before (or any other element using the injection) then you will have access to the injection result at the designated property

from slim.js.

you just have to click on Copy Bin in the left sidebar than you can edit you own derivative.

from slim.js.

I'm not sure what you are trying to achieve. If you want to use arbitrary templates, wrap them in template tag and not use existing declared custom element tag

...

do you wish to inject your template during runtime from template provider?

from slim.js.

yes, that was the idea. We are building an app that is unfortunately strongly backend rendering based and I have to avoid duplicate dom at runtime at a minimum. I found a way around within our workflow.

from slim.js.

hey Avichay, due to the many issues I had trying to implement with your library I had to drop it for the current project. But I understand how difficult it is to concentrate on certain features of a library.

from slim.js.

:( what was the problematic feature that made you drop it?

from slim.js.