Update Ditto API usage

- disable sync with v3
- install websocket url
- disable Ditto cloud sync
- actually start sync

Author: pvditto

examples/vite-typescript-example/src/AppContainer.tsx

@@ -15,6 +15,13 @@ interface IdentityOption {
   name: string
   path: string
 }
+
+// If you're using the Ditto cloud these values can be found in the Ditto
+// portal, on your app settings page.
+const DITTO_APP_ID = uuidv4()
+const DITTO_AUTH_URL = `https://${DITTO_APP_ID}.cloud.ditto.live`
+const DITTO_WEBSOCKET_URL = `wss://${DITTO_APP_ID}.cloud.ditto.live`
+
 const options: IdentityOption[] = [
   { path: '/path-development', name: 'Development' },
   { path: '/path-online', name: 'Online' },
@@ -29,25 +36,35 @@ const AppContainer: React.FC = () => {
     useOnlineIdentity()
   const [currentPath, setCurrentPath] = useState('/path-development')
 
-  const handleCreateDittoInstances = () => {
+  const handleCreateDittoInstances = async () => {
     // Example of how to create a development instance
     const dittoDevelopment = new Ditto(
       createDevelopment({ appID: 'live.ditto.example', siteID: 1234 }),
       '/path-development',
     )
+    await dittoDevelopment.disableSyncWithV3()
+    dittoDevelopment.startSync()
 
     // Example of how to create an online instance with authentication enabled
     const dittoOnline = new Ditto(
       createOnline(
         {
-          // If you're using the Ditto cloud this ID should be the app ID shown on your app settings page, on the portal.
-          appID: uuidv4(),
-          // enableDittoCloudSync: true,
+          appID: DITTO_APP_ID,
+          enableDittoCloudSync: false,
+          customAuthURL: DITTO_AUTH_URL,
         },
         '/path-online',
       ),
       '/path-online',
     )
+    dittoOnline.updateTransportConfig((config) => {
+      config.connect.websocketURLs = [DITTO_WEBSOCKET_URL]
+      return config
+    })
+    await dittoOnline.disableSyncWithV3()
+
+    dittoOnline.startSync()
+
     return [dittoDevelopment, dittoOnline]
   }
 
@@ -79,6 +96,7 @@ const AppContainer: React.FC = () => {
             return <h1>Loading</h1>
           }
           if (error) {
+            if (error) console.error('Error creating Ditto instances:', error)
             return <h1>Error: {JSON.stringify(error)}</h1>
           }