@openwebf/webf 0.1.0

package/src/logger.ts

@@ -0,0 +1,114 @@
+// Simplified logger without chalk dependency for now
+
+export enum LogLevel {
+  DEBUG = 0,
+  INFO = 1,
+  WARN = 2,
+  ERROR = 3,
+  SILENT = 4
+}
+
+class Logger {
+  private logLevel: LogLevel = LogLevel.INFO;
+  private debugMode: boolean = false;
+  
+  constructor() {
+    // Check for debug environment variable
+    this.debugMode = process.env.WEBF_DEBUG === 'true' || process.env.DEBUG === 'true';
+    if (this.debugMode) {
+      this.logLevel = LogLevel.DEBUG;
+    }
+  }
+  
+  setLogLevel(level: LogLevel) {
+    this.logLevel = level;
+  }
+  
+  debug(message: string, ...args: any[]) {
+    if (this.logLevel <= LogLevel.DEBUG) {
+      console.log(`[DEBUG] ${message}`, ...args);
+    }
+  }
+  
+  info(message: string, ...args: any[]) {
+    if (this.logLevel <= LogLevel.INFO) {
+      console.log(`ℹ ${message}`, ...args);
+    }
+  }
+  
+  success(message: string, ...args: any[]) {
+    if (this.logLevel <= LogLevel.INFO) {
+      console.log(`✓ ${message}`, ...args);
+    }
+  }
+  
+  warn(message: string, ...args: any[]) {
+    if (this.logLevel <= LogLevel.WARN) {
+      console.warn(`⚠ ${message}`, ...args);
+    }
+  }
+  
+  error(message: string, error?: Error | unknown) {
+    if (this.logLevel <= LogLevel.ERROR) {
+      console.error(`✗ ${message}`);
+      if (error) {
+        if (error instanceof Error) {
+          console.error(error.stack || error.message);
+        } else {
+          console.error(String(error));
+        }
+      }
+    }
+  }
+  
+  group(title: string) {
+    if (this.logLevel <= LogLevel.INFO) {
+      console.log(`\n${title}`);
+      console.log('─'.repeat(title.length));
+    }
+  }
+  
+  progress(current: number, total: number, message: string) {
+    if (this.logLevel <= LogLevel.INFO) {
+      const percentage = Math.round((current / total) * 100);
+      const progressBar = this.createProgressBar(percentage);
+      process.stdout.write(`\r${progressBar} ${percentage}% - ${message}`);
+      if (current === total) {
+        process.stdout.write('\n');
+      }
+    }
+  }
+  
+  private createProgressBar(percentage: number): string {
+    const width = 20;
+    const filled = Math.round((percentage / 100) * width);
+    const empty = width - filled;
+    return `[${'█'.repeat(filled)}${'░'.repeat(empty)}]`;
+  }
+  
+  time(label: string) {
+    if (this.logLevel <= LogLevel.DEBUG) {
+      console.time(`[TIMER] ${label}`);
+    }
+  }
+  
+  timeEnd(label: string) {
+    if (this.logLevel <= LogLevel.DEBUG) {
+      console.timeEnd(`[TIMER] ${label}`);
+    }
+  }
+}
+
+// Export singleton instance
+export const logger = new Logger();
+
+// Export convenience functions
+export const debug = logger.debug.bind(logger);
+export const info = logger.info.bind(logger);
+export const success = logger.success.bind(logger);
+export const warn = logger.warn.bind(logger);
+export const error = logger.error.bind(logger);
+export const group = logger.group.bind(logger);
+export const progress = logger.progress.bind(logger);
+export const time = logger.time.bind(logger);
+export const timeEnd = logger.timeEnd.bind(logger);

package/src/react.ts

