Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate codes to typescript and yarn to pnpm #45

Open
wants to merge 2 commits into
base: rewrite-media-styles
Choose a base branch
from
Open

Migrate codes to typescript and yarn to pnpm #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e132b5
feat: migrate typescript
tkow Dec 31, 2022
738bb08
fix: remove yarn from github actions
tkow Dec 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 38 additions & 8 deletions .github/workflows/main.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,48 @@
name: CI
on: push

on:
pull_request:
types: [opened, synchronize]

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2

- uses: actions/setup-node@v3
with:
node-version: '15'
Copy link
Contributor Author

@tkow tkow Jan 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is changed to fix even number versioning for LTS, because odd number versioning of node is experimental and generally for development.
https://nodesource.com/blog/understanding-how-node-js-release-lines-work/

- name: Install modules
run: yarn
node-version: '16'

- uses: pnpm/action-setup@v2
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false

- name: Get pnpm store directory
id: pnpm-cache
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-

- name: Install dependencies
run: pnpm install

- name: Lint
run: yarn lint
run: npm run lint

- name: Test
run: yarn test --ci --coverage --maxWorkers=2
run: npm run test --ci --coverage --maxWorkers=2

- name: Build
run: yarn build
run: npm run build
37 changes: 37 additions & 0 deletions .swcrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"$schema": "http://json.schemastore.org/swcrc",
"module": {
"type": "commonjs",
// These are defaults.
"strict": false,
"strictMode": true,
"lazy": false,
"noInterop": false
},
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true,
"decorators": true,
"dynamicImport": false
},
"transform": {
"decoratorMetadata": true,
"legacyDecorator": true,
"react": {
"runtime": "automatic",
"useBuiltins": true
}
},
"keepClassNames": true,
"minify": {
"compress": {
"unused": true,
"keep_classnames": true,
"keep_fnames": true,
"keep_fargs": true
}
}
},
"minify": true
}
31 changes: 31 additions & 0 deletions jest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
const esmModules = [
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this needed? We don't use any of these libs in the internals of the library.

Copy link
Contributor Author

@tkow tkow Dec 31, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is recommended configuration introduced by expo.

https://docs.expo.dev/guides/testing-with-jest/#configuration

If we use pnpm, the module resolution system is a bit different from npm and it caches the modules in node_modules/.pnpm, so need manually setting at least, '@react-native/' namespace. See react-native preset.

It's not high possibility to use another native-library, but it's ready for testing with third party libraries. If you don't need them, I remove them except for first react-native configuration (first array element configuration is
in high possibility to be required for test-libraries though react-native's jest preset narrower than it) which needs transpiled.

'((jest-)?react-native|@react-native(-community)?)',
'expo(nent)?',
'@expo(nent)/.*?',
'@expo-google-fonts/.*',
'react-navigation',
'@react-navigation/.*',
'@unimodules/.*',
'unimodules',
'sentry-expo',
'native-base',
'react-native-svg',
].join('|');

