Merge branch 'master' into release

Author: emilefokkema

.github/workflows/publish-docs.yml

@@ -0,0 +1,42 @@
+name: Publish docs
+
+on: 
+    workflow_dispatch
+
+jobs:
+    build:
+        runs-on: windows-latest
+        steps:
+            - uses: actions/checkout@v3
+            - name: Use Node.js 16.x
+              uses: actions/setup-node@v3
+              with:
+               node-version: '16.x'
+               cache: 'npm'
+            - run: npm ci
+            - run: npm run docs:build
+            - name: Upload pages artifact
+              uses: actions/upload-pages-artifact@v2
+              with:
+                path: docs/.vitepress/dist
+    
+    publish:
+        needs: build
+        # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+        permissions:
+            pages: write      # to deploy to Pages
+            id-token: write   # to verify the deployment originates from an appropriate source
+  
+        # Deploy to the github-pages environment
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+    
+        # Specify runner + deployment step
+        runs-on: ubuntu-latest
+        steps:
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v2 # or the latest "vX.X.X" version tag for this action
+
+

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

@@ -0,0 +1,23 @@
+name: Update E2E snapshots
+
+on: 
+    workflow_dispatch
+
+jobs:
+    update:
+        runs-on: windows-latest
+        steps:
+            - uses: actions/checkout@v3
+            - name: Use Node.js 16.x
+              uses: actions/setup-node@v3
+              with:
+                node-version: '16.x'
+                cache: 'npm'
+            - run: npm ci
+            - run: npm run test-e2e --- -u
+            - run: node scripts/copy-snapshot-changes.js
+            - name: Upload changed snapshots
+              uses: actions/upload-artifact@v3
+              with:
+                name: changed-snapshots
+                path: .updated-snapshots/

.gitignore

@@ -6,4 +6,11 @@ devtools/temp
 test/e2e/server/content/infinite-canvas.js
 test/e2e/server/content/test-case/rhino.jpg
 test/e2e/server/content/test-page/test-page-lib.js
-docs/dev/page/infinite-canvas.js
+docs/dev/page/infinite-canvas.js
+.rollup.cache
+dev-utils/app/dist
+docs/.vitepress/dist
+docs/.vitepress/cache
+docs/.vitepress/api-docs/.temp
+test-e2e/test-page-lib/impl/dist
+.updated-snapshots

.vscode/launch.json

@@ -8,15 +8,10 @@
             "type": "node",
             "request": "launch",
             "name": "Debug test",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "program": "${workspaceFolder}/node_modules/.bin/jest",
-            "args": ["${fileBasenameNoExtension}", "--config","./test/jest.config.js"],
             "autoAttachChildProcesses": true,
