Implement parinfer editor and autocompile react native views

[flexsurfer]

Implement similar functionality to http://escherize.com/cljsfiddle/, with the next differences 1) page should be simpler - only two forms, code editor and a resulting view 2) compilation should be automatic (with error handling), no run button 3) code for parinfer editor should be as simple as possible with minimum assets 4) it should be possible to enter react-native-web components and see the result

Edited: please see comments to https://github.com/status-im/status-fiddle/pull/5

[status-open-bounty]

Balance: 0.000000 ETH Tokens: SNT: 1100.00 Contract address: 0x56b5812c4dee81ec744c75fc47a75975c7adab19 Network: Mainnet Paid to: poiga Visit https://openbounty.status.im to learn more.

[flexsurfer]

hey @poiga do you want to continue work? or maybe @foopang wants to try?

[foopang]

@flexsurfer thanks for inviting me to work on it, maybe I can try next time. I am pretty sure @poiga can deliver better work than I do :)

[shaunlebron]

@poiga @flexsurfer

👋 Just a heads up—it's much easier to use Parinfer through the official parinfer-codemirror library now. I'm on call for questions!

[ghost]

@shaunlebron any CDNs for that?

[flexsurfer]

that's cool @shaunlebron , thanks , i'll take a look how we can use it

[shaunlebron]

@poiga you can use unpkg

• https://unpkg.com/parinfer@3.12.0/parinfer.js
• https://unpkg.com/parinfer-codemirror@1.4.2/parinfer-codemirror.js

[flexsurfer]

@poiga added little bit SNT for research

[flexsurfer]

@poiga https://github.com/shaunlebron/parinfer-codemirror/blob/master/demo.html this looks much simpler, so we need just to "add" CodeMirror to reagent form and listen to cm content changes

[ghost]

@flexsurfer I will Inversigate

[ghost]

@shaunlebron I am searching for some "on edit" callback for 'cm = CodeMirror(document.body);' instance. any advice please?

[shaunlebron]

@poiga try cm.on('change', ...) or cm.on('changes', ...)

[shaunlebron]

@poiga btw, Parinfer will not try to correct code when changes come from cm.setValue—this helps us avoid reaction loops. So it should be okay syncing your reagent state with CodeMirror using setValue after receiving its value from cm.getValue inside on('change'), if that's what you're trying.

I personally have been bitten too much by trying to use React to control the state of components not designed for React, so you may wanna avoid it completely. But I'm here for questions whichever you decide.

[ghost]

@shaunlebron I am working on https://github.com/poiga/status-fiddle/blob/some-work-with-cljsfiddle/src/cljs/status_fiddle/views.cljs line 15. Looks like this lib does the job. Nice!

[shaunlebron]

@poiga @flexsurfer Great work! Please let me know if something is misbehaving with parinfer-codemirror! My incentive is to make it very solid, so I'm willing to change/fix things depending on how people are using. Thanks! 👍