[WIP] [v2] Add Octane adapter for TanStack Form

examples/octane/simple/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`

examples/octane/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" />
+    <title>TanStack Form Octane Simple Example App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsrx"></script>
+  </body>
+</html>

examples/octane/simple/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@tanstack/form-example-octane-simple",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3001",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "tsrx-tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@tanstack/octane-form": "workspace:*",
+    "octane": "^0.2.16"
+  },
+  "devDependencies": {
+    "@tsrx/typescript-plugin": "0.4.6",
+    "typescript": "^6.0.2",
+    "vite": "^8.2.1"
+  }
+}

examples/octane/simple/src/index.tsrx

@@ -0,0 +1,11 @@
+import { createRoot } from 'octane'
+
+function App() @{
+  console.log("Test");
+
+  <p>Testing</p>
+}
+
+const target = document.getElementById('root')
+if (!target) throw new Error('Missing #root')
+createRoot(target).render(App)

examples/octane/simple/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../../tsconfig.json",
+  "tsrx": {
+    "compiler": "octane/compiler/volar"
+  },
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "octane",
+    "allowImportingTsExtensions": true,
+    "plugins": [{ "name": "@tsrx/typescript-plugin" }]
+  },
+  "include": ["src", "vite.config.ts"]
+}

examples/octane/simple/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import { octane } from 'octane/compiler/vite'
+
+export default defineConfig({
+  plugins: [octane()],
+  resolve: {
+    extensions: ['.tsrx', '.ts', '.tsx', '.mjs', '.js', '.jsx', '.json'],
+  },
+  build: { target: 'esnext' },
+})

knip.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://unpkg.com/knip@6/schema.json",
   "ignoreFiles": ["**/*.regressions.ts"],
+  "ignoreDependencies": ["ts-node", "@playwright/test"],
   "ignoreWorkspaces": [
     "examples/**",
     "packages/angular-form",
@@ -9,6 +10,7 @@
     "packages/solid-form-devtools",
     "packages/svelte-form",
     "packages/vue-form",
+    "packages/octane-form",
     "packages/form-devtools"
   ],
   "ignoreIssues": {

package.json

@@ -53,6 +53,7 @@
   "devDependencies": {
     "@changesets/changelog-github": "^1.0.1",
     "@changesets/cli": "^3.0.3",
+    "@playwright/test": "^1.63.0",
     "@tanstack/eslint-config": "0.4.0",
     "@tanstack/typedoc-config": "0.3.4",
     "@tanstack/vite-config": "0.6.0",
@@ -68,13 +69,15 @@
     "publint": "^0.3.23",
     "sherif": "^1.9.0",
     "tinyglobby": "^0.2.15",
+    "ts-node": "^10.9.2",
     "tsdown": "^0.22.14",
     "typescript": "^6.0.2",
     "typescript54": "npm:typescript@5.4.5",
     "typescript55": "npm:typescript@5.5.4",
     "typescript56": "npm:typescript@5.6.3",
     "typescript57": "npm:typescript@5.7.3",
     "typescript58": "npm:typescript@5.8.3",
+    "typescript59": "npm:typescript@5.9.3",
     "vite": "^8.2.1",
     "vitest": "^5.0.1"
   },

packages/octane-form/.env-cmdrc

@@ -0,0 +1,14 @@
+{
+  "ts56": {
+    "TSP_COMPILER_TS_PATH": "../../node_modules/typescript56"
+  },
+  "ts57": {
+    "TSP_COMPILER_TS_PATH": "../../node_modules/typescript57"
+  },
+  "ts58": {
+    "TSP_COMPILER_TS_PATH": "../../node_modules/typescript58"
+  },
+  "ts59": {
+    "TSP_COMPILER_TS_PATH": "../../node_modules/typescript59"
+  }
+}

packages/octane-form/README.md

@@ -0,0 +1,49 @@
+<img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
+
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=octane&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=octane"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=octane"
+    alt="TanStack Octane Form"
+    width="900"
+  />
+</picture>
+
+Hooks for managing form state in Octane
+
+<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%22octane-form+tests%22">
+<img src="https://github.com/TanStack/form/workflows/octane-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/octane-form@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/octane-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 -->

packages/octane-form/eslint.config.js

@@ -0,0 +1,13 @@
+// @ts-check
+
+import tsrx from '@tsrx/eslint-plugin'
+import rootConfig from '../../eslint.config.js'
+
+export default [
+  ...rootConfig.map((config) =>
+    config.name === 'tanstack/javascript'
+      ? { ...config, files: [...(config.files ?? []), 'localsrc/**/*.cts'] }
+      : config,
+  ),
+  ...tsrx.configs.recommended,
+]