EmbedFrame.tsx

import blobUtil from 'blob-util';
import React, { useRef, useEffect, useMemo } from 'react';
import styled from 'styled-components';
import loopProtect from 'loop-protect';
import { JSHINT } from 'jshint';
import decomment from 'decomment';
import { resolvePathToFile } from '../../../server/utils/filePath';
import { getConfig } from '../../utils/getConfig';
import {
  MEDIA_FILE_QUOTED_REGEX,
  STRING_REGEX,
  PLAINTEXT_FILE_REGEX,
  EXTERNAL_LINK_REGEX,
  NOT_EXTERNAL_LINK_REGEX
} from '../../../server/utils/fileUtils';
import { getAllScriptOffsets } from '../../utils/consoleUtils';
import { registerFrame } from '../../utils/dispatcher';
import { createBlobUrl } from './filesReducer';
import type { PreviewFile } from './filesReducer';
import resolvePathsForElementsWithAttribute from '../../../server/utils/resolveUtils';

interface EmbedFrameProps {
  files: PreviewFile[];
  isPlaying: boolean;
  basePath: string;
  gridOutput: boolean;
  textOutput: boolean;
}

interface InjectLocalFilesOptions {
  basePath: string;
  gridOutput: boolean;
  textOutput: boolean;
}

let objectUrls: Record<string, string> = {};
let objectPaths: Record<string, string> = {};

const Frame = styled.iframe`
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  border-width: 0;
`;

function resolveCSSLinksInString(
  content: string,
  files: PreviewFile[]
): string {
  let newContent = content;
  const cssFileStrings = content.match(STRING_REGEX) || [];
  cssFileStrings.forEach((cssFileString) => {
    if (cssFileString.match(MEDIA_FILE_QUOTED_REGEX)) {
      const filePath = cssFileString.slice(1, -1);
      const quoteCharacter = cssFileString[0];
      const resolvedFile = resolvePathToFile(filePath, files) as
        | PreviewFile
        | false
        | undefined;
      if (resolvedFile && resolvedFile.url) {
        newContent = newContent.replace(
          cssFileString,
          quoteCharacter + resolvedFile.url + quoteCharacter
        );
      }
    }
  });
  return newContent;
}

function jsPreprocess(jsText: string): string {
  let newContent = jsText;
  // check the code for js errors before sending it to strip comments
  // or loops.
  JSHINT(newContent);

  if (JSHINT.errors.length === 0) {
    newContent = decomment(newContent, {
      ignore: /\/\/\s*noprotect/g,
      space: true
    });
    newContent = loopProtect(newContent);
  }
  return newContent;
}

function resolveJSLinksInString(content: string, files: PreviewFile[]): string {
  let newContent = content;
  const jsFileStrings = content.match(STRING_REGEX) || [];
  jsFileStrings.forEach((jsFileString) => {
    if (jsFileString.match(MEDIA_FILE_QUOTED_REGEX)) {
      const filePath = jsFileString.slice(1, -1);
      const quoteCharacter = jsFileString[0];
      const resolvedFile = resolvePathToFile(filePath, files) as
        | PreviewFile
        | false
        | undefined;

      if (resolvedFile) {
        if (resolvedFile.url) {
          newContent = newContent.replace(
            jsFileString,
            quoteCharacter + resolvedFile.url + quoteCharacter
          );
        } else if (resolvedFile.name.match(PLAINTEXT_FILE_REGEX)) {
          newContent = newContent.replace(
            jsFileString,
            quoteCharacter + resolvedFile.blobUrl + quoteCharacter
          );
        }
      }
    }
  });

  return jsPreprocess(newContent);
}

