@slicemachine/adapter-next 0.0.1

package/dist/index.js

@@ -0,0 +1,671 @@
+import { SliceSimulatorSetupStepValidationMessageType, defineSliceMachinePlugin } from '@slicemachine/plugin-kit';
+import { generateTypes } from 'prismic-ts-codegen';
+import { stripIndent } from 'common-tags';
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import { pascalCase as pascalCase$1 } from 'pascal-case';
+import { createRequire } from 'node:module';
+import * as http from 'node:http';
+import * as React from 'react';
+import { CoreManager, getDefaultProps, getDefaultManagedState, getDefaultSlices, getDefaultMessage, StateManagerEventType, simulatorClass, simulatorRootClass, StateManagerStatus, onClickHandler, disableEventHandler } from '@prismicio/slice-simulator-core';
+
+var name = "@slicemachine/adapter-next";
+
+const pascalCase = (...input) => {
+  return pascalCase$1(input.filter(Boolean).join(" "));
+};
+
+const buildSliceLibraryIndexFileContents = async (args) => {
+  const filePath = args.helpers.joinPathFromRoot(args.libraryID, args.options.typescript ? "index.ts" : "index.js");
+  const sliceLibrary = await args.actions.readSliceLibrary({
+    libraryID: args.libraryID
+  });
+  let contents = stripIndent`
+		import dynamic from 'next/dynamic'
+
+		export const components = {
+			${sliceLibrary.sliceIDs.map((id) => `${id}: dynamic(() => import('./${pascalCase(id)}')),`)}
+		}
+	`;
+  if (args.options.format) {
+    contents = await args.helpers.format(contents, filePath);
+  }
+  return { filePath, contents };
+};
+
+const getJSOrTSXFileExtension = (pluginOptions) => {
+  if (pluginOptions.typescript) {
+    return "tsx";
+  } else if (pluginOptions.jsxExtension) {
+    return "jsx";
+  } else {
+    return "js";
+  }
+};
+
+const createModelFile$1 = async ({ dir, data, helpers, options }) => {
+  const filePath = path.join(dir, "model.json");
+  let contents = JSON.stringify(data.model);
+  if (options.format) {
+    contents = await helpers.format(contents, filePath);
+  }
+  await fs.writeFile(filePath, contents);
+};
+const createComponentFile = async ({ dir, data, helpers, options }) => {
+  const filePath = path.join(dir, `index.${getJSOrTSXFileExtension(options)}`);
+  const model = data.model;
+  const pascalID = pascalCase(model.id);
+  let contents;
+  if (options.typescript) {
+    contents = stripIndent`
+			import { SliceComponentProps } from "@prismicio/react";
+			import { ${pascalID}Slice } from "./types";
+
+			/**
+			 * Props for \`${pascalID}\`.
+			 */
+			export type ${pascalID}Props = SliceComponentProps<${pascalID}Slice>;
+
+			/**
+			 * Component for "${model.name}" Slices.
+			 */
+			const ${pascalID} = ({ slice }: ${pascalID}Props): React.Element => {
+				return (
+					<section
+						data-slice-type={slice.slice_type}
+						data-slice-variation={slice.variation}
+					>
+						Placeholder component for ${model.id} (variation: {slice.variation}) Slices
+					</section>
+				);
+			};
+
+			export default ${pascalID}
+		`;
+  } else {
+    contents = stripIndent`
+			/**
+			 * @typedef {import("./types").${pascalID}Slice} ${pascalID}Slice
+			 * @typedef {import("@prismicio/react").SliceComponentProps<${pascalID}Slice>} ${pascalID}Props
+			 * @param {${pascalID}Props}
+			 */
+			const ${pascalID} = ({ slice }) => {
+				return (
+					<section
+						data-slice-type={slice.slice_type}
+						data-slice-variation={slice.variation}
+					>
+						Placeholder component for ${model.id} (variation: {slice.variation}) Slices
+					</section>
+				);
+			};
+
+			export default ${pascalID};
+		`;
+  }
+  if (options.format) {
+    contents = await helpers.format(contents, filePath);
+  }
+  await fs.writeFile(filePath, contents);
+};
+const createTypesFile$1 = async ({ dir, data, helpers, options }) => {
+  const filePath = path.join(dir, "types.ts");
+  let contents = generateTypes({
+    sharedSliceModels: [data.model]
+  });
+  if (options.format) {
+    contents = await helpers.format(contents, filePath);
+  }
+  await fs.writeFile(filePath, contents);
+};
+const upsertSliceLibraryIndexFile = async ({
+  data,
+  actions,
+  helpers,
+  project,
+  options
+}) => {
+  const { filePath, contents } = await buildSliceLibraryIndexFileContents({
+    libraryID: data.libraryID,
+    actions,
+    helpers,
+    project,
+    options
+  });
+  await fs.writeFile(filePath, contents);
+};
+const sliceCreate = async (data, context) => {
+  const dir = context.helpers.joinPathFromRoot(data.libraryID, pascalCase(data.model.id));
+  await fs.mkdir(dir, { recursive: true });
+  await Promise.allSettled([
+    createModelFile$1({ dir, data, ...context }),
+    createComponentFile({ dir, data, ...context }),
+    createTypesFile$1({ dir, data, ...context })
+  ]);
+  await upsertSliceLibraryIndexFile({ data, ...context });
+};
+
+const updateModelFile = async ({ dir, data, helpers, options }) => {
+  const filePath = path.join(dir, "model.json");
+  let contents = JSON.stringify(data.model);
+  if (options.format) {
+    contents = await helpers.format(contents, filePath);
+  }
+  await fs.writeFile(filePath, contents);
+};
+const updateTypesFile = async ({ dir, data, helpers, options }) => {
+  const filePath = path.join(dir, "types.ts");
+  let contents = generateTypes({
+    sharedSliceModels: [data.model]
+  });
+  if (options.format) {
+    contents = await helpers.format(contents, filePath);
+  }
+  await fs.writeFile(filePath, contents);
+};
+const sliceUpdate = async (data, context) => {
+  const dir = context.helpers.joinPathFromRoot(data.libraryID, pascalCase(data.model.id));
+  await Promise.allSettled([
+    updateModelFile({ dir, data, ...context }),
+    updateTypesFile({ dir, data, ...context })
+  ]);
+};
+
+const deleteSliceDir = async ({ data, helpers }) => {
+  const dir = helpers.joinPathFromRoot(data.libraryID, pascalCase(data.model.id));
+  await fs.rm(dir, { recursive: true });
+};
+const updateSliceLibraryIndexFile = async ({
+  data,
+  actions,
+  helpers,
+  project,
+  options
+}) => {
+  const { filePath, contents } = await buildSliceLibraryIndexFileContents({
+    libraryID: data.libraryID,
+    actions,
+    helpers,
+    project,
+    options
+  });
+  await fs.writeFile(filePath, contents);
+};
+const sliceDelete = async (data, context) => {
+  await deleteSliceDir({ data, ...context });
+  await updateSliceLibraryIndexFile({ data, ...context });
+};
+
+const readJSONFile = async (path) => {
+  const contents = await fs.readFile(path, "utf8");
+  return JSON.parse(contents);
+};
+
+const sliceRead = async (data, { helpers }) => {
+  const filePath = helpers.joinPathFromRoot(data.libraryID, pascalCase(data.sliceID), "model.json");
+  return await readJSONFile(filePath);
+};
+
+const CustomTypeModelFieldType = {
+  Boolean: "Boolean",
+  Color: "Color",
+  Date: "Date",
+  Embed: "Embed",
+  GeoPoint: "GeoPoint",
+  Group: "Group",
+  Image: "Image",
+  IntegrationFields: "IntegrationFields",
+  Link: "Link",
+  Number: "Number",
+  Select: "Select",
+  Slices: "Slices",
+  StructuredText: "StructuredText",
+  Text: "Text",
+  Timestamp: "Timestamp",
+  UID: "UID",
+  Range: "Range",
+  Separator: "Separator",
+  LegacySlices: "Choice"
+};
+const CustomTypeModelSliceType = {
+  Slice: "Slice",
+  SharedSlice: "SharedSlice"
+};
+
+const isSharedSliceModel = (input) => {
+  return typeof input === "object" && input !== null && "type" in input && input.type === CustomTypeModelSliceType.SharedSlice;
+};
+const sliceLibraryRead = async (data, { helpers }) => {
+  const dirPath = helpers.joinPathFromRoot(data.libraryID);
+  const childDirs = await fs.readdir(dirPath);
+  const sliceIDs = [];
+  await Promise.all(childDirs.map(async (childDir) => {
+    const modelPath = path.join(dirPath, childDir, "model.json");
+    try {
+      const modelContents = await readJSONFile(modelPath);
+      if (isSharedSliceModel(modelContents)) {
+        sliceIDs.push(modelContents.id);
+      }
+    } catch (e) {
+    }
+  }));
+  return {
+    id: data.libraryID,
+    sliceIDs: sliceIDs.sort()
+  };
+};
+
+const createModelFile = async ({ dir, data, helpers, options }) => {
+  const filePath = path.join(dir, "index.json");
+  let contents = JSON.stringify(data.model);
+  if (options.format) {
+    contents = await helpers.format(contents, filePath);
+  }
+  await fs.writeFile(filePath, contents);
+};
+const createTypesFile = async ({ dir, data, helpers, options }) => {
+  const filePath = path.join(dir, "types.ts");
+  let contents = generateTypes({
+    customTypeModels: [data.model]
+  });
+  if (options.format) {
+    contents = await helpers.format(contents, filePath);
+  }
+  await fs.writeFile(filePath, contents);
+};
+const customTypeCreate = async (data, context) => {
+  const dir = context.helpers.joinPathFromRoot("customtypes", data.model.id);
+  await fs.mkdir(dir, { recursive: true });
+  await Promise.allSettled([
+    createModelFile({ dir, data, ...context }),
+    createTypesFile({ dir, data, ...context })
+  ]);
+};
+
+const customTypeUpdate = customTypeCreate;
+
+const customTypeDelete = async (data, { helpers }) => {
+  const dir = helpers.joinPathFromRoot("customtypes", data.model.id);
+  await fs.rm(dir, { recursive: true });
+};
+
+const customTypeRead = async (data, { helpers }) => {
+  const filePath = helpers.joinPathFromRoot("customtypes", data.id, "index.json");
+  return await readJSONFile(filePath);
+};
+
+const isCustomTypeModel = (input) => {
+  return typeof input === "object" && input !== null && "json" in input;
+};
+const customTypeLibraryRead = async (_data, { helpers }) => {
+  const dirPath = helpers.joinPathFromRoot("customtypes");
+  const childDirs = await fs.readdir(dirPath);
+  const ids = [];
+  await Promise.all(childDirs.map(async (childDir) => {
+    const modelPath = path.join(dirPath, childDir, "index.json");
+    const modelContents = await readJSONFile(modelPath);
+    if (isCustomTypeModel(modelContents)) {
+      ids.push(modelContents.id);
+    }
+  }));
+  return {
+    ids: ids.sort()
+  };
+};
+
+const prettierOptions = { parser: "typescript" };
+const dotPath = (segments) => {
+  return segments.join(".");
+};
+const snippetRead = async (data, { helpers }) => {
+  const { fieldPath } = data;
+  const label = "React";
+  switch (data.model.type) {
+    case CustomTypeModelFieldType.Link: {
+      return {
+        label,
+        language: "tsx",
+        code: await helpers.format(stripIndent`
+						<PrismicLink field={${dotPath(fieldPath)}}>Link</PrismicLink>
+					`, void 0, { prettier: prettierOptions })
+      };
+    }
+    case CustomTypeModelFieldType.Image: {
+      return [
+        {
+          label: `${label} (next/image)`,
+          language: "tsx",
+          code: await helpers.format(stripIndent`
+							<PrismicNextImage field={${dotPath(fieldPath)}} />
+						`, void 0, { prettier: prettierOptions })
+        },
+        {
+          label,
+          language: "tsx",
+          code: await helpers.format(stripIndent`
+							<PrismicImage field={${dotPath(fieldPath)}} />
+						`, void 0, { prettier: prettierOptions })
+        }
+      ];
+    }
+    case CustomTypeModelFieldType.Group: {
+      const code = await helpers.format(stripIndent`
+					<>{${dotPath(fieldPath)}.map(item => (
+					  <>{/* Render content for item */}</>
+					))}</>
+				`, void 0, { prettier: prettierOptions });
+      return {
+        label,
+        language: "tsx",
+        code
+      };
+    }
+    case CustomTypeModelFieldType.Slices: {
+      const code = await helpers.format(stripIndent`
+					<SliceZone
+					  slices={${dotPath(fieldPath)}}
+					  components={components}
+					/>
+				`, void 0, { prettier: prettierOptions });
+      return {
+        label,
+        language: "tsx",
+        code
+      };
+    }
+    default: {
+      return {
+        label,
+        language: "tsx",
+        code: await helpers.format(stripIndent`
+						<>{${dotPath(fieldPath)}}</>
+					`, void 0, { prettier: prettierOptions })
+      };
+    }
+  }
+};
+
+const REQUIRED_DEPENDENCIES = [
+  "@prismicio/react",
+  "@prismicio/slice-simulator-react",
+  "@prismicio/client@latest",
+  "@prismicio/helpers"
+];
+const createStep1 = async ({
+  project
+}) => {
+  const require = createRequire(project.root);
+  return {
+    title: "Install packages",
+    body: stripIndent`
+			The simulator requires extra dependencies. Run the following command to install them.
+
+			~~~sh
+			npm install --save @prismicio/react @prismicio/slice-simulator-react @prismicio/client@latest @prismicio/helpers
+			~~~
+		`,
+    validate: async () => {
+      const missingDependencies = [];
+      for (const dependency of REQUIRED_DEPENDENCIES) {
+        try {
+          require.resolve(dependency);
+        } catch (e) {
+          missingDependencies.push(dependency);
+        }
+      }
+      if (missingDependencies.length >= REQUIRED_DEPENDENCIES.length) {
+        return {
+          type: SliceSimulatorSetupStepValidationMessageType.Error,
+          title: "Missing all dependencies",
+          message: stripIndent`
+						Install the required dependencies to continue.
+					`
+        };
+      }
+      if (missingDependencies.length > 0) {
+        const formattedMissingDependencies = missingDependencies.map((missingDependency) => `\`${missingDependency}\``).join(", ");
+        return {
+          type: SliceSimulatorSetupStepValidationMessageType.Warning,
+          title: "Missing some dependencies",
+          message: stripIndent`
+						The following dependencies are missing: ${formattedMissingDependencies}
+					`
+        };
+      }
+    }
+  };
+};
+const createStep2 = async ({
+  helpers,
+  options
+}) => {
+  const fileName = `slice-simulator.${getJSOrTSXFileExtension}`;
+  const filePath = helpers.joinPathFromRoot("pages", fileName);
+  let fileContents;
+  if (options.typescript) {
+    fileContents = stripIndent`
+			import { GetStaticProps } from "next/types";
+			import { SliceSimulator } from "@prismicio/slice-simulator-react";
+			import { SliceZone } from "@prismicio/react";
+
+			import state from "../.slicemachine/libraries-state.json";
+			import { components } from "../slices";
+
+			const SliceSimulatorPage = () => {
+				return (
+					<SliceSimulator
+						sliceZone={(props) => <SliceZone {...props} components={components} />}
+						state={state}
+					/>
+				);
+			};
+
+			export default SliceSimulatorPage;
+
+			export const getStaticProps: GetStaticProps = () => {
+				return {
+					// Exclude this page from production builds.
+					notFound: process.env.NODE_ENV === "production",
+				};
+			};
+		`;
+  } else {
+    fileContents = stripIndent`
+			import { SliceSimulator } from "@prismicio/slice-simulator-react";
+			import { SliceZone } from "@prismicio/react";
+
+			import state from "../.slicemachine/libraries-state.json";
+			import { components } from "../slices";
+
+			const SliceSimulatorPage = () => {
+				return (
+					<SliceSimulator
+						sliceZone={(props) => <SliceZone {...props} components={components} />}
+						state={state}
+					/>
+				);
+			};
+
+			export default SliceSimulatorPage;
+
+			export const getStaticProps= () => {
+				return {
+					// Exclude this page from production builds.
+					notFound: process.env.NODE_ENV === "production",
+				};
+			};
+		`;
+  }
+  fileContents = await helpers.format(fileContents, filePath);
+  return {
+    title: "Create a page for the simulator",
+    body: stripIndent`
+			In your \`pages\` directory, create a file called \`${fileName}\` and add the following code. This route will be used to simulate and develop your components.
+
+			~~~tsx
+			${fileContents}
+			~~~
+		`
+  };
+};
+const createStep3 = async ({
+  helpers
+}) => {
+  const filePath = helpers.joinPathFromRoot("sm.json");
+  const fileContents = await helpers.format(`
+			{
+				"localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
+			}
+		`, filePath);
+  return {
+    title: "Update `sm.json`",
+    body: stripIndent`
+			Update your \`sm.json\` file with a \`localSliceSimulatorURL\` property pointing to your \`slice-simulator\` page.
+
+			~~~json
+			${fileContents}
+			~~~
+		`,
+    validate: async () => {
+      const project = await helpers.getProject();
+      if (!("localSliceSimulatorURL" in project.config)) {
+        return {
+          type: SliceSimulatorSetupStepValidationMessageType.Error,
+          title: "Missing `localSliceSimulatorURL` property",
+          message: stripIndent`
+						A \`localSliceSimulatorURL\` property was not found in your \`sm.json\` file.
+					`
+        };
+      }
+      try {
+        if (project.config.localSliceSimulatorURL) {
+          new URL(project.config.localSliceSimulatorURL);
+        } else {
+          throw new Error("Undefined Slice Simulator URL");
+        }
+      } catch (e) {
+        return {
+          type: SliceSimulatorSetupStepValidationMessageType.Warning,
+          title: "An invalid URL was provided",
+          message: stripIndent`
+						The \`localSliceSimulatorURL\` property should be of the shape \`http://localhost:PORT/PATH\`. See the codeblock for an example.
+					`
+        };
+      }
+      const ok = await new Promise((resolve) => {
+        if (project.config.localSliceSimulatorURL) {
+          http.get(project.config.localSliceSimulatorURL, (res) => {
+            if (res.statusCode) {
+              resolve(res.statusCode >= 200 && res.statusCode < 300);
+            }
+          });
+        }
+        resolve(false);
+      });
+      if (!ok) {
+        return {
+          type: SliceSimulatorSetupStepValidationMessageType.Warning,
+          title: "Unable to connect to simulator page",
+          message: stripIndent`
+						Check that the \`localSliceSimulatorURL\` property in \`sm.json\` is correct and try again. See the [troubleshooting page](https://prismic.io/docs/technologies/setup-slice-simulator-nextjs) for more details.
+					`
+        };
+      }
+    }
+  };
+};
+const sliceSimulatorSetupRead = async (_data, context) => {
+  return Promise.all([
+    createStep1(context),
+    createStep2(context),
+    createStep3(context)
+  ]);
+};
+
+const plugin = defineSliceMachinePlugin({
+  meta: {
+    name: name
+  },
+  defaultOptions: {
+    format: true
+  },
+  setup({ hook }) {
+    hook("slice:create", sliceCreate);
+    hook("slice:update", sliceUpdate);
+    hook("slice:delete", sliceDelete);
+    hook("slice:read", sliceRead);
+    hook("slice-library:read", sliceLibraryRead);
+    hook("custom-type:create", customTypeCreate);
+    hook("custom-type:update", customTypeUpdate);
+    hook("custom-type:delete", customTypeDelete);
+    hook("custom-type:read", customTypeRead);
+    hook("custom-type-library:read", customTypeLibraryRead);
+    hook("snippet:read", snippetRead);
+    hook("slice-simulator:setup:read", sliceSimulatorSetupRead);
+  }
+});
+
+const coreManager = new CoreManager();
+const SliceSimulator = ({
+  sliceZone: SliceZoneComp,
+  state,
+  background,
+  zIndex,
+  className
+}) => {
+  const defaultProps = getDefaultProps();
+  const [managedState, setManagedState] = React.useState(() => getDefaultManagedState());
+  const [slices, setSlices] = React.useState(() => getDefaultSlices());
+  const [message, setMessage] = React.useState(() => getDefaultMessage());
+  React.useEffect(() => {
+    coreManager.stateManager.on(StateManagerEventType.ManagedState, (_managedState) => {
+      setManagedState(_managedState);
+    }, "simulator-managed-state");
+    coreManager.stateManager.on(StateManagerEventType.Slices, (_slices) => {
+      setSlices(_slices);
+    }, "simulator-slices");
+    coreManager.stateManager.on(StateManagerEventType.Message, (_message) => {
+      setMessage(_message);
+    }, "simulator-message");
+    coreManager.init(state);
+    return () => {
+      coreManager.stateManager.off(StateManagerEventType.ManagedState, "simulator-managed-state");
+      coreManager.stateManager.off(StateManagerEventType.Slices, "simulator-slices");
+      coreManager.stateManager.off(StateManagerEventType.Message, "simulator-message");
+    };
+  }, []);
+  const didMount = React.useRef(false);
+  React.useEffect(() => {
+    if (didMount.current) {
+      coreManager.stateManager.reload(state);
+    } else {
+      didMount.current = true;
+    }
+  }, [state]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: [simulatorClass, className].filter(Boolean).join(" "),
+    style: {
+      zIndex: typeof zIndex === "undefined" ? defaultProps.zIndex : zIndex != null ? zIndex : void 0,
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100vh",
+      overflow: "auto",
+      background: typeof background === "undefined" ? defaultProps.background : background != null ? background : void 0
+    }
+  }, message ? /* @__PURE__ */ React.createElement("article", {
+    dangerouslySetInnerHTML: { __html: message }
+  }) : slices.length ? /* @__PURE__ */ React.createElement("div", {
+    id: "root",
+    className: simulatorRootClass,
+    style: managedState.status !== StateManagerStatus.Loaded ? { display: "none" } : void 0,
+    onClickCapture: onClickHandler,
+    onSubmitCapture: disableEventHandler
+  }, /* @__PURE__ */ React.createElement(SliceZoneComp, {
+    slices
+  })) : null);
+};
+
+export { SliceSimulator, plugin as default };
+//# sourceMappingURL=index.js.map