Skip to content

Commit a032dac

Browse files
thewtexthewtex
committed
WIP: feat: esm example
1 parent 2afbafe commit a032dac

File tree

8 files changed

+327
-33
lines changed

8 files changed

+327
-33
lines changed

‎.github/workflows/playwright.yml

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: Playwright Tests
2+
on:
3+
push:
4+
branches: [ main, master ]
5+
pull_request:
6+
branches: [ main, master ]
7+
jobs:
8+
test:
9+
timeout-minutes: 60
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v4
13+
- uses: actions/setup-node@v4
14+
with:
15+
node-version: lts/*
16+
- name: Install dependencies
17+
run: npm install -g pnpm && pnpm install
18+
- name: Install Playwright Browsers
19+
run: pnpm exec playwright install --with-deps
20+
- name: Run Playwright tests
21+
run: pnpm exec playwright test
22+
- uses: actions/upload-artifact@v4
23+
if: ${{ !cancelled() }}
24+
with:
25+
name: playwright-report
26+
path: playwright-report/
27+
retention-days: 30

‎examples/esm/README.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
itk-umd-example
2+
===================
3+
4+
This example demonstrates how to use the
5+
[itk-wasm](https://wasm.itk.org/) UMD module from
6+
a an HTML script tag for access to the image and mesh IO module that are
7+
distributed on the [jsDelivr](https://www.jsdelivr.com/) [content delivery
8+
network](https://en.wikipedia.org/wiki/Content_delivery_network).
9+
10+
More information can be found in the [example
11+
documentation](https://wasm.itk.org/examples/umd.html).
12+
13+
## Run Locally
14+
15+
```
16+
npm install
17+
npm run start
18+
```
19+
20+
And visit [http://localhost:8000/](http://localhost:8000/).
21+
22+
## Development
23+
24+
```
25+
npm install
26+
npm test
27+
```

‎examples/esm/dist/index.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ITK-Wasm ESM Example</title>
5+
<meta charset="UTF-8" />
6+
<link rel="stylesheet" href="styles.css">
7+
</head>
8+
9+
<body>
10+
<!-- Selector -->
11+
<div>
12+
<label>Select image:</label>
13+
<input name="input-file" type="file">
14+
</div>
15+
16+
<!-- Image information -->
17+
<textarea readonly name="image-information">Image information...</textarea>
18+
19+
<!-- Image visualization -->
20+
<div id="viewer">
21+
<canvas width="256" height="256"></canvas>
22+
</div>
23+
24+
<!-- Javascript -->
25+
<script type="module">
26+
// Example ITK-Wasm package, @itk-wasm/image-io
27+
import { readImage } from "https://cdn.jsdelivr.net/npm/@itk-wasm/image-io@1.6.0/dist/bundle/index-worker-embedded.min.js";
28+
29+
// Visualization
30+
import { Niivue } from "https://cdn.jsdelivr.net/npm/@niivue/niivue@0.56.0/dist/index.js";
31+
// Convert ITK-Wasm Image to Niivue Image
32+
// import { iwi2niiCore } from "https://cdn.jsdelivr.net/npm/@niivue/cbor-loader@1.2.0/dist/index..min.js";
33+
import { iwi2niiCore } from "./cbor-loader.js";
34+
35+
async function processImage(event) {
36+
const outputTextArea = document.querySelector("textarea");
37+
outputTextArea.textContent = "Loading...";
38+
39+
const dataTransfer = event.dataTransfer;
40+
const files = event.target.files || dataTransfer.files;
41+
42+
const { image } = await readImage(files[0]);
43+
44+
function replacer(key, value) {
45+
if (!!value && value.byteLength !== undefined) {
46+
return String(value.slice(0, 6)) + "...";
47+
}
48+
return value;
49+
}
50+
outputTextArea.textContent = JSON.stringify(image, replacer, 4);
51+
52+
const canvas = document.querySelector('#viewer > canvas');
53+
console.log(canvas)
54+
const nv = new Niivue();
55+
await nv.attachToCanvas(canvas);
56+
console.log(image)
57+
const niiImage = iwi2niiCore(image);
58+
console.log(niiImage);
59+
60+
// !!viewerElement && itkVtkViewer.createViewerFromFiles(viewerElement, files)
61+
62+
}
63+
64+
const imageInput = document.querySelector("input[name='input-file']");
65+
imageInput.addEventListener("change", processImage);
66+
</script>
67+
68+
</body>
69+
</html>
70+

‎examples/esm/dist/styles.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
html, body {
2+
height: 90%;
3+
}
4+
5+
textarea {
6+
resize: none;
7+
overflow-y: scroll;
8+
position: absolute;
9+
box-sizing: border-box;
10+
width: 600px;
11+
height: 400px;
12+
bottom: 0px;
13+
left: 0px;
14+
top: 50px;
15+
}

‎examples/esm/package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "itk-esm-example",
3+
"version": "1.0.0",
4+
"private": true,
5+
"description": "This example demonstrates how to use an ITK-Wasm package ESM module from an HTML script tag.",
6+
"scripts": {
7+
"start": "http-server -c-1 ./dist/",
8+
"test:browser": "pnpm exec playwright test",
9+
"test:browser:ui": "pnpm exec playwright test --ui",
10+
"test:browser:debug": "pnpm exec playwright test --debug",
11+
"test:browser:report": "pnpm exec playwright show-report",
12+
"test:debug": "start-server-and-test start http://localhost:8080 cypress:open",
13+
"test": "start-server-and-test start http://localhost:8080 test:browser"
14+
},
15+
"repository": {
16+
"type": "git",
17+
"url": "https://github.com/InsightSoftwareConsortium/ITK-Wasm.git"
18+
},
19+
"keywords": [
20+
"itk",
21+
"esm"
22+
],
23+
"author": "Matt McCormick <matt@fideus.io>",
24+
"license": "Apache-2.0",
25+
"bugs": {
26+
"url": "https://github.com/InsightSoftwareConsortium/ITK-Wasm/issues"
27+
},
28+
"homepage": "https://github.com/InsightSoftwareConsortium/ITK-Wasm#readme",
29+
"devDependencies": {
30+
"@playwright/test": "^1.51.1",
31+
"http-server": "^14.1.1",
32+
"start-server-and-test": "^2.0.11"
33+
}
34+
}

‎examples/esm/playwright.config.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
// @ts-check
2+
import { defineConfig, devices } from '@playwright/test';
3+
4+
/**
5+
* Read environment variables from file.
6+
* https://github.com/motdotla/dotenv
7+
*/
8+
// import dotenv from 'dotenv';
9+
// import path from 'path';
10+
// dotenv.config({ path: path.resolve(__dirname, '.env') });
11+
12+
/**
13+
* @see https://playwright.dev/docs/test-configuration
14+
*/
15+
export default defineConfig({
16+
testDir: './tests',
17+
/* Run tests in files in parallel */
18+
fullyParallel: true,
19+
/* Fail the build on CI if you accidentally left test.only in the source code. */
20+
forbidOnly: !!process.env.CI,
21+
/* Retry on CI only */
22+
retries: process.env.CI ? 2 : 0,
23+
/* Opt out of parallel tests on CI. */
24+
workers: process.env.CI ? 1 : undefined,
25+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
26+
reporter: 'html',
27+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
28+
use: {
29+
/* Base URL to use in actions like `await page.goto('/')`. */
30+
// baseURL: 'http://127.0.0.1:3000',
31+
32+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
33+
trace: 'on-first-retry',
34+
},
35+
36+
/* Configure projects for major browsers */
37+
projects: [
38+
{
39+
name: 'chromium',
40+
use: { ...devices['Desktop Chrome'] },
41+
},
42+
43+
{
44+
name: 'firefox',
45+
use: { ...devices['Desktop Firefox'] },
46+
},
47+
48+
{
49+
name: 'webkit',
50+
use: { ...devices['Desktop Safari'] },
51+
},
52+
53+
/* Test against mobile viewports. */
54+
// {
55+
// name: 'Mobile Chrome',
56+
// use: { ...devices['Pixel 5'] },
57+
// },
58+
// {
59+
// name: 'Mobile Safari',
60+
// use: { ...devices['iPhone 12'] },
61+
// },
62+
63+
/* Test against branded browsers. */
64+
// {
65+
// name: 'Microsoft Edge',
66+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
67+
// },
68+
// {
69+
// name: 'Google Chrome',
70+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
71+
// },
72+
],
73+
74+
/* Run your local dev server before starting the tests */
75+
// webServer: {
76+
// command: 'npm run start',
77+
// url: 'http://127.0.0.1:3000',
78+
// reuseExistingServer: !process.env.CI,
79+
// },
80+
});
81+

‎examples/esm/tests/example.spec.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// @ts-check
2+
import { test, expect } from '@playwright/test';
3+
4+
test('has title', async ({ page }) => {
5+
await page.goto('https://playwright.dev/');
6+
7+
// Expect a title "to contain" a substring.
8+
await expect(page).toHaveTitle(/Playwright/);
9+
});
10+
11+
test('get started link', async ({ page }) => {
12+
await page.goto('https://playwright.dev/');
13+
14+
// Click the get started link.
15+
await page.getByRole('link', { name: 'Get started' }).click();
16+
17+
// Expects page to have a heading with the name of Installation.
18+
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
19+
});

0 commit comments

Comments
 (0)