API

TIP

For a better reading experience, the following code examples are all written using JSX syntax, except for the html API which is written using tag templates.

defineComponent

Define components.

The first parameter is the configuration object and can be passed. Its configuration property is mount, which is used to mount the root component. Receives a "container" parameter, which can be an actual DOM element or a CSS selector string.

The second parameter is a function and must be passed. Return the HTML template. The parameter of the function is an object, and the properties of the object are content and setData respectively.

defineComponent(
  {
    mount: '#app',
  },
  () => {
    return () => (
      <div>
        <h1>Hello Mettle</h1>
      </div>
    );
  }
);

Among them, we can use content to define data for the component and use it when you need it.

const app = defineComponent(({ setData, content }) => {
  content.data = {
    name: 'Mettle',
  };

  return () => (
    <div>
      <h1>Hello Mettle</h1>
    </div>
  );
});

console.log(app.data); // {name:'Mettle'}

setData

Modify page data.

The first parameter is a function and must be passed. Execute the callback function to modify the associated page data. The second parameter is the context, which must be passed in the outer scope but not in the inner scope.

Internal scope:

defineComponent(({ setData }) => {
  let count = 0;

  function add() {
    setData(() => {
      count++;
    });
  }

  return () => (
    <fragment>
      <button onClick={add}>Add</button>
      <h1>{count}</h1>
    </fragment>
  );
});

External scope:

import { defineComponent, setData } from 'mettle';

let count = 0;

const app = defineComponent(() => {
  return () => (
    <fragment>
      <button onClick={add}>Add</button>
      <h1>{count}</h1>
    </fragment>
  );
});

function add() {
  setData(() => {
    count++;
  }, app);
}

html

html`` is a tag function. The syntax of the tag function is to directly follow the function name with a template string. For example, you can write HTML tags directly in the template string.

In the JSX syntax environment, this API will not be used.

defineComponent(() => {
  let count = 0;

  return () => html`<p>${count}</p>`;
});

TIP

If you are using the VSCode editor, you can go to the store to download the es6-string-html plug-in, This plugin enables HTML template string highlighting.

onMounted

Register a callback function to be executed after the component is mounted.

defineComponent(() => {
  onMounted(() => {
    console.log('onMounted', 'about');
  });

  return () => (
    <fragment>
      <h1>About</h1>
    </fragment>
  );
});

onUnmounted

Registers a callback function to be called after the component instance is unmounted.

defineComponent(() => {
  onUnmounted(() => {
    console.log('onUnmounted', 'about');
  });

  return () => (
    <fragment>
      <h1>About</h1>
    </fragment>
  );
});

domInfo

Get DOM information.

defineComponent(() => {
  const h1 = ref();

  function getDomInfo() {
    console.log('domInfo', domInfo.get(h1));
  }

  return () => (
    <fragment>
      <h1 $ref={h1} onClick={getDomInfo}>
        Hello
      </h1>
    </fragment>
  );
});