chore: initial work at scaffolding Vue package

TanStack · Aug 30, 2023 · 849ad78 · 849ad78
1 parent 74a1dab
commit 849ad78
Show file tree

Hide file tree

Showing 24 changed files with 445 additions and 45 deletions.
diff --git a/examples/vue/simple/.gitignore b/examples/vue/simple/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
diff --git a/examples/vue/simple/README.md b/examples/vue/simple/README.md
@@ -0,0 +1,6 @@
+# Basic example
+
+To run this example:
+
+- `npm install` or `yarn` or `pnpm i`
+- `npm run dev` or `yarn dev` or `pnpm dev`
diff --git a/examples/vue/simple/index.html b/examples/vue/simple/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Query Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/simple/package.json b/examples/vue/simple/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@tanstack/form-example-vue-simple",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build -m development",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/vue-form": "workspace:*",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "typescript": "^5.0.4",
+    "vite": "^4.4.4"
+  }
+}
diff --git a/examples/vue/simple/src/App.vue b/examples/vue/simple/src/App.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useTest, Test } from '@tanstack/vue-form'
+
+const test = useTest()
+console.log(test.value)
+</script>
+
+<template>
+  <Test />
+</template>
diff --git a/examples/vue/simple/src/main.ts b/examples/vue/simple/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/vue/simple/src/shims-vue.d.ts b/examples/vue/simple/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/vue/simple/src/types.d.ts b/examples/vue/simple/src/types.d.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  userId: number
+  id: number
+  title: string
+  body: string
+}
diff --git a/examples/vue/simple/tsconfig.json b/examples/vue/simple/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
+}
diff --git a/examples/vue/simple/vite.config.ts b/examples/vue/simple/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import createVuePlugin from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [createVuePlugin()],
+  optimizeDeps: {
+    exclude: ['@tanstack/vue-query', 'vue-demi'],
+  },
+})
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitest/coverage-istanbul": "^0.34.3",
     "axios": "^0.26.1",
     "babel-eslint": "^10.1.0",
@@ -84,6 +85,7 @@
     "react-dom-17": "npm:react-dom@^17.0.2",
     "rimraf": "^5.0.1",
     "rollup": "^3.23.0",
+    "rollup-plugin-esbuild": "^5.0.0",
     "rollup-plugin-node-externals": "^6.1.0",
     "rollup-plugin-preserve-directives": "^0.2.0",
     "rollup-plugin-size": "^0.2.2",

