@qt-test/apex-dsl-compiler 0.1.0

package/README.md

@@ -0,0 +1,272 @@
+# @interswitch/apex-compiler
+
+> AXML/ACSS compiler for APEX mini-app platform
+
+This package compiles APEX DSL (AXML templates and ACSS styles) into JavaScript code that works with the APEX runtime.
+
+## Installation
+
+```bash
+npm install @interswitch/apex-compiler
+```
+
+## Usage
+
+### Programmatic API
+
+```javascript
+import { compile, compileAXML, compileACSS } from '@interswitch/apex-compiler';
+
+// Compile a complete page/component
+const result = compile({
+  axml: '<view class="container"><text>{{message}}</text></view>',
+  acss: '.container { padding: 20rpx; }',
+  json: { component: true }
+});
+
+console.log(result.code);
+console.log(result.styles);
+
+// Compile AXML only
+const template = compileAXML('<view a:for="{{items}}">{{item}}</view>');
+console.log(template.render);
+
+// Compile ACSS only
+const styles = compileACSS('.btn { width: 200rpx; color: #333; }');
+console.log(styles.css);
+```
+
+### CLI
+
+```bash
+# Compile a single file
+apexc compile pages/index/index.axml -o dist/
+
+# Compile a directory
+apexc compile src/ -o dist/
+
+# Watch mode
+apexc compile src/ -o dist/ --watch
+```
+
+## AXML Syntax
+
+### Basic Elements
+
+```xml
+<!-- View container -->
+<view class="container">
+  <text>Hello World</text>
+</view>
+
+<!-- Data binding -->
+<text>{{message}}</text>
+<view class="item-{{index}}">{{item.name}}</view>
+
+<!-- Attribute binding -->
+<image src="{{imageUrl}}" mode="aspectFit" />
+```
+
+### Directives
+
+```xml
+<!-- Conditional rendering -->
+<view a:if="{{condition}}">Shown if true</view>
+<view a:elif="{{other}}">Else if</view>
+<view a:else>Else</view>
+
+<!-- List rendering -->
+<view a:for="{{items}}" a:for-item="item" a:for-index="idx">
+  {{idx}}: {{item.name}}
+</view>
+
+<!-- Key for optimization -->
+<view a:for="{{items}}" a:key="id">{{item.name}}</view>
+```
+
+### Event Binding
+
+```xml
+<!-- Tap event -->
+<button bindtap="handleTap">Click me</button>
+
+<!-- With event object -->
+<input bindinput="handleInput" />
+
+<!-- Catch (stop propagation) -->
+<view catchtap="handleTap">Won't bubble</view>
+
+<!-- Pass data -->
+<button bindtap="handleTap" data-id="{{item.id}}">{{item.name}}</button>
+```
+
+### Built-in Components
+
+```xml
+<!-- View -->
+<view class="container" style="padding: 10px;">Content</view>
+
+<!-- Text -->
+<text selectable="{{true}}">Selectable text</text>
+
+<!-- Image -->
+<image src="/images/logo.png" mode="aspectFit" lazy-load />
+
+<!-- Button -->
+<button type="primary" loading="{{isLoading}}">Submit</button>
+
+<!-- Input -->
+<input type="text" placeholder="Enter name" value="{{name}}" bindinput="onInput" />
+
+<!-- Scroll View -->
+<scroll-view scroll-y style="height: 300px;">
+  <view a:for="{{items}}">{{item}}</view>
+</scroll-view>
+
+<!-- Swiper -->
+<swiper autoplay circular>
+  <swiper-item a:for="{{banners}}">
+    <image src="{{item.url}}" />
+  </swiper-item>
+</swiper>
+```
+
+### Templates & Slots
+
+```xml
+<!-- Define template -->
+<template name="userCard">
+  <view class="card">
+    <text>{{name}}</text>
+    <text>{{age}}</text>
+  </view>
+</template>
+
+<!-- Use template -->
+<template is="userCard" data="{{...user}}" />
+
+<!-- Slots in components -->
+<my-component>
+  <view slot="header">Header content</view>
+  <view>Default slot content</view>
+  <view slot="footer">Footer content</view>
+</my-component>
+```
+
+## ACSS Syntax
+
+ACSS is CSS with extensions for mini-app development.
+
+### RPX Units
+
+```css
+/* rpx = responsive pixel, auto-scales with screen width */
+/* 750rpx = full screen width on any device */
+.container {
+  width: 750rpx;
+  padding: 20rpx;
+  font-size: 28rpx;
+}
+```
+
+### Standard CSS
+
+```css
+.button {
+  background-color: #1890ff;
+  color: white;
+  border-radius: 8rpx;
+  padding: 16rpx 32rpx;
+}
+
+.button:active {
+  opacity: 0.8;
+}
+```
+
+### Import
+
+```css
+@import './common.acss';
+@import '/styles/theme.acss';
+```
+
+### Variables (CSS Custom Properties)
+
+```css
+:root {
+  --primary-color: #1890ff;
+  --text-color: #333;
+}
+
+.button {
+  background: var(--primary-color);
+  color: var(--text-color);
+}
+```
+
+## Compiler Output
+
+### Input
+
+```xml
+<!-- index.axml -->
+<view class="page">
+  <text class="title">{{title}}</text>
+  <button bindtap="handleClick">Click</button>
+</view>
+```
+
+### Output (simplified)
+
+```javascript
+export function render(_ctx) {
+  return h('view', { class: 'page' }, [
+    h('text', { class: 'title' }, [_ctx.title]),
+    h('button', { bindtap: _ctx.handleClick }, ['Click'])
+  ]);
+}
+```
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    Source Files                          │
+│         (.axml, .acss, .json, .js)                      │
+└─────────────────────────────────────────────────────────┘
+                          │
+                          ▼
+┌─────────────────────────────────────────────────────────┐
+│                      Lexer                               │
+│            (Tokenize source code)                        │
+└─────────────────────────────────────────────────────────┘
+                          │
+                          ▼
+┌─────────────────────────────────────────────────────────┐
+│                      Parser                              │
+│         (Build Abstract Syntax Tree)                     │
+└─────────────────────────────────────────────────────────┘
+                          │
+                          ▼
+┌─────────────────────────────────────────────────────────┐
+│                    Transformer                           │
+│    (Optimize, validate, transform AST)                   │
+└─────────────────────────────────────────────────────────┘
+                          │
+                          ▼
+┌─────────────────────────────────────────────────────────┐
+│                   Code Generator                         │
+│          (Generate JavaScript output)                    │
+└─────────────────────────────────────────────────────────┘
+                          │
+                          ▼
+┌─────────────────────────────────────────────────────────┐
+│                    Output Files                          │
+│            (.js, .css, .json)                           │
+└─────────────────────────────────────────────────────────┘
+```
+
+## License
+
+MIT

package/bin/apexc.js

@@ -0,0 +1,308 @@
+#!/usr/bin/env node
+
+/**
+ * APEX Compiler CLI
+ *
+ * Compiles AXML/ACSS files into JavaScript
+ *
+ * Usage:
+ *   apexc <input> [options]
+ *   apexc src/pages/index --outDir dist
+ *   apexc src/components/button -o dist/button.js
+ *
+ * Options:
+ *   -o, --output <file>     Output file
+ *   --outDir <dir>          Output directory
+ *   -w, --watch             Watch mode
+ *   -m, --minify            Minify output
+ *   --sourcemap             Generate source maps
+ *   --target <target>       Target ES version (es2015, es2020, esnext)
+ *   --component             Compile as component (default: auto-detect)
+ *   --page                  Compile as page
+ *   -h, --help              Show help
+ *   -v, --version           Show version
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Parse arguments
+const args = process.argv.slice(2);
+const options = {
+  input: null,
+  output: null,
+  outDir: null,
+  watch: false,
+  minify: false,
+  sourcemap: false,
+  target: 'es2020',
+  isComponent: null,
+};
+
+let i = 0;
+while (i < args.length) {
+  const arg = args[i];
+
+  switch (arg) {
+    case '-o':
+    case '--output':
+      options.output = args[++i];
+      break;
+
+    case '--outDir':
+      options.outDir = args[++i];
+      break;
+
+    case '-w':
+    case '--watch':
+      options.watch = true;
+      break;
+
+    case '-m':
+    case '--minify':
+      options.minify = true;
+      break;
+
+    case '--sourcemap':
+      options.sourcemap = true;
+      break;
+
+    case '--target':
+      options.target = args[++i];
+      break;
+
+    case '--component':
+      options.isComponent = true;
+      break;
+
+    case '--page':
+      options.isComponent = false;
+      break;
+
+    case '-h':
+    case '--help':
+      showHelp();
+      process.exit(0);
+
+    case '-v':
+    case '--version':
+      showVersion();
+      process.exit(0);
+
+    default:
+      if (arg.startsWith('-')) {
+        console.error(`Unknown option: ${arg}`);
+        process.exit(1);
+      }
+      options.input = arg;
+  }
+
+  i++;
+}
+
+function showHelp() {
+  console.log(`
+APEX Compiler - Compiles AXML/ACSS to JavaScript
+
+Usage:
+  apexc <input> [options]
+
+Examples:
+  apexc src/pages/index --outDir dist
+  apexc src/components/button -o dist/button.js
+  apexc src/pages/home -m --sourcemap
+
+Arguments:
+  <input>                   Input file or directory (without extension)
+                           Will look for .axml, .acss, .json, .js files
+
+Options:
+  -o, --output <file>      Output file path
+  --outDir <dir>           Output directory (preserves structure)
+  -w, --watch              Watch files for changes
+  -m, --minify             Minify the output
+  --sourcemap              Generate source maps
+  --target <version>       Target ES version: es2015, es2020, esnext (default: es2020)
+  --component              Force compilation as component
+  --page                   Force compilation as page
+  -h, --help               Show this help message
+  -v, --version            Show version number
+
+File Resolution:
+  Given input "src/pages/index", the compiler looks for:
+    - src/pages/index.axml  (template)
+    - src/pages/index.acss  (styles)
+    - src/pages/index.json  (config)
+    - src/pages/index.js    (logic)
+
+  At minimum, one of .axml or .js must exist.
+`);
+}
+
+function showVersion() {
+  try {
+    const pkg = require('../package.json');
+    console.log(`apexc version ${pkg.version}`);
+  } catch {
+    console.log('apexc version 0.1.0');
+  }
+}
+
+async function main() {
+  if (!options.input) {
+    console.error('Error: No input file specified');
+    console.error('Run "apexc --help" for usage information');
+    process.exit(1);
+  }
+
+  // Resolve input path
+  const inputBase = path.resolve(options.input);
+  const inputDir = path.dirname(inputBase);
+  const inputName = path.basename(inputBase, path.extname(inputBase));
+
+  // Find input files
+  const files = {
+    axml: findFile(inputDir, inputName, '.axml'),
+    acss: findFile(inputDir, inputName, '.acss'),
+    json: findFile(inputDir, inputName, '.json'),
+    js: findFile(inputDir, inputName, '.js'),
+  };
+
+  if (!files.axml && !files.js) {
+    console.error(`Error: No .axml or .js file found for "${options.input}"`);
+    process.exit(1);
+  }
+
+  // Load the compiler
+  let compile;
+  try {
+    const compiler = require('../dist/index.js');
+    compile = compiler.compile;
+  } catch (e) {
+    console.error('Error: Compiler not built. Run "npm run build" first.');
+    console.error(e.message);
+    process.exit(1);
+  }
+
+  // Compile function
+  async function compileFiles() {
+    const startTime = Date.now();
+
+    // Read input files
+    const sources = {
+      axml: files.axml ? fs.readFileSync(files.axml, 'utf-8') : undefined,
+      acss: files.acss ? fs.readFileSync(files.acss, 'utf-8') : undefined,
+      json: files.json ? fs.readFileSync(files.json, 'utf-8') : undefined,
+      js: files.js ? fs.readFileSync(files.js, 'utf-8') : undefined,
+    };
+
+    // Determine if component
+    let isComponent = options.isComponent;
+    if (isComponent === null && sources.json) {
+      try {
+        const config = JSON.parse(sources.json);
+        isComponent = config.component === true;
+      } catch {
+        isComponent = false;
+      }
+    }
+    isComponent = isComponent ?? false;
+
+    // Compile
+    const result = compile({
+      axml: sources.axml,
+      acss: sources.acss,
+      json: sources.json,
+      js: sources.js,
+      filename: inputName,
+      sourceMap: options.sourcemap,
+      minify: options.minify,
+      target: options.target,
+      isComponent,
+    });
+
+    // Report errors
+    if (result.errors.length > 0) {
+      console.error('Compilation errors:');
+      for (const error of result.errors) {
+        console.error(`  [${error.code}] ${error.message}`);
+      }
+      return false;
+    }
+
+    // Report warnings
+    if (result.warnings.length > 0) {
+      console.warn('Warnings:');
+      for (const warning of result.warnings) {
+        console.warn(`  ${warning.message}`);
+      }
+    }
+
+    // Determine output path
+    let outputPath;
+    if (options.output) {
+      outputPath = path.resolve(options.output);
+    } else if (options.outDir) {
+      const relPath = path.relative(process.cwd(), inputBase);
+      outputPath = path.join(options.outDir, relPath + '.js');
+    } else {
+      outputPath = inputBase + '.compiled.js';
+    }
+
+    // Ensure output directory exists
+    const outputDir = path.dirname(outputPath);
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+
+    // Write output
+    let output = result.code;
+    if (options.sourcemap && result.map) {
+      const mapPath = outputPath + '.map';
+      fs.writeFileSync(mapPath, JSON.stringify(result.map, null, 2));
+      output += `\n//# sourceMappingURL=${path.basename(mapPath)}`;
+    }
+    fs.writeFileSync(outputPath, output);
+
+    // Write CSS if present
+    if (result.css) {
+      const cssPath = outputPath.replace(/\.js$/, '.css');
+      fs.writeFileSync(cssPath, result.css);
+    }
+
+    const elapsed = Date.now() - startTime;
+    console.log(`Compiled ${inputName} -> ${path.relative(process.cwd(), outputPath)} (${elapsed}ms)`);
+
+    return true;
+  }
+
+  // Initial compile
+  const success = await compileFiles();
+
+  // Watch mode
+  if (options.watch) {
+    console.log('\nWatching for changes...');
+
+    const watchFiles = Object.values(files).filter(Boolean);
+    for (const file of watchFiles) {
+      fs.watch(file, { persistent: true }, async (eventType) => {
+        if (eventType === 'change') {
+          console.log(`\nFile changed: ${path.basename(file)}`);
+          await compileFiles();
+        }
+      });
+    }
+  } else if (!success) {
+    process.exit(1);
+  }
+}
+
+function findFile(dir, name, ext) {
+  const filePath = path.join(dir, name + ext);
+  return fs.existsSync(filePath) ? filePath : null;
+}
+
+main().catch((error) => {
+  console.error('Fatal error:', error.message);
+  process.exit(1);
+});

