Skip to content

Typescript webpack setup #1446

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

Closed
epicfaace wants to merge 7 commits into from
Closed

Typescript webpack setup #1446

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
88ee167
set up typescript
epicfaace Sep 4, 2019
09f46da
Move form file to typescript
epicfaace Sep 4, 2019
b223363
fix tests by adding valid extensions to @babel/register config
epicfaace Sep 4, 2019
88399f8
Fix @babel/register dependency
epicfaace Sep 4, 2019
d7133fa
fix extensions for dist build
epicfaace Sep 4, 2019
9de7a44
Rename from js -> tsx
epicfaace Sep 11, 2019
586f083
fix docs
epicfaace Sep 29, 2019
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
3 changes: 2 additions & 1 deletion .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{
"presets": [
"@babel/preset-react",
"@babel/preset-env"
"@babel/preset-env",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
Expand Down
1 change: 1 addition & 0 deletions babel-register.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
require("@babel/register")({ extensions: ['.js', '.jsx', '.ts', '.tsx'] });
153 changes: 153 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 6 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@
"publish-to-npm": "npm run dist && npm publish",
"preversion": "npm run build:playground && npm run dist && npm run cs-check && npm run lint",
"start": "node devServer.js",
"tdd": "cross-env NODE_ENV=test mocha --require @babel/register --watch --require ./test/setup-jsdom.js test/**/*_test.js",
"test": "cross-env NODE_ENV=test mocha --require @babel/register --require ./test/setup-jsdom.js test/**/*_test.js",
"test-coverage": "cross-env NODE_ENV=test nyc --reporter=lcov mocha --require @babel/register --require ./test/setup-jsdom.js test/**/*_test.js",
"test-debug": "cross-env NODE_ENV=test mocha --require @babel/register --require ./test/setup-jsdom.js --debug-brk --inspect test/Form_test.js"
"tdd": "cross-env NODE_ENV=test mocha --require ./babel-register.js --watch --require ./test/setup-jsdom.js test/**/*_test.js",
"test": "cross-env NODE_ENV=test mocha --require ./babel-register.js --require ./test/setup-jsdom.js test/**/*_test.js",
"test-coverage": "cross-env NODE_ENV=test nyc --reporter=lcov mocha --require ./babel-register.js --require ./test/setup-jsdom.js test/**/*_test.js",
"test-debug": "cross-env NODE_ENV=test mocha --require ./babel-register.js --require ./test/setup-jsdom.js --debug-brk --inspect test/Form_test.js"
},
"prettierOptions": "--jsx-bracket-same-line --trailing-comma es5 --semi --tab-width 2",
"lint-staged": {
Expand Down Expand Up @@ -61,7 +61,8 @@
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.4.4",
"@babel/preset-typescript": "^7.3.3",
"./babel-register.js": "^7.4.4",
Comment thread
epicfaace marked this conversation as resolved.
Outdated
"atob": "^2.0.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.6",
Expand Down
7 changes: 6 additions & 1 deletion src/components/Form.js → src/components/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,12 @@ import {
} from "../utils";
import validateFormData, { toErrorList } from "../validate";

export default class Form extends Component {
interface IFormProps {

@chanceaclark chanceaclark Sep 5, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Has there been any discussion to export typings with the build or will you maintain typings within @types/react-jsonschema-form?

To add onto that, has there been any discussion regarding naming conventions for types?

@epicfaace epicfaace Sep 6, 2019

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Not yet. It would be great to start one!

What would be the advantages/disadvantages of exporting typings with the build vs maintaining typings within @types/react-jsonschema-form? Do other libraries based in typescript typically do the former?

@chanceaclark chanceaclark Sep 6, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What would be the advantages/disadvantages of exporting typings with the build vs maintaining typings within @types/react-jsonschema-form?

A big drawback with using DefinitelyTyped is that it's community maintained and can sometimes get out of sync with the actual library. That repository is mainly for JS packages that don't have typings for TS projects. And sometimes DefinitelyTyped can take a while to merge PR's so you'd have to wait for a release before you could use new typings.

With that in mind, it's usually better to export typings with the package so your types are always 1:1 and you don't have to maintain two separate packages.

Do other libraries based in typescript typically do the former?

Usually yeah. Check out nestjs or even vscode. Go explore some more TS packages here in GH

[x: string]: any,
formElement: any
}

export default class Form extends Component<IFormProps, any> {
static defaultProps = {
uiSchema: {},
noValidate: false,
Expand Down
5 changes: 4 additions & 1 deletion webpack.config.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,13 @@ module.exports = {
}),
new webpack.HotModuleReplacementPlugin(),
],
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx", ".css"]
},
module: {
rules: [
{
test: /\.jsx?$/,
test: /\.(js|jsx|ts|tsx)$/,
use: [
"babel-loader",
],
Expand Down
3 changes: 3 additions & 0 deletions webpack.config.dist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ module.exports = {
umd: 'react-dom',
}
},
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx", ".css"]
},
module: {
rules: [
{
Expand Down
4 changes: 2 additions & 2 deletions webpack.config.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ module.exports = {
})
],
resolve: {
extensions: [".js", ".jsx", ".css"]
extensions: [".js", ".jsx", ".ts", ".tsx", ".css"]
},
module: {
rules: [
{
test: /\.jsx?$/,
test: /\.(js|jsx|ts|tsx)$/,
use: [
"babel-loader",
],
Expand Down