How is a merge conflict valid in a React, Typescript project

Question

I found the code, pasted, below checked in to our React/Typescript - JSX/TSX project. It contains a Git merge conflict that hasn't been resolved.

The code builds (through Fuse-box) and runs in the browser!

The "transpiled" code results in the top element being resolved as the root element of our component and the second element (beginning ".app-container") being ignored.

It appears, that in some situations, git merge conflicts can be ignored through TSX/JSX interpretation / parsing / transpilation.

My questions are: How does this work? Is this behaviour intentional?

export const App: SFC = () => (
<<<<<<< HEAD
    <Provider store={window.uglySolution}>
        <Router history={customHistory}>
            <Switch>
                <Route exact path='/' component={Welcome}/>
                <Route exact path='/advice' component={PageLayout}/>
                <Route exact path='/login' component={Login}/>
                <Route exact path='/manage' component={ManageLayout}/>
            </Switch>
        </Router>
    </Provider>
=======
    <div className='app-container'>
        <Provider store={window.uglySolution}>
            <Router history={customHistory}>
                <Switch>
                    <Route exact path='/' component={Welcome}/>
                    <Route exact path='/advice' component={PageLayout}/>
                    <Route exact path='/login' component={Login}/>
                    <Route exact path='/manage' component={ManageLayout}/>
                </Switch>
            </Router>
        </Provider>
    </div>
>>>>>>> f81b0b1b458e3d41f91faa2e726be6d88a35d9f8
);

Answer 1

I know this is quite a late answer (almost a year later) but in case somebody is googling this and wondering about the same thing. Yes, the behavior intentional there is code right at the typescript lexer to handle git merge conflicts! Note: skip trivia defaults to true on the parser.

if (isConflictMarkerTrivia(text, pos)) {
  pos = scanConflictMarkerTrivia(text, pos, error);
  if (skipTrivia) {
    continue;
}
else {
    return token = SyntaxKind.ConflictMarkerTrivia;
  }
}

And below is the code that handles merge conflicts:

function scanConflictMarkerTrivia(text: string, pos: number, error?: (diag: DiagnosticMessage, pos?: number, len?: number) => void) {
    if (error) {
        error(Diagnostics.Merge_conflict_marker_encountered, pos, mergeConflictMarkerLength);
    }

    const ch = text.charCodeAt(pos);
    const len = text.length;

    if (ch === CharacterCodes.lessThan || ch === CharacterCodes.greaterThan) {
        while (pos < len && !isLineBreak(text.charCodeAt(pos))) {
            pos++;
        }
    }
    else {
        Debug.assert(ch === CharacterCodes.bar || ch === CharacterCodes.equals);
        // Consume everything from the start of a ||||||| or ======= marker to the start
        // of the next ======= or >>>>>>> marker.
        while (pos < len) {
            const currentChar = text.charCodeAt(pos);
            if ((currentChar === CharacterCodes.equals || currentChar === CharacterCodes.greaterThan) && currentChar !== ch && isConflictMarkerTrivia(text, pos)) {
                break;
            }

            pos++;
        }
    }

    return pos;
}

sources: https://github.com/Microsoft/TypeScript/blob/0ef0b7adea643a4a28cf9ada1476ff5650a1a9f2/src/compiler/scanner.ts#L1604 https://github.com/Microsoft/TypeScript/blob/0ef0b7adea643a4a28cf9ada1476ff5650a1a9f2/src/compiler/scanner.ts#L565

Answer 2

It appears, that in some situations git merge conflicts can be resolved though Tax/JSX interpretation / parsing / transpilation.

The given code is a compile error . That said compile errors don't mean you don't get any JS generated . There is an option noEmitOnError that will prevent this, but that said you should see a compile error and fix it even without this option.

More

https://basarat.gitbooks.io/typescript/content/docs/why-typescript.html