function resolveScripts(sketchDoc: Document, files: PreviewFile[]): void {
  const scriptsInHTML = sketchDoc.getElementsByTagName('script');
  const scriptsInHTMLArray = Array.prototype.slice.call(scriptsInHTML);
  scriptsInHTMLArray.forEach((script) => {
    const srcAttr = script.getAttribute('src');
    if (srcAttr && srcAttr.match(NOT_EXTERNAL_LINK_REGEX) !== null) {
      const resolvedFile = resolvePathToFile(srcAttr, files) as
        | PreviewFile
        | false
        | undefined;
      if (resolvedFile) {
        if (resolvedFile.url) {
          script.setAttribute('src', resolvedFile.url);
        } else {
          const blobUrl = createBlobUrl(resolvedFile);
          script.setAttribute('src', blobUrl);
          const blobPath = blobUrl.split('/').pop();
          if (blobPath && resolvedFile.filePath) {
            objectUrls[
              blobUrl
            ] = `${resolvedFile.filePath}/${resolvedFile.name}`;
            objectPaths[blobPath] = resolvedFile.name;
          }
        }
      }
    } else if (srcAttr && srcAttr.match(EXTERNAL_LINK_REGEX) === null) {
      script.setAttribute('crossorigin', '');
      script.innerHTML = resolveJSLinksInString(script.innerHTML, files);
    }
  });
}

function resolveStyles(sketchDoc: Document, files: PreviewFile[]): void {
  const inlineCSSInHTML = sketchDoc.getElementsByTagName('style');
  const inlineCSSInHTMLArray = Array.prototype.slice.call(inlineCSSInHTML);
  inlineCSSInHTMLArray.forEach((style) => {
    style.innerHTML = resolveCSSLinksInString(style.innerHTML, files);
  });

  const cssLinksInHTML = sketchDoc.querySelectorAll('link[rel="stylesheet"]');
  const cssLinksInHTMLArray = Array.prototype.slice.call(cssLinksInHTML);
  cssLinksInHTMLArray.forEach((css) => {
    const hrefAttr = css.getAttribute('href');
    if (hrefAttr && hrefAttr.match(NOT_EXTERNAL_LINK_REGEX) !== null) {
      const resolvedFile = resolvePathToFile(hrefAttr, files) as
        | PreviewFile
        | false
        | undefined;
      if (resolvedFile) {
        if (resolvedFile.url) {
          css.href = resolvedFile.url;
        } else {
          const style = sketchDoc.createElement('style');
          style.innerHTML = `\n${resolvedFile.content}`;
          sketchDoc.head.appendChild(style);
          if (css.parentElement) {
            css.parentElement.removeChild(css);
          }
        }
      }
    }
  });
}

function resolveJSAndCSSLinks(files: PreviewFile[]): PreviewFile[] {
  const newFiles: PreviewFile[] = [];
  files.forEach((file) => {
    const newFile = { ...file };
    if (file.name.match(/.*\.js$/i)) {
      newFile.content = resolveJSLinksInString(newFile.content, files);
    } else if (file.name.match(/.*\.css$/i)) {
      newFile.content = resolveCSSLinksInString(newFile.content, files);
    }
    newFiles.push(newFile);
  });
  return newFiles;
}

function addLoopProtect(sketchDoc: Document): void {
  const scriptsInHTML = sketchDoc.getElementsByTagName('script');
  const scriptsInHTMLArray = Array.prototype.slice.call(scriptsInHTML);
  scriptsInHTMLArray.forEach((script) => {
    script.innerHTML = jsPreprocess(script.innerHTML); // eslint-disable-line
  });
}

