Playwright Visual Snapshot Comparision Test

.gitignore

@@ -2,3 +2,11 @@ node_modules
 .DS_store
 .DS_Store
 coverage
+examples/node_modules
+examples/dist
+visual-tests/failed-results
+visual-tests/certified-snapshots/*-local
+.tmp
+.env
+*.tgz
+.vscode/launch.json

Dockerfile

@@ -0,0 +1,24 @@
+#FROM mcr.microsoft.com/playwright:v1.49.0-jammy
+FROM mcr.microsoft.com/playwright:v1.49.0-noble
+
+# Set working directory
+WORKDIR /work
+
+# Install required tools
+RUN apt-get update && apt-get install -y curl xz-utils
+
+# Download and install Node.js v20.19.3
+RUN curl -fsSL https://nodejs.org/dist/v20.19.3/node-v20.19.3-linux-x64.tar.xz \
+    -o node.tar.xz && \
+    tar -xf node.tar.xz -C /usr/local --strip-components=1 && \
+    rm node.tar.xz
+
+# Verify installation
+RUN node -v && npm -v
+
+# Copy the necessary files to the container
+COPY package.json package.json
+
+
+# Set the entry point command
+CMD ["/bin/bash", "-c", "echo 'Must run with Visual Test Runner: `npm run test:visual -- -- --ci`'"]

examples/.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

examples/.env.example

@@ -0,0 +1,4 @@
+# all environment variables need to prefixed with VITE_*
+# to read, use import.meta.env.VITE_FOO
+
+# VITE_FOO=bar

examples/.gitattributes

@@ -0,0 +1,3 @@
+*.js text eol=lf
+*.cjs text eol=lf
+*.jsx text eol=lf

examples/README.md

@@ -0,0 +1,49 @@
+# example
+
+### example
+
+
+Welcome to the _example_ Lightning 3 Blits App!
+
+### Getting started
+
+Follow the steps below to get your Lightning 3 Blits App up and running in no time.
+
+#### IDE setup
+
+It is highly recommended to install the Blits [VS-code extension](https://marketplace.visualstudio.com/items?itemName=LightningJS.lightning-blits) which will give you template highlighting and improved autocompletion.
+
+#### Project setup
+
+Run the following command to install the dependencies of your App:
+
+```sh
+npm install
+```
+
+#### Build and run in development mode
+
+Run your App in development mode:
+
+```sh
+npm run dev
+```
+
+This command uses Vite to fire up a local server, with Hot Reloading support. Visit the provided link in your web browser to see the App in action.
+
+#### Build the App for production
+
+Create an optimized and minified version of your App:
+
+```sh
+npm run build
+```
+
+This will create a production version of the app in the `dist` folder.
+
+
+### Resources
+
+- [Blits documentation](https://lightningjs.io/v3-docs/blits/getting_started/intro.html) - official documentation
+- [Blits Example App](https://blits-demo.lightningjs.io/?source=true) - a great reference to learn by example
+- [Blits Components](https://lightningjs.io/blits-components.html) - off-the-shelf, basic and performant reference components

examples/eslint.config.cjs

@@ -0,0 +1,60 @@
+const prettier = require('eslint-plugin-prettier')
+const globals = require('globals')
+const js = require('@eslint/js')
+
+const { FlatCompat } = require('@eslint/eslintrc')
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+module.exports = [
+  ...compat.extends('eslint:recommended', 'plugin:prettier/recommended', 'prettier'),
+  {
+    plugins: {
+      prettier,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+
+      ecmaVersion: 2020,
+      sourceType: 'module',
+
+      parserOptions: {
+        parser: 'babel-eslint',
+      },
+    },
+
+    rules: {
+      'no-console': 'off',
+      'no-debugger': 'off',
+      quotes: [2, 'single', 'avoid-escape'],
+      semi: [2, 'never'],
+      'no-extra-boolean-cast': 'off',
+
+      'no-unused-vars': [
+        1,
+        {
+          argsIgnorePattern: 'res|next|^err',
+        },
+      ],
+
+      'prettier/prettier': [
+        'error',
+        {
+          trailingComma: 'es5',
+          singleQuote: true,
+          tabWidth: 2,
+          semi: false,
+          printWidth: 100,
+        },
+      ],
+    },
+  },
+]

examples/index.html

@@ -0,0 +1,13 @@
+<html>
+    <head>
+      <style>
+        html, body, * { padding: 0; margin: 0}
+      </style>
+      <link rel="icon" href="assets/favicon.svg" type="image/svg">
+      <meta charset="UTF-8" />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="src/index.js"></script>
+    </body>
+</html>