export default {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a little hesitant about switching to SWC since the current babel based setup works quite well and the time it takes to execute all the tests is only like 5 seconds so it doesn't take that long any way 🤔

Copy link
Contributor Author

@tkow tkow Dec 31, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Temzasse
Of course, I get lit of it, if you don't like it.
But, let me explain it to you a little, the configuration is very simple and easy to replace. All you need to do is @swc/jest to babel-jest if wanting to switch it, and it marks 5 times faster than babel-jest in my project's test which takes more than 3 minutes if using babel-jest or ts-jest. In my local environment of this project, it passed test less than 2 sec (1.77 s, estimated 2 s), (0.863 s, estimated 1 s with cache).
The case that SWC is fragile is when you compress and mangle codes (these features aren't needed if only you want to test) and with using decorator's metadata, and vercel is already using it in their library, Next.js. so in almost case you don't need to worry about it if you don't use conifgurations described above.

But, you don't feel pain to follow up this tool, I'll remove it.

preset: 'react-native',
transform: {
'^.+\\.tsx?$': ['@swc/jest'],
// NOTE: For flow in React Native Library.
'^.+\\.jsx?$': ['babel-jest'],
'^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$': require.resolve(
'react-native/jest/assetFileTransformer.js'
),
},
modulePathIgnorePatterns: [
'<rootDir>/example/node_modules',
'<rootDir>/lib/',
],
transformIgnorePatterns: [`node_modules/(?!(?:.pnpm/)?(${esmModules}))`],
setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
};
38 changes: 15 additions & 23 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@
},
"scripts": {
"build": "bob build",
"prepare": "yarn build",
"prepare": "npm run build",
"release": "np --any-branch",
"watch": "npm-watch",
"test": "jest",
"lint": "yarn lint:lib & yarn lint:example",
"lint": "npm run lint:lib & npm run lint:example",
"lint:lib": "eslint ./src --ext .js --config .eslintrc",
"lint:lib:fix": "eslint ./src --ext .js --config .eslintrc --fix",
"lint:example": "eslint ./example --ext .ts,.tsx --config .eslintrc",
Expand All @@ -48,16 +48,19 @@
"lodash.merge": "4.6.2"
},
"devDependencies": {
"@babel/core": "7.14.8",
"@babel/runtime": "7.14.8",
"@testing-library/jest-native": "4.0.1",
"@testing-library/react-native": "7.2.0",
"@types/jest": "26.0.24",
"@babel/core": "7.20.7",
"@babel/runtime": "7.20.7",
"@swc/core": "^1.3.24",
"@swc/jest": "^0.2.24",
"@testing-library/jest-native": "5.4.0",
"@testing-library/react-native": "11.5.0",
"@types/jest": "29.2.5",
"@types/node": "^18.11.18",
"@types/react": "^18.0.24",
"@types/react-native": "^0.70.6",
"@typescript-eslint/eslint-plugin": "4.6.1",
"@typescript-eslint/parser": "4.6.1",
"babel-jest": "27.0.6",
"babel-jest": "29.3.1",
"eslint": "7.31.0",
"eslint-config-prettier": "8.3.0",
"eslint-config-standard": "16.0.3",
Expand All @@ -69,14 +72,16 @@
"eslint-plugin-react-hooks": "4.2.0",
"eslint-plugin-standard": "5.0.0",
"husky": "6.0.0",
"jest": "27.0.6",
"jest": "29.3.1",
"metro-react-native-babel-preset": "^0.73.3",
"npm-watch": "^0.11.0",
"prettier": "2.3.2",
"react": "18.0.0",
"react-native": "0.69.6",
"react-native-builder-bob": "0.18.1",
"react-test-renderer": "18.0.0",
"ts-jest": "^29.0.3",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are ts-jest and ts-node needed since .tsx files are transpiled by @swc/jest?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, they aren't.
The ts-jest is used for jest.config.ts. If you install it, you can write jest config files in typescript like jest-setup.ts, jest-environement.ts so on, and specify ts files in the jest.config file. ts-node is set peerDependency in ts-jest.@swc/jest itself can run without ts-jest and ts-node.

"ts-node": "^10.9.1",
"typescript": "4.7.3"
},
"peerDependencies": {
Expand All @@ -85,19 +90,9 @@
},
"husky": {
"hooks": {
"pre-commit": "yarn lint"
"pre-commit": "npm run lint"
}
},
"jest": {
"preset": "react-native",
"modulePathIgnorePatterns": [
"<rootDir>/example/node_modules",
"<rootDir>/lib/"
],
"setupFilesAfterEnv": [
"@testing-library/jest-native/extend-expect"
]
},
"react-native-builder-bob": {
"source": "src/internals",
"output": "lib",
Expand Down Expand Up @@ -125,9 +120,6 @@
"tabWidth": 2,
"trailingComma": "es5"
},
"np": {
"yarn": true
},
"keywords": [
"android",
"ios",
Expand Down
Loading