dna

Evolution-based components.

Working with DOM

It is possible to working with the DOM using DOM's functions and manipolate HTML elements and DNA component instances.

For example, we can retrieve a HTMLElement instance from a component instance using getComponentNode or retrieve a component instance from a HTMLElement instance using getNodeComponent.

What follows is a simple DNA component interacting with an external DatePicker, to show better a basic work with DOM functions.

First we install a DatePicker library, like flatpickr, and raw-loader to let webpack handle raw css files:

npm install -D flatpickr
npm install raw-loader --save-dev

webpack.config.js

  {
      // other rules..
      test: /\.css$/,
          use: ['raw-loader'],
  },

myComponent.js

import { BaseComponent, define, DOM } from '@dnajs/idom';
import flatpickr from 'flatpickr';
import css from 'flatpickr/dist/flatpickr.css';    // base css
import theme from 'flatpickr/dist/themes/confetti.css';    // theme css

export class MyComponent extends BaseComponent {
    connectedCallback() {
        super.connectedCallback();
        this.input = document.createElement('input');
        this.input.setAttribute('type', 'date');
        // 'this' is our component. 'this.node' represent our component's node element.
        DOM.appendChild(this, this.input);
        flatpickr(this.input, {
            inline: true,
        });
    }

    get css() {
        return css + theme;
    }

    get events() {
        return {
             'change .my-component input': (ev) => {
                let divElement = document.querySelector('#string-div');
                if (!divElement) {
                    divElement = document.createElement('div');
                    divElement.setAttribute('id', 'string-div');
                    // this.node === DOM.getComponentNode(this)
                    this.node.appendChild(divElement);
                }
                divElement.innerText = `You selected ${ev.target.value} date. Are you sure?`;
            },
        };
    }
}

define('my-component', MyComponent);

index.js

import { MyComponent } from './components/hello-world/hello-world';
import { render, DOM } from '@dnajs/idom';

render(document.body, MyComponent);

document.addEventListener('click', () => {
    const myComponentElement = document.body.querySelector('my-component');
    // access component instance from element's node
    const myComponent = DOM.getNodeComponent(myComponentElement);
    console.log('This is my component instance', myComponent);
});

Now we can run webpack and see the output at dist/index.html.

npx webpack app/index.js -o dist/bundle.js