function injectLocalFiles(
  files: PreviewFile[],
  htmlFile: PreviewFile,
  options: InjectLocalFilesOptions
): string {
  const { basePath, gridOutput, textOutput } = options;
  objectUrls = {};
  objectPaths = {};
  const resolvedFiles = resolveJSAndCSSLinks(files);
  const parser = new DOMParser();
  const sketchDoc = parser.parseFromString(htmlFile.content, 'text/html');

  const base = sketchDoc.createElement('base');
  base.href = `${window.origin}${basePath}${basePath.length > 1 && '/'}`;
  sketchDoc.head.appendChild(base);

  resolvePathsForElementsWithAttribute('src', sketchDoc, resolvedFiles);
  resolvePathsForElementsWithAttribute('href', sketchDoc, resolvedFiles);

  resolveScripts(sketchDoc, resolvedFiles);
  resolveStyles(sketchDoc, resolvedFiles);

  if (textOutput || gridOutput) {
    const scriptElement = sketchDoc.createElement('script');
    let textCode = '';
    if (textOutput) {
      textCode = 'if (!this._accessibleOutputs.text) this.textOutput();';
    }
    let gridCode = '';
    if (gridOutput) {
      gridCode = 'if (!this._accessibleOutputs.grid) this.gridOutput();';
    }
    const fxn = `p5.prototype.ensureAccessibleCanvas = function _ensureAccessibleCanvas() {
  ${textCode}
  ${gridCode}
};
p5.prototype.registerMethod('afterSetup', p5.prototype.ensureAccessibleCanvas);`;
    scriptElement.innerHTML = fxn;
    sketchDoc.head.appendChild(scriptElement);
  }

  const previewScripts = sketchDoc.createElement('script');
  previewScripts.src = `${
    window.location.origin
  }${getConfig('PREVIEW_SCRIPTS_URL', { nullishString: true })}`;
  previewScripts.setAttribute('crossorigin', '');
  sketchDoc.head.appendChild(previewScripts);

  const sketchDocString = `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
  const scriptOffs = getAllScriptOffsets(sketchDocString);
  const consoleErrorsScript = sketchDoc.createElement('script');
  consoleErrorsScript.innerHTML = `
    window.offs = ${JSON.stringify(scriptOffs)};
    window.objectUrls = ${JSON.stringify(objectUrls)};
    window.objectPaths = ${JSON.stringify(objectPaths)};
    window.editorOrigin = '${getConfig('EDITOR_URL')}';
  `;
  addLoopProtect(sketchDoc);
  sketchDoc.head.prepend(consoleErrorsScript);

  return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
}

function getHtmlFile(files: PreviewFile[]): PreviewFile | undefined {
  return files.filter((file) => file.name.match(/.*\.html$/i))[0];
}

function EmbedFrame({
  files,
  isPlaying,
  basePath,
  gridOutput,
  textOutput
}: EmbedFrameProps) {
  const iframe = useRef<HTMLIFrameElement>(null);
  const htmlFile = useMemo(() => getHtmlFile(files), [files]);
  const srcRef = useRef<string>();

  useEffect(() => {
    const cleanup = () => {};
    if (iframe.current) {
      const unsubscribe = registerFrame(
        iframe.current.contentWindow,
        window.origin
      );
      return () => {
        unsubscribe();
      };
    }
    return cleanup;
  }, []);

  function renderSketch() {
    const doc = iframe.current;
    if (isPlaying && htmlFile && doc) {
      const htmlDoc = injectLocalFiles(files, htmlFile, {
        basePath,
        gridOutput,
        textOutput
      });
      const generatedHtmlFile: PreviewFile = {
        id: '',
        name: 'index.html',
        content: htmlDoc,
        children: []
      };
      const htmlUrl = createBlobUrl(generatedHtmlFile);
      const toRevoke = srcRef.current;
      srcRef.current = htmlUrl;
      setTimeout(() => {
        doc.src = htmlUrl;
        if (toRevoke) {
          blobUtil.revokeObjectURL(toRevoke);
        }
      }, 0);
    } else if (doc) {
      doc.src = '';
    }
  }

  useEffect(renderSketch, [
    files,
    isPlaying,
    htmlFile,
    basePath,
    gridOutput,
    textOutput
  ]);
  return (
    <Frame
      aria-label="Sketch Preview"
      role="main"
      frameBorder="0"
      ref={iframe}
    />
  );
}

export default EmbedFrame;