domma-js 0.9.7-alpha → 0.9.9-alpha

package/bin/domma-cli.js

@@ -9,6 +9,11 @@ import {stdin as input, stdout as output} from 'process';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
+// Read version from package.json
+const packageJsonPath = join(__dirname, '..', 'package.json');
+const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+const VERSION = packageJson.version;
+
 const THEMES = [
   'charcoal-dark', 'ocean-dark', 'forest-dark', 'sunset-light',
   'silver-light', 'ocean-light', 'forest-light', 'sunset-dark',
@@ -20,29 +25,33 @@ const args = process.argv.slice(2);
 const command = args[0];
 
 // Command routing
-// Check if first arg is a flag (starts with --)
-if (command && command.startsWith('--')) {
-  // Treat flags as init command
-  handleInit();
-} else {
-  switch (command) {
-    case 'init':
-    case undefined:
+switch (command) {
+  case 'init':
+  case undefined:
+    handleInit();
+    break;
+  case 'add':
+    handleAdd();
+    break;
+  case 'version':
+  case '--version':
+  case '-v':
+    showVersion();
+    break;
+  case 'help':
+  case '--help':
+  case '-h':
+    showHelp();
+    break;
+  default:
+    // Check if it's a --flag for init
+    if (command && command.startsWith('--')) {
       handleInit();
-      break;
-    case 'add':
-      handleAdd();
-      break;
-    case 'help':
-    case '--help':
-    case '-h':
-      showHelp();
-      break;
-    default:
+    } else {
       console.error(`Unknown command: ${command}`);
       showHelp();
       process.exit(1);
-  }
+    }
 }
 
 /**
@@ -56,6 +65,7 @@ async function handleInit() {
 ╔═══════════════════════════════════════╗
 ║                                       ║
 ║       Welcome to Domma CLI!           ║
+║            v${VERSION.padEnd(24)}║
 ║                                       ║
 ╚═══════════════════════════════════════╝
 
@@ -123,8 +133,8 @@ async function handleInit() {
   // Copy all templates with variable substitution
   copyTemplatesRecursive(templatesDir, process.cwd(), vars);
 
-  // Copy Domma dist files to frontend/dist
-  const frontendDistDir = join(process.cwd(), 'frontend', 'dist');
+  // Copy Domma dist files to frontend/dist/domma
+  const frontendDistDir = join(process.cwd(), 'frontend', 'dist', 'domma');
   console.log(`\n  Copying Domma distribution files...\n`);
 
   if (!existsSync(frontendDistDir)) {
@@ -188,7 +198,7 @@ async function handleAdd() {
  */
 async function handleAddPage() {
   const quickMode = args.includes('--quick');
-  let pageName = args[2];
+  let pagePath = args[2];
 
   // Check if we're in a Domma project
   const configPath = join(process.cwd(), 'domma.config.json');
@@ -198,22 +208,23 @@ async function handleAddPage() {
     process.exit(1);
   }
 
-  if (!pageName && quickMode) {
-    console.error('Page name required with --quick flag');
-    console.log('Usage: npx domma-js add page <name> --quick');
+  if (!pagePath && quickMode) {
+    console.error('Page path required with --quick flag');
+    console.log('Usage: npx domma-js add page <path> --quick');
+    console.log('Example: npx domma-js add page frontend/pages/dashboard --quick');
     process.exit(1);
   }
 
   if (!quickMode) {
     const rl = readline.createInterface({input, output});
 
-    if (!pageName) {
-      const nameAnswer = await rl.question('  Page name: ');
-      pageName = nameAnswer.trim();
+    if (!pagePath) {
+      const pathAnswer = await rl.question('  Page path (e.g., frontend/pages/dashboard): ');
+      pagePath = pathAnswer.trim();
     }
 
-    if (!pageName) {
-      console.error('  ✗ Page name is required');
+    if (!pagePath) {
+      console.error('  ✗ Page path is required');
       rl.close();
       process.exit(1);
     }
@@ -221,26 +232,35 @@ async function handleAddPage() {
     rl.close();
   }
 
-  // Validate and sanitize page name
-  pageName = pageName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+  // Parse the path to extract directory and page name
+  const pathParts = pagePath.split('/').filter(p => p.length > 0);
+  const pageName = pathParts[pathParts.length - 1].toLowerCase().replace(/[^a-z0-9-]/g, '-');
+  const pageDir = pathParts.slice(0, -1).join('/');
 
   // Create page
-  createPage(pageName);
+  createPage(pageDir, pageName);
 }
 
 /**
  * Create a new page from template
  */
-function createPage(pageName) {
-  const pagesDir = join(process.cwd(), 'frontend', 'pages', pageName);
+function createPage(pageDir, pageName) {
+  // Build full path
+  const fullPath = pageDir ? join(process.cwd(), pageDir, pageName) : join(process.cwd(), pageName);
 
-  if (existsSync(pagesDir)) {
-    console.error(`\n  ✗ Page "${pageName}" already exists`);
+  if (existsSync(fullPath)) {
+    console.error(`\n  ✗ Page "${pageName}" already exists at this location`);
     process.exit(1);
   }
 
   // Create directory
-  mkdirSync(pagesDir, {recursive: true});
+  mkdirSync(fullPath, {recursive: true});
+
+  // Calculate depth for relative paths
+  // Count how many folders deep we are from project root
+  const pathSegments = pageDir ? pageDir.split('/').filter(p => p.length > 0) : [];
+  const depth = pathSegments.length + 1; // +1 for the page folder itself
+  const parentPath = '../'.repeat(depth);
 
   // Get templates
   const pageTemplateDir = join(__dirname, '..', 'templates', 'page-template');
@@ -251,7 +271,7 @@ function createPage(pageName) {
   }
 
   // Read templates
-  const htmlTemplate = readFileSync(join(pageTemplateDir, 'page.html'), 'utf-8');
+  let htmlTemplate = readFileSync(join(pageTemplateDir, 'page.html'), 'utf-8');
   const jsTemplate = readFileSync(join(pageTemplateDir, 'page.js'), 'utf-8');
 
   // Get project config for theme
@@ -266,6 +286,13 @@ function createPage(pageName) {
     }
   }
 
+  // Adjust paths in template based on depth
+  // Template has ../../ by default (depth 2)
+  // We need to replace with the correct depth
+  htmlTemplate = htmlTemplate.replaceAll('../../dist/domma/', `${parentPath}dist/domma/`);
+  htmlTemplate = htmlTemplate.replaceAll('../../css/', `${parentPath}css/`);
+  htmlTemplate = htmlTemplate.replaceAll('../../js/', `${parentPath}js/`);
+
   // Variable substitution
   const titleCase = pageName.split('-').map(w =>
     w.charAt(0).toUpperCase() + w.slice(1)
@@ -286,12 +313,14 @@ function createPage(pageName) {
   }
 
   // Write files
-  writeFileSync(join(pagesDir, 'index.html'), html);
-  writeFileSync(join(pagesDir, `${pageName}.js`), js);
+  writeFileSync(join(fullPath, 'index.html'), html);
+  writeFileSync(join(fullPath, `${pageName}.js`), js);
 
-  console.log(`\n  ✓ Page created: frontend/pages/${pageName}/`);
+  const displayPath = pageDir ? `${pageDir}/${pageName}` : pageName;
+  console.log(`\n  ✓ Page created: ${displayPath}/`);
   console.log(`    - index.html`);
-  console.log(`    - ${pageName}.js\n`);
+  console.log(`    - ${pageName}.js`);
+  console.log(`    Depth: ${depth} (using ${parentPath})\n`);
   console.log(`  Don't forget to add it to your navbar in domma.config.json!\n`);
 }
 
@@ -328,26 +357,40 @@ function copyTemplatesRecursive(srcDir, destDir, vars) {
   }
 }
 
+/**
+ * Show version information
+ */
+function showVersion() {
+  console.log(`domma-js v${VERSION}`);
+}
+
 /**
  * Show help information
  */
 function showHelp() {
   console.log(`
-Domma CLI - Project scaffolding and management
+Domma CLI v${VERSION} - Project scaffolding and management
 
 Commands:
   npx domma-js              Initialize a new Domma project
   npx domma-js init         Initialize a new Domma project
-  npx domma-js add page <name>  Add a new page
+  npx domma-js add page <path>  Add a new page at specified path
     --quick                 Skip interactive prompts
 
 Options:
   --help, -h               Show this help message
+  --version, -v            Show version number
 
 Examples:
   npx domma-js                     # Interactive project setup
   npx domma-js --quick             # Quick project setup with defaults
-  npx domma-js add page dashboard  # Add a dashboard page (interactive)
-  npx domma-js add page faq --quick  # Add FAQ page (non-interactive)
+
+  # Add pages at different paths:
+  npx domma-js add page admin                      # Root level (admin/)
+  npx domma-js add page pages/dashboard            # One level deep (pages/dashboard/)
+  npx domma-js add page frontend/pages/profile     # Two levels deep (frontend/pages/profile/)
+  npx domma-js add page src/views/settings --quick # Quick mode (non-interactive)
+
+Note: Paths are automatically calculated based on folder depth
 `);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-js",
-  "version": "0.9.7-alpha",
+  "version": "0.9.9-alpha",
   "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
   "main": "public/dist/domma.min.js",
   "module": "public/dist/domma.esm.js",

package/templates/kickstart/frontend/js/app.js

@@ -6,11 +6,12 @@
  */
 
 $(() => {
-  // Determine config path based on page depth
+  // Determine config path based on page location
   // Root pages (pages/index.html) need ../domma.config.json
   // Sub-pages (pages/about/index.html) need ../../domma.config.json
-  const pathDepth = window.location.pathname.split('/').filter(Boolean).length;
-  const configPath = pathDepth > 2 ? '../../domma.config.json' : '../domma.config.json';
+  const pathname = window.location.pathname;
+  const isSubPage = pathname.match(/\/pages\/[^/]+\//) !== null;
+  const configPath = isSubPage ? '../../domma.config.json' : '../domma.config.json';
 
   // Load configuration
   Domma.http.get(configPath).then(config => {

package/templates/kickstart/frontend/pages/about/index.html

@@ -6,10 +6,10 @@
   <title>About - {{projectName}}</title>
 
   <!-- Domma CSS -->
-  <link rel="stylesheet" href="../../dist/domma.css">
-  <link rel="stylesheet" href="../../dist/grid.css">
-  <link rel="stylesheet" href="../../dist/elements.css">
-  <link rel="stylesheet" href="../../dist/themes/domma-themes.css">
+  <link rel="stylesheet" href="../../dist/domma/domma.css">
+  <link rel="stylesheet" href="../../dist/domma/grid.css">
+  <link rel="stylesheet" href="../../dist/domma/elements.css">
+  <link rel="stylesheet" href="../../dist/domma/themes/domma-themes.css">
 
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
@@ -218,8 +218,11 @@
 <!-- Footer -->
 <footer class="page-footer"></footer>
 
+<!-- Security: DOMPurify for XSS protection -->
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js"></script>
+
 <!-- Domma JavaScript -->
-<script src="../../dist/domma.min.js"></script>
+<script src="../../dist/domma/domma.min.js"></script>
 
 <!-- App Initialization -->
 <script src="../../js/app.js"></script>

package/templates/kickstart/frontend/pages/blog/index.html

@@ -6,10 +6,10 @@
   <title>Blog - {{projectName}}</title>
 
   <!-- Domma CSS -->
-  <link rel="stylesheet" href="../../dist/domma.css">
-  <link rel="stylesheet" href="../../dist/grid.css">
-  <link rel="stylesheet" href="../../dist/elements.css">
-  <link rel="stylesheet" href="../../dist/themes/domma-themes.css">
+  <link rel="stylesheet" href="../../dist/domma/domma.css">
+  <link rel="stylesheet" href="../../dist/domma/grid.css">
+  <link rel="stylesheet" href="../../dist/domma/elements.css">
+  <link rel="stylesheet" href="../../dist/domma/themes/domma-themes.css">
 
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
@@ -207,8 +207,11 @@
 <!-- Footer -->
 <footer class="page-footer"></footer>
 
+<!-- Security: DOMPurify for XSS protection -->
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js"></script>
+
 <!-- Domma JavaScript -->
-<script src="../../dist/domma.min.js"></script>
+<script src="../../dist/domma/domma.min.js"></script>
 
 <!-- App Initialization -->
 <script src="../../js/app.js"></script>

package/templates/kickstart/frontend/pages/contact/index.html

@@ -6,10 +6,10 @@
   <title>Contact - {{projectName}}</title>
 
   <!-- Domma CSS -->
-  <link rel="stylesheet" href="../../dist/domma.css">
-  <link rel="stylesheet" href="../../dist/grid.css">
-  <link rel="stylesheet" href="../../dist/elements.css">
-  <link rel="stylesheet" href="../../dist/themes/domma-themes.css">
+  <link rel="stylesheet" href="../../dist/domma/domma.css">
+  <link rel="stylesheet" href="../../dist/domma/grid.css">
+  <link rel="stylesheet" href="../../dist/domma/elements.css">
+  <link rel="stylesheet" href="../../dist/domma/themes/domma-themes.css">
 
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
@@ -183,8 +183,11 @@
 <!-- Footer -->
 <footer class="page-footer"></footer>
 
+<!-- Security: DOMPurify for XSS protection -->
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js"></script>
+
 <!-- Domma JavaScript -->
-<script src="../../dist/domma.min.js"></script>
+<script src="../../dist/domma/domma.min.js"></script>
 
 <!-- App Initialization -->
 <script src="../../js/app.js"></script>

package/templates/kickstart/frontend/pages/cookies/index.html

@@ -6,10 +6,10 @@
   <title>Cookie Policy - {{projectName}}</title>
 
   <!-- Domma CSS -->
-  <link rel="stylesheet" href="../../dist/domma.css">
-  <link rel="stylesheet" href="../../dist/grid.css">
-  <link rel="stylesheet" href="../../dist/elements.css">
-  <link rel="stylesheet" href="../../dist/themes/domma-themes.css">
+  <link rel="stylesheet" href="../../dist/domma/domma.css">
+  <link rel="stylesheet" href="../../dist/domma/grid.css">
+  <link rel="stylesheet" href="../../dist/domma/elements.css">
+  <link rel="stylesheet" href="../../dist/domma/themes/domma-themes.css">
 
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
@@ -369,8 +369,11 @@
 <!-- Footer -->
 <footer class="page-footer"></footer>
 
+<!-- Security: DOMPurify for XSS protection -->
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js"></script>
+
 <!-- Domma JavaScript -->
-<script src="../../dist/domma.min.js"></script>
+<script src="../../dist/domma/domma.min.js"></script>
 
 <!-- Global App Initialization -->
 <script src="../../js/app.js"></script>

package/templates/kickstart/frontend/pages/docs/index.html

@@ -6,11 +6,11 @@
   <title>Documentation - {{projectName}}</title>
 
   <!-- Domma CSS -->
-  <link rel="stylesheet" href="../../dist/domma.css">
-  <link rel="stylesheet" href="../../dist/grid.css">
-  <link rel="stylesheet" href="../../dist/elements.css">
-  <link rel="stylesheet" href="../../dist/themes/domma-themes.css">
-  <link rel="stylesheet" href="../../dist/syntax.css">
+  <link rel="stylesheet" href="../../dist/domma/domma.css">
+  <link rel="stylesheet" href="../../dist/domma/grid.css">
+  <link rel="stylesheet" href="../../dist/domma/elements.css">
+  <link rel="stylesheet" href="../../dist/domma/themes/domma-themes.css">
+  <link rel="stylesheet" href="../../dist/domma/syntax.css">
 
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
@@ -272,9 +272,12 @@ Domma.theme.get();  // 'ocean-dark'</code></pre>
 <!-- Footer -->
 <footer class="page-footer"></footer>
 
+<!-- Security: DOMPurify for XSS protection -->
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js"></script>
+
 <!-- Domma JavaScript -->
-<script src="../../dist/domma.min.js"></script>
-<script src="../../dist/domma-syntax.min.js"></script>
+<script src="../../dist/domma/domma.min.js"></script>
+<script src="../../dist/domma/domma-syntax.min.js"></script>
 
 <!-- App Initialization -->
 <script src="../../js/app.js"></script>

package/templates/kickstart/frontend/pages/index.html

@@ -6,10 +6,10 @@
   <title>{{projectName}} - Home</title>
 
   <!-- Domma CSS -->
-  <link rel="stylesheet" href="../dist/domma.css">
-  <link rel="stylesheet" href="../dist/grid.css">
-  <link rel="stylesheet" href="../dist/elements.css">
-  <link rel="stylesheet" href="../dist/themes/domma-themes.css">
+  <link rel="stylesheet" href="../dist/domma/domma.css">
+  <link rel="stylesheet" href="../dist/domma/grid.css">
+  <link rel="stylesheet" href="../dist/domma/elements.css">
+  <link rel="stylesheet" href="../dist/domma/themes/domma-themes.css">
 
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../css/custom.css">
@@ -149,8 +149,11 @@
 <!-- Footer -->
 <footer class="page-footer"></footer>
 
+<!-- Security: DOMPurify for XSS protection -->
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js"></script>
+
 <!-- Domma JavaScript -->
-<script src="../dist/domma.min.js"></script>
+<script src="../dist/domma/domma.min.js"></script>
 
 <!-- Global App Initialization -->
 <script src="../js/app.js"></script>

package/templates/kickstart/frontend/pages/privacy/index.html

@@ -265,8 +265,11 @@
 <!-- Footer -->
 <footer class="page-footer"></footer>
 
+<!-- Security: DOMPurify for XSS protection -->
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js"></script>
+
 <!-- Domma JavaScript -->
-<script src="../../dist/domma.min.js"></script>
+<script src="../../dist/domma/domma.min.js"></script>
 
 <!-- Global App Initialization -->
 <script src="../../js/app.js"></script>

package/templates/kickstart/frontend/pages/terms/index.html

@@ -6,10 +6,10 @@
   <title>Terms of Service - {{projectName}}</title>
 
   <!-- Domma CSS -->
-  <link rel="stylesheet" href="../../dist/domma.css">
-  <link rel="stylesheet" href="../../dist/grid.css">
-  <link rel="stylesheet" href="../../dist/elements.css">
-  <link rel="stylesheet" href="../../dist/themes/domma-themes.css">
+  <link rel="stylesheet" href="../../dist/domma/domma.css">
+  <link rel="stylesheet" href="../../dist/domma/grid.css">
+  <link rel="stylesheet" href="../../dist/domma/elements.css">
+  <link rel="stylesheet" href="../../dist/domma/themes/domma-themes.css">
 
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
@@ -357,8 +357,11 @@
 <!-- Footer -->
 <footer class="page-footer"></footer>
 
+<!-- Security: DOMPurify for XSS protection -->
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js"></script>
+
 <!-- Domma JavaScript -->
-<script src="../../dist/domma.min.js"></script>
+<script src="../../dist/domma/domma.min.js"></script>
 
 <!-- Global App Initialization -->
 <script src="../../js/app.js"></script>

package/templates/page-template/page.html

@@ -6,10 +6,10 @@
   <title>{{pageTitle}} - My Project</title>
 
   <!-- Domma CSS -->
-  <link rel="stylesheet" href="../../dist/domma.css">
-  <link rel="stylesheet" href="../../dist/grid.css">
-  <link rel="stylesheet" href="../../dist/elements.css">
-  <link rel="stylesheet" href="../../dist/themes/domma-themes.css">
+  <link rel="stylesheet" href="../../dist/domma/domma.css">
+  <link rel="stylesheet" href="../../dist/domma/grid.css">
+  <link rel="stylesheet" href="../../dist/domma/elements.css">
+  <link rel="stylesheet" href="../../dist/domma/themes/domma-themes.css">
 
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
@@ -39,8 +39,11 @@
 <!-- Footer -->
 <footer class="page-footer"></footer>
 
+<!-- Security: DOMPurify for XSS protection -->
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js"></script>
+
 <!-- Domma JavaScript -->
-<script src="../../dist/domma.min.js"></script>
+<script src="../../dist/domma/domma.min.js"></script>
 
 <!-- Global App Initialization -->
 <script src="../../js/app.js"></script>