@graffiti-garden/wrapper-vue 0.7.1 → 1.0.3

package/src/globals.ts

@@ -2,11 +2,33 @@ import type { Ref } from "vue";
 import type { Graffiti, GraffitiSession } from "@graffiti-garden/api";
 import type { GraffitiSynchronize } from "@graffiti-garden/wrapper-synchronize";
 
-export const globals: {
+const globals: {
   graffitiSynchronize?: GraffitiSynchronize;
   graffitiSession?: Ref<GraffitiSession | undefined | null>;
 } = {};
 
+export function setGraffitiSession(
+  session: Ref<GraffitiSession | undefined | null>,
+) {
+  if (!globals.graffitiSession) {
+    globals.graffitiSession = session;
+  } else {
+    throw new Error(
+      "Graffiti session already set - plugin installed multiple times?",
+    );
+  }
+}
+
+export function setGraffitiSynchronize(synchronize: GraffitiSynchronize) {
+  if (!globals.graffitiSynchronize) {
+    globals.graffitiSynchronize = synchronize;
+  } else {
+    throw new Error(
+      "Graffiti synchronize already set - plugin installed multiple times?",
+    );
+  }
+}
+
 /**
  * Returns the global [Graffiti](https://api.graffiti.garden/classes/Graffiti.html) instance
  * that has been wrapped by the {@link GraffitiPlugin} with the [GraffitiSynchronize](https://sync.graffiti.garden/classes/GraffitiSynchronize.html).
@@ -26,7 +48,7 @@ export function useGraffitiSynchronize() {
  * Returns the global [Graffiti](https://api.graffiti.garden/classes/Graffiti.html) instance.
  *
  * In Vue templates and the [options API](https://vuejs.org/guide/introduction.html#options-api)
- * use the global variable {@link ComponentCustomProperties.$graffiti | $graffiti} instead.
+ * use may use the global variable {@link ComponentCustomProperties.$graffiti | $graffiti} instead.
  *
  * This is the same Graffiti registered with the {@link GraffitiPlugin}
  * via {@link GraffitiPluginOptions.graffiti}, only it has been wrapped

package/src/plugin.ts

@@ -1,8 +1,11 @@
 import type { App, Plugin, Ref } from "vue";
 import { ref } from "vue";
-import Discover from "./Discover.vue";
-import Get from "./Get.vue";
-import RecoverOrphans from "./RecoverOrphans.vue";
+import Discover from "./components/Discover.vue";
+import Get from "./components/Get.vue";
+import GetMedia from "./components/GetMedia.vue";
+import ActorToHandle from "./components/ActorToHandle.vue";
+import HandleToActor from "./components/HandleToActor.vue";
+import ObjectInfo from "./components/ObjectInfo.vue";
 import type {
   Graffiti,
   GraffitiSession,
@@ -10,7 +13,7 @@ import type {
   GraffitiLogoutEvent,
   GraffitiSessionInitializedEvent,
 } from "@graffiti-garden/api";
-import { globals } from "./globals";
+import { setGraffitiSession, setGraffitiSynchronize } from "./globals";
 import type { Router } from "vue-router";
 import { GraffitiSynchronize } from "@graffiti-garden/wrapper-synchronize";
 
@@ -49,7 +52,10 @@ declare module "vue" {
   export interface GlobalComponents {
     GraffitiDiscover: typeof Discover;
     GraffitiGet: typeof Get;
-    GraffitiRecoverOrphans: typeof RecoverOrphans;
+    GraffitiGetMedia: typeof GetMedia;
+    GraffitiActorToHandle: typeof ActorToHandle;
+    GraffitiHandleToActor: typeof HandleToActor;
+    GraffitiObjectInfo: typeof ObjectInfo;
   }
 }
 export type { ComponentCustomProperties } from "vue";
@@ -66,10 +72,6 @@ export interface GraffitiPluginOptions {
    * and in setup functions as {@link useGraffiti}.
    * You must interact with Graffiti through these wrapped instances
    * to enable reactivity.
-   *
-   * You'll likely want to use the [federated implementation](https://github.com/graffiti-garden/implementation-federated).
-   * However, you could also use the [local implementation](https://github.com/graffiti-garden/implementation-local)
-   * for testing. Other implementations may be available in the future.
    */
   graffiti: Graffiti;
 }
