<p dir="auto"><a href="https://github.com/facebook/flow/blob/master/Changelog.md">Flow v0.32 adds a new syntax</a> for exact object types. It uses {| and |} instead of { and }. It supports code like this now:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="type Foo = {|
  x: string;
  y: number;
|};
function foo(object: {| x: string, y: number |}) {
}"><pre class="notranslate"><span class="pl-s1">type</span> <span class="pl-v">Foo</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">|</span>
  <span class="pl-s1">x</span>: <span class="pl-s1">string</span><span class="pl-kos">;</span>
  y: <span class="pl-s1">number</span><span class="pl-kos">;</span>
<span class="pl-c1">|</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-k">function</span> <span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-s1">object</span>: <span class="pl-kos">{</span><span class="pl-c1">|</span> <span class="pl-s1">x</span>: <span class="pl-s1">string</span><span class="pl-kos">,</span> <span class="pl-s1">y</span>: <span class="pl-s1">number</span> <span class="pl-c1">|</span><span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Babel Configuration (.bablerc, package.json, cli command)</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;plugins&quot;: [&quot;transform-flow-strip-types&quot;]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"plugins"</span>: <span class="pl-kos">[</span><span class="pl-s">"transform-flow-strip-types"</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">In Flow annotations, Babel should handle {| ... |} similarly to { ... } and the transform-flow-strip-types plugin should strip it out just the same. With transform-flow-strip-types, the code should compile to something like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
function foo(object) {}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-s1">object</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">(And if the syntax-flow plugin is present and not the transform-flow-strip-types plugin, then Babel should be able to reproduce the original code with the {| ... |} syntax preserved.)</p>
<h3 dir="auto">Current Behavior</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="SyntaxError: test.js: Unexpected token (1:12)
&gt; 1 | type Foo = {|
    |             ^
  2 |   x: string;
  3 |   y: number;
  4 | |};"><pre class="notranslate"><code class="notranslate">SyntaxError: test.js: Unexpected token (1:12)
&gt; 1 | type Foo = {|
    |             ^
  2 |   x: string;
  3 |   y: number;
  4 | |};
</code></pre></div>
<h3 dir="auto">Your Environment</h3>
<table role="table">
<thead>
<tr>
<th>software</th>
<th>version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Babel</td>
<td>6.14.0</td>
</tr>
</tbody>
</table>
<p dir="auto">In case the UMD formatter is used, it would be great if the detected module system was also exposed somehow. It would allow for even greater dirty hacks...</p>
<p dir="auto">Right now I need to duplicate the detection code (sniffing the global object since export &amp; module are function parameters for the factory) in order to conditionally load other modules.</p>