@@ -0,0 +1,186 @@
+import _ from "lodash";
+import fs from 'fs';
+import path from 'path';
+import {ParameterType} from "./analyzer";
+import {ClassObject, FunctionArgumentType, FunctionDeclaration} from "./declaration";
+import {IDLBlob} from "./IDLBlob";
+import {getPointerType, isPointerType} from "./utils";
+
+function readTemplate(name: string) {
+  return fs.readFileSync(path.join(__dirname, '../templates/' + name + '.tpl'), {encoding: 'utf-8'});
+}
+
+function generateReturnType(type: ParameterType) {
+  if (isPointerType(type)) {
+    const pointerType = getPointerType(type);
+    return pointerType;
+  }
+  if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
+    return `${getPointerType(type.value)}[]`;
+  }
+  switch (type.value) {
+    case FunctionArgumentType.int:
+    case FunctionArgumentType.double: {
+      return 'number';
+    }
+    case FunctionArgumentType.any: {
+      return 'any';
+    }
+    case FunctionArgumentType.boolean: {
+      return 'boolean';
+    }
+    case FunctionArgumentType.dom_string: {
+      return 'string';
+    }
+    case FunctionArgumentType.void:
+      return 'void';
+    default:
+      return 'void';
+  }
+}
+
+function generateEventHandlerType(type: ParameterType) {
+  if (!isPointerType(type)) {
+    throw new Error('Event type must be an instance of Event');
+  }
+  const pointerType = getPointerType(type);
+  if (pointerType === 'Event') {
+    return `EventHandler<SyntheticEvent<Element>>`;
+  }
+  if (pointerType === 'CustomEvent') {
+    return `EventHandler<SyntheticEvent<Element, CustomEvent>>`;
+  }
+  throw new Error('Unknown event type: ' + pointerType);
+}
+
+function generateMethodDeclaration(method: FunctionDeclaration) {
+  var methodName = method.name;
+  var args = method.args.map(arg => {
+    var argName = arg.name;
+    var argType = generateReturnType(arg.type);
+    return `${argName}: ${argType}`;
+  }).join(', ');
+  var returnType = generateReturnType(method.returnType);
+  return `${methodName}(${args}): ${returnType};`;
+}
+
+function toReactEventName(name: string) {
+  const eventName = 'on-' + name;
+  return _.camelCase(eventName);
+}
+
+export function generateReactComponent(blob: IDLBlob) {
+  const classObjects = blob.objects as ClassObject[];
+  const classObjectDictionary = Object.fromEntries(
+    classObjects.map(object => {
+      return [object.name, object];
+    })
+  );
+
+  const properties = classObjects.filter(object => {
+    return object.name.endsWith('Properties');
+  });
+  const events = classObjects.filter(object => {
+    return object.name.endsWith('Events');
+  });
+
+  const others = classObjects.filter(object => {
+    return !object.name.endsWith('Properties')
+      && !object.name.endsWith('Events');
+  });
+
+  const dependencies = others.map(object => {
+    const props = object.props.map(prop => {
+      if (prop.optional) {
+        return `${prop.name}?: ${generateReturnType(prop.type)};`;
+      }
+      return `${prop.name}: ${generateReturnType(prop.type)};`;
+    }).join('\n  ');
+
+    return `
+interface ${object.name} {
+  ${props}
+}`;
+  }).join('\n\n');
+
+  const componentProperties = properties.length > 0 ? properties[0] : undefined;
+  const componentEvents = events.length > 0 ? events[0] : undefined;
+  const className = (() => {
+    if (componentProperties) {
+      return componentProperties.name.replace(/Properties$/, '');
+    }
+    if (componentEvents) {
+      return componentEvents.name.replace(/Events$/, '');
+    }
+    return '';
+  })();
+
+  if (!className) {
+    return '';
+  }
+
+  // Calculate the relative path from component location to utils
+  const componentDepth = blob.relativeDir ? blob.relativeDir.split(path.sep).length : 0;
+  const utilsPath = componentDepth > 0 
+    ? '../'.repeat(componentDepth) + 'utils/createComponent'
+    : './utils/createComponent';
+
+  const content = _.template(readTemplate('react.component.tsx'))({
+    className: className,
+    properties: componentProperties,
+    events: componentEvents,
+    classObjectDictionary,
+    dependencies,
+    blob,
+    utilsPath,
+    toReactEventName,
+    generateReturnType,
+    generateMethodDeclaration,
+    generateEventHandlerType,
+  });
+
+  const result = content.split('\n').filter(str => {
+    return str.trim().length > 0;
+  }).join('\n');
+
+  return result;
+}
+
+export function generateReactIndex(blobs: IDLBlob[]) {
+  const components = blobs.map(blob => {
+    const classObjects = blob.objects as ClassObject[];
+
+    const properties = classObjects.filter(object => {
+      return object.name.endsWith('Properties');
+    });
+    const events = classObjects.filter(object => {
+      return object.name.endsWith('Events');
+    });
+
+    const componentProperties = properties.length > 0 ? properties[0] : undefined;
+    const componentEvents = events.length > 0 ? events[0] : undefined;
+    const className = (() => {
+      if (componentProperties) {
+        return componentProperties.name.replace(/Properties$/, '');
+      }
+      if (componentEvents) {
+        return componentEvents.name.replace(/Events$/, '');
+      }
+      return '';
+    })();
+    return {
+      className: className,
+      fileName: blob.filename,
+      relativeDir: blob.relativeDir,
+    }
+  }).filter(name => {
+    return name.className.length > 0;
+  });
+  const content = _.template(readTemplate('react.index.ts'))({
+    components,
+  });
+
+  return content.split('\n').filter(str => {
+    return str.trim().length > 0;
+  }).join('\n');
+}

