@openwebf/webf 0.22.1 → 0.22.4

package/dist/react.js

@@ -0,0 +1,283 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toWebFTagName = toWebFTagName;
+exports.generateReactComponent = generateReactComponent;
+exports.generateReactIndex = generateReactIndex;
+const lodash_1 = __importDefault(require("lodash"));
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const declaration_1 = require("./declaration");
+const utils_1 = require("./utils");
+function readTemplate(name) {
+    return fs_1.default.readFileSync(path_1.default.join(__dirname, '../templates/' + name + '.tpl'), { encoding: 'utf-8' });
+}
+function generateReturnType(type) {
+    if ((0, utils_1.isPointerType)(type)) {
+        const pointerType = (0, utils_1.getPointerType)(type);
+        return pointerType;
+    }
+    if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
+        return `${(0, utils_1.getPointerType)(type.value)}[]`;
+    }
+    switch (type.value) {
+        case declaration_1.FunctionArgumentType.int:
+        case declaration_1.FunctionArgumentType.double: {
+            return 'number';
+        }
+        case declaration_1.FunctionArgumentType.any: {
+            return 'any';
+        }
+        case declaration_1.FunctionArgumentType.boolean: {
+            return 'boolean';
+        }
+        case declaration_1.FunctionArgumentType.dom_string: {
+            return 'string';
+        }
+        case declaration_1.FunctionArgumentType.void:
+            return 'void';
+        default:
+            return 'void';
+    }
+}
+function generateEventHandlerType(type) {
+    if (!(0, utils_1.isPointerType)(type)) {
+        throw new Error('Event type must be an instance of Event');
+    }
+    const pointerType = (0, utils_1.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 getEventType(type) {
+    if (!(0, utils_1.isPointerType)(type)) {
+        return 'Event';
+    }
+    const pointerType = (0, utils_1.getPointerType)(type);
+    if (pointerType === 'CustomEvent') {
+        return 'CustomEvent';
+    }
+    // For specific event types like MouseEvent, TouchEvent, etc.
+    if (pointerType.endsWith('Event')) {
+        return pointerType;
+    }
+    return 'Event';
+}
+function generateMethodDeclaration(method) {
+    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) {
+    const eventName = 'on-' + name;
+    return lodash_1.default.camelCase(eventName);
+}
+function toWebFTagName(className) {
+    // Special handling for WebF prefix - treat it as a single unit
+    if (className.startsWith('WebF')) {
+        // Replace WebF with webf- and then kebab-case the rest
+        const withoutPrefix = className.substring(4);
+        return 'webf-' + lodash_1.default.kebabCase(withoutPrefix);
+    }
+    else if (className.startsWith('Flutter')) {
+        // Handle Flutter prefix similarly
+        const withoutPrefix = className.substring(7);
+        return 'flutter-' + lodash_1.default.kebabCase(withoutPrefix);
+    }
+    // Default kebab-case for other components
+    return lodash_1.default.kebabCase(className);
+}
+function generateReactComponent(blob, packageName, relativeDir) {
+    const classObjects = blob.objects.filter(obj => obj instanceof declaration_1.ClassObject);
+    const typeAliases = blob.objects.filter(obj => obj instanceof declaration_1.TypeAliasObject);
+    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');
+    });
+    // Include type aliases
+    const typeAliasDeclarations = typeAliases.map(typeAlias => {
+        return `type ${typeAlias.name} = ${typeAlias.type};`;
+    }).join('\n');
+    const dependencies = [
+        typeAliasDeclarations,
+        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')
+    ].filter(Boolean).join('\n\n');
+    // Generate all components from this file
+    const components = [];
+    // Create a map of component names to their properties and events
+    const componentMap = new Map();
+    // Process all Properties interfaces
+    properties.forEach(prop => {
+        const componentName = prop.name.replace(/Properties$/, '');
+        if (!componentMap.has(componentName)) {
+            componentMap.set(componentName, {});
+        }
+        componentMap.get(componentName).properties = prop;
+    });
+    // Process all Events interfaces
+    events.forEach(event => {
+        const componentName = event.name.replace(/Events$/, '');
+        if (!componentMap.has(componentName)) {
+            componentMap.set(componentName, {});
+        }
+        componentMap.get(componentName).events = event;
+    });
+    // If we have multiple components, we need to generate a combined file
+    const componentEntries = Array.from(componentMap.entries());
+    if (componentEntries.length === 0) {
+        return '';
+    }
+    if (componentEntries.length === 1) {
+        // Single component - use existing template
+        const [className, component] = componentEntries[0];
+        // Determine the import path for createWebFComponent
+        const isReactCoreUI = packageName === '@openwebf/react-core-ui';
+        let createWebFComponentImport;
+        if (isReactCoreUI && relativeDir) {
+            // Calculate relative path from current file to utils/createWebFComponent
+            // Files are generated in src/<relativeDir>/ and need to import from src/utils/
+            const depth = relativeDir.split('/').filter(p => p).length;
+            const upPath = '../'.repeat(depth);
+            createWebFComponentImport = `import { createWebFComponent, WebFElementWithMethods } from "${upPath}utils/createWebFComponent";`;
+        }
+        else {
+            createWebFComponentImport = `import { createWebFComponent, WebFElementWithMethods } from "@openwebf/react-core-ui";`;
+        }
+        const templateContent = readTemplate('react.component.tsx')
+            .replace('import { createWebFComponent, WebFElementWithMethods } from "@openwebf/react-core-ui";', createWebFComponentImport);
+        const content = lodash_1.default.template(templateContent)({
+            className: className,
+            properties: component.properties,
+            events: component.events,
+            classObjectDictionary,
+            dependencies,
+            blob,
+            toReactEventName,
+            toWebFTagName,
+            generateReturnType,
+            generateMethodDeclaration,
+            generateEventHandlerType,
+            getEventType,
+        });
+        return content.split('\n').filter(str => {
+            return str.trim().length > 0;
+        }).join('\n');
+    }
+    // Multiple components - generate with shared imports
+    const componentDefinitions = [];
+    // Determine the import path for createWebFComponent
+    const isReactCoreUI = packageName === '@openwebf/react-core-ui';
+    let createWebFComponentImport;
+    if (isReactCoreUI && relativeDir) {
+        // Calculate relative path from current file to utils/createWebFComponent
+        // Files are generated in src/<relativeDir>/ and need to import from src/utils/
+        const depth = relativeDir.split('/').filter(p => p).length;
+        const upPath = '../'.repeat(depth);
+        createWebFComponentImport = `import { createWebFComponent, WebFElementWithMethods } from "${upPath}utils/createWebFComponent";`;
+    }
+    else {
+        createWebFComponentImport = `import { createWebFComponent, WebFElementWithMethods } from "@openwebf/react-core-ui";`;
+    }
+    componentEntries.forEach(([className, component]) => {
+        const content = lodash_1.default.template(readTemplate('react.component.tsx'))({
+            className: className,
+            properties: component.properties,
+            events: component.events,
+            classObjectDictionary,
+            dependencies: '', // Dependencies will be at the top
+            blob,
+            toReactEventName,
+            toWebFTagName,
+            generateReturnType,
+            generateMethodDeclaration,
+            generateEventHandlerType,
+            getEventType,
+        });
+        // Remove the import statements from all but the first component
+        const lines = content.split('\n');
+        const withoutImports = lines.filter(line => {
+            return !line.startsWith('import ');
+        }).join('\n');
+        componentDefinitions.push(withoutImports);
+    });
+    // Combine with shared imports at the top
+    const result = [
+        'import React from "react";',
+        createWebFComponentImport,
+        '',
+        dependencies,
+        '',
+        ...componentDefinitions
+    ].filter(line => line !== undefined).join('\n');
+    return result.split('\n').filter(str => {
+        return str.trim().length > 0;
+    }).join('\n');
+}
+function generateReactIndex(blobs) {
+    const components = blobs.flatMap(blob => {
+        const classObjects = blob.objects.filter(obj => obj instanceof declaration_1.ClassObject);
+        const properties = classObjects.filter(object => {
+            return object.name.endsWith('Properties');
+        });
+        const events = classObjects.filter(object => {
+            return object.name.endsWith('Events');
+        });
+        // Create a map of component names
+        const componentMap = new Map();
+        // Add all components from Properties interfaces
+        properties.forEach(prop => {
+            const componentName = prop.name.replace(/Properties$/, '');
+            componentMap.set(componentName, true);
+        });
+        // Add all components from Events interfaces
+        events.forEach(event => {
+            const componentName = event.name.replace(/Events$/, '');
+            componentMap.set(componentName, true);
+        });
+        // Return an array of all components from this file
+        return Array.from(componentMap.keys()).map(className => ({
+            className: className,
+            fileName: blob.filename,
+            relativeDir: blob.relativeDir,
+        }));
+    }).filter(component => {
+        return component.className.length > 0;
+    });
+    const content = lodash_1.default.template(readTemplate('react.index.ts'))({
+        components,
+    });
+    return content.split('\n').filter(str => {
+        return str.trim().length > 0;
+    }).join('\n');
+}

