@ahmedrowaihi/pdf-forge-preview 1.0.0-canary.0

package/src/components/topbar.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { use } from 'react';
+import { cn } from '../utils';
+import { Heading } from './heading';
+import { IconHideSidebar } from './icons/icon-hide-sidebar';
+import { ShellContext } from './shell';
+import { Tooltip } from './tooltip';
+
+interface TopbarProps extends React.ComponentProps<'header'> {
+  templateTitle: string;
+  children: React.ReactNode;
+}
+
+export const Topbar = ({
+  templateTitle,
+  children,
+  className,
+  ...props
+}: TopbarProps) => {
+  const { toggleSidebar } = use(ShellContext)!;
+
+  return (
+    <Tooltip.Provider>
+      <header
+        {...props}
+        className={cn(
+          'flex h-14 items-center justify-between gap-3 border-slate-6 border-b px-3 py-2',
+          className,
+        )}
+      >
+        <div className="flex w-fit items-center gap-3">
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <button
+                className="hidden rounded-lg px-2 py-2 text-slate-11 transition duration-200 ease-in-out hover:bg-slate-5 hover:text-slate-12 lg:flex"
+                onClick={() => {
+                  toggleSidebar();
+                }}
+                type="button"
+              >
+                <IconHideSidebar height={20} width={20} />
+              </button>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Show/hide sidebar</Tooltip.Content>
+          </Tooltip>
+          <div className="hidden items-center overflow-hidden text-center lg:flex">
+            <Heading as="h2" className="truncate" size="2" weight="medium">
+              {templateTitle}
+            </Heading>
+          </div>
+        </div>
+        <div className="flex w-full items-center justify-between gap-3 lg:w-fit lg:justify-start">
+          {children}
+        </div>
+      </header>
+    </Tooltip.Provider>
+  );
+};

package/src/contexts/preview.tsx

@@ -0,0 +1,91 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { createContext, useContext } from 'react';
+import type {
+  RenderedTemplateMetadata,
+  TemplateRenderingResult,
+} from '../actions/render-template-by-path';
+import { isBuilding, isPreviewDevelopment } from '../app/env';
+import { useHotreload } from '../hooks/use-hot-reload';
+import { useRenderingMetadata } from '../hooks/use-rendering-metadata';
+import { useTemplateRenderingResult } from '../hooks/use-template-rendering-result';
+
+export const PreviewContext = createContext<
+  | {
+      renderedTemplateMetadata: RenderedTemplateMetadata | undefined;
+      renderingResult: TemplateRenderingResult;
+
+      templateSlug: string;
+      templatePath: string;
+    }
+  | undefined
+>(undefined);
+
+interface PreviewProvider {
+  templateSlug: string;
+  templatePath: string;
+
+  serverRenderingResult: TemplateRenderingResult;
+
+  children: React.ReactNode;
+}
+
+export const PreviewProvider = ({
+  templateSlug,
+  templatePath,
+  serverRenderingResult,
+  children,
+}: PreviewProvider) => {
+  const router = useRouter();
+
+  const renderingResult = useTemplateRenderingResult(
+    templatePath,
+    serverRenderingResult,
+  );
+
+  const renderedTemplateMetadata = useRenderingMetadata(
+    templatePath,
+    renderingResult,
+    serverRenderingResult,
+  );
+
+  if (!isBuilding && !isPreviewDevelopment) {
+    // biome-ignore lint/correctness/useHookAtTopLevel: this will not change on runtime so it doesn't violate the rules of hooks
+    useHotreload((changes) => {
+      const changeForThisTemplate = changes.find((change) =>
+        change.filename.includes(templateSlug),
+      );
+
+      if (typeof changeForThisTemplate !== 'undefined') {
+        if (changeForThisTemplate.event === 'unlink') {
+          router.push('/');
+        }
+      }
+    });
+  }
+
+  return (
+    <PreviewContext.Provider
+      value={{
+        templatePath,
+        templateSlug,
+        renderedTemplateMetadata,
+        renderingResult,
+      }}
+    >
+      {children}
+    </PreviewContext.Provider>
+  );
+};
+
+export const usePreviewContext = () => {
+  const previewContext = useContext(PreviewContext);
+
+  if (typeof previewContext === 'undefined') {
+    throw new Error(
+      'Cannot call `usePreviewContext` outside of an `PreviewContext` provider.',
+    );
+  }
+
+  return previewContext;
+};

