mtrl 0.2.7 → 0.2.8

package/demo/build.ts

@@ -0,0 +1,349 @@
+// src/demo/build.ts
+import { mkdir } from 'fs/promises'
+import { existsSync, watch } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import * as sass from 'sass'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const isWatch = process.argv.includes('--watch')
+const isProduction = process.argv.includes('--production') || process.env.NODE_ENV === 'production'
+
+// Define consistent output paths
+const DIST_DIR = join(__dirname, 'dist')
+const STYLES_DIR = join(DIST_DIR, 'styles')
+const JS_OUTPUT = join(DIST_DIR, 'bundle.js')
+const CSS_OUTPUT = join(STYLES_DIR, 'main.css')
+const HTML_SOURCE = join(__dirname, 'index.html')
+const HTML_OUTPUT = join(DIST_DIR, 'index.html')
+
+// Log build mode
+console.log(`Building in ${isProduction ? 'PRODUCTION' : 'DEVELOPMENT'} mode`)
+
+const compileSass = async () => {
+  try {
+    const inputFile = join(__dirname, '../src/styles/main.scss')
+    const outputFile = CSS_OUTPUT
+
+    console.log('┌─────────────────────────────────────────')
+    console.log('│ SASS Compilation')
+    console.log('│ Mode:', isProduction ? 'PRODUCTION' : 'DEVELOPMENT')
+    console.log('│ Input:', inputFile)
+    console.log('│ Output:', outputFile)
+    console.log('│ Minify:', isProduction ? 'Yes' : 'No')
+    console.log('└─────────────────────────────────────────')
+
+    const result = await sass.compileAsync(inputFile, {
+      loadPaths: [
+        join(__dirname, '../node_modules'),
+        join(__dirname, '../src/styles'),
+        join(__dirname, '..') // Add root directory to help resolve paths
+      ],
+      style: isProduction ? 'compressed' : 'expanded',
+      sourceMap: !isProduction
+    })
+
+    await mkdir(dirname(outputFile), { recursive: true })
+    await Bun.write(outputFile, result.css)
+
+    if (result.sourceMap && !isProduction) {
+      await Bun.write(`${outputFile}.map`, JSON.stringify(result.sourceMap))
+    }
+
+    console.log('✓ SASS compilation successful')
+    console.log(`  Size: ${(result.css.length / 1024).toFixed(2)} KB`)
+  } catch (error) {
+    console.error('❌ SASS compilation failed:', error)
+    if (error.span) {
+      console.error(`  Error in ${error.span.url}:${error.span.start.line}:${error.span.start.column}`)
+    }
+  }
+}
+
+const buildApp = async () => {
+  try {
+    console.log('┌─────────────────────────────────────────')
+    console.log('│ JavaScript Build')
+    console.log('│ Mode:', isProduction ? 'PRODUCTION' : 'DEVELOPMENT')
+    console.log('│ Minify:', isProduction ? 'Yes' : 'No')
+    console.log('│ Sourcemaps:', isProduction ? 'No' : 'Yes (inline)')
+    console.log('└─────────────────────────────────────────')
+
+    const jsResult = await Bun.build({
+      entrypoints: [join(__dirname, 'main.js')],
+      outdir: DIST_DIR,
+      minify: isProduction, // Only minify in production
+      sourcemap: isProduction ? 'none' : 'inline', // No sourcemaps in production
+      format: 'esm',
+      target: 'browser',
+      naming: {
+        entry: 'bundle.js'
+      },
+      // Add tree shaking in production
+      tree: isProduction ? true : undefined,
+      // Define production/development environment
+      define: {
+        'process.env.NODE_ENV': isProduction ? '"production"' : '"development"'
+      }
+    })
+
+    if (!jsResult.success) {
+      console.error('❌ JavaScript build failed')
+      console.error(jsResult.logs)
+      return false
+    }
+
+    const jsSize = (await Bun.file(JS_OUTPUT).size) / 1024
+    console.log('✓ JavaScript build successful')
+    console.log(`  Size: ${jsSize.toFixed(2)} KB`)
+
+    return true
+  } catch (error) {
+    console.error('❌ JavaScript build error:', error)
+    return false
+  }
+}
+
+const copyStaticFiles = async () => {
+  try {
+    console.log('┌─────────────────────────────────────────')
+    console.log('│ Copying Static Files')
+    console.log('└─────────────────────────────────────────')
+
+    // Copy HTML template
+    await Bun.write(HTML_OUTPUT, await Bun.file(HTML_SOURCE).text())
+    console.log('✓ Copied HTML template')
+
+    // Add other static files here if needed
+    // For example, copy images, fonts, etc.
+
+    return true
+  } catch (error) {
+    console.error('❌ Error copying static files:', error)
+    return false
+  }
+}
+
+// Update timestamp file to trigger live reload when needed
+const updateReloadTimestamp = async () => {
+  if (!isProduction) {
+    const reloadDir = join(DIST_DIR)
+    const reloadFile = join(reloadDir, 'reload')
+    await mkdir(reloadDir, { recursive: true })
+    await Bun.write(reloadFile, Date.now().toString())
+    console.log('🔄 Browser reload triggered')
+  }
+}
+
+const setupWatchers = () => {
+  if (isProduction) {
+    console.log('Watch mode not available in production build')
+    return { watchJsFiles: () => {}, watchScssFiles: () => {}, watchHtmlFiles: () => {} }
+  }
+
+  const jsWatchPaths = [
+    join(__dirname, 'main.js'),
+    join(__dirname, '../src') // Watch the entire src directory for changes
+  ]
+
+  const scssWatchPaths = [
+    join(__dirname, '../src/styles')
+  ]
+
+  const htmlWatchPaths = [
+    join(__dirname, 'index.html')
+  ]
+
+  const watchJsFiles = () => {
+    // Use a debounce mechanism to prevent duplicate builds
+    let buildTimeout = null
+    const debouncedBuild = (filename) => {
+      if (buildTimeout) {
+        clearTimeout(buildTimeout)
+      }
+      buildTimeout = setTimeout(async () => {
+        console.log('\n📁 JavaScript file changed:', filename)
+        const success = await buildApp()
+        if (success) await updateReloadTimestamp()
+        buildTimeout = null
+      }, 100) // 100ms debounce time
+    }
+
+    jsWatchPaths.forEach(path => {
+      if (existsSync(path)) {
+        watch(path, { recursive: true }, (_, filename) => {
+          if (filename?.endsWith('.js') || filename?.endsWith('.ts')) {
+            debouncedBuild(filename)
+          }
+        })
+      } else {
+        console.warn(`⚠️ Watch path does not exist: ${path}`)
+      }
+    })
+  }
+
+  const watchScssFiles = () => {
+    // Use a debounce mechanism to prevent duplicate compilations
+    let compileTimeout = null
+    const debouncedCompile = (filename) => {
+      if (compileTimeout) {
+        clearTimeout(compileTimeout)
+      }
+      compileTimeout = setTimeout(async () => {
+        console.log('\n📁 SCSS file changed:', filename)
+        await compileSass()
+        await updateReloadTimestamp()
+        compileTimeout = null
+      }, 100) // 100ms debounce time
+    }
+
+    scssWatchPaths.forEach(path => {
+      if (existsSync(path)) {
+        watch(path, { recursive: true }, (_, filename) => {
+          if (filename?.endsWith('.scss')) {
+            debouncedCompile(filename)
+          }
+        })
+      } else {
+        console.warn(`⚠️ Watch path does not exist: ${path}`)
+      }
+    })
+  }
+
+  const watchHtmlFiles = () => {
+    // Watch HTML files and copy them when changed
+    let copyTimeout = null
+    const debouncedCopy = (filename) => {
+      if (copyTimeout) {
+        clearTimeout(copyTimeout)
+      }
+      copyTimeout = setTimeout(async () => {
+        console.log('\n📁 HTML file changed:', filename)
+        await copyStaticFiles()
+        await updateReloadTimestamp()
+        copyTimeout = null
+      }, 100) // 100ms debounce time
+    }
+
+    htmlWatchPaths.forEach(path => {
+      if (existsSync(path)) {
+        watch(path, { recursive: false }, (_, filename) => {
+          if (filename?.endsWith('.html')) {
+            debouncedCopy(filename)
+          }
+        })
+      } else {
+        console.warn(`⚠️ Watch path does not exist: ${path}`)
+      }
+    })
+  }
+
+  return {
+    watchJsFiles,
+    watchScssFiles,
+    watchHtmlFiles
+  }
+}
+
+const verifyOutput = async () => {
+  // Check if output files exist
+  const jsExists = existsSync(JS_OUTPUT)
+  const cssExists = existsSync(CSS_OUTPUT)
+  const htmlExists = existsSync(HTML_OUTPUT)
+
+  console.log('┌─────────────────────────────────────────')
+  console.log('│ Build Verification')
+  console.log('│ JavaScript:', jsExists ? '✓ OK' : '❌ Missing')
+  console.log('│ CSS:', cssExists ? '✓ OK' : '❌ Missing')
+  console.log('│ HTML:', htmlExists ? '✓ OK' : '❌ Missing')
+  console.log('└─────────────────────────────────────────')
+
+  // For production builds, check file sizes
+  if (isProduction && jsExists && cssExists) {
+    const jsStats = await Bun.file(JS_OUTPUT).size
+    const cssStats = await Bun.file(CSS_OUTPUT).size
+    const totalSize = jsStats + cssStats
+
+    console.log('┌─────────────────────────────────────────')
+    console.log('│ Production Build Stats')
+    console.log('│ JavaScript:', (jsStats / 1024).toFixed(2), 'KB')
+    console.log('│ CSS:', (cssStats / 1024).toFixed(2), 'KB')
+    console.log('│ Total Size:', (totalSize / 1024).toFixed(2), 'KB')
+    console.log('└─────────────────────────────────────────')
+  }
+
+  return jsExists && cssExists && htmlExists
+}
+
+const cleanDist = async () => {
+  try {
+    console.log('🧹 Cleaning dist directory...')
+    
+    // Recreate the directories
+    await mkdir(DIST_DIR, { recursive: true })
+    await mkdir(STYLES_DIR, { recursive: true })
+
+    console.log('✓ Dist directory cleaned')
+  } catch (error) {
+    console.error('❌ Error cleaning dist directory:', error)
+  }
+}
+
+const build = async () => {
+  try {
+    const startTime = Date.now()
+
+    console.log('┌───────────────────────────────────────────────')
+    console.log('│ 🚀 MTRL Demo Build Process')
+    console.log('│ Mode:', isProduction ? '🏭 PRODUCTION' : '🔧 DEVELOPMENT')
+    console.log('│ Watch:', isWatch ? '✓ Enabled' : '✗ Disabled')
+    console.log('└───────────────────────────────────────────────')
+    console.log('')
+
+    // Clean dist directory
+    await cleanDist()
+
+    // Create output directories
+    await mkdir(DIST_DIR, { recursive: true })
+    await mkdir(STYLES_DIR, { recursive: true })
+
+    // Build JavaScript
+    await buildApp()
+
+    // Compile SASS to CSS
+    await compileSass()
+
+    // Copy static files
+    await copyStaticFiles()
+
+    // Verify output
+    await verifyOutput()
+
+    // Update reload timestamp
+    await updateReloadTimestamp()
+
+    const buildTime = ((Date.now() - startTime) / 1000).toFixed(2)
+
+    if (isWatch && !isProduction) {
+      console.log('')
+      console.log('┌───────────────────────────────────────────────')
+      console.log('│ 👀 Watching for changes...')
+      console.log('└───────────────────────────────────────────────')
+
+      const { watchJsFiles, watchScssFiles, watchHtmlFiles } = setupWatchers()
+      watchJsFiles()
+      watchScssFiles()
+      watchHtmlFiles()
+    } else {
+      console.log('')
+      console.log('┌───────────────────────────────────────────────')
+      console.log(`│ ✅ Build completed in ${buildTime}s`)
+      console.log('└───────────────────────────────────────────────')
+    }
+  } catch (error) {
+    console.error('❌ Build failed with error:', error)
+    process.exit(1)
+  }
+}
+
+build()

