zma-loader

ZMA Component Loader

Webpack loader for ZMA single file components

What is ZMA Component Loader?

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

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

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

    return $render;
  };
</script>

Installation

npm i zma-loader

Configuration

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

      ...
    ]
  }
  ...
}

JSX

ZMA v6 single file components also support JSX:

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

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

// my-page.zma.js

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

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