@alpaca-headless/alpaca-headless-nextjs 0.0.3 → 0.1.0

package/src/EditorIntegrationClient.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect } from "react";
+import useExposeRefreshFunction from "./useExposeRefreshFunction";
+
+export function EditorIntegrationClient({
+  timings,
+}: {
+  timings?: {
+    [key: string]: number;
+  };
+}) {
+  useExposeRefreshFunction();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.ctrlKey && event.key === "F11") {
+        event.preventDefault();
+        window.parent.postMessage({ type: "editor-exitFullscreen" }, "*");
+      }
+      if (event.key === "F2") {
+        event.preventDefault();
+        window.parent.postMessage({ type: "editor-keyDown", key: "F2" }, "*");
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.parent.postMessage({ type: "editor-timings", timings }, "*");
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <>
+      <style>{`
+        .a-editor-mce {
+          display:flex;
+          gap: 10px;
+          padding: 30px;
+          background-color: #f5f5f5;
+          flex-wrap: wrap;          
+          align-items: center;
+        }
+        .a-editor-mce-thumbnail {                   
+          display:grid;
+          padding: 10px;
+          place-items: center;     
+          overflow: hidden;     
+        }
+         .a-editor-mce-thumbnail--selected {
+          box-shadow: 0 0 3px 3px rgb(75 89 255 / 50%);
+         }
+         .a-editor-mce-thumbnail:hover {
+          box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
+        }
+        [contentEditable]:empty:before {
+          content: attr(placeholder);
+          opacity: 0.6;
+        }
+
+        [contenteditable] {
+          outline: 0px solid transparent;
+        }
+      `}</style>
+    </>
+  );
+}
+
+export type ComponentSelectedEvent = {
+  type: "componentSelected";
+  componentIds: string[];
+};

package/src/client-components/MultiComponentEditor.tsx

@@ -0,0 +1,133 @@
+"use client";
+import { ComponentData } from "@alpaca-headless/alpaca-headless";
+
+import React, {
+  useState,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  Fragment,
+  useCallback,
+} from "react";
+
+interface MultiComponentEditorProps {
+  children: ReactNode;
+  component: ComponentData;
+  placeholderName: string;
+  thumbZoom?: number;
+  thumbWidth?: string;
+  thumbHeight?: string;
+}
+
+export function MultiComponentEditor({
+  children,
+  component,
+  placeholderName,
+  thumbZoom,
+  thumbWidth = "200px",
+  thumbHeight = "112px",
+}: MultiComponentEditorProps) {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const placeholder = component.placeholders.find(
+    (x) => x.name === placeholderName
+  );
+  if (!placeholder) return;
+  const components = placeholder.components;
+  if (!components) return;
+
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      if (event.data.type === "componentsSelected") {
+        setSelectedId(event.data.componentIds[0]);
+      }
+    },
+    [components]
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
+  const selectedIndex = components.findIndex(
+    (x: ComponentData) => x.id === selectedId
+  );
+
+  const childrenArray = React.Children.toArray(children) as ReactElement[];
+
+  const filteredChildren = childrenArray.filter(
+    (child) => child.type !== "script"
+  );
+
+  return (
+    <>
+      {filteredChildren[selectedIndex < 0 ? 0 : selectedIndex]}
+      <div className="a-editor-mce">
+        <script
+          data-placeholder-start={placeholder.key}
+          data-orientation="horizontal"
+        />
+        {filteredChildren.map((x, index) => thumbnail(x, index))}
+        <script data-placeholder-end={placeholder.key} />
+      </div>
+    </>
+  );
+
+  function thumbnail(x: React.ReactNode, index: number) {
+    const style: {
+      height?: string;
+      width?: string;
+      zoom?: number;
+      transform?: string;
+    } = {};
+
+    if (thumbHeight) {
+      style.height = thumbHeight;
+    }
+    if (thumbWidth) {
+      style.width = thumbWidth;
+    }
+
+    const componentArray = (x as any).props?.children;
+
+    const component = components![index];
+
+    return (
+      <Fragment key={index}>
+        <div
+          className={
+            "a-editor-mce-thumbnail" +
+            (index === selectedIndex ? " a-editor-mce-thumbnail--selected" : "")
+          }
+          style={style}
+          onClick={() => {
+            selectComponents([components![index].id]);
+          }}
+        >
+          <script
+            data-component-start={component.id}
+            data-itemid={
+              component._editor?.linkedComponentItem?.id || component.id
+            }
+            data-layoutid={component._editor?.hostingPageItem?.id}
+          />
+          <div style={{ pointerEvents: "none", zoom: thumbZoom || 0.25 }}>
+            {componentArray.slice(1, -1)}
+          </div>
+          <script data-component-end={component.id} />
+        </div>
+        <div data-dropzone={components[index].id}></div>
+      </Fragment>
+    );
+  }
+}
+
+function selectComponents(componentIds: string[]) {
+  window.top?.window.postMessage(
+    { componentIds, type: "componentsSelected" },
+    "*"
+  );
+}

