profile
viewpoint
Moti Zilberman motiz88 @facebook London, UK

dwyl/aws-sdk-mock 695

:rainbow: AWSomocks for Javascript/Node.js aws-sdk tested, documented & maintained. Contributions welcome!

FormidableLabs/react-context-composer 58

[DEPRECATED] Clean composition of React's new Context API

motiz88/babel-plugin-transform-hoist-nested-functions 30

Babel plugin to move nested functions to outer scopes

motiz88/animated.macro 29

A tiny language for arithmetic over React Native's Animated values. 🕺🏽🔢

motiz88/aws-sdk-flow-decl-gen 4

Flow type declarations generator for AWS SDK

motiz88/aws-sdk-flow-decls 2

Flow type declarations for AWS SDK

motiz88/babel-plugin-add-jsdoc-properties 2

Adds JSDoc annotations to source code

motiz88/babel-plugin-transform-react-loadable 2

Experimental Babel plugin to make advanced usage of react-loadable easier.

motiz88/ast-types 1

Esprima-compatible implementation of the Mozilla JS Parser API

pull request commentfacebook/react-native

Update the documentation of the Button component

@ayushjainrksh I just noticed your most recent commit, sorry. The version I previously imported is landing now (it was blocked on an internal CI config change) so you may want to resubmit that small change as its own PR.

ayushjainrksh

comment created time in 8 days

Pull request review commentfacebook/react-native