package/dist/utils.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addIndent = addIndent;
+exports.getClassName = getClassName;
+exports.getWrapperTypeInfoNameOfClassName = getWrapperTypeInfoNameOfClassName;
+exports.getMethodName = getMethodName;
+exports.trimNullTypeFromType = trimNullTypeFromType;
+exports.isUnionType = isUnionType;
+exports.isPointerType = isPointerType;
+exports.getPointerType = getPointerType;
+const declaration_1 = require("./declaration");
+const lodash_1 = require("lodash");
+function addIndent(str, space) {
+    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');
+}
+function getClassName(blob) {
+    let raw = (0, lodash_1.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)}`;
+}
+function getWrapperTypeInfoNameOfClassName(className) {
+    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 (0, lodash_1.snakeCase)(className).toUpperCase();
+}
+function getMethodName(name) {
+    if (!name || name.length === 0)
+        return '';
+    return name[0].toUpperCase() + name.slice(1);
+}
+function trimNullTypeFromType(type) {
+    let types = type.value;
+    if (!Array.isArray(types))
+        return type;
+    let trimed = types.filter(t => t.value != declaration_1.FunctionArgumentType.null);
+    if (trimed.length === 1) {
+        return {
+            isArray: false,
+            value: trimed[0].value
+        };
+    }
+    return {
+        isArray: type.isArray,
+        value: trimed
+    };
+}
+function isUnionType(type) {
+    if (type.isArray || !Array.isArray(type.value)) {
+        return false;
+    }
+    const trimedType = trimNullTypeFromType(type);
+    return Array.isArray(trimedType.value);
+}
+function isPointerType(type) {
+    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;
+}
+function getPointerType(type) {
+    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/dist/vue.js

@@ -0,0 +1,159 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateVueTypings = generateVueTypings;
+const lodash_1 = __importDefault(require("lodash"));
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const declaration_1 = require("./declaration");
+const utils_1 = require("./utils");
+function readTemplate(name) {
+    return fs_1.default.readFileSync(path_1.default.join(__dirname, '../templates/' + name + '.tpl'), { encoding: 'utf-8' });
+}
+function generateReturnType(type) {
+    if ((0, utils_1.isPointerType)(type)) {
+        const pointerType = (0, utils_1.getPointerType)(type);
+        return pointerType;
+    }
+    if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
+        return `${(0, utils_1.getPointerType)(type.value)}[]`;
+    }
+    switch (type.value) {
+        case declaration_1.FunctionArgumentType.int:
+        case declaration_1.FunctionArgumentType.double: {
+            return 'number';
+        }
+        case declaration_1.FunctionArgumentType.any: {
+            return 'any';
+        }
+        case declaration_1.FunctionArgumentType.boolean: {
+            return 'boolean';
+        }
+        case declaration_1.FunctionArgumentType.dom_string: {
+            return 'string';
+        }
+        case declaration_1.FunctionArgumentType.void:
+            return 'void';
+        default:
+            return 'void';
+    }
+}
+function generateEventHandlerType(type) {
+    if (!(0, utils_1.isPointerType)(type)) {
+        throw new Error('Event type must be an instance of Event');
+    }
+    const pointerType = (0, utils_1.getPointerType)(type);
+    if (pointerType === 'Event') {
+        return 'Event';
+    }
+    if (pointerType === 'CustomEvent') {
+        return 'CustomEvent';
+    }
+    throw new Error('Unknown event type: ' + pointerType);
+}
+function generateMethodDeclaration(method) {
+    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) {
+    const classObjects = blob.objects;
+    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 = lodash_1.default.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;
+}
+function generateVueTypings(blobs) {
+    const componentNames = blobs.map(blob => {
+        const classObjects = blob.objects;
+        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 = lodash_1.default.template(readTemplate('vue.components.d.ts'))({
+        componentNames,
+        components,
+    });
+    return content.split('\n').filter(str => {
+        return str.trim().length > 0;
+    }).join('\n');
+}

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@openwebf/webf",
-  "version": "0.22.1",
+  "version": "0.22.4",
   "description": "Command line tools for WebF",
   "main": "index.js",
   "bin": {
     "webf": "./bin/webf.js"
   },
+  "files": [
+    "bin",
+    "dist",
+    "src",
+    "templates",
+    "test"
+  ],
   "scripts": {
     "build": "tsc",
     "test": "jest",

package/src/IDLBlob.ts

@@ -1,4 +1,4 @@
-import {ClassObject, FunctionObject} from "./declaration";
+import {ClassObject, FunctionObject, TypeAliasObject} from "./declaration";
 
 export class IDLBlob {
   raw: string = '';
@@ -7,7 +7,7 @@ export class IDLBlob {
   filename: string;
   implement: string;
   relativeDir: string = '';
-  objects: (ClassObject | FunctionObject)[] = [];
+  objects: (ClassObject | FunctionObject | TypeAliasObject)[] = [];
 
   constructor(source: string, dist: string, filename: string, implement: string, relativeDir: string = '') {
     this.source = source;

package/src/analyzer.ts

@@ -10,6 +10,7 @@ import {
   IndexedPropertyDeclaration,
   ParameterMode,
   PropsDeclaration,
+  TypeAliasObject,
 } from './declaration';
 import {isUnionType} from "./utils";
 
@@ -67,7 +68,7 @@ export function analyzer(blob: IDLBlob, definedPropertyCollector: DefinedPropert
           return null;
         }
       })
-      .filter(o => o instanceof ClassObject || o instanceof FunctionObject) as (FunctionObject | ClassObject)[];
+      .filter(o => o instanceof ClassObject || o instanceof FunctionObject || o instanceof TypeAliasObject) as (FunctionObject | ClassObject | TypeAliasObject)[];
   } catch (error) {
     console.error(`Error analyzing ${blob.source}:`, error);
     throw new Error(`Failed to analyze ${blob.source}: ${error instanceof Error ? error.message : String(error)}`);
@@ -418,11 +419,28 @@ function walkProgram(blob: IDLBlob, statement: ts.Statement, definedPropertyColl
     case ts.SyntaxKind.VariableStatement:
       return processVariableStatement(statement as VariableStatement, unionTypeCollector);
       
+    case ts.SyntaxKind.TypeAliasDeclaration:
+      return processTypeAliasDeclaration(statement as ts.TypeAliasDeclaration, blob);
+      
     default:
       return null;
   }
 }
 
+function processTypeAliasDeclaration(
+  statement: ts.TypeAliasDeclaration,
+  blob: IDLBlob
+): TypeAliasObject {
+  const typeAlias = new TypeAliasObject();
+  typeAlias.name = statement.name.text;
+  
+  // Convert the type to a string representation
+  const printer = ts.createPrinter();
+  typeAlias.type = printer.printNode(ts.EmitHint.Unspecified, statement.type, statement.getSourceFile());
+  
+  return typeAlias;
+}
+
 function processInterfaceDeclaration(
   statement: ts.InterfaceDeclaration,
   blob: IDLBlob,