TSX Support?

[williamluke4]

I don't know if this is currently supported but I have tried exporting to a component from a tsx file and it was just blank. Any ideas? And great work its got lots of potential!!! 👍

[borislit]

hey @williamluke4! Thanks for liking the extension :) Can You please post the original component and snippet You've tried to extract? Ran some tests - and everything seems to be in order Thanks :)

[williamluke4]

This is what I was trying to extract

Snippet

<GridCard>
    <Typography variant="headline">
        <IconButton
            color="secondary"
            aria-label="add"
            onClick={() => this.handleModal('TRIP')}
        >
            <AddIcon/>
        </IconButton>
         Trips
    </Typography>
    {trips && <DataGrid
        columns={columns}
        rows={trips}
        onRowClick={this.handleClick}
    />}
</GridCard>

Full

import * as React from 'react';
import {IconButton, Typography} from '@material-ui/core';
import {Add as AddIcon} from '@material-ui/icons';
import {withApollo, compose, Query, graphql} from 'react-apollo';
import {withRouter, SingletonRouter} from 'next/router';

import Layout from '../../components/Layout';
import AddTripModal from '../../components/Modals/Trip/TripModal';
import Loading from '../../components/Loading';
import DataGrid from '../../components/Grid';
import GridCard, {GridWrapper} from '../../components/General/GridCard';

import defaultPage from '../../hocs/defaultPage';
import withData from '../../lib/withData';
import {chatManager} from '../../utils/chatKit';

import {ALL_TRIPS} from '../../graphql/Trips/queries';
import {UPSERT_TRIP} from '../../graphql/Trips/mutations';
import { User } from '../../graphql/types';

type ModalType = 'TRIP' | null;

interface IState {
  modal: ModalType;
}
interface IProps {
  router: SingletonRouter;
  loggedUser: User;
}
const columns = [
  { name: 'id', title: 'ID' },
  { name: 'name', title: 'Name' },
  {
    name: 'originator',
    title: 'Originator',
    getCellValue: (row, _columnName) => { return row.originator ? row.originator.basicInfo.firstname : 'None'; }
  },
  {
    name: 'consultant',
    title: 'Consultant',
    getCellValue: (row, _columnName) => { return row.preparedBy ? row.preparedBy.name : 'None'; }
  },
  {
    name: 'type',
    title: 'Type',
    getCellValue: (row, _columnName) => { return row.originator.userType; }
  },
  { name: 'status', title: 'Status' },
  { name: 'paymentStatus', title: 'Payment Status' }
];
class Trips extends React.Component<IProps, IState> {
  constructor(props) {
    super(props);
    this.state = {
      modal: null
    };
  }
  handleModal = (modalType: ModalType) => {
    this.setState({modal: modalType});
  }
  handleClick = (trip) => {
    this.props.router.push({
      pathname: '/trips/trip',
      query: {
        id: trip.id
      }
    });
  }
  startChatKit = () => {
    if (process.browser) {
      chatManager(this.props.loggedUser.id)
        .connect()
        .then(currentUser => {
          console.log('Successful connection', currentUser);
        })
        .catch(err => {
          console.log('Error on connection', err);
        });
    }
  }
  render() {
    return (
      <Layout loggedUser={this.props.loggedUser}>
        {this.props.loggedUser && this.startChatKit()}
        <Query query={ALL_TRIPS}>
          {({loading, error, data: {
              trips
            }}) => {
            if (loading)
              return <Loading/>;
            if (error)
              return `Error!: ${error}`;

            return (
              <GridWrapper>
                <GridCard>
                  <Typography variant="headline">
                    <IconButton
                      color="secondary"
                      aria-label="add"
                      onClick={() => this.handleModal('TRIP')}>
                      <AddIcon/>
                    </IconButton>
                    Trips
                  </Typography>
                  {trips && <DataGrid
                    columns={columns}
                    rows={trips}
                    onRowClick={this.handleClick}
                  />
                  }
                </GridCard>
                <GridCard>
                  <Typography variant="headline">
                    Upcoming Trips
                  </Typography>
                </GridCard>
              </GridWrapper>
            );
          }}
        </Query>
        <AddTripModal
          user={this.props.loggedUser}
          open={this.state.modal === 'TRIP'}
          onClose={() => this.handleModal(null)}
          upsertMutation={this.props.upsertTrip}/>
      </Layout>
    );
  }
}

export default compose(
  // withData gives us server-side graphql queries before rendering
  withData,
  // withApollo exposes `this.props.client` used when logging out
  withApollo,
  withRouter,
  graphql(UPSERT_TRIP, {name: 'upsertTrip'})
)(defaultPage(Trips));

[borislit]

Hey @williamluke4 I've tried your code and it worked for me (see gif below) Could you please provide more information or preferable and GIF/Video?

[williamluke4]

I'm am getting "Maximum call stack size exceeded" when using glean in any part of the project. What is the best way to debug this so I can provide you with more info?

[borislit]

Once you checkout the repo, please follow the instructions here: https://github.com/wix/vscode-glean/issues/36#issuecomment-435649266

Then can you please put a breakpoint here: https://github.com/wix/vscode-glean/blob/a07eb2e383e372b3f1bda790b6424a6910acf1aa/src/code-actions.ts#L108

And see what do you get in a text variable?

Also, place a breakpoint here: https://github.com/wix/vscode-glean/blob/a07eb2e383e372b3f1bda790b6424a6910acf1aa/src/code-actions.ts#L22

What value do you get here?

[borislit]

@williamluke4 you are getting the error on the same code and code snippet as the original one?

[williamluke4]

It doesn't matter where in my project I try, I get the same "Maximum call stack size exceeded" error. Thanks for the instructions, will start digging when I have got some free time :)

[borislit]

Which OS are using (type/version) ?

[williamluke4]

VS Code 1.28.2 Windows 10 Pro (Version 1803)

[borislit]

Oh, so i guess its the duplicate of https://github.com/wix/vscode-glean/issues/36. There seems to be an issue with Windows 10. Also look into it later today, once i get my hands on a windows machine #

[williamluke4]

Ok awesome thanks, Boris!

[borislit]

@williamluke4 I've pushed a fixed. Should be in https://github.com/wix/vscode-glean/tree/v4.2.1

The issue seems to be a wrong VScode SDK API i've used to resolve file path URI. Somehow it worked on Mac, but failed on Windows. See the fix here: https://github.com/wix/vscode-glean/commit/29b808ab44385a53e1a3b40c88e5ce27cd4e49fc

Please validate :)

[williamluke4]

No luck all tho I have found the following error: ERR Cannot read property 'superClass' of undefined: TypeError: Cannot read property 'superClass' of undefined

[borislit]

Hey @williamluke4. Since this is a duplicate of https://github.com/wix/vscode-glean/issues/36, lets move our conversation there. The author is having the exact same issue your are having. Thank you