npm - juxscript - Versions diffs - 1.0.3 → 1.0.5 - Mend

juxscript 1.0.3 → 1.0.5

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 (73) hide show

package/README.md +37 -92
package/bin/cli.js +57 -56
package/lib/components/alert.ts +240 -0
package/lib/components/app.ts +216 -82
package/lib/components/badge.ts +164 -0
package/lib/components/barchart.ts +1248 -0
package/lib/components/button.ts +188 -53
package/lib/components/card.ts +75 -61
package/lib/components/chart.ts +17 -15
package/lib/components/checkbox.ts +199 -0
package/lib/components/code.ts +66 -152
package/lib/components/container.ts +104 -208
package/lib/components/data.ts +1 -3
package/lib/components/datepicker.ts +226 -0
package/lib/components/dialog.ts +258 -0
package/lib/components/docs-data.json +1969 -423
package/lib/components/dropdown.ts +244 -0
package/lib/components/element.ts +271 -0
package/lib/components/fileupload.ts +319 -0
package/lib/components/footer.ts +37 -18
package/lib/components/header.ts +53 -33
package/lib/components/heading.ts +119 -0
package/lib/components/helpers.ts +34 -0
package/lib/components/hero.ts +57 -31
package/lib/components/include.ts +292 -0
package/lib/components/input.ts +508 -77
package/lib/components/layout.ts +144 -18
package/lib/components/list.ts +83 -74
package/lib/components/loading.ts +263 -0
package/lib/components/main.ts +43 -17
package/lib/components/menu.ts +108 -24
package/lib/components/modal.ts +50 -21
package/lib/components/nav.ts +60 -18
package/lib/components/paragraph.ts +111 -0
package/lib/components/progress.ts +276 -0
package/lib/components/radio.ts +236 -0
package/lib/components/req.ts +300 -0
package/lib/components/script.ts +33 -74
package/lib/components/select.ts +280 -0
package/lib/components/sidebar.ts +87 -37
package/lib/components/style.ts +47 -70
package/lib/components/switch.ts +261 -0
package/lib/components/table.ts +47 -24
package/lib/components/tabs.ts +105 -63
package/lib/components/theme-toggle.ts +361 -0
package/lib/components/token-calculator.ts +380 -0
package/lib/components/tooltip.ts +244 -0
package/lib/components/view.ts +36 -20
package/lib/components/write.ts +284 -0
package/lib/globals.d.ts +21 -0
package/lib/jux.ts +178 -68
package/lib/presets/notion.css +521 -0
package/lib/presets/notion.jux +27 -0
package/lib/reactivity/state.ts +364 -0
package/lib/themes/charts.js +126 -0
package/machinery/compiler.js +126 -38
package/machinery/generators/html.js +2 -3
package/machinery/server.js +2 -2
package/package.json +29 -3
package/lib/components/import.ts +0 -430
package/lib/components/node.ts +0 -200
package/lib/components/reactivity.js +0 -104
package/lib/components/theme.ts +0 -97
package/lib/layouts/notion.css +0 -258
package/lib/styles/base-theme.css +0 -186
package/lib/styles/dark-theme.css +0 -144
package/lib/styles/light-theme.css +0 -144
package/lib/styles/tokens/dark.css +0 -86
package/lib/styles/tokens/light.css +0 -86
package/lib/templates/index.juxt +0 -33
package/lib/themes/dark.css +0 -86
package/lib/themes/light.css +0 -86
/package/lib/{styles → presets}/global.css +0 -0

package/machinery/compiler.js CHANGED Viewed

@@ -1,14 +1,23 @@
 import fs from 'fs';
 import path from 'path';
 import esbuild from 'esbuild';