package/src/contexts/templates.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { createContext, useContext, useState } from 'react';
+import { getTemplatesDirectoryMetadataAction } from '../actions/get-templates-directory-metadata-action';
+import { isBuilding, isPreviewDevelopment } from '../app/env';
+import { useHotreload } from '../hooks/use-hot-reload';
+import type { TemplatesDirectory } from '../utils/get-templates-directory-metadata';
+
+const TemplatesContext = createContext<
+  | {
+      templatesDirectoryMetadata: TemplatesDirectory;
+    }
+  | undefined
+>(undefined);
+
+export const useTemplates = () => {
+  const providerValue = useContext(TemplatesContext);
+
+  if (typeof providerValue === 'undefined') {
+    throw new Error(
+      'Cannot call `useTemplates` outside of a `TemplatesContext` provider.',
+    );
+  }
+
+  return providerValue;
+};
+
+export const TemplatesProvider = (props: {
+  initialTemplatesDirectoryMetadata: TemplatesDirectory;
+  children: React.ReactNode;
+}) => {
+  const [templatesDirectoryMetadata, setTemplatesDirectoryMetadata] =
+    useState<TemplatesDirectory>(props.initialTemplatesDirectoryMetadata);
+
+  if (!isBuilding && !isPreviewDevelopment) {
+    // biome-ignore lint/correctness/useHookAtTopLevel: this will not change on runtime so it doesn't violate the rules of hooks
+    useHotreload(() => {
+      void getTemplatesDirectoryMetadataAction(
+        props.initialTemplatesDirectoryMetadata.absolutePath,
+      ).then((metadata) => {
+        if (metadata) {
+          setTemplatesDirectoryMetadata(metadata);
+        } else {
+          throw new Error(
+            'Hot reloading: unable to find the templates directory to update the sidebar',
+          );
+        }
+      });
+    });
+  }
+
+  return (
+    <TemplatesContext.Provider value={{ templatesDirectoryMetadata }}>
+      {props.children}
+    </TemplatesContext.Provider>
+  );
+};

package/src/contexts/toolbar.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { createContext, use } from 'react';
+
+const ToolbarContext = createContext<undefined>(undefined);
+
+interface ToolbarProviderProps {
+  children: React.ReactNode;
+}
+
+export function ToolbarProvider({ children }: ToolbarProviderProps) {
+  return (
+    <ToolbarContext.Provider value={undefined}>
+      {children}
+    </ToolbarContext.Provider>
+  );
+}
+
+export const useToolbarContext = () => {
+  const previewContext = use(ToolbarContext);
+  return previewContext;
+};

package/src/hooks/use-clamped-state.ts

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+const clamp = (v: number, min: number, max: number) => {
+  return Math.min(Math.max(v, min), max);
+};
+
+export const useClampedState = (initial: number, min: number, max: number) => {
+  const [v, setV] = useState(initial);
+
+  return [
+    clamp(v, min, max),
+    (valueOrFunction: number | ((v: number) => number)) => {
+      if (typeof valueOrFunction === 'function') {
+        setV((value: number) => {
+          const currentValue = clamp(value, min, max);
+
+          return clamp(valueOrFunction(currentValue), min, max);
+        });
+      } else {
+        setV(clamp(valueOrFunction, min, max));
+      }
+    },
+  ] as const;
+};

package/src/hooks/use-fragment-identifier.ts

@@ -0,0 +1,14 @@
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+export const useFragmentIdentifier = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [fragmentIdentifier, setFragmentIdentifier] = useState<string>();
+
+  useEffect(() => {
+    setFragmentIdentifier(global.location?.hash);
+  }, [pathname, searchParams]);
+
+  return fragmentIdentifier;
+};

package/src/hooks/use-hot-reload.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { io, type Socket } from 'socket.io-client';
+import type { HotReloadChange } from '../utils/types/hot-reload-change';
+
+/**
+ * Hook that detects any "reload" event sent from the CLI's web socket
+ * and calls the received parameter callback
+ */
+export const useHotreload = (
+  onShouldReload: (changes: HotReloadChange[]) => void,
+) => {
+  const socketRef = useRef<Socket | null>(null);
+
+  useEffect(() => {
+    if (!socketRef.current) {
+      socketRef.current = io();
+    }
+    const socket = socketRef.current;
+
+    socket.on('reload', (changes: HotReloadChange[]) => {
+      console.debug('Reloading...');
+      void onShouldReload(changes);
+    });
+
+    return () => {
+      socket.off();
+    };
+  }, [onShouldReload]);
+};