package/demo/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Material Component Library Showcase</title>
+    <link rel="stylesheet" href="dist/styles.css">
+</head>
+<body>
+    <header id="top-app-bar"></header>
+    
+    <main class="content">
+        <section id="intro">
+            <h1>Material Component Library</h1>
+            <p>A lightweight and modular component library using functional composition patterns.</p>
+        </section>
+
+        <section id="buttons" class="component-section">
+            <h2>Buttons</h2>
+            <div class="component-row">
+                <div id="button-container"></div>
+                <div id="segmented-button-container"></div>
+            </div>
+        </section>
+
+        <section id="inputs" class="component-section">
+            <h2>Inputs</h2>
+            <div class="component-row">
+                <div id="checkbox-container"></div>
+                <div id="switch-container"></div>
+                <div id="radio-container"></div>
+            </div>
+        </section>
+
+        <section id="textfields" class="component-section">
+            <h2>Text Fields</h2>
+            <div class="component-row">
+                <div id="textfield-container"></div>
+                <div id="search-container"></div>
+            </div>
+        </section>
+
+        <section id="navigation" class="component-section">
+            <h2>Navigation</h2>
+            <div class="component-row align-top">
+                <div id="menu-container"></div>
+                <div id="tabs-container"></div>
+                <div id="navigation-container"></div>
+            </div>
+        </section>
+
+        <section id="feedback" class="component-section">
+            <h2>Feedback Components</h2>
+            <div class="component-row">
+                <div id="snackbar-container"></div>
+                <div id="tooltip-container"></div>
+                <div id="progress-container"></div>
+            </div>
+        </section>
+
+        <section id="containers" class="component-section">
+            <h2>Containers</h2>
+            <div class="component-row align-top">
+                <div id="card-container"></div>
+                <div id="dialog-container"></div>
+                <div id="sheet-container"></div>
+            </div>
+        </section>
+
+        <section id="indicators" class="component-section">
+            <h2>Indicators</h2>
+            <div class="component-row">
+                <div id="badge-container"></div>
+                <div id="chip-container"></div>
+                <div id="divider-container"></div>
+            </div>
+        </section>
+
+        <section id="complex" class="component-section">
+            <h2>Complex Components</h2>
+            <div class="component-row align-top">
+                <div id="carousel-container"></div>
+                <div id="date-picker-container"></div>
+                <div id="time-picker-container"></div>
+            </div>
+        </section>
+
+        <section id="actions" class="component-section">
+            <h2>Action Components</h2>
+            <div class="component-row">
+                <div id="fab-container"></div>
+                <div id="extended-fab-container"></div>
+                <div id="slider-container"></div>
+            </div>
+        </section>
+
+        <section id="lists" class="component-section">
+            <h2>Lists</h2>
+            <div class="component-row">
+                <div id="list-container"></div>
+            </div>
+        </section>
+    </main>
+
+    <footer id="bottom-app-bar"></footer>
+
+    <!-- Add type="module" to the script tag -->
+    <script type="module" src="dist/bundle.js"></script>
+</body>
+</html>