Update LiveObjects examples to use new npm workspace implementations

Author: GregHolmes

examples/liveobjects-live-counter/javascript/README.md

@@ -12,12 +12,12 @@ LiveCounters are implemented using [Ably LiveObjects](https://ably.com/docs/live
 
 Use the following methods to interact with a LiveCounter in your application:
 
-* [`objects.getRoot()`](https://ably.com/docs/liveobjects) - retrieves the root object that serves as the starting point for storing and organizing objects on a channel.
-* [`objects.createCounter()`](https://ably.com/docs/liveobjects) - creates a new LiveCounter instance.
-* [`liveCounter.value()`](https://ably.com/docs/liveobjects/livecounter) - returns the current value of a counter.
-* [`liveCounter.increment()`](https://ably.com/docs/liveobjects/livecounter) - sends the operation message to the Ably system to increase the counter value.
-* [`liveCounter.decrement()`](https://ably.com/docs/liveobjects/livecounter) - sends the operation message to the Ably system to decrease the counter value.
-* [`liveCounter.subscribe()`](https://ably.com/docs/liveobjects/livecounter) - subscribes to LiveCounter updates by registering a listener.
+- [`objects.getRoot()`](https://ably.com/docs/liveobjects) - retrieves the root object that serves as the starting point for storing and organizing objects on a channel.
+- [`objects.createCounter()`](https://ably.com/docs/liveobjects) - creates a new LiveCounter instance.
+- [`liveCounter.value()`](https://ably.com/docs/liveobjects/livecounter) - returns the current value of a counter.
+- [`liveCounter.increment()`](https://ably.com/docs/liveobjects/livecounter) - sends the operation message to the Ably system to increase the counter value.
+- [`liveCounter.decrement()`](https://ably.com/docs/liveobjects/livecounter) - sends the operation message to the Ably system to decrease the counter value.
+- [`liveCounter.subscribe()`](https://ably.com/docs/liveobjects/livecounter) - subscribes to LiveCounter updates by registering a listener.
 
 Find out more about [LiveCounter](https://ably.com/docs/liveobjects/livecounter).
 
@@ -41,7 +41,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -59,4 +59,4 @@ yarn run liveobjects-live-counter-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.

examples/liveobjects-live-counter/javascript/postcss.config.ts

@@ -11,15 +11,15 @@ export enum Color {
 
 const client = new Realtime({
   clientId: nanoid(),
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  key: import.meta.env.VITE_ABLY_KEY as string,
   environment: 'sandbox',
   plugins: { Objects },
 });
 
 const urlParams = new URLSearchParams(window.location.search);
 
 const channelName = urlParams.get('name') || 'objects-live-counter';
-const channel = client.channels.get(channelName, { modes: ['STATE_PUBLISH', 'STATE_SUBSCRIBE'] });
+const channel = client.channels.get(channelName, { modes: ['OBJECT_PUBLISH', 'OBJECT_SUBSCRIBE'] });
 
 const colorCountDivs: Record<Color, HTMLElement> = {
   red: document.getElementById('count-red'),

examples/liveobjects-live-counter/javascript/src/script.ts

@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;

examples/liveobjects-live-counter/javascript/tailwind.config.ts

@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 

examples/liveobjects-live-counter/javascript/vite-env.d.ts

@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });

examples/liveobjects-live-counter/javascript/vite.config.ts

@@ -12,12 +12,12 @@ LiveMaps are implemented using [Ably LiveObjects](https://ably.com/docs/liveobje
 
 Use the following methods to interact with a LiveMap in your application:
 
-* [`objects.getRoot()`](https://ably.com/docs/liveobjects) - retrieves the root object that serves as the starting point for storing and organizing objects on a channel.
-* [`objects.createMap()`](https://ably.com/docs/liveobjects) - creates a new LiveMap instance.
-* [`liveMap.get(key)`](https://ably.com/docs/liveobjects/livemap) - returns the current value associated with a given key in the map.
-* [`liveMap.set(key, value)`](https://ably.com/docs/liveobjects/livemap) - sends the operation message to the Ably system to assign a value to a key in the map.
-* [`liveMap.remove(key)`](https://ably.com/docs/liveobjects/livemap) - sends the operation message to the Ably system to remove a key from the map.
-* [`liveMap.subscribe()`](https://ably.com/docs/liveobjects/livemap) - subscribes to LiveMap updates by registering a listener.
+- [`objects.getRoot()`](https://ably.com/docs/liveobjects) - retrieves the root object that serves as the starting point for storing and organizing objects on a channel.
+- [`objects.createMap()`](https://ably.com/docs/liveobjects) - creates a new LiveMap instance.
+- [`liveMap.get(key)`](https://ably.com/docs/liveobjects/livemap) - returns the current value associated with a given key in the map.
+- [`liveMap.set(key, value)`](https://ably.com/docs/liveobjects/livemap) - sends the operation message to the Ably system to assign a value to a key in the map.
+- [`liveMap.remove(key)`](https://ably.com/docs/liveobjects/livemap) - sends the operation message to the Ably system to remove a key from the map.
+- [`liveMap.subscribe()`](https://ably.com/docs/liveobjects/livemap) - subscribes to LiveMap updates by registering a listener.
 
 Find out more about [LiveMap](https://ably.com/docs/liveobjects/livemap).
 
@@ -41,7 +41,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -59,4 +59,4 @@ yarn run liveobjects-live-map-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.

examples/liveobjects-live-map/javascript/README.md

@@ -6,7 +6,7 @@ import './styles.css';
 
 const client = new Realtime({
   clientId: nanoid(),
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  key: import.meta.env.VITE_ABLY_KEY as string,
   environment: 'sandbox',
   plugins: { Objects },
 });

examples/liveobjects-live-map/javascript/postcss.config.ts

@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;

examples/liveobjects-live-map/javascript/src/script.ts

@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 

examples/liveobjects-live-map/javascript/tailwind.config.ts

@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });