reacton-loader

reacton-loader

Loader for single-file Reacton components in Webpack

- Added example Webpack build for routes:

<my-menu>
  <nav #nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contacts">Contacts</a>
    <a href="/john/32">John</a>
    <a href="/john?age=32">Age</a>
  </nav>

  <script>
    import { myRoute } from '../Routes'

    exports = class {
      static connected() {
        // add a "click" event handler to the NAV element
        this.$refs.nav.addEventListener('click', event => {
          // cancel clicking on the link
          event.preventDefault()

          // trigger a link address event on myRoute element
          this.$route(myRoute, event.target.href)
        })
      }
    }
  </script>
</my-menu>

- Added example Webpack build for events:

<my-component>
  <button #reverse>Reverse array</button>
  <button #new>New array</button>
  <button #clear>Clear array</button>

  <script>
    import { myEvent } from '../Events'

    exports = class {
      static connected() {
        // add a "click" event handler for the button
        this.$refs.reverse.addEventListener('click', () => {
          // trigger "reverse" event on element myEvent
          this.$event(myEvent, 'reverse')
        })

        // add a "click" event handler for the button
        this.$refs.new.addEventListener('click', () => {
          // trigger "new-colors" event on element myEvent
          this.$event(myEvent, 'new-colors', {
            // pass a new array to the event handler
            detail: ['blue', 'orange', 'purple', 'gold']
          })
        })

        // add a "click" event handler for the button
        this.$refs.clear.addEventListener('click', () => {
          // trigger "clear-colors" event on element myEvent
          this.$event(myEvent, 'clear-colors')
        })
      }
    }
  </script>
</my-component>

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>