@epa-wg/custom-element-dist 0.0.1

package/dist/mockServiceWorker.js

@@ -0,0 +1,284 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const PACKAGE_VERSION = '2.2.14'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: true,
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const responseClone = response.clone()
+
+      sendToClient(
+        client,
+        {
+          type: 'RESPONSE',
+          payload: {
+            requestId,
+            isMockedResponse: IS_MOCKED_RESPONSE in response,
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            body: responseClone.body,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+          },
+        },
+        [responseClone.body],
+      )
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = request.clone()
+
+  function passthrough() {
+    const headers = Object.fromEntries(requestClone.headers.entries())
+
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const requestBuffer = await request.arrayBuffer()
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        url: request.url,
+        mode: request.mode,
+        method: request.method,
+        headers: Object.fromEntries(request.headers.entries()),
+        cache: request.cache,
+        credentials: request.credentials,
+        destination: request.destination,
+        integrity: request.integrity,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        body: requestBuffer,
+        keepalive: request.keepalive,
+      },
+    },
+    [requestBuffer],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(
+      message,
+      [channel.port2].concat(transferrables.filter(Boolean)),
+    )
+  })
+}
+
+async function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}

package/dist/tree.xsl

@@ -0,0 +1,33 @@
+<xsl:stylesheet version="1.0"
+                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <xsl:output
+            method="html"
+            omit-xml-declaration="yes"
+            standalone="yes"
+            indent="yes"
+    />
+
+    <xsl:template match="/">
+        <xsl:apply-templates select="*"/>
+    </xsl:template>
+    <xsl:template match="*">
+        <details style="padding:0 1rem" open="open"  data-testid="{name()}">
+            <summary>
+                <b style="color:green"><xsl:value-of select="name()"/></b>
+                <xsl:apply-templates select="@*"/>
+            </summary>
+            <xsl:value-of select="./text()"/>
+            <xsl:apply-templates select="*"/>
+        </details>
+    </xsl:template>
+    <xsl:template match="@*">
+        <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
+    </xsl:template>
+    <xsl:template match="text()">
+            <p data-testid="{name()}">
+                <xsl:value-of select="."/>
+            </p>
+    </xsl:template>
+
+
+</xsl:stylesheet>

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit + TS</title>
+    <link rel="stylesheet" href="./src/index.css" />
+    <script type="module" src="src/custom-element/custom-element.js"></script>
+  </head>
+  <body>
+    <custom-element>
+      <h1>custom-element</h1>
+      Build web application without JavaScript.
+    </custom-element>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,97 @@
+{
+    "name": "@epa-wg/custom-element-dist",
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "postinstall": "bash bin/postinstall.sh",
+        "prepublishOnly": "bash bin/build.sh",
+        "preview": "vite preview",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "test": "vitest --coverage.enabled --coverage.all --no-file-parallelism --watch=false",
+        "test:watch": "vitest --inspect-brk --no-file-parallelism --browser.headless=false --test-timeout=0",
+        "test:storybook": "test-storybook",
+        "sb": "yarn storybook",
+        "t": "vitest --no-file-parallelism --watch=false src/stories/location-element.test.ts"
+    },
+    "dependencies": {
+        "@epa-wg/custom-element": "0.0.20"
+    },
+    "devDependencies": {
+        "@chromatic-com/storybook": "^1.3.3",
+        "@storybook/addon-essentials": "^8.0.10",
+        "@storybook/addon-interactions": "^8.0.10",
+        "@storybook/addon-links": "^8.0.10",
+        "@storybook/addon-mdx-gfm": "8.0.10",
+        "@storybook/blocks": "^8.0.10",
+        "@storybook/test": "^8.0.10",
+        "@storybook/test-runner": "^0.17.0",
+        "@storybook/web-components": "^8.0.10",
+        "@storybook/web-components-vite": "^8.0.10",
+        "@vitest/browser": "^1.6.0",
+        "@vitest/coverage-istanbul": "^1.6.0",
+        "coverage-svg": "^0.0.3",
+        "lit": "^3.1.3",
+        "msw": "^2.2.14",
+        "msw-storybook-addon": "^2.0.0",
+        "playwright": "^1.43.1",
+        "storybook": "^8.0.10",
+        "typescript": "^5.2.2",
+        "vite": "^5.2.0",
+        "vitest": "^1.6.0",
+        "webdriverio": "^8.36.1"
+    },
+    "msw": {
+        "workerDirectory": [
+            "public"
+        ]
+    },
+    "keywords": [
+        "WebComponent",
+        "Declarative Custom Element",
+        "XSLT",
+        "JS",
+        "javascript"
+    ],
+    "author": {
+        "name": "Sasha Firsov",
+        "email": "suns@simulationworks.com",
+        "url": "https://blog.firsov.net/"
+    },
+    "files": [
+        "*",
+        "dist/**/*",
+        "storybook-static/**/*",
+        "coverage/**/*"
+    ],
+    "exports": {
+        ".": {
+            "import": "./dist/assets/custom-element-bundle.js",
+            "require": "./dist/assets/custom-element-bundle.cjs"
+        },
+        "./custom-element": {
+            "import": "./dist/assets/custom-element-bundle.js",
+            "require": "./dist/assets/custom-element-bundle.cjs"
+        },
+        "./package.json": "./package.json"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/EPA-WG/custom-element-dist.git"
+    },
+    "license": "Apache-2.0",
+    "bugs": {
+        "url": "https://github.com/EPA-WG/custom-element/issues"
+    },
+    "homepage": "https://github.com/EPA-WG/custom-element#readme",
+    "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/sashafirsov"
+    },
+    "web-types": [
+        "./src/custom-element/ide/web-types-dce.json",
+        "./src/custom-element/ide/web-types-xsl.json"
+    ]
+}