package/src/hooks/use-rendering-metadata.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import type {
+  RenderedTemplateMetadata,
+  TemplateRenderingResult,
+} from '../actions/render-template-by-path';
+
+const lastRenderingMetadataPerTemplatePath = {} as Record<
+  string,
+  RenderedTemplateMetadata
+>;
+
+/**
+ * Returns the rendering metadata if the given `renderingResult`
+ * does not error. If it does error it returns the last value it had for the hook.
+ */
+export const useRenderingMetadata = (
+  templatePath: string,
+  renderingResult: TemplateRenderingResult,
+  serverRenderingMetadata: TemplateRenderingResult,
+): RenderedTemplateMetadata | undefined => {
+  useEffect(() => {
+    if ('markup' in renderingResult) {
+      lastRenderingMetadataPerTemplatePath[templatePath] = renderingResult;
+    } else if (
+      typeof serverRenderingMetadata !== 'undefined' &&
+      'markup' in serverRenderingMetadata &&
+      typeof lastRenderingMetadataPerTemplatePath[templatePath] === 'undefined'
+    ) {
+      lastRenderingMetadataPerTemplatePath[templatePath] =
+        serverRenderingMetadata;
+    }
+  }, [renderingResult, templatePath, serverRenderingMetadata]);
+
+  return 'error' in renderingResult
+    ? lastRenderingMetadataPerTemplatePath[templatePath]
+    : renderingResult;
+};

package/src/hooks/use-template-rendering-result.ts

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { getTemplatePathFromSlug } from '../actions/get-template-path-from-slug';
+import {
+  renderTemplateByPath,
+  type TemplateRenderingResult,
+} from '../actions/render-template-by-path';
+import { isBuilding, isPreviewDevelopment } from '../app/env';
+import { useTemplates } from '../contexts/templates';
+import { containsTemplate } from '../utils/contains-template';
+import { useHotreload } from './use-hot-reload';
+
+export const useTemplateRenderingResult = (
+  templatePath: string,
+  serverTemplateRenderedResult: TemplateRenderingResult,
+) => {
+  const [renderingResult, setRenderingResult] = useState(
+    serverTemplateRenderedResult,
+  );
+
+  const { templatesDirectoryMetadata } = useTemplates();
+
+  if (!isBuilding && !isPreviewDevelopment) {
+    // biome-ignore lint/correctness/useHookAtTopLevel: This is fine since isBuilding does not change at runtime
+    useHotreload(async (changes) => {
+      for await (const change of changes) {
+        const relativePathForChangedFile =
+          // ex: apple-receipt.tsx
+          // it will be the path relative to the templates directory, so it is already
+          // going to be equivalent to the slug
+          change.filename;
+
+        if (
+          !containsTemplate(
+            relativePathForChangedFile,
+            templatesDirectoryMetadata,
+          )
+        ) {
+          continue;
+        }
+
+        const pathForChangedTemplate = await getTemplatePathFromSlug(
+          relativePathForChangedFile,
+        );
+
+        const newRenderingResult = await renderTemplateByPath(
+          pathForChangedTemplate,
+          true,
+        );
+
+        if (pathForChangedTemplate === templatePath) {
+          setRenderingResult(newRenderingResult);
+        }
+      }
+    });
+  }
+
+  return renderingResult;
+};

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};

package/src/utils/constants.ts

@@ -0,0 +1,8 @@
+import type { Transition } from 'framer-motion';
+
+export const tabTransition: Transition = {
+  type: 'spring',
+  stiffness: 2000,
+  damping: 80,
+  mass: 1,
+};

package/src/utils/contains-template.ts

