reacton-loader

Loader for single-file Reacton components in Webpack

Install

npm i reacton-loader -D

A fragment of the working project is shown below:

webpack.config.js

module: {
  rules: [
    {
      test: /\.htm$/,
      loader: 'reacton-loader',
    },
    ... // other rules
  ]
},

Mixins.js

export default class {
  getStringInUpperCase(str) {
    return str.toLocaleUpperCase()
  }
}

MyComponent.htm

<my-component>
  <h1>Hello, {{ getStringInUpperCase(message) }}!</h1>
        
  <style>
    h1 {
      color: {{ color }};
    }
  </style>

  <script>
    import Mixins from '../Mixins'

    exports = class extends Mixins {
      constructor(props) {
        super()
        this.message = 'Reacton'
        this.color = props.color
      }

      static mode = 'open' // add Shadow DOM
    }
  </script>
</my-component>