ZMP Component Loader

Webpack loader for ZMP single file components

What is ZMP Component Loader?

zmp-loader is a loader for webpack that allows you to author ZMP Router components in a format called Single-File Components:

<!-- my-page.zmp.html -->
<template>
  <div class="page">${msg}</div>
</template>

<script>
  export default () => {
    const msg = 'Hello world';

    return $render;
  };
</script>

Installation

npm i zmp-loader

Configuration

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.zmp.html$/,
        use: [
          'babel-loader',
          'zmp-loader',
        ],
      },

      ...
    ]
  }
  ...
}

JSX

ZMP v6 single file components also support JSX:

<!-- my-page.zmp.html -->
<script>
  export default () => {
    const msg = 'Hello world';

    return () => <div class="page">{msg}</div>;
  };
</script>

// my-page.zmp.js

export default () => {
  const msg = 'Hello world';

  return () => <div class="page">{msg}</div>;
};