package/dist/acss/index.d.mts

@@ -0,0 +1,67 @@
+import { h as ACSSStylesheet } from '../ast-DEVgojMx.mjs';
+export { A as ACSSDeclaration, a as ACSSImport, b as ACSSKeyframe, c as ACSSKeyframesRule, d as ACSSMediaRule, e as ACSSRule, f as ACSSSelector, g as ACSSStyleRule } from '../ast-DEVgojMx.mjs';
+
+/**
+ * ACSS Parser
+ *
+ * Tokenizes and parses ACSS stylesheets into an AST
+ */
+
+/**
+ * Parses ACSS source into an AST
+ */
+declare function parseACSS(source: string): {
+    ast: ACSSStylesheet;
+    errors: string[];
+};
+
+/**
+ * ACSS Compiler
+ *
+ * Transforms ACSS AST into optimized CSS
+ */
+
+/**
+ * Compile options
+ */
+interface ACSSCompileOptions {
+    /** Source filename for error reporting */
+    filename?: string;
+    /** Minify output */
+    minify?: boolean;
+    /** Add vendor prefixes */
+    autoprefixer?: boolean;
+    /** Scope styles to component */
+    scoped?: boolean;
+    /** Scope ID for scoped styles */
+    scopeId?: string;
+    /** Enable rpx to rem conversion */
+    rpxToRem?: boolean;
+    /** Base font size for rpx conversion (default: 16) */
+    baseFontSize?: number;
+    /** Design width for rpx (default: 750) */
+    designWidth?: number;
+}
+/**
+ * Compile result
+ */
+interface ACSSCompileResult {
+    /** Generated CSS */
+    css: string;
+    /** The AST (for debugging/tooling) */
+    ast: ACSSStylesheet;
+    /** Compilation warnings */
+    warnings: string[];
+    /** Compilation errors */
+    errors: string[];
+    /** Import paths */
+    imports: string[];
+    /** Used animations */
+    animations: Set<string>;
+}
+/**
+ * Compiles ACSS source into CSS
+ */
+declare function compileACSS(source: string, options?: ACSSCompileOptions): ACSSCompileResult;
+
+export { type ACSSCompileOptions, type ACSSCompileResult, ACSSStylesheet, compileACSS, parseACSS };