@@ -90,19 +92,27 @@ export interface GraffitiPluginOptions {
  * | --- | --- | --- |
  * | [discover](https://api.graffiti.garden/classes/Graffiti.html#discover) | {@link useGraffitiDiscover} | {@link GraffitiDiscover} |
  * | [get](https://api.graffiti.garden/classes/Graffiti.html#get) | {@link useGraffitiGet} | {@link GraffitiGet} |
- * | [recoverOrphans](https://api.graffiti.garden/classes/Graffiti.html#recoverorphans) | {@link useGraffitiRecoverOrphans} | {@link GraffitiRecoverOrphans} |
+ * | [getMedia](https://api.graffiti.garden/classes/Graffiti.html#getmedia) | {@link useGraffitiGetMedia} | {@link GraffitiGetMedia} |
+ * | [actorToHandle](https://api.graffiti.garden/classes/Graffiti.html#actortohandle) | {@link useGraffitiActorToHandle} | {@link GraffitiActorToHandle} |
+ * | [handleToActor](https://api.graffiti.garden/classes/Graffiti.html#handletoactor) | {@link useGraffitiHandleToActor} | {@link GraffitiHandleToActor} |
  *
  * The plugin also exposes a global [Graffiti](https://api.graffiti.garden/classes/Graffiti.html) instance
  * and keeps track of the global [GraffitiSession](https://api.graffiti.garden/interfaces/GraffitiSession.html)
  * state as a reactive variable.
  * They are available in templates as global variables or in setup functions as
- * composable functions.
+ * getter functions.
  *
- * | Global variabale | [Composable](https://vuejs.org/guide/reusability/composables.html) |
+ * | Global variabale | Getter |
  * | --- | --- |
  * | {@link ComponentCustomProperties.$graffiti | $graffiti } | {@link useGraffiti} |
  * | {@link ComponentCustomProperties.$graffitiSession | $graffitiSession } | {@link useGraffitiSession} |
  *
+ * Finally, the plugin exposes an additional component, {@link GraffitiObjectInfo}
+ * that can be use to generically display a Graffiti object for debugging purposes.
+ * {@link GraffitiDiscover} and {@link GraffitiGet} show this output as
+ * [fallback content](https://vuejs.org/guide/components/slots.html#fallback-content)
+ * if no template is provided
+ *
  * [See the README for installation instructions](/).
  *
  * You can [try out live examples](/examples/), but basic usage looks like this:
@@ -124,7 +134,7 @@ export interface GraffitiPluginOptions {
  * <template>
  *   <button
  *     v-if="$graffitiSession.value"
- *     @click="$graffiti.put({
+ *     @click="$graffiti.post({
  *       value: { content: 'Hello, world!' },
  *       channels: [ 'my-channel' ]
  *     }, $graffitiSession.value)"
@@ -136,7 +146,7 @@ export interface GraffitiPluginOptions {
  *   </button>
  *
  *   <GraffitiDiscover
- *     v-slot="{ results }"
+ *     v-slot="{ objects }"
  *     :channels="[ 'my-channel' ]"
  *     :schema="{
  *       properties: {
@@ -151,10 +161,10 @@ export interface GraffitiPluginOptions {
  *   >
  *     <ul>
  *       <li
- *         v-for="result in results"
- *         :key="$graffiti.objectToUri(result)"
+ *         v-for="object in objects"
+ *         :key="object.url"
  *       >
- *         {{ result.value.content }}
+ *         {{ object.value.content }}
  *       </li>
  *     </ul>
  *   </GraffitiDiscover>
@@ -214,18 +224,25 @@ export const GraffitiPlugin: Plugin<GraffitiPluginOptions> = {
       }
     });
 
-    globals.graffitiSynchronize = graffiti;
-    globals.graffitiSession = graffitiSession;
+    setGraffitiSynchronize(graffiti);
+    setGraffitiSession(graffitiSession);
 
     app.component("GraffitiDiscover", Discover);
     app.component("GraffitiGet", Get);
-    app.component("GraffitiRecoverOrphans", RecoverOrphans);
+    app.component("GraffitiGetMedia", GetMedia);
+    app.component("GraffitiActorToHandle", ActorToHandle);
+    app.component("GraffitiHandleToActor", HandleToActor);
+    app.component("GraffitiObjectInfo", ObjectInfo);
     app.config.globalProperties.$graffiti = graffiti;
     app.config.globalProperties.$graffitiSession = graffitiSession;
   },
 };
 
-export * from "./composables";
+export { useGraffitiActorToHandle } from "./composables/actor-to-handle";
+export { useGraffitiHandleToActor } from "./composables/handle-to-actor";
+export { useGraffitiDiscover } from "./composables/discover";
+export { useGraffitiGet } from "./composables/get";
+export { useGraffitiGetMedia } from "./composables/get-media";
 export {
   useGraffiti,
   useGraffitiSynchronize,
@@ -237,8 +254,11 @@ export {
  * method as a reactive [renderless component](https://vuejs.org/guide/components/slots#renderless-components)
  * for use in Vue templates.
  *
- * Its props and slots are identical to the arguments and return values of
- * the composable {@link useGraffitiDiscover}.
+ * Its props and [slots props](https://vuejs.org/guide/components/slots.html#scoped-slots)
+ * are identical to the arguments and return values of
+ * the composable {@link useGraffitiDiscover}. If no template is provided to
+ * the default slot, [fallback content](https://vuejs.org/guide/components/slots.html#fallback-content)
+ * will display the objects using {@link GraffitiObjectInfo} for debugging.
  */
 export const GraffitiDiscover = Discover;
 /**
@@ -246,16 +266,51 @@ export const GraffitiDiscover = Discover;
  * method as a reactive [renderless component](https://vuejs.org/guide/components/slots#renderless-components)
  * for use in Vue templates.
  *
- * Its props and slots are identical to the arguments and return values of
- * the composable {@link useGraffitiGet}.
+ * Its props and [slots props](https://vuejs.org/guide/components/slots.html#scoped-slots)
+ * are identical to the arguments and return values of
+ * the composable {@link useGraffitiGet}. If no template is provided to
+ * the default slot, [fallback content](https://vuejs.org/guide/components/slots.html#fallback-content)
+ * will display the object using {@link GraffitiObjectInfo} for debugging.
  */
 export const GraffitiGet = Get;
 /**
- * The [Graffiti.recoverOrphans](https://api.graffiti.garden/classes/Graffiti.html#recoverorphans)
+ * The [Graffiti.getMedia](https://api.graffiti.garden/classes/Graffiti.html#getmedia)
  * method as a reactive [renderless component](https://vuejs.org/guide/components/slots#renderless-components)
  * for use in Vue templates.
  *
- * Its props and slots are identical to the arguments and return values of
- * the composable {@link useGraffitiRecoverOrphans}.
+ * Its props and [slots props](https://vuejs.org/guide/components/slots.html#scoped-slots)
+ * are identical to the arguments and return values of
+ * the composable {@link useGraffitiGetMedia}. If no template is provided to
+ * the default slot, [fallback content](https://vuejs.org/guide/components/slots.html#fallback-content)
+ * will display the media in an appropriate container based on its media type.
+ */
+export const GraffitiGetMedia = GetMedia;
+/**
+ * The [Graffiti.actorToHandle](https://api.graffiti.garden/classes/Graffiti.html#actortohandle)
+ * method as a reactive [renderless component](https://vuejs.org/guide/components/slots#renderless-components)
+ * for use in Vue templates.
+ *
+ * Its props and [slots props](https://vuejs.org/guide/components/slots.html#scoped-slots)
+ * are identical to the arguments and return values of
+ * the composable {@link useGraffitiActorToHandle}. If no template is provided to
+ * the default slot, [fallback content](https://vuejs.org/guide/components/slots.html#fallback-content)
+ * will display the actor's handle.
+ */
+export const GraffitiActorToHandle = ActorToHandle;
+/**
+ * The [Graffiti.handleToActor](https://api.graffiti.garden/classes/Graffiti.html#handletoactor)
+ * method as a reactive [renderless component](https://vuejs.org/guide/components/slots#renderless-components)
+ * for use in Vue templates.
+ *
+ * Its props and [slots props](https://vuejs.org/guide/components/slots.html#scoped-slots)
+ * are identical to the arguments and return values of
+ * the composable {@link useGraffitiHandleToActor}. If no template is provided to
+ * the default slot, [fallback content](https://vuejs.org/guide/components/slots.html#fallback-content)
+ * will display the actor DID.
+ */
+export const GraffitiHandleToActor = HandleToActor;
+/**
+ * Displays a Graffiti object and all of its properties for
+ * debugging purposes.
  */
-export const GraffitiRecoverOrphans = RecoverOrphans;
+export const GraffitiObjectInfo = ObjectInfo;