diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 535e4b7..41f45ce 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -2,13 +2,13 @@ name: CI on: [push] jobs: build: - name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }} + name: Lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }} runs-on: ${{ matrix.os }} strategy: matrix: - node: ['10.x', '12.x', '14.x'] - os: [ubuntu-latest, windows-latest, macOS-latest] + node: ['14.x'] + os: [windows-latest, macOS-latest] steps: - name: Checkout repo @@ -27,6 +27,3 @@ jobs: - name: Test run: yarn test --ci --coverage --maxWorkers=2 - - - name: Build - run: yarn build diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml deleted file mode 100644 index 6021cda..0000000 --- a/.github/workflows/size.yml +++ /dev/null @@ -1,12 +0,0 @@ -name: size -on: [pull_request] -jobs: - size: - runs-on: ubuntu-latest - env: - CI_JOB_NUMBER: 1 - steps: - - uses: actions/checkout@v1 - - uses: andresz1/size-limit-action@v1 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} diff --git a/LICENSE b/LICENSE index 44623e9..3e27afb 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2020 Dariusz Rzepka +Copyright (c) 2020 Guidewire Software Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 1db53cc..6d4223d 100644 --- a/README.md +++ b/README.md @@ -1,160 +1,42 @@ -# TSDX React User Guide +# Generating JSON Schema from TypeScript types -Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it. +Test JSON Schema generation libraries capabilities. -> This TSDX setup is meant for developing React component libraries (not apps!) that can be published to NPM. If you’re looking to build a React-based app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`. +The purpose of this repository is to show if different +TypeScript to JSON Schema generating libraries +can handle anything more complicated. -> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/) +## Testing approach -## Commands +In `src` directory are the library sources to be generated. There are 2 types tests: -TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`. +- `simple.ts` contains very simple tests case without any external libraries +- `index.tsx` contains example React component with many different possible React types (from [typescript-cheatsheets](https://github.com/typescript-cheatsheets/react#basic-prop-types-examples)) -The recommended workflow is to run TSDX in one terminal: +For each tested package, there is generator script in `generators` directory. To run it use: -```bash -npm start # or yarn start +```shell +yarn generate: ``` -This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`. +The generator should generate types for `Simple` and `ExampleProps` types. Output will be stored in `schemas` directory if generation succeeded under following format: -Then run the example inside another: - -```bash -cd example -npm i # or yarn to install dependencies -npm start # or yarn start ``` - -The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases). - -To do a one-off build, use `npm run build` or `yarn build`. - -To run tests, use `npm test` or `yarn test`. - -## Configuration - -Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly. - -### Jest - -Jest tests are set up to run with `npm test` or `yarn test`. - -### Bundle analysis - -Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`. - -#### Setup Files - -This is the folder structure we set up for you: - -```txt -/example - index.html - index.tsx # test your component here in a demo app - package.json - tsconfig.json -/src - index.tsx # EDIT THIS -/test - blah.test.tsx # EDIT THIS -.gitignore -package.json -README.md # EDIT THIS -tsconfig.json +-.json ``` -#### React Testing Library - -We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this. - -### Rollup - -TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details. - -### TypeScript - -`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs. - -## Continuous Integration - -### GitHub Actions - -Two actions are added by default: - -- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix -- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit) - -## Optimizations - -Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations: +## Installation -```js -// ./types/index.d.ts -declare var __DEV__: boolean; +Install dependencies using `yarn`. -// inside your code... -if (__DEV__) { - console.log('foo'); -} +```shell +yarn ``` -You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions. - -## Module Formats - -CJS, ESModules, and UMD module formats are supported. - -The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found. - -## Deploying the Example Playground - -The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`): - -```bash -cd example # if not already in the example folder -npm run build # builds to dist -netlify deploy # deploy the dist folder -``` - -Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify: - -```bash -netlify init -# build command: yarn build && cd example && yarn && yarn build -# directory to deploy: example/dist -# pick yes for netlify.toml -``` - -## Named Exports - -Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library. - -## Including Styles - -There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like. - -For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader. - -## Publishing to NPM - -We recommend using [np](https://github.com/sindresorhus/np). - -## Usage with Lerna - -When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_. - -The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project. - -Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below. - -```diff - "alias": { -- "react": "../node_modules/react", -- "react-dom": "../node_modules/react-dom" -+ "react": "../../../node_modules/react", -+ "react-dom": "../../../node_modules/react-dom" - }, -``` +## Results -An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64) +| Library | Command | `Simple` | `ExampleProps` | +| ---------------------------------------------------------------------------- | ---------------------------------------- | -------- | -------------- | +| [typescript-json-schema](https://github.com/YousefED/typescript-json-schema) | `yarn generate:typescript-json-schema` | ✅ | ❌ | +| [ts-json-schema-generator](https://github.com/vega/ts-json-schema-generator) | `yarn generate:ts-json-schema-generator` | ❌ | ❌ | +| [quicktype](https://github.com/quicktype/quicktype) | `yarn generate:quicktype` | ✅ | ❌ | diff --git a/example/.npmignore b/example/.npmignore deleted file mode 100644 index 587e4ec..0000000 --- a/example/.npmignore +++ /dev/null @@ -1,3 +0,0 @@ -node_modules -.cache -dist \ No newline at end of file diff --git a/example/index.html b/example/index.html deleted file mode 100644 index 547e2e0..0000000 --- a/example/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - Playground - - - -
- - - diff --git a/example/index.tsx b/example/index.tsx deleted file mode 100644 index 73387c6..0000000 --- a/example/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import 'react-app-polyfill/ie11'; -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { Thing } from '../.'; - -const App = () => { - return ( -
- -
- ); -}; - -ReactDOM.render(, document.getElementById('root')); diff --git a/example/package.json b/example/package.json deleted file mode 100644 index a50960f..0000000 --- a/example/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "example", - "version": "1.0.0", - "main": "index.js", - "license": "MIT", - "scripts": { - "start": "parcel index.html", - "build": "parcel build index.html" - }, - "dependencies": { - "react-app-polyfill": "^1.0.0" - }, - "alias": { - "react": "../node_modules/react", - "react-dom": "../node_modules/react-dom/profiling", - "scheduler/tracing": "../node_modules/scheduler/tracing-profiling" - }, - "devDependencies": { - "@types/react": "^16.9.11", - "@types/react-dom": "^16.8.4", - "parcel": "^1.12.3", - "typescript": "^3.4.5" - } -} diff --git a/example/tsconfig.json b/example/tsconfig.json deleted file mode 100644 index 1e2e4fd..0000000 --- a/example/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "allowSyntheticDefaultImports": false, - "target": "es5", - "module": "commonjs", - "jsx": "react", - "moduleResolution": "node", - "noImplicitAny": false, - "noUnusedLocals": false, - "noUnusedParameters": false, - "removeComments": true, - "strictNullChecks": true, - "preserveConstEnums": true, - "sourceMap": true, - "lib": ["es2015", "es2016", "dom"], - "types": ["node"] - } -} diff --git a/generators/quicktype.ts b/generators/quicktype.ts index e09700c..6440d11 100644 --- a/generators/quicktype.ts +++ b/generators/quicktype.ts @@ -54,7 +54,7 @@ const quicktypeGenerate = getGenerate('quicktype', async (source, typeName) => { }); runAsync(async () => { - await quicktypeGenerate(resolve('./src/simple.tsx'), 'Simple'); + await quicktypeGenerate(resolve('./src/simple.ts'), 'Simple'); await quicktypeGenerate(resolve('./src/index.tsx'), 'ExampleProps'); }); diff --git a/generators/ts-json-schema-generator.ts b/generators/ts-json-schema-generator.ts index 8c74b46..ee69fad 100644 --- a/generators/ts-json-schema-generator.ts +++ b/generators/ts-json-schema-generator.ts @@ -18,7 +18,7 @@ const tsJsonSchemaGeneratorGenerate = getGenerate( ); runAsync(async () => { - await tsJsonSchemaGeneratorGenerate(resolve('./src/simple.tsx'), 'Simple'); + await tsJsonSchemaGeneratorGenerate(resolve('./src/simple.ts'), 'Simple'); await tsJsonSchemaGeneratorGenerate(resolve('./src/index.tsx'), 'ExampleProps'); }); diff --git a/generators/typescript-json-schema.ts b/generators/typescript-json-schema.ts index 7247759..f38edeb 100644 --- a/generators/typescript-json-schema.ts +++ b/generators/typescript-json-schema.ts @@ -30,7 +30,7 @@ const typescriptJsonSchemaGenerate = getGenerate( ); runAsync(async () => { - await typescriptJsonSchemaGenerate(resolve('./src/simple.tsx'), 'Simple'); + await typescriptJsonSchemaGenerate(resolve('./src/simple.ts'), 'Simple'); await typescriptJsonSchemaGenerate(resolve('./src/index.tsx'), 'ExampleProps'); }); diff --git a/src/simple.tsx b/src/simple.ts similarity index 100% rename from src/simple.tsx rename to src/simple.ts