launchprep

Author: ianmacartney

README.md

@@ -1,7 +1,10 @@
 # Convex Twilio Component
+
 [![npm version](https://badge.fury.io/js/@convex-dev%2Ftwilio.svg)](https://badge.fury.io/js/@convex-dev%2Ftwilio)
 
-**Note: Convex Components are currently in beta**
+**Note: Convex Components are currently in beta.**
+
+<!-- START: Include on https://convex.dev/components -->
 
 Send and receive SMS messages in your Convex app using Twilio.
 
@@ -10,7 +13,7 @@ import Twilio from "@convex-dev/twilio";
 import { components } from "./_generated/api";
 
 export const twilio = new Twilio(components.twilio, {
-  default_from: process.env.TWILIO_PHONE_NUMBER!,
+  defaultFrom: process.env.TWILIO_PHONE_NUMBER!,
 });
 
 export const sendSms = internalAction({
@@ -22,6 +25,7 @@ export const sendSms = internalAction({
   },
 });
 ```
+
 ## Prerequisites
 
 ### Twilio Phone Number
@@ -72,7 +76,7 @@ import { components } from "./_generated/api";
 export const twilio = new Twilio(components.twilio, {
   // optionally pass in the default "from" phone number you'll be using
   // this must be a phone number you've created with Twilio
-  default_from: process.env.TWILIO_PHONE_NUMBER!,
+  defaultFrom: process.env.TWILIO_PHONE_NUMBER!,
 });
 ```
 
@@ -89,30 +93,21 @@ twilio.registerRoutes(http);
 export default http;
 ```
 
-This will register two webhook HTTP handlers in your your Convex app's deployment:
-
-- YOUR_CONVEX_SITE_URL/twilio/message-status - capture and store delivery status of messages you **send**.
-- YOUR_CONVEX_SITE_URL/twilio/incoming-message - capture and store messages **sent to** your Twilio phone number.
-
-Note: You may pass a custom `http_prefix` to `registerRoutes` if you want to
-route Twilio endpoints somewhere other than `YOUR_CONVEX_SITE_URL/twilio`.
-
 ## Sending Messages
 
-To send a message use the Convex action `sendMessage` exposed by the client, for example:
+To send a message use the Convex action `sendMessage`:
 
 ```ts
 // convex/messages.ts
 import { v } from "convex/values";
 import { internalAction } from "./_generated/server";
 
 export const sendSms = internalAction({
-  args: {
-    to: v.string(),
-    body: v.string(),
-  },
   handler: async (ctx, args) => {
-    return await twilio.sendMessage(ctx, args);
+    const status = await twilio.sendMessage(ctx, {
+      to: "+14158675309",
+      body: "Hey Jenny",
+    });
   },
 });
 ```
@@ -122,10 +117,21 @@ By querying the message (see [below](#querying-messages)) you can check for the
 ## Receiving Messages
 
 To receive messages, you will associate a webhook handler provided by the component with the Twilio phone number you'd like to use.
-The webhook handler is mounted at
 
-```
-YOUR_CONVEX_SITE_URL/twilio/incoming-message
+`twilio.registerRoutes` registers two webhook HTTP handlers in your your Convex app's deployment:
+
+- `YOUR_CONVEX_SITE_URL/twilio/message-status` - capture and store delivery status of messages you **send**.
+- `YOUR_CONVEX_SITE_URL/twilio/incoming-message` - capture and store messages **sent to** your Twilio phone number.
+
+Note: You may pass a custom `httpPrefix` to `Twilio` if you want to
+route Twilio endpoints somewhere other than `YOUR_CONVEX_SITE_URL/twilio/*`.
+
+For instance, to route to `YOUR_CONVEX_SITE_URL/custom-twilio/message-status`, set:
+
+```ts
+export const twilio = new Twilio(components.twilio, {
+  httpPrefix: "/custom-twilio",
+});
 ```
 
 You can associate it with your Twilio phone number in two ways:
@@ -135,10 +141,6 @@ You can associate it with your Twilio phone number in two ways:
 2. By calling `registerIncomingSmsHandler` exposed by the component client, passing it the phone number's SID:
 
 ```ts
-// convex/messages.ts
-
-// ...
-
 export const registerIncomingSmsHandler = internalAction({
   args: {},
   handler: async (ctx) => {
@@ -149,17 +151,15 @@ export const registerIncomingSmsHandler = internalAction({
 });
 ```
 
-Now, incoming messages will be captured by the component and logged in the `messages` table.
+Once it is configured, incoming messages will be captured by the component and logged in the `messages` table.
 
 You can execute your own logic upon receiving an incoming message, by providing a callback when instantiating the Twilio Component client:
 
 ```ts
 // convex/example.ts
 import { Twilio, messageValidator } from "@convex-dev/twilio";
 
-const twilio = new Twilio(components.twilio, {
-  default_from: process.env.TWILIO_PHONE_NUMBER || "",
-});
+const twilio = new Twilio(components.twilio);
 twilio.incomingMessageCallback = internal.example.handleIncomingMessage;
 
 export const handleIncomingMessage = internalMutation({
@@ -248,75 +248,4 @@ export const getMessagesByCounterparty = query({
 });
 ```
 
-# 🧑‍🏫 What is Convex?
-
-[Convex](https://convex.dev) is a hosted backend platform with a
-built-in database that lets you write your
-[database schema](https://docs.convex.dev/database/schemas) and
-[server functions](https://docs.convex.dev/functions) in
-[TypeScript](https://docs.convex.dev/typescript). Server-side database
-[queries](https://docs.convex.dev/functions/query-functions) automatically
-[cache](https://docs.convex.dev/functions/query-functions#caching--reactivity) and
-[subscribe](https://docs.convex.dev/client/react#reactivity) to data, powering a
-[realtime `useQuery` hook](https://docs.convex.dev/client/react#fetching-data) in our
-[React client](https://docs.convex.dev/client/react). There are also clients for
-[Python](https://docs.convex.dev/client/python),
-[Rust](https://docs.convex.dev/client/rust),
-[ReactNative](https://docs.convex.dev/client/react-native), and
-[Node](https://docs.convex.dev/client/javascript), as well as a straightforward
-[HTTP API](https://docs.convex.dev/http-api/).
-
-The database supports
-[NoSQL-style documents](https://docs.convex.dev/database/document-storage) with
-[opt-in schema validation](https://docs.convex.dev/database/schemas),
-[relationships](https://docs.convex.dev/database/document-ids) and
-[custom indexes](https://docs.convex.dev/database/indexes/)
-(including on fields in nested objects).
-
-The
-[`query`](https://docs.convex.dev/functions/query-functions) and
-[`mutation`](https://docs.convex.dev/functions/mutation-functions) server functions have transactional,
-low latency access to the database and leverage our
-[`v8` runtime](https://docs.convex.dev/functions/runtimes) with
-[determinism guardrails](https://docs.convex.dev/functions/runtimes#using-randomness-and-time-in-queries-and-mutations)
-to provide the strongest ACID guarantees on the market:
-immediate consistency,
-serializable isolation, and
-automatic conflict resolution via
-[optimistic multi-version concurrency control](https://docs.convex.dev/database/advanced/occ) (OCC / MVCC).
-
-The [`action` server functions](https://docs.convex.dev/functions/actions) have
-access to external APIs and enable other side-effects and non-determinism in
-either our
-[optimized `v8` runtime](https://docs.convex.dev/functions/runtimes) or a more
-[flexible `node` runtime](https://docs.convex.dev/functions/runtimes#nodejs-runtime).
-
-Functions can run in the background via
-[scheduling](https://docs.convex.dev/scheduling/scheduled-functions) and
-[cron jobs](https://docs.convex.dev/scheduling/cron-jobs).
-
-Development is cloud-first, with
-[hot reloads for server function](https://docs.convex.dev/cli#run-the-convex-dev-server) editing via the
-[CLI](https://docs.convex.dev/cli),
-[preview deployments](https://docs.convex.dev/production/hosting/preview-deployments),
-[logging and exception reporting integrations](https://docs.convex.dev/production/integrations/),
-There is a
-[dashboard UI](https://docs.convex.dev/dashboard) to
-[browse and edit data](https://docs.convex.dev/dashboard/deployments/data),
-[edit environment variables](https://docs.convex.dev/production/environment-variables),
-[view logs](https://docs.convex.dev/dashboard/deployments/logs),
-[run server functions](https://docs.convex.dev/dashboard/deployments/functions), and more.
-
-There are built-in features for
-[reactive pagination](https://docs.convex.dev/database/pagination),
-[file storage](https://docs.convex.dev/file-storage),
-[reactive text search](https://docs.convex.dev/text-search),
-[vector search](https://docs.convex.dev/vector-search),
-[https endpoints](https://docs.convex.dev/functions/http-actions) (for webhooks),
-[snapshot import/export](https://docs.convex.dev/database/import-export/),
-[streaming import/export](https://docs.convex.dev/production/integrations/streaming-import-export), and
-[runtime validation](https://docs.convex.dev/database/schemas#validators) for
-[function arguments](https://docs.convex.dev/functions/args-validation) and
-[database data](https://docs.convex.dev/database/schemas#schema-validation).
-
-Everything scales automatically, and it’s [free to start](https://www.convex.dev/plans).
+<!-- END: Include on https://convex.dev/components -->

example/convex/example.ts

@@ -1,14 +1,10 @@
 import { v } from "convex/values";
-import {
-  internalAction,
-  query,
-  internalMutation,
-} from "./_generated/server";
+import { internalAction, query, internalMutation } from "./_generated/server";
 import { Twilio, messageValidator } from "@convex-dev/twilio";
 import { internal, components } from "./_generated/api";
 
 export const twilio = new Twilio(components.twilio, {
-  default_from: process.env.TWILIO_PHONE_NUMBER!,
+  defaultFrom: process.env.TWILIO_PHONE_NUMBER!,
 });
 twilio.incomingMessageCallback = internal.example.handleMessage;
 twilio.defaultOutgoingMessageCallback = internal.example.handleMessage;

example/package-lock.json

@@ -3,13 +3,13 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "convex dev --live-component-sources",
+    "dev": "convex dev --live-component-sources --typecheck-components",
     "logs": "convex logs",
     "lint": "tsc -p convex && eslint convex"
   },
   "dependencies": {
-    "@convex-dev/twilio": "^0.1.1",
-    "convex": "^1.16.1"
+    "@convex-dev/twilio": "file:..",
+    "convex": "^1.16.5"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",