@@ -0,0 +1,52 @@
+import type { TemplatesDirectory } from './get-templates-directory-metadata';
+
+export const removeFilenameExtension = (filename: string): string => {
+  const parts = filename.split('.');
+
+  if (parts.length > 1) {
+    return parts.slice(0, -1).join('.');
+  }
+
+  return filename;
+};
+
+export const containsTemplate = (
+  relativeTemplatePath: string,
+  directory: TemplatesDirectory,
+) => {
+  const templatePathSegments = relativeTemplatePath
+    .replace(directory.relativePath, '')
+    .split('/')
+    .filter(Boolean);
+
+  return containsTemplatePathSegments(templatePathSegments, directory);
+};
+
+const containsTemplatePathSegments = (
+  relativeTemplateSegments: string[],
+  directory: TemplatesDirectory,
+) => {
+  if (relativeTemplateSegments.length === 1) {
+    const templateFilename = removeFilenameExtension(
+      relativeTemplateSegments[0]!,
+    );
+    return directory.templateFilenames.includes(templateFilename);
+  }
+
+  const remainingPath = relativeTemplateSegments.join('/');
+
+  for (const subDirectory of directory.subDirectories) {
+    if (remainingPath.startsWith(subDirectory.directoryName)) {
+      const matchedSegments = subDirectory.directoryName
+        .split('/')
+        .filter(Boolean).length;
+
+      return containsTemplatePathSegments(
+        relativeTemplateSegments.slice(matchedSegments),
+        subDirectory,
+      );
+    }
+  }
+
+  return false;
+};

package/src/utils/convert-stack-with-sourcemap.ts

@@ -0,0 +1,79 @@
+import path from 'node:path';
+import { type RawSourceMap, SourceMapConsumer } from 'source-map-js';
+import * as stackTraceParser from 'stacktrace-parser';
+
+export const convertStackWithSourceMap = (
+  rawStack: string | undefined,
+
+  originalFilePath: string,
+  sourceMapToOriginalFile: RawSourceMap,
+): string | undefined => {
+  let stack: string | undefined;
+
+  const sourceRoot =
+    sourceMapToOriginalFile.sourceRoot ?? path.dirname(originalFilePath);
+
+  const getStackLineFromMethodNameAndSource = (
+    methodName: string,
+    source: string,
+    line: number | undefined | null,
+    column: number | undefined | null,
+  ) => {
+    const columnAndLine =
+      column || line
+        ? `${line ?? ''}${line && column ? ':' : ''}${column ?? ''}`
+        : undefined;
+    const sourceToDisplay = path.relative(sourceRoot, source);
+    return methodName === '<unknown>'
+      ? ` at ${sourceToDisplay}${columnAndLine ? `:${columnAndLine}` : ''}`
+      : ` at ${methodName} (${sourceToDisplay}${
+          columnAndLine ? `:${columnAndLine}` : ''
+        })`;
+  };
+
+  if (rawStack) {
+    const parsedStack = stackTraceParser.parse(rawStack);
+    const sourceMapConsumer = new SourceMapConsumer(sourceMapToOriginalFile);
+    const newStackLines = [] as string[];
+    for (const stackFrame of parsedStack) {
+      if (stackFrame.file === originalFilePath) {
+        if (stackFrame.column || stackFrame.lineNumber) {
+          const positionWithError = sourceMapConsumer.originalPositionFor({
+            column: stackFrame.column ?? 0,
+            line: stackFrame.lineNumber ?? 0,
+          });
+
+          newStackLines.push(
+            getStackLineFromMethodNameAndSource(
+              stackFrame.methodName,
+              // This can actually be null
+              positionWithError.source ?? stackFrame.file,
+              positionWithError.line,
+              positionWithError.column,
+            ),
+          );
+        } else {
+          newStackLines.push(
+            getStackLineFromMethodNameAndSource(
+              stackFrame.methodName,
+              stackFrame.file,
+              stackFrame.lineNumber,
+              stackFrame.column,
+            ),
+          );
+        }
+      } else if (stackFrame.file) {
+        const stackLine = getStackLineFromMethodNameAndSource(
+          stackFrame.methodName,
+          stackFrame.file,
+          stackFrame.lineNumber,
+          stackFrame.column,
+        );
+        newStackLines.push(stackLine);
+      }
+    }
+    stack = newStackLines.join('\n');
+  }
+
+  return stack;
+};

package/src/utils/copy-text-to-clipboard.ts

@@ -0,0 +1,7 @@
+export const copyTextToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    throw new Error('Not able to copy');
+  }
+};

package/src/utils/create-jsx-runtime.ts

