-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove mobx, use functional component, pass HTML attributes as props
- Loading branch information
Showing
6 changed files
with
116 additions
and
74 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,26 @@ | ||
| import React from 'react'; | ||
| import { Alert } from 'reactstrap'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'; | ||
| import { observable } from 'mobx'; | ||
| import { observer } from 'mobx-react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| @observer | ||
| export class Hello extends React.Component { | ||
| @observable isVisible = true; | ||
| export const Hello: React.FunctionComponent<{ | ||
| language: string; | ||
| sdk: string; | ||
| }> = function (props) { | ||
| return ( | ||
| // if using state is required, use state hook: | ||
| // https://reactjs.org/docs/hooks-state.html | ||
|
|
||
| // This syntax ensures `this` is bound within onDismiss. | ||
| onDismiss = (): void => { | ||
| this.isVisible = false; | ||
| } | ||
|
|
||
| render(): JSX.Element { | ||
| return <Alert color="success" toggle={this.onDismiss} isOpen={this.isVisible}> | ||
| <FontAwesomeIcon className="mr-3" icon={faCheckCircle}></FontAwesomeIcon> | ||
| Hello from instapack and react! | ||
| </Alert> | ||
| } | ||
| <div className="alert alert-success alert-dismissible fade show" role="alert"> | ||
| <FontAwesomeIcon className="me-3" icon={faCheckCircle}></FontAwesomeIcon> | ||
| Hello from {props.sdk} and {props.language}! | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| Hello.propTypes = { | ||
| language: PropTypes.string.isRequired, | ||
| sdk: PropTypes.string.isRequired | ||
| }; | ||
|
|
||
| export default Hello; |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { renderAsyncComponent } from './react-renderer'; | ||
|
|
||
| // use this file to render top-level components asynchronously. | ||
|
|
||
| // for example: allows calling <Hello sdk="instapack" language="react"></Hello> in HTML! | ||
| renderAsyncComponent('Hello', () => import('./components/Hello')); |
This file was deleted.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React, { Suspense } from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { faSpinner } from '@fortawesome/free-solid-svg-icons'; | ||
|
|
||
| /** | ||
| * A factory function returning a Promise of React default-exported Component Class Module. | ||
| */ | ||
| type ReactAsyncComponentClassFactory = () => Promise<{ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| default: React.ComponentClass<any> | React.FunctionComponent<any>; | ||
| }>; | ||
|
|
||
| /** | ||
| * Convert a hyphenated string to camelCase. | ||
| */ | ||
| function hyphenToCamelCase(name: string) { | ||
| return name.replace(/-(.)/g, (_match: string, char: string) => { | ||
| return char.toUpperCase(); | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Attempts to extract element attributes as string map. | ||
| * @param el | ||
| * @returns | ||
| */ | ||
| function convertElementAttributesToPropsMap(el: Element): Record<string, string> { | ||
| if (el.hasAttributes() === false) { | ||
| return {}; | ||
| } | ||
| const result: Record<string, string> = {}; | ||
|
|
||
| for (const attribute of el.attributes) { | ||
| let name = attribute.name; | ||
| // reference: https://github.com/reactjs/react-magic/blob/3b14406a1dbd243f239d559951e03d4337d4d71f/src/htmltojsx.js#L26-L29 | ||
| if (name === 'for') { | ||
| name = 'htmlFor'; | ||
| } | ||
| if (name === 'class') { | ||
| name = 'className'; | ||
| } | ||
| name = hyphenToCamelCase(name); | ||
| result[attribute.name] = attribute.value; | ||
| } | ||
|
|
||
| return result; | ||
| } | ||
|
|
||
| /** | ||
| * For each matching HTML Elements, render and mount a React Component asynchronously. | ||
| * Passes Element attributes as string to props. | ||
| * @param selector HTML Element selector query | ||
| * @param lazyComponent React Async Component Class Factory function | ||
| */ | ||
| export function renderAsyncComponent(selector: string, lazyComponent: ReactAsyncComponentClassFactory): void { | ||
| for (const el of document.querySelectorAll(selector)) { | ||
| const LazyComponent = React.lazy(lazyComponent); | ||
| const fallback = <FontAwesomeIcon icon={faSpinner} pulse></FontAwesomeIcon> | ||
| const props = convertElementAttributesToPropsMap(el); | ||
| const render = ( | ||
| <Suspense fallback={fallback}> | ||
| <LazyComponent {...props}></LazyComponent> | ||
| </Suspense> | ||
| ); | ||
| ReactDOM.render(render, el); | ||
| } | ||
| } |
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