Merge branch 'master' into release

Author: emilefokkema

.github/workflows/node.js.yml

@@ -18,10 +18,10 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
-    - name: Use Node.js 16.x
+    - name: Use Node.js 18.x
       uses: actions/setup-node@v3
       with:
-        node-version: '16.x'
+        node-version: '18.x'
         cache: 'npm'
     - run: npm ci
     - run: npm run build

.github/workflows/publish-docs.yml

@@ -8,10 +8,10 @@ jobs:
         runs-on: windows-latest
         steps:
             - uses: actions/checkout@v3
-            - name: Use Node.js 16.x
+            - name: Use Node.js 18.x
               uses: actions/setup-node@v3
               with:
-               node-version: '16.x'
+               node-version: '18.x'
                cache: 'npm'
             - run: npm ci
             - run: npm run docs:build

.github/workflows/update-ci-snapshots.yml

@@ -8,10 +8,10 @@ jobs:
         runs-on: windows-latest
         steps:
             - uses: actions/checkout@v3
-            - name: Use Node.js 16.x
+            - name: Use Node.js 18.x
               uses: actions/setup-node@v3
               with:
-                node-version: '16.x'
+                node-version: '18.x'
                 cache: 'npm'
             - run: npm ci
             - run: npm run test-e2e --- -u

.gitignore

@@ -15,4 +15,5 @@ docs/.vitepress/api-docs/.temp
 test-e2e/test-page-lib/impl/dist
 .updated-snapshots
 **/dist/**/*
-!dist
+!dist
+*.tsbuildinfo

README.md

@@ -23,7 +23,7 @@ var context = infiniteCanvas.getContext("2d");
 Include `InfiniteCanvas` in your web page:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].6/dist/infinite-canvas.umd.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].7/dist/infinite-canvas.umd.cjs"></script>
 ```
 
 or install it using npm:
@@ -49,4 +49,9 @@ npm run test-e2e
 ```
 which will start a server that serves pages in which `InfiniteCanvas` is used, and which will then run `jest` tests that use [Puppeteer](https://pptr.dev/) to manipulate those pages and [`jest-image-snapshot`](https://github.com/americanexpress/jest-image-snapshot#readme) to compare screenshots.
 
+## Local development
+
+First run `npm run dev-app:build` once. Then `npm run dev` will run an app that displays all manner of use cases for InfiniteCanvas, served by Vite.
+
+
 *Even though not much has happened in this repository lately, I have not forgotten about it. Quite to the contrary, there are a lot more features I'm planning to add in the not-too-distant future.*

dev-app/backend/constants.ts

@@ -0,0 +1 @@
+export const PORT = 8080;

dev-app/backend/frontend-vite-plugin.ts

@@ -0,0 +1,18 @@
+import { type PluginOption } from 'vite'
+import { type Express } from 'express'
+import { createRouter } from './router';
+
+function devBackend(): PluginOption{
+    let apiRouter: Express | undefined;
+    return {
+        name: 'vite-plugin-dev-app-backend',
+        apply: 'serve',
+        configureServer(server){
+            server.middlewares.use('/api', apiRouter || (apiRouter = createRouter()))
+        }
+    }
+}
+
+export function backend(): PluginOption[]{
+    return [devBackend()]
+}

dev-app/backend/index.ts

@@ -0,0 +1 @@
+export  * from './frontend-vite-plugin'

dev-app/backend/router.ts

@@ -0,0 +1,39 @@
+import { default as express, type Express, type Request, type Response, json } from 'express'
+import { ExampleDescription } from '../shared';
+import { createExample, getExamplesMetadata } from '../../examples/access'
+import { getTestCasesMetadata } from '../../test-cases/backend'
+import { CreateExampleRequest } from '../../examples/shared';
+
+function logRequest(req: Request, res: Response): void{
+    console.log(`responding with ${res.statusCode} to ${req.path}`)
+}
+
+export function createRouter(): Express{
+    const app = express();
+    app.use(json())
+    app.get('/examples', async (_, res, next) => {
+        const [examples, testCases] = await Promise.all([getExamplesMetadata(), getTestCasesMetadata()])
+        const exampleDescriptions: ExampleDescription[] = examples.map(({dirName, title}) => ({
+            id: dirName,
+            title,
+            kind: 'use-case'
+        }));
+        const testCaseDescriptions: ExampleDescription[] = testCases.map(({id, title}) => ({
+            id,
+            title,
+            kind: 'test-case'
+        }))
+        res.json(exampleDescriptions.concat(testCaseDescriptions))
+        next()
+    }, logRequest)
+    app.post('/examples/create', async (req, res) => {
+        const {dirName, title} = await createExample(req.body)
+        const newDescription: ExampleDescription = {
+            id: dirName,
+            title,
+            kind: 'use-case'
+        };
+        res.json(newDescription)
+    })
+    return app;
+}

dev-app/backend/run.ts

@@ -0,0 +1,28 @@
+import http from 'http'
+import fs from 'fs'
+import { createServer } from 'vite'
+import express from 'express'
+import { fileURLToPath } from 'url'
+import { createRouter } from './router';
+import { PORT } from './constants';
+import { createViteConfig } from '../examples-runner/create-vite-config';
+
+async function run(){
+    const app = express();
+    const server = http.createServer(app)
+    app.use('/api', createRouter())
+    const frontendPath = fileURLToPath(new URL('../frontend/dist', import.meta.url))
+    if(!fs.existsSync(frontendPath)){
+        console.warn(`Directory '${frontendPath}' does not exist. Did you run \`npm run dev-app:build\`?`)
+        return;
+    }
+    app.use(express.static(frontendPath))
+    app.use((await createServer(createViteConfig(server))).middlewares)
+    
+    await new Promise<void>(res => {
+        server.listen(PORT, res);
+    })
+    console.log(`http://localhost:${PORT}`)
+}
+
+run();

dev-app/backend/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "extends": "../../tsconfig.node.json",
+    "include": [
+      "**/*.ts",
+      "../shared/**/*.ts",
+      "../examples-runner/**/*.ts",
+      "../../utils/vite/**/*.ts"
+    ],
+    "exclude": ["../examples-runner/test-case/src/**/*.ts"],
+    "references": [
+      {"path": "../../test-cases/tsconfig.node.json"},
+      {"path": "../../examples/tsconfig.node.json"}
+    ],
+    "compilerOptions": {
+      "composite": true,
+      "noEmit": true,
+      "rootDir": "../.."
+    }
+  }

