Initial commit

lib/resolve-editor-path.ts

@@ -0,0 +1,34 @@
+const TEMPLATE_PATTERNS: { key: string; prefix: string; param: string }[] = [
+  { key: "/products/*", prefix: "/products/", param: "handle" },
+  { key: "/collections/*", prefix: "/collections/", param: "handle" },
+];
+
+export type ResolvedEditorPath = {
+  isEdit: boolean;
+  path: string;
+  templateKey: string | null;
+  params: Record<string, string>;
+};
+
+const resolveEditorPath = (editorPath: string[] = []): ResolvedEditorPath => {
+  const isEdit =
+    editorPath.length > 0 && editorPath[editorPath.length - 1] === "edit";
+
+  const segments = isEdit ? editorPath.slice(0, -1) : editorPath;
+  const path = segments.length === 0 ? "/" : `/${segments.join("/")}`;
+
+  for (const { key, prefix, param } of TEMPLATE_PATTERNS) {
+    if (path.startsWith(prefix) && path.length > prefix.length) {
+      return {
+        isEdit,
+        path,
+        templateKey: key,
+        params: { [param]: path.slice(prefix.length) },
+      };
+    }
+  }
+
+  return { isEdit, path, templateKey: null, params: {} };
+};
+
+export default resolveEditorPath;

lib/use-demo-data.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import config, { componentKey } from "../config";
+import { getInitialData, initialData } from "../config/initial-data";
+import { Metadata, resolveAllData } from "@reacteditor/core";
+import { Components, UserData } from "../config/types";
+import { RootProps } from "../config/root";
+
+const isBrowser = typeof window !== "undefined";
+
+export const useDemoData = ({
+  path,
+  isEdit,
+  metadata = {},
+}: {
+  path: string;
+  isEdit: boolean;
+  metadata?: Metadata;
+}) => {
+  // unique b64 key that updates each time we add / remove components
+  const key = `react-editor-demo:${componentKey}:${path}`;
+
+  const [data] = useState<Partial<UserData>>(() => {
+    if (isBrowser) {
+      const dataStr = localStorage.getItem(key);
+
+      if (dataStr) {
+        return JSON.parse(dataStr);
+      }
+
+      return getInitialData(path);
+    }
+  });
+
+  // Normally this would happen on the server, but we can't
+  // do that because we're using local storage as a database
+  const [resolvedData, setResolvedData] = useState<Partial<UserData>>(data);
+
+  useEffect(() => {
+    if (data && !isEdit) {
+      resolveAllData<Components, RootProps>(data, config, metadata).then(
+        setResolvedData
+      );
+    }
+  }, [data, isEdit]);
+
+  useEffect(() => {
+    if (!isEdit) {
+      const title = data?.root?.props?.title || data?.root?.title;
+      document.title = title || "";
+    }
+  }, [data, isEdit]);
+
+  return { data, resolvedData, key };
+};

lib/utils.ts

@@ -0,0 +1,11 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function truncate(text: string, max = 80): string {
+  if (!text) return "";
+  return text.length > max ? text.slice(0, max - 1).trimEnd() + "…" : text;
+}