package/public/confused.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
+  <defs>
+    <linearGradient id="d">
+      <stop offset="0"/>
+      <stop offset=".5"/>
+      <stop offset=".80000001" stop-opacity=".46666667"/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#fb0"/>
+      <stop offset=".5" stop-color="#e29d00"/>
+      <stop offset="1" stop-color="#fb0"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0"/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#ffc"/>
+      <stop offset=".5" stop-color="#fff965"/>
+      <stop offset="1" stop-color="#fc3"/>
+    </linearGradient>
+    <linearGradient xlink:href="#a" id="i" x1="8.0350637" x2="42.788235" y1="32.372219" y2="32.372219" gradientUnits="userSpaceOnUse" spreadMethod="pad"/>
+    <radialGradient xlink:href="#b" id="f" cx="17.986637" cy="16.545853" r="23.978155" fx="17.986637" fy="16.545853" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#c" id="e" cx="53.309223" cy="94.956306" r="63.252911" fx="53.309223" fy="94.956306" gradientTransform="matrix(1 0 0 .34935 0 61.7838)" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#d" id="g" cx="18.71347" cy="21.759708" r="1.8644418" fx="18.71347" fy="21.759708" gradientTransform="matrix(1 0 0 1.77778 0 -16.92422)" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path fill="url(#e)" d="M116.56213 94.956306a63.252911 22.097088 0 1 1-126.5058174 0 63.252911 22.097088 0 1 1 126.5058174 0z" opacity=".53200001" transform="matrix(.3162 0 0 .33941 6.936944 8.132618)"/>
+  <path fill="url(#f)" stroke="#fb0" stroke-width="1.43869453" d="M47.094418 23.83131a23.478155 23.478155 0 1 1-46.9563107 0 23.478155 23.478155 0 1 1 46.9563107 0z" transform="translate(4.30185 4.122792) scale(.83409)"/>
+  <path id="h" fill="#fff" fill-opacity="1" fill-rule="nonzero" stroke="#fc0" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M21.682767 18.5142a3.9360437 6.9743929 0 1 1-7.872088 0 3.9360437 6.9743929 0 1 1 7.872088 0z" opacity="1" transform="matrix(1.01507 0 0 1.00354 -.0090285 .916405)"/>
+  <path id="j" fill="url(#g)" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M20.577912 21.759708a1.8644418 3.314563 0 1 1-3.728883 0 1.8644418 3.314563 0 1 1 3.728883 0z" opacity="1" transform="translate(-.138107 .535104)"/>
+  <use xlink:href="#h" width="48" height="48" transform="translate(12.50001 -4.4e-7)"/>
+  <path fill="none" stroke="url(#i)" stroke-linecap="round" stroke-width="1.97319973" d="M9.0216636 35.899178c4.7689724-7.457767 10.9544424-9.489956 17.3095664-3.728884 5.404329 4.899155 11.190398 4.350365 15.470406-.656007"/>
+  <path fill="none" stroke="#e2ac00" stroke-linecap="round" stroke-width="1.17813516" d="M15.504748 34.21319c3.012147-3.243177 6.693658.87012 6.693658.87012" opacity=".8"/>
+  <use xlink:href="#j" width="48" height="48" transform="translate(10.78418 -5)"/>
+</svg>

