@omnia/tooling-vue 8.0.115-vnext → 8.0.116-dev

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

@@ -15,6 +15,7 @@ const $ = tslib_1.__importStar(require("../variables"));
 const shared_1 = require("../shared");
 const tooling_1 = require("@omnia/tooling");
 const doc_1 = require("./doc");
+const stylexjs_1 = require("../webpack-plugins/stylexjs");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ConcatSource = require('webpack-core/lib/ConcatSource');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
@@ -257,7 +258,7 @@ function buildEntries(serve = false) {
         }
     });
 }
-function buildManifestMetadatas(entries) {
+function buildManifestMetadata(entries) {
     return new Promise(function (resolve, reject) {
         try {
             var startTime = new Date().getTime();
@@ -344,7 +345,7 @@ function beforeBundleManifest(entries) {
             //         isRunBuildMetadata = !isEqual(entries, cachedEntries);
             //     }
             // }
-            if ($.fs.existsSync(cachedEntriesPath)) {
+            if (!isBuildWebpackManifestOnly() && $.fs.existsSync(cachedEntriesPath)) {
                 let cachedEntries = require(cachedEntriesPath);
                 isRunBuildMetadata = !isEqual(entries, cachedEntries);
             }
@@ -376,9 +377,15 @@ function beforeBundleManifest(entries) {
                         fsExtra.writeJsonSync(manifestPath, content);
                     }
                 });
-                buildManifestMetadatas(entriesToBuild).then(() => {
+                buildManifestMetadata(entriesToBuild).then(() => {
                     fsExtra.ensureFileSync(cachedEntriesPath);
                     fsExtra.writeJsonSync(cachedEntriesPath, entries);
+                    if (isBuildWebpackManifestOnly()) {
+                        fsExtra.copyFileSync(`${outDirManifestMetadata}/omnia.fx.core_a2892051-fd9f-4056-ae8d-30d16d48417d.manifest.json`, "client/tooling/vue/config/omnia.fx.core_a2892051-fd9f-4056-ae8d-30d16d48417d.manifest.json");
+                        fsExtra.copyFileSync(`${outDirManifestMetadata}/omnia.fx_a5a89056-b5f5-475d-8518-a1f55090379d.manifest.json`, "client/tooling/vue/config/omnia.fx_a5a89056-b5f5-475d-8518-a1f55090379d.manifest.json");
+                        fsExtra.copyFileSync(`${outDirManifestMetadata}/omnia.fx.ux_dee030cc-4ab3-4158-bb06-8049f5c67542.manifest.json`, "client/tooling/vue/config/omnia.fx.ux_dee030cc-4ab3-4158-bb06-8049f5c67542.manifest.json");
+                        fsExtra.copyFileSync(`${outDirManifestMetadata}/omnia.fx.ux.libs_0fe5c5f2-8d89-485b-afd4-36fe3ff5943a.manifest.json`, "client/tooling/vue/config/omnia.fx.ux.libs_0fe5c5f2-8d89-485b-afd4-36fe3ff5943a.manifest.json");
+                    }
                     resolve(entries);
                 });
             }
@@ -466,6 +473,21 @@ function bundleManifest(entries) {
                         return;
                     }
                     compiler.close((err, result) => { });
+                    // merge stylex.css
+                    const stylexFiles = (0, globby_1.globbySync)([`${$.tooling.utils.root($.tooling.composer.OmniaOutput.OutputBundlePath).replace(/\\/g, "/")}/*.stylex.css`]);
+                    stylexFiles?.forEach(stylexFilePath => {
+                        const manifestCssFilePath = stylexFilePath.replace(".stylex.css", ".css");
+                        const styelxCss = fsExtra.readFileSync(stylexFilePath, 'utf8');
+                        if (!fsExtra.existsSync(manifestCssFilePath)) {
+                            fsExtra.outputFileSync(manifestCssFilePath, styelxCss);
+                        }
+                        else {
+                            const css = fsExtra.readFileSync(manifestCssFilePath, 'utf8');
+                            fsExtra.outputFileSync(manifestCssFilePath, `${styelxCss}
+                            ${css}`);
+                        }
+                        fsExtra.removeSync(stylexFilePath);
+                    });
                     resolve(entries);
                 });
             }
@@ -518,12 +540,15 @@ function afterGenerateManifestsMetadata() {
             .then(resolve, reject);
     });
 }
+function isBuildWebpackManifestOnly() {
+    return process.argv?.find(argv => argv === "--webpackManifest") !== undefined;
+}
 function minifyBundles() {
     return new Promise(function (resolve, reject) {
         if (process.argv.length > 0 && process.argv.find(argv => argv === "--minify") !== undefined) {
             let startTime = new Date().getTime();
             $.tooling.log('Minify bundles running...');
-            const jsPaths = (0, globby_1.globbySync)([`${$.tooling.utils.root($.tooling.composer.OmniaOutput.OutputBundlePath)}/*.js`]);
+            const jsPaths = (0, globby_1.globbySync)([`${$.tooling.utils.root($.tooling.composer.OmniaOutput.OutputBundlePath).replace(/\\/g, "/")}/*.js`]);
             let promises = [];
             jsPaths.forEach(filePath => {
                 promises.push(new Promise(async (resolve, reject) => {
@@ -578,8 +603,27 @@ function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, viteHmrO
             process: { env: { NODE_ENV: JSON.stringify('production') } }
         }),
         ...referenceManifests,
-        extractCss,
         new $.omniaWebpackPlugins.NamedModulesPlugin(buildModuleName()),
+        extractCss,
+        new stylexjs_1.StylexPlugin({
+            // filename: 'styles.[contenthash].css',
+            filename: `${Object.keys(entry)[0]}.stylex.css`,
+            // get webpack mode and set value for dev
+            dev: false,
+            // Use statically generated CSS files and not runtime injected CSS.
+            // Even in development.
+            runtimeInjection: false,
+            // optional. default: 'x'
+            classNamePrefix: 'o',
+            // Required for CSS variable support
+            unstable_moduleResolution: {
+                // type: 'commonJS' | 'haste'
+                // default: 'commonJS'
+                type: 'commonJS',
+                // The absolute path to the root directory of your project
+                rootDir: __dirname,
+            },
+        }),
     ];
     if (!buildOption.detectCircularDependencyOptions || buildOption.detectCircularDependencyOptions.disable !== true) {
         plugins.unshift(new CircularDependencyPlugin({
@@ -652,10 +696,10 @@ function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, viteHmrO
     plugins.push(new $.omniaWebpackPlugins.ChunkAssets(function (compilation, fileName) {
         chunkAsset(entries, compilation, fileName, viteHmrOption);
     }));
-    let webpackEntries = {};
-    Object.keys(entry).forEach(name => {
-        webpackEntries[name] = { import: entry[name] };
-    });
+    // let webpackEntries = {};
+    // Object.keys(entry).forEach(name => {
+    //     webpackEntries[name] = { import: entry[name] }
+    // })
     return {
         mode: 'production',
         devtool: false,
@@ -683,7 +727,7 @@ function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, viteHmrO
                 '@microsoft/signalr$': '@microsoft/signalr/dist/webworker/signalr.js',
             }),
         },
-        target: ['web', 'es2022'],
+        target: ['web', 'es2022'], // Will change ES6 when stop support IE11
         output: {
             //library: {
             //    type: "umd"
@@ -718,8 +762,8 @@ function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, viteHmrO
                         }
                         return false;
                     },
-                    // use: 'null-loader',
                     use: [
+                        // 'null-loader',
                         {
                             loader: path_1.default.resolve(__dirname, $.isExtensionEnv ? '../webpack-loaders/ingore-vuetify-locale.js' : '../webpack-loaders/ingore-vuetify-locale.ts'),
                         }
@@ -833,7 +877,7 @@ function createWebpackConfigForManifestMetadata(entry, metadataOutputDir) {
     var entensionId = getServiceId();
     return Object.assign({}, getBaseWebpackConfigForManifestMetadata(entry, metadataOutputDir), {
         plugins: [
-            ...buildReferenceManifestFromConfig(),
+            ...buildReferenceManifestFromConfig(Object.keys(entry)[0]),
             new $.omniaWebpackPlugins.NamedModulesPlugin(buildModuleName()),
             new $.webpack.DllPlugin({
                 entryOnly: false,
@@ -1061,9 +1105,10 @@ function createCombinedManfest(omniaServiceId, manifestIds, targetManifestId, ta
         if (manifestIds &&
             targetManifestId &&
             manifestIds.length > 0) {
-            let manifestIdToFileNameMap = {};
-            let targetFileName = `${targetManifestName ? targetManifestName + "_" : ""}${targetManifestId}.js`;
-            manifestIdToFileNameMap[targetManifestId] = targetFileName;
+            const manifestIdToFileNameMap = {};
+            const targetJsFileName = `${targetManifestName ? targetManifestName + "_" : ""}${targetManifestId}.js`;
+            const targetCssFileName = `${targetManifestName ? targetManifestName + "_" : ""}${targetManifestId}.css`;
+            manifestIdToFileNameMap[targetManifestId] = targetJsFileName;
             $.tooling.log("Creating manifest group bundle [" + targetManifestId + "]", $.tooling.LogTypes.HeadLine);
             let omniaServiceId = getServiceId();
             manifestIds.sort((manifestId1, manifestId2) => {
@@ -1080,18 +1125,32 @@ function createCombinedManfest(omniaServiceId, manifestIds, targetManifestId, ta
                 }
                 return result;
             });
-            let bundleNames = [];
+            const jsBundleNames = [];
+            const cssBundleNames = [];
             for (let i = 0; i < manifestIds.length; i++) {
                 let manifest = $.composers.LoadableManifestRegistry.getRegisteredManifest(manifestIds[i]);
-                bundleNames[i] = outputDir + `/${manifest.resourceName ? manifest.resourceName + "_" : ""}${manifest.resourceId}.js`;
-                if (!$.fs.existsSync(bundleNames[i])) {
-                    throw new Error("Error, can't create combined bundle: " + targetFileName + " can't find bundle to include: " + bundleNames[i]);
+                jsBundleNames[i] = outputDir + `/${manifest.resourceName ? manifest.resourceName + "_" : ""}${manifest.resourceId}.js`;
+                const cssFilePath = outputDir + `/${manifest.resourceName ? manifest.resourceName + "_" : ""}${manifest.resourceId}.css`;
+                if (!fsExtra.existsSync(jsBundleNames[i])) {
+                    throw new Error("Error, can't create combined bundle: " + targetJsFileName + " can't find bundle to include: " + jsBundleNames[i]);
+                }
+                if (fsExtra.existsSync(cssFilePath)) {
+                    cssBundleNames.push(cssFilePath);
                 }
-                manifestIdToFileNameMap[manifestIds[i]] = bundleNames[i];
+                manifestIdToFileNameMap[manifestIds[i]] = jsBundleNames[i];
                 $.tooling.log("Adding manifest bundle [" + manifestIds[i] + "] to group", $.tooling.LogTypes.Info);
             }
-            let mergedContent = "";
-            bundleNames.forEach(filePath => {
+            let mergedCssContent = "";
+            cssBundleNames.forEach(filePath => {
+                mergedCssContent = `${mergedCssContent}
+                ${fsExtra.readFileSync(filePath, 'utf8')}
+                `;
+            });
+            if (mergedCssContent) {
+                fsExtra.writeFileSync(`${outputDir}/${targetCssFileName}`, mergedCssContent);
+            }
+            let mergedJsContent = "";
+            jsBundleNames.forEach(filePath => {
                 let manifestId = "";
                 let currentFilename = $.path.basename(filePath);
                 for (let id in manifestIdToFileNameMap) {
@@ -1104,13 +1163,13 @@ function createCombinedManfest(omniaServiceId, manifestIds, targetManifestId, ta
                     throw Error("Couldn't extract manifest id from filename: " + currentFilename);
                 }
                 let content = fsExtra.readFileSync(filePath, 'utf8');
-                mergedContent = `
-${mergedContent}
+                mergedJsContent = `
+${mergedJsContent}
 /* Start of resource:${manifestId} */omniaWebpackJsonp["bb000000-0000-bbbb-0000-0000000000bb"]["${fx_models_1.OmniaResourceManifests.FxCore.toString()}"]("06e712d2-9897-4891-9353-148547efe61c").ManifestResourceLoader.registerWebComponentFromGroupBundle("${omniaServiceId}", "${manifestId}", "${targetManifestId}", function(){
 ${content}
 })//End of resource:${manifestId} `;
             });
-            fsExtra.writeFileSync(`${outputDir}/${targetFileName}`, `/******/  if (typeof omniaLoader === 'undefined') {
+            fsExtra.writeFileSync(`${outputDir}/${targetJsFileName}`, `/******/  if (typeof omniaLoader === 'undefined') {
 /******/        globalThis['omniaLoader'] = {};
 /******/    }
 /******/    omniaLoader['${omniaServiceId}'] = omniaLoader['${omniaServiceId}'] || {};
@@ -1119,7 +1178,7 @@ ${content}
                 /******/
 }
 /******/    omniaLoader['${omniaServiceId}']['${targetManifestId}'] = function () {
-${mergedContent}
+${mergedJsContent}
 }
 ${$.composers.LoadableManifestRegistry.isDefineWithNoDependency(targetManifestId) ? `omniaLoader['${omniaServiceId}']['${targetManifestId}']()` : ''}`, 'utf8');
             $.tooling.log("Done - Creating manifest group bundle for manifest id: " + targetManifestId, $.tooling.LogTypes.HeadLine);
@@ -1203,12 +1262,17 @@ function buildReferenceManifest(currentEntry, entries) {
     var manifests = [];
     var dynamicReferenceManifests = [];
     let buildOptions = getBuildOption();
-    if (buildOptions && buildOptions.bundleOptions && buildOptions.bundleOptions.commonsChunk)
-        return dynamicReferenceManifests.concat(buildReferenceManifestFromConfig());
     var currentEntryName = Object.keys(currentEntry)[0];
-    // exclude omnia vendor
-    if (currentEntryName.indexOf(fx_models_1.OmniaResourceManifests.Vendor.toString()) === -1
-        && currentEntryName.indexOf(vendorProdId) === -1) {
+    if (buildOptions && buildOptions.bundleOptions && buildOptions.bundleOptions.commonsChunk)
+        return dynamicReferenceManifests.concat(buildReferenceManifestFromConfig(currentEntryName));
+    // exclude pre-built webpack manifest
+    if ($.isExtensionEnv
+        || (currentEntryName.indexOf(fx_models_1.OmniaResourceManifests.Vendor.toString()) === -1
+            && currentEntryName.indexOf(vendorProdId) === -1
+        // && currentEntryName.indexOf(OmniaResourceManifests.FxCore.toString()) === -1
+        // && currentEntryName.indexOf(OmniaResourceManifests.Fx.toString()) === -1
+        // && currentEntryName.indexOf(OmniaResourceManifests.FxUx.toString()) === -1
+        )) {
         Object.keys(entries).forEach((entryName) => {
             if (entryName !== currentEntryName) {
                 if ($.fs.existsSync($.tooling.utils.root(outDirManifestMetadata + "/" + entryName + ".manifest.json"))) {
@@ -1222,14 +1286,14 @@ function buildReferenceManifest(currentEntry, entries) {
             }
         });
     }
-    manifests = buildReferenceManifestFromConfig().concat(dynamicReferenceManifests).concat(manifests);
+    manifests = buildReferenceManifestFromConfig(currentEntryName).concat(dynamicReferenceManifests).concat(manifests);
     return manifests;
 }
 function cleanUpComposer() {
     $.composers.ManifestRegistry.clearState();
 }
 exports.cleanUpComposer = cleanUpComposer;
-function buildReferenceManifestFromConfig() {
+function buildReferenceManifestFromConfig(entryName) {
     var manifests = [];
     let buildOptions = getBuildOption();
     if (buildOptions.reference) {
@@ -1241,6 +1305,17 @@ function buildReferenceManifestFromConfig() {
             }));
         }
     }
+    if (!isBuildWebpackManifestOnly() && buildOptions.webpackManifests) {
+        for (let manifestPath of buildOptions.webpackManifests) {
+            if (manifestPath.indexOf(entryName) === -1) {
+                manifests.push(new $.omniaWebpackPlugins.DllReferencePlugin({
+                    context: $.tooling.utils.root(""),
+                    manifest: $.tooling.utils.root(manifestPath),
+                    // name: `md${++trackingModuleRefId}` //require('md5')(manifestPath)
+                }));
+            }
+        }
+    }
     if ($.isExtensionEnv) {
         _registeredReferenceManifests.forEach(manifest => {
             manifests.push(new $.omniaWebpackPlugins.DllReferencePlugin({

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

@@ -7,162 +7,23 @@ const path_1 = tslib_1.__importDefault(require("path"));
 const shared_1 = require("../shared");
 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}:${getPropertyType(p.typeAnnotation)}, `;
-            });
-            params = params.replace(/,\s*$/, "");
-        }
-        return `(${params}) => ${getPropertyType(type.typeAnnotation)}`;
-    }
-    function getPropertyType(tsType) {
-        let result = "";
-        if (tsType.type === "TsTypeAnnotation") {
-            return getPropertyType(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 getNameProperty(ce, result) {
-        const identifier = ce.callee?.property?.value;
-        if (identifier) {
-            switch (identifier) {
-                case "name":
-                    result.name = ce.arguments[0].expression.value;
-                    getNameProperty(ce.callee.object, result);
-                    break;
-                case "vModel":
-                    result.type = DefineVueType.Model;
-                    result.propertyTypeAsString = getPropertyType(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] = getPropertyType(m.typeAnnotation);
-                    });
-                    break;
-                case "prop":
-                    result.type = DefineVueType.Prop;
-                    result.propertyTypeAsString = getPropertyType(ce.typeArguments.params[0]);
-                    break;
-                case "emit":
-                    result.type = DefineVueType.Emit;
-                    result.propertyTypeAsString = getPropertyType(ce.typeArguments.params[0]);
-                    break;
-                default:
-                    getNameProperty(ce.callee.object, result);
-            }
-        }
-    }
     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") {
-                    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: ""
-                                    };
-                                    getNameProperty(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;
-                                    }
-                                }
-                            });
-                        }
-                    });
-                }
-            });
+            const elementName = wc.componentOptions.elementName;
+            const result = (0, shared_1.extractVueComponentInfo)(wcPath);
+            docResult[elementName] = {
+                emits: result.emits,
+                models: result.models,
+                props: result.props,
+                slots: result.slots
+            };
         }
         catch (ex) {
             tooling_1.utils.log(`Have a exception when extract doc$ for web component manifest -> ${wc.manifestPath}`, tooling_1.utils.LogTypes.Error);
@@ -171,35 +32,18 @@ async function generateComponentTypingsAndDoc(componentRegistrations) {
         }
     }
     let docPath = path_1.default.resolve(__dirname, "ComponentDocRegistrations.ts");
-    ;
-    const wcNamespace = (0, shared_1.getBuildOption)()?.webComponentNamespace;
-    const info = shared_1.ConfigurationManager.outputInfo.get();
-    info.wc = {
-        namespace: wcNamespace,
-        mappings: {}
-    };
-    let wcTypings = wcNamespace ? `
+    let wcTypings = `
 //{{importWC}}
-declare global {
-    namespace JSX {
-        interface Element { }
-        interface ElementClass { }
 
-        interface IntrinsicElements {
-            //{{elementName}}
-        }
+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 {
-    let ${wcNamespace}: {
-        //{{nselementName}}
-    };
-}
-`
-        : `
-//{{importWC}}
-    declare global {
     namespace JSX {
         interface Element { }
         interface ElementClass { }
@@ -217,10 +61,34 @@ declare global {
         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);
-        await buildDoc(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";
@@ -242,7 +110,7 @@ extendApi(api => api.fx.docs.registrations, api => {
             .registerResources({
             resourcePaths: ["./ComponentDocRegistrations.ts"]
         })
-            .withTarget(fx_models_1.ClientManifestTargetTypes.Docs)
+            .withTarget(fx_models_1.ClientManifestTargetTypes.docs)
             .extendApi(api => api.fx.docs.registrations);
         tooling_composers_1.ManifestRegistry.setCurrentManifestPath();
     }
@@ -251,7 +119,7 @@ extendApi(api => api.fx.docs.registrations, api => {
     tooling_1.utils.logTime('Done - Generate components typings and documentation', startTime);
 }
 exports.generateComponentTypingsAndDoc = generateComponentTypingsAndDoc;
-function generateWebComponentTypings(wc, template, info) {
+function generateWebComponentTypings(wc, template, info, elementNamespace) {
     // export default defineVueWebComponent
     const wcPath = wc.componentOptions.entryPointPath;
     let content = fsExtra.readFileSync(wcPath, 'utf8');
@@ -270,16 +138,32 @@ function generateWebComponentTypings(wc, template, info) {
         else {
             importPath = `../../../../${importPath}`;
         }
-        let elementNamePascalCase = wc.componentOptions.elementName.replace("omfx-", "").replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
-        elementNamePascalCase = elementNamePascalCase[0].toUpperCase() + elementNamePascalCase.substring(1, elementNamePascalCase.length);
-        info.wc.mappings[elementNamePascalCase] = wc.componentOptions.elementName;
+        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}`;
+            }
+            if (info.wc.namespaces && info.wc.namespaces.indexOf(elementName.split(".")[0]) === -1) {
+                info.wc.namespaces.push(elementName.split(".")[0]);
+            }
+            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}.propsDefinition & Omit<VueComponentBaseProps, keyof typeof ${friendlyManifestId}.propsDefinition>
-//{{elementName}}`)
-            .replace(/\/\/{{nselementName}}/, `"${elementNamePascalCase}": { new(...args: any[]): { $props: typeof ${friendlyManifestId}.propsDefinition & Omit<VueComponentBaseProps, keyof typeof ${friendlyManifestId}.propsDefinition> } }
-            //{{nselementName}}`);
+            .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;
 }
@@ -309,3 +193,34 @@ function importSnippetCode(content, filePath) {
     return result;
 }
 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] = {};
+            }
+        }
+        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") {
+                    tooling_1.utils.log(`Generate namespace for component with suffix $ -> ${parts.slice(0, i + 1).join(".")}$`);
+                    namespace[`${name}$`] = namespace[name];
+                    namespace[name] = {};
+                }
+                namespace = namespace[name];
+            }
+        }
+    }
+}