@uniformdev/uniform-nuxt 17.5.0 → 17.5.1-alpha.130

package/README.md

@@ -5,10 +5,12 @@
   - [Features](#features)
   - [API reference](#api-reference)
     - [Options](#options)
-    - [Injected in the Nuxt instance](#injected-in-the-nuxt-instance)
+    - [Auto-imported composables](#auto-imported-composables)
+      - [`useUniformComposition`](#useuniformcomposition)
     - [Components](#components)
-      - [\<Composition />](#composition-)
-      - [\<SlotContent />](#slotcontent-)
+      - [`<Composition />`](#composition-)
+      - [`<SlotContent />`](#slotcontent-)
+    - [Injected in the Nuxt instance](#injected-in-the-nuxt-instance)
   - [Examples](#examples)
 
 ## Getting started
@@ -64,31 +66,40 @@ These are the option you pass to the module in `nuxt.config.ts`.
 
 \* Required
 
-### Injected in the Nuxt instance
-These are the properties that the module injects in the Nuxt app instance, so you can use them anywhere in your app.
+### Auto-imported composables
+These are the composables that the module auto registers for you, so you can use them without import.
 
-| Property | Type | Description |
+#### `useUniformComposition`
+A Vue composable which takes care of fetching a composition and optionally enhancing it. The composable also takes care of enabling Contextual editing capability.
+It takes the following named arguments:
+
+| Named argument | Type | Description |
 |---|---|---|
-| `$useComposition` |  function | A Vue composable that you can use to fetch a Canvas composition. It's preview-aware, it will automatically fetch the draft composition if the app is in preview mode, otherwise it will return the published one. It uses Suspense under the hood, so you can have access to the error and pending states of the request |
-| `$useUniformContext` |  function | A Vue composable that returns the current Uniform Context instance which allows you interact with the context such updating the scores and so on. It also returns other provided properties such as `outputType` |
-| `$preview` |  object \| undefined | This object is only defined in preview mode, so you can use it to adjust your app if it's in preview mode. It contains the slug of the current composition. |
-| `$uniformCanvasClient` |  CanvasClient | Returns the Canvas client which you can use to fetch or update compositions. For composition fetching, it's recommended to use `$useComposition` instead. |
+| `enhance` |  function | A function to enhance the composition after fetching it. It passes the fetched composition as an argument and should return the enhanced composition. |
+| Parameters to get a composition |  - | The compasable allows passing any of the parameters allowed by [CanvasClient](https://docs.uniform.app/reference/packages/uniformdev-canvas#canvasclient)'s `getCompositionBy...` methods (e.g. `getCompositionById`, `getCompositionBySlug`, etc.) |
 
+Example:
+```js
+const { composition } = useUniformComposable({
+  slug: '/my-slug',
+  enhance: (c) => doSomething(c),
+});
+```
 
 ### Components
 These are the components that the module auto registers for you, so you can use them without import.
 
-#### \<Composition />
-This component wraps the whole composition, it 
+#### `<Composition />`
+This component wraps the whole composition, it accepts the following props: 
 
 | Prop | Type | Description |
 |---|---|---|
 | `data`* |  string | The data of the composition to be rendered, this is usually the `composition` object that you get from `$useComposition` |
-| `resolveRenderer` |  function | This function is responsible of mapping Canvas components to Vue components. It takes a `ComponentInstance` object and should return a Vue component (usually based on the component `type`). If no resolver is provided, it will try to resolve the component on the global context of the app, so if you have globally defined components, it will try to map them based on the `name` of the Vue component and the `type` of the Canvas component.|
+| `resolveRenderer` |  function | This function is responsible for mapping Canvas components to Vue components. It takes a `ComponentInstance` object and should return a Vue component (usually based on the component `type`). If no resolver is provided, it will try to resolve the component on the global context of the app, so if you have globally defined components, it will try to map them based on the `name` of the Vue component and the `type` of the Canvas component.|
 
 \* Required
 
-#### \<SlotContent />
+#### `<SlotContent />`
 This component is used to render the slots of a composition, and it can be only used inside a `<Composition />`.
 You can nest `<SlotContent />` inside each other if you have nested slots.
 
@@ -96,6 +107,15 @@ You can nest `<SlotContent />` inside each other if you have nested slots.
 |---|---|---|
 | `name` |  string | The name of the Canvas slot to render.<br>If no value is provided, all the slots will be rendered (this is not recommended as the order of the rendered slots is not guaranteed). |
 
+### Injected in the Nuxt instance
+These are the properties that the module injects in the Nuxt app instance, so you can use them anywhere in your app via `useNuxtApp()`.
+
+| Property | Type | Description |
+|---|---|---|
+| `$useUniformContext` |  function | A Vue composable that returns the current Uniform Context instance which allows you to interact with the context such updating the scores and so on. It also returns other provided properties such as `outputType` |
+| `$preview` |  object \| undefined | This object is only defined in preview mode, so you can use it to adjust your app if it's in preview mode. It contains the slug of the current composition. |
+| `$uniformCanvasClient` |  CanvasClient | Returns the Canvas client which you can use to fetch or update compositions. For composition fetching, it's recommended to use `$useComposition` instead. |
+
 ## Examples
 
 Here are some example where the module is used:

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-uniform",
   "configKey": "uniform",
-  "version": "17.5.0"
+  "version": "17.5.1-alpha.130+3fac779b1"
 }

package/dist/module.mjs

@@ -1,6 +1,6 @@
+import { defineNuxtModule, addTemplate, addPlugin, addImportsDir, resolveAlias, extendViteConfig } from '@nuxt/kit';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
-import { defineNuxtModule, addTemplate, addPlugin, resolveAlias, extendViteConfig } from '@nuxt/kit';
 
 const uniformContextProxyPath = "uniform/context/instance.ts";
 const module = defineNuxtModule({
@@ -40,6 +40,7 @@ const module = defineNuxtModule({
     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
     nuxt.options.build.transpile.push(runtimeDir);
     addPlugin(resolve(runtimeDir, "plugin"));
+    addImportsDir(resolve(runtimeDir, `./composables`));
   }
 });
 function resolveConfigFilePath(nuxt, filePath) {

package/dist/runtime/composables/useUniformComposable.d.ts

@@ -0,0 +1,76 @@
+import { type RootComponentInstance, type CompositionGetByNodePathParameters, type CompositionGetBySlugParameters, type CompositionGetByNodeIdParameters, type CompositionGetByIdParameters, type DataResolutionOption } from '@uniformdev/canvas';
+export declare const useUniformComposition: (options: (CompositionGetBySlugParameters | CompositionGetByIdParameters | CompositionGetByNodePathParameters | CompositionGetByNodeIdParameters) & DataResolutionOption & {
+    enhance?: ((composition: RootComponentInstance) => RootComponentInstance | Promise<RootComponentInstance>) | undefined;
+}) => Promise<{
+    composition: import("vue-demi").Ref<{
+        type: string;
+        parameters?: {
+            [key: string]: {
+                value: unknown;
+                type: string;
+                connectedData?: {
+                    pointer: string;
+                    syntax: "jptr";
+                    required?: boolean | undefined;
+                } | undefined;
+            };
+        } | undefined;
+        variant?: string | undefined;
+        slots?: {
+            [key: string]: {
+                type: string;
+                parameters?: {
+                    [key: string]: {
+                        value: unknown;
+                        type: string;
+                        connectedData?: {
+                            pointer: string;
+                            syntax: "jptr";
+                            required?: boolean | undefined;
+                        } | undefined;
+                    };
+                } | undefined;
+                variant?: string | undefined;
+                slots?: {
+                    [key: string]: any[];
+                } | undefined;
+                _id?: string | undefined;
+                _pattern?: string | undefined;
+                _dataResources?: {
+                    [key: string]: {
+                        type: string;
+                        isPatternParameter?: boolean | undefined;
+                        variables?: {
+                            [key: string]: string;
+                        } | undefined;
+                    };
+                } | undefined;
+                _patternDataResources?: {
+                    [key: string]: {
+                        type: string;
+                        isPatternParameter?: boolean | undefined;
+                        variables?: {
+                            [key: string]: string;
+                        } | undefined;
+                    };
+                } | undefined;
+                _patternError?: "NOTFOUND" | "CYCLIC" | undefined;
+            }[];
+        } | undefined;
+        _id: string;
+        _slug?: string | null | undefined;
+        _name: string;
+        _dataResources?: {
+            [key: string]: {
+                type: string;
+                isPatternParameter?: boolean | undefined;
+                variables?: {
+                    [key: string]: string;
+                } | undefined;
+            };
+        } | undefined;
+    } | undefined>;
+    fullResponse: any;
+    pending: any;
+    error: any;
+}>;

package/dist/runtime/composables/useUniformComposable.mjs

@@ -0,0 +1,65 @@
+import { useAsyncData, useNuxtApp } from "#app";
+import { watch, ref, toRaw } from "vue-demi";
+import {
+  CANVAS_DRAFT_STATE,
+  CANVAS_PUBLISHED_STATE
+} from "@uniformdev/canvas";
+import { useContextualEditing } from "@uniformdev/canvas-vue";
+export const useUniformComposition = async (options) => {
+  const { enhance = (c) => c, ...parameters } = options;
+  const { $uniformCanvasClient, $preview: preview } = useNuxtApp();
+  const canvasClient = $uniformCanvasClient;
+  const activeComposition = ref(void 0);
+  const { composition: contextualEditingComposition } = useContextualEditing({
+    initialCompositionValue: void 0
+  });
+  watch(
+    [contextualEditingComposition],
+    async () => {
+      if (!contextualEditingComposition.value) {
+        return;
+      }
+      const composition = toRaw(contextualEditingComposition.value);
+      activeComposition.value = await enhance(composition);
+    },
+    { deep: true }
+  );
+  const { data, pending, error } = await useAsyncData(
+    `composition-${JSON.stringify(parameters)}`,
+    async () => {
+      const state = preview ? CANVAS_DRAFT_STATE : CANVAS_PUBLISHED_STATE;
+      if ("slug" in parameters) {
+        const slug = parameters.slug;
+        return await canvasClient.getCompositionBySlug({
+          ...parameters,
+          slug,
+          state
+        });
+      } else if ("compositionId" in parameters) {
+        const compositionId = parameters.compositionId;
+        return await canvasClient.getCompositionById({
+          ...parameters,
+          compositionId,
+          state
+        });
+      } else if ("projectMapNodeId" in parameters) {
+        return await canvasClient.unstable_getCompositionByNodeId({
+          ...parameters,
+          state
+        });
+      } else if ("projectMapNodePath" in parameters) {
+        return await canvasClient.unstable_getCompositionByNodePath({
+          ...parameters,
+          state
+        });
+      }
+    }
+  );
+  activeComposition.value = data.value?.composition ? await enhance(data.value.composition) : void 0;
+  return {
+    composition: activeComposition,
+    fullResponse: data.value,
+    pending,
+    error
+  };
+};

package/dist/runtime/plugin.mjs

@@ -1,34 +1,37 @@
 import {
-  defineNuxtPlugin,
-  useRoute,
-  useRouter,
-  useRuntimeConfig,
-  useHead,
-  refreshNuxtData,
-  useAsyncData,
-  useState,
-  useCookie
-} from "#app";
-import userProvidedContextInstance from "#build/uniform/context/instance";
-import { watch, toRaw } from "vue-demi";
-import {
-  CanvasClient,
   CANVAS_DRAFT_STATE,
-  CANVAS_PUBLISHED_STATE
+  CANVAS_PUBLISHED_STATE,
+  CanvasClient
 } from "@uniformdev/canvas";
+import { Composition, SlotContent, useCompositionEventEffect } from "@uniformdev/canvas-vue";
 import {
   Context,
-  SERVER_STATE_ID,
   CookieTransitionDataStore,
   enableContextDevTools,
+  SERVER_STATE_ID,
   UNIFORM_DEFAULT_COOKIE_NAME
 } from "@uniformdev/context";
-import { Composition, SlotContent, useCompositionEventEffect } from "@uniformdev/canvas-vue";
 import {
-  provideUniformContext,
   onRouteChange,
+  provideUniformContext,
   useUniformContext
 } from "@uniformdev/context-vue";
+import { toRaw, watch } from "vue-demi";
+import {
+  defineNuxtPlugin,
+  navigateTo,
+  refreshNuxtData,
+  useAsyncData,
+  useCookie,
+  useHead,
+  useRoute,
+  useRouter,
+  useRuntimeConfig,
+  useState
+} from "#app";
+import userProvidedContextInstance from "#build/uniform/context/instance";
+const log = process.env.NODE_ENV === "development" ? (...args) => console.log(...args) : () => {
+};
 export default defineNuxtPlugin((nuxtApp) => {
   if (nuxtApp.$uniformIsSetup) {
     return;
@@ -64,7 +67,7 @@ function setupContext(nuxtApp) {
     );
   }
   if (!uniformContext && options.manifest) {
-    console.log("uniform-nuxt: \u{1F4DC} found a manifest, will initialize Context");
+    log("uniform-nuxt: \u{1F4DC} found a manifest, will initialize Context");
     const manifestAsSimpleObject = toRaw(options.manifest);
     uniformContext = new Context({
       defaultConsent: Boolean(options.defaultConsent),
@@ -116,12 +119,22 @@ function setupPreview() {
   const route = useRoute();
   let preview;
   if (route.query.preview === "true") {
-    console.log("uniform-nuxt: \u{1F575}\uFE0F Entering preview mode");
+    log("uniform-nuxt: \u{1F575}\uFE0F Entering preview mode");
     preview = {
       slug: route.query.slug,
       compositionId: route.query.id
     };
   }
+  if (preview && route.query.redirectedForPreview !== "true") {
+    navigateTo({
+      path: preview.slug,
+      query: {
+        ...route.query,
+        redirectedForPreview: "true"
+      },
+      replace: true
+    });
+  }
   router.beforeEach((to, from, next) => {
     if (!next) {
       return;
@@ -161,8 +174,12 @@ function setupUseComposition(uniformCanvasClient, currentCompositionId, preview)
     const { data, pending, error } = await useAsyncData(`composition-${slug || compositionId}`, async () => {
       if (slug) {
         return await uniformCanvasClient.getCompositionBySlug({ slug, state });
+      } else if (compositionId) {
+        return await uniformCanvasClient.getCompositionById({ compositionId, state });
       }
-      return await uniformCanvasClient.getCompositionById({ compositionId, state });
+      log(
+        "uniform-nuxt: `useComposition` requires either a `slug` or a `compositionId`, but none were provided."
+      );
     });
     currentCompositionId.value = data.value?.composition._id ?? "";
     return { data, pending, error };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/uniform-nuxt",
-  "version": "17.5.0",
+  "version": "17.5.1-alpha.130+3fac779b1",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -22,7 +22,7 @@
     "format": "prettier --write \"src/**/*.{js,ts,tsx}\""
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.9",
+    "@nuxt/kit": "3.0.0",
     "vue-demi": "^0.13.11"
   },
   "peerDependencies": {
@@ -32,21 +32,21 @@
     "@uniformdev/context-vue": ">15"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "0.2.0",
-    "@nuxt/schema": "3.0.0-rc.9",
+    "@nuxt/module-builder": "0.2.1",
+    "@nuxt/schema": "3.0.0",
     "@nuxtjs/eslint-config-typescript": "11.0.0",
-    "@uniformdev/canvas": "^17.5.0",
-    "@uniformdev/canvas-vue": "^17.5.0",
-    "@uniformdev/context": "^17.5.0",
-    "@uniformdev/context-vue": "^17.5.0",
-    "esbuild": "0.15.13",
+    "@uniformdev/canvas": "^17.5.1-alpha.130+3fac779b1",
+    "@uniformdev/canvas-vue": "^17.5.1-alpha.130+3fac779b1",
+    "@uniformdev/context": "^17.5.1-alpha.130+3fac779b1",
+    "@uniformdev/context-vue": "^17.5.1-alpha.130+3fac779b1",
+    "esbuild": "0.15.15",
     "eslint": "latest",
-    "nuxt": "3.0.0-rc.9",
-    "vue": "3.2.39",
+    "nuxt": "3.0.0",
+    "vue": "3.2.45",
     "vue-router": "4.1.5"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "de1f52defe798010336e1dd3b2732fce359855fb"
+  "gitHead": "3fac779b1b42a1afeb05156cb51768a98573438f"
 }