Jaredk3nt / laserwave

A retro outrun / cyberpunk inspired VS Code theme
https://marketplace.visualstudio.com/items?itemName=jaredkent.laserwave
MIT License
141 stars 20 forks source link

Add support for Typescript with React/React-Native #27

Closed mathieubruguier closed 4 years ago

mathieubruguier commented 4 years ago

TS support with React/React-Native would be amazing. It mostly works for now, but it looks like types appear white?

image

Here's a code sample from the official React-Native website:

// components/Hello.tsx
import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

export interface Props {
    name: string;
    enthusiasmLevel?: number;
}

const Hello: React.FC<Props> = (props) => {
    const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(props.enthusiasmLevel);

    const onIncrement = () => setEnthusiasmLevel((enthusiasmLevel || 0) + 1);
    const onDecrement = () => setEnthusiasmLevel((enthusiasmLevel || 0) - 1);

    const getExclamationMarks = (numChars: number) => Array(numChars + 1).join('!');
    return (
        <View style={styles.root}>
        <Text style={styles.greeting}>
            Hello{' '}
            {props.name + getExclamationMarks(enthusiasmLevel || 0)}
        </Text>

        <View style={styles.buttons}>
            <View style={styles.button}>
            <Button
                title="-"
                onPress={onDecrement}
                accessibilityLabel="decrement"
                color="red"
            />
            </View>

            <View style={styles.button}>
            <Button
                title="+"
                onPress={onIncrement}
                accessibilityLabel="increment"
                color="blue"
            />
            </View>
        </View>
        </View>
    );
    }
}

// styles
const styles = StyleSheet.create({
    root: {
        alignItems: 'center',
        alignSelf: 'center',
    },
    buttons: {
       flexDirection: 'row',
        minHeight: 70,
        alignItems: 'stretch',
        alignSelf: 'center',
        borderWidth: 5,
    },
    button: {
        flex: 1,
        paddingVertical: 0,
    },
    greeting: {
        color: '#999',
        fontWeight: 'bold',
    },
});

Thanks for your help!

Jaredk3nt commented 4 years ago

@mathieubruguier https://github.com/Jaredk3nt/laserwave/pull/28 Open PR for changes if you want to check it out. If not I will merge and release at the end of the week

mathieubruguier commented 4 years ago

I'm not 100% positive how to preview it inside VSCode? I'm sure it looks great haha

Jaredk3nt commented 4 years ago

Lost track of stuff, not sure if this was properly released, but it will be in v1.2.9 for sure 👍 sorry about that!