package/src/utils.ts

@@ -0,0 +1,127 @@
+import { ParameterType } from './analyzer';
+import { FunctionArgumentType } from './declaration';
+import {IDLBlob} from './IDLBlob';
+import {camelCase, snakeCase} from 'lodash';
+
+export function addIndent(str: string, space: number) {
+  if (!str) return str;
+  let lines = str.split('\n');
+  lines = lines.map(l => {
+    for (let i = 0; i < space; i ++) {
+      l = ' ' + l;
+    }
+    return l;
+  });
+  return lines.join('\n');
+}
+
+export function getClassName(blob: IDLBlob) {
+  let raw = camelCase(blob.filename);
+  if (raw.slice(0, 3) == 'dom') {
+    if (raw === 'domMatrixReadonly') {
+      return `DOMMatrixReadOnly`;
+    } else if (raw === 'domPointReadonly') {
+      return `DOMPointReadOnly`;
+    }
+    return 'DOM' + raw.slice(3);
+  }
+  if (raw.slice(0, 4) == 'html') {
+    // Legacy support names.
+    if (raw === 'htmlIframeElement') {
+      return `HTMLIFrameElement`;
+    }
+    return 'HTML' + raw.slice(4);
+  }
+  if (raw.slice(0, 6) == 'svgSvg') {
+    // special for SVGSVGElement
+    return 'SVGSVG' + raw.slice(6)
+  }
+  if (raw.slice(0, 3) == 'svg') {
+    return 'SVG' + raw.slice(3)
+  }
+  if (raw.slice(0, 3) == 'css') {
+    return 'CSS' + raw.slice(3);
+  }
+  if (raw.slice(0, 2) == 'ui') {
+    return 'UI' + raw.slice(2);
+  }
+
+  if (raw == 'webfTouchAreaElement') {
+    return 'WebFTouchAreaElement';
+  }
+  if (raw == 'webfRouterLinkElement') {
+    return 'WebFRouterLinkElement';
+  }
+
+  return `${raw[0].toUpperCase() + raw.slice(1)}`;
+}
+
+export function getWrapperTypeInfoNameOfClassName(className: string) {
+  if (className.slice(0, 6) === 'SVGSVG') {
+    // special for SVGSVGElement
+    className = `SVGSvg${className.slice(6)}`
+  } else if (className === 'SVGGElement') {
+    // TODO: use more better way
+    className = `SVG_G_Element`
+  }
+
+  return snakeCase(className).toUpperCase()
+}
+
+export function getMethodName(name: string) {
+  if (!name || name.length === 0) return '';
+  return name[0].toUpperCase() + name.slice(1);
+}
+
+export function trimNullTypeFromType(type: ParameterType): ParameterType {
+  let types = type.value;
+  if (!Array.isArray(types)) return type;
+  let trimed = types.filter(t => t.value != FunctionArgumentType.null);
+
+  if (trimed.length === 1) {
+    return {
+      isArray: false,
+      value: trimed[0].value
+    }
+  }
+
+  return {
+    isArray: type.isArray,
+    value: trimed
+  };
+}
+
+export function isUnionType(type: ParameterType): boolean {
+  if (type.isArray || !Array.isArray(type.value)) {
+    return false;
+  }
+
+  const trimedType = trimNullTypeFromType(type);
+  return Array.isArray(trimedType.value);
+}
+
+export function isPointerType(type: ParameterType): boolean {
+  if (type.isArray) return false;
+  if (typeof type.value === 'string') {
+    return true;
+  }
+  if (Array.isArray(type.value)) {
+    return type.value.some(t => typeof t.value === 'string');
+  }
+  return false;
+}
+
+export function getPointerType(type: ParameterType): string {
+  if (typeof type.value === 'string') {
+    return type.value;
+  }
+  if (Array.isArray(type.value)) {
+    for (let i = 0; i < type.value.length; i++) {
+      let childValue = type.value[i];
+      if (typeof childValue.value === 'string') {
+        return childValue.value;
+      }
+    }
+  }
+  return '';
+}

