FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(sanity): align preview kit with v6.2.0 by osnoser1 · Pull Request #43 · limitless-angular/limitless-angular · GitHub

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension .json  (2) .md  (1) .ts  (19) .yaml  (1) All 4 file types selected
Only manifest files
Deleted files Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import {
computed,
input,
} from '@angular/core';
import { EMPTY } from 'rxjs';
import { EMPTY, Observable } from 'rxjs';
import {
type ContentSourceMap,
type InitializedClientConfig,
type LiveEvent,
type QueryParams,
type SanityClient,
type SanityDocument,
type SyncTag,
} from '@sanity/client';
import { createDataAttribute } from '@limitless-angular/sanity/visual-editing';

Expand All @@ -36,10 +38,13 @@ const documentId = 'presentation-smoke-post';
const initialTitle = 'Initial presentation smoke title';
const liveTitle = 'Live presentation smoke title';
const presentationSmokeQuery = '*[_id == $id][0]{title}';
const presentationSmokeSyncTag = 's1:presentation-smoke-post' satisfies SyncTag;

type PresentationSmokeWindow = Window & {
__presentationSmokeBootCount?: number;
__presentationSmokeFetchCount?: number;
__presentationSmokeEmitLiveEvent?: () => void;
__presentationSmokeLiveEventId?: number;
__presentationSmokePerspective?: unknown;
__presentationSmokeTitle?: string;
};
Expand Down Expand Up @@ -77,6 +82,7 @@ const fakeClient = {
return {
result: { title: getPresentationSmokeTitle() },
resultSourceMap: sourceMap,
syncTags: [presentationSmokeSyncTag],
};
},
getDocuments: async (ids: string[]) =>
Expand All @@ -92,6 +98,35 @@ const fakeClient = {
}) as SanityDocument,
),
listen: () => EMPTY,
live: {
events: () =>
new Observable<LiveEvent>((observer) => {
observer.next({ type: 'welcome' });

const smokeWindow = getPresentationSmokeWindow();
if (!smokeWindow) {
return undefined;
}

const emitLiveEvent = () => {
smokeWindow.__presentationSmokeLiveEventId =
(smokeWindow.__presentationSmokeLiveEventId ?? 0) + 1;
observer.next({
type: 'message',
id: `presentation-smoke-${smokeWindow.__presentationSmokeLiveEventId}`,
tags: [presentationSmokeSyncTag],
});
};

smokeWindow.__presentationSmokeEmitLiveEvent = emitLiveEvent;

return () => {
if (smokeWindow.__presentationSmokeEmitLiveEvent === emitLiveEvent) {
delete smokeWindow.__presentationSmokeEmitLiveEvent;
}
};
}),
},
} as unknown as SanityClient;

function getSmokeClient(): SanityClient {
Expand Down
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ type ProtocolMessage = {

type PresentationSmokeFrameState = {
__presentationSmokeBootCount?: number;
__presentationSmokeEmitLiveEvent?: () => void;
__presentationSmokeFetchCount?: number;
__presentationSmokePerspective?: unknown;
__presentationSmokeTitle?: string;
Expand Down Expand Up @@ -229,9 +230,9 @@ async function getFrameState(

async function setFrameTitle(frame: Frame, title: string): Promise<void> {
await frame.evaluate((nextTitle) => {
(
window as unknown as PresentationSmokeFrameState
).__presentationSmokeTitle = nextTitle;
const smokeWindow = window as unknown as PresentationSmokeFrameState;
smokeWindow.__presentationSmokeTitle = nextTitle;
smokeWindow.__presentationSmokeEmitLiveEvent?.();
}, title);
}

Expand Down
2 changes: 0 additions & 2 deletions packages/sanity/ng-package.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
"@vercel/stega",
"dequal",
"lodash-es",
"lru-cache",
"mendoza",
"xstate"
]
}
2 changes: 0 additions & 2 deletions packages/sanity/package.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,6 @@
"@vercel/stega": "1.1.0",
"dequal": "^2.0.3",
"lodash-es": "^4.17.21",
"lru-cache": "^11.0.0",
"mendoza": "3.0.8",
"tslib": "^2.3.0",
"xstate": "^5.19.2"
},
Expand Down
16 changes: 8 additions & 8 deletions packages/sanity/preview-kit/README.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

Secondary entry point of `@limitless-angular/sanity`. It can be used by importing from `@limitless-angular/sanity/preview-kit`.

Based on [Preview Kit v5.1.0](https://github.com/sanity-io/preview-kit/blob/main/packages/preview-kit/CHANGELOG.md#510-2024-05-30)
Based on [Preview Kit v6.2.0](https://github.com/sanity-io/preview-kit/tree/v6.2.0/packages/preview-kit)

## Table of Contents

Expand All @@ -20,7 +20,7 @@ Based on [Preview Kit v5.1.0](https://github.com/sanity-io/preview-kit/blob/main

## Overview

The preview-kit provides real-time preview capabilities for Sanity content in Angular applications. It enables live updates of content as it's being edited in the Sanity Studio.
The preview-kit provides real-time preview capabilities for Sanity content in Angular applications. It uses the Sanity Live Content API to enable live updates of content as it's being edited in the Sanity Studio.

## Installation

Expand Down Expand Up @@ -194,7 +194,7 @@ This pattern ensures that:

### Live Preview Refresh Interval

You can configure the refresh interval using the `withLivePreview` feature in your providers:
Preview Kit v6 uses the Sanity Live Content API and no longer polls. The `refreshInterval` option and `LIVE_PREVIEW_REFRESH_INTERVAL` token are deprecated no-ops kept for compatibility with existing Angular applications.

```typescript
import { provideSanity, withLivePreview } from '@limitless-angular/sanity';
Expand All @@ -203,7 +203,7 @@ import { provideSanity, withLivePreview } from '@limitless-angular/sanity';
providers: [
provideSanity(
yourSanityFactory,
withLivePreview({ refreshInterval: 5000 }), // Default is 10000ms
withLivePreview({ refreshInterval: 5000 }), // Deprecated no-op
),
],
})
Expand All @@ -218,7 +218,8 @@ A component that provides the live preview context to its children.

**Inputs:**

- `token: string` - The Sanity preview token (required)
- `token: string` - Optional Sanity preview token. When provided, the client is reconfigured with preview defaults.
- `logger: Logger` - Optional console-compatible logger.
- `perspective: Exclude<ClientPerspective, 'raw'>` - The Sanity client perspective to use for live queries. Defaults to `'drafts'`; Presentation Tool perspective changes take precedence when present.

### createLiveData
Expand Down Expand Up @@ -291,12 +292,11 @@ const liveData = createLiveData(

## Integration with Visual Editing

- The preview-kit provides real-time preview capabilities for Sanity content in Angular applications. It enables live updates of content as it's being edited in the Sanity Studio.
- The preview-kit provides real-time preview capabilities for Sanity content in Angular applications through the Sanity Live Content API.

## Notes

- The preview-kit requires a valid Sanity preview token to function
- Live updates that include drafts require either a preview token or a Sanity client configured with credentials.
- Live updates only work in browser environments
- Cross-dataset references are not currently supported

[analog]: https://analogjs.org/
18 changes: 12 additions & 6 deletions packages/sanity/preview-kit/src/create-live-data.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,17 @@ import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { combineLatest, type Observable, startWith, switchMap } from 'rxjs';
import { map } from 'rxjs/operators';
import { LivePreviewService } from './live-preview.service';
import type { LiveQueryConfig } from './types';

type QueryConfig = { query: string; params?: Record<string, unknown> };

type QueriesConfig<T> = { [K in keyof T]?: QueryConfig };
type QueriesConfig<T> = { [K in keyof T]?: LiveQueryConfig };
type LiveDataState<T> = { value: T } | typeof NO_VALUE;

const NO_VALUE = Symbol('NO_VALUE');

// Single query overload
export function createLiveData<T>(
initialData: () => T,
queries: () => QueryConfig,
queries: () => LiveQueryConfig,
): Signal<T>;

// Multiple queries overload
Expand All @@ -27,7 +26,7 @@ export function createLiveData<
// Implementation
export function createLiveData<T>(
initialData: () => T,
queries: () => QueryConfig | QueriesConfig<T>,
queries: () => LiveQueryConfig | QueriesConfig<T>,
): Signal<T> {
const livePreviewService = inject(LivePreviewService);
const config = computed(() => ({
Expand All @@ -40,7 +39,12 @@ export function createLiveData<T>(
switchMap(({ initial, queryConfig }) => {
if ('query' in queryConfig) {
return livePreviewService
.listenLiveQuery(initial, queryConfig.query, queryConfig.params)
.listenLiveQuery(
initial,
queryConfig.query,
queryConfig.params,
queryConfig.perspective ?? null,
)
.pipe(startWith(initial));
}

Expand All @@ -54,6 +58,8 @@ export function createLiveData<T>(
config!.query,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
config!.params,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
config!.perspective ?? null,
);
return acc;
},
Expand Down
10 changes: 9 additions & 1 deletion packages/sanity/preview-kit/src/index.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
export { LivePreviewService } from './live-preview.service';
export { LiveQueryProviderComponent } from './live-query-provider.component';
export {
/**
* Re-export to make `LiveQueryProviderComponent` easier to use with dynamic imports.
* @public
*/
LiveQueryProviderComponent as default,
LiveQueryProviderComponent,
} from './live-query-provider.component';
export { createLiveData } from './create-live-data';
export * from './tokens';
export type * from './types';
Loading
Loading

Back | FazBrowse Home | New Git URL