Add React/Svelte/Vue app examples, with React component wrapper #21
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
JoltCode
requested changes
Apr 3, 2024
| import hotLogo from './assets/hot_logo.png'; | ||
| import { useState } from 'react'; | ||
|
|
||
| import HotButton from '../../../react/HotButton'; |
There was a problem hiding this comment.
Perhaps something for the future - but maybe we could make it so this either imports directly from our npm package? - Would look more clear for people looking at the example
There was a problem hiding this comment.
Definitely! I was wondering on the best approach here:
- Bundle the React wrappers in the main
ui.js, as it's very little code. - Create a separate NPM package for the React wrappers and serve in the CDN via
react.jsor something. - Other I haven't thought of.
Comment on lines
+6
to
+13
| <link | ||
| rel="stylesheet" | ||
| href="http://localhost:8080/style.css" | ||
| /> | ||
| <script | ||
| type="module" | ||
| src="http://localhost:8080/ui.js" | ||
| ></script> |
There was a problem hiding this comment.
I don't think we should be using localhost for these examples - would be nice so they can be deployed standalone on github pages for example - thoughts?
There was a problem hiding this comment.
Yeah true, it would be cool to serve these (although as far as the user would see, it's exactly the same page being rendered for each framework).
I was using localhost for testing & updated vite dev to serve both the components & the demo page.
Can be updated once the lib is released and stable! (and published to GH pages too)
| vue({ | ||
| template: { | ||
| compilerOptions: { | ||
| isCustomElement: (tag) => ['hot-button'].includes(tag), |
There was a problem hiding this comment.
Would be nice in the future to make it so this is auto generated by our lib!
There was a problem hiding this comment.
That would be so nice.
We could actually generate the React wrappers dynamically in the same way that shoelace do it too!
So react wrappers / vue vite config are dynamic
|
Thanks Sam, so we should now make CSS styling work and also have a way to generate the NPM package for React, compatible with React 18 but also 17. Regarding the development process, the component is developed as a web component and then a React version will be generated automatically, right? |
|
Also, I think we should have a React storybook, because we need to be sure that things are working good on React first, as it's our priority #1. |
|
Joe fixed the CSS loading 😁 Currently the Reacrlt wrapper is written manually, released as a separate package to import (it's a small amount of code). @emi420 have you managed to run the storybook we have currently? It loads the button and all it's props. Feel free to modify! |
|
I'm cloning the project, running |
|
Try with |
|
Also the storybook hasn't been tested in this PR! (lots of changes, hopefully something hasn't broken) It should work on the main branch |
Not working ( |
We can try merging the master branch into this one. |
…to feat/react-wrappers
|
Can you post a few more details to help debug please? Perhaps it's a conflict with trying |
|
I've removed the whole directory and cloned it again, installed packages with |
|
@spwoodcock Could we merge this, as it is working, then I could work on moving us to a monorepo as discussed? I think that should sort any of these dep issues for @emi420 anyway. |
Try |
|
Thanks @JoltCode ! it was that, I was still using yarn for running the project. Now it's working, but styles are missing: Main Storybook: 
React example: 
|
|
The styles are missing in the storybook. Try running the examples though, the styles work fine there. |
|
Adding this here in case we want to use it: // A parent element for all component to inherit properties from
import { LitElement } from 'lit';
import { property } from 'lit/decorators.js';
export default class HotElement extends LitElement {
// Make localization attribute reactive
@property() lang: string = "en-GB";
// NOTE: register component without decorator, to allow for import via React wrapper
static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {
const currentlyRegisteredConstructor = customElements.get(name) as
| CustomElementConstructor
| typeof HotElement;
if (!currentlyRegisteredConstructor) {
customElements.define(name, class extends elementConstructor {} as unknown as CustomElementConstructor, options);
}
}
}
export interface HotElementProps extends HotElement {
name: string;
disabled?: boolean;
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #13
Includes
hot-buttonweb component usage in React.createComponentfrom @lit/react.In the long run I am thinking we can:
Still to do