sanity-plugin-iframe-pane 2.3.1 → 2.3.2-canary.2

package/src/is-valid-secret.ts

@@ -0,0 +1,2 @@
+export type * from './isValidSecret'
+export {isValidSecret} from './isValidSecret'

package/src/isValidSecret.tsx

@@ -0,0 +1,67 @@
+import {name} from '../package.json'
+
+export type UrlSecretId = `${string}.${string}`
+
+// updated within the hour, if it's older it'll create a new secret or return null
+export const SECRET_TTL = 60 * 60
+
+export const fetchSecretQuery = /* groq */ `*[_id == $id && dateTime(_updatedAt) > dateTime(now()) - ${SECRET_TTL}][0]{secret, _updatedAt}`
+export type FetchSecretResponse = {
+  secret: string | null
+  _updatedAt: string | null
+} | null
+
+export const tag = name
+
+export const apiVersion = '2023-08-08'
+
+export type SanityClientLike = {
+  config(): {token?: string}
+  withConfig(config: {apiVersion?: string; useCdn?: boolean; perspective: 'raw'}): SanityClientLike
+  fetch<
+    R,
+    Q = {
+      [key: string]: any
+    },
+  >(
+    query: string,
+    params: Q,
+    options: {tag?: string},
+  ): Promise<R>
+}
+export async function isValidSecret(
+  client: SanityClientLike,
+  urlSecretId: UrlSecretId,
+  urlSecret: string,
+): Promise<boolean> {
+  if (!urlSecret) {
+    throw new TypeError('`urlSecret` is required')
+  }
+  if (!urlSecretId) {
+    throw new TypeError('`urlSecretId` is required')
+  }
+  if (!urlSecretId.includes('.')) {
+    throw new TypeError(
+      `\`urlSecretId\` must have a dot prefix, \`${urlSecretId}\` is not secure, add a prefix, for example \`preview.${urlSecretId}\` `,
+    )
+  }
+  if (!client) {
+    throw new TypeError('`client` is required')
+  }
+  if (!client.config().token) {
+    throw new TypeError('`client` must have a `token` specified')
+  }
+
+  const customClient = client.withConfig({
+    apiVersion,
+    useCdn: false,
+    perspective: 'raw',
+  })
+  const data = await customClient.fetch<FetchSecretResponse>(
+    fetchSecretQuery,
+    {id: urlSecretId},
+    {tag},
+  )
+
+  return data?.secret === urlSecret
+}

package/src/preview-url.ts

@@ -0,0 +1,2 @@
+export type * from './previewUrl'
+export {previewUrl} from './previewUrl'

package/src/previewUrl.ts

@@ -0,0 +1,62 @@
+/**
+ * This plugin sets up the "Open preview (CTRL + ALT + O)" in the dropdown menu that hosts
+ * other actions like "Review changes" and "Inspect"
+ */
+
+import {definePlugin} from 'sanity'
+
+import {defineUrlResolver, DefineUrlResolverOptions} from './defineUrlResolver'
+import {
+  apiVersion,
+  fetchSecretQuery,
+  FetchSecretResponse,
+  tag,
+  type UrlSecretId,
+} from './isValidSecret'
+import {MissingSlug} from './types'
+import {patchUrlSecret} from './utils'
+
+export type {DefineUrlResolverOptions, UrlSecretId}
+
+export interface ProductionUrlOptions extends DefineUrlResolverOptions {
+  matchTypes?: string[]
+  urlSecretId?: UrlSecretId
+}
+
+export const previewUrl = definePlugin<ProductionUrlOptions>(
+  ({urlSecretId, base, matchTypes, requiresSlug}) => {
+    if (!base) {
+      throw new TypeError('`base` is required')
+    }
+
+    const urlResolver = defineUrlResolver({base, requiresSlug})
+    return {
+      name: 'previewUrl',
+      document: {
+        productionUrl: async (prev, {document, getClient}) => {
+          if (matchTypes?.length && !matchTypes.includes(document._type)) {
+            return prev
+          }
+
+          let urlSecret: string | null = null
+          if (urlSecretId) {
+            const client = getClient({apiVersion})
+            const data = await client.fetch<FetchSecretResponse>(
+              fetchSecretQuery,
+              {id: urlSecretId},
+              {tag},
+            )
+            urlSecret = data?.secret ? data.secret : await patchUrlSecret(client, urlSecretId)
+          }
+
+          const url = urlResolver(document, urlSecret)
+          if (url) {
+            return url === MissingSlug ? prev : url
+          }
+
+          return prev
+        },
+      },
+    }
+  },
+)

package/src/types.ts

@@ -0,0 +1,17 @@
+export const MissingSlug = Symbol('MissingSlug')
+
+export type UrlState = string | typeof MissingSlug
+
+export type IframeSizeKey = keyof SizeProps
+
+export type Size = 'desktop' | 'mobile'
+
+export type SizeProps = {
+  // eslint-disable-next-line no-unused-vars
+  [key in Size]: {
+    width: string | number
+    height: string | number
+  }
+}
+
+export type SetError = (error: unknown) => void

package/src/utils.ts

@@ -0,0 +1,45 @@
+import type {SanityClient} from 'sanity'
+
+import {SECRET_TTL, tag, UrlSecretId} from './isValidSecret'
+
+export function getExpiresAt(_updatedAt: Date) {
+  return new Date(_updatedAt.getTime() + 1000 * SECRET_TTL)
+}
+
+function generateUrlSecret() {
+  // Try using WebCrypto if available
+  if (typeof crypto !== 'undefined') {
+    // Generate a random array of 16 bytes
+    const array = new Uint8Array(16)
+    crypto.getRandomValues(array)
+
+    // Convert the array to a URL-safe string
+    let key = ''
+    for (let i = 0; i < array.length; i++) {
+      // Convert each byte to a 2-digit hexadecimal number
+      key += array[i].toString(16).padStart(2, '0')
+    }
+
+    // Replace '+' and '/' from base64url to '-' and '_'
+    key = btoa(key).replace(/\+/g, '-').replace(/\//g, '_').replace(/[=]+$/, '')
+
+    return key
+  }
+  // If not fallback to Math.random
+  return Math.random().toString(36).slice(2)
+}
+
+export async function patchUrlSecret(
+  client: SanityClient,
+  urlSecretId: UrlSecretId,
+  signal?: AbortSignal,
+): Promise<string> {
+  const newSecret = generateUrlSecret()
+  const patch = client.patch(urlSecretId).set({secret: newSecret})
+  await client
+    .transaction()
+    .createIfNotExists({_id: urlSecretId, _type: urlSecretId})
+    .patch(patch)
+    .commit({tag, signal})
+  return newSecret
+}