Web Directive

A library to implement directive functions for native HTML without any framework, which is inspired by Vue.js.

See DEMO

<button w-copy="Text to copy">
  ...
</button>

<script>
  wd.register('copy', {
    mounted(el, { value }) {
      el.addEventListener('click', () => {
        navigator.clipboard.writeText(value);
      });
    }
  });
</script>

• Web Directive
  • Installation
    • Getting Started
    • Register Directives
  • Custom Prefix

Installation

NPM or Yarn

npm i web-directive

# OR

yarn add web-directive

UnPkg

<script src="https://www.unpkg.com/web-directive/dist/web-directive.umd.min.js"></script>

<script type="module" src="https://www.unpkg.com/web-directive/dist/web-directive.es.min.js"></script>

Getting Started

ES Module

import WebDirective from 'web-directive';

const wd = new WebDirective();
wd.listen();

export default wd;

Browser

<script src="path/to/web-directive/dist/web-directive.umd.js"></script>

<script>
  const wd = new WebDirective();
  wd.listen();
</script>

Listen to smaller scope.

const element = document.querySelector('#foo');

wd.listen(element);

Stop listening

wd.disconnect();

Register Directives

After register a directive (for example: foo), you can add w-foo directive to any HTML element and the directive will instantly work.

This is very useful that if you want to add some cross-platform custom logic to existing Vue/React/Angular template without writing code for every frameworks.

wd.register('foo', {
  // Reguired
  // When element attach to DOM or attribute attach to element
  mounted(el, bindings) {
    // Do any thing you want
    const { value } = bindings;
    
    el._foo = new Foo(value);
  },
  
  // Optional
  // When element detach from DOM or attribute dettach from element
  unmounted(el, bindings) {
    el._foo.stop();
    delete el._foo;
  },
  
  // Optional
  // When values changed
  updated(el, bindings) {
    const { value } = bindings;
    el._foo.setOptions(value);
  }
});

Now, add w-foo to HTML, it will run the mounted() hook:

const ele = document.querySelector('...');

ele.setAttribute('w-foo', '{ "options": ...}');

The bindings interface:

interface WebDirectiveBinding<T extends Element = HTMLElement> {
  directive: string;
  node: T;
  value: any;
  oldValue: any;
  mutation?: MutationRecord;
  dir: WebDirectiveHandler<T>;
}

Use JSON as value

wd.register('foo', {
  mounted(el, { value }) {
    const options = JSON.parse(value || '{}');
  },
});

Custom Prefix

const wd = new WebDirective({
  prefix: 'x-'
});

Todo

• Support modifier and arguments like: w-foo.bar:yoo