@@ -0,0 +1,47 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import esbuild from 'esbuild';
+
+/**
+ * Bundles the JSX runtime with the specified {@link cwd}. This is needed because the JSX runtime
+ * imports React's which is forcefully the production one if the `NODE_ENV` is set to `production`,
+ * even though we want to use the development one.
+ *
+ * It bundles into `/node_modules/.react-pdf-jsx-runtime` with the root being the {@link cwd}.
+ */
+export const createJsxRuntime = async (
+  cwd: string,
+  originalJsxRuntimePath: string,
+) => {
+  const jsxRuntimePath = path.join(
+    cwd,
+    'node_modules',
+    '.react-pdf-jsx-runtime',
+  );
+  if (!fs.existsSync(jsxRuntimePath)) {
+    await fs.promises.mkdir(jsxRuntimePath, {
+      recursive: true,
+    });
+    await fs.promises.writeFile(
+      path.join(jsxRuntimePath, 'package.json'),
+      '{"type": "commonjs"}',
+      'utf8',
+    );
+  }
+  await esbuild.build({
+    bundle: true,
+    outfile: path.join(jsxRuntimePath, 'jsx-dev-runtime.js'),
+    format: 'cjs',
+    logLevel: 'silent',
+    stdin: {
+      resolveDir: cwd,
+      sourcefile: 'jsx-dev-runtime.js',
+      loader: 'js',
+      contents: await fs.promises.readFile(
+        path.join(originalJsxRuntimePath, 'jsx-dev-runtime.js'),
+      ),
+    },
+  });
+
+  return jsxRuntimePath;
+};

package/src/utils/esbuild/escape-string-for-regex.ts

@@ -0,0 +1,3 @@
+export function escapeStringForRegex(string: string) {
+  return string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+}

package/src/utils/esbuild/renderring-utilities-exporter.ts

@@ -0,0 +1,64 @@
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import type { Loader, PluginBuild, ResolveOptions } from 'esbuild';
+import { escapeStringForRegex } from './escape-string-for-regex';
+
+/**
+ * Made to export the `render` function out of the user's PDF template
+ * so that issues like React version mismatches don't
+ * happen.
+ *
+ * This also exports the `createElement` from the user's React version as well
+ * to avoid mismatches.
+ *
+ * This avoids multiple versions of React being involved, i.e., the version
+ * in the CLI vs. the version the user has on their templates.
+ */
+export const renderingUtilitiesExporter = (pdfTemplates: string[]) => ({
+  name: 'rendering-utilities-exporter',
+  setup: async (b: PluginBuild) => {
+    const filterOptions = await Promise.all(
+      pdfTemplates.map(async (templatePath) =>
+        escapeStringForRegex(await fs.realpath(templatePath)),
+      ),
+    );
+    b.onLoad(
+      {
+        filter: new RegExp(filterOptions.join('|')),
+      },
+      async ({ path: pathToFile }) => {
+        return {
+          contents: `${await fs.readFile(pathToFile, 'utf8')};
+          export { render } from 'react-pdf-module-that-will-export-render'
+          export { createElement as reactPDFCreateReactElement } from 'react';
+        `,
+          loader: path.extname(pathToFile).slice(1) as Loader,
+        };
+      },
+    );
+
+    b.onResolve(
+      { filter: /^react-pdf-module-that-will-export-render$/ },
+      async (args) => {
+        const options: ResolveOptions = {
+          kind: 'import-statement',
+          importer: args.importer,
+          resolveDir: args.resolveDir,
+          namespace: args.namespace,
+        };
+        let result = await b.resolve('@ahmedrowaihi/pdf-forge-core', options);
+        if (result.errors.length === 0) {
+          return result;
+        }
+
+        // If @ahmedrowaihi/pdf-forge-core does not exist, resolve to @ahmedrowaihi/pdf-forge-components
+        result = await b.resolve('@ahmedrowaihi/pdf-forge-components', options);
+        if (result.errors.length > 0 && result.errors[0]) {
+          result.errors[0].text =
+            "Failed trying to import `render` from either `@ahmedrowaihi/pdf-forge-core` or `@ahmedrowaihi/pdf-forge-components` to be able to render your PDF template.\n Maybe you don't have either of them installed?";
+        }
+        return result;
+      },
+    );
+  },
+});

package/src/utils/get-line-and-column-from-offset.ts

@@ -0,0 +1,11 @@
+export const getLineAndColumnFromOffset = (
+  offset: number,
+  content: string,
+): [line: number, column: number] => {
+  const lineBreaks = [...content.slice(0, offset).matchAll(/\n|\r|\r\n/g)];
+
+  const line = lineBreaks.length + 1;
+  const column = offset - (lineBreaks[lineBreaks.length - 1]?.index ?? 0);
+
+  return [line, column];
+};