Skip to content

Instantly share code, notes, and snippets.

@neopunisher
Last active January 22, 2021 06:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neopunisher/37b3e54df1e63cb40446ea86d36e1be6 to your computer and use it in GitHub Desktop.
Save neopunisher/37b3e54df1e63cb40446ea86d36e1be6 to your computer and use it in GitHub Desktop.
Pull react into the page
(function(inj){
inj('https://unpkg.com/react@16/umd/react.development.js').then(()=>inj('https://unpkg.com/react-dom@16/umd/react-dom.development.js')).then(()=>inj('https://unpkg.com/babel-standalone@6.15.0/babel.min.js')).then(function(){
var out=document.createElement("div");out.id='testing';
document.body.appendChild(out)
console.log('loaded babel')
Babel.registerPlugin('eval_wrapper', function eval_wrapper() { return {visitor: {
FunctionDeclaration(path) {
console.log('a func')
// debugger
},
ClassDeclaration(path) {
console.log('a class')
// debugger
}}}});
console.log('injected plugin')
eval(Babel.transform(`
function CustomTextInput(props) {
return (
<div>
<input ref={props.inputRef} />
</div>
);
}
function Parent(props) {
return (
<div>
My input: <CustomTextInput inputRef={props.inputRef} />
</div>
);
}
class Grandparent extends React.Component {
constructor(props) {
super(props);
this.inputElement = React.createRef();
}
render() {
return (
<Parent inputRef={this.inputElement} />
);
}
}
ReactDOM.render(
<Grandparent/>,
document.getElementById('testing')
);
`,{presets: ["react"], plugins:['eval_wrapper']}).code) //"es2015",
})
})((src)=>new Promise(function(c,d){var a=document.createElement("script");a.src=src;a.type="text/javascript";a.onload=c;a.onerror=d;document.head.appendChild(a)}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment