Skip to content

Commit

Permalink
feat(adapter-sveltekit): support previews (DT-1678,#1173)
Browse files Browse the repository at this point in the history
  • Loading branch information
@angeloashmore
angeloashmore authored Oct 25, 2023
1 parent 6b59039 commit b4417a6
Show file tree
Hide file tree
Showing 4 changed files with 510 additions and 88 deletions.
8 changes: 4 additions & 4 deletions packages/adapter-sveltekit/src/hooks/documentation-read.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
dataFileContent = source`
import { createClient } from "$lib/prismicio";
export const prerender = true;
export async function load({ params, fetch }) {
const client = createClient({ fetch });
Expand All @@ -58,8 +56,6 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
dataFileContent = source`
import { createClient } from "$lib/prismicio";
export const prerender = true;
export async function load({ params, fetch }) {
const client = createClient({ fetch });
Expand All @@ -69,6 +65,10 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
page,
};
}
export async function entries() {
return [{}]
}
`;
}

Expand Down
195 changes: 138 additions & 57 deletions packages/adapter-sveltekit/src/hooks/project-init.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,49 +49,12 @@ const createPrismicIOFile = async ({
return;
}

let createClientContents: string;

if (isTypeScriptProject) {
createClientContents = source`
/**
* Creates a Prismic client for the project's repository. The client is used to
* query content from the Prismic API.
*
* @param config - Configuration for the Prismic client.
*/
export const createClient = (config: prismic.ClientConfig = {}) => {
const client = prismic.createClient(repositoryName, {
routes,
...config,
});
return client;
};
`;
} else {
createClientContents = source`
/**
* Creates a Prismic client for the project's repository. The client is used to
* query content from the Prismic API.
*
* @param {prismic.ClientConfig} config - Configuration for the Prismic client.
*/
export const createClient = (config = {}) => {
const client = prismic.createClient(repositoryName, {
routes,
...config,
});
return client;
};
`;
}

let contents: string;

if (isTypeScriptProject) {
contents = source`
import * as prismic from "@prismicio/client";
import { CreateClientConfig, enableAutoPreviews } from '@prismicio/svelte/kit';
import config from "../../slicemachine.config.json";
/**
Expand All @@ -106,21 +69,38 @@ const createPrismicIOFile = async ({
*/
// TODO: Update the routes array to match your project's route structure.
const routes: prismic.ClientConfig["routes"] = [
{
type: "homepage",
path: "/",
},
{
type: "page",
path: "/:uid",
},
// Examples:
// {
// type: "homepage",
// path: "/",
// },
// {
// type: "page",
// path: "/:uid",
// },
];
${createClientContents}
/**
* Creates a Prismic client for the project's repository. The client is used to
* query content from the Prismic API.
*
* @param config - Configuration for the Prismic client.
*/
export const createClient = ({ cookies, ...config }: CreateClientConfig = {}) => {
const client = prismic.createClient(repositoryName, {
routes,
...config,
});
enableAutoPreviews({ client, cookies });
return client;
};
`;
} else {
contents = source`
import * as prismic from "@prismicio/client";
import { enableAutoPreviews } from '@prismicio/svelte/kit';
import config from "../../slicemachine.config.json";
/**
Expand All @@ -137,17 +117,33 @@ const createPrismicIOFile = async ({
*/
// TODO: Update the routes array to match your project's route structure.
const routes = [
{
type: "homepage",
path: "/",
},
{
type: "page",
path: "/:uid",
},
// Examples:
// {
// type: "homepage",
// path: "/",
// },
// {
// type: "page",
// path: "/:uid",
// },
];
${createClientContents}
/**
* Creates a Prismic client for the project's repository. The client is used to
* query content from the Prismic API.
*
* @param {import('@prismicio/svelte/kit').CreateClientConfig} config - Configuration for the Prismic client.
*/
export const createClient = ({ cookies, ...config } = {}) => {
const client = prismic.createClient(repositoryName, {
routes,
...config,
});
enableAutoPreviews({ client, cookies });
return client;
};
`;
}

Expand Down Expand Up @@ -200,6 +196,88 @@ const createSliceSimulatorPage = async ({
});
};

const createPreviewRouteMatcherFile = async ({
helpers,
options,
}: SliceMachineContext<PluginOptions>) => {
const extension = await getJSFileExtension({ helpers, options });
const filename = path.join(`src/params/preview.${extension}`);

if (await checkHasProjectFile({ filename, helpers })) {
return;
}

const contents = source`
export function match(param) {
return param === 'preview';
}
`;

await writeProjectFile({
filename,
contents,
format: options.format,
helpers,
});
};

const createPreviewRouteDirectory = async ({
helpers,
options,
}: SliceMachineContext<PluginOptions>) => {
const filename = path.join(
"src",
"routes",
"[[preview=preview]]",
"README.md",
);

if (await checkHasProjectFile({ filename, helpers })) {
return;
}

const contents = source`
This directory adds support for optional \`/preview\` routes. Do not remove this directory.
All routes within this directory will be served using the following URLs:
- \`/example-route\` (prerendered)
- \`/preview/example-route\` (server-rendered)
See <https://prismic.io/docs/svelte-preview> for more information.
`;

await writeProjectFile({
filename,
contents,
format: options.format,
helpers,
});
};

const createRootLayoutServerFile = async ({
helpers,
options,
}: SliceMachineContext<PluginOptions>) => {
const extension = await getJSFileExtension({ helpers, options });
const filename = path.join(`src/routes/+layout.server.${extension}`);

if (await checkHasProjectFile({ filename, helpers })) {
return;
}

const contents = source`
export const prerender = "auto";
`;

await writeProjectFile({
filename,
contents,
format: options.format,
helpers,
});
};

const modifySliceMachineConfig = async ({
helpers,
options,
Expand Down Expand Up @@ -251,7 +329,7 @@ const upsertSliceLibraryIndexFiles = async (
}

await Promise.all(
project.config.libraries?.map(async (libraryID) => {
project.config.libraries.map(async (libraryID) => {
await upsertSliceLibraryIndexFile({ libraryID, ...context });
}),
);
Expand All @@ -267,6 +345,9 @@ export const projectInit: ProjectInitHook<PluginOptions> = async (
modifySliceMachineConfig(context),
createPrismicIOFile(context),
createSliceSimulatorPage(context),
createPreviewRouteDirectory(context),
createPreviewRouteMatcherFile(context),
createRootLayoutServerFile(context),
]),
);

Expand Down
16 changes: 8 additions & 8 deletions packages/adapter-sveltekit/test/__snapshots__/plugin-documentation-read.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ Paste in this code:
~~~js [src/routes/[uid]/+page.server.js]
import { createClient } from \\"$lib/prismicio\\";
export const prerender = true;
export async function load({ params, fetch }) {
const client = createClient({ fetch });
Expand Down Expand Up @@ -68,8 +66,6 @@ Paste in this code:
~~~ts [src/routes/[uid]/+page.server.ts]
import { createClient } from \\"$lib/prismicio\\";
export const prerender = true;
export async function load({ params, fetch }) {
const client = createClient({ fetch });
Expand Down Expand Up @@ -125,8 +121,6 @@ Paste in this code:
~~~js [src/routes/single/+page.server.js]
import { createClient } from \\"$lib/prismicio\\";
export const prerender = true;
export async function load({ params, fetch }) {
const client = createClient({ fetch });
Expand All @@ -136,6 +130,10 @@ export async function load({ params, fetch }) {
page,
};
}
export async function entries() {
return [{}];
}
~~~
## Create your Single's page component
Expand Down Expand Up @@ -172,8 +170,6 @@ Paste in this code:
~~~ts [src/routes/single/+page.server.ts]
import { createClient } from \\"$lib/prismicio\\";
export const prerender = true;
export async function load({ params, fetch }) {
const client = createClient({ fetch });
Expand All @@ -183,6 +179,10 @@ export async function load({ params, fetch }) {
page,
};
}
export async function entries() {
return [{}];
}
~~~
## Create your Single's page component
Expand Down
Loading

0 comments on commit b4417a6

Please sign in to comment.