facebookarchive / flow-remove-types Goto Github PK

babel is better solution.

babel --plugins transform-flow-strip-types src -d src-remove-flowtypes

Maybe I miss something, but https://flow.org/try only checks for types, but does not run js after. I would like to remove types and run resulting js online.

In some cases I do want to remove the whitespace for better looking output (in particular, unlike babel, buble preserves the whitespaces after transpiling), which is currently not possible.

I've managed to create a fork that does so with sourcemap support using https://github.com/rich-harris/magic-string - wondering if we can add an option to enable this:

var { code, map } = flowRemoveTypes(input, {
  whitespace: false
});

If this looks like a good idea, I'll open a PR. rollup-plugin-flow will also need to be updated to accommodate this option.

I have a module using Flow in source /* @flow*/ and require('flow-remove-types/register');. It works standalone. Then I use this module in application which is using Flow too (/* @flow*/ and require('flow-remove-types/register');). Got a syntax error, because in register.js we have:

  var transformedSource = filename.indexOf('node_modules/') === -1
    ? removeTypes(source)
    : source;

and module's file sources are not processed, as their filenames contains 'node_modules/'.
What about to compile unconditionally?

var transformedSource = removeTypes(source);

P.S. Ubuntu 14, Node.js 6.9.1.

I get the following error when I use flow-remove-types pretty option with files which arent under "flow":

Error transforming /home/katja/Dokumente/alo/node_modules/lodash/cloneDeep.js with 'flow-remove-types' plugin: Cannot read property 'length' of undefined
TypeError: Error transforming /home/katja/Dokumente/alo/node_modules/lodash/cloneDeep.js with 'flow-remove-types' plugin: Cannot read property 'length' of undefined
    at generateSourceMappings (/home/katja/Dokumente/alo/node_modules/flow-remove-types/index.js:287:35)
    at Object.generateMap (/home/katja/Dokumente/alo/node_modules/flow-remove-types/index.js:116:28)
    at Object.transform (/home/katja/Dokumente/alo/node_modules/rollup-plugin-flow/index.js:15:28)
    at /home/katja/.nvm/versions/node/v4.4.5/lib/node_modules/rollup/src/utils/transform.js:19:35

It seems the problem might be in the following code sequence:

At https://github.com/flowtype/flow-remove-types/blob/master/index.js#L40

    if (pragmaStart === -1 && !all) {
      return resultPrinter(options, source);
    }

At https://github.com/flowtype/flow-remove-types/blob/master/index.js#L111

    generateMap: function () {
      return {
        version: 3,
        sources: [ 'source.js' ],
        names: [],
        mappings: pretty ? generateSourceMappings(removedNodes) : ''
      };
    }

At https://github.com/flowtype/flow-remove-types/blob/master/index.js#L281

