baseguard 1.0.4 → 1.0.6

package/tests/fixtures/svelte-project/src/App.svelte

@@ -1,369 +0,0 @@
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-
-  let dialogOpen = false;
-  let dialogElement: HTMLDialogElement;
-  let canvasElement: HTMLCanvasElement;
-  let resizeObserver: ResizeObserver | null = null;
-
-  onMount(() => {
-    setupModernAPIs();
-    setupCanvas();
-  });
-
-  onDestroy(() => {
-    if (resizeObserver) {
-      resizeObserver.disconnect();
-    }
-  });
-
-  function setupModernAPIs() {
-    // ResizeObserver - baseline newly available
-    resizeObserver = new ResizeObserver((entries) => {
-      console.log('Svelte: Element resized:', entries);
-    });
-
-    if (dialogElement) {
-      resizeObserver.observe(dialogElement);
-    }
-
-    // structuredClone - baseline newly available
-    const testData = { svelte: true, reactive: { state: 'awesome' } };
-    const cloned = structuredClone(testData);
-    console.log('Svelte: Cloned data:', cloned);
-
-    // Array.at() - baseline newly available
-    const frameworks = ['svelte', 'vue', 'react', 'angular'];
-    const firstFramework = frameworks.at(0);
-    const lastFramework = frameworks.at(-1);
-    console.log('Svelte: First and last frameworks:', firstFramework, lastFramework);
-
-    // Optional chaining and nullish coalescing - baseline widely available
-    const config = { api: { endpoint: null } };
-    const endpoint = config?.api?.endpoint ?? 'https://default-api.com';
-    console.log('Svelte: API endpoint:', endpoint);
-  }
-
-  function setupCanvas() {
-    if (!canvasElement) return;
-    
-    const ctx = canvasElement.getContext('2d');
-    if (ctx) {
-      // Modern Canvas API - filter property
-      ctx.filter = 'blur(3px) brightness(1.2)';
-      ctx.fillStyle = '#ff3e00';
-      ctx.fillRect(20, 20, 80, 80);
-    }
-  }
-
-  function openDialog() {
-    if (dialogElement) {
-      // HTMLDialogElement.showModal() - baseline newly available
-      dialogElement.showModal();
-    }
-    dialogOpen = true;
-  }
-
-  function closeDialog() {
-    if (dialogElement) {
-      dialogElement.close();
-    }
-    dialogOpen = false;
-  }
-
-  function testWebAPIs() {
-    // Test various modern Web APIs
-    
-    // AbortController - baseline widely available
-    const controller = new AbortController();
-    const { signal } = controller;
-    
-    // Fetch with modern options
-    fetch('https://api.example.com/svelte-data', { 
-      signal,
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ framework: 'svelte' })
-    })
-    .then(response => response.json())
-    .catch(error => {
-      if (error.name === 'AbortError') {
-        console.log('Svelte: Fetch aborted');
-      }
-    });
-    
-    // Abort after 500ms
-    setTimeout(() => controller.abort(), 500);
-    
-    // IntersectionObserver - baseline widely available
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        console.log('Svelte: Element intersection:', entry.isIntersecting);
-      });
-    }, {
-      threshold: [0, 0.5, 1]
-    });
-    
-    if (canvasElement) {
-      observer.observe(canvasElement);
-    }
-
-    // Test URLSearchParams - baseline widely available
-    const params = new URLSearchParams();
-    params.set('framework', 'svelte');
-    params.set('version', '4.2');
-    console.log('Svelte: URL params:', params.toString());
-  }
-
-  function testAdvancedCanvas() {
-    if (!canvasElement) return;
-    
-    // Test OffscreenCanvas - baseline newly available
-    if ('OffscreenCanvas' in window) {
-      const offscreen = new OffscreenCanvas(150, 150);
-      const ctx = offscreen.getContext('2d');
-      if (ctx) {
-        ctx.fillStyle = '#ff3e00';
-        ctx.fillRect(0, 0, 75, 75);
-        
-        // Convert to ImageBitmap - modern API
-        offscreen.convertToBlob().then(blob => {
-          console.log('Svelte: OffscreenCanvas blob created:', blob.size);
-        });
-      }
-    }
-    
-    // Test WebGL2 - baseline widely available
-    const gl = canvasElement.getContext('webgl2');
-    if (gl) {
-      gl.clearColor(1.0, 0.24, 0.0, 1.0); // Svelte orange
-      gl.clear(gl.COLOR_BUFFER_BIT);
-      
-      // Test WebGL2 specific features
-      const texture = gl.createTexture();
-      gl.bindTexture(gl.TEXTURE_2D, texture);
-      gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, 256, 256);
-    }
-  }
-
-  function testServiceWorker() {
-    // Service Worker registration - baseline widely available
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('/sw.js')
-        .then(registration => {
-          console.log('Svelte: SW registered:', registration.scope);
-        })
-        .catch(error => {
-          console.log('Svelte: SW registration failed:', error);
-        });
-    }
-
-    // Test Cache API - baseline widely available
-    if ('caches' in window) {
-      caches.open('svelte-cache-v1').then(cache => {
-        cache.add('/api/data');
-        console.log('Svelte: Cache opened and populated');
-      });
-    }
-  }
-</script>
-
-<div class="svelte-app">
-  <h1>Svelte Test App</h1>
-  
-  <div class="button-group">
-    <button on:click={openDialog}>Open Dialog</button>
-    <button on:click={testWebAPIs}>Test Web APIs</button>
-    <button on:click={testAdvancedCanvas}>Test Canvas</button>
-    <button on:click={testServiceWorker}>Test Service Worker</button>
-  </div>
-  
-  <dialog bind:this={dialogElement} open={dialogOpen}>
-    <div class="dialog-content">
-      <h2>Modern Dialog in Svelte</h2>
-      <p>This dialog uses the native HTML dialog element with modern CSS styling.</p>
-      <button on:click={closeDialog}>Close Dialog</button>
-    </div>
-  </dialog>
-
-  <div class="container-test">
-    <h3>Container Query Test</h3>
-    <p>This container adapts based on its own size, not the viewport.</p>
-  </div>
-
-  <canvas bind:this={canvasElement} width="300" height="200"></canvas>
-</div>
-
-<style>
-  /* Modern CSS features in Svelte component */
-  .svelte-app {
-    container-type: inline-size;
-    container-name: svelte-container;
-    
-    /* Modern CSS properties */
-    aspect-ratio: 16/10;
-    accent-color: #ff3e00;
-    color-scheme: light dark;
-    
-    /* CSS Grid with modern features */
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 2rem;
-    
-    /* Modern CSS functions */
-    background: color-mix(in srgb, #ff3e00 20%, white);
-    
-    /* Backdrop filter */
-    backdrop-filter: blur(8px) saturate(1.2);
-    
-    padding: 2rem;
-    border-radius: 12px;
-  }
-
-  /* Container queries */
-  @container svelte-container (min-width: 600px) {
-    .container-test {
-      font-size: 1.3rem;
-      grid-column: span 2;
-    }
-    
-    .button-group {
-      display: flex;
-      gap: 1rem;
-    }
-  }
-
-  @container svelte-container (max-width: 400px) {
-    .svelte-app {
-      grid-template-columns: 1fr;
-      gap: 1rem;
-    }
-  }
-
-  /* Modern selectors */
-  .svelte-app:has(dialog[open]) {
-    background-color: rgba(255, 62, 0, 0.1);
-    backdrop-filter: blur(12px);
-  }
-
-  /* CSS nesting */
-  .button-group {
-    display: grid;
-    gap: 0.5rem;
-    
-    button {
-      background: linear-gradient(135deg, #ff3e00, #ff6b35);
-      color: white;
-      border: none;
-      padding: 0.75rem 1.5rem;
-      border-radius: 6px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(255, 62, 0, 0.3);
-      }
-      
-      &:focus-visible {
-        outline: 2px solid #ff3e00;
-        outline-offset: 2px;
-      }
-      
-      &:active {
-        transform: translateY(0);
-      }
-    }
-  }
-
-  .container-test {
-    background: linear-gradient(45deg, #ff3e00, transparent);
-    padding: 1.5rem;
-    border-radius: 8px;
-    
-    /* Modern CSS units and functions */
-    width: clamp(200px, 100%, 500px);
-    height: max(120px, 12vh);
-    margin-block: 1rem;
-    padding-inline: 2rem;
-  }
-
-  /* Dialog styling with modern CSS */
-  dialog {
-    border: none;
-    border-radius: 12px;
-    padding: 0;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(10px);
-    
-    &::backdrop {
-      background: color-mix(in srgb, black 50%, transparent);
-      backdrop-filter: blur(4px);
-    }
-  }
-
-  .dialog-content {
-    padding: 2rem;
-    background: linear-gradient(135deg, white, #f8f9fa);
-    border-radius: 12px;
-    
-    h2 {
-      margin-top: 0;
-      color: #ff3e00;
-    }
-    
-    button {
-      background: #ff3e00;
-      color: white;
-      border: none;
-      padding: 0.5rem 1rem;
-      border-radius: 4px;
-      cursor: pointer;
-      
-      &:hover {
-        background: #e63600;
-      }
-    }
-  }
-
-  canvas {
-    border: 2px solid #ff3e00;
-    border-radius: 8px;
-    background: white;
-    
-    &:hover {
-      box-shadow: 0 4px 16px rgba(255, 62, 0, 0.2);
-    }
-  }
-
-  /* CSS custom properties with modern color functions */
-  :root {
-    --svelte-primary: oklch(0.6 0.25 25);
-    --svelte-secondary: color(display-p3 1 0.24 0);
-  }
-
-  /* Modern pseudo-classes and logical properties */
-  .svelte-app > * {
-    margin-block-end: 1rem;
-  }
-
-  .svelte-app *:is(h1, h2, h3) {
-    color: var(--svelte-primary);
-    font-weight: 600;
-  }
-
-  /* CSS @supports for progressive enhancement */
-  @supports (container-type: inline-size) {
-    .svelte-app {
-      border: 3px solid #ff3e00;
-    }
-  }
-
-  @supports (backdrop-filter: blur(10px)) {
-    dialog {
-      background: rgba(255, 255, 255, 0.9);
-    }
-  }
-</style>

package/tests/fixtures/vanilla-project/index.html

@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vanilla Test Project</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <div class="vanilla-app">
-        <h1>Vanilla JavaScript Test App</h1>
-        
-        <div class="button-group">
-            <button id="openDialog">Open Dialog</button>
-            <button id="testAPIs">Test Web APIs</button>
-            <button id="testCanvas">Test Canvas</button>
-            <button id="testWebGL">Test WebGL</button>
-            <button id="testServiceWorker">Test Service Worker</button>
-        </div>
-        
-        <!-- Modern HTML elements -->
-        <dialog id="testDialog">
-            <div class="dialog-content">
-                <h2>Native HTML Dialog</h2>
-                <p>This is a native HTML dialog element with modern styling.</p>
-                <form method="dialog">
-                    <button value="cancel">Cancel</button>
-                    <button value="confirm">Confirm</button>
-                </form>
-            </div>
-        </dialog>
-
-        <details class="details-section">
-            <summary>Modern HTML Details/Summary</summary>
-            <p>This content is revealed when the summary is clicked. The details/summary elements are part of modern HTML.</p>
-            <ul>
-                <li>Baseline widely available</li>
-                <li>Native browser implementation</li>
-                <li>Accessible by default</li>
-            </ul>
-        </details>
-
-        <div class="container-test">
-            <h3>Container Query Test</h3>
-            <p>This container changes layout based on its own size.</p>
-            <div class="nested-container">
-                <p>Nested content that responds to container queries.</p>
-            </div>
-        </div>
-
-        <div class="grid-container">
-            <div class="grid-item">Grid Item 1</div>
-            <div class="grid-item">Grid Item 2</div>
-            <div class="grid-item">Grid Item 3</div>
-            <div class="grid-item">Grid Item 4</div>
-        </div>
-
-        <canvas id="testCanvas" width="400" height="300"></canvas>
-        
-        <div class="modern-inputs">
-            <h3>Modern Input Types</h3>
-            <input type="date" id="dateInput" />
-            <input type="color" id="colorInput" value="#ff0000" />
-            <input type="range" id="rangeInput" min="0" max="100" value="50" />
-            <input type="search" id="searchInput" placeholder="Search..." />
-        </div>
-
-        <div class="loading-test">
-            <h3>Lazy Loading Test</h3>
-            <img src="https://picsum.photos/400/300" alt="Test image" loading="lazy" />
-        </div>
-    </div>
-
-    <script src="script.js"></script>
-</body>
-</html>