" or ""
12 | const isClosingTag = fullTag.startsWith(' reduce nesting
15 | nestingLevel--;
16 | result += fullTag;
17 | }
18 | else {
19 | // opening or self-closing
20 | const selfClosing = /\/>$/.test(fullTag.trim());
21 | // If nesting is 0 before this tag, it's a root-level element
22 | if (nestingLevel === 0) {
23 | // Inject mesa-hmr-id right after the tag name
24 | // We'll do a simple replace to insert the attribute
25 | const injectedTag = fullTag.replace(/^<([a-zA-Z0-9-]+)(\s|>|$)/, (_, tagName, trailing) => {
26 | const timesUsed = usedHotModuleIds.get(id) ?? 0;
27 | usedHotModuleIds.set(id, timesUsed + 1);
28 | // Ensure trailing space or `>` is handled correctly
29 | return `<${tagName} mesa-hmr="${id}${timesUsed === 0 ? '' : `:${timesUsed + 1}`}"${trailing}`;
30 | });
31 | result += injectedTag;
32 | }
33 | else {
34 | // not at root, just keep the tag as is
35 | result += fullTag;
36 | }
37 | // Increase nesting if it's not self-closing
38 | if (!selfClosing) {
39 | nestingLevel++;
40 | }
41 | }
42 | // Move index after this tag
43 | lastIndex = tagRegex.lastIndex;
44 | }
45 | // Append remaining text after the last match
46 | result += content.substring(lastIndex);
47 | return result;
48 | }
49 |
--------------------------------------------------------------------------------
/dist/src/methods/setSlot.d.ts:
--------------------------------------------------------------------------------
1 | export default function setSlot(element: Element, newContent: string): void;
2 |
--------------------------------------------------------------------------------
/dist/src/methods/setSlot.js:
--------------------------------------------------------------------------------
1 | export default function setSlot(element, newContent) {
2 | const slotBehaviour = element?.getAttribute("m-slot");
3 | switch (slotBehaviour) {
4 | case "insertAtStart":
5 | element.innerHTML = newContent + element.innerHTML;
6 | break;
7 | case "insertAtEnd":
8 | element.innerHTML = element.innerHTML + newContent;
9 | break;
10 | default:
11 | element.innerHTML = newContent;
12 | break;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/dist/src/methods/splitHtmlCSSAndJS.d.ts:
--------------------------------------------------------------------------------
1 | export default function splitHtmlCSSAndJS(input: string, allTagNames: string[], inputFilePath?: string | null): [string, string | null, string | null];
2 |
--------------------------------------------------------------------------------
/dist/src/methods/splitHtmlCSSAndJS.js:
--------------------------------------------------------------------------------
1 | import convertRelativeToAbsolutePaths from "./convertRelativeToAbsolutePaths.js";
2 | export default function splitHtmlCSSAndJS(input, allTagNames, inputFilePath) {
3 | try {
4 | if (!input.includes("
69 |
70 | ```
71 |
72 | Usage
73 | ```html
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | ```
82 |
83 | Becomes
84 |
85 | ```html
86 |
87 |
88 |
89 |
125 |
126 |
127 |
128 |
144 |
145 | ```
--------------------------------------------------------------------------------
/src/DebugMode.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | namespace DebugMode {
4 |
5 | export let Enabled = false;
6 |
7 |
8 | }
9 |
10 | export default DebugMode
--------------------------------------------------------------------------------
/src/assets/ClientHMRHandler.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | if (import.meta.hot) {
3 | import.meta.hot.on('mesa-style-update', ({ componentName, style }) => {
4 | const cssStart = '/*start:' + componentName + '*/';
5 | const cssEnd = '/*end:' + componentName + '*/';
6 | // Construct the new CSS block
7 | const newText = style == null ? "" : `${cssStart}\n${style}\n${cssEnd}`;
8 | const existingStyleElements = document.querySelectorAll("style[mesa]");
9 |
10 | if (existingStyleElements.length === 0) {
11 | if (style != null) {
12 | // Create a new `);
49 | } else {
50 | // Add a new `;
52 | html = style + "\n" + html;
53 | }
54 | }
55 | if (scriptsToImport.length > 0) {
56 | const newScripts = scriptsToImport.join(";\n")
57 | const script = ``
58 | html = script + "\n" + html
59 | }
60 | return {...response, html}
61 | }
--------------------------------------------------------------------------------
/src/methods/setAttr.ts:
--------------------------------------------------------------------------------
1 |
2 | export default function setAttr(attr: Attr, element: Element) {
3 | try {
4 | const operators: { name: string, handler: (name: string, currentValue: string | null) => void }[] = [
5 | {
6 | name: "add:",
7 | handler: (name, currentValue) => {
8 | if (!currentValue) {
9 | element.setAttribute(name, attr.value)
10 | } else {
11 | element.setAttribute(name, [currentValue, attr.value].join(" "))
12 | }
13 | }
14 | },
15 | {
16 | name: "remove:",
17 | handler: (name, currentValue) => {
18 | if (!currentValue) {
19 | return;
20 | }
21 | let c = currentValue
22 | attr.value.split(" ").filter(x => x.length).forEach(x => {
23 | c = c.replaceAll(x, "")
24 | })
25 | element.setAttribute(name, c)
26 | }
27 | }
28 | ]
29 | for (const { name, handler } of operators) {
30 | if (attr.name.startsWith(name) && attr.name.length > name.length) {
31 | const realName = attr.name.slice(name.length, attr.name.length)
32 | const currentValue = element.getAttribute(realName)
33 | handler(realName, currentValue)
34 | return;
35 | }
36 | }
37 | if (attr.name.startsWith("@")) {
38 | element.setAttribute(`mesa-at-${attr.name.slice(1)}`, attr.value)
39 | } else if (attr.name.startsWith("#")) {
40 | element.setAttribute(`mesa-hash-${attr.name.slice(1)}`, attr.value)
41 | } else {
42 | element.setAttribute(attr.name, attr.value)
43 | }
44 | } catch (error) {
45 | throw new Error(`Issue while trying to set value: ${attr.value} on attribute with name: ${attr.name}, error: ${(error as any)?.message ?? ``}`)
46 | }
47 | }
--------------------------------------------------------------------------------
/src/methods/setHotModuleReloadID.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | export default function setHotModuleReloadId(content: string, id: string, usedHotModuleIds: Map
): string {
5 | // We'll match opening or closing tags, capturing the tag name.
6 | const tagRegex = /<\/?([a-z][^/\s>]*)[^>]*>/gi;
7 |
8 | let nestingLevel = 0;
9 | let lastIndex = 0;
10 | let result = '';
11 |
12 | let match: RegExpExecArray | null;
13 |
14 | while ((match = tagRegex.exec(content)) !== null) {
15 | // text up to the current tag
16 | result += content.substring(lastIndex, match.index);
17 | const fullTag = match[0]; // e.g. "" or ""
18 | const isClosingTag = fullTag.startsWith(' reduce nesting
22 | nestingLevel--;
23 | result += fullTag;
24 | } else {
25 | // opening or self-closing
26 | const selfClosing = /\/>$/.test(fullTag.trim());
27 |
28 | // If nesting is 0 before this tag, it's a root-level element
29 | if (nestingLevel === 0) {
30 | // Inject mesa-hmr-id right after the tag name
31 | // We'll do a simple replace to insert the attribute
32 | const injectedTag = fullTag.replace(
33 | /^<([a-zA-Z0-9-]+)(\s|>|$)/,
34 | (_, tagName, trailing) => {
35 | const timesUsed = usedHotModuleIds.get(id) ?? 0;
36 | usedHotModuleIds.set(id, timesUsed + 1);
37 |
38 | // Ensure trailing space or `>` is handled correctly
39 | return `<${tagName} mesa-hmr="${id}${timesUsed === 0 ? '' : `:${timesUsed + 1}`}"${trailing}`;
40 | }
41 | );
42 | result += injectedTag;
43 | } else {
44 | // not at root, just keep the tag as is
45 | result += fullTag;
46 | }
47 |
48 | // Increase nesting if it's not self-closing
49 | if (!selfClosing) {
50 | nestingLevel++;
51 | }
52 | }
53 |
54 | // Move index after this tag
55 | lastIndex = tagRegex.lastIndex;
56 | }
57 |
58 | // Append remaining text after the last match
59 | result += content.substring(lastIndex);
60 |
61 | return result;
62 | }
--------------------------------------------------------------------------------
/src/methods/setSlot.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | export default function setSlot(element: Element, newContent: string) {
5 | const slotBehaviour = element?.getAttribute("m-slot")
6 | switch (slotBehaviour) {
7 | case "insertAtStart":
8 | element.innerHTML = newContent + element.innerHTML
9 | break;
10 | case "insertAtEnd":
11 | element.innerHTML = element.innerHTML + newContent
12 | break;
13 | default:
14 | element.innerHTML = newContent
15 | break;
16 | }
17 | }
--------------------------------------------------------------------------------
/src/methods/splitHtmlCSSAndJS.ts:
--------------------------------------------------------------------------------
1 | import convertRelativeToAbsolutePaths from "./convertRelativeToAbsolutePaths.js";
2 |
3 | export default function splitHtmlCSSAndJS(input: string, allTagNames: string[], inputFilePath?: string | null): [string, string | null, string | null] {
4 | try {
5 | if (!input.includes("