UseHover/preact-rails

Can't mount component unless I use `export default class`

Closed this issue · 2 comments

Say I have a component in

image

(and assume I've already got JSX working with the appropriate babel plugin):

import { h, Component } from "preact"
import React from "preact/compat";

class SubscriptionRateEstimate extends Component {
  render (props, state) {
    return (
      <h2 class='thing'>Hello, {props.hi_there}</h2>
    )
  }
}

I've done yarn add preact_ujs and added the Preact UJS boilerplate to application.js like so:

var componentRequireContext = require.context("components", true);
var PreactRailsUJS = require("preact_ujs");

PreactRailsUJS.useContext(componentRequireContext)

And in my view I render this with:

    <%= preact_component('SubscriptionRateEstimate', { hi_there: 'me' }) %>

The component shell renders with the right data-preact-class and data-preact-props attributes, but it doesn't mount. Why? Well, looking at the getConstructor code in Chrome, we see:

image

... so it requires, but there is no default key in component.

If I add export default to the class definition in the component, it is found, but this detail isn't in the README. Should it be, or should SubscriptionRateEstimate be found where it is and I've missed some other detail?

Ofc, Garner's law holds here, and the moment I post it I finally happen upon export default Button in the README, so I'll apologise profusely and thank you for an excellent gem 😉

I think it would be good though to have a way of rendering non-default components...