Material-UI Migration Helper: codemod-script? - node.js

I'm updating from Material-UI 0.x to 1.0.
The docs for migration-helper say to run:
jscodeshift -t <codemod-script> <path>.
I've never used jscodeshift before, and I've never seen the notation before, so I would like to get some advice on how to use this. :) Googling jscodeshift codemod-script brings up nothing relevant.
What does codemod-script need to be?

It took me a bit to figure this out. After you've installed jscodeshift and the material-ui codemods, the command should be formatted as follows:
jscodeshift -t <the file path of the specific code mod file> <the location of the files you want to process>
jscodeshift -t ./node_modules/#material-ui/codemod/lib/v1.0.0/svg-icon-imports.js ./src/
I also use the extension jsx for my files so I had to add the --extensions flag:
jscodeshift -t ./node_modules/#material-ui/codemod/lib/v1.0.0/svg-icon-imports.js ./src/ --extensions jsx

Related

ESLint output to file and console at the same time

By default ESLint will print it's results to standard output. If you add the output option, it will redirect the output to a file. So far so good, but is there a way for it to do both?
We need the file output for GitLab to parse the results and display them in the UI, but some of our developers can't be bothered to change the way they do things and want to look at the output instead.
Is there an out-of-the-box way to get both or is my only chance to write my own script for running ESLint using the CLIEngine Node stuff mentioned in their documentation?
Thanks in advance.
So, after some research I think I found the answer myself.
There's basically 2 ways to have output on both console and file at the same time:
The easy way is by using this JavaScript package called ESLint Output.
The more complicated way is basically building said package yourself. You have to create a JavaScript file which you will run instead of ESLint and import/require ESLint in that file. By importing ESLint as a package instead of running it directly you can then run ESLint using Node's CLIEngine on your files to be linted and store the output in a variable. That output can then be saved to a file and printed again.
Hopefully, to no one's surprise, the methodology described in Option 2 is exactly what the package in Option 1 does: wrapping option 2 in an easy to understand config file and gathering all the configuration from the default eslintrc file for you.
Just write ESLint result into file and then read it by using one of ESLint-formatters:
npx eslint ./cartridges/ --format json --output-file result.json
node -p "require('./node_modules/eslint/lib/cli-engine/formatters/unix.js')(require('./result.json'))"
You can achieve it with eslint-html-reporter. When you'd like to have results from Terminal and export this into an .html file then the output from Terminal becomes a bit less pretty (which is not the case if it's done only in one of those), but it's doable by running:
./node_modules/.bin/eslint --ext .jsx . & ./node_modules/.bin/eslint --ext .jsx . -f node_modules/eslint-html-reporter/reporter.js -o report.html (in this example it looks recursively for .jsx file in your project's folder).
I had the same issue, and worked around by running eslint twice.
Created a shell script with
#!/usr/bin/env bash
node_modules/.bin/eslint --quiet \
--max-warnings 100 \
-o eslint-output.$1 \
-f $1 '*/**/*.{js,ts,tsx}'
Then call the script twice thru Jenkins:
steps {
echo 'Rodando ESLint...'
sh("""
yarn install
./eslint.sh junit || true
./eslint.sh codeframe || true
""")
junit(
allowEmptyResults: true,
healthScaleFactor: 0.0,
testResults: 'eslint-output.junit'
)
}
To generate the file for report:
eslint src/ --format json --output-file eslintreport.json

How to pass options to node when using babel-node

Babel CLI docs (https://babeljs.io/docs/usage/cli/):
babel-node [options] [ -e script | script.js ] [arguments]
But when trying to increase allocated memory for Node:
babel-node --max-old-space-size=16384 script.js
argument --max-old-space-size=16384 seems to be ignored
Does sb know if this should work, and if shouldn't - some workaround?
I am using Babel 7, and this does in fact work.
babel-node --max-old-space-size=16384 script.js
Easy way to test is to just lower the size to 100KB, and you will run out of memory quickly.
Edit: (Juli 2016) As of version 6.11.4 all variations are supported now. The example posted in the question works now.
Babel in version 6.11.3 does not support all variations of v8Flags yet.
Node itself supports passing this flags either with underscore (--max_old_space_size) or dashes (--max-old-space-size).
In contrast babel-node only supports these flags if the are specified with underscores and does not support the format --flag=value.
There is a open pull request, that addresses this issues. Sadly there is no current workaround for specifying v8Flags with values.
There is a bug maybe related to node v10...
v8flags v2 is not working well, you need to use current v8flags 3.1.1.
I'm using yarn for global node tools, here are the quick command to do a quick patch (likely to be redone on each yarl global add)...
If using babel-cli 6
yarn global add v8flags
rm -rf ~/.config/yarn/global/node_modules/babel-cli/node_modules/v8flags
You could use babel 7, but there is a lot of change to do in your babel configs
yarn global add #babel/core #babel/node
You can also use an environment variable to bypass babel-node having to support the flag all together.
NODE_OPTIONS=--max-old-space-size=16384 babel-node [options] [ -e script | script.js ] [arguments]
In my case I needed to use --tls-min-v1.0 but babel-node doesnt know that flag.
NODE_OPTIONS=--tls-min-v1.0 did the trick.

How to run TypeScript files from command line?

I'm having a surprisingly hard time finding an answer to this. With plain Node.JS, you can run any js file with node path/to/file.js, with CoffeeScript it's coffee hello.coffee and ES6 has babel-node hello.js. How do I do the same with Typescript?
My project has a tsconfig.json which is used by Webpack/ts-loader to build a nice little bundle for the browser. I have a need for a build step run from the console before that, though, that would use some of the .ts files used in the project to generate a schema, but I can't seem to be able to run a single Typescript file without compiling the whole project.
How do I do the same with Typescript
You can leave tsc running in watch mode using tsc -w -p . and it will generate .js files for you in a live fashion, so you can run node foo.js like normal
TS Node
There is ts-node : https://github.com/TypeStrong/ts-node that will compile the code on the fly and run it through node 🌹
npx ts-node src/foo.ts
Run the below commands and install the required packages globally:
npm install -g ts-node typescript '#types/node'
Now run the following command to execute a typescript file:
ts-node typescript-file.ts
We have following steps:
First you need to install typescript
npm install -g typescript
Create one file helloworld.ts
function hello(person){
return "Hello, " + person;
}
let user = "Aamod Tiwari";
const result = hello(user);
console.log("Result", result)
Open command prompt and type the following command
tsc helloworld.ts
Again run the command
node helloworld.js
Result will display on console
To add to #Aamod answer above, If you want to use one command line to compile and run your code, you can use the following:
Windows:
tsc main.ts | node main.js
Linux / macOS:
tsc main.ts && node main.js
Edit: May 2022
ts-node now has an --esm flag use it.
Old Answer:
None of the other answers discuss how to run a TypeScript script that uses modules, and especially modern ES Modules.
First off, ts-node doesn't work in that scenario, as of March 2020. So we'll settle for tsc followed by node.
Second, TypeScript still can't output .mjs files. So we'll settle for .js files and "type": "module" in package.json.
Third, you want clean import lines, without specifying the .js extension (which would be confusing in .ts files):
import { Lib } from './Lib';
Well, that's non-trivial. Node requires specifying extensions on imports, unless you use the experimental-specifier-resolution=node flag. In this case, it would enable Node to look for Lib.js or Lib/index.js when you only specify ./Lib on the import line.
Fourth, there's still a snag: if you have a different main filename than index.js in your package, Node won't find it.
Transpiling makes things a lot messier than running vanilla Node.
Here's a sample repo with a modern TypeScript project structure, generating ES Module code.
I created #digitak/esrun, a thin wrapper around esbuild and that executes a TypeScript file almost instantly. esrun was made because I was disappointed with ts-node: too slow, and just didn't work most of the time.
Advantages of esrun over ts-node include:
very fast (uses esbuild),
can import ESM as well as CJS (just use the libraries of your choice and esrun will work out of the box),
there is an included watch mode, run your script with the --watch option and any change to your entry file or any of its dependencies will re-trigger the result
you can use esrun in inspect mode to use the DevTools console instead of your terminal console.
After installing, just run:
npx #digitak/esrun file.ts
Just helpful information - here is newest TypeScript / JavaScript runtime Deno.
It was created by the creator of node Ryan Dahl, based on what he would do differently if he could start fresh.
You can also try tsx.
tsx is a CLI command (alternative to node) for seamlessly running TypeScript, its build upon esbuild so its very fast.
https://github.com/esbuild-kit/tsx
Example:
npx tsx ./script.ts
As of May 2022 ts-node does support es modules
npx ts-node --esm file.ts
you will likely need to add "type": "module", to your package.json. And some of the imports might be wonky unless you turn on experimental-specifier-resolution=node
npmjs.com/package/ts-node#commonjs-vs-native-ecmascript-modules
For linux / mac you can add the ts-node-script shebang.
Install typescript / ts-node globally (see 1 below for non global install):
npm install ts-node typescript --save-dev --global
Add this as the first line in your .ts file:
#!/usr/bin/env ts-node-script
Then make the file executable:
$ chmod +x ./your-file.ts
You can then run the file directly from the command line:
$ ./your-file.ts
Notes:
1 For non global install you can install local to your project
npm install ts-node typescript --save-dev
and add the relative path to the shebang script eg:
#!/usr/bin/env ./node_modules/.bin/ts-node-script
2 Support for shebangs was officially added in ts-node v8.9.0.
Like Zeeshan Ahmad's answer, I also think ts-node is the way to go. I would also add a shebang and make it executable, so you can just run it directly.
Install typescript and ts-node globally:
npm install -g ts-node typescript
or
yarn global add ts-node typescript
Create a file hello with this content:
#!/usr/bin/env ts-node-script
import * as os from 'os'
function hello(name: string) {
return 'Hello, ' + name
}
const user = os.userInfo().username
console.log(`Result: ${hello(user)}`)
As you can see, line one has the shebang for ts-node
Run directly by just executing the file
$ ./hello
Result: Hello, root
Some notes:
This does not seem to work with ES modules, as Dan Dascalescu has pointed out.
See this issue discussing the best way to make a command line script with package linking, provided by Kaspar Etter. I have improved the shebang accordingly
Update 2020-04-06: Some changes after great input in the comments: Update shebang to use ts-node-script instead of ts-node, link to issues in ts-node.
Write yourself a simple bash wrapper may helps.
#!/bin/bash
npx tsc $1 && node ${1%%.ts}
For environments such as Webstorm where the node command cannot be changed to ts-node or npx:
npm install ts-node typescript (Install dependencies)
node --require ts-node/register src/foo.ts (Add --require ts-node/register to "Node parameters")
This answer may be premature, but deno supports running both TS and JS out of the box.
Based on your development environment, moving to Deno (and learning about it) might be too much, but hopefully this answer helps someone in the future.
Just in case anyone is insane like me and wants to just run typescript script as though it was a .js script, you can try this. I've written a hacky script that appears to execute the .ts script using node.
#!/usr/bin/env bash
NODEPATH="$HOME/.nvm/versions/node/v8.11.3/bin" # set path to your node/tsc
export TSC="$NODEPATH/tsc"
export NODE="$NODEPATH/node"
TSCFILE=$1 # only parameter is the name of the ts file you created.
function show_usage() {
echo "ts2node [ts file]"
exit 0
}
if [ "$TSCFILE" == "" ]
then
show_usage;
fi
JSFILE="$(echo $TSCFILE|cut -d"." -f 1).js"
$TSC $TSCFILE && $NODE $JSFILE
You can do this or write your own but essentially, it creates the .js file and then uses node to run it like so:
# tsrun myscript.ts
Simple. Just make sure your script only has one "." else you'll need to change your JSFILE in a different way than what I've shown.
Install ts-node node module globally.
Create node runtime configuration (for IDE) or use node in command line to run below file js file (The path is for windows, but you can do it for linux as well)
~\AppData\Roaming\npm\node_modules\ts-node\dist\bin.js
Give your ts file path as a command line argument.
Run Or Debug as you like.
Create your TypeScript file (ex. app.ts)
npm i -D typescript ts-node -> to install the dev dependencies local
npx nodemon app.ts
Using nodemon, automatically recompile app.ts every time you change the file
Here is the command
tsc index.ts --outDir .temp && node .temp/index.js && rm -rf .temp
<<<<<<<<< Compile >>>>>>>>> <<<<<<< Run >>>>>>> << Clean >>
There is also an option to run code directly from the CLI, not the *.ts file itself.
It's perfectly described in the ts-node manual.
As a first step, install ts-node globally via npm, yarn, or whatever you like.
...and now just use ts-node -e 'console.log("Hello, world!")' (you may also add the -p flag for printing code)
This little command is perfect for checking, does everything installed fine. And for finding some other error, relevant with tsconfig.json options.
We can run it using nodemon as well
nodemon ./filepath/filename.ts
This question was posted in 2015. In 2018, node recognizes both .js and .ts. So, running node file.ts will also run.

jsx command not found on mac terminal

Problem:
I execute the following command from the macintosh terminal:
$ jsx --watch src/ build/
I recieve the following output error from the terminal:
-bash: jsx: command not found
Relevant information:
I am following the following tutorial: https://facebook.github.io/react/docs/getting-started.html
I executed the following command from the tutorial with positive output:
$ npm install -g react-tools
This instruction immediately precedes the instruction that produces the error:
Environment information:
$ node -v
v0.12.4
$ npm
2.10.1
Best of google:
https://groups.google.com/forum/#!topic/reactjs/TUBkgptg2dM
Adtional Notes:
Best of google is short because there aren't many links that provide information that the tutorial provides. A result of this is that I think there is an obvious solution and that I am just being dumb.
I will provide more information if requested
Please excuse the format of this question. This is how I solve a problem. I'm hoping someone can provide the Solution points. I apologize if this is over-the-top for a simple question, but I couldn't find any rules against it.
Solution to my unique problem:
Execute the following command:
$ export PATH=$PATH:$(npm config get prefix)/bin
Original problem command:
$ jsx --watch src/ build/
New positive output:
built Module("helloworld")
["helloworld"]
run this:
npm config get prefix
that will give you a clue as to where your global npm modules are installed. you need to add the bin directory under the directory returned by the above to your path. for example, it might return /usr/local, in which case you should add /usr/local/bin to your PATH. You could just do:
export PATH=$PATH:$(npm config get prefix)/bin

Why does --module override Typescript compiler's --out flag?

If I run $ tsc --out foo.js MyFile.ts I get the file foo.js. However if I specify the --module commonjs option, the --out parameter is overriden and I get MyFile.js ie: $ tsc --out foo.js --module commonjs MyFile.ts
Given I use the export assignment in my TS code to have my classes available to my NodeJS JS code, I obviously need the --module flag. However I think it's a bug that the --out flag value is ignored/overridded.
The reason is that I want to suffix the generated JS code with .gen.js so that I can write an SCM rule to ignore the generated code.
$ node --version && tsc --version
v0.10.22
Version 0.9.7.0
--out is ignored for files that are multiple modules because it's not really clear what that even means (what if you had specified tsc --out foo.js Module1.ts Module2.ts, where Module1 had require'd Module2?).
The theory here is that you would use your external build tool (grunt, jake, make, frakes, etc) to rename your file afterwards if you wanted it to be named something different. It's very rarely intended to compile an external module file to some other filename, since it would compile but not run.
There's a CodePlex issue you can vote on to show your support for implementing this post-1.0.

Resources