React-primitives

[LincMitch]

Any tips on how to extent this example to use 'react-primitives' ?

[mathieudutour]

I'm not sure what you mean

[LincMitch]

At: https://github.com/airbnb/react-sketchapp/pull/108 Jon Gold says

using React Primitives is cool because you can do things like rendering React Native components to a webview inside Sketch, and then to Sketch itself.

So I figured I'd need to add these imports to my-command.js or webview.js

import React from 'react';
import {View, Text } from 'react-primitives';
import styled from 'styled-components/primitives';

..and naturally add dependencies and peer dependencies to package.json :

  "dependencies": {
    "sketch-module-web-view": "^0.2.0",
    "react-primitives": "^0.3.4",
    "react": "^15.4.2",
    "react-native": "^0.42.3",
    "react-dom": "^15.4.2",
    "react-sketchapp": "^1.0.0"
  }

But I have no clue as to how to render React Native components to a webview.

[mathieudutour]

you need to work in https://github.com/skpm/with-webview/blob/master/template/resources/webview.js

Then just render the some react component as you would in a browser

[LincMitch]

OK - sounds close. I added my imports and appended this to the webview.js but nothing was shown.

const Document = () => (
  <View>
    <Text>
      Some text
    </Text>
  </View>
);

export default () => (
  <Document />
);

[mathieudutour]

you need render it: https://reactjs.org/docs/rendering-elements.html

[LincMitch]

The example on the site uses the DOM.

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

So I'm thinking I need to avoid that and use:

const Document = () => (
  <View>
    <Text>
      Some text
    </Text>
  </View>
);

export default () => {
  render(  <Document />);
};

But still nothing renders.

[mathieudutour]

don't export it, nothing will call it. Just render it:

const Document = () => (
  <View>
    <Text>
      Some text
    </Text>
  </View>
);

render(  <Document />, document.getElementById('my-id'));

[LincMitch]

OK I also added <div id="my-id"></div> to webview.html but still nothing renders!

Just a wild guess: Do I need to import render like with import { render } from 'react-sketchapp';

BTY. Do I have do delete the plugin and npm i each time I make a code change?

[mathieudutour]

well no, you don't want to render in Sketch, you want to render in the DOM so you want to use the render from react-dom

No but you need to refresh the webview (right click -> reload)

[LincMitch]

Yes. I was only using sketch as an example. So would it be: import {render} from 'react-dom'; as I tried it and still nothing. And does this mean I'll no-longer be using react-primitives?

This will be frickin awesome once it works. I can't believe I will be able to create a plugin via React.

[LincMitch]

I tried import ReactDOM from 'react-dom'; but no go.

Also can't (right click) on webview. By webview , do you mean the foobar dialog that displays the plugin?

[LincMitch]

I also have the following error and warnings. Maybe thats causing the issue:

error Error while enabling the Sketch developer mode.
{ Error: Command failed: /usr/bin/defaults read ~/Library/Preferences/com.bohemiancoding.sketch3.plist AlwaysReloadScript
2018-02-05 14:07:35.868 defaults[45671:4804711]
The domain/default pair of (/Users/lincoln.mitchell/Library/Preferences/com.bohemiancoding.sketch3.plist, AlwaysReloadScript) does not exist

    at ChildProcess.exithandler (child_process.js:275:12)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
  killed: false,
  code: 1,
  signal: null,
  cmd: '/usr/bin/defaults read ~/Library/Preferences/com.bohemiancoding.sketch3.plist AlwaysReloadScript ' }
info Continuing...
npm WARN react-native@0.42.3 requires a peer of react@~15.4.1 but none is installed. You must install peer dependencies yourself.
npm WARN foobar@0.1.0 No repository field.
npm WARN foobar@0.1.0 No license field.

[LincMitch]

The domain/default pair of (...) does not exist issue seems to come from user settings. If I run sudo npm i it works. I do get another warning now though, which I have not seen before: npm WARN lifecycle foobar@0.1.0~postinstall: cannot run in wd %s %s (wd=%s) foobar@0.1.0 npm run build && skpm-link /Users/[_path to code_] with-webview/with-webview/template

However, no plugin gets installed.

[LincMitch]

This domain/default pair of error was also reported at: https://github.com/airbnb/react-sketchapp/issues/251

[LincMitch]

I noticed that my edit on line .innerHTML = 'EDIT Random number from the plugin: ' does not render. Even if I delete plugin.sketchplugin. So I reinstalled SketchApp and it finally rendered. Seen as this is a webview, could there be some caching issue?

Also, should I be adding innerHTML to my render command? render( <Document />, document.getElementById('myPrimitives').innerHTML);

Apologies for all the posts. I wish I knew more and could resolve this. But I guess it's good for others that have the same issue to see the steps I took.

[mathieudutour]

domain/default pair of error

it seems that you solved it yourself?

Seen as this is a webview, could there be some caching issue?

It's not a caching issue, it's that when you use a webview, Sketch needs to keep your plugin running so it won't pick up the changes. just restart Sketch. no need to reinstall. You can also right click and reload (if you can't right click, remove this line: https://github.com/skpm/with-webview/blob/master/template/resources/webview.js#L5)

should I be adding innerHTML to my render command?

No you shouldn't.

I would advise you to try to work with just react on a normal browser first instead of trying to learn 2 things at once.

I'm not going to re-open this issue since this is not an issue but a question. You might want to redirect your questions to somewhere people can help you (not just the maintainer of the repo): sketchplugins.com

[LincMitch]

OK thanks for the help and the link to sketchplugins.com.