├── .github
    └── workflows
    │   └── playwright.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── example
    ├── example.spec.js
    ├── header-anchor.html
    ├── header-anchor.js
    └── index.html
├── logo.png
├── package-lock.json
├── package.json
├── playwright.config.js
├── scripts
    └── export-components.js
└── tram-deco.js


/.github/workflows/playwright.yml:
--------------------------------------------------------------------------------
 1 | name: Tram-Deco Playwright Tests
 2 | 
 3 | on: push
 4 | 
 5 | jobs:
 6 |   test:
 7 |     timeout-minutes: 15
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - uses: actions/checkout@v4
11 |       - uses: actions/setup-node@v4
12 |         with:
13 |           node-version: lts/*
14 |       - name: Install dependencies
15 |         run: npm ci
16 |       - name: Install Playwright Browsers
17 |         run: npx playwright install --with-deps
18 |       - name: Run Playwright tests
19 |         run: npm run test:ci
20 |       - uses: actions/upload-artifact@v4
21 |         if: always()
22 |         with:
23 |           name: playwright-report
24 |           path: playwright-report/
25 |           retention-days: 30
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Dependency Directory
 2 | node_modules
 3 | 
 4 | # minified output
 5 | *.min.js
 6 | 
 7 | # playwrite
 8 | /test-results/
 9 | /playwright-report/
10 | /blob-report/
11 | /playwright/.cache/
12 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"printWidth": 120,
 5 | 	"proseWrap": "always",
 6 | 	"overrides": [
 7 | 		{
 8 | 			"files": "*.md",
 9 | 			"options": {
10 | 				"tabWidth": 2,
11 | 				"useTabs": false
12 | 			}
13 | 		}
14 | 	]
15 | }
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Jesse Jurman
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Tram-Deco
  2 | 
  3 | <img src="./logo.png" width="200px" alt="Tram-Deco logo, minimalistic icon that looks like the front of a red trolly car, with a yellow tinted window and three headlights, made of simple geometric shapes">
  4 | 
  5 | _Declarative Custom Elements using native Web Component APIs and specs._
  6 | 
  7 | Tram-Deco provides a more elegant interface for building Web Components, that remains as close as possible to the
  8 | existing browser APIs. Tram-Deco is a experiment to understand what a declarative interface for building Web Components
  9 | might look like, without the addition of APIs that don't already exist.
 10 | 
 11 | <!-- prettier-ignore -->
 12 | <img src="https://img.shields.io/npm/dm/tram-deco.svg" alt="Downloads"> <img src="https://img.shields.io/npm/v/tram-deco.svg" alt="Version">
 13 | <a href="https://unpkg.com/tram-deco@6/tram-deco.min.js"><img src="https://img.shields.io/badge/gzip-722B-006369.svg?style=flat" alt="Gzipped Size"></a>
 14 | <a href="https://github.com/Tram-One/tram-deco/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tram-deco.svg" alt="License"></a>
 15 | <a href="https://discord.gg/dpBXAQC"><img src="https://img.shields.io/badge/discord-join-5865F2.svg?style=flat" alt="Join Discord"></a>
 16 | <a href="https://codepen.io/pen?template=JjzQmaL"><img src="https://img.shields.io/badge/codepen-template-DD6369.svg?style=flat" alt="Codepen Template"></a>
 17 | <a href="https://chatgpt.com/g/g-wTNI3WZS6-tram-deco"><img src="https://img.shields.io/badge/gpt-tram--deco-FFCC49.svg?style=flat" alt="Codepen Template"></a>
 18 | 
 19 | ## Example
 20 | 
 21 | ```html
 22 | <!-- include the Tram-Deco library -->
 23 | <script src="https://unpkg.com/tram-deco@6"></script>
 24 | 
 25 | <!-- define some web components -->
 26 | <template id="definitions">
 27 |   <!-- definition for a custom header tag -->
 28 |   <header-anchor>
 29 |     <!-- declarative shadow dom for the insides -->
 30 |     <template shadowrootmode="open">
 31 |       <!-- styles, for just this element -->
 32 |       <style>
 33 |         a {
 34 |           color: inherit;
 35 |         }
 36 |         ::slotted(*)::before {
 37 |           content: '# ';
 38 |           opacity: 0.3;
 39 |         }
 40 |         ::slotted(*:hover)::before {
 41 |           opacity: 0.7;
 42 |         }
 43 |         a:not(:hover) {
 44 |           text-decoration: none;
 45 |         }
 46 |       </style>
 47 | 
 48 |       <!-- dom, to show on the page -->
 49 |       <a><slot></slot></a>
 50 |     </template>
 51 | 
 52 |     <!-- scripts, that let you define lifecycle and custom methods -->
 53 |     <script td-method="constructor">
 54 |       new MutationObserver(() => {
 55 |         this.decorateHeader();
 56 |       }).observe(this, { childList: true });
 57 |     </script>
 58 |     <script td-method="decorateHeader">
 59 |       this.id = this.textContent.trim().toLowerCase().replace(/\s+/g, '-');
 60 | 
 61 |       const link = this.shadowRoot.querySelector('a');
 62 |       link.href = `#${this.id}`;
 63 |     </script>
 64 |   </header-anchor>
 65 | </template>
 66 | 
 67 | <!-- process the template to generate new definitions -->
 68 | <script>
 69 |   TramDeco.processTemplate(definitions);
 70 | </script>
 71 | 
 72 | <!-- use our new element! -->
 73 | <header-anchor>
 74 |   <h1>Introduction</h1>
 75 | </header-anchor>
 76 | This is some introductory content
 77 | <header-anchor>
 78 |   <h2>More Details</h2>
 79 | </header-anchor>
 80 | If you want to read more, checkout the README.
 81 | ```
 82 | 
 83 | [Live on Codepen](https://codepen.io/JRJurman/pen/RwXPqEe)
 84 | 
 85 | ## How to use
 86 | 
 87 | There are two ways to use Tram-Deco in your project - you can either have component definitions in your served HTML
 88 | template (in template tags), or you can export the components as part of a build step to be imported with script tags.
 89 | 
 90 | ### Template Component Definitions
 91 | 
 92 | If you don't want a build step, or are just building components for a dedicated static page, you can do the following to
 93 | write component definitions in your main template:
 94 | 
 95 | Include the Tram-Deco library (you can point to either `tram-deco.js` or `tram-deco.min.js`)
 96 | 
 97 | ```html
 98 | <script src="https://unpkg.com/tram-deco@6/tram-deco.min.js"></script>
 99 | ```
100 | 
101 | Create a template tag with your component definitions, and then use Tram-Deco to process that template
102 | 
103 | ```html
104 | <template id="myDefinitions">
105 |   <!-- component definitions -->
106 | </template>
107 | 
108 | <script>
109 |   TramDeco.processTemplate(myDefinitions);
110 | </script>
111 | ```
112 | 
113 | ### Export JS Definition
114 | 
115 | If you want to export your component definition, to be used in other projects, or to organize the components in
116 | different files, you can do the following:
117 | 
118 | Create a component definition file (`.html`) - this can include as many top-level component definitions as you'd like.
119 | 
120 | ```html
121 | <!-- my-counter.html -->
122 | <my-counter>
123 |   <template shadowrootmode="open">
124 |     <!-- ... -->
125 |   </template>
126 | </my-counter>
127 | ```
128 | 
129 | Run the following command in the command line, or as part of a build step:
130 | 
131 | ```sh
132 | npx tram-deco export-components my-counter.html
133 | ```
134 | 
135 | This will create a JS file that can be imported using a standard script tag:
136 | 
137 | ```html
138 | <script src="./my-counter.js">
139 | ```
140 | 
141 | ## API
142 | 
143 | ### JS API
144 | 
145 | <dl>
146 | <dt><code>TramDeco.processTemplate(templateTag)</code></dt>
147 | <dd>
148 | 
149 | The `processTemplate` function takes in a single template tag with several component definitions, and builds Web
150 | Component definitions for all of them in the global custom elements registry.
151 | 
152 | </dd>
153 | 
154 | <dt><code>TramDeco.define(elementDefinition)</code></dt>
155 | <dd>
156 | 
157 | The `define` function takes in a single element definition and builds a Web Component definition for the global custom
158 | elements registry. It is the underlying method used in `processTemplate`, and probably does not need to be called in
159 | isolation.
160 | 
161 | </dd>
162 | </dl>
163 | 
164 | ### Component API
165 | 
166 | These attributes can be used to provide or inherit logic for different life cycle events of your component. They follow
167 | the standard API for Web Components.
168 | 
169 | <dl>
170 | <dt><code>td-extends="tag-name"</code></dt>
171 | <dd>
172 | 
173 | Attribute to be used on the top-level definition tag. The class associated with the `tag-name` will be used as a parent
174 | class when building this Web Component definition. That tag must be already registered in the `customElements` registry.
175 | 
176 | </dd>
177 | <dt><code>td-property="propertyName"</code></dt>
178 | <dd>
179 | 
180 | Attribute to be used on a `script` tag in your component definition. The assigned property name will be attached to the
181 | element as a static property, and can be useful for adding `observedAttributes`, `formAssociated`, `disableInternals`,
182 | or `disableShadow`. You can also define custom static properties for your element.
183 | 
184 | </dd>
185 | <dt><code>td-method="methodName"</code></dt>
186 | <dd>
187 | 
188 | Attribute to be used on a `script` tag in your component definition. The assigned method name will be attached to the
189 | element, and can be useful for adding to the `constructor`, or setting other Web Component APIs, such as
190 | `connectedCallback`, `disconnectedCallback`, `adoptedCallback`, or `attributeChangedCallback`. You can also define
191 | custom methods for your element.
192 | 
193 | > [!tip]
194 | >
195 | > If you are using `attributeChangedCallback` you can access the parameters (`name`, `oldValue`, and `newValue`) using
196 | > the `arguments` keyword. See the example below to see how this works!
197 | 
198 | </dd>
199 | </dl>
200 | 
201 | #### Example Using Component API
202 | 
203 | ```html
204 | <script src="https://unpkg.com/tram-deco@6"></script>
205 | 
206 | <template id="myCounter">
207 |   <my-counter>
208 |     <!-- observed attributes, to watch for attribute changes on count -->
209 |     <script td-property="observedAttributes">
210 |       ['count'];
211 |     </script>
212 | 
213 |     <template shadowrootmode="open" shadowrootdelegatesfocus>
214 |       <button><slot>Counter</slot>: <span>0</span></button>
215 |     </template>
216 | 
217 |     <!-- when we mount this component, add an event listener -->
218 |     <script td-method="connectedCallback">
219 |       const button = this.shadowRoot.querySelector('button');
220 |       button.addEventListener('click', (event) => {
221 |         const newCount = parseInt(this.getAttribute('count')) + 1;
222 |         this.setAttribute('count', newCount);
223 |       });
224 |     </script>
225 | 
226 |     <!-- when the count updates, update the template -->
227 |     <script td-method="attributeChangedCallback">
228 |       const [name, oldValue, newValue] = arguments;
229 |       if (name === 'count') {
230 |         const span = this.shadowRoot.querySelector('span');
231 |         span.textContent = newValue;
232 |       }
233 |     </script>
234 |   </my-counter>
235 | </template>
236 | 
237 | <script>
238 |   TramDeco.processTemplate(myCounter);
239 | </script>
240 | 
241 | <my-counter count="0">Tram-Deco</my-counter>
242 | ```
243 | 
244 | [Live on Codepen](https://codepen.io/JRJurman/pen/RwmbMmg)
245 | 
246 | ## Motivation
247 | 
248 | Tram-Deco was written to showcase a potential implementation of Declarative Custom Elements that could be trivially
249 | adopted by browser implementers. While many alternatives exist, most include new custom APIs, behavior, or syntax that
250 | would necessitate discussions, deliberations, and implementation before making progress on the true goal.
251 | 
252 | Tram-Deco strives to be as close to existing APIs as possible, so that the path to browser implementation is as direct
253 | as possible. While many libraries exist to make Web-Component creation easier and more elegant, this library exclusively
254 | highlights how we can leverage existing APIs to get to Declarative Custom Elements.
255 | 
256 | ## contributions / discussions
257 | 
258 | If you think this is useful or interesting, I'd love to hear your thoughts! Feel free to
259 | [reach out to me on mastodon](https://fosstodon.org/@jrjurman), or join the
260 | [Tram-One discord](https://discord.gg/dpBXAQC).
261 | 


--------------------------------------------------------------------------------
/example/example.spec.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | const { test, expect } = require('@playwright/test');
 3 | const path = require('path');
 4 | 
 5 | const getTextContent = async (element) => {
 6 | 	return await element.evaluate((el) => el.textContent);
 7 | };
 8 | 
 9 | test.describe('Tram-Deco Example Components', () => {
10 | 	test('should validate all Tram-Deco APIs and Use Cases', async ({ page }) => {
11 | 		// Construct the absolute file path and use the file:// protocol
12 | 		const filePath = path.resolve(__dirname, '../example/index.html');
13 | 		await page.goto(`file://${filePath}`);
14 | 
15 | 		// validate that the document title is set
16 | 		await expect(page).toHaveTitle('Tram-Deco is Cool!');
17 | 
18 | 		// validate that the title shadowDOM is rendered as expected
19 | 		const customTitle = page.locator('custom-title');
20 | 		await expect(customTitle.locator('h1')).toBeVisible();
21 | 		const renderedText = await getTextContent(customTitle);
22 | 		expect(renderedText).toBe('Tram-Deco is Cool!');
23 | 
24 | 		// validate that the callout-alert can be collapsed and expanded
25 | 		const calloutAlert = page.locator('callout-alert');
26 | 		await expect(calloutAlert).toHaveAttribute('collapsed', '');
27 | 		await expect(calloutAlert.locator('button')).toHaveText('expand');
28 | 		await expect(calloutAlert.locator('#content')).not.toBeVisible();
29 | 		await calloutAlert.locator('button').click();
30 | 		await expect(calloutAlert.locator('button')).toHaveText('collapse');
31 | 		await expect(calloutAlert.locator('#content')).toBeVisible();
32 | 		await expect(calloutAlert).not.toHaveAttribute('collapsed', '');
33 | 
34 | 		// validate that the individual counters can be incremented
35 | 		const counterA = page.locator('my-counter#a');
36 | 		await expect(counterA).toHaveAttribute('count', '0');
37 | 		await expect(counterA.locator('button')).toHaveText('Counter: 0');
38 | 		await counterA.click();
39 | 		await expect(counterA).toHaveAttribute('count', '1');
40 | 		await expect(counterA.locator('button')).toHaveText('Counter: 1');
41 | 
42 | 		const counterB = page.locator('my-counter#b');
43 | 		await expect(counterB).toHaveAttribute('count', '12');
44 | 		await expect(counterB.locator('button')).toHaveText('Counter: 12');
45 | 
46 | 		// validate that button that implements a shadow DOM from a parent with none works as expected
47 | 		const removableButton = page.locator('red-removable-button#r');
48 | 		await expect(removableButton).toBeVisible();
49 | 		await removableButton.click();
50 | 		await expect(removableButton).not.toBeVisible();
51 | 
52 | 		// validate that extended counters with different shadow DOM work as expected
53 | 		const redCounter = page.locator('my-red-counter#d');
54 | 		await expect(redCounter).toHaveAttribute('count', '10');
55 | 		await redCounter.click();
56 | 		await expect(redCounter).toHaveAttribute('count', '11');
57 | 
58 | 		// validate that extended counters with nothing different work as expected
59 | 		const copiedCounter = page.locator('my-copied-counter#c');
60 | 		await expect(copiedCounter).toHaveAttribute('count', '15');
61 | 		await copiedCounter.click();
62 | 		await expect(copiedCounter).toHaveAttribute('count', '16');
63 | 
64 | 		// validate that extended counters with different callbacks work as expected
65 | 		const decrementingCounter = page.locator('my-decrementing-counter#e');
66 | 		await expect(decrementingCounter).toHaveAttribute('count', '5');
67 | 		await decrementingCounter.click();
68 | 		await expect(decrementingCounter).toHaveAttribute('count', '4');
69 | 
70 | 		// validate that exported components work as expected
71 | 		const introAnchor = page.locator('header-anchor#introduction');
72 | 		await expect(introAnchor.locator('a')).toHaveAttribute('href', '#introduction');
73 | 		const detailsAnchor = page.locator('header-anchor#more-details');
74 | 		await expect(detailsAnchor.locator('a')).toHaveAttribute('href', '#more-details');
75 | 	});
76 | });
77 | 


--------------------------------------------------------------------------------
/example/header-anchor.html:
--------------------------------------------------------------------------------
 1 | <header-anchor>
 2 | 	<template shadowrootmode="open">
 3 | 		<style>
 4 | 			a {
 5 | 				color: inherit;
 6 | 			}
 7 | 			::slotted(*)::before {
 8 | 				content: '# ';
 9 | 				opacity: 0.3;
10 | 			}
11 | 			::slotted(*:hover)::before {
12 | 				opacity: 0.7;
13 | 			}
14 | 			a:not(:hover) {
15 | 				text-decoration: none;
16 | 			}
17 | 		</style>
18 | 
19 | 		<a><slot></slot></a>
20 | 	</template>
21 | 
22 | 	<script td-method="constructor">
23 | 		new MutationObserver(() => {
24 | 			this.decorateHeader();
25 | 		}).observe(this, { childList: true });
26 | 	</script>
27 | 	<script td-method="decorateHeader">
28 | 		this.id = this.textContent.trim().toLowerCase().replace(/\s+/g, '-');
29 | 
30 | 		const link = this.shadowRoot.querySelector('a');
31 | 		link.href = `#${this.id}`;
32 | 	</script>
33 | </header-anchor>
34 | 


--------------------------------------------------------------------------------
/example/header-anchor.js:
--------------------------------------------------------------------------------
 1 | 
 2 | (() => {
 3 | 	class TramDeco{static processTemplate(e){[...e.content.children].forEach(e=>{TramDeco.define(e)})}static define(templateElement){const tagName=templateElement.tagName.toLowerCase();class BaseTDElement extends HTMLElement{constructor(e){var t;super(),e&&(this.attachShadow(e),(t=document.createRange()).selectNodeContents(e),this.shadowRoot.append(t.cloneContents()))}}const parentClassName=templateElement.getAttribute("td-extends"),parentClass=customElements.get(parentClassName)||BaseTDElement,modifiedConstructor=templateElement.querySelector('script[td-method="constructor"]');class TDElement extends parentClass{constructor(overrideShadowRoot){super(overrideShadowRoot||templateElement.shadowRoot),eval(modifiedConstructor?.textContent||"")}}templateElement.querySelectorAll("script[td-method]").forEach(lifecycleScript=>{const methodName=lifecycleScript.getAttribute("td-method");TDElement.prototype[methodName]=function(){eval(lifecycleScript.textContent)}}),templateElement.querySelectorAll("script[td-property]").forEach(propertyScript=>{const propertyName=propertyScript.getAttribute("td-property");Object.defineProperty(TDElement,propertyName,{get:function(){return eval(propertyScript.textContent)}})}),customElements.define(tagName,TDElement)}}
 4 | 
 5 | 	const importTemplate = document.createElement('template')
 6 | 	importTemplate.setHTMLUnsafe(`<header-anchor>
 7 | 	<template shadowrootmode="open">
 8 | 		<style>
 9 | 			a {
10 | 				color: inherit;
11 | 			}
12 | 			::slotted(*)::before {
13 | 				content: '# ';
14 | 				opacity: 0.3;
15 | 			}
16 | 			::slotted(*:hover)::before {
17 | 				opacity: 0.7;
18 | 			}
19 | 			a:not(:hover) {
20 | 				text-decoration: none;
21 | 			}
22 | 		</style>
23 | 
24 | 		<a><slot></slot></a>
25 | 	</template>
26 | 
27 | 	<script td-method="constructor">
28 | 		new MutationObserver(() => {
29 | 			this.decorateHeader();
30 | 		}).observe(this, { childList: true });
31 | 	</script>
32 | 	<script td-method="decorateHeader">
33 | 		this.id = this.textContent.trim().toLowerCase().replace(/\\s+/g, '-');
34 | 
35 | 		const link = this.shadowRoot.querySelector('a');
36 | 		link.href = \`#\${this.id}\`;
37 | 	</script>
38 | </header-anchor>
39 | `)
40 | 
41 | 	TramDeco.processTemplate(importTemplate);
42 | })()
43 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
  1 | <!-- include main library, so we have access to `TramDeco` class (used for processing the element definition template) -->
  2 | <script src="../tram-deco.js"></script>
  3 | 
  4 | <template id="elementDefinitions">
  5 | 	<!-- definition for a custom-title tag! -->
  6 | 	<custom-title>
  7 | 		<!-- declarative shadow dom for the insides -->
  8 | 		<template shadowrootmode="open">
  9 | 			<!-- styles, for just this element -->
 10 | 			<style>
 11 | 				h1 {
 12 | 					color: blue;
 13 | 				}
 14 | 			</style>
 15 | 
 16 | 			<!-- dom, to show on the page -->
 17 | 			<h1>
 18 | 				<slot>Hello World</slot>
 19 | 			</h1>
 20 | 			<hr />
 21 | 		</template>
 22 | 
 23 | 		<!-- scripts, that run when the component mounts -->
 24 | 		<script td-method="connectedCallback">
 25 | 			this.shadowRoot.querySelector('slot').addEventListener('slotchange', () => {
 26 | 				document.title = this.textContent || 'Hello World';
 27 | 			});
 28 | 		</script>
 29 | 	</custom-title>
 30 | 
 31 | 	<callout-alert>
 32 | 		<script td-property="observedAttributes">
 33 | 			['collapsed'];
 34 | 		</script>
 35 | 		<template shadowrootmode="open">
 36 | 			<style>
 37 | 				div {
 38 | 					display: flex;
 39 | 					flex-direction: column;
 40 | 					border-left: solid 3px rgb(47, 129, 247);
 41 | 					background: rgba(47, 129, 247, 0.1);
 42 | 					padding: 0.5em;
 43 | 					gap: 0.3em;
 44 | 				}
 45 | 
 46 | 				[name='title'] {
 47 | 					font-weight: bold;
 48 | 					color: rgb(47, 129, 247);
 49 | 				}
 50 | 
 51 | 				:host([collapsed]) #content {
 52 | 					display: none;
 53 | 				}
 54 | 			</style>
 55 | 
 56 | 			<div>
 57 | 				<span>
 58 | 					<slot name="title"></slot>
 59 | 					<button id="collapse">collapse</button>
 60 | 				</span>
 61 | 				<span id="content"><slot></slot></span>
 62 | 			</div>
 63 | 		</template>
 64 | 
 65 | 		<script td-method="constructor">
 66 | 			this.collapse = this.shadowRoot.getElementById('collapse');
 67 | 		</script>
 68 | 
 69 | 		<script td-method="connectedCallback">
 70 | 			this.collapse.addEventListener('click', () => {
 71 | 				this.toggleAttribute('collapsed');
 72 | 			});
 73 | 		</script>
 74 | 
 75 | 		<script td-method="attributeChangedCallback">
 76 | 			const [name, oldValue, newValue] = arguments;
 77 | 			if (name === 'collapsed') {
 78 | 				this.collapse.textContent = this.hasAttribute('collapsed') ? 'expand' : 'collapse';
 79 | 			}
 80 | 		</script>
 81 | 	</callout-alert>
 82 | 
 83 | 	<!-- counter example -->
 84 | 	<my-counter>
 85 | 		<script td-property="observedAttributes">
 86 | 			['count'];
 87 | 		</script>
 88 | 
 89 | 		<template shadowrootmode="open" shadowrootdelegatesfocus>
 90 | 			<style>
 91 | 				button {
 92 | 					cursor: pointer;
 93 | 					color: blue;
 94 | 				}
 95 | 			</style>
 96 | 			<button><slot>Counter</slot>: <span>0</span></button>
 97 | 		</template>
 98 | 
 99 | 		<script td-method="connectedCallback">
100 | 			const button = this.shadowRoot.querySelector('button');
101 | 			button.addEventListener('click', (event) => {
102 | 				const newCount = parseInt(this.getAttribute('count')) + 1;
103 | 				this.setAttribute('count', newCount);
104 | 			});
105 | 		</script>
106 | 
107 | 		<script td-method="attributeChangedCallback">
108 | 			const [name, oldValue, newValue] = arguments;
109 | 			if (name === 'count') {
110 | 				const span = this.shadowRoot.querySelector('span');
111 | 				span.textContent = newValue;
112 | 			}
113 | 		</script>
114 | 	</my-counter>
115 | 
116 | 	<!-- extended counter, does nothing addition -->
117 | 	<my-copied-counter td-extends="my-counter"></my-copied-counter>
118 | 
119 | 	<!-- extended counter, changes the dom layout -->
120 | 	<my-red-counter td-extends="my-counter">
121 | 		<template shadowrootmode="open" shadowrootdelegatesfocus>
122 | 			<style>
123 | 				button {
124 | 					cursor: pointer;
125 | 					color: red;
126 | 				}
127 | 			</style>
128 | 			<button>TOTAL CLICKS - <span>0</span></button>
129 | 		</template>
130 | 	</my-red-counter>
131 | 
132 | 	<!-- extended counter, goes down instead of up -->
133 | 	<my-decrementing-counter td-extends="my-counter">
134 | 		<script td-method="connectedCallback">
135 | 			const button = this.shadowRoot.querySelector('button');
136 | 			button.addEventListener('click', (event) => {
137 | 				const newCount = parseInt(this.getAttribute('count')) - 1;
138 | 				this.setAttribute('count', newCount);
139 | 			});
140 | 		</script>
141 | 	</my-decrementing-counter>
142 | 
143 | 	<!-- button that extends an action-only interface -->
144 | 	<removable-button>
145 | 		<script td-method="connectedCallback">
146 | 			this.button = this.shadowRoot.querySelector('button');
147 | 			this.button.addEventListener('click', () => {
148 | 				this.remove();
149 | 			});
150 | 		</script>
151 | 	</removable-button>
152 | 
153 | 	<red-removable-button td-extends="removable-button">
154 | 		<template shadowrootmode="open">
155 | 			<style>
156 | 				button {
157 | 					color: red;
158 | 				}
159 | 			</style>
160 | 			<button>Click Me</button>
161 | 		</template>
162 | 	</red-removable-button>
163 | </template>
164 | 
165 | <script>
166 | 	// processTemplate call, pointed to the template with component definitions
167 | 	//  to define them on the global registry
168 | 	TramDeco.processTemplate(elementDefinitions);
169 | </script>
170 | 
171 | <!-- import definition from external file -->
172 | <!-- this definition must be built using `npx tram-deco export-components ./header-anchor.html` -->
173 | <script src="./header-anchor.js"></script>
174 | 
175 | <!-- include the defined components in the main HTML body -->
176 | <custom-title>Tram-Deco is Cool!</custom-title>
177 | <my-counter id="a" count="0"></my-counter>
178 | <my-counter id="b" count="12">Special</my-counter>
179 | <my-copied-counter id="c" count="15">Copied Counter</my-copied-counter>
180 | <my-red-counter id="d" count="10"></my-red-counter>
181 | <my-decrementing-counter id="e" count="5">Decrementing Counter</my-decrementing-counter>
182 | <red-removable-button id="r"></red-removable-button>
183 | <callout-alert collapsed>
184 | 	<span slot="title">Import Alert</span>
185 | 	<span>The following spoiler only works on browsers that support <code>setHTMLUnsafe</code></span>
186 | </callout-alert>
187 | 
188 | <header-anchor>
189 | 	<h1>Introduction</h1>
190 | </header-anchor>
191 | This is some introductory content
192 | <header-anchor>
193 | 	<h2>More Details</h2>
194 | </header-anchor>
195 | If you want to read more, checkout the README.
196 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tram-One/tram-deco/df8c28b8a176c9e08daac02a095949efb428f3b0/logo.png


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
   1 | {
   2 | 	"name": "tram-deco",
   3 | 	"version": "6.1.2",
   4 | 	"lockfileVersion": 3,
   5 | 	"requires": true,
   6 | 	"packages": {
   7 | 		"": {
   8 | 			"name": "tram-deco",
   9 | 			"version": "6.1.2",
  10 | 			"license": "MIT",
  11 | 			"bin": {
  12 | 				"export-components": "scripts/export-components.js"
  13 | 			},
  14 | 			"devDependencies": {
  15 | 				"@playwright/test": "^1.46.1",
  16 | 				"@types/node": "^22.5.0",
  17 | 				"playwright-webkit": "^1.46.1",
  18 | 				"prettier": "^3.2.4",
  19 | 				"serve": "^14.2.1",
  20 | 				"uglify-js": "^3.17.4"
  21 | 			}
  22 | 		},
  23 | 		"node_modules/@playwright/test": {
  24 | 			"version": "1.46.1",
  25 | 			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.1.tgz",
  26 | 			"integrity": "sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==",
  27 | 			"dev": true,
  28 | 			"dependencies": {
  29 | 				"playwright": "1.46.1"
  30 | 			},
  31 | 			"bin": {
  32 | 				"playwright": "cli.js"
  33 | 			},
  34 | 			"engines": {
  35 | 				"node": ">=18"
  36 | 			}
  37 | 		},
  38 | 		"node_modules/@types/node": {
  39 | 			"version": "22.5.0",
  40 | 			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.0.tgz",
  41 | 			"integrity": "sha512-DkFrJOe+rfdHTqqMg0bSNlGlQ85hSoh2TPzZyhHsXnMtligRWpxUySiyw8FY14ITt24HVCiQPWxS3KO/QlGmWg==",
  42 | 			"dev": true,
  43 | 			"dependencies": {
  44 | 				"undici-types": "~6.19.2"
  45 | 			}
  46 | 		},
  47 | 		"node_modules/@zeit/schemas": {
  48 | 			"version": "2.29.0",
  49 | 			"resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.29.0.tgz",
  50 | 			"integrity": "sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==",
  51 | 			"dev": true
  52 | 		},
  53 | 		"node_modules/accepts": {
  54 | 			"version": "1.3.8",
  55 | 			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
  56 | 			"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
  57 | 			"dev": true,
  58 | 			"dependencies": {
  59 | 				"mime-types": "~2.1.34",
  60 | 				"negotiator": "0.6.3"
  61 | 			},
  62 | 			"engines": {
  63 | 				"node": ">= 0.6"
  64 | 			}
  65 | 		},
  66 | 		"node_modules/ajv": {
  67 | 			"version": "8.11.0",
  68 | 			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
  69 | 			"integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
  70 | 			"dev": true,
  71 | 			"dependencies": {
  72 | 				"fast-deep-equal": "^3.1.1",
  73 | 				"json-schema-traverse": "^1.0.0",
  74 | 				"require-from-string": "^2.0.2",
  75 | 				"uri-js": "^4.2.2"
  76 | 			},
  77 | 			"funding": {
  78 | 				"type": "github",
  79 | 				"url": "https://github.com/sponsors/epoberezkin"
  80 | 			}
  81 | 		},
  82 | 		"node_modules/ansi-align": {
  83 | 			"version": "3.0.1",
  84 | 			"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
  85 | 			"integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
  86 | 			"dev": true,
  87 | 			"dependencies": {
  88 | 				"string-width": "^4.1.0"
  89 | 			}
  90 | 		},
  91 | 		"node_modules/ansi-regex": {
  92 | 			"version": "5.0.1",
  93 | 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
  94 | 			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
  95 | 			"dev": true,
  96 | 			"engines": {
  97 | 				"node": ">=8"
  98 | 			}
  99 | 		},
 100 | 		"node_modules/ansi-styles": {
 101 | 			"version": "4.3.0",
 102 | 			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 103 | 			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 104 | 			"dev": true,
 105 | 			"dependencies": {
 106 | 				"color-convert": "^2.0.1"
 107 | 			},
 108 | 			"engines": {
 109 | 				"node": ">=8"
 110 | 			},
 111 | 			"funding": {
 112 | 				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
 113 | 			}
 114 | 		},
 115 | 		"node_modules/arch": {
 116 | 			"version": "2.2.0",
 117 | 			"resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
 118 | 			"integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
 119 | 			"dev": true,
 120 | 			"funding": [
 121 | 				{
 122 | 					"type": "github",
 123 | 					"url": "https://github.com/sponsors/feross"
 124 | 				},
 125 | 				{
 126 | 					"type": "patreon",
 127 | 					"url": "https://www.patreon.com/feross"
 128 | 				},
 129 | 				{
 130 | 					"type": "consulting",
 131 | 					"url": "https://feross.org/support"
 132 | 				}
 133 | 			]
 134 | 		},
 135 | 		"node_modules/arg": {
 136 | 			"version": "5.0.2",
 137 | 			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
 138 | 			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
 139 | 			"dev": true
 140 | 		},
 141 | 		"node_modules/balanced-match": {
 142 | 			"version": "1.0.2",
 143 | 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 144 | 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 145 | 			"dev": true
 146 | 		},
 147 | 		"node_modules/boxen": {
 148 | 			"version": "7.0.0",
 149 | 			"resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz",
 150 | 			"integrity": "sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==",
 151 | 			"dev": true,
 152 | 			"dependencies": {
 153 | 				"ansi-align": "^3.0.1",
 154 | 				"camelcase": "^7.0.0",
 155 | 				"chalk": "^5.0.1",
 156 | 				"cli-boxes": "^3.0.0",
 157 | 				"string-width": "^5.1.2",
 158 | 				"type-fest": "^2.13.0",
 159 | 				"widest-line": "^4.0.1",
 160 | 				"wrap-ansi": "^8.0.1"
 161 | 			},
 162 | 			"engines": {
 163 | 				"node": ">=14.16"
 164 | 			},
 165 | 			"funding": {
 166 | 				"url": "https://github.com/sponsors/sindresorhus"
 167 | 			}
 168 | 		},
 169 | 		"node_modules/boxen/node_modules/ansi-regex": {
 170 | 			"version": "6.0.1",
 171 | 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
 172 | 			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
 173 | 			"dev": true,
 174 | 			"engines": {
 175 | 				"node": ">=12"
 176 | 			},
 177 | 			"funding": {
 178 | 				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
 179 | 			}
 180 | 		},
 181 | 		"node_modules/boxen/node_modules/ansi-styles": {
 182 | 			"version": "6.2.1",
 183 | 			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
 184 | 			"integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
 185 | 			"dev": true,
 186 | 			"engines": {
 187 | 				"node": ">=12"
 188 | 			},
 189 | 			"funding": {
 190 | 				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
 191 | 			}
 192 | 		},
 193 | 		"node_modules/boxen/node_modules/chalk": {
 194 | 			"version": "5.3.0",
 195 | 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
 196 | 			"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
 197 | 			"dev": true,
 198 | 			"engines": {
 199 | 				"node": "^12.17.0 || ^14.13 || >=16.0.0"
 200 | 			},
 201 | 			"funding": {
 202 | 				"url": "https://github.com/chalk/chalk?sponsor=1"
 203 | 			}
 204 | 		},
 205 | 		"node_modules/boxen/node_modules/emoji-regex": {
 206 | 			"version": "9.2.2",
 207 | 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
 208 | 			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
 209 | 			"dev": true
 210 | 		},
 211 | 		"node_modules/boxen/node_modules/string-width": {
 212 | 			"version": "5.1.2",
 213 | 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
 214 | 			"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
 215 | 			"dev": true,
 216 | 			"dependencies": {
 217 | 				"eastasianwidth": "^0.2.0",
 218 | 				"emoji-regex": "^9.2.2",
 219 | 				"strip-ansi": "^7.0.1"
 220 | 			},
 221 | 			"engines": {
 222 | 				"node": ">=12"
 223 | 			},
 224 | 			"funding": {
 225 | 				"url": "https://github.com/sponsors/sindresorhus"
 226 | 			}
 227 | 		},
 228 | 		"node_modules/boxen/node_modules/strip-ansi": {
 229 | 			"version": "7.1.0",
 230 | 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
 231 | 			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
 232 | 			"dev": true,
 233 | 			"dependencies": {
 234 | 				"ansi-regex": "^6.0.1"
 235 | 			},
 236 | 			"engines": {
 237 | 				"node": ">=12"
 238 | 			},
 239 | 			"funding": {
 240 | 				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
 241 | 			}
 242 | 		},
 243 | 		"node_modules/boxen/node_modules/type-fest": {
 244 | 			"version": "2.19.0",
 245 | 			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
 246 | 			"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
 247 | 			"dev": true,
 248 | 			"engines": {
 249 | 				"node": ">=12.20"
 250 | 			},
 251 | 			"funding": {
 252 | 				"url": "https://github.com/sponsors/sindresorhus"
 253 | 			}
 254 | 		},
 255 | 		"node_modules/boxen/node_modules/wrap-ansi": {
 256 | 			"version": "8.1.0",
 257 | 			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
 258 | 			"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
 259 | 			"dev": true,
 260 | 			"dependencies": {
 261 | 				"ansi-styles": "^6.1.0",
 262 | 				"string-width": "^5.0.1",
 263 | 				"strip-ansi": "^7.0.1"
 264 | 			},
 265 | 			"engines": {
 266 | 				"node": ">=12"
 267 | 			},
 268 | 			"funding": {
 269 | 				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
 270 | 			}
 271 | 		},
 272 | 		"node_modules/brace-expansion": {
 273 | 			"version": "1.1.11",
 274 | 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 275 | 			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
 276 | 			"dev": true,
 277 | 			"dependencies": {
 278 | 				"balanced-match": "^1.0.0",
 279 | 				"concat-map": "0.0.1"
 280 | 			}
 281 | 		},
 282 | 		"node_modules/bytes": {
 283 | 			"version": "3.0.0",
 284 | 			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
 285 | 			"integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
 286 | 			"dev": true,
 287 | 			"engines": {
 288 | 				"node": ">= 0.8"
 289 | 			}
 290 | 		},
 291 | 		"node_modules/camelcase": {
 292 | 			"version": "7.0.1",
 293 | 			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz",
 294 | 			"integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
 295 | 			"dev": true,
 296 | 			"engines": {
 297 | 				"node": ">=14.16"
 298 | 			},
 299 | 			"funding": {
 300 | 				"url": "https://github.com/sponsors/sindresorhus"
 301 | 			}
 302 | 		},
 303 | 		"node_modules/chalk": {
 304 | 			"version": "4.1.2",
 305 | 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
 306 | 			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
 307 | 			"dev": true,
 308 | 			"dependencies": {
 309 | 				"ansi-styles": "^4.1.0",
 310 | 				"supports-color": "^7.1.0"
 311 | 			},
 312 | 			"engines": {
 313 | 				"node": ">=10"
 314 | 			},
 315 | 			"funding": {
 316 | 				"url": "https://github.com/chalk/chalk?sponsor=1"
 317 | 			}
 318 | 		},
 319 | 		"node_modules/chalk-template": {
 320 | 			"version": "0.4.0",
 321 | 			"resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
 322 | 			"integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
 323 | 			"dev": true,
 324 | 			"dependencies": {
 325 | 				"chalk": "^4.1.2"
 326 | 			},
 327 | 			"engines": {
 328 | 				"node": ">=12"
 329 | 			},
 330 | 			"funding": {
 331 | 				"url": "https://github.com/chalk/chalk-template?sponsor=1"
 332 | 			}
 333 | 		},
 334 | 		"node_modules/chalk/node_modules/supports-color": {
 335 | 			"version": "7.2.0",
 336 | 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
 337 | 			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 338 | 			"dev": true,
 339 | 			"dependencies": {
 340 | 				"has-flag": "^4.0.0"
 341 | 			},
 342 | 			"engines": {
 343 | 				"node": ">=8"
 344 | 			}
 345 | 		},
 346 | 		"node_modules/cli-boxes": {
 347 | 			"version": "3.0.0",
 348 | 			"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
 349 | 			"integrity": "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==",
 350 | 			"dev": true,
 351 | 			"engines": {
 352 | 				"node": ">=10"
 353 | 			},
 354 | 			"funding": {
 355 | 				"url": "https://github.com/sponsors/sindresorhus"
 356 | 			}
 357 | 		},
 358 | 		"node_modules/clipboardy": {
 359 | 			"version": "3.0.0",
 360 | 			"resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz",
 361 | 			"integrity": "sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==",
 362 | 			"dev": true,
 363 | 			"dependencies": {
 364 | 				"arch": "^2.2.0",
 365 | 				"execa": "^5.1.1",
 366 | 				"is-wsl": "^2.2.0"
 367 | 			},
 368 | 			"engines": {
 369 | 				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
 370 | 			},
 371 | 			"funding": {
 372 | 				"url": "https://github.com/sponsors/sindresorhus"
 373 | 			}
 374 | 		},
 375 | 		"node_modules/clipboardy/node_modules/execa": {
 376 | 			"version": "5.1.1",
 377 | 			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
 378 | 			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
 379 | 			"dev": true,
 380 | 			"dependencies": {
 381 | 				"cross-spawn": "^7.0.3",
 382 | 				"get-stream": "^6.0.0",
 383 | 				"human-signals": "^2.1.0",
 384 | 				"is-stream": "^2.0.0",
 385 | 				"merge-stream": "^2.0.0",
 386 | 				"npm-run-path": "^4.0.1",
 387 | 				"onetime": "^5.1.2",
 388 | 				"signal-exit": "^3.0.3",
 389 | 				"strip-final-newline": "^2.0.0"
 390 | 			},
 391 | 			"engines": {
 392 | 				"node": ">=10"
 393 | 			},
 394 | 			"funding": {
 395 | 				"url": "https://github.com/sindresorhus/execa?sponsor=1"
 396 | 			}
 397 | 		},
 398 | 		"node_modules/clipboardy/node_modules/get-stream": {
 399 | 			"version": "6.0.1",
 400 | 			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
 401 | 			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
 402 | 			"dev": true,
 403 | 			"engines": {
 404 | 				"node": ">=10"
 405 | 			},
 406 | 			"funding": {
 407 | 				"url": "https://github.com/sponsors/sindresorhus"
 408 | 			}
 409 | 		},
 410 | 		"node_modules/clipboardy/node_modules/human-signals": {
 411 | 			"version": "2.1.0",
 412 | 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
 413 | 			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
 414 | 			"dev": true,
 415 | 			"engines": {
 416 | 				"node": ">=10.17.0"
 417 | 			}
 418 | 		},
 419 | 		"node_modules/color-convert": {
 420 | 			"version": "2.0.1",
 421 | 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 422 | 			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
 423 | 			"dev": true,
 424 | 			"dependencies": {
 425 | 				"color-name": "~1.1.4"
 426 | 			},
 427 | 			"engines": {
 428 | 				"node": ">=7.0.0"
 429 | 			}
 430 | 		},
 431 | 		"node_modules/color-name": {
 432 | 			"version": "1.1.4",
 433 | 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 434 | 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 435 | 			"dev": true
 436 | 		},
 437 | 		"node_modules/compressible": {
 438 | 			"version": "2.0.18",
 439 | 			"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
 440 | 			"integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
 441 | 			"dev": true,
 442 | 			"dependencies": {
 443 | 				"mime-db": ">= 1.43.0 < 2"
 444 | 			},
 445 | 			"engines": {
 446 | 				"node": ">= 0.6"
 447 | 			}
 448 | 		},
 449 | 		"node_modules/compression": {
 450 | 			"version": "1.7.4",
 451 | 			"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
 452 | 			"integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
 453 | 			"dev": true,
 454 | 			"dependencies": {
 455 | 				"accepts": "~1.3.5",
 456 | 				"bytes": "3.0.0",
 457 | 				"compressible": "~2.0.16",
 458 | 				"debug": "2.6.9",
 459 | 				"on-headers": "~1.0.2",
 460 | 				"safe-buffer": "5.1.2",
 461 | 				"vary": "~1.1.2"
 462 | 			},
 463 | 			"engines": {
 464 | 				"node": ">= 0.8.0"
 465 | 			}
 466 | 		},
 467 | 		"node_modules/compression/node_modules/debug": {
 468 | 			"version": "2.6.9",
 469 | 			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 470 | 			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 471 | 			"dev": true,
 472 | 			"dependencies": {
 473 | 				"ms": "2.0.0"
 474 | 			}
 475 | 		},
 476 | 		"node_modules/compression/node_modules/ms": {
 477 | 			"version": "2.0.0",
 478 | 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 479 | 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
 480 | 			"dev": true
 481 | 		},
 482 | 		"node_modules/compression/node_modules/safe-buffer": {
 483 | 			"version": "5.1.2",
 484 | 			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
 485 | 			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
 486 | 			"dev": true
 487 | 		},
 488 | 		"node_modules/concat-map": {
 489 | 			"version": "0.0.1",
 490 | 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 491 | 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 492 | 			"dev": true
 493 | 		},
 494 | 		"node_modules/content-disposition": {
 495 | 			"version": "0.5.2",
 496 | 			"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
 497 | 			"integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
 498 | 			"dev": true,
 499 | 			"engines": {
 500 | 				"node": ">= 0.6"
 501 | 			}
 502 | 		},
 503 | 		"node_modules/cross-spawn": {
 504 | 			"version": "7.0.3",
 505 | 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
 506 | 			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
 507 | 			"dev": true,
 508 | 			"dependencies": {
 509 | 				"path-key": "^3.1.0",
 510 | 				"shebang-command": "^2.0.0",
 511 | 				"which": "^2.0.1"
 512 | 			},
 513 | 			"engines": {
 514 | 				"node": ">= 8"
 515 | 			}
 516 | 		},
 517 | 		"node_modules/deep-extend": {
 518 | 			"version": "0.6.0",
 519 | 			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
 520 | 			"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
 521 | 			"dev": true,
 522 | 			"engines": {
 523 | 				"node": ">=4.0.0"
 524 | 			}
 525 | 		},
 526 | 		"node_modules/eastasianwidth": {
 527 | 			"version": "0.2.0",
 528 | 			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
 529 | 			"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
 530 | 			"dev": true
 531 | 		},
 532 | 		"node_modules/emoji-regex": {
 533 | 			"version": "8.0.0",
 534 | 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
 535 | 			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
 536 | 			"dev": true
 537 | 		},
 538 | 		"node_modules/fast-deep-equal": {
 539 | 			"version": "3.1.3",
 540 | 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
 541 | 			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
 542 | 			"dev": true
 543 | 		},
 544 | 		"node_modules/fast-url-parser": {
 545 | 			"version": "1.1.3",
 546 | 			"resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
 547 | 			"integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
 548 | 			"dev": true,
 549 | 			"dependencies": {
 550 | 				"punycode": "^1.3.2"
 551 | 			}
 552 | 		},
 553 | 		"node_modules/fsevents": {
 554 | 			"version": "2.3.2",
 555 | 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
 556 | 			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
 557 | 			"dev": true,
 558 | 			"hasInstallScript": true,
 559 | 			"optional": true,
 560 | 			"os": [
 561 | 				"darwin"
 562 | 			],
 563 | 			"engines": {
 564 | 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 565 | 			}
 566 | 		},
 567 | 		"node_modules/has-flag": {
 568 | 			"version": "4.0.0",
 569 | 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 570 | 			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 571 | 			"dev": true,
 572 | 			"engines": {
 573 | 				"node": ">=8"
 574 | 			}
 575 | 		},
 576 | 		"node_modules/is-docker": {
 577 | 			"version": "2.2.1",
 578 | 			"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
 579 | 			"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
 580 | 			"dev": true,
 581 | 			"bin": {
 582 | 				"is-docker": "cli.js"
 583 | 			},
 584 | 			"engines": {
 585 | 				"node": ">=8"
 586 | 			},
 587 | 			"funding": {
 588 | 				"url": "https://github.com/sponsors/sindresorhus"
 589 | 			}
 590 | 		},
 591 | 		"node_modules/is-fullwidth-code-point": {
 592 | 			"version": "3.0.0",
 593 | 			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
 594 | 			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
 595 | 			"dev": true,
 596 | 			"engines": {
 597 | 				"node": ">=8"
 598 | 			}
 599 | 		},
 600 | 		"node_modules/is-port-reachable": {
 601 | 			"version": "4.0.0",
 602 | 			"resolved": "https://registry.npmjs.org/is-port-reachable/-/is-port-reachable-4.0.0.tgz",
 603 | 			"integrity": "sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==",
 604 | 			"dev": true,
 605 | 			"engines": {
 606 | 				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
 607 | 			},
 608 | 			"funding": {
 609 | 				"url": "https://github.com/sponsors/sindresorhus"
 610 | 			}
 611 | 		},
 612 | 		"node_modules/is-stream": {
 613 | 			"version": "2.0.1",
 614 | 			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
 615 | 			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
 616 | 			"dev": true,
 617 | 			"engines": {
 618 | 				"node": ">=8"
 619 | 			},
 620 | 			"funding": {
 621 | 				"url": "https://github.com/sponsors/sindresorhus"
 622 | 			}
 623 | 		},
 624 | 		"node_modules/is-wsl": {
 625 | 			"version": "2.2.0",
 626 | 			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
 627 | 			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
 628 | 			"dev": true,
 629 | 			"dependencies": {
 630 | 				"is-docker": "^2.0.0"
 631 | 			},
 632 | 			"engines": {
 633 | 				"node": ">=8"
 634 | 			}
 635 | 		},
 636 | 		"node_modules/isexe": {
 637 | 			"version": "2.0.0",
 638 | 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
 639 | 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
 640 | 			"dev": true
 641 | 		},
 642 | 		"node_modules/json-schema-traverse": {
 643 | 			"version": "1.0.0",
 644 | 			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
 645 | 			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
 646 | 			"dev": true
 647 | 		},
 648 | 		"node_modules/merge-stream": {
 649 | 			"version": "2.0.0",
 650 | 			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
 651 | 			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
 652 | 			"dev": true
 653 | 		},
 654 | 		"node_modules/mime-db": {
 655 | 			"version": "1.52.0",
 656 | 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
 657 | 			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
 658 | 			"dev": true,
 659 | 			"engines": {
 660 | 				"node": ">= 0.6"
 661 | 			}
 662 | 		},
 663 | 		"node_modules/mime-types": {
 664 | 			"version": "2.1.35",
 665 | 			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
 666 | 			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
 667 | 			"dev": true,
 668 | 			"dependencies": {
 669 | 				"mime-db": "1.52.0"
 670 | 			},
 671 | 			"engines": {
 672 | 				"node": ">= 0.6"
 673 | 			}
 674 | 		},
 675 | 		"node_modules/mimic-fn": {
 676 | 			"version": "2.1.0",
 677 | 			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
 678 | 			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
 679 | 			"dev": true,
 680 | 			"engines": {
 681 | 				"node": ">=6"
 682 | 			}
 683 | 		},
 684 | 		"node_modules/minimatch": {
 685 | 			"version": "3.1.2",
 686 | 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
 687 | 			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
 688 | 			"dev": true,
 689 | 			"dependencies": {
 690 | 				"brace-expansion": "^1.1.7"
 691 | 			},
 692 | 			"engines": {
 693 | 				"node": "*"
 694 | 			}
 695 | 		},
 696 | 		"node_modules/minimist": {
 697 | 			"version": "1.2.8",
 698 | 			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
 699 | 			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
 700 | 			"dev": true,
 701 | 			"funding": {
 702 | 				"url": "https://github.com/sponsors/ljharb"
 703 | 			}
 704 | 		},
 705 | 		"node_modules/negotiator": {
 706 | 			"version": "0.6.3",
 707 | 			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
 708 | 			"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
 709 | 			"dev": true,
 710 | 			"engines": {
 711 | 				"node": ">= 0.6"
 712 | 			}
 713 | 		},
 714 | 		"node_modules/npm-run-path": {
 715 | 			"version": "4.0.1",
 716 | 			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
 717 | 			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
 718 | 			"dev": true,
 719 | 			"dependencies": {
 720 | 				"path-key": "^3.0.0"
 721 | 			},
 722 | 			"engines": {
 723 | 				"node": ">=8"
 724 | 			}
 725 | 		},
 726 | 		"node_modules/on-headers": {
 727 | 			"version": "1.0.2",
 728 | 			"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
 729 | 			"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
 730 | 			"dev": true,
 731 | 			"engines": {
 732 | 				"node": ">= 0.8"
 733 | 			}
 734 | 		},
 735 | 		"node_modules/onetime": {
 736 | 			"version": "5.1.2",
 737 | 			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
 738 | 			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
 739 | 			"dev": true,
 740 | 			"dependencies": {
 741 | 				"mimic-fn": "^2.1.0"
 742 | 			},
 743 | 			"engines": {
 744 | 				"node": ">=6"
 745 | 			},
 746 | 			"funding": {
 747 | 				"url": "https://github.com/sponsors/sindresorhus"
 748 | 			}
 749 | 		},
 750 | 		"node_modules/path-is-inside": {
 751 | 			"version": "1.0.2",
 752 | 			"resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
 753 | 			"integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
 754 | 			"dev": true
 755 | 		},
 756 | 		"node_modules/path-key": {
 757 | 			"version": "3.1.1",
 758 | 			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
 759 | 			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
 760 | 			"dev": true,
 761 | 			"engines": {
 762 | 				"node": ">=8"
 763 | 			}
 764 | 		},
 765 | 		"node_modules/path-to-regexp": {
 766 | 			"version": "2.2.1",
 767 | 			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
 768 | 			"integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
 769 | 			"dev": true
 770 | 		},
 771 | 		"node_modules/playwright": {
 772 | 			"version": "1.46.1",
 773 | 			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz",
 774 | 			"integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==",
 775 | 			"dev": true,
 776 | 			"dependencies": {
 777 | 				"playwright-core": "1.46.1"
 778 | 			},
 779 | 			"bin": {
 780 | 				"playwright": "cli.js"
 781 | 			},
 782 | 			"engines": {
 783 | 				"node": ">=18"
 784 | 			},
 785 | 			"optionalDependencies": {
 786 | 				"fsevents": "2.3.2"
 787 | 			}
 788 | 		},
 789 | 		"node_modules/playwright-core": {
 790 | 			"version": "1.46.1",
 791 | 			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz",
 792 | 			"integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==",
 793 | 			"dev": true,
 794 | 			"bin": {
 795 | 				"playwright-core": "cli.js"
 796 | 			},
 797 | 			"engines": {
 798 | 				"node": ">=18"
 799 | 			}
 800 | 		},
 801 | 		"node_modules/playwright-webkit": {
 802 | 			"version": "1.46.1",
 803 | 			"resolved": "https://registry.npmjs.org/playwright-webkit/-/playwright-webkit-1.46.1.tgz",
 804 | 			"integrity": "sha512-/ukeGPICHYZRnLHTWCESXbH0FbUrorE8Qm7iCh/hybSaEVBCu+tkrmne2d2zJ5UXj/z55Gz231y4QNix5rMIRg==",
 805 | 			"dev": true,
 806 | 			"hasInstallScript": true,
 807 | 			"dependencies": {
 808 | 				"playwright-core": "1.46.1"
 809 | 			},
 810 | 			"bin": {
 811 | 				"playwright": "cli.js"
 812 | 			},
 813 | 			"engines": {
 814 | 				"node": ">=18"
 815 | 			}
 816 | 		},
 817 | 		"node_modules/prettier": {
 818 | 			"version": "3.2.4",
 819 | 			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
 820 | 			"integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
 821 | 			"dev": true,
 822 | 			"bin": {
 823 | 				"prettier": "bin/prettier.cjs"
 824 | 			},
 825 | 			"engines": {
 826 | 				"node": ">=14"
 827 | 			},
 828 | 			"funding": {
 829 | 				"url": "https://github.com/prettier/prettier?sponsor=1"
 830 | 			}
 831 | 		},
 832 | 		"node_modules/punycode": {
 833 | 			"version": "1.4.1",
 834 | 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
 835 | 			"integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
 836 | 			"dev": true
 837 | 		},
 838 | 		"node_modules/range-parser": {
 839 | 			"version": "1.2.0",
 840 | 			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
 841 | 			"integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==",
 842 | 			"dev": true,
 843 | 			"engines": {
 844 | 				"node": ">= 0.6"
 845 | 			}
 846 | 		},
 847 | 		"node_modules/rc": {
 848 | 			"version": "1.2.8",
 849 | 			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
 850 | 			"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
 851 | 			"dev": true,
 852 | 			"dependencies": {
 853 | 				"deep-extend": "^0.6.0",
 854 | 				"ini": "~1.3.0",
 855 | 				"minimist": "^1.2.0",
 856 | 				"strip-json-comments": "~2.0.1"
 857 | 			},
 858 | 			"bin": {
 859 | 				"rc": "cli.js"
 860 | 			}
 861 | 		},
 862 | 		"node_modules/rc/node_modules/ini": {
 863 | 			"version": "1.3.8",
 864 | 			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
 865 | 			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
 866 | 			"dev": true
 867 | 		},
 868 | 		"node_modules/registry-auth-token": {
 869 | 			"version": "3.3.2",
 870 | 			"resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
 871 | 			"integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==",
 872 | 			"dev": true,
 873 | 			"dependencies": {
 874 | 				"rc": "^1.1.6",
 875 | 				"safe-buffer": "^5.0.1"
 876 | 			}
 877 | 		},
 878 | 		"node_modules/registry-url": {
 879 | 			"version": "3.1.0",
 880 | 			"resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
 881 | 			"integrity": "sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==",
 882 | 			"dev": true,
 883 | 			"dependencies": {
 884 | 				"rc": "^1.0.1"
 885 | 			},
 886 | 			"engines": {
 887 | 				"node": ">=0.10.0"
 888 | 			}
 889 | 		},
 890 | 		"node_modules/require-from-string": {
 891 | 			"version": "2.0.2",
 892 | 			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
 893 | 			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
 894 | 			"dev": true,
 895 | 			"engines": {
 896 | 				"node": ">=0.10.0"
 897 | 			}
 898 | 		},
 899 | 		"node_modules/safe-buffer": {
 900 | 			"version": "5.2.1",
 901 | 			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
 902 | 			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
 903 | 			"dev": true,
 904 | 			"funding": [
 905 | 				{
 906 | 					"type": "github",
 907 | 					"url": "https://github.com/sponsors/feross"
 908 | 				},
 909 | 				{
 910 | 					"type": "patreon",
 911 | 					"url": "https://www.patreon.com/feross"
 912 | 				},
 913 | 				{
 914 | 					"type": "consulting",
 915 | 					"url": "https://feross.org/support"
 916 | 				}
 917 | 			]
 918 | 		},
 919 | 		"node_modules/serve": {
 920 | 			"version": "14.2.1",
 921 | 			"resolved": "https://registry.npmjs.org/serve/-/serve-14.2.1.tgz",
 922 | 			"integrity": "sha512-48er5fzHh7GCShLnNyPBRPEjs2I6QBozeGr02gaacROiyS/8ARADlj595j39iZXAqBbJHH/ivJJyPRWY9sQWZA==",
 923 | 			"dev": true,
 924 | 			"dependencies": {
 925 | 				"@zeit/schemas": "2.29.0",
 926 | 				"ajv": "8.11.0",
 927 | 				"arg": "5.0.2",
 928 | 				"boxen": "7.0.0",
 929 | 				"chalk": "5.0.1",
 930 | 				"chalk-template": "0.4.0",
 931 | 				"clipboardy": "3.0.0",
 932 | 				"compression": "1.7.4",
 933 | 				"is-port-reachable": "4.0.0",
 934 | 				"serve-handler": "6.1.5",
 935 | 				"update-check": "1.5.4"
 936 | 			},
 937 | 			"bin": {
 938 | 				"serve": "build/main.js"
 939 | 			},
 940 | 			"engines": {
 941 | 				"node": ">= 14"
 942 | 			}
 943 | 		},
 944 | 		"node_modules/serve-handler": {
 945 | 			"version": "6.1.5",
 946 | 			"resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
 947 | 			"integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
 948 | 			"dev": true,
 949 | 			"dependencies": {
 950 | 				"bytes": "3.0.0",
 951 | 				"content-disposition": "0.5.2",
 952 | 				"fast-url-parser": "1.1.3",
 953 | 				"mime-types": "2.1.18",
 954 | 				"minimatch": "3.1.2",
 955 | 				"path-is-inside": "1.0.2",
 956 | 				"path-to-regexp": "2.2.1",
 957 | 				"range-parser": "1.2.0"
 958 | 			}
 959 | 		},
 960 | 		"node_modules/serve-handler/node_modules/mime-db": {
 961 | 			"version": "1.33.0",
 962 | 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
 963 | 			"integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
 964 | 			"dev": true,
 965 | 			"engines": {
 966 | 				"node": ">= 0.6"
 967 | 			}
 968 | 		},
 969 | 		"node_modules/serve-handler/node_modules/mime-types": {
 970 | 			"version": "2.1.18",
 971 | 			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
 972 | 			"integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
 973 | 			"dev": true,
 974 | 			"dependencies": {
 975 | 				"mime-db": "~1.33.0"
 976 | 			},
 977 | 			"engines": {
 978 | 				"node": ">= 0.6"
 979 | 			}
 980 | 		},
 981 | 		"node_modules/serve/node_modules/chalk": {
 982 | 			"version": "5.0.1",
 983 | 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz",
 984 | 			"integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==",
 985 | 			"dev": true,
 986 | 			"engines": {
 987 | 				"node": "^12.17.0 || ^14.13 || >=16.0.0"
 988 | 			},
 989 | 			"funding": {
 990 | 				"url": "https://github.com/chalk/chalk?sponsor=1"
 991 | 			}
 992 | 		},
 993 | 		"node_modules/shebang-command": {
 994 | 			"version": "2.0.0",
 995 | 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
 996 | 			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
 997 | 			"dev": true,
 998 | 			"dependencies": {
 999 | 				"shebang-regex": "^3.0.0"
1000 | 			},
1001 | 			"engines": {
1002 | 				"node": ">=8"
1003 | 			}
1004 | 		},
1005 | 		"node_modules/shebang-regex": {
1006 | 			"version": "3.0.0",
1007 | 			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
1008 | 			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
1009 | 			"dev": true,
1010 | 			"engines": {
1011 | 				"node": ">=8"
1012 | 			}
1013 | 		},
1014 | 		"node_modules/signal-exit": {
1015 | 			"version": "3.0.7",
1016 | 			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
1017 | 			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
1018 | 			"dev": true
1019 | 		},
1020 | 		"node_modules/string-width": {
1021 | 			"version": "4.2.3",
1022 | 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
1023 | 			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
1024 | 			"dev": true,
1025 | 			"dependencies": {
1026 | 				"emoji-regex": "^8.0.0",
1027 | 				"is-fullwidth-code-point": "^3.0.0",
1028 | 				"strip-ansi": "^6.0.1"
1029 | 			},
1030 | 			"engines": {
1031 | 				"node": ">=8"
1032 | 			}
1033 | 		},
1034 | 		"node_modules/strip-ansi": {
1035 | 			"version": "6.0.1",
1036 | 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
1037 | 			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
1038 | 			"dev": true,
1039 | 			"dependencies": {
1040 | 				"ansi-regex": "^5.0.1"
1041 | 			},
1042 | 			"engines": {
1043 | 				"node": ">=8"
1044 | 			}
1045 | 		},
1046 | 		"node_modules/strip-final-newline": {
1047 | 			"version": "2.0.0",
1048 | 			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
1049 | 			"integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
1050 | 			"dev": true,
1051 | 			"engines": {
1052 | 				"node": ">=6"
1053 | 			}
1054 | 		},
1055 | 		"node_modules/strip-json-comments": {
1056 | 			"version": "2.0.1",
1057 | 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
1058 | 			"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
1059 | 			"dev": true,
1060 | 			"engines": {
1061 | 				"node": ">=0.10.0"
1062 | 			}
1063 | 		},
1064 | 		"node_modules/uglify-js": {
1065 | 			"version": "3.17.4",
1066 | 			"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
1067 | 			"integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
1068 | 			"dev": true,
1069 | 			"bin": {
1070 | 				"uglifyjs": "bin/uglifyjs"
1071 | 			},
1072 | 			"engines": {
1073 | 				"node": ">=0.8.0"
1074 | 			}
1075 | 		},
1076 | 		"node_modules/undici-types": {
1077 | 			"version": "6.19.8",
1078 | 			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
1079 | 			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
1080 | 			"dev": true
1081 | 		},
1082 | 		"node_modules/update-check": {
1083 | 			"version": "1.5.4",
1084 | 			"resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.4.tgz",
1085 | 			"integrity": "sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==",
1086 | 			"dev": true,
1087 | 			"dependencies": {
1088 | 				"registry-auth-token": "3.3.2",
1089 | 				"registry-url": "3.1.0"
1090 | 			}
1091 | 		},
1092 | 		"node_modules/uri-js": {
1093 | 			"version": "4.4.1",
1094 | 			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
1095 | 			"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
1096 | 			"dev": true,
1097 | 			"dependencies": {
1098 | 				"punycode": "^2.1.0"
1099 | 			}
1100 | 		},
1101 | 		"node_modules/uri-js/node_modules/punycode": {
1102 | 			"version": "2.3.1",
1103 | 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
1104 | 			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
1105 | 			"dev": true,
1106 | 			"engines": {
1107 | 				"node": ">=6"
1108 | 			}
1109 | 		},
1110 | 		"node_modules/vary": {
1111 | 			"version": "1.1.2",
1112 | 			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
1113 | 			"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
1114 | 			"dev": true,
1115 | 			"engines": {
1116 | 				"node": ">= 0.8"
1117 | 			}
1118 | 		},
1119 | 		"node_modules/which": {
1120 | 			"version": "2.0.2",
1121 | 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
1122 | 			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
1123 | 			"dev": true,
1124 | 			"dependencies": {
1125 | 				"isexe": "^2.0.0"
1126 | 			},
1127 | 			"bin": {
1128 | 				"node-which": "bin/node-which"
1129 | 			},
1130 | 			"engines": {
1131 | 				"node": ">= 8"
1132 | 			}
1133 | 		},
1134 | 		"node_modules/widest-line": {
1135 | 			"version": "4.0.1",
1136 | 			"resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",
1137 | 			"integrity": "sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==",
1138 | 			"dev": true,
1139 | 			"dependencies": {
1140 | 				"string-width": "^5.0.1"
1141 | 			},
1142 | 			"engines": {
1143 | 				"node": ">=12"
1144 | 			},
1145 | 			"funding": {
1146 | 				"url": "https://github.com/sponsors/sindresorhus"
1147 | 			}
1148 | 		},
1149 | 		"node_modules/widest-line/node_modules/ansi-regex": {
1150 | 			"version": "6.0.1",
1151 | 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
1152 | 			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
1153 | 			"dev": true,
1154 | 			"engines": {
1155 | 				"node": ">=12"
1156 | 			},
1157 | 			"funding": {
1158 | 				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
1159 | 			}
1160 | 		},
1161 | 		"node_modules/widest-line/node_modules/emoji-regex": {
1162 | 			"version": "9.2.2",
1163 | 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
1164 | 			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
1165 | 			"dev": true
1166 | 		},
1167 | 		"node_modules/widest-line/node_modules/string-width": {
1168 | 			"version": "5.1.2",
1169 | 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
1170 | 			"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
1171 | 			"dev": true,
1172 | 			"dependencies": {
1173 | 				"eastasianwidth": "^0.2.0",
1174 | 				"emoji-regex": "^9.2.2",
1175 | 				"strip-ansi": "^7.0.1"
1176 | 			},
1177 | 			"engines": {
1178 | 				"node": ">=12"
1179 | 			},
1180 | 			"funding": {
1181 | 				"url": "https://github.com/sponsors/sindresorhus"
1182 | 			}
1183 | 		},
1184 | 		"node_modules/widest-line/node_modules/strip-ansi": {
1185 | 			"version": "7.1.0",
1186 | 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
1187 | 			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
1188 | 			"dev": true,
1189 | 			"dependencies": {
1190 | 				"ansi-regex": "^6.0.1"
1191 | 			},
1192 | 			"engines": {
1193 | 				"node": ">=12"
1194 | 			},
1195 | 			"funding": {
1196 | 				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
1197 | 			}
1198 | 		}
1199 | 	}
1200 | }
1201 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "tram-deco",
 3 | 	"version": "6.1.2",
 4 | 	"description": "Declarative Custom Elements using native Web Component APIs and specs",
 5 | 	"main": "tram-deco.js",
 6 | 	"files": [
 7 | 		"tram-deco.js",
 8 | 		"tram-deco.min.js",
 9 | 		"scripts/export-component.js"
10 | 	],
11 | 	"bin": {
12 | 		"export-components": "./scripts/export-components.js"
13 | 	},
14 | 	"scripts": {
15 | 		"start": "serve . -p 3000",
16 | 		"prepublishOnly": "npm run build",
17 | 		"build": "uglifyjs tram-deco.js -o tram-deco.min.js -c -m",
18 | 		"test-export": "node scripts/export-components.js example/header-anchor.html -o example/header-anchor.js",
19 | 		"pretest": "npm run build && npm run test-export",
20 | 		"test": "playwright test --ui",
21 | 		"test:ci": "playwright test"
22 | 	},
23 | 	"keywords": [
24 | 		"web-component",
25 | 		"html",
26 | 		"declarative",
27 | 		"dce",
28 | 		"custom elements"
29 | 	],
30 | 	"author": {
31 | 		"name": "Jesse Jurman",
32 | 		"email": "j.r.jurman@gmail.com",
33 | 		"url": "https://jrjurman.com"
34 | 	},
35 | 	"license": "MIT",
36 | 	"devDependencies": {
37 | 		"@playwright/test": "^1.46.1",
38 | 		"@types/node": "^22.5.0",
39 | 		"playwright-webkit": "^1.46.1",
40 | 		"prettier": "^3.2.4",
41 | 		"serve": "^14.2.1",
42 | 		"uglify-js": "^3.17.4"
43 | 	}
44 | }
45 | 


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


--------------------------------------------------------------------------------
/scripts/export-components.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | // usage - use this script to create a javascript version of one or more component definitions
 4 | // e.g. npx tram-deco export-components your-component-definition.html
 5 | 
 6 | const fs = require('fs');
 7 | const path = require('path');
 8 | 
 9 | // check to see if there is a predefined output filename (otherwise we will try to generate one)
10 | const outputFlagIndex = process.argv.findIndex((arg) => arg === '-o' || arg === '--output');
11 | const customOutputFile = outputFlagIndex !== -1 ? process.argv[outputFlagIndex + 1] : null;
12 | 
13 | const filePaths = process.argv.filter((arg) => {
14 | 	return arg.match(/\.html$/);
15 | });
16 | 
17 | if (filePaths.length === 0) {
18 | 	console.error('Please provide at least one file path as an argument.');
19 | 	process.exit(1);
20 | }
21 | 
22 | console.log('processing', filePaths, 'for export');
23 | const componentDefinitions = filePaths.map((filePath) => fs.readFileSync(filePath, 'utf8'));
24 | 
25 | // load the core Tram-Deco library
26 | const coreLibrary = fs.readFileSync(path.join(__dirname, '../tram-deco.min.js')).toString();
27 | 
28 | const formattedDefinitions = componentDefinitions
29 | 	.map((componentCode) => {
30 | 		const formattedComponentCode = componentCode
31 | 			.replaceAll('\\', '\\\\')
32 | 			.replaceAll('`', '\\`')
33 | 			.replaceAll('${', '\\${');
34 | 		return formattedComponentCode;
35 | 	})
36 | 	.join('\n');
37 | 
38 | const finalTemplate = `
39 | (() => {
40 | 	${coreLibrary}
41 | 
42 | 	const importTemplate = document.createElement('template')
43 | 	importTemplate.setHTMLUnsafe(\`${formattedDefinitions}\`)
44 | 
45 | 	TramDeco.processTemplate(importTemplate);
46 | })()
47 | `;
48 | 
49 | const isSingleFile = filePaths.length === 1;
50 | // if we are processing a single file, use that as the file name
51 | // if we are processing more than one file, use the directory name
52 | const generatedOutputFileName = isSingleFile
53 | 	? path.basename(filePaths[0], '.html') + '.js'
54 | 	: path.basename(process.cwd()) + '.js';
55 | 
56 | fs.writeFileSync(customOutputFile || generatedOutputFileName, finalTemplate);
57 | 


--------------------------------------------------------------------------------
/tram-deco.js:
--------------------------------------------------------------------------------
 1 | // Tram-Deco - declarative custom elements, using declarative shadow DOM
 2 | 
 3 | class TramDeco {
 4 | 	// function to process template tags that have component definitions
 5 | 	static processTemplate(template) {
 6 | 		// for each definition in the template, define a web component
 7 | 		[...template.content.children].forEach((templateElement) => {
 8 | 			TramDeco.define(templateElement);
 9 | 		});
10 | 	}
11 | 
12 | 	static define(templateElement) {
13 | 		// set the tag name to the element name in the template
14 | 		const tagName = templateElement.tagName.toLowerCase();
15 | 
16 | 		// TDElement class, which has the core functionality that all Tram-Deco
17 | 		// Web Components will need
18 | 		class BaseTDElement extends HTMLElement {
19 | 			constructor(shadowRoot) {
20 | 				super();
21 | 
22 | 				if (shadowRoot) {
23 | 					// attach the shadow root, with the options used in the created declarative shadow DOM
24 | 					this.attachShadow(shadowRoot);
25 | 
26 | 					// clone the shadow root content using a document range
27 | 					const shadowRootRange = document.createRange();
28 | 					shadowRootRange.selectNodeContents(shadowRoot);
29 | 					this.shadowRoot.append(shadowRootRange.cloneContents());
30 | 				}
31 | 			}
32 | 		}
33 | 
34 | 		const parentClassName = templateElement.getAttribute(`td-extends`);
35 | 		const parentClass = customElements.get(parentClassName) || BaseTDElement;
36 | 
37 | 		// we need to pull the constructor method separately
38 | 		const modifiedConstructor = templateElement.querySelector(`script[td-method="constructor"]`);
39 | 		class TDElement extends parentClass {
40 | 			// overrideShadowRoot will be a templateElement.shadowRoot of a sub-class (if we have one)
41 | 			// otherwise, we'll default to using the shadowRoot of this element.
42 | 			constructor(overrideShadowRoot) {
43 | 				super(overrideShadowRoot || templateElement.shadowRoot);
44 | 				eval(modifiedConstructor?.textContent || '');
45 | 			}
46 | 		}
47 | 
48 | 		// pull all other script tags for methods, and add them to the prototype
49 | 		templateElement.querySelectorAll(`script[td-method]`).forEach((lifecycleScript) => {
50 | 			const methodName = lifecycleScript.getAttribute('td-method');
51 | 			TDElement.prototype[methodName] = function () {
52 | 				eval(lifecycleScript.textContent);
53 | 			};
54 | 		});
55 | 
56 | 		// pull script tags for properties, and add them to the class as getters
57 | 		templateElement.querySelectorAll(`script[td-property]`).forEach((propertyScript) => {
58 | 			const propertyName = propertyScript.getAttribute('td-property');
59 | 			Object.defineProperty(TDElement, propertyName, {
60 | 				get: function () {
61 | 					return eval(propertyScript.textContent);
62 | 				},
63 | 			});
64 | 		});
65 | 
66 | 		customElements.define(tagName, TDElement);
67 | 	}
68 | }
69 | 


--------------------------------------------------------------------------------