@tanstack/create 0.49.1

package/src/frameworks/solid/add-ons/convex/assets/convex/_generated/server.d.ts

@@ -0,0 +1,142 @@
+/* eslint-disable */
+/**
+ * Generated utilities for implementing server-side Convex query and mutation functions.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import {
+  ActionBuilder,
+  HttpActionBuilder,
+  MutationBuilder,
+  QueryBuilder,
+  GenericActionCtx,
+  GenericMutationCtx,
+  GenericQueryCtx,
+  GenericDatabaseReader,
+  GenericDatabaseWriter,
+} from "convex/server";
+import type { DataModel } from "./dataModel.js";
+
+/**
+ * Define a query in this Convex app's public API.
+ *
+ * This function will be allowed to read your Convex database and will be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export declare const query: QueryBuilder<DataModel, "public">;
+
+/**
+ * Define a query that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to read from your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export declare const internalQuery: QueryBuilder<DataModel, "internal">;
+
+/**
+ * Define a mutation in this Convex app's public API.
+ *
+ * This function will be allowed to modify your Convex database and will be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export declare const mutation: MutationBuilder<DataModel, "public">;
+
+/**
+ * Define a mutation that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to modify your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export declare const internalMutation: MutationBuilder<DataModel, "internal">;
+
+/**
+ * Define an action in this Convex app's public API.
+ *
+ * An action is a function which can execute any JavaScript code, including non-deterministic
+ * code and code with side-effects, like calling third-party services.
+ * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
+ * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
+ *
+ * @param func - The action. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
+ */
+export declare const action: ActionBuilder<DataModel, "public">;
+
+/**
+ * Define an action that is only accessible from other Convex functions (but not from the client).
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
+ */
+export declare const internalAction: ActionBuilder<DataModel, "internal">;
+
+/**
+ * Define an HTTP action.
+ *
+ * This function will be used to respond to HTTP requests received by a Convex
+ * deployment if the requests matches the path and method where this action
+ * is routed. Be sure to route your action in `convex/http.js`.
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.
+ */
+export declare const httpAction: HttpActionBuilder;
+
+/**
+ * A set of services for use within Convex query functions.
+ *
+ * The query context is passed as the first argument to any Convex query
+ * function run on the server.
+ *
+ * This differs from the {@link MutationCtx} because all of the services are
+ * read-only.
+ */
+export type QueryCtx = GenericQueryCtx<DataModel>;
+
+/**
+ * A set of services for use within Convex mutation functions.
+ *
+ * The mutation context is passed as the first argument to any Convex mutation
+ * function run on the server.
+ */
+export type MutationCtx = GenericMutationCtx<DataModel>;
+
+/**
+ * A set of services for use within Convex action functions.
+ *
+ * The action context is passed as the first argument to any Convex action
+ * function run on the server.
+ */
+export type ActionCtx = GenericActionCtx<DataModel>;
+
+/**
+ * An interface to read from the database within Convex query functions.
+ *
+ * The two entry points are {@link DatabaseReader.get}, which fetches a single
+ * document by its {@link Id}, or {@link DatabaseReader.query}, which starts
+ * building a query.
+ */
+export type DatabaseReader = GenericDatabaseReader<DataModel>;
+
+/**
+ * An interface to read from and write to the database within Convex mutation
+ * functions.
+ *
+ * Convex guarantees that all writes within a single mutation are
+ * executed atomically, so you never have to worry about partial writes leaving
+ * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control)
+ * for the guarantees Convex provides your functions.
+ */
+export type DatabaseWriter = GenericDatabaseWriter<DataModel>;

package/src/frameworks/solid/add-ons/convex/assets/convex/_generated/server.js

