use component api

.expo/README.md

@@ -1,8 +1,14 @@
-> Why do I have a folder named ".expo" in my project?
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-> What do the files contain?
-- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
-- "settings.json": contains the server configuration that is used to serve the application manifest.
-> Should I commit the ".expo" folder?
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.
+> Why do I have a folder named ".expo" in my project? The ".expo" folder is
+> created when an Expo project is started using "expo start" command. What do
+> the files contain?
+
+- "devices.json": contains information about devices that have recently opened
+  this project. This is used to populate the "Development sessions" list in your
+  development builds.
+- "settings.json": contains the server configuration that is used to serve the
+  application manifest.
+  > Should I commit the ".expo" folder? No, you should not share the ".expo"
+  > folder. It does not contain any information that is relevant for other
+  > developers working on the project, it is specific to your machine. Upon
+  > project creation, the ".expo" folder is already added to your ".gitignore"
+  > file.

.github/workflows/test.yml

@@ -0,0 +1,41 @@
+name: Test and lint
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: ["**"]
+
+jobs:
+  check:
+    name: Test and lint
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    steps:
+      - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+
+      - name: Node setup
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+        with:
+          cache-dependency-path: |
+            package.json
+            example/package.json
+          node-version: "20.x"
+          cache: "npm"
+
+      - name: Install and build
+        run: |
+          npm i
+          npm run build
+          cd example && npm install
+      - name: Publish package for testing branch
+        run: npx pkg-pr-new publish || echo "Have you set up pkg-pr-new for this repo?"
+      - name: Test
+        run: |
+          npm run test
+          npm run typecheck
+          npm run lint

.gitignore

@@ -9,11 +9,9 @@ dist-ssr
 explorations
 node_modules
 .eslintcache
-# components are libraries!
-package-lock.json
-
-# this is a package-json-redirect stub dir, see https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file
-frontend/package.json
+**/.expo
+**/expo-env.d.ts
 # npm pack output
 *.tgz
+*.tsbuildinfo
 .claude

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "all",
+  "proseWrap": "always"
+}

CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## 0.3.0
+
+- Adds /test and /\_generated/component.js entrypoints
+- Drops commonjs support
+- Improves source mapping for generated files
+- Changes to a statically generated component API

CLAUDE.md

@@ -1,7 +1,9 @@
 # Claude Development Notes
 
 ## Codegen Command
+
 After making changes to component functions, run codegen with:
+
 ```bash
 cd example/ && npm run dev -- --once
 ```
@@ -10,18 +12,23 @@ cd example/ && npm run dev -- --once
 
 When adding new functions to this Convex component:
 
-1. **Client function** (`src/client/index.ts`): 
-   - Add method to `PushNotifications` class that calls `ctx.runMutation(this.component.public.functionName, { ...args, logLevel: this.config.logLevel })`
+1. **Client function** (`src/client/index.ts`):
+
+   - Add method to `PushNotifications` class that calls
+     `ctx.runMutation(this.component.public.functionName, { ...args, logLevel: this.config.logLevel })`
    - Follow existing patterns for argument types and return types
 
 2. **Component function** (`src/component/public.ts`):
+
    - Define args schema using `v.object()`
    - Export mutation/query with proper return type
    - Call `ensureCoordinator(ctx)` after processing for coordination
 
 3. **Batch functions**:
-   - Use existing handler functions (like `sendPushNotificationHandler`) in loops
+
+   - Use existing handler functions (like `sendPushNotificationHandler`) in
+     loops
    - Call `ensureCoordinator` once after all processing
    - Return array of results matching individual function return types
 
-4. **Always run codegen** after changes to regenerate types
+4. **Always run codegen** after changes to regenerate types

CONTRIBUTING.md

@@ -0,0 +1,48 @@
+# Developing guide
+
+## Running locally
+
+```sh
+npm run setup
+npm run dev
+```
+
+Setup should:
+
+1. Install dependencies in the root and example directories
+1. Build the component
+1. Create a Convex project if not already connected, and deploy to it once.
+1. Set the `EXPO_PUBLIC_CONVEX_URL` environment variable for the example expo
+   app (needs to be set in the example expo app's `.env.local` file)
+
+## Testing
+
+```sh
+npm run clean
+npm run build
+npm run typecheck
+npm run lint
+npm run test
+```
+
+## Deploying
+
+### Building a one-off package
+
+```sh
+npm run clean
+npm ci
+npm pack
+```
+
+### Deploying a new version
+
+```sh
+npm run release
+```
+
+or for alpha release:
+
+```sh
+npm run alpha
+```

README.md

@@ -4,8 +4,10 @@
 
 <!-- START: Include on https://convex.dev/components -->
 
-This is a Convex component that integrates with [Expo's push notification API](https://docs.expo.dev/push-notifications/overview/)
-to allow sending mobile push notifications to users of your app. It will batch calls to Expo's API and handle retrying delivery.
+This is a Convex component that integrates with
+[Expo's push notification API](https://docs.expo.dev/push-notifications/overview/)
+to allow sending mobile push notifications to users of your app. It will batch
+calls to Expo's API and handle retrying delivery.
 
 <details>
   <summary>Demo GIF</summary>
@@ -51,11 +53,12 @@ export const sendPushNotification = mutation({
 
 ## Pre-requisite: Convex
 
-You'll need an existing Convex project to use the component.
-Convex is a hosted backend platform, including a database, serverless functions,
-and a ton more you can learn about [here](https://docs.convex.dev/get-started).
+You'll need an existing Convex project to use the component. Convex is a hosted
+backend platform, including a database, serverless functions, and a ton more you
+can learn about [here](https://docs.convex.dev/get-started).
 
-Run `npm create convex` or follow any of the [quickstarts](https://docs.convex.dev/home) to set one up.
+Run `npm create convex` or follow any of the
+[quickstarts](https://docs.convex.dev/home) to set one up.
 
 ## Installation
 
@@ -65,12 +68,13 @@ Install the component package:
 npm i @convex-dev/expo-push-notifications
 ```
 
-Create a `convex.config.ts` file in your app's `convex/` folder and install the component by calling `use`:
+Create a `convex.config.ts` file in your app's `convex/` folder and install the
+component by calling `use`:
 
 ```ts
 // convex/convex.config.ts
 import { defineApp } from "convex/server";
-import pushNotifications from "@convex-dev/expo-push-notifications/convex.config";
+import pushNotifications from "@convex-dev/expo-push-notifications/convex.config.js";
 
 const app = defineApp();
 app.use(pushNotifications);
@@ -88,21 +92,24 @@ import { PushNotifications } from "@convex-dev/expo-push-notifications";
 const pushNotifications = new PushNotifications(components.pushNotifications);
 ```
 
-It takes in an optional type parameter (defaulting to `Id<"users">`) for the type to use as a unique identifier for push notification recipients:
+It takes in an optional type parameter (defaulting to `Id<"users">`) for the
+type to use as a unique identifier for push notification recipients:
 
 ```ts
 import { PushNotifications } from "@convex-dev/expo-push-notifications";
 
 export type Email = string & { __isEmail: true };
 
 const pushNotifications = new PushNotifications<Email>(
-  components.pushNotifications
+  components.pushNotifications,
 );
 ```
 
 ## Registering a user for push notifications
 
-Get a user's push notification token following the Expo documentation [here](https://docs.expo.dev/push-notifications/push-notifications-setup/#registering-for-push-notifications), and record it using a Convex mutation:
+Get a user's push notification token following the Expo documentation
+[here](https://docs.expo.dev/push-notifications/push-notifications-setup/#registering-for-push-notifications),
+and record it using a Convex mutation:
 
 ```ts
 // convex/example.ts
@@ -118,9 +125,11 @@ export const recordPushNotificationToken = mutation({
 });
 ```
 
-You can pause and resume push notification sending for a user using the `pausePushNotifications` and `resumePushNotifications` methods.
+You can pause and resume push notification sending for a user using the
+`pausePushNotifications` and `resumePushNotifications` methods.
 
-To determine if a user has a token and their pause status, you can use `getStatusForUser`.
+To determine if a user has a token and their pause status, you can use
+`getStatusForUser`.
 
 ## Send notifications
 
@@ -139,21 +148,24 @@ export const sendPushNotification = mutation({
 });
 ```
 
-You can use the ID returned from `sendPushNotifications` to query the status of the notification using `getNotification`.
-Using this in a query allows you to subscribe to the status of a notification.
+You can use the ID returned from `sendPushNotifications` to query the status of
+the notification using `getNotification`. Using this in a query allows you to
+subscribe to the status of a notification.
 
 You can also view all notifications for a user with `getNotificationsForUser`.
 
 ## Troubleshooting
 
-To add more logging, provide `PushNotifications` with a `logLevel` in the constructor:
+To add more logging, provide `PushNotifications` with a `logLevel` in the
+constructor:
 
 ```ts
 const pushNotifications = new PushNotifications(components.pushNotifications, {
   logLevel: "DEBUG",
 });
 ```
 
-The push notification sender can be shutdown gracefully, and then restarted using the `shutdown` and `restart` methods.
+The push notification sender can be shutdown gracefully, and then restarted
+using the `shutdown` and `restart` methods.
 
 <!-- END: Include on https://convex.dev/components -->

convex.json

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

eslint.config.js

@@ -3,34 +3,41 @@ import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
 
 export default [
-  { files: ["src/**/*.{js,mjs,cjs,ts,tsx}"] },
   {
     ignores: [
       "dist/**",
-      "eslint.config.js",
+      "*.config.{js,mjs,ts}",
       "**/_generated/",
       "node10stubs.mjs",
+      "example/.expo/**",
+      "example/**/*.config.{js,mjs,ts}",
+      "example/expo-env.d.ts",
     ],
   },
   {
+    files: [
+      "src/**/*.{js,mjs,cjs,ts,tsx}",
+      "example/convex/*.{js,mjs,cjs,ts,tsx}",
+    ],
     languageOptions: {
-      globals: globals.worker,
       parser: tseslint.parser,
-
       parserOptions: {
-        project: true,
-        tsconfigRootDir: ".",
+        project: ["./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}"],
+    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 +46,15 @@ export default [
           varsIgnorePattern: "^_",
         },
       ],
+      "no-unused-expressions": "off",
+      "@typescript-eslint/no-unused-expressions": [
+        "error",
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+          allowTaggedTemplates: true,
+        },
+      ],
     },
   },
 ];

example/.env.local.example

@@ -0,0 +1,2 @@
+# Get this from ../../.env.local 'CONVEX_URL'
+EXPO_PUBLIC_CONVEX_URL=https://your-animal-123.convex.cloud