@omnia/tooling-vue 8.0.91-vnext → 8.0.92-dev

package/internal-do-not-import-from-here/tasks/doc.js

@@ -1,424 +1,425 @@
 'use strict';
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.importSnippetCode = exports.generateComponentTypingsAndDoc = void 0;
 const tslib_1 = require("tslib");
-const fs = require('fs');
+const fs_1 = tslib_1.__importDefault(require("fs"));
+const path_1 = tslib_1.__importDefault(require("path"));
 const shared_1 = require("../shared");
-const $ = tslib_1.__importStar(require("../variables"));
-let relativeOutDir = "client/tooling/vue/docs";
-if ($.isExtensionEnv) {
-    relativeOutDir = "node_modules/@omnia/tooling-vue/internal-do-not-import-from-here/docs";
-}
-let outDir = $.tooling.utils.root(relativeOutDir);
-let extensionEnvironment = {
-    paths: {
-        composorImportPath: $.isExtensionEnv ? '@omnia/tooling-composers' : '../../../tooling/composers',
-        topicImportPath: $.isExtensionEnv ? '@omnia/fx-models' : '../../../fx/models',
-        messageBusTopicMediatorImportPath: $.isExtensionEnv ? '@omnia/fx' : '../../../fx'
-    },
-    outPutPaths: {
-        folder: outDir + "/",
-        rawFile: outDir + '/docs.json',
-        manifest: outDir + '/docs.manifest.ts',
-        navRegistration: outDir + '/nav.ts'
+const tooling_composers_1 = require("@omnia/tooling-composers");
+const tooling_1 = require("@omnia/tooling");
+const core_1 = require("@swc/core");
+const fsExtra = tslib_1.__importStar(require("fs-extra"));
+const fx_models_1 = require("@omnia/fx-models");
+async function generateComponentTypingsAndDoc(componentRegistrations) {
+    tooling_1.utils.log("Generate components typings and documentation running...");
+    var startTime = new Date().getTime();
+    let DefineVueType;
+    (function (DefineVueType) {
+        DefineVueType[DefineVueType["Prop"] = 0] = "Prop";
+        DefineVueType[DefineVueType["Model"] = 1] = "Model";
+        DefineVueType[DefineVueType["Slot"] = 2] = "Slot";
+        DefineVueType[DefineVueType["Emit"] = 4] = "Emit";
+    })(DefineVueType || (DefineVueType = {}));
+    const docResult = {};
+    function getPropertyFunctionTypeAsString(type) {
+        let params = "";
+        if (type.params?.length > 0) {
+            type.params.forEach(p => {
+                params += `${p.value}:${extractTypeToString(p.typeAnnotation)}, `;
+            });
+            params = params.replace(/,\s*$/, "");
+        }
+        return `(${params}) => ${extractTypeToString(type.typeAnnotation)}`;
     }
-};
-$.tooling.core.registerBuildTask({
-    stage: $.tooling.core.TaskStage.AfterScanManifests,
-    order: 1,
-    task: function () {
-        return generateDocManifest();
+    function extractTypeToString(tsType) {
+        let result = "";
+        if (tsType.type === "TsTypeAnnotation") {
+            return extractTypeToString(tsType.typeAnnotation);
+        }
+        switch (tsType.type) {
+            case "TsLiteralType":
+                result = tsType.literal.value;
+                break;
+            case "TsKeywordType":
+                result = tsType.kind;
+                break;
+            case "TsTypeReference":
+                result = tsType.typeName.value;
+                break;
+            case "TsFunctionType":
+                result = getPropertyFunctionTypeAsString(tsType);
+                break;
+            default:
+                break;
+        }
+        return result;
     }
-});
-function generateDocManifest() {
-    return new Promise(function (resolve, reject) {
-        resolve();
-        // documentalist package jave issue with security
-        // so we will find another solution in omnia 7.
-        //let enableDocs = $.composers.DevelopmentBuildConfiguration.isEnableDocumentation;
-        //if (enableDocs !== true && process.argv.length > 0) {
-        //    enableDocs = process.argv.find(argv => argv === "--docs") !== undefined;
-        //}
-        //if (enableDocs !== true) {
-        //    resolve();
-        //}
-        //else {
-        //    $.tooling.log('Generating documentation manifest', $.tooling.LogTypes.HeadLine);
-        //    let startTime = new Date().getTime();
-        //    //ensure folder
-        //    if (!fs.existsSync(outDir)) {
-        //        fs.mkdirSync(outDir);
-        //    }
-        //    else {
-        //        // cleanup exist docs
-        //        $.del.sync([outDir + '/**', '!' + outDir]);
-        //    }
-        //    let componentRegistrations = $.composers.ComponentRegistry.getComponentRegistrations();
-        //    let docs = extractDocPathForComponents(componentRegistrations);
-        //    $.tooling.logTime(`Found [${docs.componentsDocCount}] component(s) have documentation`, startTime);
-        //    if (docs.paths.length > 0) {
-        //        generate(docs.paths).then(() => {
-        //            $.tooling.logTime('Done - Generating documentation manifest', startTime);
-        //            resolve();
-        //        }, reject);
-        //    }
-        //    else {
-        //        $.tooling.logTime('Done - Generating documentation manifest', startTime);
-        //        resolve();
-        //    }
-        //}
-    });
-}
-function generate(paths) {
-    return new Promise(function (resolve, reject) {
-        const { Documentalist, TypescriptPlugin } = require("documentalist");
-        new Documentalist()
-            .use(/\.ts?$/, new TypescriptPlugin())
-            .documentGlobs(...paths) // ← async operation, returns a Promise
-            .then(docs => {
-            //console.log("ahihi", docs.typescript);
-            var rootModel = docs.typescript;
-            var filterFilesPath = filterInterfaceFilePaths(rootModel, paths);
-            var elementInterfaces = getWebComponentAndMainInterface(Object.keys(filterFilesPath));
-            var fxDocs = builtFxDocs(rootModel, elementInterfaces);
-            writeFile(extensionEnvironment.outPutPaths.rawFile, JSON.stringify(fxDocs, null, 2)); //For debugging purpose
-            writeDocsManifest(extensionEnvironment.outPutPaths.manifest, extensionEnvironment.paths.composorImportPath, fxDocs);
-            writeNavRegistrion(extensionEnvironment.outPutPaths.navRegistration, extensionEnvironment.paths.topicImportPath, extensionEnvironment.paths.messageBusTopicMediatorImportPath, fxDocs);
-            writeDocsRegistration(extensionEnvironment.outPutPaths.folder, extensionEnvironment.paths.topicImportPath, extensionEnvironment.paths.messageBusTopicMediatorImportPath, fxDocs);
-            let docManifestRelativePath = relativeOutDir + "/docs.manifest.ts";
-            let docManifestAbsolutePath = $.tooling.utils.root(docManifestRelativePath);
-            // register docs manifest
-            if ($.fs.existsSync(docManifestAbsolutePath)) {
-                try {
-                    $.composers.ManifestRegistry.setCurrentManifestPath(docManifestRelativePath);
-                    require(docManifestAbsolutePath);
-                    $.composers.ManifestRegistry.setCurrentManifestPath();
-                    delete require.cache[docManifestAbsolutePath];
-                }
-                catch (ex) {
-                    console.dir(ex.stack);
-                    reject();
-                }
-            }
-            resolve();
-        }, reject);
-    });
-}
-function getSamples(interfaceFilePath) {
-    var elementNameReg = /elementName:( )*['"][^'"]+['"]/g; //Only @Prop has define default value
-    var entryPointReg = /entryPoint:( )*['"][^'"]+['"]/g;
-    var samples = [];
-    var interfaceSegments = interfaceFilePath.split('\\');
-    interfaceSegments.splice(-1, 1);
-    var folderPath = interfaceSegments.join('\\') + '\\samples';
-    var samplesManifests = getAllFilesInFolderRecursively(folderPath);
-    for (var sampleManifest of samplesManifests) {
-        var content = readFile(sampleManifest.filePath);
-        var elemNameMatches = content.match(elementNameReg);
-        var entryPointMatches = content.match(entryPointReg);
-        if (elemNameMatches && entryPointMatches) {
-            for (var i = 0; i < entryPointMatches.length; i++) {
-                var elemNameMatch = elemNameMatches[i];
-                var entryPointMatch = entryPointMatches[i];
-                var sampleElemDefinition = elemNameMatch.split(':').pop();
-                sampleElemDefinition = sampleElemDefinition.trim();
-                var sampleElem = sampleElemDefinition.substr(1, sampleElemDefinition.length - 2);
-                var entryPointDefinition = entryPointMatch.split(':').pop();
-                entryPointDefinition = entryPointDefinition.trim();
-                var entryPoint = entryPointDefinition.substr(1, entryPointDefinition.length - 2);
-                entryPoint = entryPoint.replace('./', '').replace('.jsx', '.tsx').split('/').join('\\');
-                var sampleTsxFilePath = sampleManifest.dirPath + '\\' + entryPoint;
-                var sampleTsxFileContent = readFile(sampleTsxFilePath);
-                sampleTsxFileContent = sampleTsxFileContent.replace(new RegExp('\\r\\n', 'g'), '\\\\r\\\\n');
-                //console.log(sampleTsxFileContent);
-                samples.push({ elem: sampleElem, content: sampleTsxFileContent });
+    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 = extractTypeToString(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] = extractTypeToString(m.typeAnnotation);
+                    });
+                    break;
+                case "prop":
+                    result.type = DefineVueType.Prop;
+                    result.propertyTypeAsString = extractTypeToString(ce.typeArguments.params[0]);
+                    break;
+                case "emit":
+                    result.type = DefineVueType.Emit;
+                    result.propertyTypeAsString = extractTypeToString(ce.typeArguments.params[0]);
+                    break;
+                default:
+                    getPropertyInfo(ce.callee.object, result);
             }
         }
     }
-    return samples;
-}
-function writeDocsRegistration(outputFolder, topicImportPath, messageBusTopicMediatorImportPath, fxDocs) {
-    for (var elem of Object.keys(fxDocs)) {
-        var content = '';
-        var docsRegistrationMsg = generateDocsRegistrationMsg(fxDocs, elem);
-        var json = JSON.stringify(docsRegistrationMsg)
-            .replace(new RegExp('`', 'g'), '\\`');
-        json = json
-            .replace(new RegExp('\\\\\\\\\\\\`', 'g'), '\\\\\\\\\\`');
-        json = json
-            .replace(new RegExp('\\\\"', 'g'), '\\\\"');
-        content += `import { Topic } from "${topicImportPath}";\r\n`;
-        content += `import { MessageBusTopicMediator } from '${messageBusTopicMediatorImportPath}';\r\n`;
-        content += `const topic: Topic<string> = {namespace: "omfx.docs",name: "docs"};\r\n`;
-        content += `const registerNav = new MessageBusTopicMediator<any>(topic, { caching: { size: Number.MAX_SAFE_INTEGER} });\r\n`;
-        content += 'registerNav.publish(JSON.parse(`' + json + '`))';
-        writeFile(outputFolder + elem + '.ts', content);
-    }
-}
-function writeDocsManifest(path, composorImportPath, fxDocs) {
-    var content = '';
-    content += `import { Composer } from "${composorImportPath}";\r\n`;
-    content += '\r\n';
-    content += `Composer.registerManifest("${$.tooling.utils.generateGuid()}", "fxdocs")\r\n`;
-    content += `    .registerResources({resourcePaths:['./nav.ts']})\r\n`;
-    content += `    .withLoadRules().loadIfManifestLoaded({omniaServiceId:'da059968-e431-48b5-a865-d33d0fa29c9d', resourceId:'052f0298-1dc7-4d0c-b4b9-3c8497ca08f5'})\r\n`;
-    content += '\r\n';
-    for (var elem of Object.keys(fxDocs)) {
-        content += '\r\n';
-        content += `Composer.registerManifest("${$.tooling.utils.generateGuid()}", "${elem}")\r\n`;
-        content += `    .registerResources({resourcePaths:['./${elem}.ts']})\r\n`;
-        content += `    .withLoadRules().loadIfManifestLoaded({omniaServiceId:'da059968-e431-48b5-a865-d33d0fa29c9d', resourceId:'052f0298-1dc7-4d0c-b4b9-3c8497ca08f5'})\r\n`;
-        content += `    .and().loadByDomMatching({ cssSelector: "omfx-docs-resource[source='${elem}']" });\r\n`;
-        content += '\r\n';
-    }
-    writeFile(path, content);
-}
-function writeNavRegistrion(path, topicImportPath, messageBusTopicMediatorImportPath, fxDocs) {
-    var content = '';
-    var navRegistrationMsg = getNavRegistrationMsg(fxDocs);
-    content += `import { Topic } from "${topicImportPath}";\r\n`;
-    content += `import { MessageBusTopicMediator } from '${messageBusTopicMediatorImportPath}';\r\n`;
-    content += `const topic: Topic<string> = {namespace: "omfx.docs",name: "nav"};\r\n`;
-    content += `const registerNav = new MessageBusTopicMediator<any>(topic, { caching: { size: Number.MAX_SAFE_INTEGER} });\r\n`;
-    content += 'registerNav.publish(JSON.parse(`' + JSON.stringify(navRegistrationMsg) + '`))';
-    writeFile(path, content);
-}
-function generateDocsRegistrationMsg(fxDocs, elem) {
-    var props = [];
-    var elemDocumentation = elem;
-    if (fxDocs[elem] && fxDocs[elem].documentation && fxDocs[elem].documentation.contentsRaw) {
-        elemDocumentation = fxDocs[elem].documentation.contentsRaw;
-    }
-    var elemName = elemDocumentation.split('-')[0];
-    var elemDescription = elemDocumentation.split('-')[1] || '';
-    if (fxDocs[elem].props) {
-        for (var prop of Object.keys(fxDocs[elem].props)) {
-            var propObj = fxDocs[elem].props[prop];
-            var description = '';
-            if (propObj.documentation && propObj.documentation.contentsRaw) {
-                description = propObj.documentation.contentsRaw;
-                if (description && description.indexOf('\"') >= 0) {
-                    description = description.replace(new RegExp('\\"', 'g'), '\\\"');
+    async function buildDoc(wc) {
+        try {
+            const wcPath = (0, shared_1.convertManifestPathToEntryPath)(wc.manifestPath, [wc.componentOptions.entryPoint])[0];
+            const wcParseResult = await (0, core_1.parseFile)(wcPath, {
+                syntax: 'typescript',
+                target: 'es2020',
+                tsx: true,
+                decorators: true,
+                dynamicImport: true
+            });
+            wcParseResult.body.forEach(b => {
+                if (b.type === 'ExportDefaultExpression'
+                    && b.expression.callee?.value === "defineVueComponent") {
+                    if (b.expression.arguments[0].expression.type === "ArrowFunctionExpression") {
+                        const params = b.expression.arguments[0].expression.params;
+                        const typeParams = params[0].typeAnnotation.typeAnnotation.typeParams.params;
+                        const props = typeParams[0];
+                        props.types.forEach((t) => {
+                            const typeName = t.typeName.value;
+                            if (typeName === "DefineProp"
+                                || typeName === "DefineVModel"
+                                || typeName === "DefineSlot"
+                                || typeName === "DefineEmit") {
+                                // const isDefineVModel = (t.typeName as Identifier).value === "DefineVModel$";
+                                if (!docResult[wc.componentOptions.elementName]) {
+                                    docResult[wc.componentOptions.elementName] = {
+                                        emits: {},
+                                        models: {},
+                                        props: {},
+                                        slots: {}
+                                    };
+                                }
+                                const params = t.typeParams.params;
+                                const name = extractTypeToString(params[0]);
+                                const type = extractTypeToString(params[1]);
+                                if (typeName === "DefineProp" || typeName === "DefineVModel") { // props or vmodel
+                                    const required = params.length > 2 ? extractTypeToString(params[2]) : false;
+                                    const description = params.length > 3 ? extractTypeToString(params[3]) : "";
+                                    if (typeName === "DefineVModel") {
+                                        docResult[wc.componentOptions.elementName].models[name] = {
+                                            type: type,
+                                            description: description,
+                                            required: required.toString().toLowerCase() === "true" ? true : false
+                                        };
+                                    }
+                                    else { // props
+                                        docResult[wc.componentOptions.elementName].props[name] = {
+                                            type: type,
+                                            description: description,
+                                            required: required.toString().toLowerCase() === "true" ? true : false
+                                        };
+                                    }
+                                }
+                                else { // slots or emits
+                                    const description = params.length > 2 ? extractTypeToString(params[2]) : "";
+                                    if (typeName === "DefineEmit") {
+                                        docResult[wc.componentOptions.elementName].emits[name] = {
+                                            type: type,
+                                            description: description,
+                                        };
+                                    }
+                                    else { // slots
+                                        docResult[wc.componentOptions.elementName].slots[name] = {
+                                            type: type,
+                                            description: description,
+                                        };
+                                    }
+                                }
+                            }
+                        });
+                    }
+                    else {
+                        b.expression.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);
+                                        if (!docResult[wc.componentOptions.elementName]) {
+                                            docResult[wc.componentOptions.elementName] = {
+                                                emits: {},
+                                                models: {},
+                                                props: {},
+                                                slots: {}
+                                            };
+                                        }
+                                        switch (PropertyResult.type) {
+                                            case DefineVueType.Prop:
+                                                docResult[wc.componentOptions.elementName].props[PropertyResult.name] = {
+                                                    type: PropertyResult.propertyTypeAsString,
+                                                    description: em.arguments[0].expression.value
+                                                };
+                                                break;
+                                            case DefineVueType.Model:
+                                                docResult[wc.componentOptions.elementName].models[PropertyResult.name] = {
+                                                    type: PropertyResult.propertyTypeAsString,
+                                                    description: em.arguments[0].expression.value
+                                                };
+                                                break;
+                                            case DefineVueType.Emit:
+                                                docResult[wc.componentOptions.elementName].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;
+                                                    docResult[wc.componentOptions.elementName].slots[slotName] = {
+                                                        type: PropertyResult.propertyTypeAsObject[slotName],
+                                                        description: p.value.value
+                                                    };
+                                                });
+                                                break;
+                                            default:
+                                                break;
+                                        }
+                                    }
+                                });
+                            }
+                        });
+                    }
                 }
-            }
-            var defaultValue = propObj.defaultValue;
-            if (defaultValue && defaultValue.indexOf('\"') >= 0) {
-                defaultValue = defaultValue.replace(new RegExp('\\"', 'g'), '\\\"');
-            }
-            props.push({ name: prop, type: propObj.type, description: description, defaultValue: defaultValue });
+            });
         }