@@ -0,0 +1,89 @@
+/* eslint-disable */
+/**
+ * Generated utilities for implementing server-side Convex query and mutation functions.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import {
+  actionGeneric,
+  httpActionGeneric,
+  queryGeneric,
+  mutationGeneric,
+  internalActionGeneric,
+  internalMutationGeneric,
+  internalQueryGeneric,
+} from "convex/server";
+
+/**
+ * Define a query in this Convex app's public API.
+ *
+ * This function will be allowed to read your Convex database and will be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export const query = queryGeneric;
+
+/**
+ * Define a query that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to read from your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export const internalQuery = internalQueryGeneric;
+
+/**
+ * Define a mutation in this Convex app's public API.
+ *
+ * This function will be allowed to modify your Convex database and will be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export const mutation = mutationGeneric;
+
+/**
+ * Define a mutation that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to modify your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export const internalMutation = internalMutationGeneric;
+
+/**
+ * Define an action in this Convex app's public API.
+ *
+ * An action is a function which can execute any JavaScript code, including non-deterministic
+ * code and code with side-effects, like calling third-party services.
+ * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
+ * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
+ *
+ * @param func - The action. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
+ */
+export const action = actionGeneric;
+
+/**
+ * Define an action that is only accessible from other Convex functions (but not from the client).
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
+ */
+export const internalAction = internalActionGeneric;
+
+/**
+ * Define a Convex HTTP action.
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
+ * as its second.
+ * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
+ */
+export const httpAction = httpActionGeneric;

package/src/frameworks/solid/add-ons/convex/assets/convex/schema.ts

@@ -0,0 +1,14 @@
+import { defineSchema, defineTable } from 'convex/server'
+import { v } from 'convex/values'
+
+export default defineSchema({
+  products: defineTable({
+    title: v.string(),
+    imageId: v.string(),
+    price: v.number(),
+  }),
+  todos: defineTable({
+    text: v.string(),
+    completed: v.boolean(),
+  }),
+})

package/src/frameworks/solid/add-ons/convex/assets/convex/todos.ts

@@ -0,0 +1,43 @@
+import { mutation, query } from './_generated/server'
+import { v } from 'convex/values'
+
+export const list = query({
+  args: {},
+  handler: async (ctx) => {
+    return await ctx.db
+      .query('todos')
+      .withIndex('by_creation_time')
+      .order('desc')
+      .collect()
+  },
+})
+
+export const add = mutation({
+  args: { text: v.string() },
+  handler: async (ctx, args) => {
+    return await ctx.db.insert('todos', {
+      text: args.text,
+      completed: false,
+    })
+  },
+})
+
+export const toggle = mutation({
+  args: { id: v.id('todos') },
+  handler: async (ctx, args) => {
+    const todo = await ctx.db.get(args.id)
+    if (!todo) {
+      throw new Error('Todo not found')
+    }
+    return await ctx.db.patch(args.id, {
+      completed: !todo.completed,
+    })
+  },
+})
+
+export const remove = mutation({
+  args: { id: v.id('todos') },
+  handler: async (ctx, args) => {
+    return await ctx.db.delete(args.id)
+  },
+})

package/src/frameworks/solid/add-ons/convex/assets/convex/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  /* This TypeScript project config describes the environment that
+   * Convex functions run in and is used to typecheck them.
+   * You can modify it, but some settings are required to use Convex.
+   */
+  "compilerOptions": {
+    /* These settings are not required by Convex and can be modified. */
+    "allowJs": true,
+    "strict": true,
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+
+    /* These compiler options are required by Convex */
+    "target": "ESNext",
+    "lib": ["ES2021", "dom"],
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["./**/*"],
+  "exclude": ["./_generated"]
+}

package/src/frameworks/solid/add-ons/convex/assets/src/integrations/convex/provider.tsx

@@ -0,0 +1,12 @@
+import { setupConvex, ConvexProvider } from 'convex-solidjs'
+import type { JSXElement } from 'solid-js'
+
+const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL
+if (!CONVEX_URL) {
+  console.error('missing envar CONVEX_URL')
+}
+const client = setupConvex(CONVEX_URL)
+
+export default function AppConvexProvider(props: { children: JSXElement }) {
+  return <ConvexProvider client={client}>{props.children}</ConvexProvider>
+}

package/src/frameworks/solid/add-ons/convex/assets/src/routes/demo/convex.tsx

@@ -0,0 +1,169 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { Trash2, Plus, Check, Circle } from 'lucide-solid'
+
+import { api } from '../../../convex/_generated/api'
+import type { Id } from '../../../convex/_generated/dataModel'
+import { createSignal, For, Show } from 'solid-js'
+import { useMutation, useQuery } from 'convex-solidjs'
+
+export const Route = createFileRoute('/demo/convex')({
+  ssr: false,
+  component: ConvexTodos,
+})
+
+function ConvexTodos() {
+  const todos = useQuery(api.todos.list, () => ({}))
+  const addTodo = useMutation(api.todos.add)
+  const toggleTodo = useMutation(api.todos.toggle)
+  const removeTodo = useMutation(api.todos.remove)
+
+  const [newTodo, setNewTodo] = createSignal('')
+
+  const handleAddTodo = async () => {
+    if (newTodo().trim()) {
+      await addTodo.mutate({ text: newTodo().trim() })
+      setNewTodo('')
+    }
+  }
+
+  const handleToggleTodo = async (id: Id<'todos'>) => {
+    await toggleTodo.mutate({ id })
+  }
+  const handleRemoveTodo = async (id: Id<'todos'>) => {
+    await removeTodo.mutate({ id })
+  }
+
+  const completedCount = () =>
+    todos?.data()?.filter((todo) => todo.completed).length || 0
+  const totalCount = () => todos?.data()?.length || 0
+
+  return (
+    <div
+      class="min-h-screen flex items-center justify-center p-4"
+      style={{
+        background:
+          'linear-gradient(135deg, #667a56 0%, #8fbc8f 25%, #90ee90 50%, #98fb98 75%, #f0fff0 100%)',
+      }}
+    >
+      <div class="w-full max-w-2xl">
+        {/* Header Card */}
+        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl border border-green-200/50 p-8 mb-6">
+          <div class="text-center">
+            <h1 class="text-4xl font-bold text-green-800 mb-2">Convex Todos</h1>
+            <p class="text-green-600 text-lg">Powered by real-time sync</p>
+            <Show when={totalCount() > 0}>
+              <div class="mt-4 flex justify-center space-x-6 text-sm">
+                <span class="text-green-700 font-medium">
+                  {completedCount()} completed
+                </span>
+                <span class="text-gray-600">
+                  {totalCount() - completedCount()} remaining
+                </span>
+              </div>
+            </Show>
+          </div>
+        </div>
+
+        {/* Add Todo Card */}
+        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 p-6 mb-6">
+          <div class="flex gap-3">
+            <input
+              type="text"
+              value={newTodo()}
+              onInput={(e) => setNewTodo(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleAddTodo()
+                }
+              }}
+              placeholder="What needs to be done?"
+              class="flex-1 px-4 py-3 rounded-xl border-2 border-green-200 focus:border-green-400 focus:outline-none text-gray-800 placeholder-gray-500 bg-white/80 transition-colors"
+            />
+            <button
+              onClick={handleAddTodo}
+              disabled={!newTodo().trim()}
+              class="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl"
+            >
+              <Plus size={20} />
+              Add
+            </button>
+          </div>
+        </div>
+
+        {/* Todos List */}
+        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 overflow-hidden">
+          <Show when={todos.isLoading()}>
+            <div class="p-8 text-center">
+              <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500 mx-auto mb-4"></div>
+              <p class="text-green-600">Loading todos...</p>
+            </div>
+          </Show>
+          <Show
+            when={todos.data()?.length !== 0}
+            fallback={
+              <div class="p-12 text-center">
+                <Circle size={48} class="text-green-300 mx-auto mb-4" />
+                <h3 class="text-xl font-semibold text-green-800 mb-2">
+                  No todos yet
+                </h3>
+                <p class="text-green-600">
+                  Add your first todo above to get started!
+                </p>
+              </div>
+            }
+          >
+            <div class="divide-y divide-green-100">
+              <For each={todos.data()}>
+                {(todo, index) => (
+                  <div
+                    class={`p-4 flex items-center gap-4 hover:bg-green-50/50 transition-colors ${
+                      todo.completed ? 'opacity-75' : ''
+                    }`}
+                    style={{
+                      'animation-delay': `${index() * 50}ms`,
+                    }}
+                  >
+                    <button
+                      onClick={() => handleToggleTodo(todo._id)}
+                      class={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${
+                        todo.completed
+                          ? 'bg-green-500 border-green-500 text-white'
+                          : 'border-green-300 hover:border-green-400 text-transparent hover:text-green-400'
+                      }`}
+                    >
+                      <Check size={14} />
+                    </button>
+
+                    <span
+                      class={`flex-1 text-lg transition-all duration-200 ${
+                        todo.completed
+                          ? 'line-through text-gray-500'
+                          : 'text-gray-800'
+                      }`}
+                    >
+                      {todo.text}
+                    </span>
+
+                    <button
+                      onClick={() => handleRemoveTodo(todo._id)}
+                      class="flex-shrink-0 p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                    >
+                      <Trash2 size={18} />
+                    </button>
+                  </div>
+                )}
+              </For>
+            </div>
+          </Show>
+        </div>
+
+        {/* Footer */}
+        <div class="text-center mt-6">
+          <p class="text-green-700/80 text-sm">
+            Built with Convex • Real-time updates • Always in sync
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/frameworks/solid/add-ons/convex/info.json

@@ -0,0 +1,26 @@
+{
+  "name": "Convex",
+  "description": "Add the Convex database to your application.",
+  "link": "https://convex.dev",
+  "phase": "add-on",
+  "type": "add-on",
+  "category": "database",
+  "exclusive": ["database", "orm"],
+  "color": "#EE342F",
+  "modes": ["file-router"],
+  "routes": [
+    {
+      "url": "/demo/convex",
+      "name": "Convex",
+      "path": "src/routes/demo.convex.tsx",
+      "jsName": "ConvexDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "provider",
+      "path": "src/integrations/convex/provider.tsx",
+      "jsName": "ConvexProvider"
+    }
+  ]
+}

package/src/frameworks/solid/add-ons/convex/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "convex-solidjs": "^0.0.3",
+    "convex": "^1.27.3",
+    "lucide-solid": "^0.544.0"
+  }
+}

package/src/frameworks/solid/add-ons/convex/small-logo.svg

@@ -0,0 +1,5 @@
+<svg width="184" height="188" viewBox="0 0 184 188" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M108.092 130.021C126.258 128.003 143.385 118.323 152.815 102.167C148.349 142.128 104.653 167.385 68.9858 151.878C65.6992 150.453 62.8702 148.082 60.9288 145.034C52.9134 132.448 50.2786 116.433 54.0644 101.899C64.881 120.567 86.8748 132.01 108.092 130.021Z" fill="#F3B01C"/>
+<path d="M53.4012 90.1735C46.0375 107.191 45.7186 127.114 54.7463 143.51C22.9759 119.608 23.3226 68.4578 54.358 44.7949C57.2286 42.6078 60.64 41.3097 64.2178 41.1121C78.9312 40.336 93.8804 46.0225 104.364 56.6193C83.0637 56.831 62.318 70.4756 53.4012 90.1735Z" fill="#8D2676"/>
+<path d="M114.637 61.8552C103.89 46.8701 87.0686 36.6684 68.6387 36.358C104.264 20.1876 148.085 46.4045 152.856 85.1654C153.3 88.7635 152.717 92.4322 151.122 95.6775C144.466 109.195 132.124 119.679 117.702 123.559C128.269 103.96 126.965 80.0151 114.637 61.8552Z" fill="#EE342F"/>
+</svg>