-import { generateDocs } from './doc-generator.js';
+/**
+ * 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`);
@@ -27,17 +36,17 @@ export async function compileJuxFile(juxFilePath, options = {}) {
   // 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';
-  const styleBasePath = depth === 0 ? './lib/styles/' : '../'.repeat(depth) + 'lib/styles/';
+  const styleBasePath = depth === 0 ? './lib/presets/' : '../'.repeat(depth) + 'lib/presets/';
   // 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
@@ -45,11 +54,11 @@ export async function compileJuxFile(juxFilePath, options = {}) {
     .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}`;
   }
@@ -61,28 +70,19 @@ export async function compileJuxFile(juxFilePath, options = {}) {
   // Generate HTML with correct script path
   const scriptPath = `./${parsedPath.name}.js`;
   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>
   <!-- JUX Core Styles -->
-  <link rel="stylesheet" href="${styleBasePath}tokens/dark.css">
   <link rel="stylesheet" href="${styleBasePath}global.css">
 </head>
-<body data-theme="dark">
+<body data-theme="">
   <!-- App container -->
   <div id="app" data-jux-page="${parsedPath.name}"></div>
-  <!-- Main content -->
-  <div id="appmain"></div>
-  <!-- Modal overlay -->
-  <div id="appmodal" aria-hidden="true" role="dialog"></div>
   <script type="module" src="${scriptPath}"></script>
   ${isServe ? `
   <!-- Hot reload -->
@@ -107,10 +107,16 @@ export async function compileJuxFile(juxFilePath, options = {}) {
   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}`);
   }
@@ -129,7 +135,7 @@ export async function copyLibToOutput(projectRoot, distDir) {
   // Find all TypeScript entry points
   const tsFiles = findFiles(libSrc, '.ts');
   if (tsFiles.length === 0) {
     console.warn('⚠️  No TypeScript files found in lib/');
     return;
@@ -168,50 +174,123 @@ export async function copyLibToOutput(projectRoot, distDir) {
   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;
+  }
+}
+/**
+ * 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
+ */
 function findFiles(dir, extension, fileList = []) {
   const files = fs.readdirSync(dir);
   files.forEach(file => {
     const filePath = path.join(dir, file);
     const stat = fs.statSync(filePath);
     if (stat.isDirectory()) {
       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 });
@@ -226,23 +305,32 @@ function copyNonTsFiles(src, dest) {
       copyNonTsFiles(srcPath, destPath);
     } else if (entry.isFile()) {
       const ext = path.extname(entry.name);
-      // Copy CSS, JSON, and JS files (but not .ts files)
-      if (ext === '.css' || ext === '.json' || (ext === '.js' && !srcPath.endsWith('.ts'))) {
+      // 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);
-        console.log(`  → Copied: ${path.relative(src, srcPath)}`);
       }
     }
   }
 }
-function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, excludeDirs = ['node_modules', 'dist', '.git', 'lib']) {
+/**
+ * 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)) {
@@ -257,6 +345,6 @@ function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, exclude
       }
     }
   }
   return fileList;
 }

package/machinery/generators/html.js CHANGED Viewed

@@ -42,8 +42,7 @@ export function generateHTML(fileName, options = {}) {
   <title>${fileName}</title>
   <!-- JUX Core Styles -->
-  <link rel="stylesheet" href="${prefix}lib/styles/tokens/dark.css">
-  <link rel="stylesheet" href="${prefix}lib/styles/global.css">
+  <link rel="stylesheet" href="${prefix}lib/presets/global.css">
 </head>
 <body data-theme="dark">
 ${appStructure}
@@ -61,7 +60,7 @@ ${appStructure}
  */
 function buildAppStructure(pageName) {
   const page = pageName || 'index';
   return `  <!-- App Container -->
   <div id="app" data-jux-page="${page}">
     <!-- Header -->

package/machinery/server.js CHANGED Viewed

@@ -186,7 +186,7 @@ async function initDatabase() {
   }
 }
-export async function start(port = 3000, config = {}) {
+export async function start(port = 3000) {
   await initDatabase();
-  return serve(port, config.distDir || './jux-dist');  // Changed default
+  return serve(port, './jux-dist');  // Changed default
 }

package/package.json CHANGED Viewed

@@ -1,23 +1,49 @@
 {
   "name": "juxscript",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
-  "types": "types/globals.d.ts",
+  "types": "lib/jux.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/jux.d.ts",
+      "import": "./lib/jux.js",
+      "default": "./lib/jux.js"
+    },
+    "./lib/*": "./lib/*",
+    "./lib/components/*": "./lib/components/*",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "lib/*"
+      ],
+      "lib/*": [
+        "lib/*"
+      ],
+      "lib/components/*": [
+        "lib/components/*"
+      ]
+    }
+  },
   "bin": {
     "jux": "./bin/cli.js"
   },
   "scripts": {
     "dev": "cd examples && npx jux serve",
     "build:examples": "cd examples && rm -rf dist && npx jux build",
-    "test": "node test/run-tests.js"
+    "build": "tsc",
+    "test": "node test/run-tests.js",
+    "generate:icons": "node scripts/generate-icon-types.js"
   },
   "files": [
     "lib",
     "bin",
     "machinery",
     "types",
+    "lib/**/*.d.ts",
     "README.md",
     "LICENSE"
   ],