search

airbnb / react-sketchapp

render React components to Sketch โš›๏ธ๐Ÿ’Ž
http://airbnb.io/react-sketchapp/
MIT License
14.94k stars 821 forks source link

see the result from browser #531

Closed SilentFlute closed 3 years ago

SilentFlute commented 3 years ago

macos: 10.15.7 sketch: 75 node: 14.17.6

hi, i check all the issues out, but couldn't find one which is about how to view the react-sketchapp's result from browser

react-sketchapp is great, it convert react code to sketch, and i am wondering if i can see the result from browser, for example, there is a code:

import * as React from 'react';
import * as PropTypes from 'prop-types';
import { render, Artboard, Text, View } from 'react-sketchapp';
import chroma from 'chroma-js';

// take a hex and give us a nice text color to put over it
const textColor = (hex) => {
  const vsWhite = chroma.contrast(hex, 'white');
  if (vsWhite > 4) {
    return '#FFF';
  }
  return chroma(hex).darken(3).hex();
};

const Swatch = ({ name, hex }) => (
  <View
    name={`Swatch ${name}`}
    style={{
      height: 96,
      width: 96,
      margin: 4,
      backgroundColor: hex,
      padding: 8,
    }}
  >
    <Text
      name="Swatch Name"
      style={{ color: textColor(hex), fontWeight: 'bold', fontFamily: 'Helvetica' }}
    >
      {name}
    </Text>
    <Text name="Swatch Hex" style={{ color: textColor(hex) }}>
      {hex}
    </Text>
  </View>
);

const Color = {
  hex: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
};

Swatch.propTypes = Color;

const Document = ({ colors }) => (
  <Artboard
    name="Swatches"
    style={{
      flexDirection: 'row',
      flexWrap: 'wrap',
      width: (96 + 8) * 4,
    }}
  >
    {Object.keys(colors).map((color) => (
      <Swatch name={color} hex={colors[color]} key={color} />
    ))}
  </Artboard>
);

Document.propTypes = {
  colors: PropTypes.objectOf(PropTypes.string).isRequired,
};

export default () => {
  const colorList = {
    Haus: '#F3F4F4',
    Night: '#333',
    Sur: '#96DBE4',
    'Sur Dark': '#24828F',
    Peach: '#EFADA0',
    'Peach Dark': '#E37059',
    Pear: '#93DAAB',
    'Pear Dark': '#2E854B',
  };

  render(<Document colors={colorList} />, context.document.currentPage());
};

the basic-setup example from react-sketchapp, i can see the result from sketch at least: sample but before in the sketch, i want to see this result from browser first, just like the normal page development, is that possible? how can i do it? thx

SilentFlute commented 3 years ago

@mathieudutour @macintoshhelper any adivces?

macintoshhelper commented 3 years ago

Yes, it's possible. Check https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-primitives . You need to use react-primitives, which resolves the necessary components for each platform, using react-native-web to render to web. You can setup hot reloading to web with a react-sketchapp project.

Keep in mind that there will be slight differences in typography rendering on different platforms, there's even a difference between React Native iOS and React Native Android.

25 Sep 2021 06:16:40 ๅฐ้•‡้“ไป” @.***>:

