feat: introduce @previewjs/config-helper-nextjs to simplify Next.js c…

…onfiguration (#1156)

.github/workflows/release-components.yaml

@@ -57,6 +57,14 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
       - if: steps.checkConfigVersion.outputs.changed == 'true'
         run: cd config && pnpm publish --no-git-checks --access public
+      - id: checkConfigHelperNextjsVersion
+        uses: EndBug/version-check@v2.1.1
+        with:
+          diff-search: true
+          file-name: ./config-helpers/nextjs/package.json
+          token: ${{ secrets.GITHUB_TOKEN }}
+      - if: steps.checkConfigHelperNextjsVersion.outputs.changed == 'true'
+        run: cd config-helpers/nextjs && pnpm publish --no-git-checks --access public
       - id: checkCoreVersion
         uses: EndBug/version-check@v2.1.1
         with:

.github/workflows/test-app-e2e.yaml

@@ -68,9 +68,11 @@ jobs:
       - uses: pnpm/action-setup@v2.2.4
         with:
           run_install: true
-      - run: pnpm turbo run build --scope="@previewjs/e2e-test-runner" --include-dependencies
+      - run: pnpm turbo run build
+        env:
+          SKIP_PREFLIGHT_CHECK: "true"
       - run: pnpm install # necessary to link e2e-test-runner
-      - run: pnpm turbo run e2e-test --scope="@previewjs/app" --include-dependencies
+      - run: pnpm turbo run e2e-test
         env:
           GROUP_INDEX: ${{ matrix.group }}
           GROUP_COUNT: 3

.gitignore

@@ -8,6 +8,7 @@ pro
 *.vsix
 .idea
 .DS_Store
+.svelte-kit
 .turbo
 .pnpm-debug.log
 yarn-debug.log

app/tests/smoke-tests.spec.ts

@@ -76,7 +76,7 @@ export const smokeTests = fs
               await controller.props.editor.isReady();
             }
             await controller.takeScreenshot(
-              "#ready",
+              iframe,
               path.join(
                 __dirname,
                 "..",
@@ -86,6 +86,7 @@ export const smokeTests = fs
                 `${appName}.png`
               )
             );
+            console.error("E");
           }
         );
       },

config-helpers/nextjs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Zenc Labs Pty Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

config-helpers/nextjs/build.config.ts

@@ -0,0 +1,8 @@
+export default {
+  entries: ["./src/index"],
+  rollup: {
+    emitCJS: true,
+  },
+  declaration: true,
+  clean: true,
+};

config-helpers/nextjs/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@previewjs/config-helper-nextjs",
+  "version": "0.0.1",
+  "license": "MIT",
+  "author": {
+    "name": "François Wouts",
+    "email": "f@zenc.io"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fwouts/previewjs"
+  },
+  "bugs": {
+    "url": "https://github.com/fwouts/previewjs/issues"
+  },
+  "homepage": "https://previewjs.com",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "prepublish": "cd .. && pnpm turbo run build --scope=@previewjs/config-helper-nextjs --no-deps --include-dependencies",
+    "build": "tsc && unbuild"
+  },
+  "devDependencies": {
+    "@types/react": "18.0.24",
+    "next": "13.0.0",
+    "react": "18.2.0",
+    "unbuild": "0.9.1"
+  },
+  "peerDependencies": {
+    "next": "*",
+    "react": "*"
+  }
+}

config-helpers/nextjs/src/index.tsx

@@ -0,0 +1,55 @@
+import * as NextImage from "next/image";
+import * as NextRouter from "next/router";
+import React from "react";
+
+const OriginalNextImage = NextImage.default;
+
+// Patch Image to disable optimisations within Preview.js.
+Object.defineProperty(NextImage, "default", {
+  configurable: true,
+  value: (props: NextImage.ImageProps) => (
+    <OriginalNextImage {...props} unoptimized />
+  ),
+});
+
+// Patch useRouter() to fake the router within Preview.js.
+Object.defineProperty(NextRouter, "useRouter", {
+  configurable: true,
+  value: () => ({
+    locale: "en-US",
+    route: "/",
+    pathname: "/",
+    query: {},
+    asPath: "/",
+    push() {
+      return Promise.resolve(true);
+    },
+    replace() {
+      return Promise.resolve(true);
+    },
+    reload() {
+      // Do nothing.
+    },
+    back() {
+      // Do nothing.
+    },
+    prefetch() {
+      return Promise.resolve();
+    },
+    beforePopState() {
+      // Do nothing.
+    },
+    events: {
+      on() {
+        // Do nothing.
+      },
+      off() {
+        // Do nothing.
+      },
+      emit() {
+        // Do nothing.
+      },
+    },
+    isFallback: false,
+  }),
+});

config-helpers/nextjs/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "jsx": "react"
+  },
+  "include": ["src"]
+}

e2e-test-runner/src/helpers/app-controller.ts

@@ -127,9 +127,7 @@ export class AppController {
     }
   }
 
-  async takeScreenshot(waitForSelector: string, destinationPath: string) {
-    const preview = await this.previewIframe();
-    await preview.waitForSelector(waitForSelector);
+  async takeScreenshot(preview: playwright.Frame, destinationPath: string) {
     preview.addStyleTag({
       content: `
 *,
@@ -154,10 +152,18 @@ export class AppController {
           if (img.complete) {
             return;
           }
-          return new Promise((resolve) => {
-            img.addEventListener("load", resolve);
-            // If an image fails to load, ignore it.
-            img.addEventListener("error", resolve);
+          return new Promise<unknown>((resolve) => {
+            const observer = new IntersectionObserver((entries) => {
+              if (entries[0]?.isIntersecting) {
+                img.addEventListener("load", resolve);
+                // If an image fails to load, ignore it.
+                img.addEventListener("error", resolve);
+              } else {
+                resolve(null);
+              }
+              observer.unobserve(img);
+            });
+            observer.observe(img);
           });
         })
       );