enable basic react-native support

[vladp]

Using react 0.20.0 on android. With the small changes now t7 can be loaded up. Change 1) added another condition to browser check. If ReactNative is present, isBrowser will be set to false

Change 2) in applyValues function, I had to introduce an if not null condition for 'placeholders' variable. Because it was 'null' if there were no replacement values present in my tests.

Even with these changes, however the library does not work for me. It appears that it cannot parse a valid JSX such as

  return (t7`
      <View style={styles.list}>
      <Text  style={styles.instructions}
      {...route.passProps}
      navigator={navigator}
      >

      My Text
      </Text>
    <ToolbarAndroid
            style={styles.toolbar}
            title={route.title}

            onIconClicked={() => navigator.pop()}
    /> 
      </View>
    `);

The error I am getting is: Expected corresponding t7 closing tag for ToobarAndroid Which is clearly is wrong, because JSX allows single closing tags. But just in case, I had tried to close with and still did not work.

Attaching my js index test javascript rn-android-with-t7.zip

[trueadm]

@vladp Hi, I'm a bit confused by how you've used the tagged template strings. To pass in expressions, you need to use the syntax ${ someVal } rather than { someVal }. Furthermore, things like object spreads { ...route.passProps } are not natively supported yet (nor might it ever, has it's only a Stage 2 proposal), so you'd have to use Babel to transpile to source.

[vladp]

Hi @trueadm , thank you for such a quick follow up. I actually did not use ${someval} syntax in that block. Instead I was just expecting no substitutions will occur and just everything will work as is without t7. But started getting the error. I did not know about object spreads.

I had modified the above code fragment: removed the objects spreads, and introduced at least one substitution.

function renderScreen(route, navigator)
{
  const dynamicComp='<Text>';
  const testT7='this is my text';
    return (t7`
      <View style={styles.list}>
      <Text  style={styles.instructions}
      navigator={navigator}
      >

      ${testT7}
      </Text>
    <ToolbarAndroid
            style={styles.toolbar}
            title={route.title}

            onIconClicked={() => navigator.pop()}
    /> 
      </View>
    `);
}

Getting the same error however. Let me know if you would expect the above block to work This time attaching the screen shot as well.

thank you

[trueadm]

@vladp can you try this instead?

function renderScreen(route, navigator)
{
  const dynamicComp='<Text>';
  const testT7='this is my text';
    return (t7`
      <View style=${ styles.list }>
        <Text  
          style=${ styles.instructions }
          navigator=${ navigator }
        >
          ${testT7}
        </Text>
        <ToolbarAndroid
            style=${ styles.toolbar }
            title=${ route.title }
            onIconClicked=${() => navigator.pop()}
        /> 
      </View>
    `);
}

[vladp]

Thank you!. I had tried the above. It seemed to passed the previou point of error. So adding spaces after curly braces for JSX variables -- appears to have helped. In fact another thing I had noticed is that my Emacs flywheel with JSX is highlighting those things better as well (attaching a screen shot to show). just for my knoweldge, are the additional spaces part of standards (JSX or ES6)?

I am getting, however, an error in line 810 return t7._cache[templateKey](values, this, t7); The error is 'Can't find variable: React' (see attached)

[trueadm]

@vladp it wasn't the spaces, it was because you were missing $ before the first curly brace. This isn't JSX, so we have to adhere to ES2015 tagged template standards in terms of defining expressions.

Your error is because it can't find React on the global (to do React.createElement).

[vladp]

@trueadm . Thank you, I see. Within t7 we have to adhere to ES2015, not JSX. I should have picked this up right away, instead I thought that t7 would do substitutions only where I had ${}. But I can see now, how this would be a wrong assumption.

WRT React global, if you look at my emacs screen shot - I have that defined ontop, Did I do that wrong?