package/src/vue.ts

@@ -0,0 +1,176 @@
+import _ from "lodash";
+import fs from 'fs';
+import path from 'path';
+import {ParameterType} from "./analyzer";
+import {ClassObject, FunctionArgumentType, FunctionDeclaration} from "./declaration";
+import {IDLBlob} from "./IDLBlob";
+import {getPointerType, isPointerType} from "./utils";
+
+function readTemplate(name: string) {
+  return fs.readFileSync(path.join(__dirname, '../templates/' + name + '.tpl'), {encoding: 'utf-8'});
+}
+
+function generateReturnType(type: ParameterType) {
+  if (isPointerType(type)) {
+    const pointerType = getPointerType(type);
+    return pointerType;
+  }
+  if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
+    return `${getPointerType(type.value)}[]`;
+  }
+  switch (type.value) {
+    case FunctionArgumentType.int:
+    case FunctionArgumentType.double: {
+      return 'number';
+    }
+    case FunctionArgumentType.any: {
+      return 'any';
+    }
+    case FunctionArgumentType.boolean: {
+      return 'boolean';
+    }
+    case FunctionArgumentType.dom_string: {
+      return 'string';
+    }
+    case FunctionArgumentType.void:
+      return 'void';
+    default:
+      return 'void';
+  }
+}
+
+function generateEventHandlerType(type: ParameterType) {
+  if (!isPointerType(type)) {
+    throw new Error('Event type must be an instance of Event');
+  }
+  const pointerType = getPointerType(type);
+  if (pointerType === 'Event') {
+    return 'Event';
+  }
+  if (pointerType === 'CustomEvent') {
+    return 'CustomEvent';
+  }
+  throw new Error('Unknown event type: ' + pointerType);
+}
+
+function generateMethodDeclaration(method: FunctionDeclaration) {
+  var methodName = method.name;
+  var args = method.args.map(arg => {
+    var argName = arg.name;
+    var argType = generateReturnType(arg.type);
+    return `${argName}: ${argType}`;
+  }).join(', ');
+  var returnType = generateReturnType(method.returnType);
+  return `${methodName}(${args}): ${returnType};`;
+}
+
+function generateVueComponent(blob: IDLBlob) {
+  const classObjects = blob.objects as ClassObject[];
+  const classObjectDictionary = Object.fromEntries(
+    classObjects.map(object => {
+      return [object.name, object];
+    })
+  );
+
+  const properties = classObjects.filter(object => {
+    return object.name.endsWith('Properties');
+  });
+  const events = classObjects.filter(object => {
+    return object.name.endsWith('Events');
+  });
+
+  const others = classObjects.filter(object => {
+    return !object.name.endsWith('Properties')
+      && !object.name.endsWith('Events');
+  });
+
+  const dependencies = others.map(object => {
+    const props = object.props.map(prop => {
+      if (prop.optional) {
+        return `${prop.name}?: ${generateReturnType(prop.type)};`;
+      }
+      return `${prop.name}: ${generateReturnType(prop.type)};`;
+    }).join('\n  ');
+
+    return `
+interface ${object.name} {
+  ${props}
+}`;
+  }).join('\n\n');
+
+  const componentProperties = properties.length > 0 ? properties[0] : undefined;
+  const componentEvents = events.length > 0 ? events[0] : undefined;
+  const className = (() => {
+    if (componentProperties) {
+      return componentProperties.name.replace(/Properties$/, '');
+    }
+    if (componentEvents) {
+      return componentEvents.name.replace(/Events$/, '');
+    }
+    return '';
+  })();
+
+  if (!className) {
+    return '';
+  }
+
+  const content = _.template(readTemplate('vue.component.partial'))({
+    className: className,
+    properties: componentProperties,
+    events: componentEvents,
+    classObjectDictionary,
+    dependencies,
+    blob,
+    generateReturnType,
+    generateMethodDeclaration,
+    generateEventHandlerType,
+  });
+
+  const result = content.split('\n').filter(str => {
+    return str.trim().length > 0;
+  }).join('\n');
+
+  return result;
+}
+
+export function generateVueTypings(blobs: IDLBlob[]) {
+  const componentNames = blobs.map(blob => {
+    const classObjects = blob.objects as ClassObject[];
+
+    const properties = classObjects.filter(object => {
+      return object.name.endsWith('Properties');
+    });
+    const events = classObjects.filter(object => {
+      return object.name.endsWith('Events');
+    });
+
+    const componentProperties = properties.length > 0 ? properties[0] : undefined;
+    const componentEvents = events.length > 0 ? events[0] : undefined;
+    const className = (() => {
+      if (componentProperties) {
+        return componentProperties.name.replace(/Properties$/, '');
+      }
+      if (componentEvents) {
+        return componentEvents.name.replace(/Events$/, '');
+      }
+      return '';
+    })();
+    return className;
+  }).filter(name => {
+    return name.length > 0;
+  });
+  const components = blobs.map(blob => {
+    return generateVueComponent(blob);
+  }).filter(component => {
+    return component.length > 0;
+  }).join('\n\n');
+
+  const content = _.template(readTemplate('vue.components.d.ts'))({
+    componentNames,
+    components,
+  });
+
+  return content.split('\n').filter(str => {
+    return str.trim().length > 0;
+  }).join('\n');
+}

