reactml / loader

The webpack loader for Reactive Markup Language(RML).

@reactml/loader

The @reactml/loader impl the webpack loader for React Markup Language(RML).

Usage

To begin, you'll need to install @reactml/loader:

npm install --save-dev @reactml/loader

Then add the plugin to your webpack config.

For example:

file.js

import Module from './module.rml';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.rml$/i,
        loader: '@reactml/loader',
        options: {
          renderer: 'react',
        },
      },
    ],
  },
};

Options

• renderer {String} Determin react replacement renderer. (default to 'react')

And run webpack via your preferred method.

CSS PreProcessor Support

For example, to compile our <style> tag with Scss:

Tips: Default lang iscss.

In your webpack config:

module.exports = {
  module: {
    rules: [
      // this will apply to both plain `.scss` files
      // AND `<style lang="scss">` blocks in `.rml` files
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
}

Any content inside the style block with lang="scss" will be processed by webpack as if it's inside a *.scss file.

<style lang="scss">
/* Write SCSS here */
</style>

CSS Modules

First, CSS Modules must be enabled by passing modules: true to css-loader:

// webpack.config.js
{
  module: {
    rules: [
      // ... other rules omitted
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // enable CSS Modules
              modules: true,
            }
          }
        ]
      }
    ]
  }
}

Then, add the module attribute to your <style>，and use className as is:

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

<div className="red bold">Hello RML</div>

Use global scope in CSS Modules:

Only works when CSS Moudles is enabled.

You can add suffix : to your class declaration to tag which to be gloabl,

For example:

<style lang="scss" module>
  .container {
    color: green;
  }

  :global {
    .global-container {
      background: grey;
    }
  }
</style>
<div className="container :global-container" />

After compiled, global scope className will not be invoved:

<style>
  ._2zQP9LGGLck7rMhc9zNHw_ {
    color: green;
  }

  .global-container {
     background: grey;
   }
</style>
<div class="_2zQP9LGGLck7rMhc9zNHw_ global-container" />

loader's Issues

Support Conditionals and Loops

Variable scope of template

By design, the variable scope of the template should come from the return value of the function:

<script>
export default function(props) {
  return {
    value: '123'
  };
}
</script>

<div>
  {value}
</div>

The actual implementation is:

<script>
export default function() {
  return {
    text: 123
  };
}
</script>

<div>
  <span>变量：</span>
  <span>{text}</span> {/* 123 */}
  <span>{props.text}</span> {/* 123 */}
</div>

I never defined props and props is not returned in return value.

If I use props as the return value:

<script>
export default function(props) {
  return {
    props
  };
}
</script>

 <div>
  <span>变量：</span>
  <span>{props.text}</span> {/* undefined */}
  <span>{props.props.text}</span> {/* text value */}
</div>

This implementation is inconsistent with the design.

CSS Modules

See conclusion of ReactML/ReactML#1

cc @alvinhui @imsobear @yuanyan

SourceMap Support

Support doesn't include `<script>` and `<style>`

Define rml as:

<div>
    Hello world
</div>

<script> and <style> are not required.

Now I have to:

<script>
export default function() {
  return {};
}
</script>
<style></style>

Template Syntax for annotations

By design RML Template Syntax is follow XML Template Syntax, Annotations in XML should be:

<div>Hi</div>
<!-- <span>Alvin</span> -->

But now the syntax of the Loader implementation is JSX：

<div>Hi</div>
{/* <span>Alvin</span> */}

Support inline expression

Object:

<script>
  export default function () {
   return {
     color: 'yellow',
   };
 }
 </script>
<span style={{color: color}}>
  object
</span>

Function:

<Button type="primary" onClick={function() {
  alert(1);
}}>
  click
</Button>

CSS Modules Problem

Code:

<style lang="scss" module>
  .container {
    .strong {
      font-weight: bold;
    }
  }
</style>
<div className="container">
  <span className="strong">Class 样式</span>
</div>

Render result:

No strong style appears to be generated.

Support import RML file without suffix

Now I have to add the suffix manually when import the RML file:

1. In generic files: import Home from '@/pages/Home/index.rml';
2. In RML files: <import default="Guide" from="@/components/Guide.rml" />