frontend/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate to vite

Browse Source
This commit is contained in:
Rami Bitar
2026-05-03 17:10:49 -04:00
parent b5cca5a6d8
commit a721c564b4
25 changed files with 877 additions and 3041 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
components/AppClient.tsx
View File

@@ -1,78 +0,0 @@
"use client";
import { useCallback, useMemo } from "react";
import {
App,
blocksPlugin,
outlinePlugin,
} from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import { aiPlugin } from "@reacteditor/plugin-ai";
import "@reacteditor/core/dist/index.css";
import "@reacteditor/plugin-ai/styles.css";
import { createConfig } from "@/editor/config";
import { ShopifyProvider } from "@/editor/contexts/shopify-context";
type Pages = Record<string, { root: any; content: any[] }>;
const SHOPIFY_DOMAIN =
process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
const STOREFRONT_TOKEN =
process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
export default function AppClient({
pages,
currentPath,
}: {
pages: Pages;
currentPath: string;
}) {
const config = useMemo(
() =>
createConfig({
domain: SHOPIFY_DOMAIN,
token: STOREFRONT_TOKEN || null,
}),
[],
);
const plugins = useMemo(
() => [
createTailwindCdnPlugin(),
aiPlugin({
api: "/api/chat",
attachments: true,
body: { route: currentPath },
}),
blocksPlugin(),
outlinePlugin(),
],
[currentPath],
);
const handlePublish = useCallback(
(data: any, route?: string) => {
const path = route ?? currentPath;
if (typeof window !== "undefined" && window.parent !== window) {
window.parent.postMessage(
{ type: "PUBLISH", path, data },
"*",
);
}
},
[currentPath],
);
return (
<ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
<App
config={config as any}
pages={pages as any}
currentPath={currentPath}
plugins={plugins}
iframe={{ enabled: true }}
onPublish={handlePublish}
/>
</ShopifyProvider>
);
}

149
components/EditorClient.tsx
View File

@@ -1,149 +0,0 @@
"use client";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import {
Editor,
blocksPlugin,
outlinePlugin,
useGetEditor,
type Route,
} from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import { aiPlugin } from "@reacteditor/plugin-ai";
import "@reacteditor/core/dist/index.css";
import "@reacteditor/plugin-ai/styles.css";
import { createConfig } from "@/editor/config";
import { ShopifyProvider } from "@/editor/contexts/shopify-context";
import { Button } from "@/editor/components/ui/button";
import { resolveSchemaEntry, templateKeyForRoute } from "@/lib/schema-resolver";
type Schema = Record<string, { root: any; content: any[] }>;
const SHOPIFY_DOMAIN =
process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
const STOREFRONT_TOKEN =
process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
function SaveButton({
currentPath,
onSave,
}: {
currentPath: string;
onSave: (route: string, data: any) => Promise<void>;
}) {
const getEditor = useGetEditor();
const [saving, setSaving] = useState(false);
return (
<Button
onClick={async () => {
if (saving) return;
setSaving(true);
const data = (getEditor() as any)?.appState?.data;
if (data) await onSave(currentPath, data);
await new Promise((r) => setTimeout(r, 1000));
setSaving(false);
}}
disabled={saving}
>
{saving ? "Saving…" : "Save"}
</Button>
);
}
export default function EditorClient({
initialSchema,
initialPath,
}: {
initialSchema: Schema;
initialPath: string;
}) {
const router = useRouter();
const [schema, setSchema] = useState<Schema>(initialSchema);
const [currentPath, setCurrentPath] = useState<string>(initialPath);
const editKey = useMemo(
() => templateKeyForRoute(currentPath) ?? currentPath,
[currentPath],
);
const data = useMemo(
() =>
resolveSchemaEntry(schema, currentPath)?.data ?? {
root: { props: {} },
content: [],
},
[schema, currentPath],
);
const routes: Route[] = useMemo(
() =>
Object.entries(schema).map(([path, page]) => ({
path,
title:
(page?.root as any)?.props?.title ??
(path === "/" ? "Home" : path),
})),
[schema],
);
const config = useMemo(
() =>
createConfig({
domain: SHOPIFY_DOMAIN,
token: STOREFRONT_TOKEN || null,
}),
[],
);
const persist = useCallback(async (route: string, next: any) => {
setSchema((s) => ({ ...s, [route]: next }));
if (typeof window !== "undefined" && window.parent !== window) {
window.parent.postMessage(
{ type: "PUBLISH", path: route, data: next },
"*",
);
}
}, []);
const plugins = useMemo(
() => [
createTailwindCdnPlugin(),
aiPlugin({
api: "/api/chat",
attachments: true,
body: { route: currentPath },
}),
blocksPlugin(),
outlinePlugin(),
],
[currentPath],
);
return (
<ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
<Editor
key={currentPath}
config={config as any}
data={data as any}
plugins={plugins}
headerPath={currentPath}
routes={routes}
currentPath={currentPath}
onRouteChange={(next) => {
setCurrentPath(next);
router.push(next === "/" ? "/edit" : `${next}/edit`);
}}
onPublish={async (next) => {
await persist(editKey, next);
}}
iframe={{ enabled: true }}
overrides={{
headerActions: () => (
<SaveButton currentPath={editKey} onSave={persist} />
),
}}
/>
</ShopifyProvider>
);
}

35
components/RenderClient.tsx
View File

@@ -1,35 +0,0 @@
"use client";
import { useMemo } from "react";
import { Render } from "@reacteditor/core";
import "@reacteditor/core/dist/index.css";
import { createConfig } from "@/editor/config";
import { ShopifyProvider } from "@/editor/contexts/shopify-context";
const SHOPIFY_DOMAIN =
process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
const STOREFRONT_TOKEN =
process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
export default function RenderClient({
data,
route,
}: {
data: { root: any; content: any[] };
route: string;
}) {
const config = useMemo(
() =>
createConfig({
domain: SHOPIFY_DOMAIN,
token: STOREFRONT_TOKEN || null,
}),
[],
);
return (
<ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
<Render config={config as any} data={data as any} metadata={{ route }} />
</ShopifyProvider>
);
}