Created
June 8, 2018 14:11
-
-
Save aduth/46eaf09e0ad7ac1a66cd518058d434d0 to your computer and use it in GitHub Desktop.
WordPress Async Components
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
class AsyncComponent extends Component { | |
constructor() { | |
super( ...arguments ); | |
this.state = { | |
component: null, | |
}; | |
} | |
componentWillMount() { | |
this.startResolution(); | |
} | |
async startResolution() { | |
const component = await this.resolve(); | |
this.setState( () => ( { component } ) ); | |
} | |
render() { | |
if ( this.state.component ) { | |
return <this.state.component { ...this.props } />; | |
} | |
return <div className="components-async-component__placeholder" />; | |
} | |
} |
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
class ScriptDependency extends AsyncComponent { | |
resolve() { | |
return new Promise( ( resolve, reject ) => { | |
const script = document.createElement( 'script' ); | |
script.src = this.props.src; | |
script.onload = resolve; | |
script.onerror = reject; | |
document.head.appendChild( script ); | |
} ); | |
} | |
} |
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
import { CodeEditor } from '@wordpress/components'; | |
// Effectively (transformed by Babel): | |
// | |
// import { ScriptDependency } from '@wordpress/components'; | |
// const _wordpress_components_CodeEditor_dependency = window._wpSiteURL + '/wp-admin/wp-admin/load-scripts.php?load=wp-codemirror,code-editor,htmlhint,htmlhint-kses,csslint,jshint'; | |
// const CodeEditor = ( { ...props } ) => <ScriptDependency src={ _wordpress_components_CodeEditor_dependency } />; |
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
[ "@wordpress/babel-plugin-component-dependency", { | |
"siteURLSource": "_wpSiteURL", | |
"dependencies": { | |
"@wordpress/components": { | |
"CodeEditor": [ | |
"wp-codemirror", | |
"code-editor", | |
"htmlhint", | |
"htmlhint-kses", | |
"csslint", | |
"jshint" | |
] | |
} | |
} | |
} ] |
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
wp_add_inline_script( | |
'wp-components', | |
sprintf( 'window._wpSiteURL = %s;', json_encode( site_url() ) | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment