@omnia/tooling-vue 8.0.107-vnext → 8.0.108-dev

package/internal-do-not-import-from-here/shared.d.ts

@@ -4,36 +4,58 @@ export interface WebComponentOptionsExtends extends WebComponentOptions {
 }
 export type OutputInfo = {
     wc: {
-        namespace: string;
+        namespaces: string[];
         mappings: {
             [element: string]: string;
         };
     };
 };
+type ComponentPropInfo = {
+    type: string;
+    description?: string;
+    required?: boolean;
+    defaultValue?: any;
+};
+type ComponentInfo = {
+    functionSignature?: boolean;
+    props: {
+        [name: string]: ComponentPropInfo;
+    };
+    models: {
+        [name: string]: ComponentPropInfo;
+    };
+    slots: {
+        [name: string]: ComponentPropInfo;
+    };
+    emits: {
+        [name: string]: ComponentPropInfo;
+    };
+};
 export declare const isExtensionEnv: boolean;
-export declare function getBuildOption(): import("@omnia/tooling-composers").BuildOptions;
-export declare function registerOutputInfo(info: OutputInfo): void;
-export declare function modifyComponent(content: string, filePath: string): string;
-export declare function convertManifestPathToEntryPath(pathToManifest: any, pathsInManifest: Array<string>): string[];
 export declare const buildContext: {
     isManifestsChanged: boolean;
 };
-export declare var cacheKeys: {
+export declare const cacheKeys: {
     bundleManifests: string;
 };
+export declare function getBuildOption(): import("@omnia/tooling-composers").BuildOptions;
+export declare function registerOutputInfo(info: OutputInfo): void;
+export declare function transformDefineVueComponent(content: string, filePath: string): string;
+export declare function extractVueComponentInfo(filePath: string): ComponentInfo;
+export declare function convertManifestPathToEntryPath(pathToManifest: any, pathsInManifest: Array<string>): string[];
 export declare class ConfigurationManager {
     private static _webComponentTypings;
     private static _outputInfoManagaer;
-    static get webComponentTypings(): WebComponentTypingsManagaer;
-    static get outputInfo(): OutputInfoManagaer;
+    static get webComponentTypings(): ImplementComponentTyping;
+    static get outputInfo(): OutputInfoManager;
 }
-declare class OutputInfoManagaer {
+declare class OutputInfoManager {
     private filePath;
     private _value;
     update(value: OutputInfo): void;
     get(): OutputInfo;
 }
-declare class WebComponentTypingsManagaer {
+declare class ImplementComponentTyping {
     private filePath;
     update(value: string): void;
     delete(): void;

package/internal-do-not-import-from-here/shared.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfigurationManager = exports.cacheKeys = exports.buildContext = exports.convertManifestPathToEntryPath = exports.modifyComponent = exports.registerOutputInfo = exports.getBuildOption = exports.isExtensionEnv = void 0;
+exports.ConfigurationManager = exports.convertManifestPathToEntryPath = exports.extractVueComponentInfo = exports.transformDefineVueComponent = exports.registerOutputInfo = exports.getBuildOption = exports.cacheKeys = exports.buildContext = exports.isExtensionEnv = void 0;
 const tslib_1 = require("tslib");
 const globby_1 = require("globby");
 const path_1 = tslib_1.__importDefault(require("path"));
@@ -8,37 +8,325 @@ const fsExtra = tslib_1.__importStar(require("fs-extra"));
 const del_1 = tslib_1.__importDefault(require("del"));
 const fs_1 = tslib_1.__importDefault(require("fs"));
 const tooling_composers_1 = require("@omnia/tooling-composers");
-const _outputInfos = [];
+const core_1 = require("@swc/core");
+const tooling_1 = require("@omnia/tooling");
+var DefineVueType;
+(function (DefineVueType) {
+    DefineVueType[DefineVueType["Prop"] = 0] = "Prop";
+    DefineVueType[DefineVueType["Model"] = 1] = "Model";
+    DefineVueType[DefineVueType["Slot"] = 2] = "Slot";
+    DefineVueType[DefineVueType["Emit"] = 3] = "Emit";
+})(DefineVueType || (DefineVueType = {}));
+const outputInfos = [];
 const basePathProcess = process.cwd();
+const componentInfos = {};
 exports.isExtensionEnv = fs_1.default.existsSync(basePathProcess + "/node_modules/@omnia/tooling/package.json");
+exports.buildContext = {
+    isManifestsChanged: false
+};
+exports.cacheKeys = {
+    //buildManifestMetadatas: "buildManifestMetadatas",
+    bundleManifests: "bundleManifests"
+};
 function getBuildOption() {
     return tooling_composers_1.BuildConfigurationRegistry.getBuildOptions();
 }
 exports.getBuildOption = getBuildOption;
 function registerOutputInfo(info) {
-    _outputInfos.push(info);
+    outputInfos.push(info);
 }
 exports.registerOutputInfo = registerOutputInfo;
-function modifyComponent(content, filePath) {
+function transformDefineVueComponent(content, filePath) {
     let result = content;
-    if (path_1.default.extname(filePath) === ".tsx") {
-        result = replaceWebComponentNamespaceMapping(content);
+    const ext = path_1.default.extname(filePath);
+    if (ext === ".tsx") {
+        result = replaceComponentNamespace(content);
+        const componentInfo = extractVueComponentInfo(filePath);
         const wcs = tooling_composers_1.ComponentRegistry.getComponentRegistrations();
         if (wcs.find(wc => filePath.indexOf(wc.componentOptions.entryPointPath) > -1)) {
-            result = result.replace(/defineVueComponent/g, "defineVueWebComponent");
+            if (componentInfo.functionSignature) {
+                result = result.replace(/defineVueComponent/g, "internalDVWCByFS");
+                result = result.replace(/internalDVWCByFS(\s*)\(/g, `internalDVWCByFS(${convertComponentOptionsToString(componentInfo)},`);
+                // console.log(result)
+            }
+            else {
+                result = result.replace(/defineVueComponent/g, "defineVueWebComponent");
+            }
+        }
+        else if (componentInfo.functionSignature) {
+            result = result.replace(/defineVueComponent/g, "internalDVCByFS");
+            result = result.replace(/internalDVCByFS(\s*)\(/g, `internalDVCByFS(${convertComponentOptionsToString(componentInfo)},`);
         }
     }
     return result;
 }
-exports.modifyComponent = modifyComponent;
-function replaceWebComponentNamespaceMapping(content) {
-    const infos = _outputInfos.concat(ConfigurationManager.outputInfo.get());
+exports.transformDefineVueComponent = transformDefineVueComponent;
+function extractVueComponentInfo(filePath) {
+    if (!tooling_1.isServing && componentInfos[filePath]) {
+        return componentInfos[filePath];
+    }
+    const componentInfo = {
+        emits: {},
+        models: {},
+        props: {},
+        slots: {}
+    };
+    componentInfos[filePath] = componentInfo;
+    const wcParseResult = (0, core_1.parseFileSync)(filePath, {
+        syntax: 'typescript',
+        target: 'es2020',
+        tsx: true,
+        decorators: true,
+        dynamicImport: true
+    });
+    let foundDefineVueComponent = false;
+    wcParseResult.body.forEach(b => {
+        if (b?.expression?.callee?.value === "defineVueComponent") {
+            if (foundDefineVueComponent) {
+                throw new Error(`${filePath}: have more than once call defineVueComponent -> Only support define once vue component on each .tsx file.`);
+            }
+            foundDefineVueComponent = true;
+            const callExpression = b.expression;
+            if (callExpression.arguments[0].expression.type === "ArrowFunctionExpression") {
+                componentInfo.functionSignature = true;
+                const params = callExpression.arguments[0].expression.params;
+                const typeParams = params[0].typeAnnotation.typeAnnotation.typeParams.params;
+                const props = typeParams[0];
+                const types = props.types ? props.types : [props];
+                types.forEach((t) => {
+                    const typeName = t.typeName.value;
+                    if (typeName === "DefineProp" || typeName === "DefineVModel") {
+                        const params = t.typeParams.params;
+                        const name = extractTypeValue(params[0]) || "modelValue";
+                        const type = extractTypeValue(params[1]);
+                        // if(!type)console.log(filePath, name, params[1])
+                        const required = params.length > 2 ? extractTypeValue(params[2]) : false;
+                        const defaultValue = params.length > 3 ? extractTypeValue(params[3], true) : undefined;
+                        const description = params.length > 4 ? extractTypeValue(params[4]) : "";
+                        const info = {
+                            type: type,
+                            description: description,
+                            required: required.toString().toLowerCase() === "true" ? true : false
+                        };
+                        if (defaultValue !== undefined) {
+                            info.defaultValue = defaultValue;
+                        }
+                        if (typeName === "DefineVModel") {
+                            componentInfo.models[name] = info;
+                        }
+                        else { // props
+                            componentInfo.props[name] = info;
+                        }
+                    }
+                });
+                if (typeParams.length > 1) {
+                    const emits = typeParams[1];
+                    const types = emits.types ? emits.types : [emits];
+                    types.forEach((t) => {
+                        const typeName = t.typeName.value;
+                        if (typeName === "DefineEmit") {
+                            const params = t.typeParams.params;
+                            const name = extractTypeValue(params[0]);
+                            const type = extractTypeValue(params[1]);
+                            const description = params.length > 2 ? extractTypeValue(params[2]) : "";
+                            componentInfo.emits[name] = {
+                                type: type,
+                                description: description,
+                            };
+                        }
+                    });
+                }
+                if (typeParams.length > 2) {
+                    const slots = typeParams[2];
+                    const types = slots.types ? slots.types : [slots];
+                    types.forEach((t) => {
+                        const typeName = t.typeName.value;
+                        if (typeName === "DefineSlot") {
+                            const params = t.typeParams.params;
+                            const name = extractTypeValue(params[0]);
+                            const type = extractTypeValue(params[1]);
+                            const description = params.length > 2 ? extractTypeValue(params[2]) : "";
+                            componentInfo.slots[name] = {
+                                type: type,
+                                description: description,
+                            };
+                        }
+                    });
+                }
+            }
+            else {
+                callExpression.arguments[0].expression
+                    .properties?.filter(p => p.key.value === "props"
+                    || p.key.value === "emits")
+                    ?.forEach(propsIdentifier => {
+                    if (propsIdentifier) {
+                        propsIdentifier.value
+                            .properties?.forEach(p => {
+                            const em = p.arguments;
+                            if (em?.callee?.property?.value === "doc$") {
+                                const PropertyResult = {
+                                    type: null,
+                                    propertyTypeAsString: "",
+                                    name: ""
+                                };
+                                getPropertyInfo(em, PropertyResult);
+                                switch (PropertyResult.type) {
+                                    case DefineVueType.Prop:
+                                        componentInfo.props[PropertyResult.name] = {
+                                            type: PropertyResult.propertyTypeAsString,
+                                            description: em.arguments[0].expression.value
+                                        };
+                                        break;
+                                    case DefineVueType.Model:
+                                        componentInfo.models[PropertyResult.name] = {
+                                            type: PropertyResult.propertyTypeAsString,
+                                            description: em.arguments[0].expression.value
+                                        };
+                                        break;
+                                    case DefineVueType.Emit:
+                                        componentInfo.emits[PropertyResult.name] = {
+                                            type: PropertyResult.propertyTypeAsString,
+                                            description: em.arguments[0].expression.value
+                                        };
+                                        break;
+                                    case DefineVueType.Slot:
+                                        em.arguments[0].expression
+                                            .properties
+                                            .forEach(p => {
+                                            const slotName = p.key.value;
+                                            componentInfo.slots[slotName] = {
+                                                type: PropertyResult.propertyTypeAsObject[slotName],
+                                                description: p.value.value
+                                            };
+                                        });
+                                        break;
+                                    default:
+                                        break;
+                                }
+                            }
+                        });
+                    }
+                });
+            }
+        }
+    });
+    return componentInfo;
+}
+exports.extractVueComponentInfo = extractVueComponentInfo;
+function convertComponentOptionsToString(component) {
+    function getEmits() {
+        let result = "";
+        Object.keys(component.emits).forEach(name => {
+            result = `${result} "${name}",`;
+        });
+        return result;
+    }
+    function getProps() {
+        let result = "";
+        Object.keys(component.props).forEach(name => {
+            result = `${result} ${name}:${component.props[name].defaultValue !== undefined && component.props[name].defaultValue !== "null" ? `{default: ${component.props[name].defaultValue}},` : "{},"}`;
+        });
+        Object.keys(component.models).forEach(name => {
+            result = `${result} ${name}:${component.models[name].defaultValue !== undefined && component.models[name].defaultValue !== "null" ? `{default: ${component.models[name].defaultValue}},` : "{},"}`;
+        });
+        return result;
+    }
+    return `{ emits: [${getEmits()}], props: {${getProps()}} }`;
+}
+function extractTypeValue(tsType, rawValue = false) {
+    let result = "";
+    if (tsType.type === "TsTypeAnnotation") {
+        return extractTypeValue(tsType.typeAnnotation);
+    }
+    if (tsType.type === "TsArrayType") {
+        return extractTypeValue(tsType.elemType);
+    }
+    if (tsType.type === "TsUnionType") {
+        const types = [];
+        tsType.types.forEach(t => types.push(extractTypeValue(t)));
+        return types.join(" | ");
+    }
+    switch (tsType.type) {
+        case "TsLiteralType":
+            if (rawValue && tsType.literal.type === "StringLiteral") {
+                result = tsType.literal.raw;
+            }
+            else {
+                result = tsType.literal.value;
+            }
+            break;
+        case "TsKeywordType":
+            result = tsType.kind;
+            break;
+        case "TsTypeReference":
+            result = tsType.typeName.value;
+            break;
+        case "TsTypeQuery":
+            result = tsType.exprName.value;
+            break;
+        case "TsFunctionType":
+            result = getPropertyFunctionTypeAsString(tsType);
+            break;
+        default:
+            break;
+    }
+    return result;
+}
+function getPropertyFunctionTypeAsString(type) {
+    let params = "";
+    if (type.params?.length > 0) {
+        type.params.forEach(p => {
+            params += `${p.value}:${extractTypeValue(p.typeAnnotation)}, `;
+        });
+        params = params.replace(/,\s*$/, "");
+    }
+    return `(${params}) => ${extractTypeValue(type.typeAnnotation)}`;
+}
+function getPropertyInfo(ce, result) {
+    const identifier = ce.callee?.property?.value;
+    if (identifier) {
+        switch (identifier) {
+            case "name":
+                result.name = ce.arguments[0].expression.value;
+                getPropertyInfo(ce.callee.object, result);
+                break;
+            case "vModel":
+                result.type = DefineVueType.Model;
+                result.propertyTypeAsString = extractTypeValue(ce.typeArguments.params[0]);
+                result.name = result.name ? `v-model:${result.name}` : result.name;
+                break;
+            case "slots":
+                result.type = DefineVueType.Slot;
+                result.propertyTypeAsObject = {};
+                ce.typeArguments.params[0].members
+                    .forEach(m => {
+                    result.propertyTypeAsObject[m.key.value] = extractTypeValue(m.typeAnnotation);
+                });
+                break;
+            case "prop":
+                result.type = DefineVueType.Prop;
+                result.propertyTypeAsString = extractTypeValue(ce.typeArguments.params[0]);
+                break;
+            case "emit":
+                result.type = DefineVueType.Emit;
+                result.propertyTypeAsString = extractTypeValue(ce.typeArguments.params[0]);
+                break;
+            default:
+                getPropertyInfo(ce.callee.object, result);
+        }
+    }
+}
+function replaceComponentNamespace(content) {
+    const infos = outputInfos.concat(ConfigurationManager.outputInfo.get());
     infos.forEach(info => {
-        if (info.wc?.namespace) {
-            content = content.replace(new RegExp(`(<|<\/|\\s)${info.wc.namespace}\\..*?(>|\\s)`, 'g'), function (match) {
-                return match.replace(new RegExp(`(${info.wc.namespace}.*)(?=(>|\\s))`), function (token) {
-                    return token.replace(/(\S+)/g, function (tag) {
-                        return info.wc.mappings[tag.replace(`${info.wc.namespace}.`, "")] || tag;
+        if (info.wc?.namespaces) {
+            info.wc.namespaces.forEach(namespace => {
+                content = content.replace(new RegExp(`(<|<\/|\\s)${namespace}\\..*?(>|\\s)`, 'g'), function (match) {
+                    return match.replace(new RegExp(`(${namespace}.*)(?=(>|\\s))`), function (token) {
+                        return token.replace(/(\S+)/g, function (tag) {
+                            // console.log("replaceWebComponentNamespaceMapping", tag)
+                            return info.wc.mappings[tag.replace("$", "")] || tag;
+                        });
                     });
                 });
             });
@@ -61,31 +349,24 @@ function convertManifestPathToEntryPath(pathToManifest, pathsInManifest) {
     return result;
 }
 exports.convertManifestPathToEntryPath = convertManifestPathToEntryPath;
-exports.buildContext = {
-    isManifestsChanged: false
-};
-exports.cacheKeys = {
-    //buildManifestMetadatas: "buildManifestMetadatas",
-    bundleManifests: "bundleManifests"
-};
 class ConfigurationManager {
     static get webComponentTypings() {
         if (!this._webComponentTypings) {
-            this._webComponentTypings = new WebComponentTypingsManagaer();
+            this._webComponentTypings = new ImplementComponentTyping();
         }
         return this._webComponentTypings;
     }
     static get outputInfo() {
         if (!this._outputInfoManagaer) {
-            this._outputInfoManagaer = new OutputInfoManagaer();
+            this._outputInfoManagaer = new OutputInfoManager();
         }
         return this._outputInfoManagaer;
     }
 }
+exports.ConfigurationManager = ConfigurationManager;
 ConfigurationManager._webComponentTypings = null;
 ConfigurationManager._outputInfoManagaer = null;
-exports.ConfigurationManager = ConfigurationManager;
-class OutputInfoManagaer {
+class OutputInfoManager {
     constructor() {
         this.filePath = exports.isExtensionEnv ? path_1.default.resolve(__dirname, "tooling.output.json") : path_1.default.resolve(__dirname, "config/tooling.output.json");
         this._value = null;
@@ -103,7 +384,7 @@ class OutputInfoManagaer {
         return this._value;
     }
 }
-class WebComponentTypingsManagaer {
+class ImplementComponentTyping {
     constructor() {
         this.filePath = exports.isExtensionEnv ? path_1.default.resolve(__dirname, "wctypings.ts") : path_1.default.resolve(__dirname, "config/wctypings.ts");
     }