// Generate a source map when *removing* nodes rather than replacing them
// with spaces.
function generateSourceMappings(removedNodes) {
  var mappings = '';
  var end = { line: 1, column: 0 };

  for (var i = 0; i < removedNodes.length; i++) {

If you would have used flow this wouldnt had happened xDD

Would it be possible to add a watch option to this package? This would make development much easier when working on a linked node_module.

I've been able to work around this temporarily by adding the following to the lib's package.json

{
  "devDependencies": {
    "chokidar-cli": "^1.2.0",
    "flow-remove-types": "^1.2.3"
  },
  "scripts": {
    "build": "rm -rf lib/ && flow-remove-types --out-dir lib/ src/ --pretty --all",
    "build:watch": "chokidar 'src/**/*.js' -c 'flow-remove-types {path} > lib/$(echo {path} | cut -c5-) --pretty --all'",
  }
}

// works
type A = {[key: string]: string};
type B = (foo: string) => string;

// works in flow, but flow-remove-types fails
type A = {[string]: string};
type B = (string) => string;

Flow documentation is not clear on the syntax and whether omitting names like this should be allowed, but Flow 0.35 parses such definitions without any errors. So flow-remove-types probably should too. cc @leebyron

I was just wondering whether it could be faster to take the original source and just replace the parts given start/end with spaces rather than appending to a string from scratch? Might need to do a simple test for it

I have project with an src/ folder containing type-annotated javascript, and a lib/ folder. In the project's root directory I have a .flowconfig file with the all=true option in the [options] section, so that I don't have to specify the //@flow directive in the beginning of each file. And while this works when type-checking with flow, flow-remove-types still requires the //@flow directive in order to parse flow javascript files.

I'm using flow-remove-types like this: flow-remove-types -d lib/ src/, executed from the project's root folder.

I'm using VueJS + FlowJS, when I remove types, attributes of class not initialized are removed too.
Unfortunately initialize variable is not possible here with VueJS because it come from a parent. So I can't rewrite it, there is an error at runtime.

e.g:

@Component
export default class UserDetails extends Vue {
  @Prop({ type: Number, required: true })
  id: number;
}

After flow-remove-types

@Component
export default class UserDetails extends Vue {
  @Prop({ type: Number, required: true })
}

That I expect:

@Component
export default class UserDetails extends Vue {
  @Prop({ type: Number, required: true })
  id;
}

Is there a solution ?
Thank you very much.

directory example:

├── src
|   └── components
|       └── MyComponent
|           ├── MyComponent.jsx   # with flow types
|           ├── MyComponent.css

After running the following command i get this:

flow-remove-types src/ --out-dir dest/

├── dest
|   └── components
|       └── MyComponent
|           ├── MyComponent.jsx   # without flow types
|           ├── # where is my .css file?

Having some trouble running this on Windows 😭 (Azure Site)
Works perfectly fine on my Mac/Linux

Version: 1.2.1

D:\home\site\repository\node_modules\.bin\flow-remove-types:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^
SyntaxError: missing ) after argument list
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

npm ERR! Windows_NT 6.2.9200
npm ERR! argv "D:\\Program Files (x86)\\nodejs\\6.10.0\\node.exe" "D:\\Program Files (x86)\\npm\\3.10.10\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.10.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `rm -rf dist && node node_modules/.bin/flow-remove-types -p -m -d dist src`
npm ERR! Exit status 1
....

This does not seem to be removing types from .mjs files.

type TSignUpBody = {
     ^^^^^^^^^^^
SyntaxError: Unexpected identifier

Starting the server using:

import 'flow-remove-types/register';
import './index.mjs';

The test mock framework I'm working on needs to use flow-remove-types to include some components of a project in its node_modules. From the docs it seems like I should be able to accomplish this with:

require('flow-remove-types/register')({ includes: /.*?\/mapbox-gl\/src\/.*/ });

But this doesn't work because of the logic in https://github.com/flowtype/flow-remove-types/blob/769385af04e8151579701d3c3a1d450a2db3b021/register.js#L49 -- the default exclusion value breaks my inclusion criterion. Instead I have to do something like:

require('flow-remove-types/register')({ includes: /.*?\/mapbox-gl\/src\/.*/, excludes: { test: function() { return false; }} });

This is workable but unintuitive. I'd like to suggest dividing the logic into more levels of priority:

explicit exclusion criteria > explicit inclusion criteria > default exclusion criteria > default inclusion criteria

Source code:

/* @flow */

type ObjMessageType<T> = {
  message: T
};
const f = async <MessageType>(
  message: MessageType
): Promise<ObjMessageType<MessageType>> => {
   await Promise.resolve();
   return Promise.resolve({
    message
  });       
};

flow-check

Ok
https://flow.org/try : No errors!

flow-remove-types

NOT Ok

flow-remove-types /tmp/test.types.js -d /tmp/build --all --pretty
/tmp/test.types.js
 ↳ Syntax Error: Unexpected token, expected ; (8:1)
   7:  ): Promise<ObjMessageType<MessageType>> => {

the error is reproduced only for async function!

BUT

/* @flow */

type ObjMessageType<T> = {
  message: T
};
async function f <MessageType> (
  message: MessageType
): Promise<ObjMessageType<MessageType>> {
   await Promise.resolve();
   return Promise.resolve({
    message
  });       
};

it makes no mistakes neither by flow-check nor by flow-remove-types

flow-check

Ok
https://flow.org/try : No errors!

flow-remove-types

Ok

flow-remove-types /tmp/test.types.js -d /tmp/build --all --pretty
/tmp/test.types.js
 ↳ /tmp/build/tmp/test.types.js

The following input works with regular node, but flow-node tries to eval it as soon as it sees the first newline:

const client = restify.createJsonClient({
  url: 'https://api.just-eat.com'
})

Dear @leebyron
In there's at documentation, flow-node repl not much explanation functionality of repl

flow-node
var x: Array<number> = {undef: 'undef'}
undefined
x
{ undef: 'undef' }

flow-node repl does not throwing error like flow cli actually 😅

this is an interesting issue, i assume there's a rexegp somewhere that replaces all @flow with whitespace or something

The project cvmtl/cvmtl-webui was working on MacOS X 10.2, with NodeJS 6.7.0, but now without any code change results in the following error:

{ TypeError: Invalid non-string/buffer chunk while parsing file: /Users/ajmas/Projects/cvmtl/cvmtl-webui/node_modules/mapbox-gl/js/mapbox-gl.js
    at validChunk (/Users/ajmas/Projects/cvmtl/cvmtl-webui/node_modules/readable-stream/lib/_stream_writable.js:249:10)
    at DestroyableTransform.Writable.write (/Users/ajmas/Projects/cvmtl/cvmtl-webui/node_modules/readable-stream/lib/_stream_writable.js:272:53)
    at Stream.ondata (stream.js:31:26)
    at emitOne (events.js:96:13)
    at Stream.emit (events.js:188:7)
    at drain (/Users/ajmas/Projects/cvmtl/cvmtl-webui/node_modules/through/index.js:36:16)
    at Stream.stream.queue.stream.push (/Users/ajmas/Projects/cvmtl/cvmtl-webui/node_modules/through/index.js:45:5)
    at Stream.transform (/Users/ajmas/Projects/cvmtl/cvmtl-webui/node_modules/unflowify/index.js:29:12)
    at _end (/Users/ajmas/Projects/cvmtl/cvmtl-webui/node_modules/through/index.js:65:9)
    at Stream.stream.end (/Users/ajmas/Projects/cvmtl/cvmtl-webui/node_modules/through/index.js:74:5)
  filename: '/Users/ajmas/Projects/cvmtl/cvmtl-webui/node_modules/mapbox-gl/js/mapbox-gl.js',

Doing some investigation shows that it is the change of flow-remove-types from 1.0.5 to 1.1.0 that seems to be causing the issue. For the moment I have downgraded to 1.0.5 in my local install to resolve the issue.

Note, this happens when I do:

node_modules/.bin/gulp build

Any ideas as to the cause?

Is it possible to supply an option to remove pragmas with corresponding comments completely, if comments have no other content but pragma only? Like:
/* @flow foo */ → /* foo */,
but /* @flow */ → (empty string).

For now I got emptish comments in my generated code like this: /* */.

Would be great to have the latest changes in my deps.

https://flowtype.org/docs/running.html

Do we want to add some docs there as an alternative?

Are there any plans to match the licensing of React, Jest, Flow, and Immutable (relicense this library under MIT, remove the PATENTS file, etc.)?

Something I'd like to see is the ability to compress or suppress the output when running the command-line tool as not to fill my terminal with copy commands. It's almost never useful information in the write code -> run -> test -> write code cycle and produces a lot of excess output in my terminal.

I could pipe the output to /dev/null but honestly I'd rather avoid doing that if possible because I don't want to lose access to the exit code for the system.

Any thoughts?

When I use the command flow-remove-types src/services/context/index.js > TEST.js
For demo purposes I just selected a few flow syntax from our code to pass through flow-remove-types, I get the following output, the same as the input, nothing has been parsed:

`const Context = require('./models/Context');
const ContextDialogstate = require('./models/ContextDialogstate');
const Dialogstate = require('../dialogstate/models/Dialogstate');

const getContextDialogstateByType = async (dialogstateId: number, type: string) => {
const contextDialogstates = await ContextDialogstate
.where({ dialogstate_id: dialogstateId, type })
.fetchAll({
withRelated: ['context'],
});

return contextDialogstates ? contextDialogstates.toJSON() : null;
};`

(No need to paste input source code and output source code, they are identical)

It doesn't work either when I use the following command flow-remove-types -d lib/src/ ./src, the files are just copied without parsing flow

So, I'm working on a project that uses the CST project. That project has very little documentation, so I wanted to see if I could generate some for local development. ESDoc was giving the best results, but it was erroring on many files because the project is using flow for type checking. So I grabbed this module and set it on the src directory in the cst repo and almost immediately encountered an error. It was telling me that a file was not found, and that file was supposed to be the file created by this module! Ultimately, to get the desired results, I had to create the empty directory tree in the destination directory that matched the directory tree in the source directory. After doing that, the command succeeded without issue:

$ flow-remove-types src/ --out-dir src-unflowed/
src/Parser.js
 ↳ src-unflowed/Parser.js
src/Traverse.js
 ↳ src-unflowed/Traverse.js
src/elementTree.js
 ↳ src-unflowed/elementTree.js
src/index.js
 ↳ src-unflowed/index.js
src/visitorKeys.js
 ↳ src-unflowed/visitorKeys.js
fs.js:549
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open 'src-unflowed/elements/Element.js'
  ...

// not using -p to illustrate all dirs with files in them
$ mkdir src-unflowed/elements
$ mkdir src-unflowed/elements/types
$ mkdir src-unflowed/elements/types/utils
$ mkdir src-unflowed/plugins
$ mkdir src-unflowed/plugins/scopes
$ mkdir src-unflowed/utils

// then all files succeeded
$ flow-remove-types src/ --out-dir src-unflowed/
src/Parser.js
 ↳ src-unflowed/Parser.js
src/Traverse.js
 ↳ src-unflowed/Traverse.js
src/elementTree.js
 ↳ src-unflowed/elementTree.js
src/index.js
 ↳ src-unflowed/index.js
src/visitorKeys.js
 ↳ src-unflowed/visitorKeys.js
src/elements/Element.js
 ↳ src-unflowed/elements/Element.js
src/elements/ElementAssert.js
 ↳ src-unflowed/elements/ElementAssert.js
...

Whenever I execute this command:

./node_modules/.bin/flow-remove-types src/ -D lib/

I get this error:

Source "src/" is not a file.

Here is my directory tree (autogenerated):

|____node_modules
| |____.bin
| | |____babylon
| | |____flow-node
| | |____flow-remove-types
| |____babylon
| | |____bin
| | | |____babylon.js
| | | |____generate-identifier-regex.js
| | |____CHANGELOG.md
| | |____lib
| | | |____index.js
| | |____LICENSE
| | |____package.json
| | |____README.md
| |____flow-remove-types
| | |____flow-node
| | |____flow-remove-types
| | |____index.js
| | |____LICENSE
| | |____package.json
| | |____PATENTS
| | |____README.md
| | |____register.js
| |____vlq
| | |____CHANGELOG.md
| | |____dist
| | | |____vlq.js
| | |____package.json
| | |____README.md
| | |____src
| | | |____vlq.js
|____package.json
|____src
| |____index.js

I am using MacOS Siera and Node version 6.10.0

Here are the steps that caused the error:

mkdir flow-test
cd flow-test
npm init # I left all the options default
npm install --save-dev flow-remove-types
mkdir src
nano src/app.js #Added a hello world with a @flow pragma comment and a flow annotated variable

As per the instructions on the page (https://flow.org/en/docs/install/), I ran:

./node_modules/.bin/flow-remove-types src/ -D lib/

And was delightfully greated with the error:

Source "src/" is not a file.

I just run: flow-remove-types pages/login.js > pages/login.js
Luckily I have version control, otherwise it would be a disaster

Would it be possible to transform existing interfaces to prop types definitions?

Any example of using flow-remove-types with gulp task?

I was having issues with running my tests, because I didn't realise this is not acknowledging flowconfig file. In my flowconfig I have all=true, but to get flow-remove-types/register work in the same way, I have to pass {all: true} to the module.

I would like to use flow on an existing project which is not using babel at all.

Is it safe to use flow-remove-types for production code ? Is there any things to consider before ?

If you're using async/await-syntax on NodeJS (available with a flag, and by default from NodeJS 8), the flow-node process chokes on invalid syntax.

It would be nice to support this, not to force people over to Babel.

@leebyron
Before deploying to product environment, I want to remove flow type.
Using flow-remove-types --out-dir in out , it have not include such file.

When i pass the following code through flow-remove-types with pretty option

export default class Destroyable {
    destroyed: boolean;

    constructor() {
        this.destroyed = false;
    }

    destructor() {
        this.destroyed = true;
    }

    destroy() {
        this.destructor();
    }
}

i get

export default class Destroyable {
    

    constructor() {
        this.destroyed = false;
    }

    destructor() {
        this.destroyed = true;
    }

    destroy() {
        this.destructor();
    }
}

It retains the newlines where the flow class property type annotations where stripped off, my assumption would be that pretty option should handle this case to remove the newlines

I have this bit of code:

const comicImg = $('img[src*="/comics/"]');
...
const comicImage = comicImg.get<HTMLImageElement>(0);
let comicLinkUrl = (comicImage.src: any); // Put this cast here just to confirm that it otherwise works

$(...) returns the class type JQuery, which has the following definition of get on it: get<T: HTMLElement>(index: number): T;

When running this through flow-remove-types, this comes out:

const comicImg = $('img[src*="/comics/"]');
...
const comicImage = comicImg.get<HTMLImageElement>(0);
let comicLinkUrl = (comicImage.src     ); // Put this cast here just to confirm that it otherwise works

Hey look, the generic type is still there in the function call! That can't be right, can it?

i.e. the <>Some fragment content</> syntax

How can I add flow-remove-types to be used by jest?

In the readme you mention eslint support and link to eslint-plugin-flowtype, where it says that you need the babel-eslint parser to handle flow types (which negates the use of flow-remove-types entirely). I'm a little confused – can I use flow-remove-types with eslint?

Hi,

with the new flowtype, Promise need to have an annotation as code below, but flow-remove-types is not removing the annotation:

//@flow
function foo() {

    return new Promise(function (resolve, reject) {
        resolve('hello')
    })
}

exports.dummy = function (param: string) {
    return new Promise<string>(function (resolve, reject) {
        resolve(param)
    })
}

output of flow-remove-types, the still remains:

//     

function foo() {

    return new Promise(function (resolve, reject) {
        resolve('hello')
    })
}


exports.dummy = function (param        ) {
    return new Promise<string>(function (resolve, reject) {
        resolve(param)
    })
}

What version of node is this planning on supporting? I don't see anything in particular since you started with var but also use shorthand object notation - can also add a travis config

Using nyc to instrument test coverage of flow-typed code, this fails:

nyc --require=flow-remove-types/register npm test
# failed to instrument code ... (complains about a flow type)

On the other hand, using babel-register with babel-plugin-transform-flow-strip-types works:

nyc --require=babel-register npm test

I noticed a comment in register.js — could it be this difference (Module.prototype._compile vs require.extensions) that prevents nyc from working? And would you accept a PR that switches register mechanism to require.extensions?

cc @leebyron

@leebyron, I see last release was back in Oct 18, 2017.

If accepted I'd be keen to make use of --copy-source feature submitted in PR #64

I have project with an src/ folder containing type-annotated javascript, and a lib/ folder containing the final files. In the project's root directory I have a .flowconfig file with the all=true option in the [options] section, so that I don't have to specify the //@flow directive in the beginning of each file. And while this works when type-checking with flow, flow-remove-types still requires the //@flow directive in order to parse and compile the files properly.

I'm using flow-remove-types like this from the project's root folder: flow-remove-types -d lib/ src/.

I was expecting that using yarn flow-remove-types deleteme.js --all --pretty -d no-types

given:

/* @flow */

function foo<T> (a: T): T {
  return a
}

const bar = foo<number>(123)

the output would be:

/*  */

function foo (a) {
  return a
}

const bar = foo(123)

but instead i got:

/*  */

function foo (a) {
  return a
}

const bar = foo<number>(123)

Is this the expected behavior?
Is it possible to remove the generic types with this utility?

const normalizeEvent = cached((name: string): {
  name: string,
  once: boolean,
  capture: boolean,
  passive: boolean,
  handler?: Function,
  params?: Array<any>
} => {
})

removed:

const normalizeEvent = cached((name        )   
               
                
                   
                   
                     
                     
  => {
})

because:

An arrow function cannot contain a line break between its parameters and its arrow.

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'