tosijs-ui 1.5.7 → 1.5.8

package/dist/doc-browser.js

@@ -288,8 +288,8 @@ export function createDocBrowser(options) {
             }
             testResultsResolve(allResults);
             testResultsResolve = undefined;
-            // Post results to dev server on localhost
-            if (isLocalhost) {
+            // Post results to dev server on localhost (not from test iframes)
+            if (isLocalhost && !isTestFrame) {
                 fetch('/report', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -680,17 +680,46 @@ export function createDocBrowser(options) {
         lines.unshift(`**Summary: ${totalPassed} passed, ${totalFailed} failed**`, '');
         return lines.join('\n');
     }
+    // Detect if running as background test iframe
+    const searchParams = new URLSearchParams(window.location.search);
+    const isTestFrame = searchParams.get('_testMode') === '1';
+    const testFrameFilename = isTestFrame
+        ? window.location.search.substring(1).split('&')[0]
+        : null;
     // Listen for test completion events
     container.addEventListener('testcomplete', ((event) => {
         handleTestComplete(event);
         updateTestWidget();
+        // If running in test iframe, post results to parent
+        if (isTestFrame && window.parent !== window && testFrameFilename) {
+            const { results } = event.detail;
+            window.parent.postMessage({ type: 'tosi-test-results', filename: testFrameFilename, results }, '*');
+        }
     }));
+    // If running as test iframe, signal when all tests on this page are done
+    if (isTestFrame && testFrameFilename) {
+        const signalDone = () => {
+            const examples = container.querySelectorAll('tosi-example');
+            const withTests = [...examples].filter((ex) => ex.classList.contains('-has-tests'));
+            const running = withTests.filter((ex) => ex.classList.contains('-test-running'));
+            if (withTests.length > 0 && running.length === 0) {
+                window.parent.postMessage({ type: 'tosi-tests-done', filename: testFrameFilename }, '*');
+            }
+            else {
+                setTimeout(signalDone, 100);
+            }
+        };
+        // Give time for examples to start running
+        setTimeout(signalDone, 500);
+    }
     // Background test runner for all doc pages
     const runBackgroundTests = async () => {
         if (backgroundTestsStarted)
             return;
         if (!testManager.enabled.value)
             return;
+        if (isTestFrame)
+            return; // Don't run background tests in test iframe
         backgroundTestsStarted = true;
         // Find all docs that have test blocks
         const docsWithTests = docs.filter((doc) => doc.text.includes('```test'));
@@ -699,89 +728,71 @@ export function createDocBrowser(options) {
             setTestWidgetRunning();
         }
         if (pagesWithTests === 0) {
-            // No tests to run, resolve immediately
             if (testResultsResolve) {
                 testResultsResolve({ passed: 0, failed: 0, pages: {} });
                 testResultsResolve = undefined;
             }
             return;
         }
-        // Create a hidden iframe to run tests in background
+        const currentFilename = String(app.currentDoc.filename);
+        // Create a hidden iframe that loads the full page
         const testFrame = document.createElement('iframe');
         testFrame.style.cssText =
             'position: fixed; left: 0; top: 0; width: 800px; height: 600px; opacity: 0; pointer-events: none;';
         document.body.appendChild(testFrame);
-        const currentFilename = String(app.currentDoc.filename);
+        // Listen for test results posted from the iframe
+        const messageHandler = (event) => {
+            if (event.data?.type !== 'tosi-test-results')
+                return;
+            const { filename, results } = event.data;
+            if (!pageTestResults[filename]) {
+                pageTestResults[filename] = {
+                    passed: true,
+                    tests: [],
+                    totalPassed: 0,
+                    totalFailed: 0,
+                };
+            }
+            const pageResults = pageTestResults[filename];
+            pageResults.tests.push(...results.tests);
+            pageResults.totalPassed += results.passed;
+            pageResults.totalFailed += results.failed;
+            pageResults.passed = pageResults.totalFailed === 0;
+            updateDocTestStatus(filename);
+            updateTestWidget();
+        };
+        window.addEventListener('message', messageHandler);
         for (const doc of docsWithTests) {
-            // Skip current page - it will run tests naturally
-            if (doc.filename === currentFilename) {
+            // Skip current page — it runs tests naturally
+            if (doc.filename === currentFilename)
                 continue;
-            }
-            // Reset page results for this doc
-            pageTestResults[doc.filename] = {
-                passed: true,
-                tests: [],
-                totalPassed: 0,
-                totalFailed: 0,
-            };
-            // Create a container and render the doc content
-            const testContainer = document.createElement('div');
-            const viewer = tosiMd({
-                value: doc.text,
-                didRender() {
-                    LiveExample.insertExamples(this, context);
-                },
+            // Navigate iframe to the page
+            const base = window.location.origin + window.location.pathname;
+            testFrame.src = `${base}?${doc.filename}&_testMode=1`;
+            // Wait for the iframe to signal it's done (max 30s per page)
+            await new Promise((resolve) => {
+                const deadline = Date.now() + 30_000;
+                const onDone = (event) => {
+                    if (event.data?.type === 'tosi-tests-done' &&
+                        event.data.filename === doc.filename) {
+                        window.removeEventListener('message', onDone);
+                        resolve();
+                    }
+                };
+                window.addEventListener('message', onDone);
+                setTimeout(() => {
+                    window.removeEventListener('message', onDone);
+                    resolve();
+                }, deadline - Date.now());
             });
-            testContainer.appendChild(viewer);
-            // Listen for test results from this container
-            const handleBgTest = (event) => {
-                const { results } = event.detail;
-                const pageResults = pageTestResults[doc.filename];
-                pageResults.tests.push(...results.tests);
-                pageResults.totalPassed += results.passed;
-                pageResults.totalFailed += results.failed;
-                pageResults.passed = pageResults.totalFailed === 0;
-                updateDocTestStatus(doc.filename);
-                updateTestWidget();
-            };
-            testContainer.addEventListener('testcomplete', handleBgTest);
-            // Append to iframe for execution
-            const frameDoc = testFrame.contentDocument;
-            if (frameDoc) {
-                frameDoc.body.innerHTML = '';
-                frameDoc.body.appendChild(testContainer);
-                // Wait for all live examples with tests to finish (max 30s per page)
-                await new Promise((resolve) => {
-                    const deadline = Date.now() + 30_000;
-                    const checkDone = () => {
-                        if (Date.now() > deadline) {
-                            resolve();
-                            return;
-                        }
-                        const examples = testContainer.querySelectorAll('tosi-example');
-                        const withTests = [...examples].filter((ex) => ex.classList.contains('-has-tests'));
-                        const running = withTests.filter((ex) => ex.classList.contains('-test-running'));
-                        if (withTests.length > 0 && running.length === 0) {
-                            resolve();
-                        }
-                        else {
-                            setTimeout(checkDone, 100);
-                        }
-                    };
-                    // Give initial render time to start
-                    setTimeout(checkDone, 200);
-                });
-            }
             markPageTested(doc.filename);
         }
         // Clean up
+        window.removeEventListener('message', messageHandler);
         testFrame.remove();
         // Mark current page as tested if it has tests
         if (docsWithTests.some((d) => d.filename === currentFilename)) {
-            // Current page tests will complete naturally, just wait a bit
-            setTimeout(() => {
-                markPageTested(currentFilename);
-            }, 1000);
+            setTimeout(() => markPageTested(currentFilename), 1000);
         }
     };
     // Run background tests when enabled (initially or when toggled on)

package/dist/icons.d.ts

@@ -8,6 +8,8 @@ export interface IconRule {
     prefix: string | RegExp;
     apply: (baseName: string, match: RegExpMatchArray | string, parts: ElementPart[]) => Element | string | null;
 }
+/** Returns icon name safe for suffix concatenation (appends _ if name ends in digit) */
+export declare const safeIconSuffix: (name: string) => string;
 export declare const iconRules: IconRule[];
 export declare const icons: SVGIconMap;
 export declare class SvgIcon extends WebComponent {

package/dist/icons.js

@@ -573,6 +573,8 @@ export const svg2DataUrl = (icon, fill, stroke, strokeWidth) => {
     const text = encodeURIComponent(svg.outerHTML);
     return `url(data:image/svg+xml;charset=UTF-8,${text})`;
 };
+/** Returns icon name safe for suffix concatenation (appends _ if name ends in digit) */
+export const safeIconSuffix = (name) => /\d$/.test(name) ? name + '_' : name;
 export const iconRules = [
     {
         prefix: /^spin(_?\d+)/,
@@ -601,19 +603,19 @@ export const iconRules = [
     },
     {
         prefix: 'un',
-        apply: (baseName) => `slash25o$${baseName}75s75o`,
+        apply: (baseName) => `slash25o$${safeIconSuffix(baseName)}75s75o`,
     },
     {
         prefix: 'check',
-        apply: (baseName) => `check75o_00aa00S$${baseName}75s50o`,
+        apply: (baseName) => `check75o_00aa00S$${safeIconSuffix(baseName)}75s50o`,
     },
     {
         prefix: 'cancel',
-        apply: (baseName) => `x75o_cc0000S$${baseName}75s50o`,
+        apply: (baseName) => `x75o_cc0000S$${safeIconSuffix(baseName)}75s50o`,
     },
     {
         prefix: 'search',
-        apply: (baseName) => `search80s30x30y$${baseName}50o`,
+        apply: (baseName) => `search80s30x30y$${safeIconSuffix(baseName)}50o`,
     },
 ];
 function makeIcon(spec, parts) {
@@ -706,21 +708,32 @@ function composeIcon(prop, parts) {
     return null;
 }
 const MAX_REDIRECTS = 10;
-// Style suffixes — always value then letter code:
+// Style suffixes — value then letter code:
 //   50o (opacity), 75s (scale), 20x (translateX%), _10y (translateY%)
 //   90r (rotate 90°), _45r (rotate -45°), 0f (flipH), 1f (flipV)
 //   _FF0000F (fill hex), _f00S (stroke hex), 3W (stroke-width)
 //   _brandColorF (fill var), _accentS (stroke var)
-const SUFFIX_RE = /(_?\d{2,3}[osxyr]|[01]f|_[a-zA-Z0-9]+[FS]|\d{1,3}W)+$/;
+// Icon names ending in digits need _ separator: edit2_50o
+const SUFFIX_RE = /(?:(?<=[a-zA-Z_])(?:_?\d+[osxyr]|[01]f|\d+W)|_[a-zA-Z0-9]+[FS])+$/;
 function parseStyleSuffixes(name) {
     const match = name.match(SUFFIX_RE);
     if (!match)
         return null;
-    const baseName = name.slice(0, match.index);
+    let baseName = name.slice(0, match.index);
     if (!baseName)
         return null;
+    // Strip trailing _ separator (for digit-ending names: edit2_50o)
+    if (baseName.endsWith('_'))
+        baseName = baseName.slice(0, -1);
+    if (!baseName)
+        return null;
+    const data = iconData;
+    if (!data[baseName])
+        return null;
     const style = {};
-    const suffixes = match[0].match(/_?\d{2,3}[osxyr]|[01]f|_[a-zA-Z0-9]+[FS]|\d{1,3}W/g);
+    const suffixes = match[0].match(/_?\d+[osxyr]|[01]f|_[a-zA-Z0-9]+[FS]|\d+W/g);
+    if (!suffixes)
+        return null;
     let tx = '';
     let ty = '';
     let scale = '';