-            "windows": {
-                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
-            }
+            "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+            "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+            "args": ["run", "${relativeFile}", "--test-timeout=3600000", "--config", "vitest.config.ts"]
         }
     ]
 }

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].1/dist/infinite-canvas.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/infinite-canvas.umd.cjs"></script>
 ```
 
 or install it using npm:

copy-e2e.js

@@ -1,8 +1,5 @@
 /**
  * This interface inherits all properties and methods from [`CanvasRenderingContext2D`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
- *
- * @remarks
- * `InfiniteCanvasRenderingContext2D` currently does **not** support [`getImageData()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData), [`createImageData()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createImageData), [`isPointInPath()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath), [`isPointInStroke()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInStroke), [`drawFocusIfNeeded()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded) and [`scrollPathIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scrollPathIntoView)
  */
 export interface InfiniteCanvasRenderingContext2D extends CanvasRenderingContext2D {
     /**

dist/infinite-canvas.js

@@ -1,5 +1,6 @@
 import { InfiniteCanvasTouch } from "./infinite-canvas-touch";
 export interface InfiniteCanvasTouchList extends TouchList {
+    [Symbol.iterator](): IterableIterator<InfiniteCanvasTouch>;
     item(index: number): InfiniteCanvasTouch | null;
     [index: number]: InfiniteCanvasTouch;
 }

dist/infinite-canvas.umd.cjs

@@ -0,0 +1,42 @@
+import { fileURLToPath } from "url";
+import { Application, TSConfigReader, type TypeDocOptions } from 'typedoc'
+
+export const outDir = fileURLToPath(new URL('./.temp', import.meta.url));
+
+export async function createApplication(): Promise<Application>{
+    const application = new Application();
+    application.options.addReader(new TSConfigReader())
+    await application.bootstrapWithPlugins({
+        entryPoints: [fileURLToPath(new URL('../../../src/api-surface/infinite-canvas.ts', import.meta.url))],
+        entryPointStrategy: 'expand',
+        tsconfig: fileURLToPath(new URL('../../../ts-config-types.json', import.meta.url)),
+        out: outDir,
+        excludeExternals: true,
+        hideInPageTOC: true,
+        hideBreadcrumbs: true,
+        githubPages: false,
+        plugin: ['typedoc-plugin-markdown'],
+        readme: 'none',
+        entryDocument: 'index.md'
+    } as Partial<TypeDocOptions>)
+    return application;
+}
+
+export async function watchApplication(){
+    const application = await createApplication();
+    await new Promise<void>((res) => {
+        application.convertAndWatch(async (project) => {
+            await application.generateDocs(project, outDir);
+            res();
+        })
+    })
+}
+
+export async function buildApplication(){
+    const app = await createApplication();
+    const project = await app.convert();
+    if(!project){
+        return;
+    }
+    await app.generateDocs(project, outDir);
+}

dist/types/infinite-canvas-rendering-context-2d.d.ts

@@ -0,0 +1,32 @@
+import type { PluginOption } from "vite";
+import path from 'path'
+import fs from 'fs/promises'
+import { outDir, watchApplication } from './create-application'
+
+export default function addApi(): PluginOption{
+    let watching: boolean = false;
+    return {
+        name: 'vite-plugin-add-api-docs-serve',
+        apply: 'serve',
+        configureServer: async () => {
+            if(watching){
+                return;
+            }
+            await watchApplication();
+            watching = true;
+        },
+        load: {
+            order: 'post',
+            handler: async (id: string) => {
+                const apiMatch = id.match(/^\/api\/(.*)$/)
+                if(!apiMatch){
+                    return;
+                }
+                const [,requested] = apiMatch;
+                const resultPath = path.resolve(outDir, requested);
+                const result = await fs.readFile(resultPath, {encoding: 'utf-8'});
+                return result;
+            }
+        }
+    };
+}

dist/types/infinite-canvas-touch-list.d.ts

@@ -0,0 +1,55 @@
+import { fileURLToPath } from 'url'
+import { defineConfig } from 'vitepress'
+import { addExamples } from '../../examples/backend/vite-plugin'
+import addApi from './api-docs/serve-plugin'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "InfiniteCanvas",
+  ignoreDeadLinks: true,
+  description: "The HTML <canvas> element, made infinite",
+  themeConfig: {
+    logo: '/logo.svg',
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide' },
+      { text: 'API', link: '/api/' }
+    ],
+
+    sidebar: [
+      {
+        text: 'Getting started',
+        link: '/getting-started'
+      },
+      {
+        text: 'Guide',
+        link: '/guide'
+      },
+      {
+        text: 'API',
+        link: '/api/'
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/emilefokkema/infinite-canvas' }
+    ],
+
+    outline: [2, 3]
+  },
+  vite: {
+    build: {
+      emptyOutDir: false
+    },
+    resolve: {
+      alias: {
+        'infinite-canvas': fileURLToPath(new URL('../../src/infinite-canvas.ts', import.meta.url))
+      }
+    },
+    plugins: [
+      addExamples({external: {publicPath: '/examples'}}),
+      addApi()
+    ]
+  }
+})

docs/.vitepress/api-docs/create-application.ts

@@ -0,0 +1,19 @@
+import { defineLoader } from 'vitepress'
+// @ts-ignore: The current file is part of both the 'ts-config-docs-app.json' project and the 'ts-config-docs-config.json'
+// project, but retrieve-examples.ts is only part of the latter. C'est la vitepress.
+import { findExamples } from '../../../examples/backend/retrieval/retrieve-examples';
+import type { ExampleProject } from '../../../examples/shared/examples'
+
+declare const data: ExampleProject[];
+export {data}
+
+export default defineLoader({
+    async load(): Promise<ExampleProject[]>{
+        return await findExamples([
+            'getting-started',
+            'start-path-at-infinity',
+            'line-to-infinity',
+            'infinite-rectangles-1'
+        ]);
+    }
+})

docs/.vitepress/api-docs/serve-plugin.ts

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import sdk from '@stackblitz/sdk'
+import { onMounted, inject, shallowRef  } from 'vue'
+import { exampleDataInjectionKey } from './constants'
+import type { ExampleProject } from '../../../examples/shared/examples';
+const props = defineProps({
+    exampleId: {
+        type: String,
+        required: true
+    }
+})
+
+const data = inject(exampleDataInjectionKey);
+const project = shallowRef<ExampleProject | null>(null);
+
+function openProjectInStackBlitz(): void{
+    const projectValue = project.value;
+    if(!projectValue){
+        return;
+    }
+    const packageJson = {
+        name: projectValue.id,
+        version: "0.0.0",
+        private: true,
+        dependencies: {'ef-infinite-canvas': '^0.6.2'}
+    }
+    sdk.openProject({
+        title: projectValue.title,
+        template: 'javascript',
+        files: {
+            ...projectValue.files,
+            'package.json': JSON.stringify(packageJson, null, 2)
+        },
+        dependencies: packageJson.dependencies
+    })
+}
+onMounted(() => {
+    if(!data){
+        return;
+    }
+    project.value = data.find((p: ExampleProject) => p.id === props.exampleId) || null;
+})
+</script>
+
+<template>
+    <div>
+        <div v-if="!!project" class="stackblitz-button" @click="openProjectInStackBlitz">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28">
+                <path fill="#1374EF" d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z"></path>
+            </svg>
+        </div>
+        <div class="warning" v-else>could not find example files!</div>
+    </div>
+    
+    
+</template>
+
+<style lang="css" scoped>
+.stackblitz-button{
+    display: inline-block;
+    color: #1374EF;
+    opacity: .7;
+    cursor: pointer;
+}
+.stackblitz-button:hover{
+    opacity: 1;
+}
+.warning{
+    color: #ff000044;
+}
+</style>

docs/.vitepress/config.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey } from "vue";
+import type { ExampleProject } from '../../../examples/shared/examples';
+import type { ExampleRegistry } from "./example-registry";
+
+export const exampleDataInjectionKey: InjectionKey<ExampleProject[]> = Symbol();
+export const exampleRegistryInjectionKey: InjectionKey<ExampleRegistry> = Symbol();