Style Handling and React forwardRef

Breaking Changes

Properties listed as style are now correctly injected as React style objects. You can now style your web components! Additionally, the ref now refers directly to the HTML web component, and not the React component. You may need to update your ref logic if you're it.

New Features

Stylish 😎

Use the React style functionality to correctly style your components. See the updated README for an example

Special Thanks

Thanks to @leifriksheim for their style and forward ref PR

Added Forced Typing, a Testing Page, and Changed Booleans

Breaking Change

There are two breaking changes in this release. First, the way booleans are handled is slightly different. If you are using true / false values with web components, ensure that things are working as expected. Second, an optional second parameter for holding options is now available that allows you to force types. See the README for more information.

New Features

Force Typing

Want to bastardize event naming? Need to set those pesky booleans as attributes and properties? Really hate how you couldn't have one property be an attribute, property, and event handler? Say no more! With the new Options parameter, set to your heart's content! See the README for an updated example on usage

Examples and Testing Sandbox

Checkout the new tests folder to see examples of web components and their usage, including the new force options. Eventually this page will be used for Cypress tests

Special Thanks

Thanks to @nathfisher for his PR introducing forced typing

Improved Intellisense

Thanks to @Vlad160 for their help.

This release includes a couple version bumps, fixed package-lock file resolution, moved dev dependency, and better intellisense.

Lowered peer version of react

Lowered peer version of react to 16.3.0. #3

Support for on-kebab-events

Migration

Any functional prop that was using the idiomatic on- prefix, such as on-my-event will now be handled as an event listener, not a property. If you have properties that use the on- prefix but which are not supposed to be event handlers, change their names.

Features

You can now target on-kebab-case events without frankensteining kebab and camel case together! Check the readme for more information and examples

Fixed Wrong Typing

Added correct TS types for better IDE support.

Fixed React toLowerCase'ing string properties

Attributes are now also saved directly as props to the object. This addresses an issue where React will toLowerCase a attribute name, making it not found by certain web component libraries such as Vaadin Components.

(Actually) Fixed className

Fixed this.ref.className -> this.ref.current.className

Fixed className

className now gets set as the class on the component

Fixed passing props on component's first mount

The component now received props on first mount as well as subsequent updates