Reference to element in the component

[antonioaguilar]

I was just reading about NX - found it an interesting framework. However, from the docs, I could not find out if it's possible to get a reference for the DOM element the component is managing, for example if I want to do specific changes to the DOM (outside the framework) using jQuery. Could you provide an example of using NX along side of jQuery?

[solkimicreb]

All middlewares added with the component.use method have 3 parameters. The first parameter is the actual DOM element. (The component instance is a Web Component, which is a vanilla DOM element). You are free to use any of the native DOM apis on the element. NX is designed to work with post hooks only, so no native hack or other framework should break it (:

Edit: this is a super simple example

nx.component()
  .use((elem, state) => {
    elem.addEventListener('click', myHandler)
  })
  .register('my-comp')

[solkimicreb]

Thx for the feedback btw. I plan to do a docs revamp in the future, I will make sure to clarify this. 👍

[antonioaguilar]

Thanks for example. Could I just then wrap the element using jQuery

nx.component({ template: '<div id="container">hello there!</div>'})
  .use((elem, state) => {
    let el = $(elem);
    el.show();
    el('#container').addClass('change-color');
    elem.addEventListener('click', myHandler)
  })
  .register('my-comp')

will this example work?

[solkimicreb]

Sure, here is a copy-paste example.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://www.nx-framework.com/downloads/nx-beta.2.0.0.js"></script>
<script>
nx.components.app()
  .use((elem, state) => {
    let el = $(elem)
    el.show()
    el.find('#container').addClass('change-color')
  })
  .register('my-app')
</script>

<my-app>
  <div id="container">hello there!</div>
</my-app>

Just copy it into an empty HTML file and open it with your preferred browser. I never used jQuery, but I am pretty sure that you can combine it howerver you want with NX without issues.

[solkimicreb]

One small note:

The nx.component({ template: '' }) snippet won't work. If you would like to pass a template, you must use a component which uses the render middleware internally or you must add the middleware to the bare component by hand. The following two are equivalent.

nx.components.rendered({ template: ' ' })
  .register('my-comp')

nx.component()
  .use(nx.middlewares.render({ template: ' ' }))
  .register('my-comp')

Alternatively you can use the app, page, display or control components instead of rendered as they all use the render middleware internally (among with many others.)

I hope this makes sense, it might take some time to get used to this. To get some idea about the components you could check the source of some here. They are all a few lines long only.

Edit: you can find the docs for components here