baseguard 1.0.0

package/tests/fixtures/vanilla-project/script.js

@@ -0,0 +1,331 @@
+// Modern JavaScript features for comprehensive testing
+
+// Modern JavaScript syntax and APIs
+class VanillaTestApp {
+  #privateField = 'private data'; // Private fields - baseline newly available
+  
+  constructor() {
+    this.setupEventListeners();
+    this.initializeModernAPIs();
+  }
+
+  setupEventListeners() {
+    // Modern event listener setup with optional chaining
+    document.getElementById('openDialog')?.addEventListener('click', this.openDialog.bind(this));
+    document.getElementById('testAPIs')?.addEventListener('click', this.testWebAPIs.bind(this));
+    document.getElementById('testCanvas')?.addEventListener('click', this.testCanvas.bind(this));
+    document.getElementById('testWebGL')?.addEventListener('click', this.testWebGL.bind(this));
+    document.getElementById('testServiceWorker')?.addEventListener('click', this.testServiceWorker.bind(this));
+  }
+
+  async initializeModernAPIs() {
+    // Top-level await would be used here in a module context
+    await this.setupResizeObserver();
+    this.testModernJavaScript();
+  }
+
+  async setupResizeObserver() {
+    // ResizeObserver - baseline newly available
+    if ('ResizeObserver' in window) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        entries.forEach(entry => {
+          console.log('Vanilla: Element resized:', entry.target.tagName, entry.contentRect);
+        });
+      });
+
+      const dialog = document.getElementById('testDialog');
+      if (dialog) {
+        resizeObserver.observe(dialog);
+      }
+    }
+  }
+
+  testModernJavaScript() {
+    // structuredClone - baseline newly available
+    const complexData = {
+      name: 'Vanilla JS Test',
+      nested: {
+        array: [1, 2, 3],
+        date: new Date(),
+        map: new Map([['key', 'value']])
+      }
+    };
+    
+    if ('structuredClone' in window) {
+      const cloned = structuredClone(complexData);
+      console.log('Vanilla: Cloned complex data:', cloned);
+    }
+
+    // Array.at() - baseline newly available
+    const testArray = ['first', 'second', 'third', 'fourth', 'last'];
+    const firstItem = testArray.at?.(0) ?? testArray[0];
+    const lastItem = testArray.at?.(-1) ?? testArray[testArray.length - 1];
+    console.log('Vanilla: Array access:', { firstItem, lastItem });
+
+    // Optional chaining and nullish coalescing - baseline widely available
+    const config = { api: { endpoint: null, timeout: undefined } };
+    const endpoint = config?.api?.endpoint ?? 'https://default-api.com';
+    const timeout = config?.api?.timeout ?? 5000;
+    console.log('Vanilla: Config values:', { endpoint, timeout });
+
+    // Private field access
+    console.log('Vanilla: Private field accessible:', this.#privateField);
+  }
+
+  openDialog() {
+    const dialog = document.getElementById('testDialog');
+    if (dialog && 'showModal' in dialog) {
+      // HTMLDialogElement.showModal() - baseline newly available
+      dialog.showModal();
+    } else {
+      // Fallback for older browsers
+      console.warn('Dialog.showModal() not supported');
+      dialog.style.display = 'block';
+    }
+  }
+
+  async testWebAPIs() {
+    // AbortController - baseline widely available
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    try {
+      // Fetch with modern options
+      const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
+        signal,
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        console.log('Vanilla: Fetch successful:', data.title);
+      }
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        console.log('Vanilla: Fetch aborted');
+      } else {
+        console.error('Vanilla: Fetch error:', error);
+      }
+    }
+
+    // Test abort after 100ms
+    setTimeout(() => controller.abort(), 100);
+
+    // IntersectionObserver - baseline widely available
+    if ('IntersectionObserver' in window) {
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          console.log('Vanilla: Intersection:', entry.target.id, entry.isIntersecting);
+        });
+      }, {
+        threshold: [0, 0.25, 0.5, 0.75, 1],
+        rootMargin: '10px'
+      });
+
+      const canvas = document.getElementById('testCanvas');
+      if (canvas) {
+        observer.observe(canvas);
+      }
+    }
+
+    // URLSearchParams - baseline widely available
+    const params = new URLSearchParams();
+    params.set('framework', 'vanilla');
+    params.set('test', 'web-apis');
+    params.set('timestamp', Date.now().toString());
+    console.log('Vanilla: URL params:', params.toString());
+
+    // FormData - baseline widely available
+    const formData = new FormData();
+    formData.append('test', 'vanilla-js');
+    formData.append('features', JSON.stringify(['modern', 'apis']));
+    console.log('Vanilla: FormData created with', formData.get('test'));
+  }
+
+  testCanvas() {
+    const canvas = document.getElementById('testCanvas');
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // Modern Canvas API features
+    ctx.save();
+    
+    // Canvas filter - baseline newly available
+    if ('filter' in ctx) {
+      ctx.filter = 'blur(2px) brightness(1.1) contrast(1.2)';
+    }
+
+    // Draw with modern features
+    ctx.fillStyle = '#4285f4';
+    ctx.fillRect(10, 10, 100, 100);
+
+    // Reset filter
+    ctx.filter = 'none';
+    
+    // Gradient with modern color syntax
+    const gradient = ctx.createLinearGradient(0, 0, 200, 0);
+    gradient.addColorStop(0, '#ff6b6b');
+    gradient.addColorStop(1, '#4ecdc4');
+    
+    ctx.fillStyle = gradient;
+    ctx.fillRect(120, 10, 100, 100);
+
+    // Path2D - baseline widely available
+    if ('Path2D' in window) {
+      const path = new Path2D();
+      path.arc(75, 150, 50, 0, 2 * Math.PI);
+      ctx.fillStyle = '#feca57';
+      ctx.fill(path);
+    }
+
+    ctx.restore();
+
+    // Test OffscreenCanvas - baseline newly available
+    if ('OffscreenCanvas' in window) {
+      const offscreen = new OffscreenCanvas(200, 200);
+      const offscreenCtx = offscreen.getContext('2d');
+      
+      if (offscreenCtx) {
+        offscreenCtx.fillStyle = '#ff9ff3';
+        offscreenCtx.fillRect(0, 0, 100, 100);
+        
+        // Convert to blob - modern API
+        offscreen.convertToBlob().then(blob => {
+          console.log('Vanilla: OffscreenCanvas blob created:', blob.size, 'bytes');
+        }).catch(error => {
+          console.error('Vanilla: OffscreenCanvas error:', error);
+        });
+      }
+    }
+  }
+
+  testWebGL() {
+    const canvas = document.getElementById('testCanvas');
+    if (!canvas) return;
+
+    // Test WebGL2 - baseline widely available
+    const gl = canvas.getContext('webgl2');
+    if (!gl) {
+      console.warn('Vanilla: WebGL2 not supported, trying WebGL1');
+      const gl1 = canvas.getContext('webgl');
+      if (gl1) {
+        gl1.clearColor(0.2, 0.4, 0.8, 1.0);
+        gl1.clear(gl1.COLOR_BUFFER_BIT);
+        console.log('Vanilla: WebGL1 context created');
+      }
+      return;
+    }
+
+    // WebGL2 specific features
+    gl.clearColor(0.1, 0.2, 0.3, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    // Test WebGL2 specific functionality
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    
+    // texStorage2D is WebGL2 specific
+    gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, 256, 256);
+    
+    console.log('Vanilla: WebGL2 context created and texture allocated');
+
+    // Test WebGL extensions
+    const extensions = gl.getSupportedExtensions();
+    console.log('Vanilla: WebGL extensions:', extensions?.length || 0);
+  }
+
+  async testServiceWorker() {
+    // Service Worker - baseline widely available
+    if ('serviceWorker' in navigator) {
+      try {
+        const registration = await navigator.serviceWorker.register('/sw.js');
+        console.log('Vanilla: Service Worker registered:', registration.scope);
+        
+        // Listen for updates
+        registration.addEventListener('updatefound', () => {
+          console.log('Vanilla: Service Worker update found');
+        });
+      } catch (error) {
+        console.log('Vanilla: Service Worker registration failed:', error.message);
+      }
+    }
+
+    // Cache API - baseline widely available
+    if ('caches' in window) {
+      try {
+        const cache = await caches.open('vanilla-test-cache-v1');
+        await cache.add('/');
+        console.log('Vanilla: Cache API working');
+        
+        // Test cache match
+        const response = await cache.match('/');
+        if (response) {
+          console.log('Vanilla: Cache match successful');
+        }
+      } catch (error) {
+        console.error('Vanilla: Cache API error:', error);
+      }
+    }
+
+    // Push API check (requires HTTPS and user permission)
+    if ('PushManager' in window && 'serviceWorker' in navigator) {
+      const permission = await Notification.requestPermission();
+      console.log('Vanilla: Notification permission:', permission);
+    }
+
+    // Background Sync check
+    if ('serviceWorker' in navigator && 'sync' in window.ServiceWorkerRegistration.prototype) {
+      console.log('Vanilla: Background Sync supported');
+    }
+  }
+}
+
+// Initialize the app when DOM is loaded
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    new VanillaTestApp();
+  });
+} else {
+  new VanillaTestApp();
+}
+
+// Test modern JavaScript features at module level
+console.log('Vanilla: Script loaded with modern features');
+
+// Test globalThis - baseline widely available
+if (typeof globalThis !== 'undefined') {
+  globalThis.vanillaTestApp = 'loaded';
+  console.log('Vanilla: globalThis available');
+}
+
+// Test BigInt - baseline widely available
+if (typeof BigInt !== 'undefined') {
+  const bigNumber = BigInt(Number.MAX_SAFE_INTEGER) + 1n;
+  console.log('Vanilla: BigInt test:', bigNumber.toString());
+}
+
+// Test dynamic import (would be used in module context)
+// Dynamic imports are baseline newly available
+if (typeof import === 'function') {
+  console.log('Vanilla: Dynamic import supported');
+}
+
+// Test WeakRef and FinalizationRegistry - baseline newly available
+if (typeof WeakRef !== 'undefined') {
+  const obj = { data: 'test' };
+  const weakRef = new WeakRef(obj);
+  console.log('Vanilla: WeakRef created');
+}
+
+if (typeof FinalizationRegistry !== 'undefined') {
+  const registry = new FinalizationRegistry((heldValue) => {
+    console.log('Vanilla: Object finalized:', heldValue);
+  });
+  console.log('Vanilla: FinalizationRegistry created');
+}

