roki-app 0.0.0-stage → 1.0.0

package/bin.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const targetDir = process.cwd();
+const templateDir = path.join(__dirname, 'template');
+
+console.log('🚀 Initializing a new Roki project...');
+
+// Copy everything from template/ directly into the user's project folder
+if (fs.existsSync(templateDir)) {
+  const files = fs.readdirSync(templateDir);
+  for (const file of files) {
+    const srcPath = path.join(templateDir, file);
+    const destPath = path.join(targetDir, file);
+
+    if (!fs.existsSync(destPath)) {
+      fs.copyFileSync(srcPath, destPath);
+      console.log(`✔ Created ${file}`);
+    }
+  }
+} else {
+  console.error('❌ Error: Template directory not found!');
+}
+
+console.log('\n🎉 Roki project initialized successfully!');
+console.log('Run:\n  npm install\n  npm start');

package/package.json

@@ -1,6 +1,11 @@
 {
   "name": "roki-app",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "node main.js"
+  },
+  "dependencies": {
+    "@ogui/roki": "^1.0.0"
+  }
+}

package/template/main.js

@@ -0,0 +1,285 @@
+import fs from 'fs';
+import path from 'path';
+import express from 'express';
+
+const app = express();
+const PORT = 8000;
+
+// --- 1. Widget & Stack Primitive ---
+class Widget {
+  constructor(type) {
+    this.widgetType = type;
+    this._name = '';
+    this._text = '';
+    this._headerType = 1;
+    this._onClickFunc = null;
+    this._params = [];
+  }
+
+  name(val) {
+    this._name = val;
+    return this;
+  }
+
+  text(val) {
+    this._text = val;
+    return this;
+  }
+
+  type(val) {
+    this._headerType = parseInt(val, 10) || 1;
+    return this;
+  }
+
+  onclick(funcRef) {
+    // Automatically extract the function name string whether passed as a reference or a string
+    this._onClickFunc = typeof funcRef === 'function' ? funcRef.name : funcRef;
+    return this;
+  }
+
+  params(...args) {
+    this._params = args;
+    return this;
+  }
+
+  render() {
+    if (this.widgetType === 'Header') {
+      const tag = `h${Math.min(Math.max(this._headerType, 1), 6)}`;
+      return `<${tag} data-name="${this._name}" style="margin: 8px 0; color: #111;">${this._text}</${tag}>`;
+    } else if (this.widgetType === 'Label') {
+      return `<span data-name="${this._name}" style="font-size: 16px; color: #555; display: block; margin-top: 6px;">${this._text}</span>`;
+    } else if (this.widgetType === 'Button') {
+      let actionUrl = '?';
+      if (this._onClickFunc) {
+        actionUrl += `action=${this._onClickFunc}`;
+      }
+      
+      if (this._params.length > 0) {
+        this._params.forEach((param, index) => {
+          actionUrl += `&arg${index}=${encodeURIComponent(param)}`;
+        });
+      }
+
+      return `<a href="${actionUrl}" data-name="${this._name}" style="display: inline-block; margin-top: 12px; padding: 10px 18px; background-color: #0066cc; color: white; text-decoration: none; border-radius: 6px; font-weight: 500; font-size: 14px;">${this._text}</a>`;
+    }
+    return `<div data-name="${this._name}">${this._text}</div>`;
+  }
+}
+
+class WidgetStack {
+  constructor() {
+    this.stack = [];
+  }
+
+  add(type) {
+    const widget = new Widget(type);
+    this.stack.push(widget);
+    return widget;
+  }
+}
+
+// --- 2. Screen Context ---
+class Screen {
+  constructor(title, varName) {
+    this.title = title;
+    this.varName = varName;
+    this.pageRoute = '';
+    this.widgetStack = new WidgetStack();
+    this.renderedHTML = '';
+  }
+
+  selectpage(route) {
+    this.pageRoute = route.startsWith('/') ? route : `/${route}`;
+    return this;
+  }
+
+  get widgets() {
+    return {
+      add: (type) => this.widgetStack.add(type)
+    };
+  }
+
+  updatewidgets() {
+    let elements = '';
+
+    for (const widget of this.widgetStack.stack) {
+      elements += widget.render() + '\n';
+    }
+
+    this.renderedHTML = `
+      <div style="font-family: system-ui, sans-serif; padding: 24px; border: 1px solid #ddd; border-radius: 8px; max-width: 400px; margin: 40px auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1); background: white;">
+        <div style="font-size: 14px; font-weight: 500; color: #666; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 6px;">
+          ${this.title}
+        </div>
+        ${elements}
+      </div>
+    `;
+  }
+
+  show() {
+    return this.renderedHTML;
+  }
+}
+
+// --- Helper: Screen Resolver ---
+function resolveScreen(identifier, screensByVar, screenOrder) {
+  if (screensByVar[identifier]) return screensByVar[identifier];
+  const cleanRoute = identifier.startsWith('/') ? identifier : `/${identifier}`;
+  for (const s of screenOrder) {
+    if (s.pageRoute === cleanRoute) return s;
+  }
+  for (const s of screenOrder) {
+    if (s.title.toLowerCase() === identifier.toLowerCase()) return s;
+  }
+  return null;
+}
+
+// --- 3. Line-by-Line Interpreter ---
+function runRoki(code, requestedPath, queryParams = {}) {
+  const screensByVar = {};
+  const screenOrder = [];
+  const functions = {};
+  
+  const rawLines = code.split('\n').map((l) => l.trim());
+  const lines = [];
+
+  // Pass 1: Parse custom functions
+  let i = 0;
+  while (i < rawLines.length) {
+    const line = rawLines[i];
+    if (line.startsWith('createfunc')) {
+      const match = line.match(/^createfunc\s+(\w+)\(([^)]*)\)\s+do/);
+      if (match) {
+        const [, funcName] = match;
+        const body = [];
+        i++;
+        while (i < rawLines.length && rawLines[i] !== 'end') {
+          if (rawLines[i] && !rawLines[i].startsWith('#')) body.push(rawLines[i]);
+          i++;
+        }
+        functions[funcName] = (...passedArgs) => {
+          console.log(`[Roki Function Executed -> ${funcName}]`, passedArgs);
+          for (const bodyLine of body) {
+            if (bodyLine.startsWith('gotoscreen ') || bodyLine.startsWith('show ')) {
+              const target = bodyLine.replace(/^(gotoscreen|show)\s+/, '').replace(/"/g, '').trim();
+              const targetScreen = resolveScreen(target, screensByVar, screenOrder);
+              if (targetScreen) return targetScreen.show();
+            }
+          }
+        };
+      }
+    } else if (line) {
+      lines.push(line);
+    }
+    i++;
+  }
+
+  // Pass 2: Execute standard layout commands
+  for (const line of lines) {
+    if (line.startsWith('createscreen')) {
+      const match = line.match(/^createscreen\s+"([^"]+)"\s+as\s+(\w+)/);
+      if (match) {
+        const [, title, varName] = match;
+        const screen = new Screen(title, varName);
+        screensByVar[varName] = screen;
+        screenOrder.push(screen);
+      }
+    } else if (line.includes('.selectpage(')) {
+      const match = line.match(/^(\w+)\.selectpage\("([^"]+)"\)/);
+      if (match) {
+        const [, varName, route] = match;
+        if (screensByVar[varName]) {
+          screensByVar[varName].selectpage(route);
+        }
+      }
+    } else if (line.endsWith('.updatewidgets')) {
+      const varName = line.split('.')[0];
+      if (screensByVar[varName]) screensByVar[varName].updatewidgets();
+    } else if (line.includes('.widgets/add')) {
+      const parts = line.split('.widgets/add');
+      const varName = parts[0];
+      const chain = '.add' + parts[1];
+
+      if (screensByVar[varName]) {
+        const evalContext = { ...functions, screen: screensByVar[varName] };
+        const keys = Object.keys(evalContext);
+        const values = Object.values(evalContext);
+        
+        new Function(...keys, `screen.widgets${chain}`)(...values);
+      }
+    }
+  }
+
+  // If a button action callback query was triggered, execute it!
+  if (queryParams.action && functions[queryParams.action]) {
+    const fnArgs = [];
+    let argIdx = 0;
+    while (queryParams[`arg${argIdx}`] !== undefined) {
+      fnArgs.push(queryParams[`arg${argIdx}`]);
+      argIdx++;
+    }
+    const resultHtml = functions[queryParams.action](...fnArgs);
+    if (resultHtml) return resultHtml;
+  }
+
+  let matchedScreen = null;
+
+  for (const screen of screenOrder) {
+    if (screen.pageRoute && screen.pageRoute === requestedPath) {
+      matchedScreen = screen;
+      break;
+    }
+  }
+
+  if (!matchedScreen) {
+    const cleanPath = requestedPath.replace(/^\//, '');
+    if (screensByVar[cleanPath]) {
+      matchedScreen = screensByVar[cleanPath];
+    }
+  }
+
+  if (!matchedScreen && requestedPath === '/' && screenOrder.length > 0) {
+    matchedScreen = screenOrder[0];
+  }
+
+  if (matchedScreen) {
+    return matchedScreen.show();
+  }
+
+  return `
+    <div style="font-family: system-ui, sans-serif; text-align: center; margin-top: 100px;">
+      <h1>404 - Screen Not Found</h1>
+      <p>No screen assigned to path <code>${requestedPath}</code></p>
+      <a href="/" style="color: #0066cc;">Return Home</a>
+    </div>
+  `;
+}
+
+// --- 4. Catch-All Route ---
+app.get('*', (req, res) => {
+  const scriptPath = path.resolve('main.ruk');
+
+  if (fs.existsSync(scriptPath)) {
+    const rukCode = fs.readFileSync(scriptPath, 'utf-8');
+    const htmlBody = runRoki(rukCode, req.path, req.query);
+
+    res.send(`
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <title>Roki Engine</title>
+      </head>
+      <body style="background-color: #f9f9f9; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;">
+        ${htmlBody}
+      </body>
+      </html>
+    `);
+  } else {
+    res.status(404).send('Could not find main.ruk file!');
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`Roki engine active at http://localhost:${PORT}`);
+});

package/template/main.ruk

@@ -0,0 +1,4 @@
+createscreen "Example" as my
+my.widgets/add("Header").name("HEADER").type(1).text("ROKI THING")
+my.updatewidgets
+show my

package/template/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "roki-app",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "roki"
+  },
+  "dependencies": {
+    "roki": "latest"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.