Create class/component from string

Question

Say i have a file like below on the server eg Github. I want to download the file as string with fetch and then be able to convert it to an object that i could use.

OBS: all import and the interface exist on locally so there wont be any thing missing.

import parser from '../interface/parsers';
import '../interface/extension';

export default class test implements parser {
  public name: string;
  constructor() {
  
    }
  
  }

I am asking this question so that I can help you better. Why do you want to do this? — Ari Shojaei
– Ari Shojaei, Commented Jan 31, 2021 at 6:41
I have an app that can parse data from their other sites. each time I want to add/remove a parser I have to publish my app. I want to skip this and simple download the parser to the app dynamically. Do you have idees? — Alen.Toma
– Alen.Toma, Commented Jan 31, 2021 at 6:49

jnpdx · Accepted Answer · 2021-01-31 06:59:52Z

1

Here's an example that at least works in a Snack (ignored the fetch part and just used a local string):

export default function App() {
  
  const [evaledComponent, setEvaledComponent] = useState(null)

  useEffect(() => {
    this.React = React;
    this.Text = Text;  
    setEvaledComponent(eval('this.React.createElement(this.Text, {}, "test component")'));
  },[])

  return <Text>{evaledComponent}</Text>  

}

Note: I took a trick from from Why eval() is not working in React Native? assigning React to this.React in order to get it usable -- it's not a pretty hack and I'd recommend a more stable solution if you went ahead with this plan.

But:

This is an extremely uphill battle to take on and using eval is a terrible security risk since it executes arbitrary code. If there's another route you can take (like rendering things based on a JSON description), I would take that route instead.

Update:

Example of returning a custom object (non-React)

eval("var MyParser = { getString: () => {return 'hi there'} }");

return <Text>{MyParser.getString()}</Text>

edited Jan 31, 2021 at 6:59

answered Jan 31, 2021 at 6:43

jnpdx

53.3k7 gold badges91 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alen.Toma Over a year ago

please could you provide an example to my example, skip the fetch part. I just want to know since my class wont be under the folder parser how could I resolve the import in the class ?

jnpdx Over a year ago

You've included almost no code, so it's pretty difficult to say exactly what you're trying to do. But, I've updated my answer to show that you can load arbitrary code of any sort with eval (again, very unsafe). I'd also wager that doing extends with the result of your arbitrary code loading my be a challenge.

Alen.Toma Over a year ago

Yes i know, there is more import i have to inc, so i may make it auto update instead. I just wanted to know if its possible.

Collectives™ on Stack Overflow

Create class/component from string

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related