package/dist/acss/index.d.ts

@@ -0,0 +1,67 @@
+import { h as ACSSStylesheet } from '../ast-DEVgojMx.js';
+export { A as ACSSDeclaration, a as ACSSImport, b as ACSSKeyframe, c as ACSSKeyframesRule, d as ACSSMediaRule, e as ACSSRule, f as ACSSSelector, g as ACSSStyleRule } from '../ast-DEVgojMx.js';
+
+/**
+ * ACSS Parser
+ *
+ * Tokenizes and parses ACSS stylesheets into an AST
+ */
+
+/**
+ * Parses ACSS source into an AST
+ */
+declare function parseACSS(source: string): {
+    ast: ACSSStylesheet;
+    errors: string[];
+};
+
+/**
+ * ACSS Compiler
+ *
+ * Transforms ACSS AST into optimized CSS
+ */
+
+/**
+ * Compile options
+ */
+interface ACSSCompileOptions {
+    /** Source filename for error reporting */
+    filename?: string;
+    /** Minify output */
+    minify?: boolean;
+    /** Add vendor prefixes */
+    autoprefixer?: boolean;
+    /** Scope styles to component */
+    scoped?: boolean;
+    /** Scope ID for scoped styles */
+    scopeId?: string;
+    /** Enable rpx to rem conversion */
+    rpxToRem?: boolean;
+    /** Base font size for rpx conversion (default: 16) */
+    baseFontSize?: number;
+    /** Design width for rpx (default: 750) */
+    designWidth?: number;
+}
+/**
+ * Compile result
+ */
+interface ACSSCompileResult {
+    /** Generated CSS */
+    css: string;
+    /** The AST (for debugging/tooling) */
+    ast: ACSSStylesheet;
+    /** Compilation warnings */
+    warnings: string[];
+    /** Compilation errors */
+    errors: string[];
+    /** Import paths */
+    imports: string[];
+    /** Used animations */
+    animations: Set<string>;
+}
+/**
+ * Compiles ACSS source into CSS
+ */
+declare function compileACSS(source: string, options?: ACSSCompileOptions): ACSSCompileResult;
+
+export { type ACSSCompileOptions, type ACSSCompileResult, ACSSStylesheet, compileACSS, parseACSS };