-    }
-    return { elem: elem, name: elemName, description: elemDescription, props: props, sampleElems: fxDocs[elem].samples };
-}
-function getNavRegistrationMsg(fxDocs) {
-    var componentNodes = [];
-    for (var elem of Object.keys(fxDocs)) {
-        var name = elem;
-        if (fxDocs[elem] && fxDocs[elem].documentation && fxDocs[elem].documentation.contentsRaw) {
-            name = fxDocs[elem].documentation.contentsRaw.split('-')[0].trim();
+        catch (ex) {
+            tooling_1.utils.log(`Have a exception when extract doc$ for web component manifest -> ${wc.manifestPath}`, tooling_1.utils.LogTypes.Error);
+            console.error(ex);
+            throw new Error("Exit, have an exception.");
         }
-        componentNodes.push({ name: name, elem: elem });
     }
-    return { extension: $.composers.ServiceManifestRegistry.getServiceInfo().title || $.composers.ServiceManifestRegistry.getServiceInfo().id, componentNodes };
-}
-function builtFxDocs(rootModel, elementInterfaces) {
-    var fxDocs = {};
-    let componentRegistrations = $.composers.ComponentRegistry.getComponentRegistrations();
-    for (var element in elementInterfaces) {
-        console.log('process for', element);
-        var elementDoc = {};
-        var elementInfo = elementInterfaces[element];
-        var rootNode = rootModel[elementInfo.interface];
-        elementDoc.documentation = rootNode.documentation;
-        var props = {};
-        getComponentProperties(rootModel, elementInfo.interface, props);
-        let componentRegistration = componentRegistrations.find(c => c.componentOptions.elementName === element);
-        if (componentRegistration) {
-            let componentPath = (0, shared_1.convertManifestPathToEntryPath)(componentRegistration.manifestPath, [componentRegistration.componentOptions.entryPoint])[0];
-            getComponentPropertiesDefaultValue(componentPath, props);
+    let docPath = path_1.default.resolve(__dirname, "ComponentDocRegistrations.ts");
+    ;
+    let wcTypings = `
+//{{importWC}}
+
+type ExtractJsxProps<T> = {
+    [K in keyof (T extends { propsDefinition: any } ? T["propsDefinition"] : T)]: T extends {
+        propsDefinition: any;
+    }
+    ? T["propsDefinition"][K]
+    : never;
+} & { $children?: any; };
+
+declare global {
+    namespace JSX {
+        interface Element { }
+        interface ElementClass { }
+
+        interface IntrinsicElements {
+            //{{elementName}}
         }
-        elementDoc.props = props;
-        var samples = getSamples(elementInfo.interfaceFilePath);
-        elementDoc.samples = samples;
-        fxDocs[element] = elementDoc;
     }
-    return fxDocs;
-}
-function getComponentPropertiesDefaultValue(componentPath, props) {
-    //var folderPath = interfaceFilePath.substring(0, interfaceFilePath.lastIndexOf('\\') + 1);
-    //var interfaceFileName = interfaceFilePath.substring(folderPath.length);
-    //var implementationFileName = interfaceFileName.substring(1) + 'x'; // IName.ts => Name.tsx
-    //var implementationPath = folderPath + implementationFileName;
-    var fileContent = readFile(componentPath);
-    var reg = /@Prop\(\{[^\)d]+(default)[^\)]+\)[a-zA-Z0-9?_ ]+:/g; //Only @Prop has define default value
-    var regResults = fileContent.match(reg);
-    if (regResults) {
-        for (var regResultContent of regResults) {
-            var propertyName = getPropertyNameFromPropDecorator(regResultContent);
-            var defaultValue = getDefaultValueFromPropDecorator(regResultContent);
-            if (propertyName && props[propertyName]) {
-                props[propertyName].defaultValue = defaultValue;
-            }
+}`;
+    if (shared_1.isExtensionEnv) {
+        wcTypings = `import { VueComponentBaseProps } from "@omnia/fx/ux";
+        ${wcTypings}`;
+    }
+    else {
+        wcTypings = `import { VueComponentBaseProps } from "../../../../client/fx/ux/index";
+        ${wcTypings}`;
+    }
+    const elementNamespaces = {};
+    const wcNamespace = (0, shared_1.getBuildOption)()?.componentNamespace;
+    const info = shared_1.ConfigurationManager.outputInfo.get();
+    info.wc = {
+        namespaces: wcNamespace ? [wcNamespace] : null,
+        mappings: {}
+    };
+    await tooling_1.utils.asyncForEach(componentRegistrations, async (wc) => {
+        wcTypings = generateWebComponentTypings(wc, wcTypings, info, elementNamespaces);
+        if ((0, shared_1.getBuildOption)().docResourceManifestId) {
+            await buildDoc(wc);
         }
+    });
+    if (Object.keys(elementNamespaces).length > 0) {
+        let result = `declare global {
+            //{{namespace}}
+        }`;
+        Object.keys(elementNamespaces).forEach(key => {
+            result = result.replace("//{{namespace}}", `
+            let ${key}: ${JSON.stringify(elementNamespaces[key], null, 2)
+                .replace(/\"typeof /g, "typeof ").replace(/ <<end>>\"/g, "")}
+                //{{namespace}}
+            `);
+        });
+        wcTypings = wcTypings + `
+        ${result}
+        `;
     }
+    if (Object.keys(docResult).length > 0) {
+        fsExtra.outputFileSync(docPath, `
+import { extendApi } from "@omnia/fx";
+import { ComponentDoc } from "@omnia/fx-models";
+
+extendApi(api => api.fx.docs.registrations, api => {
+
+    const registrations: { [elementName: string]: ComponentDoc } = ${JSON.stringify(docResult)}
+
+    Object.keys(registrations).forEach(elementName => {
+        api.register(elementName, registrations[elementName]);
+    });
+});
+    `);
+        // create dynamic doc manifest
+        tooling_composers_1.ManifestRegistry.setCurrentManifestPath(`${path_1.default.relative(tooling_1.utils.root(""), path_1.default.resolve(__dirname))}/`);
+        tooling_composers_1.Composer
+            .registerManifest((0, shared_1.getBuildOption)().docResourceManifestId || new fx_models_1.Guid(`${tooling_1.utils.generateGuid()}`), "omnia.fx.docs.components.registraions")
+            .registerResources({
+            resourcePaths: ["./ComponentDocRegistrations.ts"]
+        })
+            .withTarget(fx_models_1.ClientManifestTargetTypes.docs)
+            .extendApi(api => api.fx.docs.registrations);
+        tooling_composers_1.ManifestRegistry.setCurrentManifestPath();
+    }
+    shared_1.ConfigurationManager.webComponentTypings.update(wcTypings);
+    shared_1.ConfigurationManager.outputInfo.update(info);
+    tooling_1.utils.logTime('Done - Generate components typings and documentation', startTime);
 }
-function getDefaultValueFromPropDecorator(propDecorator) {
-    //Since default value is complex, so we cannot use regex to get it
-    var defaultValue = '';
-    var startIndex = propDecorator.indexOf("default") + "default".length;
-    var regularValueReg = /[a-zA-Z0-9_.]/;
-    var scope = 0;
-    let start = false;
-    let enteredScope = false;
-    let enteredScopeKind = "";
-    var beforeCharacter = '';
-    var character = '';
-    for (var index = startIndex; index < propDecorator.length; index++) {
-        beforeCharacter = character;
-        character = propDecorator[index];
-        if (start) {
-            //IF the first default value character is not a object begin ({...), then we mark a flag to stop by ending at a normal text
-            if (!defaultValue.trim() && (character === "{" || character === "[" || character === "'" || character === '"')) {
-                enteredScope = true;
+exports.generateComponentTypingsAndDoc = generateComponentTypingsAndDoc;
+function generateWebComponentTypings(wc, template, info, elementNamespace) {
+    // export default defineVueWebComponent
+    const wcPath = wc.componentOptions.entryPointPath;
+    let content = fsExtra.readFileSync(wcPath, 'utf8');
+    if (content.indexOf("defineVueComponent") > -1) {
+        if (!new RegExp('export\\s+default\\s+').test(content)) {
+            throw new Error(`Missing statement 'export default a vue web component' in ${wcPath}`);
+        }
+        let friendlyManifestId = `wc${wc.manifest.resourceId.toString().replace(/-/g, '').toLowerCase()}`;
+        let importPath = wcPath.substring(0, wcPath.lastIndexOf('.tsx'));
+        if (importPath.indexOf("./") === 0) {
+            importPath = importPath.replace("./", "");
+        }
+        if (shared_1.isExtensionEnv) {
+            importPath = `../../../../${importPath}`;
+        }
+        else {
+            importPath = `../../../../${importPath}`;
+        }
+        if (info.wc.namespaces) {
+            let elementName = wc.componentOptions.elementName.replace(/-/g, ".");
+            const namespace = (wc.componentOptions.namespace === true ? "" : wc.componentOptions.namespace) || (0, shared_1.getBuildOption)()?.componentNamespace;
+            if (namespace && elementName.indexOf(`${namespace}.`) !== 0) {
+                elementName = `${namespace}.${elementName}`;
             }
-            defaultValue += character;
-            if (enteredScope && character.trim()) {
-                if (character === "{" && (!enteredScopeKind || enteredScopeKind === "{")) {
-                    enteredScopeKind = "{";
-                    scope++;
-                }
-                else if (character === "}" && enteredScopeKind === "{") {
-                    scope--;
-                    if (scope === 0)
-                        break;
-                }
-                else if (character === "[" && (!enteredScopeKind || enteredScopeKind === "[")) {
-                    enteredScopeKind = "[";
-                    scope++;
-                }
-                else if (character === "]" && enteredScopeKind === "]") {
-                    scope--;
-                    if (scope === 0)
-                        break;
-                }
-                else if (character === "'" && !enteredScopeKind) {
-                    enteredScopeKind = "'";
-                }
-                else if (character === "'" && enteredScopeKind === "'" && beforeCharacter !== '\\') {
-                    break;
-                }
-                else if (character === '"' && !enteredScopeKind) {
-                    enteredScopeKind = '"';
-                }
-                else if (character === '"' && enteredScopeKind === '"' && beforeCharacter !== '\\') {
-                    break;
-                }
+            if (info.wc.namespaces && info.wc.namespaces.indexOf(elementName.split(".")[0]) === -1) {
+                info.wc.namespaces.push(elementName.split(".")[0]);
             }
-            if (!enteredScope && defaultValue.trim() && character && !regularValueReg.test(character))
-                break;
-        }
-        if (character === ":")
-            start = true;
-    }
-    return defaultValue.trim();
-}
-function getPropertyNameFromPropDecorator(propDecorator) {
-    propDecorator = propDecorator.substring(propDecorator.lastIndexOf(')') + 1);
-    propDecorator = propDecorator.substring(0, propDecorator.lastIndexOf(':'));
-    var name = propDecorator.trim();
-    name = name.replace("?", ""); //remove optional in name
-    return name;
-}
-function getComponentProperties(rootModel, key, props) {
-    var model = rootModel[key];
-    var properties = model.properties;
-    for (var property of properties) {
-        props[property.name] = {
-            documentation: property.documentation,
-            type: property.type || 'any'
-        };
-    }
-    if (model.extends) {
-        for (var extend of model.extends) {
-            if (extend !== 'any') {
-                getComponentProperties(rootModel, extend, props);
+            info.wc.mappings[elementName] = wc.componentOptions.elementName;
+            try {
+                populateElementNamespace(elementNamespace, elementName, friendlyManifestId);
+            }
+            catch (ex) {
+                tooling_1.utils.log(`Have a exception in building element namespace with element name: ${wc.componentOptions.elementName}`, tooling_1.utils.LogTypes.Error);
+                console.error(ex);
+                throw new Error("Exit, have an exception.");
             }
         }
+        return template
+            .replace(/\/\/{{importWC}}/, `import ${friendlyManifestId} from '${importPath}';
+//{{importWC}}`)
+            .replace(/\/\/{{elementName}}/, `"${wc.componentOptions.elementName}": typeof ${friendlyManifestId} extends { propsDefinition: infer TProp } ? (TProp & Omit<VueComponentBaseProps, keyof TProp>) : typeof ${friendlyManifestId} extends (...args: any[]) => any ? ExtractJsxProps<Pick<ReturnType<typeof ${friendlyManifestId}>, "propsDefinition">> : never
+//{{elementName}}`);
+        // .replace(/\/\/{{nselementName}}/, `"${elementName}": { new(...args: any[]): { $props: typeof ${friendlyManifestId}.propsDefinition & Omit<VueComponentBaseProps, keyof typeof ${friendlyManifestId}.propsDefinition> } }
+        // //{{nselementName}}`)
     }
+    return template;
 }
-function getWebComponentAndMainInterface(interfacePaths) {
-    var result = {};
-    var infoReg = /\/\*@WebComponentInterface\([^\)]+\)\*\/[ \n\r]+export[ ]+interface[ ]+[^ ]+/m;
-    var elementReg = /\([^\)]+\)/m;
-    for (var path of interfacePaths) {
-        var fileContent = readFile(path);
-        var infoRegResult = infoReg.exec(fileContent);
-        if (infoRegResult) {
-            var infoRegResultContent = infoRegResult[0];
-            var elementRegResult = elementReg.exec(infoRegResultContent);
-            var elementRegResultContent = elementRegResult[0];
-            var element = elementRegResultContent.substring(2, elementRegResultContent.length - 2);
-            var interfaceName = infoRegResultContent.substring(infoRegResultContent.lastIndexOf(' ') + 1);
-            result[element] = {
-                interface: interfaceName,
-                interfaceFilePath: path
-            };
-        }
+function importSnippetCode(content, filePath) {
+    let result = content;
+    const ext = path_1.default.extname(filePath);
+    if (filePath.indexOf(".md.ts") > -1) {
+        result = content.replace(/\@import\/.*;/g, function (match) {
+            let fromLine = 0;
+            let toLine = 0;
+            const indexStartLine = match.indexOf("{");
+            if (indexStartLine > -1) {
+                const numbers = match.substring(indexStartLine + 1, match.indexOf("}")).split("-");
+                fromLine = Number(numbers[0]);
+                toLine = Number(numbers[1]);
+            }
+            const fileName = match.substring(0, indexStartLine || match.length - 1)
+                .replace("@import/", "")
+                .replace(";", "");
+            let fileContent = fs_1.default.readFileSync(fileName, 'utf-8');
+            if (fromLine > 0) {
+                fileContent = fileContent.split(/\r?\n/).slice(fromLine - 1, toLine).join("\n");
+            }
+            return fileContent;
+        });
     }
     return result;
 }
-function filterInterfaceFilePaths(model, scanPaths) {
-    var filesPath = {};
-    for (var key in model) {
-        let filePath = model[key].fileName;
-        if (filePath) {
-            filePath = filePath.replace(/\\/g, "/");
-            if (scanPaths.find(path => path.indexOf(filePath) > -1) !== undefined) {
-                filesPath[filePath] = true;
+exports.importSnippetCode = importSnippetCode;
+function populateElementNamespace(namespace, elementName, importElement) {
+    const parts = elementName.split(".");
+    for (let i = 0; i < parts.length; i++) {
+        const name = parts[i];
+        if (typeof namespace === "string") {
+            throw new Error("Build element namespace -> that element name contain another element name");
+        }
+        if (!namespace[name]) {
+            if (i === parts.length - 1) {
+                namespace[name] = `typeof ${importElement} extends { propsDefinition: infer TProp } ? { new(...args: any[]): { $props: TProp & Omit<VueComponentBaseProps, keyof TProp> } } : typeof ${importElement} <<end>>`;
+            }
+            else {
+                namespace = namespace[name] = {};
             }
         }
-    }
-    return filesPath;
-}
-//function getFiles(filepath) {
-//    return fs.readdirSync(filepath).filter(function (file) {
-//        return fs.statSync($.path.join(filepath, file)).isFile();
-//    });
-//}
-function writeFile(filepath, content) {
-    fs.writeFileSync(filepath, content);
-}
-function readFile(filePath) {
-    return fs.readFileSync(filePath, 'utf-8');
-}
-function getAllFilesInFolderRecursively(dirPath) {
-    var files = [];
-    if (fs.existsSync(dirPath)) {
-        var paths = fs.readdirSync(dirPath).map(function (file) { return { dirPath: dirPath, filePath: dirPath + '\\' + file }; });
-        files = paths.filter(function (path) {
-            return fs.statSync(path.filePath).isFile() && path.filePath.indexOf('.manifest.ts') >= 0;
-        });
-        var folders = paths.filter(function (path) {
-            return fs.statSync(path.filePath).isFile() === false;
-        });
-        for (var path of folders) {
-            files = files.concat(getAllFilesInFolderRecursively(path.filePath));
+        else {
+            if (i === parts.length - 1) {
+                namespace[`${name}$`] = `typeof ${importElement} extends { propsDefinition: infer TProp } ? { new(...args: any[]): { $props: TProp & Omit<VueComponentBaseProps, keyof TProp> } } : typeof ${importElement} <<end>>`;
+                // throw new Error("Build element namespace -> Exist an element name contain a above that element name");
+            }
+            else {
+                if (typeof namespace[name] === "string") {
+                    namespace[`${name}$`] = namespace[name];
+                    namespace[name] = {};
+                }
+                namespace = namespace[name];
+            }
         }
     }
-    return files;
-}
-;
-function extractDocPathForComponents(componentRegistrations) {
-    let componentsDocCount = 0;
-    let paths = [];
-    componentRegistrations.forEach((comp) => {
-        let defPaths = comp.componentOptions.documentations;
-        if (defPaths) {
-            componentsDocCount++;
-            defPaths.forEach((defPath) => {
-                paths.push((0, shared_1.convertManifestPathToEntryPath)(comp.manifestPath, [defPath])[0]);
-                //paths.push($.tooling.utils.root(convertManifestPathToEntryPath(comp.manifestPath, [defPath])[0]));
-            });
-        }
-    });
-    return { componentsDocCount, paths };
 }