Syntax highlighting broken after any <Type>cast statement

[johnbeard]

Any statement that uses the <Type>variable casting syntax breaks all the highlighting for the rest of the file.

I can reproduce with the 04e0d82 commit with this file:

function a_func() {
    let foo = 2
    let sfoo = <string>foo // this comment doesn't work

        // syntax highlighting is now broken, all text is un-highlighted
        // except text in <angles> and the indentation is too deep
}

[leafgarland]

Many thanks for the report and example code.

[leafgarland]

I cannot recreate though. This is the highlighting I see

[gf3]

seeing similar for generic types (line 12):

code

``` ts /** * @module host */

import {isAppBridgeAction, isFromApp, validatedActionPayload} from '../actions/validator';
import {throwError, ActionType as ErrorActionType, ErrorAction} from '../actions/Error';
import {addAndRemoveFromCollection} from '../util/collection';
import {MessageTransport} from './';
import {apiClientLoad} from './actions';
import {isValidConfig, throwInvalidConfigError} from './clientValidator';
import {AnyAction, Application, Dispatch, Middleware, MiddlewareAPI, Reducer} from './types';

export const buildMiddleware = (reducers: Reducer): Middleware => {
const transports: MessageTransport[] = [];
const subscribers: Function[] = [];

let store: MiddlewareAPI;
let appStore: any = {};

const middleware: any = (hostStore: MiddlewareAPI) => {
store = hostStore;

return (next: Dispatch<AnyAction>) => <A extends AnyAction>(action: A) => {
  let finalAction: A | ErrorAction = action;
  if (isAppBridgeAction(action) && !isFromApp(action)) {
    for (const transport of transports) {
      // Validate when action is not from app (example Redux devtools)
      // Actions from app is already validated in Client.ts
      const transportAction: A | ErrorAction = validatedActionPayload(
        action,
        transport.localOrigin,
      );
      transport.dispatch({
        payload: transportAction,
        type: 'dispatch',
      });

      // If action is not valid, final action sent will be error action
      if (transportAction !== action) {
        finalAction = transportAction;
      }
    }
  }
  // TODO: Support multiple app stores? Right now there is only 1 global store
  appStore = reducers(appStore, finalAction);

  return next(finalAction);
};

};

middleware.load = (data: any): Application => {
{
const {config} = data;

  store.dispatch(apiClientLoad(config));

  return {
    attach(to) {
      const unsubscribe = to.subscribe(event => {
        const action = event.data;
        const type = action && action.type;
        const payload = action && action.payload;
        const source = action && action.source;

        if (!isValidConfig(source, config)) {
          throwInvalidConfigError(source, config, payload);
        }

        for (const listener of subscribers) {
          listener(action);
        }

        switch (type) {
          case 'dispatch':
            store.dispatch({...payload, source});
            break;

          case 'getState':
            to.dispatch({
              type,
              // tslint:disable-next-line:no-invalid-this
              payload: this.getState(),
            });
            break;

          default:
            throwError(
              ErrorActionType.INVALID_ACTION,
              action,
              'Unknown action type. Expected `dispatch` or `getState`.',
            );
        }
      });

      return addAndRemoveFromCollection(transports, to, unsubscribe);
    },
    dispatch(action) {
      store.dispatch(action);
    },

    getState() {
      return appStore;
    },

    subscribe(listener) {
      return addAndRemoveFromCollection(subscribers, listener);
    },
  };
}

};

return middleware;
};

</p>
</details>

[niklaas]

I can confirm this issue too. As workaround I do something like the following

const something = someotherthing as Foo;

instead of

const something = <Foo>someotherthing

[pbondoer]

I'm seeing this as well. I'm willing to put in the time to take a look but I'd need some general pointers as I'm not too familiar with how vim syntax works... any ideas?

[leafgarland]

You could start with the 3 chapters in this book
http://learnvimscriptthehardway.stevelosh.com/chapters/45.html

And vim help.

Then, I have this key binding to show me the syntax groups for a location in a file

" Show syntax groups under cursor
map <silent> zs :for id in synstack(line("."), col("."))<bar>
      \ echo synIDattr(id, "name").' '<bar> execute 'echohl' synIDattr(synIDtrans(id), "name") <bar> echon synIDattr(synIDtrans(id), "name") <bar> echohl None <bar>
      \ endfor<CR>

With that and the examples above you might be able to figure out what it is that confuses the highlighting.

[Lucklyric]

I think this problem might be caused by syntax conflict. Do you have any other related syntax plugins installed e.g. vim-jsx-pretty. I did have the same issue and I found it is caused by vim-jsx-pretty not typescript-vim

[pbondoer]

I can confirm what @Lucklyric said, this only happens with vim-jsx-pretty enabled. I've opened an issue on their repo:

MaxMEllon/vim-jsx-pretty#114

For now I simply disabled vim-jsx-pretty. I tried to do something fancy with vim-plug conditional loading but it didn't work out (it seems typescript-vim tricks vim-plug into thinking typescript files are also javascript files, which doesn't allow us to use the for option).

[pbondoer]

@leafgarland I believe you can close this issue as it is not related to typescript-vim and the issue has been fixed upstream in the plugin that caused it 🎉

MaxMEllon/vim-jsx-pretty#114

---

If you found this through a search engine like me, it may still be an issue if you use vim-jsx-typescript (see peitalin/vim-jsx-typescript#21).

[leafgarland]

@pbondoer ok, thanks for investigating