package/tests/fixtures/vanilla-project/styles.css

@@ -0,0 +1,359 @@
+/* Modern CSS features for comprehensive testing */
+
+/* CSS Custom Properties with modern color functions */
+:root {
+  --primary-color: oklch(0.7 0.2 240);
+  --secondary-color: color(display-p3 0.2 0.8 0.4);
+  --accent-color: color-mix(in srgb, blue 60%, red);
+  --gradient-bg: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+}
+
+/* Modern CSS reset and base styles */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+  line-height: 1.6;
+  color-scheme: light dark;
+  accent-color: var(--primary-color);
+}
+
+/* Container queries - baseline newly available */
+.vanilla-app {
+  container-type: inline-size;
+  container-name: main-container;
+  
+  /* Modern CSS properties */
+  aspect-ratio: 16/9;
+  min-height: 100vh;
+  padding: 2rem;
+  
+  /* Modern CSS functions and values */
+  background: color-mix(in srgb, lightblue 30%, white);
+  backdrop-filter: blur(10px);
+  
+  /* CSS Grid with modern features */
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: clamp(1rem, 3vw, 2rem);
+  
+  /* Logical properties */
+  padding-inline: max(2rem, 5vw);
+  margin-block: 1rem;
+}
+
+/* Container query rules */
+@container main-container (min-width: 768px) {
+  .vanilla-app {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .container-test {
+    grid-column: span 2;
+  }
+}
+
+@container main-container (min-width: 1200px) {
+  .vanilla-app {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .grid-container {
+    grid-column: span 3;
+  }
+}
+
+/* Modern CSS selectors */
+.vanilla-app:has(dialog[open]) {
+  background-color: rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(15px) brightness(0.8);
+}
+
+.vanilla-app:has(.details-section[open]) {
+  border-left: 4px solid var(--accent-color);
+}
+
+/* CSS Nesting */
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  
+  button {
+    background: var(--gradient-bg);
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    
+    &:hover {
+      transform: translateY(-2px) scale(1.02);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+    }
+    
+    &:focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+    
+    &:active {
+      transform: translateY(0) scale(0.98);
+    }
+  }
+}
+
+/* Modern pseudo-classes */
+.vanilla-app *:is(h1, h2, h3) {
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+.vanilla-app *:where(p, li) {
+  color: #333;
+}
+
+/* Container for container query testing */
+.container-test {
+  container-type: inline-size;
+  container-name: test-container;
+  background: linear-gradient(45deg, var(--primary-color), transparent);
+  padding: 2rem;
+  border-radius: 12px;
+  
+  /* Modern CSS units and functions */
+  width: min(100%, 600px);
+  height: max(200px, 20vh);
+  
+  .nested-container {
+    background: rgba(255, 255, 255, 0.8);
+    padding: 1rem;
+    border-radius: 8px;
+    margin-top: 1rem;
+  }
+}
+
+@container test-container (min-width: 400px) {
+  .container-test {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    
+    h3 {
+      grid-column: span 2;
+      text-align: center;
+    }
+  }
+}
+
+/* CSS Grid with modern features */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+  background: color-mix(in srgb, var(--secondary-color) 20%, white);
+  border-radius: 8px;
+}
+
+.grid-item {
+  background: var(--gradient-bg);
+  color: white;
+  padding: 2rem 1rem;
+  text-align: center;
+  border-radius: 6px;
+  
+  /* Modern CSS transforms and animations */
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  
+  &:hover {
+    transform: rotate(2deg) scale(1.05);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+}
+
+/* Dialog styling with modern CSS */
+dialog {
+  border: none;
+  border-radius: 16px;
+  padding: 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  
+  &::backdrop {
+    background: color-mix(in srgb, black 60%, transparent);
+    backdrop-filter: blur(5px);
+  }
+}
+
+.dialog-content {
+  padding: 2rem;
+  background: linear-gradient(135deg, white, #f8f9fa);
+  border-radius: 16px;
+  min-width: 300px;
+  
+  h2 {
+    margin-top: 0;
+    color: var(--primary-color);
+  }
+  
+  form {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    margin-top: 2rem;
+    
+    button {
+      padding: 0.5rem 1rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      cursor: pointer;
+      
+      &[value="confirm"] {
+        background: var(--primary-color);
+        color: white;
+        border-color: var(--primary-color);
+      }
+      
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+  }
+}
+
+/* Details/Summary styling */
+.details-section {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  padding: 1rem;
+  
+  summary {
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--primary-color);
+    padding: 0.5rem;
+    border-radius: 4px;
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+  }
+  
+  &[open] summary {
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #eee;
+  }
+}
+
+/* Canvas styling */
+canvas {
+  border: 2px solid var(--primary-color);
+  border-radius: 8px;
+  background: white;
+  width: 100%;
+  height: auto;
+  
+  &:hover {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* Modern input styling */
+.modern-inputs {
+  background: rgba(255, 255, 255, 0.9);
+  padding: 1.5rem;
+  border-radius: 8px;
+  
+  input {
+    display: block;
+    width: 100%;
+    margin: 0.5rem 0;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    
+    &:focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 1px;
+    }
+  }
+}
+
+/* Loading test styling */
+.loading-test {
+  text-align: center;
+  
+  img {
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+/* CSS @supports for progressive enhancement */
+@supports (container-type: inline-size) {
+  .vanilla-app {
+    border: 3px solid var(--accent-color);
+  }
+}
+
+@supports (backdrop-filter: blur(10px)) {
+  .vanilla-app {
+    background: rgba(255, 255, 255, 0.8);
+  }
+}
+
+@supports (color-mix(in srgb, red, blue)) {
+  .grid-item {
+    background: color-mix(in srgb, var(--primary-color) 80%, white);
+  }
+}
+
+/* Modern CSS animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.vanilla-app > * {
+  animation: fadeInUp 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.vanilla-app > *:nth-child(1) { animation-delay: 0.1s; }
+.vanilla-app > *:nth-child(2) { animation-delay: 0.2s; }
+.vanilla-app > *:nth-child(3) { animation-delay: 0.3s; }
+.vanilla-app > *:nth-child(4) { animation-delay: 0.4s; }
+
+/* CSS scroll-behavior */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Modern CSS for print */
+@media print {
+  .vanilla-app {
+    background: white !important;
+    color: black !important;
+  }
+  
+  .button-group,
+  canvas {
+    display: none;
+  }
+}

package/tests/fixtures/vue-project/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "vue-test-project",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.3.0",
+    "typescript": "^5.0.0"
+  }
+}