adhrinae / ts-react-parcel

Typescript with React, using parcel bundler

Typescript + React + Parcel = ❤️

This repository has basic settings for buildling react application in Typescript.

The original source code of the provided example is in here.

Built in settings

• React + ReactDOM (16.8+)
• Typescript (with TSLint setting)
• Prettier + tslint-config-prettier
• Test configuration using Jest and react-testing-library
• Parcel bundler (1.12+)

How to set up the project

Disclaimer
Since I only use Yarn as my primary package manager, this repository will ignore package-lock.json file on commit.
If you prefer npm to Yarn, Please modify .gitignore file following your flavor.

git clone [email protected]:adhrinae/ts-react-parcel.git
cd ts-react-parcel
yarn install

How to start development for the application

# With type checking
yarn develop

# Transpile only
yarn start

Execute the command and you can run & test the application on localhost:1234 in the browser.

How to build the application

yarn build

The default output directory is /dist. You can change the destination wherever you want.

// package.json
// ...
"scripts": {
  // ...
  "build": "... parcel build ./src/index.html -d YOUR_OUTPUT_DIR --public-url '/'" <- Change here
}
// ...

How to test the application

yarn test       # run test once
yarn test:watch # watch mode

You have to create __tests__ directory at the same location of files which you want to test. Test file's name should be SOURCE.test.ts/tsx/js or SOURCE.spec.ts/tsx/js.

Miscellaneous

This Project uses pre-commit hook for prettier and testing application.
If you don't like it, remove the husky package from your repository and erase following scripts.

yarn remove husky

then

// package.json
// ...
"husky": {
  "hooks": {
    "pre-commit": "npm run prettify && npm run test"
  }
},
// ...

ts-react-parcel's Issues

react-hot-loader is not required

I'm learning about parcel, and was asking in Slack about this project.

I got information that this is not required at all:

import { hot } from 'react-hot-loader'

The parcel works with react-hot-loader out of the box, nothing is required to hook it.

Secondly that is also wrong because it would bundle react-hot-loader to production build (bad) causing unnecessary dependency.

Conflict between parcel-bundler and parcel-plugin-typescript

After update to parcel-bundler v1.10.0, Type checking of parcel-plugin-typescript doesn't work properly.

I assume it is the conflict between parcel-bundler's Babel 7 + @babel/preset-typescript and parcel-plugin-typescript.

Since there is no problem to transpile the application code to javascript, I temporarily removed parcel-plugin-typescript.

Whenever the conflict has resolved, I will update the dependencies.

---

If you need a type-checked project setting, please clone this version of repository

Is this "compose" actually? ^.^

ts-react-parcel/src/utilities/compose.ts

Line 4 in b6b4a73

fns.forEach(fn => fn && fn(...args));

npm run develop error after first installation

> [email protected] develop C:\Users\UsuarioAurora\Documents\WebstormProjects\ts-react-parcel
> parcel ./src/index.html

Server running at http://localhost:1234
×  C:\Users\UsuarioAurora\Documents\WebstormProjects\ts-react-parcel\src\index.html: 'super' keyword unexpected here
SyntaxError: Unexpected identifier
      return yield super.parse(_this.contents);
                   ^^^^^
SyntaxError: 'super' keyword unexpected here
    at NativeCompileCache._moduleCompile (C:\Users\UsuarioAurora\Documents\WebstormProjects\ts-react-parcel\node_modules\v8-compil
e-cache\v8-compile-cache.js:226:18)
    at Module._compile (C:\Users\UsuarioAurora\Documents\WebstormProjects\ts-react-parcel\node_modules\v8-compile-cache\v8-compile
-cache.js:172:36)
    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.require (module.js:497:17)
    at require (C:\Users\UsuarioAurora\Documents\WebstormProjects\ts-react-parcel\node_modules\v8-compile-cache\v8-compile-cache.j
s:159:20)
    at Parser.findParser (C:\Users\UsuarioAurora\Documents\WebstormProjects\ts-react-parcel\node_modules\parcel-bundler\lib\Parser
.js:59:45)
    at Parser.getAsset (C:\Users\UsuarioAurora\Documents\WebstormProjects\ts-react-parcel\node_modules\parcel-bundler\lib\Parser.j
s:66:22)

Bundle size comparison with webpack

Hello again.

I sent an issue some time ago, but now i have a question i would like to ask if you dont mind.

How is the comparison of file sizes with webpack... bigger, smaller? My first impression is parcel bundle is a little smaller than webpack but not sure at all. Could you confirm it or shed some light on the topic. I would like to know your impressions.

Thank you very much.