package/src/client-components/index.ts

@@ -0,0 +1,3 @@
+"use client";
+
+export { MultiComponentEditor } from "./MultiComponentEditor";

package/src/handleBasicAuthRoute.ts

@@ -0,0 +1,62 @@
+import {
+  ApiConfig,
+  RenderOptions,
+  resolveRoute,
+} from "@alpaca-headless/alpaca-headless";
+import { NextRequest } from "next/server";
+import { getApiHeaders } from ".";
+
+export async function handleBasicAuthRoute({
+  request,
+  mapHost,
+  renderOptions,
+  apiConfig,
+}: {
+  request: NextRequest;
+  mapHost: (host: string) => string;
+  renderOptions: RenderOptions;
+  apiConfig?: ApiConfig;
+}) {
+  const urlSearchParams = new URLSearchParams(request.nextUrl.search);
+  const nextSearchParams: any = {};
+  for (const [key, value] of urlSearchParams.entries()) {
+    nextSearchParams[key] = value;
+  }
+
+  const config = apiConfig || {};
+  if (!config.headers) {
+    config.headers = getApiHeaders();
+  }
+
+  const routeData = await resolveRoute({
+    path: request.nextUrl.pathname,
+    searchParams: nextSearchParams,
+    host: mapHost(request.headers.get("host") || ""),
+    renderOptions,
+    renderings: {},
+    apiConfig: config,
+  });
+
+  if (routeData.result.type === "redirect") {
+    return new Response(null, {
+      status: routeData.result.redirectType === "permanent" ? 301 : 302,
+      headers: {
+        Location: routeData.result.location,
+      },
+    });
+  }
+
+  if (routeData.result.type === "unauthorized") {
+    if (routeData.result.auth)
+      return new Response(null, {
+        status: 401,
+        headers: {
+          "WWW-Authenticate": routeData.result.auth.replace(", Bearer", ""),
+        },
+      });
+    else
+      return new Response(null, {
+        status: 401,
+      });
+  }
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+import { headers } from "next/headers";
+
+export { EditorIntegration } from "./EditorIntegration";
+
+export function getApiHeaders() {
+  const requestHeaders = headers();
+  const apiHeaders = new Headers();
+  apiHeaders.set("Cookie", requestHeaders.get("Cookie") || "");
+  apiHeaders.set("Authorization", requestHeaders.get("Authorization") || "");
+  return apiHeaders;
+}
+
+export { handleRequest } from "./middleware/handleRequest";
+
+export { proxy } from "./proxy";

package/src/middleware/handleRequest.ts

@@ -0,0 +1,62 @@
+import {
+  ApiConfig,
+  RenderOptions,
+  resolveRoute,
+} from "@alpaca-headless/alpaca-headless";
+import { NextRequest } from "next/server";
+import { getApiHeaders } from "..";
+
+export async function handleRequest({
+  request,
+  mapHost,
+  renderOptions,
+  apiConfig,
+}: {
+  request: NextRequest;
+  mapHost: (host: string) => string;
+  renderOptions: RenderOptions;
+  apiConfig?: ApiConfig;
+}) {
+  const urlSearchParams = new URLSearchParams(request.nextUrl.search);
+  const nextSearchParams: any = {};
+  for (const [key, value] of urlSearchParams.entries()) {
+    nextSearchParams[key] = value;
+  }
+
+  const config = apiConfig || {};
+  if (!config.headers) {
+    config.headers = getApiHeaders();
+  }
+
+  const routeData = await resolveRoute({
+    path: request.nextUrl.pathname,
+    searchParams: nextSearchParams,
+    host: mapHost(request.headers.get("host") || ""),
+    renderOptions,
+    renderings: {},
+    apiConfig: config,
+  });
+
+  if (routeData.result.type === "redirect") {
+    return new Response(null, {
+      status: routeData.result.redirectType === "permanent" ? 301 : 302,
+      headers: {
+        Location: routeData.result.location,
+      },
+    });
+  }
+
+  if (routeData.result.type === "unauthorized") {
+    if (routeData.result.auth)
+      return new Response(null, {
+        status: 401,
+        headers: {
+          "WWW-Authenticate": routeData.result.auth.replace(", Bearer", ""),
+        },
+      });
+    else
+      return new Response(null, {
+        status: 401,
+      });
+  }
+}

package/src/middleware/index.ts

@@ -0,0 +1 @@
+export * from "./handleRequest";

package/src/proxy/index.ts

@@ -0,0 +1,108 @@
+import axios from "axios";
+// import { HttpsProxyAgent } from "https-proxy-agent";
+import { NextResponse } from "next/server";
+
+async function GET(
+  req: Request,
+  target: string
+  //{ proxy }: { proxy?: string }
+) {
+  const reqUrl = new URL(req.url);
+
+  const url: string =
+    target + reqUrl.pathname + "?" + reqUrl.searchParams.toString();
+
+  const headers: { [key: string]: string } = {
+    Authorization: req.headers.get("Authorization") || "",
+    Cookie: req.headers.get("Cookie") || "",
+  };
+
+  // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
+
+  const externalResponse = await axios.get(url, {
+    headers: headers,
+    // httpAgent: agent,
+    // httpsAgent: agent,
+    responseType: "stream",
+  });
+
+  return new NextResponse(nodeReadableToReadableStream(externalResponse.data), {
+    status: externalResponse.status,
+  });
+}
+
+async function POST(
+  req: Request
+  //{ proxy }: { proxy?: string }
+) {
+  const reqUrl = new URL(req.url);
+  const body = await req.text();
+
+  const url: string =
+    process.env.EDITOR_SERVICE_URL +
+    reqUrl.pathname +
+    "?" +
+    reqUrl.searchParams.toString();
+
+  const headers: { [key: string]: string } = {
+    "Content-Type": req.headers.get("Content-Type") || "",
+    Authorization: req.headers.get("Authorization") || "",
+    Cookie: req.headers.get("Cookie") || "",
+  };
+
+  // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
+
+  const externalResponse = await axios.post(url, body, {
+    headers: headers,
+    // httpAgent: agent,
+    // httpsAgent: agent,
+    responseType: "stream",
+  });
+
+  const responseHeaders = getResponseHeaders(externalResponse);
+
+  return new NextResponse(nodeReadableToReadableStream(externalResponse.data), {
+    status: externalResponse.status,
+    headers: responseHeaders,
+  });
+}
+
+const getResponseHeaders = (externalResponse: any) => {
+  const responseHeaders = new Headers();
+  responseHeaders.set(
+    "Content-Type",
+    externalResponse.headers["content-type"] || ""
+  );
+  responseHeaders.set(
+    "Set-Cookie",
+    externalResponse.headers["set-cookie"] || ""
+  );
+  return responseHeaders;
+};
+
+function nodeReadableToReadableStream(
+  nodeStream: NodeJS.ReadableStream
+): ReadableStream<Uint8Array> {
+  return new ReadableStream<Uint8Array>({
+    start(controller) {
+      nodeStream.on("data", (chunk: Buffer) => {
+        controller.enqueue(new Uint8Array(chunk));
+      });
+
+      nodeStream.on("end", () => {
+        controller.close();
+      });
+
+      nodeStream.on("error", (err: Error) => {
+        controller.error(err);
+      });
+    },
+    pull() {},
+    cancel() {},
+  });
+}
+
+export const proxy = {
+  POST,
+  GET,
+};

package/src/useExposeRefreshFunction.ts

@@ -0,0 +1,45 @@
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import uuid from "react-uuid";
+
+declare global {
+  interface Window {
+    requestRefresh?: (newUri?: string) => boolean;
+  }
+}
+
+const useExposeRefreshFunction = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [refreshStart, setRefreshStart] = useState<number>();
+
+  useEffect(() => {
+    // Expose the refresh function to the parent window
+    window.requestRefresh = (newUri?: string) => {
+      console.log("refresh requested", newUri);
+      if (!newUri) {
+        const uri = new URL(window.location.href);
+        uri.searchParams.set("edit_rev", uuid().toString());
+        newUri = uri.toString();
+      }
+
+      router.replace(newUri, { scroll: false });
+      setRefreshStart(performance.now());
+      return true; // Indicate the function executed successfully
+    };
+
+    // Optionally clean up when the component unmounts
+    return () => {
+      delete window.requestRefresh;
+    };
+  }, [router]);
+
+  useEffect(() => {
+    if (refreshStart)
+      console.log("Refresh complete", performance.now() - refreshStart!);
+  }, [searchParams]);
+
+  return null; // This hook doesn't render anything
+};
+
+export default useExposeRefreshFunction;

