npm - juxscript - Versions diffs - 1.0.19 → 1.0.21 - Mend

juxscript 1.0.19 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/bin/cli.js +121 -72
package/lib/components/alert.ts +212 -165
package/lib/components/badge.ts +93 -103
package/lib/components/base/BaseComponent.ts +397 -0
package/lib/components/base/FormInput.ts +322 -0
package/lib/components/button.ts +63 -122
package/lib/components/card.ts +109 -155
package/lib/components/charts/areachart.ts +315 -0
package/lib/components/charts/barchart.ts +421 -0
package/lib/components/charts/doughnutchart.ts +263 -0
package/lib/components/charts/lib/BaseChart.ts +402 -0
package/lib/components/charts/lib/chart-types.ts +159 -0
package/lib/components/charts/lib/chart-utils.ts +160 -0
package/lib/components/charts/lib/chart.ts +707 -0
package/lib/components/checkbox.ts +264 -127
package/lib/components/code.ts +75 -108
package/lib/components/container.ts +113 -130
package/lib/components/data.ts +37 -5
package/lib/components/datepicker.ts +195 -147
package/lib/components/dialog.ts +187 -157
package/lib/components/divider.ts +85 -191
package/lib/components/docs-data.json +544 -2027
package/lib/components/dropdown.ts +178 -136
package/lib/components/element.ts +227 -171
package/lib/components/fileupload.ts +285 -228
package/lib/components/guard.ts +92 -0
package/lib/components/heading.ts +46 -69
package/lib/components/helpers.ts +13 -6
package/lib/components/hero.ts +107 -95
package/lib/components/icon.ts +160 -0
package/lib/components/icons.ts +175 -0
package/lib/components/include.ts +153 -5
package/lib/components/input.ts +174 -374
package/lib/components/kpicard.ts +16 -16
package/lib/components/list.ts +378 -240
package/lib/components/loading.ts +142 -211
package/lib/components/menu.ts +103 -97
package/lib/components/modal.ts +138 -144
package/lib/components/nav.ts +169 -90
package/lib/components/paragraph.ts +49 -150
package/lib/components/progress.ts +118 -200
package/lib/components/radio.ts +297 -149
package/lib/components/script.ts +19 -87
package/lib/components/select.ts +184 -186
package/lib/components/sidebar.ts +152 -140
package/lib/components/style.ts +19 -82
package/lib/components/switch.ts +258 -188
package/lib/components/table.ts +1117 -170
package/lib/components/tabs.ts +162 -145
package/lib/components/theme-toggle.ts +108 -169
package/lib/components/tooltip.ts +86 -157
package/lib/components/write.ts +108 -127
package/lib/jux.ts +86 -41
package/machinery/build.js +466 -0
package/machinery/compiler.js +354 -105
package/machinery/server.js +23 -100
package/machinery/watcher.js +153 -130
package/package.json +1 -2
package/presets/base.css +1166 -0
package/presets/notion.css +2 -1975
package/lib/adapters/base-adapter.js +0 -35
package/lib/adapters/index.js +0 -33
package/lib/adapters/mysql-adapter.js +0 -65
package/lib/adapters/postgres-adapter.js +0 -70
package/lib/adapters/sqlite-adapter.js +0 -56
package/lib/components/areachart.ts +0 -1246
package/lib/components/areachartsmooth.ts +0 -1380
package/lib/components/barchart.ts +0 -1250
package/lib/components/chart.ts +0 -127
package/lib/components/doughnutchart.ts +0 -1191
package/lib/components/footer.ts +0 -165
package/lib/components/header.ts +0 -187
package/lib/components/layout.ts +0 -239
package/lib/components/main.ts +0 -137
package/lib/layouts/default.jux +0 -8
package/lib/layouts/figma.jux +0 -0
/package/lib/{themes → components/charts/lib}/charts.js +0 -0

package/machinery/build.js ADDED Viewed