package/templates/class.dart.tpl

@@ -0,0 +1,86 @@
+// AUTO GENERATED FILE, DO NOT EDIT.
+//
+// Generated by <%= command %>
+
+// ignore_for_file: avoid_unused_constructor_parameters
+// ignore_for_file: non_constant_identifier_names
+// ignore_for_file: avoid_setters_without_getters
+// ignore_for_file: implementation_imports
+// ignore_for_file: library_private_types_in_public_api
+// ignore_for_file: prefer_void_to_null
+
+import 'package:webf/webf.dart';
+
+abstract class <%= className %>Bindings extends WidgetElement {
+  <%= className %>Bindings(super.context);
+
+  <% _.forEach(properties?.props, function(prop, index) { %>
+    <% var propName = _.camelCase(prop.name); %>
+    <% if (shouldMakeNullable(prop)) { %>
+  <%= generateReturnType(prop.type) %>? get <%= propName %>;
+    <% } else { %>
+  <%= generateReturnType(prop.type) %> get <%= propName %>;
+    <% } %>
+  set <%= propName %>(value);
+  <% }); %>
+
+  <% if (properties?.props.length > 0) { %>
+  @override
+  void initializeAttributes(Map<String, ElementAttributeProperty> attributes) {
+    super.initializeAttributes(attributes);
+
+    <% _.forEach(properties?.props, function(prop, index) { %>
+      <% var attributeName = _.kebabCase(prop.name); %>
+      <% var propName = _.camelCase(prop.name); %>
+    attributes['<%= attributeName %>'] = ElementAttributeProperty(
+      getter: () => <%= propName %>.toString(),
+      setter: (value) => <%= generateAttributeSetter(propName, prop.type) %>
+    );
+    <% }); %>
+  }
+
+  static StaticDefinedBindingPropertyMap <%= _.camelCase(className) %>Properties = {
+    <% _.forEach(properties?.props, function(prop, index) { %>
+      <% var propName = _.camelCase(prop.name); %>
+
+    '<%= propName %>': StaticDefinedBindingProperty(
+      getter: (element) => castToType<<%= className %>Bindings>(element).<%= propName %>,
+      setter: (element, value) =>
+      castToType<<%= className %>Bindings>(element).<%= propName %> = value,
+    ),
+    <% }); %>
+  };
+
+  @override
+  List<StaticDefinedBindingPropertyMap> get properties => [
+    ...super.properties,
+    <%= _.camelCase(className) %>Properties,
+  ];
+  <% } %>
+
+  <% if (properties?.methods.length > 0) { %>
+
+  <% _.forEach(properties?.methods, function(method, index) { %>
+    <% var methodName = _.camelCase(method.name); %>
+  <%= generateReturnType(method.returnType) %> <%= methodName %>(List<dynamic> args);
+  <% }) %>
+
+  static StaticDefinedSyncBindingObjectMethodMap <%= _.camelCase(className) %>Methods = {
+    <% _.forEach(properties?.methods, function(method, index) { %>
+      <% var methodName = method.name; %>
+    '<%= methodName %>': StaticDefinedSyncBindingObjectMethod(
+      call: (element, args) {
+        return castToType<<%= className %>Bindings>(element).<%= methodName %>(args);
+      },
+    ),
+    <% }); %>
+  };
+
+  @override
+  List<StaticDefinedSyncBindingObjectMethodMap> get methods => [
+    ...super.methods,
+    <%= _.camelCase(className) %>Methods,
+  ];
+
+  <% } %>
+}

package/templates/gitignore.tpl

@@ -0,0 +1,2 @@
+dist/
+node_modules/