package/tailwind.config.js

@@ -0,0 +1,17 @@
+var config = {
+    content: [
+        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            backgroundImage: {
+                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+                "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+            },
+        },
+    },
+    plugins: [],
+};
+export default config;

package/tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "lib": ["dom", "dom.iterable", "es2021"],
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*.spec.ts"]
+}

package/dist/cjs/alpacaContext.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setAlpacaContext = exports.useAlpacaContext = void 0;
-function useAlpacaContext() {
-    return globalThis.alpacaContext;
-}
-exports.useAlpacaContext = useAlpacaContext;
-function setAlpacaContext(context) {
-    globalThis.alpacaContext = context;
-}
-exports.setAlpacaContext = setAlpacaContext;

package/dist/cjs/components/Placeholder.js

@@ -1,31 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Placeholder = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function Placeholder({ name, content, }) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const data = yield content;
-        if (data.type !== "page" && data.type !== "component")
-            return;
-        const placeholderData = data.placeholders.find((x) => x.name == name);
-        if (!placeholderData)
-            return;
-        const loader = globalThis.moduleLoader;
-        const promises = placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.components.map((component) => __awaiter(this, void 0, void 0, function* () {
-            const module = yield loader(component.componentType);
-            return { data: component, Component: module.default };
-        }));
-        const components = yield Promise.all(promises);
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: components.map(({ Component, data }) => ((0, jsx_runtime_1.jsx)(Component, { component: data }))) }));
-    });
-}
-exports.Placeholder = Placeholder;

package/dist/cjs/components/Text.js

@@ -1,25 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
-const react_1 = __importDefault(require("react"));
-function Text({ field, tag, editable, }) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (editable)
-            return react_1.default.createElement(tag || "div", null, field.value);
-        else
-            return react_1.default.createElement(tag || "div", null, field.value);
-    });
-}
-exports.Text = Text;

package/dist/cjs/components/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Placeholder"), exports);
-__exportStar(require("./Text"), exports);

package/dist/cjs/fieldTypes.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });