Drop live component sources in favor of codegen

template-component/convex.json

@@ -1,3 +1,7 @@
 {
-  "functions": "example/convex"
+  "$schema": "https://raw.githubusercontent.com/get-convex/convex-backend/refs/heads/main/npm-packages/convex/schemas/convex.schema.json",
+  "functions": "example/convex",
+  "codegen": {
+    "staticApi": true
+  }
 }

template-component/example/convex/_generated/api.d.ts

@@ -8,38 +8,53 @@
  * @module
  */
 
-import type * as example from "../example.js";
-
-import type {
-  ApiFromModules,
-  FilterApi,
-  FunctionReference,
-} from "convex/server";
+import type { FunctionReference } from "convex/server";
 
 /**
- * A utility for referencing Convex functions in your app's API.
+ * A utility for referencing Convex functions in your app's public API.
  *
  * Usage:
  * ```js
  * const myFunctionReference = api.myModule.myFunction;
  * ```
  */
-declare const fullApi: ApiFromModules<{
-  example: typeof example;
-}>;
-declare const fullApiWithMounts: typeof fullApi;
+export declare const api: {
+  example: {
+    addOne: FunctionReference<"mutation", "public", {}, any>;
+    add: FunctionReference<"mutation", "public", { name: string }, any>;
+    count: FunctionReference<"query", "public", { name: string }, any>;
+  };
+};
 
-export declare const api: FilterApi<
-  typeof fullApiWithMounts,
-  FunctionReference<any, "public">
->;
-export declare const internal: FilterApi<
-  typeof fullApiWithMounts,
-  FunctionReference<any, "internal">
->;
+/**
+ * A utility for referencing Convex functions in your app's internal API.
+ *
+ * Usage:
+ * ```js
+ * const myFunctionReference = internal.myModule.myFunction;
+ * ```
+ */
+export declare const internal: {};
 
 export declare const components: {
   shardedCounter: {
+    lib: {
+      add: FunctionReference<
+        "mutation",
+        "internal",
+        {
+          count: number;
+          foo: number;
+          foo2: number;
+          name: string;
+          shards?: number;
+        },
+        null
+      >;
+      count: FunctionReference<"query", "internal", { name: string }, number>;
+    };
+  };
+  sibling: {
     lib: {
       add: FunctionReference<
         "mutation",

template-component/example/convex/convex.config.ts

@@ -1,7 +1,9 @@
 import { defineApp } from "convex/server";
 import shardedCounter from "@example/sharded-counter/convex.config";
+import sibling from "../../src/component/convex.config.js";
 
 const app = defineApp();
 app.use(shardedCounter);
+app.use(sibling, { name: "sibling" });
 
 export default app;

template-component/example/convex/example.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, test, vi } from "vitest";
-import { initConvexTest } from "./setup.test";
-import { api } from "./_generated/api";
+import { initConvexTest } from "./setup.test.js";
+import { api } from "./_generated/api.js";
 
 describe("example", () => {
   beforeEach(async () => {

template-component/example/convex/example.ts

@@ -1,5 +1,5 @@
-import { mutation } from "./_generated/server";
-import { components } from "./_generated/api";
+import { mutation } from "./_generated/server.js";
+import { components } from "./_generated/api.js";
 import { ShardedCounter } from "@example/sharded-counter";
 
 const shardedCounter = new ShardedCounter(components.shardedCounter, {});

template-component/example/convex/tsconfig.json

@@ -19,16 +19,6 @@
     "moduleResolution": "Bundler",
     "isolatedModules": true,
     "noEmit": true
-
-    /* This should only be used in this example. Real apps should not attempt
-     * to compile TypeScript because differences between tsconfig.json files can
-     * cause the code to be compiled differently.
-     */
-    // Un-comment this to get instant types between your component and example.
-    // However, if you're willing to wait for a build before the types update,
-    // it's better to leave this commented out to catch build errors faster.
-    // "customConditions": ["@convex-dev/component-source"]
   },
-  "include": ["./**/*"],
-  "exclude": ["./_generated"]
+  "include": ["."]
 }

template-component/example/src/App.tsx

@@ -1,6 +1,6 @@
 import "./App.css";
 import { useMutation, useQuery } from "convex/react";
-import { api } from "../convex/_generated/api";
+import { api } from "../convex/_generated/api.js";
 
 function App() {
   const count = useQuery(api.example.count, { name: "accomplishments" });

template-component/example/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { ConvexProvider, ConvexReactClient } from "convex/react";
-import App from "./App.tsx";
+import App from "./App.jsx";
 import "./index.css";
 
 const address = import.meta.env.VITE_CONVEX_URL;

template-component/example/tsconfig.json

@@ -13,14 +13,6 @@
     "isolatedModules": true,
     "allowImportingTsExtensions": true,
     "jsx": "react-jsx",
-    /* This should only be used in this example. Real apps should not attempt
-     * to compile TypeScript because differences between tsconfig.json files can
-     * cause the code to be compiled differently.
-     * Note: To most reliably test your component as a library, comment this
-     * out and remove --live-component-sources from the package.json scripts.
-     * This will require you to be re-building your component
-     */
-    "customConditions": ["@convex-dev/component-source"],
     "noEmit": true
   },
   "include": ["./src", "vite.config.ts"]

template-component/example/vite.config.ts

@@ -5,7 +5,4 @@ import react from "@vitejs/plugin-react";
 export default defineConfig({
   envDir: "../",
   plugins: [react()],
-  resolve: {
-    conditions: ["@convex-dev/component-source"],
-  },
 });