@mathieudutour[https://github.com/mathieudutour] @macintoshhelper[https://github.com/macintoshhelper] any adivces?

โ€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub[https://github.com/airbnb/react-sketchapp/issues/531#issuecomment-927007635], or unsubscribe[https://github.com/notifications/unsubscribe-auth/ABTRZHAYU456HDHUMMIUPADUDVEKRANCNFSM5EVRU4MA]. Triage notifications on the go with GitHub Mobile for iOS[https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675] or Android[https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub]. [data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAAnSURBVHic7cEBDQAAAMKg909tDwcUAAAAAAAAAAAAAAAAAAAAAPBjRFIAASHKmKkAAAAASUVORK5CYII=###24x24:true###][Tracking image][https://github.com/notifications/beacon/ABTRZHGUYAZOUFXSTREPLQDUDVEKRA5CNFSM5EVRU4MKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOG5AQHEY.gif]

SilentFlute commented 3 years ago

thx, and i cloned the airbnb/react-sketchapp repo, and into the examples/profile-cards-primitives, then:

  1. yarn
  2. open sketch and select that plugin
  3. see the result in the sketch

yes! that's no accident, and i noticed that 1st and 3rd pic were broken, and the middle one is a new one, cuz the clothes and background and different from the README file shown ;), but it doesn't matter at all the important is when i goes yarn web, i got a error:

Failed to compile with 20 errors.

 ERROR  in ./~/react-dom/lib/ReactMount.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactMount.js 15:12-38
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactMount.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactMount.js 17:24-62
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/findDOMNode.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/findDOMNode.js 13:24-62
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 13:29-72
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 11:29-72
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactDOMInvalidARIAHook.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 12:29-72
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactUpdateQueue.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactUpdateQueue.js 13:24-62
 @ ./~/react-dom/lib/ReactMount.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactNodeTypes.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactNodeTypes.js 14:12-38
 @ ./~/react-dom/lib/getHostComponentFromComposite.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactDebugTool.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactDebugTool.js 14:29-72
 @ ./~/react-dom/lib/ReactInstrumentation.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/instantiateReactComponent.js
Module not found: Error: Can't resolve 'react/lib/getNextDebugID' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/instantiateReactComponent.js 18:21-56
 @ ./~/react-dom/lib/ReactMount.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactDOMOption.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactDOMOption.js 13:12-38
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactMultiChild.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactMultiChild.js 17:24-62
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactCompositeComponent.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactCompositeComponent.js 14:12-38
 @ ./~/react-dom/lib/instantiateReactComponent.js
 @ ./~/react-dom/lib/ReactMount.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactCompositeComponent.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactCompositeComponent.js 16:24-62
 @ ./~/react-dom/lib/instantiateReactComponent.js
 @ ./~/react-dom/lib/ReactMount.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/flattenChildren.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/flattenChildren.js 24:27-70 40:33-76
 @ ./~/react-dom/lib/ReactMultiChild.js
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/ReactChildReconciler.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactChildReconciler.js 27:27-70 35:31-74
 @ ./~/react-dom/lib/ReactMultiChild.js
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/LinkedValueUtils.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/LinkedValueUtils.js 16:12-38
 @ ./~/react-dom/lib/ReactDOMInput.js
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/checkReactTypeSpec.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/checkReactTypeSpec.js 27:27-70 69:37-80
 @ ./~/react-dom/lib/ReactCompositeComponent.js
 @ ./~/react-dom/lib/instantiateReactComponent.js
 @ ./~/react-dom/lib/ReactMount.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-dom/lib/traverseAllChildren.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/traverseAllChildren.js 13:24-62
 @ ./~/react-dom/lib/flattenChildren.js
 @ ./~/react-dom/lib/ReactMultiChild.js
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

 ERROR  in ./~/react-native-web/dist/modules/ResponderEventPlugin/index.js
Module not found: Error: Can't resolve 'react-dom/unstable-native-dependencies' in '/Users/kunmingcn/Documents/code/react-sketchapp/examples/profile-cards-primitives/node_modules/react-native-web/dist/modules/ResponderEventPlugin'
 @ ./~/react-native-web/dist/modules/ResponderEventPlugin/index.js 4:0-88
 @ ./~/react-native-web/dist/exports/createElement/index.js
 @ ./~/react-native-web/dist/index.js
 @ ./~/react-primitives/lib/injection/react-native-web.js
 @ ./~/react-primitives/lib/index.js
 @ ./~/react-primitives/index.js
 @ ./src/components/Profile.js
 @ ./src/web.js
 @ ./~/nwb/lib/reactRunEntry.js
 @ multi ./~/nwb/polyfills.js ./~/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js ./~/nwb/lib/reactRunEntry.js

is this a bug or something?

SilentFlute commented 3 years ago

@macintoshhelper MAYDAY MAYDAY

SilentFlute commented 3 years ago

@mathieudutour hi there, i think i found a bug

SilentFlute commented 3 years ago

i can't figure this issue out, can't fix it, but i find another way to solve it: i use UmiJS as the scaffold, and refer to /examples/profile-cards-primitives, use react-sketchapp and related pkgs, without nwb nwb.config.js, and it worked !!!

  1. it can export to sketch from react
  2. it can preview the react from browser