package/public/embed-1.html

@@ -0,0 +1,3 @@
+<h4>embed-1.html</h4>
+<custom-element tag="dce-embed-1" hidden data-testid="wave">🖖</custom-element>
+<dce-embed-1>?</dce-embed-1>

package/public/html-template.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<head>
+    <title>template based on HTML file</title>
+    <style>svg {
+        width: 4rem;
+    }</style>
+</head>
+<body>
+<script>console.error('Stranger danger!')</script>
+<b id="wave">👋</b>
+<b id="ok">👌</b>
+<svg id="dwc-logo" data-testid="svg-test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
+    <defs>
+        <style>.cls-1 {
+            fill: #c2e6f1;
+        }
+
+        .cls-2 {
+            fill: #dcf1f7;
+        }
+
+        .cls-3 {
+            fill: #2d4554;
+        }
+
+        .cls-4 {
+            fill: #60cae5;
+        }</style>
+    </defs>
+    <polygon class="cls-3"
+             points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
+    <path class="cls-2"
+          d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
+    <path class="cls-2"
+          d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-1"
+          d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
+    <path class="cls-2"
+          d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
+    <path class="cls-2"
+          d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
+    <path class="cls-2"
+          d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
+    <path class="cls-2"
+          d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
+    <path class="cls-4"
+          d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
+    <path class="cls-4"
+          d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4"
+          d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
+    <path class="cls-4"
+          d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4"
+          d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4"
+          d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4"
+          d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
+    <path class="cls-4"
+          d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
+    <path class="cls-2"
+          d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
+    <path class="cls-1"
+          d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
+    <path class="cls-1"
+          d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
+    <path class="cls-2"
+          d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
+    <path class="cls-1"
+          d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-1"
+          d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
+</svg>
+<math id="sophomores-dream"  data-testid="ml-test" display="block">
+    <mrow>
+        <msubsup>
+            <mo>∫</mo>
+            <mn>0</mn>
+            <mn>1</mn>
+        </msubsup>
+        <msup>
+            <mi>x</mi>
+            <mi>x</mi>
+        </msup>
+        <mo rspace="0.22em">⁢</mo>
+        <mo rspace="0">ⅆ</mo>
+        <mi>x</mi>
+        <mo>=</mo>
+        <munderover>
+            <mo>∑</mo>
+            <mrow>
+                <mi>n</mi>
+                <mo>=</mo>
+                <mn>1</mn>
+            </mrow>
+            <mn>∞</mn>
+        </munderover>
+        <msup>
+            <mrow>
+                <mo>(</mo>
+                <mrow>
+                    <mo form="prefix">−</mo>
+                    <mn>1</mn>
+                </mrow>
+                <mo>)</mo>
+            </mrow>
+            <mrow>
+                <mi>n</mi>
+                <mo>+</mo>
+                <mn>1</mn>
+            </mrow>
+        </msup>
+        <mo>⁢</mo>
+        <msup>
+            <mi>n</mi>
+            <mrow>
+                <mo form="prefix">−</mo>
+                <mi>n</mi>
+            </mrow>
+        </msup>
+    </mrow>
+</math>
+</body>
+</html>

package/public/html-template.xhtml

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<head>
+    <meta charset="UTF-8"/>
+    <title>template based on HTML file</title>
+</head>
+<body>
+  <b id="wave">👋</b>
+  <b id="ok">👌</b>
+  <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>
+  <xsl:stylesheet
+        id="embedded-xsl"
+        version="1.0"
+        xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <xsl:output
+        method="html"
+        omit-xml-declaration="yes"
+        standalone="yes"
+        indent="yes"
+    />
+
+    <xsl:template match="/">
+        <xsl:apply-templates select="*"/>
+    </xsl:template>
+    <xsl:template match="*">
+        <details style="padding:0 1rem" open="open" data-testid="{name()}">
+            <summary>
+                <b style="color:green"><xsl:value-of select="name()"/></b>
+                <xsl:apply-templates select="@*"/>
+            </summary>
+            <xsl:value-of select="./text()"/>
+            <xsl:apply-templates select="*"/>
+        </details>
+    </xsl:template>
+    <xsl:template match="@*">
+        <code style="margin-left:1rem;color:brown" ><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
+    </xsl:template>
+    <xsl:template match="text()">
+            <p>
+                <xsl:value-of select="."/>
+            </p>
+    </xsl:template>
+</xsl:stylesheet>
+</body>
+</html>