@@ -0,0 +1,466 @@
+import fs from 'fs';
+import path from 'path';
+import esbuild from 'esbuild';
+import {
+    bundleJuxFilesToRouter,
+    generateRouterIndex
+} from './compiler.js';
+/**
+ * Generate import map script tag
+ */
+function generateImportMapScript() {
+    return `<script type="importmap">
+{
+  "imports": {
+    "juxscript": "./lib/jux.js",
+    "juxscript/": "./lib/",
+    "juxscript/reactivity": "./lib/reactivity/state.js",
+    "juxscript/presets/": "./presets/",
+    "juxscript/components/": "./lib/components/"
+  }
+}
+</script>`;
+}
+/**
+ * Compile a .jux file to .js and .html
+ *
+ * @param {string} juxFilePath - Path to the .jux file
+ * @param {Object} options - Compilation options
+ * @param {string} options.distDir - Output directory
+ * @param {string} options.projectRoot - Project root directory
+ * @param {boolean} options.isServe - Whether serving for development
+ * @returns {Promise<{jsOutputPath: string, htmlOutputPath: string}>}
+ */
+export async function compileJuxFile(juxFilePath, options = {}) {
+    const { distDir, projectRoot, isServe = false } = options;
+    const relativePath = path.relative(projectRoot, juxFilePath);
+    const parsedPath = path.parse(relativePath);
+    // Output paths
+    const outputDir = path.join(distDir, parsedPath.dir);
+    const jsOutputPath = path.join(outputDir, `${parsedPath.name}.js`);
+    const htmlOutputPath = path.join(outputDir, `${parsedPath.name}.html`);
+    // Ensure output directory exists
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+    }
+    console.log(`📝 Compiling: ${relativePath}`);
+    // Read the .jux file
+    const juxContent = fs.readFileSync(juxFilePath, 'utf-8');
+    // Calculate depth for relative paths
+    const depth = parsedPath.dir.split(path.sep).filter(p => p).length;
+    const libPath = depth === 0 ? './lib/jux.js' : '../'.repeat(depth) + 'lib/jux.js';
+    // Transform imports
+    let transformedContent = juxContent;
+    // Replace common import patterns with calculated path
+    transformedContent = transformedContent.replace(
+        /from\s+['"]\.\.?\/lib\/jux\.js['"]/g,
+        `from '${libPath}'`
+    );
+    // Only inject import if:
+    // 1. File is not empty (ignoring whitespace and comments)
+    // 2. File uses 'jux.' but has no import statement
+    const contentWithoutComments = transformedContent
+        .replace(/\/\*[\s\S]*?\*\//g, '') // Remove block comments
+        .replace(/\/\/.*/g, '')             // Remove line comments
+        .trim();
+    const hasContent = contentWithoutComments.length > 0;
+    const usesJux = /\bjux\./g.test(contentWithoutComments);
+    const hasImport = /import\s+.*from/.test(transformedContent);
+    if (hasContent && usesJux && !hasImport) {
+        transformedContent = `import { jux } from '${libPath}';\n\n${transformedContent}`;
+    }
+    // Write the transformed JS
+    fs.writeFileSync(jsOutputPath, transformedContent);
+    console.log(`  ✓ JS: ${path.relative(projectRoot, jsOutputPath)}`);
+    // Generate HTML with import map and correct script path
+    const scriptPath = `./${parsedPath.name}.js`;
+    const importMapScript = generateImportMapScript();
+    const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${parsedPath.name}</title>
+</head>
+<body data-theme="">
+  <!-- App container -->
+  <div id="app" data-jux-page="${parsedPath.name}"></div>
+  ${importMapScript}
+  <script type="module" src="${scriptPath}"></script>
+  ${isServe ? `
+  <!-- Hot reload -->
+  <script type="module">
+    const ws = new WebSocket('ws://localhost:3001');
+    ws.onmessage = (msg) => {
+      const data = JSON.parse(msg.data);
+      if (data.type === 'reload') {
+        console.log('🔄 Reloading page...');
+        location.reload();
+      }
+    };
+    ws.onerror = () => console.warn('⚠️  WebSocket connection failed');
+  </script>
+  ` : ''}
+</body>
+</html>`;
+    fs.writeFileSync(htmlOutputPath, html);
+    console.log(`  ✓ HTML: ${path.relative(projectRoot, htmlOutputPath)}`);
+    return { jsOutputPath, htmlOutputPath };
+}
+/**
+ * Copy and build the JUX library from TypeScript to JavaScript
+ *
+ * @param {string} projectRoot - Root directory containing lib/
+ * @param {string} distDir - Destination directory for built files
+ */
+export async function copyLibToOutput(projectRoot, distDir) {
+    // Simplified lib path resolution
+    const libSrc = path.resolve(projectRoot, '../lib');
+    if (!fs.existsSync(libSrc)) {
+        throw new Error(`lib/ directory not found at ${libSrc}`);
+    }
+    const libDest = path.join(distDir, 'lib');
+    console.log('📦 Building TypeScript library...');
+    console.log(`   From: ${libSrc}`);
+    console.log(`   To: ${libDest}`);
+    if (fs.existsSync(libDest)) {
+        fs.rmSync(libDest, { recursive: true });
+    }
+    fs.mkdirSync(libDest, { recursive: true });
+    // Find all TypeScript entry points
+    const tsFiles = findFiles(libSrc, '.ts');
+    if (tsFiles.length === 0) {
+        console.warn('⚠️  No TypeScript files found in lib/');
+        return;
+    }
+    console.log(`   Found ${tsFiles.length} TypeScript files`);
+    // Build all TypeScript files with esbuild
+    try {
+        await esbuild.build({
+            entryPoints: tsFiles,
+            bundle: false,
+            format: 'esm',
+            outdir: libDest,
+            outbase: libSrc,
+            platform: 'browser',
+            target: 'es2020',
+            loader: {
+                '.ts': 'ts'
+            },
+            logLevel: 'warning'
+        });
+        console.log('   ✓ TypeScript compiled to JavaScript');
+        // Copy non-TS files (CSS, HTML, etc.)
+        console.log('   Copying lib assets...');
+        copyNonTsFiles(libSrc, libDest);
+        console.log('   ✓ Lib assets copied');
+    } catch (err) {
+        console.error('❌ Failed to build TypeScript:', err.message);
+        throw err;
+    }
+    console.log('✅ Library ready\n');
+}
+/**
+ * Copy project assets (CSS, JS, images) from jux/ to dist/
+ *
+ * @param {string} projectRoot - Source directory (jux/)
+ * @param {string} distDir - Destination directory (jux-dist/)
+ */
+export async function copyProjectAssets(projectRoot, distDir) {
+    console.log('📦 Copying project assets...');
+    // Find all CSS and JS files in project root (excluding node_modules, dist, .git)
+    const allFiles = [];
+    findProjectFiles(projectRoot, ['.css', '.js'], allFiles, projectRoot);
+    console.log(`   Found ${allFiles.length} asset file(s)`);
+    for (const srcPath of allFiles) {
+        const relativePath = path.relative(projectRoot, srcPath);
+        const destPath = path.join(distDir, relativePath);
+        const destDir = path.dirname(destPath);
+        // Create destination directory if needed
+        if (!fs.existsSync(destDir)) {
+            fs.mkdirSync(destDir, { recursive: true });
+        }
+        // Copy file
+        fs.copyFileSync(srcPath, destPath);
+        console.log(`   ✓ ${relativePath}`);
+    }
+    console.log('✅ Project assets copied\n');
+}
+/**
+ * Transpile TypeScript files from jux/ to jux-dist/, preserving folder structure
+ *
+ * @param {string} srcDir - Source directory (jux/)
+ * @param {string} destDir - Destination directory (jux-dist/)
+ * @example
+ * // jux/samples/mypage.ts -> jux-dist/samples/mypage.js
+ * await transpileProjectTypeScript('jux/', 'jux-dist/');
+ */
+export async function transpileProjectTypeScript(srcDir, destDir) {
+    console.log('🔷 Transpiling TypeScript files...');
+    // Find all TypeScript files in the project
+    const tsFiles = findFiles(srcDir, '.ts');
+    if (tsFiles.length === 0) {
+        console.log('   No TypeScript files found in project');
+        return;
+    }
+    console.log(`   Found ${tsFiles.length} TypeScript file(s)`);
+    try {
+        // Build all TypeScript files with esbuild
+        await esbuild.build({
+            entryPoints: tsFiles,
+            bundle: false,
+            format: 'esm',
+            outdir: destDir,
+            outbase: srcDir,
+            platform: 'browser',
+            target: 'es2020',
+            loader: {
+                '.ts': 'ts'
+            },
+            logLevel: 'warning'
+        });
+        // Log each transpiled file
+        tsFiles.forEach(tsFile => {
+            const relativePath = path.relative(srcDir, tsFile);
+            const jsPath = relativePath.replace(/\.ts$/, '.js');
+            console.log(`   ✓ ${relativePath} → ${jsPath}`);
+        });
+        console.log('✅ TypeScript transpiled\n');
+    } catch (err) {
+        console.error('❌ Failed to transpile TypeScript:', err.message);
+        throw err;
+    }
+}
+/**
+ * Copy presets folder from lib to dist
+ *
+ * @param {string} packageRoot - Source package root directory
+ * @param {string} distDir - Destination directory
+ */
+export async function copyPresetsToOutput(packageRoot, distDir) {
+    console.log('📦 Copying presets...');
+    const presetsSrc = path.join(packageRoot, 'presets');
+    const presetsDest = path.join(distDir, 'presets');
+    if (!fs.existsSync(presetsSrc)) {
+        console.log('   No presets directory found');
+        return;
+    }
+    if (fs.existsSync(presetsDest)) {
+        fs.rmSync(presetsDest, { recursive: true });
+    }
+    fs.mkdirSync(presetsDest, { recursive: true });
+    // Copy all files in presets directory
+    const files = fs.readdirSync(presetsSrc);
+    let copiedCount = 0;
+    for (const file of files) {
+        const srcPath = path.join(presetsSrc, file);
+        const destPath = path.join(presetsDest, file);
+        if (fs.statSync(srcPath).isFile()) {
+            fs.copyFileSync(srcPath, destPath);
+            console.log(`   ✓ ${file}`);
+            copiedCount++;
+        }
+    }
+    console.log(`✅ Copied ${copiedCount} preset file(s)\n`);
+}
+/**
+ * Recursively find files with a specific extension
+ *
+ * @param {string} dir - Directory to search
+ * @param {string} extension - File extension (e.g., '.ts')
+ * @param {string[]} fileList - Accumulator for found files
+ * @returns {string[]} Array of file paths
+ */
+async function findFiles(dir, extension, fileList = []) {
+    const fs = await import('fs');
+    const path = await import('path');
+    const files = fs.readdirSync(dir);
+    files.forEach(file => {
+        const filePath = path.join(dir, file);
+        const stat = fs.statSync(filePath);
+        if (stat.isDirectory() && !['node_modules', 'jux-dist', '.git', 'lib'].includes(file)) {
+            findFiles(filePath, extension, fileList);
+        } else if (file.endsWith(extension)) {
+            fileList.push(filePath);
+        }
+    });
+    return fileList;
+}
+/**
+ * Copy non-TypeScript files (CSS, JSON, JS, SVG, etc.)
+ *
+ * @param {string} src - Source directory
+ * @param {string} dest - Destination directory
+ */
+function copyNonTsFiles(src, dest) {
+    const entries = fs.readdirSync(src, { withFileTypes: true });
+    for (const entry of entries) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
+        if (entry.isDirectory()) {
+            if (!fs.existsSync(destPath)) {
+                fs.mkdirSync(destPath, { recursive: true });
+            }
+            copyNonTsFiles(srcPath, destPath);
+        } else if (entry.isFile()) {
+            const ext = path.extname(entry.name);
+            // Copy CSS, JSON, SVG, and JS files (but not .ts files)
+            if (['.css', '.json', '.js', '.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp'].includes(ext)) {
+                fs.copyFileSync(srcPath, destPath);
+            }
+        }
+    }
+}
+/**
+ * Find project files with specific extensions, excluding certain directories
+ *
+ * @param {string} dir - Directory to search
+ * @param {string[]} extensions - File extensions to find
+ * @param {string[]} fileList - Accumulator for found files
+ * @param {string} rootDir - Root directory for relative paths
+ * @param {string[]} excludeDirs - Directories to exclude
+ * @returns {string[]} Array of file paths
+ */
+function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, excludeDirs = ['node_modules', 'jux-dist', '.git', 'lib']) {
+    if (!fs.existsSync(dir)) return fileList;
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+            // Skip excluded directories
+            if (excludeDirs.includes(entry.name)) {
+                continue;
+            }
+            findProjectFiles(fullPath, extensions, fileList, rootDir, excludeDirs);
+        } else {
+            // Check if file has one of the desired extensions
+            const hasExtension = extensions.some(ext => entry.name.endsWith(ext));
+            if (hasExtension) {
+                fileList.push(fullPath);
+            }
+        }
+    }
+    return fileList;
+}
+/**
+ * Build a project
+ *
+ * @param {string} projectRoot - Root directory containing lib/
+ * @param {string} distDir - Destination directory for built files
+ * @param {Object} options - Compilation options
+ * @param {string} options.routePrefix - Route prefix
+ * @returns {Promise<{jsOutputPath: string, htmlOutputPath: string}>}
+ */
+export async function buildProject(options = {}) {
+    const { projectRoot, distDir } = options;
+    // Ensure project root and dist directory exist
+    if (!fs.existsSync(projectRoot)) {
+        throw new Error(`Project root directory not found: ${projectRoot}`);
+    }
+    if (!fs.existsSync(distDir)) {
+        fs.mkdirSync(distDir, { recursive: true });
+    }
+    // Option to use router mode
+    if (options.router) {
+        console.log('🔀 Building in router mode...\n');
+        await bundleJuxFilesToRouter(projectRoot, distDir, {
+            routePrefix: options.routePrefix || ''
+        });
+        // Get route information for index generation
+        const juxFiles = findFiles(projectRoot, '.jux');
+        const routes = juxFiles.map(juxFile => {
+            const relativePath = path.relative(projectRoot, juxFile);
+            const parsedPath = path.parse(relativePath);
+            const functionName = parsedPath.dir
+                ? `${parsedPath.dir.replace(/\//g, '_')}_${parsedPath.name}`
+                : parsedPath.name;
+            const routePath = (options.routePrefix || '') + '/' +
+                (parsedPath.dir ? `${parsedPath.dir}/` : '') + parsedPath.name;
+            return {
+                path: routePath.replace(/\/+/g, '/'),
+                functionName
+            };
+        });
+        generateRouterIndex(distDir, routes);
+    } else {
+        // ...existing individual page compilation...
+    }
+    // ...existing code...
+}