Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible to unify React-like and Web Components? #190

Closed
tbranyen opened this issue May 23, 2020 · 2 comments
Closed

Possible to unify React-like and Web Components? #190

tbranyen opened this issue May 23, 2020 · 2 comments
Labels
diffhtml-components Components idea An idea for the project

Comments

@tbranyen
Copy link
Owner

tbranyen commented May 23, 2020

The logic is already mostly shared between the two implementations. This would allow importing React components and using them as Web Components. The major difference would be defining if the Shadow DOM should be used or not. This would effectively make it so you would only ever need to import Component, and then use the result immediately in a Custom Element definition.

import '//diffhtml.org/core';
import { Component } from '//diffhtml.org/components';

class MyComponent extends Component {
  render() {
    return 'hello world';
  }
}

customElements.define('my-component', MyComponent);
@tbranyen tbranyen added diffhtml-components Components idea An idea for the project labels May 31, 2020
@tbranyen tbranyen changed the title Possible to unify React-like and Web Components Possible to unify React-like and Web Components? Aug 18, 2020
@tbranyen
Copy link
Owner Author

This is possible thanks to the great suggestion by @rniwa found in here: WICG/webcomponents#587. If the component has been registered with customElements we can automatically put the component in "web" mode. This means that function components will work as well! There will be a single package/build to handle function components (stateless, stateful, and web) and class components (stateful and web). Very cool!

@tbranyen
Copy link
Owner Author

There is more work to do, but they are unified now in master and I will continue to improve so that the performance and expectations are met. Right now class components inherit from HTMLElement which is not correct as only Web Components should.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
diffhtml-components Components idea An idea for the project
Projects
None yet
Development

No branches or pull requests

1 participant