Update ActivityIndicator component

 type IndicatorSize = number | 'small' | 'large';  type IOSProps = $ReadOnly<{|   /**-   * Whether the indicator should hide when not animating (true by default).-   *-   * See https://reactnative.dev/docs/activityindicator.html#hideswhenstopped-   */+    Whether the indicator should hide when not animating.++    @platform ios+  */   hidesWhenStopped?: ?boolean, |}>; type Props = $ReadOnly<{|   ...ViewProps,   ...IOSProps,    /**-   * Whether to show the indicator (true, the default) or hide it (false).-   *-   * See https://reactnative.dev/docs/activityindicator.html#animating+   	Whether to show the indicator (`true`) or hide it (`false`).    */   animating?: ?boolean,    /**-   * The foreground color of the spinner (default is gray).-   *-   * See https://reactnative.dev/docs/activityindicator.html#color-   */+    The foreground color of the spinner.++    @default {@platform android} `null` (system accent default color)+    @default {@platform ios} '#999999'+  */   color?: ?ColorValue,    /**-   * Size of the indicator (default is 'small').-   * Passing a number to the size prop is only supported on Android.-   *-   * See https://reactnative.dev/docs/activityindicator.html#size-   */+    Size of the indicator.++    @type enum(`'small'`, `'large'`)

Long term comment - no need to fix before merging

I'm not sure we should be embedding Markdown backticks in types like this. This may be fine to ship as a starting point, but later we should consider migrating to a type syntax with no manual formatting. This type of formatting should "just work" implicitly, like syntax highlighting.

    @type enum('small', 'large')
ani4aniket

comment created time in 11 days

Pull request review commentfacebook/react-native

Update ActivityIndicator component

 type IndicatorSize = number | 'small' | 'large';  type IOSProps = $ReadOnly<{|   /**-   * Whether the indicator should hide when not animating (true by default).-   *-   * See https://reactnative.dev/docs/activityindicator.html#hideswhenstopped-   */+    Whether the indicator should hide when not animating.++    @platform ios+  */   hidesWhenStopped?: ?boolean, |}>; type Props = $ReadOnly<{|   ...ViewProps,   ...IOSProps,    /**-   * Whether to show the indicator (true, the default) or hide it (false).-   *-   * See https://reactnative.dev/docs/activityindicator.html#animating+   	Whether to show the indicator (`true`) or hide it (`false`).    */   animating?: ?boolean,    /**-   * The foreground color of the spinner (default is gray).-   *-   * See https://reactnative.dev/docs/activityindicator.html#color-   */+    The foreground color of the spinner.++    @default {@platform android} `null` (system accent default color)+    @default {@platform ios} '#999999'+  */   color?: ?ColorValue,    /**-   * Size of the indicator (default is 'small').-   * Passing a number to the size prop is only supported on Android.-   *-   * See https://reactnative.dev/docs/activityindicator.html#size-   */+    Size of the indicator.++    @type enum(`'small'`, `'large'`)+    @type {@platform android} number

Long term comment - no need to fix before merging

This use of multiple @type annotations is pretty clever!

I think in the long run we should look into annotating the Flow types themselves, e.g. maybe something like:

type IndicatorSize = 'small' | 'large' | /** @platform android **/ number;

Or using Flow types directly:

// A utility type which the docs generator will treat specially
type RN$PlatformSpecific<PlatformT, T> = T;

type IndicatorSize = 'small' | 'large' | RN$PlatformSpecific<'android', number>;

The latter has the added benefit that, in the future, we can reimplement RN$PlatformSpecific to actually enforce the correct types per platform.

ani4aniket

comment created time in 11 days

Pull request review commentfacebook/react-native

Update ActivityIndicator component

 type IndicatorSize = number | 'small' | 'large';  type IOSProps = $ReadOnly<{|   /**-   * Whether the indicator should hide when not animating (true by default).-   *-   * See https://reactnative.dev/docs/activityindicator.html#hideswhenstopped-   */+    Whether the indicator should hide when not animating.++    @platform ios+  */

I think this is missing an annotation for the default value (true).

ani4aniket

comment created time in 11 days

push eventmotiz88/react-docgen

Moti Zilberman

commit sha 95581642717801638bab4955ad4da9cba288827f

chore: random lint fixes

view details

Moti Zilberman

commit sha 1ebd7d33b4886fce52a759c311a41b5fab05ec0a

[fork] bump to 0.0.3

view details

push time in 11 days

fork motiz88/node-chakracore

Node.js on ChakraCore :sparkles::turtle::rocket::sparkles:

fork in 20 days

Pull request review commentfacebook/react-native

Update the documentation of the Button component

 import type {ColorValue} from '../StyleSheet/StyleSheet';  type ButtonProps = $ReadOnly<{|   /**-   * Text to display inside the button+    Text to display inside the button. On Android the given title will be+    converted to the uppercased form.    */   title: string,    /**-   * Handler to be called when the user taps the button+    Handler to be called when the user taps the button. The first function+    argument is an event in form of [PressEvent](pressevent).    */   onPress: (event?: PressEvent) => mixed,    /**-   * If true, doesn't play system sound on touch (Android Only)-   **/+    If `true`, doesn't play system sound on touch.++    @platform android++    @default false+   */   touchSoundDisabled?: ?boolean,    /**-   * Color of the text (iOS), or background color of the button (Android)+    Color of the text (iOS), or background color of the button (Android).++    @default {@platform android} '#2196F3'+    @default {@platform ios} '#007AFF'    */   color?: ?ColorValue,    /**-   * TV preferred focus (see documentation for the View component).+    TV preferred focus.++    @platform tv++    @default false    */   hasTVPreferredFocus?: ?boolean,    /**-   * TV next focus down (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates down. See+    the [Android documentation][android:nextFocusDown].++    [android:nextFocusDown]:+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown++    @platform android, tv    */   nextFocusDown?: ?number,    /**-   * TV next focus forward (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates forward.+    See the [Android documentation][android:nextFocusForward].++    [android:nextFocusForward]:+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward++    @platform android, tv    */   nextFocusForward?: ?number,    /**-   * TV next focus left (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates left. See+    the [Android documentation][android:nextFocusLeft].++    [android:nextFocusLeft]:+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft++    @platform android, tv    */   nextFocusLeft?: ?number,    /**-   * TV next focus right (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates right. See+    the [Android documentation][android:nextFocusRight].++    [android:nextFocusRight]:+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight++    @platform android, tv    */   nextFocusRight?: ?number,    /**-   * TV next focus up (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates up. See+    the [Android documentation][android:nextFocusUp].++    [android:nextFocusUp]:+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp++    @platform android, tv    */   nextFocusUp?: ?number,    /**-   * Text to display for blindness accessibility features+    Text to display for blindness accessibility features.    */   accessibilityLabel?: ?string,    /**-   * If true, disable all interactions for this component.+    If `true`, disable all interactions for this component.++    @default false    */   disabled?: ?boolean,    /**-   * Used to locate this view in end-to-end tests.+    Used to locate this view in end-to-end tests.    */   testID?: ?string, |}>;  /**- * A basic button component that should render nicely on any platform. Supports- * a minimal level of customization.- *- * <center><img src="img/buttonExample.png"></img></center>- *- * If this button doesn't look right for your app, you can build your own- * button using [TouchableOpacity](docs/touchableopacity.html)- * or [TouchableNativeFeedback](docs/touchablenativefeedback.html).- * For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).- * Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button).- *- * Example usage:- *- * ```- * import { Button } from 'react-native';- * ...- *- * <Button- *   onPress={onPressLearnMore}- *   title="Learn More"- *   color="#841584"- *   accessibilityLabel="Learn more about this purple button"- * />- * ```- *+  A basic button component that should render nicely on any platform. Supports a+  minimal level of customization.++  If this button doesn't look right for your app, you can build your own button+  using [TouchableOpacity](touchableopacity) or+  [TouchableWithoutFeedback](touchablewithoutfeedback). For inspiration, look at+  the [source code for this button+  component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).

@ayushjainrksh, sorry to block this PR again on a minor detail, but could you please go through all links and fix the ones that are causing awkward line breaks? (e.g. using references like you did elsewhere)

ayushjainrksh

comment created time in a month

Pull request review commentfacebook/react-native

Update the documentation of the Button component

 import type {ColorValue} from '../StyleSheet/StyleSheet';  type ButtonProps = $ReadOnly<{|   /**-   * Text to display inside the button+    Text to display inside the button. On Android the given title will be+    converted to the uppercased form.    */   title: string,    /**-   * Handler to be called when the user taps the button+    Handler to be called when the user taps the button. The first function+    argument is an event in form of [PressEvent](pressevent).    */   onPress: (event?: PressEvent) => mixed,    /**-   * If true, doesn't play system sound on touch (Android Only)-   **/+    If `true`, doesn't play system sound on touch.++    @platform android++    @default false+   */   touchSoundDisabled?: ?boolean,    /**-   * Color of the text (iOS), or background color of the button (Android)+    Color of the text (iOS), or background color of the button (Android).++    @default {@platform android} '#2196F3'+    @default {@platform ios} '#007AFF'    */   color?: ?ColorValue,    /**-   * TV preferred focus (see documentation for the View component).+    TV preferred focus.++    @platform tv++    @default false    */   hasTVPreferredFocus?: ?boolean,    /**-   * TV next focus down (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates down. See+    the [Android+    documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown).

Short term:

I wouldn't insert a line break inside the text of a link just because it's followed by a long URL.

    the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown).

Long term: (e.g. we can choose to do this for future PRs)

I'd refactor these comments to use reference-style links, improving the flow of the text.

    the [Android documentation][android:nextFocusDown].
    
    [android:nextFocusDown]: https://developer.android.com/reference/android/view/View.html#attr_android
ayushjainrksh

comment created time in a month

Pull request review commentfacebook/react-native

Update the documentation of the Button component

 import type {ColorValue} from '../StyleSheet/StyleSheet';  type ButtonProps = $ReadOnly<{|   /**-   * Text to display inside the button+    Text to display inside the button. On Android the given title will be+    converted to the uppercased form.    */   title: string,    /**-   * Handler to be called when the user taps the button+    Handler to be called when the user taps the button. The first function+    argument is an event in form of [PressEvent](pressevent).    */   onPress: (event?: PressEvent) => mixed,    /**-   * If true, doesn't play system sound on touch (Android Only)-   **/+    If `true`, doesn't play system sound on touch.++    @platform android++    @default false+   */   touchSoundDisabled?: ?boolean,    /**-   * Color of the text (iOS), or background color of the button (Android)+    Color of the text (iOS), or background color of the button (Android).++    @default {@platform android} '#2196F3'+    @default {@platform ios} '#007AFF'    */   color?: ?ColorValue,    /**-   * TV preferred focus (see documentation for the View component).+    TV preferred focus.++    @platform tv++    @default false    */   hasTVPreferredFocus?: ?boolean,    /**-   * TV next focus down (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates down. See+    the [Android+    documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown).++    @platform android, tv    */   nextFocusDown?: ?number,    /**-   * TV next focus forward (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates forward.+    See the [Android+    documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward).++    @platform android, tv    */   nextFocusForward?: ?number,    /**-   * TV next focus left (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates left. See+    the [Android+    documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft).++    @platform android, tv    */   nextFocusLeft?: ?number,    /**-   * TV next focus right (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates right. See+    the [Android+    documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight).++    @platform android, tv    */   nextFocusRight?: ?number,    /**-   * TV next focus up (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates up. See+    the [Android+    documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp).++    @platform android, tv    */   nextFocusUp?: ?number,    /**-   * Text to display for blindness accessibility features+    Text to display for blindness accessibility features.    */   accessibilityLabel?: ?string,    /**-   * If true, disable all interactions for this component.+    If `true`, disable all interactions for this component.++    @default false    */   disabled?: ?boolean,    /**-   * Used to locate this view in end-to-end tests.+    Used to locate this view in end-to-end tests.    */   testID?: ?string, |}>;  /**- * A basic button component that should render nicely on any platform. Supports- * a minimal level of customization.- *- * <center><img src="img/buttonExample.png"></img></center>- *- * If this button doesn't look right for your app, you can build your own- * button using [TouchableOpacity](docs/touchableopacity.html)- * or [TouchableNativeFeedback](docs/touchablenativefeedback.html).- * For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).- * Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button).- *- * Example usage:- *- * ```- * import { Button } from 'react-native';- * ...- *- * <Button- *   onPress={onPressLearnMore}- *   title="Learn More"- *   color="#841584"- *   accessibilityLabel="Learn more about this purple button"- * />- * ```- *+  A basic button component that should render nicely on any platform. Supports a+  minimal level of customization.++  If this button doesn't look right for your app, you can build your own button+  using [TouchableOpacity](touchableopacity) or+  [TouchableWithoutFeedback](touchablewithoutfeedback). For inspiration, look at+  the [source code for this button+  component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).+  Or, take a look at the [wide variety of button components built by the+  community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button).++  ```jsx+  <Button+    onPress={onPressLearnMore}+    title="Learn More"+    color="#841584"+    accessibilityLabel="Learn more about this purple button"+  />+  ```++  @example ```SnackPlayer name=Button%20Example+  import React from 'react';+  import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';

That makes sense 👍🏻

ayushjainrksh

comment created time in a month

delete branch motiz88/metro

delete branch : export-D22284159

delete time in a month

pull request commentfacebook/metro

metro-source-map: propagate sourcesContent when composing source maps

Hey @fbartho! Metro by itself does not read source maps from its input.

The metro-source-map package does, however, export the composeSourceMaps function (which is the context for this PR). This in turn is used in the React Native + Hermes integration (see RN's compose-source-maps script) to generate a correct source map for that scenario:

  1. Metro builds a JS bundle with a source map.
  2. Hermes compiles the JS bundle to bytecode and creates its own (partial) source map.
  3. The build script invokes composeSourceMaps to combine the source maps from (1) and (2).

It sounds like you may be able to use composeSourceMaps similarly in your custom build. If you run into problems using this function, feel free to open a new issue.

motiz88

comment created time in a month

issue commentfacebook/hermes

Include sourcesContent in generated source map

https://github.com/facebook/metro/pull/574 will fix this on the React Native side.

bengourley

comment created time in a month

issue commentfacebook/react-native

Include sourcesContent in composed Hermes source map

https://github.com/facebook/metro/pull/574 will fix this. Apologies for the long delay.

motiz88

comment created time in a month

create barnchmotiz88/metro

branch : export-D22284159

created branch time in a month

PR opened facebook/metro

metro-source-map: propagate sourcesContent when composing source maps

Summary:

  • Implements the sourceContentFor API from source-map in Metro's Consumer.
  • Copies source contents in composeSourceMaps if they exist.

Related issues: https://github.com/facebook/react-native/issues/26086, https://github.com/facebook/hermes/issues/85. We'll be able to close the RN issue once this lands in the version of metro-source-map used in RN master.

Differential Revision: D22284159

+195 -4

0 comment

9 changed files

pr created time in a month

Pull request review commentMLH-Fellowship/react-native

Update the button component

 import type {ColorValue} from '../StyleSheet/StyleSheet';  type ButtonProps = $ReadOnly<{|   /**-   * Text to display inside the button+    Text to display inside the button. On Android the given title will be converted to the uppercased form.    */   title: string,    /**-   * Handler to be called when the user taps the button+    Handler to be called when the user taps the button. The first function argument is an event in form of [PressEvent](pressevent).    */   onPress: (event?: PressEvent) => mixed,    /**-   * If true, doesn't play system sound on touch (Android Only)-   **/+    If `true`, doesn't play system sound on touch.++    @platform android++    @default false+   */   touchSoundDisabled?: ?boolean,    /**-   * Color of the text (iOS), or background color of the button (Android)+    Color of the text (iOS), or background color of the button (Android).++    @default android: #2196F3, ios: #007AFF
  1. Note that the values in the Markdown are '#2196F3' and '#007AFF' (in quotes)
  2. The format seems reasonable to me, but maybe we can go with something like this (syntax inspired by JSDoc "inline tags") where @default can be qualified by a @platform tag:
@default {@platform android} '#2196F3'
@default {@platform ios} '#007AFF'
ayushjainrksh

comment created time in 2 months

Pull request review commentMLH-Fellowship/react-native

Update the button component

 import type {ColorValue} from '../StyleSheet/StyleSheet';  type ButtonProps = $ReadOnly<{|   /**-   * Text to display inside the button+    Text to display inside the button. On Android the given title will be converted to the uppercased form.    */   title: string,    /**-   * Handler to be called when the user taps the button+    Handler to be called when the user taps the button. The first function argument is an event in form of [PressEvent](pressevent).    */   onPress: (event?: PressEvent) => mixed,    /**-   * If true, doesn't play system sound on touch (Android Only)-   **/+    If `true`, doesn't play system sound on touch.++    @platform android++    @default false+   */   touchSoundDisabled?: ?boolean,    /**-   * Color of the text (iOS), or background color of the button (Android)+    Color of the text (iOS), or background color of the button (Android).++    @default android: #2196F3, ios: #007AFF    */   color?: ?ColorValue,    /**-   * TV preferred focus (see documentation for the View component).+    TV preferred focus.++    @platform tv++    @default false    */   hasTVPreferredFocus?: ?boolean,    /**-   * TV next focus down (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates down. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown).++    @platform android, tv    */   nextFocusDown?: ?number,    /**-   * TV next focus forward (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates forward. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward).++    @platform android, tv    */   nextFocusForward?: ?number,    /**-   * TV next focus left (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates left. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft).++    @platform android, tv    */   nextFocusLeft?: ?number,    /**-   * TV next focus right (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates right. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight).++    @platform android, tv    */   nextFocusRight?: ?number,    /**-   * TV next focus up (see documentation for the View component).-   *-   * @platform android+    Designates the next view to receive focus when the user navigates up. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp).++    @platform android, tv    */   nextFocusUp?: ?number,    /**-   * Text to display for blindness accessibility features+    Text to display for blindness accessibility features.    */   accessibilityLabel?: ?string,    /**-   * If true, disable all interactions for this component.+    If `true`, disable all interactions for this component.++    @default false    */   disabled?: ?boolean,    /**-   * Used to locate this view in end-to-end tests.+    Used to locate this view in end-to-end tests.    */   testID?: ?string, |}>;  /**- * A basic button component that should render nicely on any platform. Supports- * a minimal level of customization.- *- * <center><img src="img/buttonExample.png"></img></center>- *- * If this button doesn't look right for your app, you can build your own- * button using [TouchableOpacity](docs/touchableopacity.html)- * or [TouchableNativeFeedback](docs/touchablenativefeedback.html).- * For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).- * Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button).- *- * Example usage:- *- * ```- * import { Button } from 'react-native';- * ...- *- * <Button- *   onPress={onPressLearnMore}- *   title="Learn More"- *   color="#841584"- *   accessibilityLabel="Learn more about this purple button"- * />- * ```- *+  A basic button component that should render nicely on any platform. Supports a minimal level of customization.++  If this button doesn't look right for your app, you can build your own button using+  [TouchableOpacity](touchableopacity) or [TouchableWithoutFeedback](touchablewithoutfeedback).+  For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).+  Or, take a look at the [wide variety of button components built by the community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button).++  Example usage:++  ```+  import { Button } from 'react-native';

Let's assume that the content in the docs is correct and copy it here exactly. So we should remove the "Example usage" line, the import etc. This is a general principle as far as I'm concerned: this type of issue will come up fairly often, as a lot of the existing code comments are similar but not identical to the content in the docs. The latter should always "win" unless it's actually incorrect (lists a property that doesn't exist, has typos, etc).

ayushjainrksh

comment created time in 2 months

Pull request review commentMLH-Fellowship/react-native

Update the button component

 class Button extends React.Component<ButtonProps> {   render(): React.Node {     const {       accessibilityLabel,-      color,+      color = Platform.OS === 'ios' ? '#007AFF' : '#2196F3',

@ayushjainrksh I'd like to second @jevakallio's comment, you're being super thorough and it's awesome!

I think for the time being we should limit this project to code changes that don't have any impact on runtime behaviour. It would make reviewing the code much easier and safer when we make PRs to the upstream react-native repo.

With that in mind, I'm fine with a @default tag in comments. Ensuring that this tag is in sync with the actual code would indeed be even better, but let's not solve that now. In the medium term we can reasonably expect people editing a code file to deal with updating both copies of this information.

Note that sometimes a prop already has a value in defaultProps or a default initialiser in a functional component - function MyComponent({someProp = 42}) { /* ... */ } - and I believe react-docgen can already parse, so we might not need to add an explicit @default tag. When in doubt, however, let's just add a tag and worry about it later.

(As an aside - deeply analysing statements like const { color = Platform.OS === 'ios' ? '#007AFF' : '#2196F3' } = this.props in components can get really complicated really fast, so this is probably not the specific way I'd tackle this problem.)

ayushjainrksh

comment created time in 2 months

Pull request review commentMLH-Fellowship/react-native

Update the button component

 import type {ColorValue} from '../StyleSheet/StyleSheet';  type ButtonProps = $ReadOnly<{|   /**-   * Text to display inside the button+   * Text to display inside the button. On Android the given title will be converted to the uppercased form.    */   title: string,    /**-   * Handler to be called when the user taps the button+   * Handler to be called when the user taps the button. The first function argument is an event in form of [PressEvent](pressevent).    */   onPress: (event?: PressEvent) => mixed,    /**-   * If true, doesn't play system sound on touch (Android Only)+   * If `true`, doesn't play system sound on touch.+   *+   * @platform android    **/   touchSoundDisabled?: ?boolean,    /**-   * Color of the text (iOS), or background color of the button (Android)+   * Color of the text (iOS), or background color of the button (Android).    */   color?: ?ColorValue,    /**-   * TV preferred focus (see documentation for the View component).+   * TV preferred focus.+   * @platform tv    */   hasTVPreferredFocus?: ?boolean,    /**-   * TV next focus down (see documentation for the View component).+   * Designates the next view to receive focus when the user navigates down. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown).    *-   * @platform android+   * @platform android, tv

This makes sense 👍🏻

ayushjainrksh

comment created time in 2 months

IssuesEvent

issue commentfacebook/react-native

Include sourcesContent in composed Hermes source map

This issue still exists.

motiz88

comment created time in 2 months

pull request commentfkling/astexplorer

Add Hermes parser for JavaScript

@fkling Strictly speaking, I was being cautious in saying this is blocked. If you're interested and don't mind the quirks of this integration too much (namely: checking in hermes.js and hermes.js.mem under website/public, not having structured error output), then IMO there's nothing stopping us from merging this and upgrading to the "proper" npm version later when that's available.

motiz88

comment created time in 2 months

fork motiz88/estree

The ESTree Spec

fork in 2 months

starteddspinellis/GW-BASIC

started time in 3 months

Pull request review commentfkling/astexplorer

Add Hermes parser for JavaScript

+import defaultParserInterface from './utils/defaultESTreeParserInterface';+import HermesWorkerClient from './hermes/HermesWorkerClient';++const ID = 'hermes';+export const defaultOptions = {+  jsx: true,+};+export const parserSettingsConfiguration = {+  fields: [+    'jsx',+  ],+};++export default {+  ...defaultParserInterface,++  id: ID,+  displayName: ID,+  version: 'N/A',+  homepage: 'https://hermesengine.dev/',+  locationProps: new Set(['loc', 'range']),++  loadParser(callback) {+    callback(new HermesWorkerClient());+  },++  async parse(hermes, code, options) {+    const hermesOutput = await hermes.run(['-dump-ast', '--pretty-json', '-dump-source-location', options.jsx ? '-parse-jsx' : ''].filter(Boolean), code);+    try {+      return JSON.parse(hermesOutput);+    } catch (e) {+      console.error(e);

Yeah I can probably delete this. See rationale for having it in the first place in the comment below.

motiz88

comment created time in 3 months

Pull request review commentfkling/astexplorer

Add Hermes parser for JavaScript

+import defaultParserInterface from './utils/defaultESTreeParserInterface';+import HermesWorkerClient from './hermes/HermesWorkerClient';++const ID = 'hermes';+export const defaultOptions = {+  jsx: true,+};+export const parserSettingsConfiguration = {+  fields: [+    'jsx',+  ],+};++export default {+  ...defaultParserInterface,++  id: ID,+  displayName: ID,+  version: 'N/A',+  homepage: 'https://hermesengine.dev/',+  locationProps: new Set(['loc', 'range']),++  loadParser(callback) {+    callback(new HermesWorkerClient());+  },++  async parse(hermes, code, options) {+    const hermesOutput = await hermes.run(['-dump-ast', '--pretty-json', '-dump-source-location', options.jsx ? '-parse-jsx' : ''].filter(Boolean), code);

I believe we're in the process of figuring out APIs for various similar integrations, not sure if there's anything very concrete yet that would fit here. (cc @tmikov)

motiz88

comment created time in 3 months

Pull request review commentfkling/astexplorer

Add Hermes parser for JavaScript

+import defaultParserInterface from './utils/defaultESTreeParserInterface';+import HermesWorkerClient from './hermes/HermesWorkerClient';++const ID = 'hermes';+export const defaultOptions = {+  jsx: true,+};+export const parserSettingsConfiguration = {+  fields: [+    'jsx',+  ],+};++export default {+  ...defaultParserInterface,++  id: ID,+  displayName: ID,+  version: 'N/A',+  homepage: 'https://hermesengine.dev/',+  locationProps: new Set(['loc', 'range']),++  loadParser(callback) {+    callback(new HermesWorkerClient());+  },++  async parse(hermes, code, options) {+    const hermesOutput = await hermes.run(['-dump-ast', '--pretty-json', '-dump-source-location', options.jsx ? '-parse-jsx' : ''].filter(Boolean), code);+    try {+      return JSON.parse(hermesOutput);+    } catch (e) {+      console.error(e);+      throw new Error(hermesOutput);

e here is just the JSON parse error. hermesOutput is stdout+stderr from the Hermes binary which will contain the error message from parsing JS, or (if there's a bug) the bad AST output that caused JSON parsing to fail. This is admittedly a hack; in the long run we'd probably want Hermes to emit structured errors in the JSON like other parsers do.

motiz88

comment created time in 3 months

PR opened fkling/astexplorer

Add Hermes parser for JavaScript

Proof-of-concept integration of the Hermes engine's parser into AST Explorer. Try it at astexplorer-hermes.now.sh.

screenshot of AST Explorer with the Hermes parser

Like the official Hermes playground page, this uses an ad hoc asm.js build of Hermes that isn't currently published to npm. I'm assuming that's a blocker to actually merging this PR, which is the main reason this is a draft.

+346 -7

0 comment

9 changed files

pr created time in 3 months

push eventmotiz88/astexplorer

Moti Zilberman

commit sha d0b8069d7fc2367f854a57a11678d14598966416

Empty commit for Vercel

view details

push time in 3 months

push eventmotiz88/astexplorer

Moti Zilberman

commit sha a6d7b4e8417ef037c943d4c70f623a9673209fe4

flow-parser: Update to v0.32.0 (#145)

view details

Dan Harper

commit sha 155bea8dd2ee0462248776c2500c94e793d3c919

Update PostCSS transform example (#148) to match preferred code style in transform plugins for #147 see https://github.com/postcss/postcss-plugin-boilerplate/commit/4d05aabcacd5648bb115108cfff1f4831fb190f2

view details

Georgii Dolzhykov

commit sha ddeb59669103b97867be9f7094ba9a26ecd8444e

build: fix for Node 6 (#150) The exception `Path must be a string` comes from `html-webpack-plugin`, v1.7.0 https://github.com/ampedandwired/html-webpack-plugin/blob/v1.7.0/index.js#L205 Passing `filename` explicitly fixes it. Closes #137

view details

Moti Zilberman

commit sha 2c9781bb7b472003a99e3dceaa7b3b3a2c9f6424

Allow building on Windows using cross-env (#149)

view details

Christopher Chedeau

commit sha 3a6211ef9181b4f412c160f89189ac897ca27c78

Update jscodeshift default (#151) * Update jscodeshift default A few changes to hopefully make it more beginner friendly - Rename the variable `p` to `path` to make it more explicit - Add `{}` inside of the arrow function in order to be able to add `console.log` more easily - Use `forEach` instead of directly `replaceWith` as it's extremely likely that the codemod the person is going to write is not going to be as straightforward as just replacing a node with another one. I believe that this is going to be make the default experience more developer friendly. Let me know what you think :) cc @fkling * Update codeExample.txt

view details

Felix Kling

commit sha 01d76daac60b0933f7c1ba04d60bb14865121430

Update esprima to v3 and acorn to v4

view details

Felix Kling

commit sha 13c2d5db93d59bf51a78335d8c2c84f4a1ae1a3f

Update Tern and add note about autocompletion to jscodeshift example

view details

Marshall Roch

commit sha 42d7307ff8ec8a744f28458ff7b2df85fc8941a6

Upgrade to flow-parser@0.33.0 (#155)

view details

Henry Zhu

commit sha 9f01b3044e38acd61d3117b2e1305fb77f335194

update babel, babylon (#154)

view details

Henry Zhu

commit sha f5381696ea786ce9209d6333412c875242bf9e9b

add dynamicImport plugin (#157)

view details

Felix Kling

commit sha 9dead9386e562bd2acd5aa1153b1825cb3368f23

Switch to yarn (closes #156) ... which basically just means checking in the new yarn.lock file. npm should still work, except that there is no shrinkwrap anymore.

view details

Felix Kling

commit sha 1724e96780dca41f4cd844b4a4cb971154751d6d

Add flow's and babylon6's parser settings to recast's settings dialog Recast is a wrapper around existing parsers, but there hasn't been a way to specify the options passed to the wrapped parser. This change reuses the configuration dialog options for the flow and babylon6 parsers and shows them in the recast settings dialog.

view details

Felix Kling

commit sha ffb8006934f1e769274f49f46558cf8a5e29b4fb

Upgrade to flow v0.34

view details

(´・ω・`)

commit sha b8baa637c01807ad4a365b5f9b38a51e07867ec6

upgrade typescript (#158)

view details

Henry Zhu

commit sha be1e07ed7d8ebf6453c95211734040f3375e43a8

Use recast in babel transform (#161)

view details

Henry Zhu

commit sha de0a896e4db96bc2285c182d3161bff391ffb61d

add a name, remove parameter destructuring [skip ci] (#162) * add a name, remove parameter destructuring [skip ci] * use const [skip ci]

view details

Henry Zhu

commit sha 8f9d9b0ae42d59c5da244b9206afbd2770667dcb

Allow stage-0 syntax in transform plugins (#164)

view details

Gabe Levi

commit sha 359ec38b2630b332f89cc2ea95ba9a795d6266e5

Upgrade to flow v0.35 (#168)

view details

Felix Kling

commit sha f2869d1fec30d53031f9e7d101a3e3c508b7cdfd

Update depdendencies

view details

Kelly Selden

commit sha d77a402f4ba620a57d93187bee3d6a602a5f8520

update url to this location (#171)

view details

push time in 3 months

create barnchmotiz88/astexplorer

branch : hermes-js-parser

created branch time in 3 months

more