dev-app/examples-runner/add-runner.ts

@@ -0,0 +1,32 @@
+import { PluginOption } from 'vite'
+import { fileURLToPath } from "url";
+import { createViteConfig as createExamplesViteConfig, ExampleRunnerOptions } from '../../examples/runner'
+import { serveOther, OtherServerOptions } from '../../utils/vite';
+import { TestCaseRunnerOptions } from './test-case/options';
+import { createViteConfig as createTestCasesViteConfig } from './test-case/create-vite-config'
+
+function serveTestCases(options: TestCaseRunnerOptions, server: OtherServerOptions): PluginOption{
+    return serveOther({
+        id: 'test-cases',
+        path: '/test-case',
+        config: createTestCasesViteConfig(options),
+        server
+    })
+}
+
+function serveExamples(options: ExampleRunnerOptions, server: OtherServerOptions): PluginOption{
+    return serveOther({
+        id: 'examples',
+        path: '/examples',
+        config: createExamplesViteConfig(options),
+        server
+    })
+}
+
+export function addRunner(server: OtherServerOptions): PluginOption[]{
+    const infiniteCanvasPath = fileURLToPath(new URL('../../src/infinite-canvas.ts', import.meta.url))
+    return [
+        serveExamples({infiniteCanvasPath}, server),
+        serveTestCases({infiniteCanvasPath}, server),
+    ]
+}

dev-app/examples-runner/create-vite-config.ts

@@ -0,0 +1,23 @@
+import http from 'http'
+import { InlineConfig } from "vite";
+import { fileURLToPath } from "url";
+import { addRunner } from './add-runner'
+import { PORT } from "../backend/constants";
+
+export function createViteConfig(server: http.Server): InlineConfig{
+    const root = fileURLToPath(new URL('.', import.meta.url));
+    return {
+        root,
+        optimizeDeps: {
+            exclude: ['virtual:test-cases-list', 'infinite-canvas']
+        },
+        plugins: [addRunner({port: PORT, server})],
+        server: {
+            middlewareMode: { server: server },
+            hmr: {
+                port: PORT,
+                server: server
+            }
+        }
+    };
+}

