From 41c531e4f84f975c6c0bfc9bf405fc1e4089b05d Mon Sep 17 00:00:00 2001 From: Tristan Edwards Date: Tue, 20 Dec 2022 05:21:07 +0000 Subject: [PATCH] feat: first commit(by dts) --- .gitattributes | 1 + .github/workflows/main.yml | 32 ++++++++ .github/workflows/size.yml | 12 +++ .gitignore | 5 ++ LICENSE | 21 +++++ README.md | 160 +++++++++++++++++++++++++++++++++++++ example/index.html | 14 ++++ example/index.tsx | 14 ++++ example/package.json | 26 ++++++ example/tsconfig.json | 3 + example/vite.config.js | 11 +++ package.json | 52 ++++++++++++ src/index.tsx | 6 ++ test/index.test.tsx | 11 +++ tsconfig.json | 5 ++ 15 files changed, 373 insertions(+) create mode 100644 .gitattributes create mode 100644 .github/workflows/main.yml create mode 100644 .github/workflows/size.yml create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 example/index.html create mode 100644 example/index.tsx create mode 100644 example/package.json create mode 100644 example/tsconfig.json create mode 100644 example/vite.config.js create mode 100644 package.json create mode 100644 src/index.tsx create mode 100644 test/index.test.tsx create mode 100644 tsconfig.json diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..fcadb2c --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text eol=lf diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..affcfe1 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,32 @@ +name: CI +on: [push] +jobs: + build: + name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }} + + runs-on: ${{ matrix.os }} + strategy: + matrix: + node: ['14.x', '16.x'] + os: [ubuntu-latest, windows-latest, macOS-latest] + + steps: + - name: Checkout repo + uses: actions/checkout@v3 + + - name: Use Node ${{ matrix.node }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node }} + + - name: Install deps and build (with cache) + uses: bahmutov/npm-install@v1 + + - name: Lint + run: yarn lint + + - 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 new file mode 100644 index 0000000..bc80c4c --- /dev/null +++ b/.github/workflows/size.yml @@ -0,0 +1,12 @@ +name: size +on: [pull_request] +jobs: + size: + runs-on: ubuntu-latest + env: + CI_JOB_NUMBER: 1 + steps: + - uses: actions/checkout@v3 + - uses: andresz1/size-limit-action@v1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d4de8fc --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +*.log +.DS_Store +node_modules +.cache +dist diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9addf89 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Tristan Edwards + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..8cd7ab1 --- /dev/null +++ b/README.md @@ -0,0 +1,160 @@ +# DTS React User Guide + +Congrats! You just saved yourself hours of work by bootstrapping this project with DTS. Let’s get you oriented with what’s here and how to use it. + +> This DTS 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`. + +> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/) + +## Commands + +DTS scaffolds your new library inside `/src`, and also sets up a [Vite-based](https://vitejs.dev) playground for it inside `/example`. + +The recommended workflow is to run DTS in one terminal: + +```bash +npm start # or yarn start +``` + +This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`. + +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 DTS is running in watch mode like we recommend above. + +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 + index.test.tsx # EDIT THIS +.gitignore +package.json +README.md # EDIT THIS +tsconfig.json +``` + +#### React Testing Library + +We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this. + +### Rollup + +DTS 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 `dts` [optimizations docs](https://github.com/weiran-zsd/dts-cli#optimizations). In particular, know that you can take advantage of development-only optimizations: + +```js +// ./types/index.d.ts +declare var __DEV__: boolean; + +// inside your code... +if (__DEV__) { + console.log('foo'); +} +``` + +You can also choose to install and use [invariant](https://github.com/weiran-zsd/dts-cli#invariant) and [warning](https://github.com/weiran-zsd/dts-cli#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 [Vite](https://vitejs.dev) 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. DTS 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 DTS 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" + }, +``` + +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/formium/tsdx/issues/64) diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..3c6f91f --- /dev/null +++ b/example/index.html @@ -0,0 +1,14 @@ + + + + + + + Playground + + + +
+ + + diff --git a/example/index.tsx b/example/index.tsx new file mode 100644 index 0000000..73387c6 --- /dev/null +++ b/example/index.tsx @@ -0,0 +1,14 @@ +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 new file mode 100644 index 0000000..4492db8 --- /dev/null +++ b/example/package.json @@ -0,0 +1,26 @@ +{ + "name": "example", + "private": true, + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "scripts": { + "start": "vite", + "build": "vite build" + }, + "dependencies": { + "react-app-polyfill": "^3.0.0" + }, + "alias": { + "react": "../node_modules/react", + "react-dom": "../node_modules/react-dom/profiling", + "scheduler/tracing": "../node_modules/scheduler/tracing-profiling" + }, + "devDependencies": { + "@types/react": "^17.0.47", + "@types/react-dom": "^17.0.17", + "vite": "latest", + "vite-preset-react": "latest", + "typescript": "^4" + } +} diff --git a/example/tsconfig.json b/example/tsconfig.json new file mode 100644 index 0000000..8c5da85 --- /dev/null +++ b/example/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "@tsconfig/create-react-app/tsconfig.json" +} diff --git a/example/vite.config.js b/example/vite.config.js new file mode 100644 index 0000000..f460093 --- /dev/null +++ b/example/vite.config.js @@ -0,0 +1,11 @@ +import { defineConfig } from 'vite'; +import ReactPlugin from 'vite-preset-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + ReactPlugin({ + injectReact: false, + }), + ], +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..a72542e --- /dev/null +++ b/package.json @@ -0,0 +1,52 @@ +{ + "name": "nostrgg-react", + "version": "0.1.0", + "license": "MIT", + "author": "Tristan Edwards", + "main": "dist/index.js", + "module": "dist/nostrgg-react.esm.js", + "typings": "dist/index.d.ts", + "files": [ + "dist", + "src" + ], + "scripts": { + "analyze": "size-limit --why", + "build": "dts build", + "lint": "dts lint", + "prepare": "dts build", + "size": "size-limit", + "start": "dts watch", + "test": "dts test --passWithNoTests" + }, + "husky": { + "hooks": { + "pre-commit": "dts lint" + } + }, + "prettier": { + "printWidth": 80, + "semi": true, + "singleQuote": true, + "trailingComma": "es5" + }, + "jest": { + "testEnvironment": "jsdom" + }, + "peerDependencies": { + "react": ">=16" + }, + "engines": { + "node": ">=12" + }, + "size-limit": [ + { + "path": "dist/nostrgg-react.cjs.production.min.js", + "limit": "10 KB" + }, + { + "path": "dist/nostrgg-react.esm.js", + "limit": "10 KB" + } + ] +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..70635ad --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,6 @@ +import * as React from 'react'; + +// Delete me +export const Thing = () => { + return
Welcome to your first test package.
; +}; diff --git a/test/index.test.tsx b/test/index.test.tsx new file mode 100644 index 0000000..cbead25 --- /dev/null +++ b/test/index.test.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { Thing } from '../src/index'; + +describe('Thing', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); + }); +}); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..b5ce833 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,5 @@ +{ + // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs + "extends": "@tsconfig/create-react-app/tsconfig.json", + "include": ["src", "types"], +}