component api

Author: ianmacartney

.gitignore

@@ -12,3 +12,4 @@ node_modules
 
 # npm pack output
 *.tgz
+*.tsbuildinfo

README.md

@@ -29,7 +29,7 @@ const response = await fetch(url);
 - [Create a Cloudflare account](https://cloudflare.com)
 - [Create an R2 bucket](https://developers.cloudflare.com/r2/buckets/create-buckets/)
 - Set the bucket name as an environment variable `R2_BUCKET` in your Convex
-  deployment
+  deployment via `npx convex env set R2_BUCKET <bucket-name>`.
 - [Add a CORS policy](https://developers.cloudflare.com/r2/buckets/cors/#add-cors-policies-from-the-dashboard) to the bucket allowing GET and PUT requests from your
   Convex app. You can also use '\*' to allow all origins (use with caution).
   ```json
@@ -117,12 +117,12 @@ File uploads to R2 typically use signed urls. The R2 component provides hooks fo
        // const user = await userFromAuth(ctx);
        // ...validate that the user can upload to this bucket
      },
-    onUpload: async (ctx, bucket, key) => {
-      // ...do something with the key
-      // This technically runs in the `syncMetadata` mutation, as the upload
-      // is performed from the client side. Will run if using the `useUploadFile`
-      // hook, or if `syncMetadata` function is called directly. Runs after the
-      // `checkUpload` callback.
+     onUpload: async (ctx, bucket, key) => {
+       // ...do something with the key
+       // This technically runs in the `syncMetadata` mutation, as the upload
+       // is performed from the client side. Will run if using the `useUploadFile`
+       // hook, or if `syncMetadata` function is called directly. Runs after the
+       // `checkUpload` callback.
      },
    });
    ```

commonjs.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "./node_modules/convex/schemas/convex.schema.json",
+  "functions": "example/convex"
+}

convex.json

@@ -1,36 +1,45 @@
 import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
 
 export default [
-  { files: ["src/**/*.{js,mjs,cjs,ts,tsx}"] },
   {
     ignores: [
       "dist/**",
       "eslint.config.js",
+      "vitest.config.ts",
       "**/_generated/",
       "node10stubs.mjs",
     ],
   },
   {
+    files: ["src/**/*.{js,mjs,cjs,ts,tsx}", "example/**/*.{js,mjs,cjs,ts,tsx}"],
     languageOptions: {
-      globals: globals.worker,
       parser: tseslint.parser,
-
       parserOptions: {
-        project: true,
-        tsconfigRootDir: ".",
+        project: [
+          "./tsconfig.json",
+          "./example/tsconfig.json",
+          "./example/convex/tsconfig.json",
+        ],
+        tsconfigRootDir: import.meta.dirname,
       },
     },
   },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
+  // Convex code - Worker environment
   {
+    files: ["src/**/*.{ts,tsx}", "example/convex/**/*.{ts,tsx}"],
+    ignores: ["src/react/**"],
+    languageOptions: {
+      globals: globals.worker,
+    },
     rules: {
       "@typescript-eslint/no-floating-promises": "error",
-      "eslint-comments/no-unused-disable": "off",
-
-      // allow (_arg: number) => {} and const _foo = 1;
+      "@typescript-eslint/no-explicit-any": "off",
       "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": [
         "warn",
@@ -39,6 +48,52 @@ export default [
           varsIgnorePattern: "^_",
         },
       ],
+      "@typescript-eslint/no-unused-expressions": [
+        "error",
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+          allowTaggedTemplates: true,
+        },
+      ],
+    },
+  },
+  // React app code - Browser environment
+  {
+    files: ["src/react/**/*.{ts,tsx}", "example/src/**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-explicit-any": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
+    },
+  },
+  // Example config files (vite.config.ts, etc.) - Node environment
+  {
+    files: ["example/vite.config.ts", "example/**/*.config.{js,ts}"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
     },
   },
 ];

eslint.config.js

@@ -15,6 +15,7 @@ import type {
   FilterApi,
   FunctionReference,
 } from "convex/server";
+
 /**
  * A utility for referencing Convex functions in your app's API.
  *
@@ -26,14 +27,13 @@ import type {
 declare const fullApi: ApiFromModules<{
   example: typeof example;
 }>;
-declare const fullApiWithMounts: typeof fullApi;
 
 export declare const api: FilterApi<
-  typeof fullApiWithMounts,
+  typeof fullApi,
   FunctionReference<any, "public">
 >;
 export declare const internal: FilterApi<
-  typeof fullApiWithMounts,
+  typeof fullApi,
   FunctionReference<any, "internal">
 >;
 

esm.json

@@ -1,30 +1,19 @@
 {
-  /* 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 required to use Convex.
-   */
   "compilerOptions": {
-    /* These settings are not required by Convex and can be modified. */
     "allowJs": true,
     "strict": true,
     "skipLibCheck": true,
-
-    /* These compiler options are required by Convex */
     "target": "ESNext",
-    "lib": ["ES2021", "dom", "ESNext.Array"],
+    "lib": ["ES2021", "dom", "DOM.Iterable", "ESNext.Array"],
     "forceConsistentCasingInFileNames": true,
     "allowSyntheticDefaultImports": true,
+    "verbatimModuleSyntax": true,
     "module": "ESNext",
     "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.
-     */
-    "customConditions": ["@convex-dev/component-source"]
+    "jsx": "react-jsx"
   },
-  "include": ["./**/*"],
+  "include": [".*"],
   "exclude": ["./_generated"]
 }

example/convex/_generated/api.d.ts

@@ -9,21 +9,13 @@
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
+    "exactOptionalPropertyTypes": true,
     "isolatedModules": true,
-    "allowImportingTsExtensions": true,
-    "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Import paths */
     "paths": {
       "@/*": ["./src/*"]
     },
-
-    /* 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.
-     */
-    "customConditions": ["@convex-dev/component-source"]
+    "noEmit": true
   },
   "include": ["./src", "vite.config.ts"]
 }