diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 00ca0650f..000000000 --- a/.babelrc +++ /dev/null @@ -1,16 +0,0 @@ -{ - "presets": [ - [ - "@babel/env", - { - "modules": false, - "exclude": [ - "@babel/plugin-transform-async-to-generator", - "@babel/plugin-transform-regenerator" - ] - } - ], - "@babel/react" - ], - "plugins": ["@babel/plugin-proposal-class-properties"] -} diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 000000000..01b924286 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,7 @@ +# Browsers we support +Chrome >= 73 +Firefox >= 78 +Edge >= 79 +Safari >= 12.0 +iOS >= 12.0 +opera >= 53 diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json new file mode 100644 index 000000000..e55f97ca7 --- /dev/null +++ b/.codesandbox/ci.json @@ -0,0 +1,6 @@ +{ + "installCommand": "install:csb", + "sandboxes": ["/examples/react/basic-typescript", "/examples/solid/basic-typescript", "/examples/svelte/basic", "/examples/vue/basic"], + "packages": ["packages/**"], + "node": "16" +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..9d08a1a82 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.eslintrc b/.eslintrc index 6c0ab87b9..97c3fc3ab 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,56 @@ { - "extends": ["react-app", "prettier"] + "root": true, + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint", "import"], + "extends": [ + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "plugin:import/typescript", + "react-app", + "prettier" + ], + "env": { + "es6": true + }, + "parserOptions": { + "project": "./tsconfig.base.json", + "sourceType": "module" + }, + "settings": { + "import/parsers": { + "@typescript-eslint/parser": [".ts", ".tsx"] + }, + "import/resolver": { + "node": true, + "typescript": { + "project": "packages/*/tsconfig.json" + } + }, + "react": { + "version": "detect" + } + }, + "rules": { + "react/jsx-key": ["error", { "checkFragmentShorthand": true }], + "@typescript-eslint/ban-types": "off", + "@typescript-eslint/ban-ts-comment": "off", + "@typescript-eslint/consistent-type-imports": "error", + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/no-empty-interface": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-unnecessary-condition": "error", + "@typescript-eslint/no-inferrable-types": [ + "error", + { + "ignoreParameters": true + } + ], + "no-shadow": "error", + "import/no-cycle": "error", + "import/no-unresolved": ["error", { "ignore": ["^@tanstack\/"] }], + "import/no-unused-modules": ["off", { "unusedExports": true }], + "no-redeclare": "off", + "react-hooks/exhaustive-deps": "error" + } } diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 000000000..5a0d5e480 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto eol=lf diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 000000000..b4b20dcf8 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: [tannerlinsley, tkdodo] diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml new file mode 100644 index 000000000..73ff4218f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -0,0 +1,132 @@ +name: '🐛 Bug report' +description: Report a reproducible bug or regression +body: + - type: markdown + attributes: + value: | + Thank you for reporting an issue :pray:. + + This issue tracker is for reporting reproducible bugs or regression's found in [TanStack Form](https://github.com/TanStack/form) + If you have a question about how to achieve something and are struggling, please post a question + inside of TanStack Form's [Discussions tab](https://github.com/TanStack/form/discussions) + + Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already: + - TanStack Form's [Discussions tab](https://github.com/TanStack/form/discussions) + - TanStack Form's [Open Issues](https://github.com/TanStack/form/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) + - TanStack Form's [Closed Issues](https://github.com/TanStack/form/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed) + + The more information you fill in, the better the community can help you. + - type: textarea + id: description + attributes: + label: Describe the bug + description: Provide a clear and concise description of the challenge you are running into. + validations: + required: true + - type: input + id: link + attributes: + label: Your minimal, reproducible example + description: | + Please add a link to a minimal reproduction. + Note: + - Your bug may get fixed much faster if we can run your code and it doesn't have dependencies other than React/Solid/Vue/Svelte. + - To create a shareable code example for web, you can use CodeSandbox (https://codesandbox.io/s/new) or Stackblitz (https://stackblitz.com/). + - Please make sure the example is complete and runnable - e.g. avoid localhost URLs. + - To stub out real api requests - Promise.resolve and Promise.reject are good options for easy reproduction + - Feel free to fork any of the official CodeSandbox examples to reproduce your issue: https://tanstack.com/form/v4/docs/examples/react/simple + - For React Native, you can use: https://snack.expo.dev/ + - For TypeScript related issues only, a TypeScript Playground link might be sufficient: https://www.typescriptlang.org/play + - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve. + placeholder: | + e.g. Code Sandbox, Stackblitz, Expo Snack or TypeScript playground + validations: + required: true + - type: textarea + id: steps + attributes: + label: Steps to reproduce + description: Describe the steps we have to take to reproduce the behavior. + placeholder: | + 1. Go to '...' + 2. Click on '....' + 3. Scroll down to '....' + 4. See error + validations: + required: true + - type: textarea + id: expected + attributes: + label: Expected behavior + description: Provide a clear and concise description of what you expected to happen. + placeholder: | + As a user, I expected ___ behavior but i am seeing ___ + validations: + required: true + - type: dropdown + attributes: + label: How often does this bug happen? + description: | + Following the repro steps above, how easily are you able to reproduce this bug? + options: + - Every time + - Often + - Sometimes + - Only once + - type: textarea + id: screenshots_or_videos + attributes: + label: Screenshots or Videos + description: | + If applicable, add screenshots or a video to help explain your problem. + For more information on the supported file image/file types and the file size limits, please refer + to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files + placeholder: | + You can drag your video or image files inside of this editor ↓ + - type: textarea + id: platform + attributes: + label: Platform + description: | + Please let us know which Operting System, Browser and Browser version you were using when the issue occurred. + placeholder: | + - OS: [e.g. macOS, Windows, Linux, iOS, Android] + - Browser: [e.g. Chrome, Safari, Firefox, React Native] + - Version: [e.g. 91.1] + validations: + required: true + - type: dropdown + id: adapter + attributes: + label: Tanstack Form adapter + description: | + Please let us know which adapter of TanStack Form you were using when the issue occurred. + options: + - react-form + - solid-form + - svelte-form + - vue-form + - vanilla + - type: input + id: rq-version + attributes: + label: TanStack Form version + description: | + Please let us know the exact version of TanStack Form you were using when the issue occurred. Please don't just put in "latest", as this is subject to change. + placeholder: | + e.g. v3.30.1 + validations: + required: true + - type: input + id: ts-version + attributes: + label: TypeScript version + description: | + If you are using TypeScript, please let us know the exact version of TypeScript you were using when the issue occurred. + placeholder: | + e.g. v4.5.4 + - type: textarea + id: additional + attributes: + label: Additional context + description: Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 000000000..38647b3de --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,8 @@ +blank_issues_enabled: false +contact_links: + - name: Feature Requests & Questions + url: https://github.com/TanStack/form/discussions + about: Please ask and answer questions here. + - name: Community Chat + url: https://discord.gg/mQd7egN + about: A dedicated discord server hosted by Tanner Linsley diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 000000000..ec5466d07 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,58 @@ +name: ci +concurrency: + group: publish-${{ github.github.base_ref }} + cancel-in-progress: true +on: + workflow_dispatch: + inputs: + tag: + description: override release tag + required: false + push: + branches: + - 'main' + - 'alpha' + - 'beta' +env: + NX_DAEMON: false + NX_VERBOSE_LOGGING: true + NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }} +jobs: + test-and-publish: + if: github.repository == 'TanStack/form' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/alpha' || github.ref == 'refs/heads/beta') + name: 'Test & Publish' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: '0' + - uses: pnpm/action-setup@v2.2.4 + with: + version: 7 + - uses: actions/setup-node@v3 + with: + node-version: 16.14.2 + registry-url: https://registry.npmjs.org/ + cache: 'pnpm' + - name: Install dependencies + run: pnpm --filter "./packages/**" --filter form --prefer-offline install + - name: Run Tests + uses: nick-fields/retry@v2.8.3 + with: + command: pnpm run test:ci --base=${{ github.event.before }} + timeout_minutes: 10 + max_attempts: 3 + - name: Publish + run: | + git config --global user.name 'Tanner Linsley' + git config --global user.email 'tannerlinsley@users.noreply.github.com' + npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}" + pnpm run cipublish + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + GH_TOKEN: ${{ secrets.GH_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + TAG: ${{ inputs.tag }} + - name: Upload coverage to Codecov + uses: codecov/codecov-action@v3 diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml new file mode 100644 index 000000000..f4e602004 --- /dev/null +++ b/.github/workflows/pr.yml @@ -0,0 +1,133 @@ +name: pr +on: [pull_request] +env: + NX_DAEMON: false + NX_VERBOSE_LOGGING: true + NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }} +jobs: + test: + name: 'Test' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + ref: ${{ github.head_ref }} + repository: ${{github.event.pull_request.head.repo.full_name}} + - uses: pnpm/action-setup@v2.2.4 + with: + version: 7 + - uses: actions/setup-node@v3 + with: + node-version: 16.14.2 + cache: 'pnpm' + - name: Install dependencies + run: pnpm --filter "./packages/**" --filter form --prefer-offline install + - name: Run Tests + uses: nick-fields/retry@v2.8.3 + with: + command: pnpm test:lib --base=${{ github.event.pull_request.base.sha }} + timeout_minutes: 5 + max_attempts: 3 + - name: Upload coverage to Codecov + uses: codecov/codecov-action@v3 + lint: + name: 'Lint' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + ref: ${{ github.head_ref }} + repository: ${{github.event.pull_request.head.repo.full_name}} + - uses: pnpm/action-setup@v2.2.4 + with: + version: 7 + - uses: actions/setup-node@v3 + with: + node-version: 16.14.2 + cache: 'pnpm' + - name: Install dependencies + run: pnpm --filter "./packages/**" --filter form --prefer-offline install + - run: pnpm run test:eslint --base=${{ github.event.pull_request.base.sha }} + typecheck: + name: 'Typecheck' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + ref: ${{ github.head_ref }} + repository: ${{github.event.pull_request.head.repo.full_name}} + - uses: pnpm/action-setup@v2.2.4 + with: + version: 7 + - uses: actions/setup-node@v3 + with: + node-version: 16.14.2 + cache: 'pnpm' + - name: Install dependencies + run: pnpm --filter "./packages/**" --filter form --prefer-offline install + - run: pnpm run test:types --base=${{ github.event.pull_request.base.sha }} + format: + name: 'Format' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + ref: ${{ github.head_ref }} + repository: ${{github.event.pull_request.head.repo.full_name}} + - uses: pnpm/action-setup@v2.2.4 + with: + version: 7 + - uses: actions/setup-node@v3 + with: + node-version: 16.14.2 + cache: 'pnpm' + - name: Install dependencies + run: pnpm --filter "./packages/**" --filter form --prefer-offline install + - run: pnpm run test:format --base=${{ github.event.pull_request.base.sha }} + test-react-17: + name: 'Test React 17' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + ref: ${{ github.head_ref }} + repository: ${{github.event.pull_request.head.repo.full_name}} + - uses: pnpm/action-setup@v2.2.4 + with: + version: 7 + - uses: actions/setup-node@v3 + with: + node-version: 16.14.2 + cache: 'pnpm' + - name: Install dependencies + run: pnpm --filter "./packages/**" --filter form --prefer-offline install + - name: Run Tests + uses: nick-fields/retry@v2.8.3 + with: + timeout_minutes: 5 + max_attempts: 3 + command: pnpm run test:react:17 --base=${{ github.event.pull_request.base.sha }} + env: + REACTJS_VERSION: 17 + test-build: + name: 'Test Build' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: pnpm/action-setup@v2.2.4 + with: + version: 7 + - uses: actions/setup-node@v3 + with: + node-version: 16.14.2 + cache: 'pnpm' + - name: Install dependencies + run: pnpm --filter "./packages/**" --filter form --prefer-offline install + - run: pnpm run test:build + env: + BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }} diff --git a/.gitignore b/.gitignore index c2c485618..3ca070230 100644 --- a/.gitignore +++ b/.gitignore @@ -1,14 +1,47 @@ + +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies node_modules -/docs-dist -/index.js -/build -/dist -/demo/dist -/es -/lib -/umd -.tmp/ -.idea -.gitconfig +package-lock.json +yarn.lock + +# builds +types +build +*/build +dist +lib +es +artifacts +.rpt2_cache +coverage +*.tgz + +# misc +.DS_Store +.env +.env.local +.env.development.local +.env.test.local +.env.production.local +.next + +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.history +size-plugin.json +stats-hydration.json +stats.json +stats.html +.vscode/settings.json + +*.log .DS_Store -.history \ No newline at end of file +node_modules +.cache +dist +.idea + +nx-cloud.env diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 000000000..fb457f39d --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v16.19.0 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..bc59cbf31 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +/packages/svelte-form/.svelte-kit diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..dbd332f7c --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "all", + "pluginSearchDirs": false, + "plugins": ["prettier-plugin-svelte"], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] +} diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index e53859e4e..000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,9 +0,0 @@ -# Changelog - -## 4.0.1 - -- Fix bug where bracket syntax could result in a bad field path - -## 4.0.0 - -- First stable release for v4! diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 000000000..f28385216 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,135 @@ +# Contributing + +## Questions + +If you have questions about implementation details, help or support, then please use our dedicated community forum at [GitHub Discussions](https://github.com/TanStack/form/discussions) **PLEASE NOTE:** If you choose to instead open an issue for your question, your issue will be immediately closed and redirected to the forum. + +## Reporting Issues + +If you have found what you think is a bug, please [file an issue](https://github.com/TanStack/form/issues/new/choose). **PLEASE NOTE:** Issues that are identified as implementation questions or non-issues will be immediately closed and redirected to [GitHub Discussions](https://github.com/TanStack/form/discussions) + +## Suggesting new features + +If you are here to suggest a feature, first create an issue if it does not already exist. From there, we will discuss use-cases for the feature and then finally discuss how it could be implemented. + +## Development + +If you have been assigned to fix an issue or develop a new feature, please follow these steps to get started: + +- Fork this repository. +- Install dependencies by running `$ pnpm install`. + - We use [pnpm](https://pnpm.io/) v7 for package management. + - We use [nvm](https://github.com/nvm-sh/nvm) to manage node versions - please make sure to use the version mentioned in `.nvmrc`. +- Run development server using `pnpm run watch`. +- Implement your changes and tests to files in the `src/` directory and corresponding test files. +- Document your changes in the appropriate doc page. +- Git stage your required changes and commit (see below commit guidelines). +- Submit PR for review. + +### Running examples +- Make sure you've installed the dependencies by running `$ pnpm install` in the repo's root directory. +- If you want to run the example against your local changes, run `pnpm run watch` in the repo's root directory. Otherwise, it will be run against the latest TanStack Form release. +- Run `pnpm run dev` in the selected examples' directory. + +#### Note on `examples/react-native` +React Native example requires Expo to work. Please follow the instructions from example's README.md file to learn more. + +#### Note on standalone execution +If you want to run an example without installing dependencies for the whole repo, just follow instructions from the example's README.md file. It will be then run against the latest TanStack Form release. + +## Online one-click setup + +You can use Gitpod (An Online Open Source VS Code like IDE which is free for Open Source) for developing online. With a single click it will start a workspace and automatically: + +- clone the `TanStack/form` repo. +- install all the dependencies in `/` and `/docs`. +- run `npm start` in the root(`/`) to Auto-build files. +- run `npm run dev` in `/docs`. + +[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/TanStack/form) + +## Commit message conventions + +`TanStack/form` is using [Angular Commit Message Conventions](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines). + +We have very precise rules over how our git commit messages can be formatted. This leads to **more readable messages** that are easy to follow when looking through the **project history**. + +### Commit Message Format + +Each commit message consists of a **header**, a **body** and a **footer**. The header has a special +format that includes a **type**, a **scope** and a **subject**: + +``` +(): + + + +