diff --git a/packages/vue-form/.eslintrc.cjs b/packages/vue-form/.eslintrc.cjs
@@ -0,0 +1,11 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+}
+
+module.exports = config
diff --git a/packages/vue-form/README.md b/packages/vue-form/README.md
@@ -0,0 +1,35 @@
+<img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
+
+![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+
+Hooks for managing form state in Vue
+
+<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
+  <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
+</a><a href="https://discord.com/invite/WrRKjPJ" target="\_parent">
+  <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" />
+</a><a href="https://github.com/TanStack/form/actions?query=workflow%3A%22vue-form+tests%22">
+<img src="https://github.com/TanStack/form/workflows/vue-form%20tests/badge.svg" />
+</a><a href="https://www.npmjs.com/package/@tanstack/form-core" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/form-core.svg" />
+</a><a href="https://bundlephobia.com/package/@tanstack/vue-form@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/vue-form" />
+</a><a href="#badge">
+    <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+  </a><a href="https://github.com/TanStack/form/discussions">
+  <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
+</a><a href="https://bestofjs.org/projects/tanstack-form"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%form%26since=daily" /></a><a href="https://github.com/TanStack/form/" target="\_parent">
+  <img alt="" src="https://img.shields.io/github/stars/TanStack/form.svg?style=social&label=Star" />
+</a><a href="https://twitter.com/tannerlinsley" target="\_parent">
+  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
+</a> <a href="https://gitpod.io/from-referrer/">
+  <img src="https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod" alt="Gitpod Ready-to-Code"/>
+</a>
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [TanStack Table](https://github.com/TanStack/table), [TanStack Router](https://github.com/tanstack/router), [TanStack Virtual](https://github.com/tanstack/virtual), [React Charts](https://github.com/TanStack/react-charts), [React Ranger](https://github.com/TanStack/ranger)
+
+## Visit [tanstack.com/form](https://tanstack.com/form) for docs, guides, API and more!
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+<!-- Use the force, Luke -->
diff --git a/packages/vue-form/package.json b/packages/vue-form/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@tanstack/vue-form",
+  "version": "0.0.12",
+  "description": "Powerful, type-safe forms for Vue.",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/form",
+  "homepage": "https://tanstack.com/form",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "build/lib/index.d.ts",
+  "main": "build/lib/index.legacy.cjs",
+  "module": "build/lib/index.legacy.js",
+  "exports": {
+    ".": {
+      "types": "./build/lib/index.d.ts",
+      "import": "./build/lib/index.js",
+      "require": "./build/lib/index.cjs",
+      "default": "./build/lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc",
+    "test:lib": "pnpm run test:2 && pnpm run test:2.7 && pnpm run test:3",
+    "test:2": "vue-demi-switch 2 vue2 && vitest",
+    "test:2.7": "vue-demi-switch 2.7 vue2.7 && vitest",
+    "test:3": "vue-demi-switch 3 && vitest",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "pnpm build:rollup && pnpm build:codemods && pnpm build:types",
+    "build:rollup": "rollup --config rollup.config.js",
+    "build:codemods": "cpy ../codemods/src/**/* ./build/codemods",
+    "build:types": "tsc --emitDeclarationOnly"
+  },
+  "files": [
+    "build",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/form-core": "workspace:*",
+    "@vue/devtools-api": "^6.5.0",
+    "vue-demi": "^0.13.11"
+  },
+  "devDependencies": {
+    "@vue/composition-api": "1.7.1",
+    "vue": "^3.2.47",
+    "vue2": "npm:[email protected]",
+    "vue2.7": "npm:[email protected]"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.1.2",
+    "vue": "^2.5.0 || ^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  }
+}
diff --git a/packages/vue-form/rollup.config.js b/packages/vue-form/rollup.config.js
@@ -0,0 +1,12 @@
+// @ts-check
+
+import { defineConfig } from 'rollup'
+import { buildConfigs } from '../../scripts/getRollupConfig.js'
+
+export default defineConfig(
+  buildConfigs({
+    name: 'vue-form',
+    outputFile: 'index',
+    entryFile: './src/index.ts',
+  }),
+)
diff --git a/packages/vue-form/src/Test.vue b/packages/vue-form/src/Test.vue
@@ -0,0 +1,7 @@
+<template>
+  <p>Test</p>
+</template>
+
+<script setup lang="ts">
+console.log('test')
+</script>
diff --git a/packages/vue-form/src/index.ts b/packages/vue-form/src/index.ts
@@ -0,0 +1,5 @@
+export * from '@tanstack/form-core'
+
+export { default as Test } from './Test.vue'
+
+export * from './useTest'
diff --git a/packages/vue-form/src/sfc.d.ts b/packages/vue-form/src/sfc.d.ts
@@ -0,0 +1 @@
+declare module '*.vue'
diff --git a/packages/vue-form/src/useTest.ts b/packages/vue-form/src/useTest.ts
@@ -0,0 +1,6 @@
+import { ref } from 'vue-demi'
+
+export const useTest = () => {
+  const test = ref(1)
+  return test
+}
diff --git a/packages/vue-form/test-setup.ts b/packages/vue-form/test-setup.ts
@@ -0,0 +1,21 @@
+import { vi } from 'vitest'
+
+import Vue from 'vue2'
+Vue.config.productionTip = false
+Vue.config.devtools = false
+
+// Hide annoying console warnings for Vue2
+import Vue27 from 'vue2.7'
+Vue27.config.productionTip = false
+Vue27.config.devtools = false
+
+vi.mock('vue-demi', async () => {
+  const vue = await vi.importActual('vue-demi')
+  return {
+    ...(vue as any),
+    inject: vi.fn(),
+    provide: vi.fn(),
+    onScopeDispose: vi.fn(),
+    getCurrentInstance: vi.fn(() => ({ proxy: {} })),
+  }
+})
diff --git a/packages/vue-form/tsconfig.json b/packages/vue-form/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+    "outDir": "./build/lib"
+  },
+  "include": ["src"]
+}
diff --git a/packages/vue-form/vitest.config.ts b/packages/vue-form/vitest.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    name: 'vue-query',
+    dir: './src',
+    watch: false,
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['test-setup.ts'],
+    coverage: { provider: 'istanbul' },
+  },
+})