dev-app/examples-runner/test-case/create-vite-config.ts

@@ -0,0 +1,18 @@
+import { fileURLToPath } from "url";
+import { InlineConfig } from "vite";
+import { TestCaseRunnerOptions } from "./options";
+import { addDarkTheme } from "../../../utils/dark-theme/vite-plugin";
+import { addTestCasesList } from "../../../test-cases/vite-plugins";
+
+export function createViteConfig({infiniteCanvasPath}: TestCaseRunnerOptions): InlineConfig{
+    const root = fileURLToPath(new URL('.', import.meta.url))
+    return { 
+        root,
+        resolve: {
+            alias: {
+                'infinite-canvas': infiniteCanvasPath
+            }
+        },
+        plugins: [addDarkTheme(), addTestCasesList()]
+     }
+}

dev-app/examples-runner/test-case/index-dark.css

@@ -0,0 +1,9 @@
+:root{
+    background-color: #333;
+    --light: #bbb;
+    color: var(--light);
+    
+}
+.canvas-container{
+    border-color: var(--light)
+}

dev-app/examples-runner/test-case/index.css

@@ -0,0 +1,17 @@
+:root{
+    --dark: #333;
+    font-family: Roboto, sans-serif;
+    color: var(--dark);
+}
+.canvas-display{
+    display: inline-block;
+}
+.canvas-container{
+    width: 400px;
+    height: 400px;
+    border: 1px solid var(--dark);
+}
+.canvas-container canvas{
+    width: 100%;
+    height: 100%;
+}

dev-app/examples-runner/test-case/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Test case</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <link rel="stylesheet" type="text/css" href="index.css"/>
+    </head>
+    <body>
+        <div class="canvas-display">
+            <div class="canvas-container">
+                <canvas width="400" height="400" id="regular-canvas"></canvas>
+            </div>
+            <div class="canvas-display-label">
+                regular canvas
+            </div>
+        </div>
+        <div class="canvas-display">
+            <div class="canvas-container">
+                <canvas width="400" height="400" id="infinite-canvas"></canvas>
+            </div>
+            <div class="canvas-display-label">
+                infinite canvas
+            </div>
+        </div>
+        <script type="module" src="src/main.ts"></script>
+    </body>
+</html>

dev-app/examples-runner/test-case/options.ts

@@ -0,0 +1,3 @@
+export interface TestCaseRunnerOptions{
+    infiniteCanvasPath: string
+}

dev-app/examples-runner/test-case/src/canvas-element.ts

@@ -0,0 +1,27 @@
+import type { TestCaseDistortion } from "test-case";
+
+export interface CanvasElement{
+    ctx: CanvasRenderingContext2D;
+    el: HTMLCanvasElement;
+    applyDistortion(distortion: TestCaseDistortion): void
+    reset(): void
+}
+
+export function createCanvasElement(el: HTMLCanvasElement): CanvasElement{
+    const width = el.width;
+    const height = el.height;
+    const ctx = el.getContext('2d') as CanvasRenderingContext2D;
+    function reset(): void{
+        el.width = width;
+        el.height = height;
+        el.style.removeProperty('width')
+        el.style.removeProperty('height')
+    }
+    function applyDistortion(distortion: TestCaseDistortion): void{
+        el.style.width = distortion.screenWidth;
+        el.style.height = distortion.screenHeight;
+        el.width = distortion.viewboxWidth;
+        el.height = distortion.viewboxHeight;
+    }
+    return { el, ctx, reset, applyDistortion }
+}

dev-app/examples-runner/test-case/src/infinite-display.ts

@@ -0,0 +1,17 @@
+import type { TestCase } from "test-case";
+import InfiniteCanvas from "infinite-canvas";
+import type { TestCaseDisplay } from "./test-case-display";
+import type { CanvasElement } from "./canvas-element";
+
+export function createInfiniteDisplay(canvasEl: CanvasElement): TestCaseDisplay{
+    function displayTestCase(testCase: TestCase): void{
+        canvasEl.reset();
+        if(testCase.distortion){
+            canvasEl.applyDistortion(testCase.distortion);
+        }
+        const infCanvas = new InfiniteCanvas(canvasEl.el);
+        const ctx = infCanvas.getContext('2d');
+        testCase.code(ctx);
+    }
+    return { displayTestCase }
+}