@omnia/tooling-vue 8.0.5-vnext → 8.0.6-dev-dev

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

@@ -1,23 +1,26 @@
 'use strict';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addDependency = exports.processManifestGenerated = exports.checkDuplicateBundle = exports.registerWebComponentDefinitions = exports.registerManifestsReference = exports.createCombinedManfest = exports.createVueWebpackConfig = exports.cleanUpComposer = exports.getBuildOption = exports.getServiceId = exports.bundleManifest = exports.ensureManifestDependencyInRuntime = void 0;
+exports.addDependency = exports.processManifestGenerated = exports.checkDuplicateBundle = exports.registerManifestsReference = exports.createCombinedManfest = exports.createVueWebpackConfig = exports.cleanUpComposer = exports.getBuildOption = exports.getServiceId = exports.bundleManifest = exports.ensureManifestDependencyInRuntime = void 0;
 const tslib_1 = require("tslib");
 const path_1 = tslib_1.__importDefault(require("path"));
 const del_1 = tslib_1.__importDefault(require("del"));
 const fsExtra = tslib_1.__importStar(require("fs-extra"));
-const globby = tslib_1.__importStar(require("globby"));
+const globby_1 = require("globby");
 const terser_1 = require("terser");
 const ts_loader_1 = tslib_1.__importDefault(require("../webpack-loaders/ts-loader"));
 const tsx_loader_1 = tslib_1.__importDefault(require("../webpack-loaders/tsx-loader"));
+const tooling_composers_1 = require("@omnia/tooling-composers");
 const fx_models_1 = require("@omnia/fx-models");
 const $ = tslib_1.__importStar(require("../variables"));
 const shared_1 = require("../shared");
 const tooling_1 = require("@omnia/tooling");
+const doc_1 = require("./doc");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ConcatSource = require('webpack-core/lib/ConcatSource');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const isEqual = require('lodash/isEqual');
-let outDirManifestMetadata = "client/tooling/vue/output_manifests", _manifestsEntry = {}, _registeredReferenceManifests = [], serviceId = null, _modulesStats = {}, _manifestsStats = {}, keepTrackbuildOptions = {}, _transformResourcepaths = [], wcDomProps, _wcDefinitions = {};
+const vendorProdId = "aaf89b2d-5ea8-4b79-946a-8c1e89f713a3";
+let outDirManifestMetadata = "client/tooling/vue/output_manifests", _manifestsEntry = {}, _registeredReferenceManifests = [], serviceId = null, _modulesStats = {}, _manifestsStats = {}, keepTrackbuildOptions = {}, _transformResourcepaths = [];
 if ($.isExtensionEnv) {
     outDirManifestMetadata = "node_modules/@omnia/tooling-vue/internal-do-not-import-from-here/output_manifests";
 }
@@ -35,8 +38,27 @@ $.tooling.core.registerBuildTask({
     order: 2,
     task: function () {
         return new Promise(function (resolve, reject) {
-            buildWebpackEntries()
-                .then(resolve, reject);
+            buildEntries()
+                .then((result) => {
+                if (process.argv.length > 0 && process.argv.find(argv => argv === "--package") !== undefined) {
+                    resolve(result);
+                }
+                else {
+                    let startTime = new Date().getTime();
+                    tooling_1.utils.log("Typescript checking...");
+                    const spawn = require("child_process").spawn;
+                    spawn("node", [path_1.default.resolve(__dirname, "./tsc.js")], { stdio: "inherit", })
+                        .on('exit', (code) => {
+                        if (code == 0) {
+                            tooling_1.utils.logTime('Done - Typescript', startTime);
+                            resolve(result);
+                        }
+                        else {
+                            process.exit(code);
+                        }
+                    });
+                }
+            }, reject);
         });
     }
 });
@@ -50,7 +72,7 @@ $.tooling.core.registerServeTask({
                 fsExtra.removeSync("node_modules/tiptap-commands/node_modules");
                 fsExtra.removeSync("node_modules/tiptap-utils/node_modules");
             }
-            buildWebpackEntries(true)
+            buildEntries(true)
                 .then(resolve, reject);
         });
     }
@@ -169,82 +191,38 @@ function clean() {
     return new Promise(function (resolve, reject) {
         del_1.default.sync("node_modules/.cache");
         del_1.default.sync($.tooling.utils.root(outDirManifestMetadata + "/manifest.entries.cached.json"));
-        if ($.isExtensionEnv) {
-            del_1.default.sync($.path.resolve(__dirname, "../wctypings.ts"));
-        }
-        else {
-            del_1.default.sync($.path.resolve(__dirname, `../bb000000-0000-bbbb-0000-0000000000bb.wctypings.ts`));
-        }
+        shared_1.ConfigurationManager.webComponentTypings.delete();
         resolve();
     });
 }
-function buildWebpackEntries(serve = false) {
-    return new Promise(function (resolve, reject) {
+function buildEntries(serve = false) {
+    return new Promise(async function (resolve, reject) {
         try {
-            var startTime = new Date().getTime();
+            let startTime = new Date().getTime();
             var componentRegistry = $.composers.ComponentRegistry;
             let componentRegistrations = componentRegistry.getRegistrations();
+            const serviceInfo = $.composers.ServiceManifestRegistry.getServiceInfo();
+            startTime = new Date().getTime();
             $.tooling.logTime("Found [" + componentRegistrations.length + "] component registrations", startTime);
+            let componentEntries = createVueEntryFormComponentRegistrations(componentRegistrations);
+            if (serviceInfo.serviceType === tooling_composers_1.ServiceTypes.WebApp) {
+                await (0, doc_1.generateComponentTypingsAndDoc)(componentRegistrations);
+            }
             var resourceRegistry = $.composers.ResourceRegistry;
             let resourceBundlesWithBuildOptions = resourceRegistry.getRegisteredResourceBundles(shared_1.convertManifestPathToEntryPath);
-            $.tooling.logTime("Found [" + (resourceBundlesWithBuildOptions ? Object.keys(resourceBundlesWithBuildOptions).length : 0) + "] resource bundles", startTime);
+            $.tooling.logTime("Found [" + resourceBundlesWithBuildOptions?.size + "] resource bundles", startTime);
             let resourceEntries = {};
-            let wcDefinitionsPath, wcTypingsPath;
-            for (let key in resourceBundlesWithBuildOptions) {
-                let resource = resourceBundlesWithBuildOptions[key];
-                let manifest = $.composers.LoadableManifestRegistry.getRegisteredManifest(key);
+            for (const res of resourceBundlesWithBuildOptions) {
+                let resource = res[1];
+                let manifest = $.composers.LoadableManifestRegistry.getRegisteredManifest(res[0]);
                 if (!resource.buildOptions) {
-                    resourceEntries[`${manifest.resourceName ? manifest.resourceName + "_" : ""}${key}`] = resource.paths;
+                    resourceEntries[`${manifest.resourceName ? manifest.resourceName + "_" : ""}${res[0]}`] = resource.paths;
                 }
                 else {
                     //Some special handling of buildoptions
-                    console.log("debug " + key + " has build options for paths " + resource.paths + " buildoptions: " + JSON.stringify(resource.buildOptions));
+                    console.log("debug " + res[0] + " has build options for paths " + resource.paths + " buildoptions: " + JSON.stringify(resource.buildOptions));
                 }
             }
-            //We only support typings for registered web components
-            wcDomProps = extractTypingsForComponents(componentRegistrations);
-            if (Object.keys(wcDomProps).length > 0) {
-                let wcDomPropsDesc = `Extracted web component typings for ${Object.keys(wcDomProps).length} component(s)`;
-                $.tooling.logTime(wcDomPropsDesc, startTime);
-            }
-            if ($.isExtensionEnv) {
-                wcDefinitionsPath = $.path.resolve(__dirname, "../wcdefinitions.json");
-                wcTypingsPath = $.path.resolve(__dirname, "../wctypings.ts");
-            }
-            else {
-                wcDefinitionsPath = $.path.resolve(__dirname, `../${getServiceId().toLowerCase()}.wcdefinitions.json`);
-                wcTypingsPath = $.path.resolve(__dirname, `../${getServiceId().toLowerCase()}.wctypings.ts`);
-            }
-            // have issue in devops need to ensure file exist first.
-            fsExtra.ensureFileSync(wcDefinitionsPath);
-            fsExtra.writeJsonSync(wcDefinitionsPath, wcDomProps);
-            let wcTypings = `
-//{{importWC}}
-declare global {
-    namespace JSX {
-        interface Element { }
-        interface ElementClass { }
-
-        interface IntrinsicElements {
-            //{{elementName}}
-        }
-    }
-}
-`;
-            if ($.isExtensionEnv) {
-                wcTypings = `import { VueComponentBaseProps } from "@omnia/fx/ux";
-                ${wcTypings}`;
-            }
-            else {
-                wcTypings = `import { VueComponentBaseProps } from "../../../client/fx/ux/index";
-                ${wcTypings}`;
-            }
-            componentRegistrations.forEach(wc => {
-                wcTypings = generateWebComponentTypings(wc, wcTypings);
-            });
-            fsExtra.outputFileSync(wcTypingsPath, wcTypings);
-            wcDomProps = $.merge(wcDomProps, getRegisteredWebComponentDefinitions());
-            let componentEntries = createVueEntryFormRegistrations(componentRegistrations);
             var entries = $.merge(componentEntries, resourceEntries);
             if (checkDuplicateWebpackEntryPoints(entries)) {
                 $.tooling.log('Build manifests metadata have error that found duplicated resource path', $.tooling.LogTypes.Error);
@@ -295,7 +273,15 @@ function buildManifestMetadatas(entries) {
                 return;
             }
             $.tooling.log('Build manifests metadata running...', $.tooling.LogTypes.HeadLine);
-            let updateMetadataFiles = () => {
+            let webpackConfigs = [];
+            Object.keys(entries).forEach((id) => {
+                var entry = {};
+                entry[id] = entries[id];
+                var vueWebpackConfig = createWebpackConfigForManifestMetadata(entry, outputDir);
+                webpackConfigs.push(vueWebpackConfig);
+            });
+            let compiler = $.webpack(webpackConfigs);
+            compiler.run((err, stats) => {
                 Object.keys(entries).forEach((entry) => {
                     let manifestPath = outputDir + "/" + entry + '.manifest.json';
                     if ($.fs.existsSync($.tooling.utils.root(manifestPath))) {
@@ -309,17 +295,6 @@ function buildManifestMetadatas(entries) {
                         $.fs.writeFileSync(manifestPath, JSON.stringify(manifestJson));
                     }
                 });
-            };
-            let webpackConfigs = [];
-            Object.keys(entries).forEach((id) => {
-                var entry = {};
-                entry[id] = entries[id];
-                var vueWebpackConfig = createWebpackConfigForManifestMetadata(entry, outputDir);
-                webpackConfigs.push(vueWebpackConfig);
-            });
-            let compiler = $.webpack(webpackConfigs);
-            compiler.run((err, stats) => {
-                updateMetadataFiles();
                 $.del.sync([outputDir + '/*.js']);
                 if (err) {
                     $.tooling.logTime(`Build manifests metadata have an exception`, startTime);
@@ -374,16 +349,33 @@ function beforeBundleManifest(entries) {
                 isRunBuildMetadata = !isEqual(entries, cachedEntries);
             }
             if (isRunBuildMetadata) {
-                let entriesToBuild = entries;
-                if (!getBuildOption().allowShareWCManifestBundle) {
-                    let reourceRegistrationsKeys = Object.keys($.composers.ResourceRegistry.getResourceRegistrations());
-                    entriesToBuild = {};
-                    Object.keys(entries).forEach(entry => {
-                        if (reourceRegistrationsKeys.find(rk => entry.indexOf(rk) > -1)) {
-                            entriesToBuild[entry] = entries[entry];
-                        }
-                    });
-                }
+                // cleanup before generate
+                del_1.default.sync(outDirManifestMetadata);
+                const entriesToBuild = {};
+                const resourceRegistrations = Array.from($.composers.ResourceRegistry.getResourceRegistrations().keys());
+                const wcRegistrations = $.composers.ComponentRegistry.getComponentRegistrations();
+                Object.keys(entries).forEach(name => {
+                    if (resourceRegistrations.find(rk => name.indexOf(rk.toString()) > -1)) {
+                        entriesToBuild[name] = entries[name];
+                    }
+                    // generate manifest metadata for wc
+                    else if (wcRegistrations.find(rk => name.indexOf(rk.manifest.resourceId.toString()) > -1)) {
+                        const manifestPath = $.tooling.utils.root(outDirManifestMetadata + "/" + name + '.manifest.json');
+                        const content = {
+                            name: `omniaWebpackJsonp['${getServiceId()}']['${$.tooling.utils.getGuidValue(name)}']`,
+                            content: {
+                                [entries[name][0]]: {
+                                    id: entries[name][0].toLowerCase(),
+                                    buildMeta: {
+                                        exportsType: "namespace"
+                                    }
+                                }
+                            }
+                        };
+                        fsExtra.ensureFileSync(manifestPath);
+                        fsExtra.writeJsonSync(manifestPath, content);
+                    }
+                });
                 buildManifestMetadatas(entriesToBuild).then(() => {
                     fsExtra.ensureFileSync(cachedEntriesPath);
                     fsExtra.writeJsonSync(cachedEntriesPath, entries);
@@ -397,7 +389,6 @@ function beforeBundleManifest(entries) {
     });
 }
 function bundleManifest(entries) {
-    var startTime = new Date().getTime();
     return new Promise(function (resolve, reject) {
         try {
             // Hacky solution to delete node_modules inside tiptap regarding miss match version prosemirror
@@ -439,14 +430,18 @@ function bundleManifest(entries) {
             }
             else {
                 let webpackConfigs = [];
+                var startTime = new Date().getTime();
+                // $.tooling.logTime('Build Webpack Config running', startTime);
                 Object.keys(entries).forEach((id) => {
                     var entry = {};
                     entry[id] = entries[id];
                     var vueWebpackConfig = createVueWebpackConfig(entry, entries, $.tooling.composer.OmniaOutput.OutputBundlePath);
                     webpackConfigs.push(vueWebpackConfig);
                 });
+                // $.tooling.logTime('Build Webpack Config - done', startTime);
                 let compiler = $.webpack(webpackConfigs);
                 compiler.run((err, stats) => {
+                    //console.log("webpack run -done")
                     if (checkDuplicateBundle()) { // detect duplicated bundle
                         $.tooling.log('Bundle manifest have error that found duplicated bundles', $.tooling.LogTypes.Error);
                         reject();
@@ -528,68 +523,48 @@ function minifyBundles() {
         if (process.argv.length > 0 && process.argv.find(argv => argv === "--minify") !== undefined) {
             let startTime = new Date().getTime();
             $.tooling.log('Minify bundles running...');
-            const jsPaths = globby.sync([`${$.tooling.utils.root($.tooling.composer.OmniaOutput.OutputBundlePath)}/*.js`]);
+            const jsPaths = (0, globby_1.globbySync)([`${$.tooling.utils.root($.tooling.composer.OmniaOutput.OutputBundlePath)}/*.js`]);
             let promises = [];
             jsPaths.forEach(filePath => {
                 promises.push(new Promise(async (resolve, reject) => {
-                    $.tooling.log(`Minify Js -> ${filePath}`);
-                    let content = await fsExtra.readFile(filePath, 'utf8');
-                    let minified = await (0, terser_1.minify)(content, {
-                        sourceMap: false,
-                        ecma: 5 // will remove es5 when not support IE 11
-                    });
-                    await fsExtra.writeFile(`${filePath.substring(0, filePath.length - 3)}.min.js`, minified.code, 'utf8');
-                    $.tooling.log(`Minify Js Done -> ${filePath}`);
-                    resolve();
+                    try {
+                        $.tooling.log(`Minify Js -> ${filePath}`);
+                        // only minify for omnia.vendor.prod
+                        if (filePath.indexOf(fx_models_1.OmniaResourceManifests.Vendor.toString()) === -1) {
+                            let content = await fsExtra.readFile(filePath, 'utf8');
+                            let outFileName = `${filePath.substring(0, filePath.length - 3)}.min.js`;
+                            if (filePath.indexOf(vendorProdId) > -1) {
+                                content = content.replace(new RegExp(vendorProdId, "g"), fx_models_1.OmniaResourceManifests.Vendor.toString());
+                                outFileName = `${$.tooling.utils.root($.tooling.composer.OmniaOutput.OutputBundlePath)}/omnia.vendor_6270b632-1f44-4146-bace-137131c0471b.min.js`;
+                            }
+                            let minified = await (0, terser_1.minify)(content, {
+                                sourceMap: false,
+                                ecma: 2020 // will remove es5 when not support IE 11
+                            });
+                            await fsExtra.writeFile(outFileName, minified.code, 'utf8');
+                            $.tooling.log(`Minify Js Done -> ${filePath}`);
+                        }
+                        resolve();
+                    }
+                    catch (ex) {
+                        tooling_1.utils.log(`Have a exception when minify the file  -> ${filePath}`, tooling_1.utils.LogTypes.Error);
+                        console.error(ex);
+                        resolve();
+                        throw new Error("Exit, have an exception.");
+                    }
                 }));
             });
             Promise.all(promises).then(() => {
                 $.tooling.logTime('Done - Minify Js bundles', startTime);
                 resolve();
             });
-            //const debug = require('gulp-debug');
-            //const cleanCSS = require('gulp-clean-css');
-            //let processing = 2;
-            //let complete = () => {
-            //    --processing;
-            //    if (processing === 0) {
-            //        resolve();
-            //    }
-            //}
-            //$.gulp
-            //    .src(`${$.tooling.utils.root($.tooling.composer.OmniaOutput.OutputBundlePath)}/*.js`)
-            //    .pipe(debug({ title: 'Minify Js ->' }))
-            //    .pipe(terser({
-            //        ecma: 5 // will remove es5 when not support IE 11
-            //    }))
-            //    .pipe(rename(function (path) {
-            //        path.basename += ".min";
-            //    }))
-            //    .pipe(debug({ title: 'Minify Js Done ->' }))
-            //    .pipe($.gulp.dest($.tooling.utils.root($.tooling.composer.OmniaOutput.OutputBundlePath)))
-            //    .on('end', () => {
-            //        $.tooling.logTime('Done - Minify Js bundles', startTime);
-            //        complete();
-            //    })
-            //$.gulp.src(`${$.tooling.utils.root($.tooling.composer.OmniaOutput.OutputBundlePath)}/*.css`)
-            //    .pipe(debug({ title: 'Minify Css ->' }))
-            //    .pipe(cleanCSS())
-            //    .pipe(rename(function (path) {
-            //        path.basename += ".min";
-            //    }))
-            //    .pipe(debug({ title: 'Minify Css Done ->' }))
-            //    .pipe($.gulp.dest($.tooling.utils.root($.tooling.composer.OmniaOutput.OutputBundlePath)))
-            //    .on('end', () => {
-            //        $.tooling.logTime('Done - Minify Css bundles', startTime);
-            //        complete();
-            //    })
         }
         else {
             resolve();
         }
     });
 }
-function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, hotModuleReload, viteHmrOption) {
+function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, viteHmrOption) {
     let buildOption = getBuildOption() || {};
     let isBundleCommonChunk = buildOption.bundleOptions && buildOption.bundleOptions.commonsChunk && buildOption.bundleOptions.commonsChunk.name;
     const extractCss = new MiniCssExtractPlugin({
@@ -630,7 +605,12 @@ function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, hotModul
             }
         }));
     }
-    let modifyContent = [];
+    let modifyContent = [
+        {
+            pattern: /\.doc\$(.*\))/g,
+            replacement: ''
+        }
+    ];
     if (buildOption.bundleOptions && buildOption.bundleOptions.removeSourceMap) {
         modifyContent.push({
             pattern: /# sourceMappingURL=(.*\.map)/g,
@@ -652,15 +632,18 @@ function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, hotModul
                 transform(data, opts) {
                     // build manifets stats to detect duplicate bundle
                     let entryName = Object.keys(data.assetsByChunkName)[0];
-                    _manifestsStats[entryName] = [];
-                    data.modules.filter(m => typeof m.id === 'string'
-                        && m.id.trim().length > 0
-                        && m.id.indexOf('dll-reference') === -1
-                        && m.identifier.indexOf('from dll-reference') === -1).forEach(module => {
-                        _manifestsStats[entryName].push(module.id);
-                        _modulesStats[module.id] = _modulesStats[module.id] || new Set();
-                        _modulesStats[module.id].add(entryName);
-                    });
+                    // ignore omnia.vendor.prod
+                    if (entryName.indexOf(vendorProdId) === -1) {
+                        _manifestsStats[entryName] = [];
+                        data.modules.filter(m => typeof m.id === 'string'
+                            && m.id.trim().length > 0
+                            && m.id.indexOf('dll-reference') === -1
+                            && m.identifier.indexOf('from dll-reference') === -1).forEach(module => {
+                            _manifestsStats[entryName].push(module.id);
+                            _modulesStats[module.id] = _modulesStats[module.id] || new Set();
+                            _modulesStats[module.id].add(entryName);
+                        });
+                    }
                 }
             }));
         }
@@ -686,25 +669,18 @@ function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, hotModul
             mangleExports: false,
             concatenateModules: true,
             //moduleIds: 'natural' as any
-        }, isBundleCommonChunk ? buildCommonChunk(entry) : {}),
+        }, isBundleCommonChunk && !viteHmrOption ? buildCommonChunk(entry) : {}),
         resolve: {
             modules: $.tooling.core.getWebpackResolveModules(),
             extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx', '.html', '.vue', '.less', '.styl'],
             symlinks: false,
             cacheWithContext: true,
             descriptionFiles: ['package.json'],
-            alias: Object.assign({}, $.tooling.core.getWebpackResolveAlias(), {
-                'tiptap$': 'tiptap/dist/tiptap.esm.js',
-                'tiptap-utils$': 'tiptap-utils/dist/utils.esm.js',
-                'tiptap-extensions$': 'tiptap-extensions/dist/extensions.esm.js',
-                'tiptap-commands$': 'tiptap-commands/dist/commands.esm.js',
-                'w3c-keyname$': $.path.resolve($.tooling.utils.root(""), 'node_modules/w3c-keyname/index.es.js'),
+            alias: Object.assign({}, $.tooling.core.getWebpackResolveAlias(), (getBuildOption()?.moduleOptions?.alias || {}), {
                 'axios$': 'axios/dist/axios.js',
                 'typestyle$': 'typestyle/lib.es2015/index.js',
-                'vue$': 'vue/dist/vue.esm-bundler.js',
-                'rope-sequence$': 'rope-sequence/dist/index.js',
-                'orderedmap$': 'orderedmap/index.js',
-                '@microsoft/signalr': '@microsoft/signalr/dist/webworker/signalr.js',
+                'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
+                '@microsoft/signalr$': '@microsoft/signalr/dist/webworker/signalr.js',
             }),
         },
         target: ['web', 'es2022'],
@@ -727,9 +703,8 @@ function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, hotModul
                         fullySpecified: false, // disable the behaviour
                     },
                 },
-                ...(0, ts_loader_1.default)(getBuildOption().enableTreeShaking),
-                ...(0, tsx_loader_1.default)(getBuildOption().enableTreeShaking, wcDomProps, hotModuleReload),
-                // ...jsxLoader(getBuildOption().enableTreeShaking, wcDomProps, hotModuleReload),
+                ...(0, ts_loader_1.default)(),
+                ...(0, tsx_loader_1.default)(),
                 {
                     // remove vuetify locale
                     test: (path) => {
@@ -856,7 +831,7 @@ function createVueWebpackConfig(currentEntry, entries, bundleOutputDir, hotModul
 exports.createVueWebpackConfig = createVueWebpackConfig;
 function createWebpackConfigForManifestMetadata(entry, metadataOutputDir) {
     var entensionId = getServiceId();
-    return Object.assign({}, (0, shared_1.getBaseWebpackConfigForManifestMetadata)(entry, metadataOutputDir, wcDomProps, getBuildOption().enableTreeShaking), {
+    return Object.assign({}, getBaseWebpackConfigForManifestMetadata(entry, metadataOutputDir), {
         plugins: [
             ...buildReferenceManifestFromConfig(),
             new $.omniaWebpackPlugins.NamedModulesPlugin(buildModuleName()),
@@ -868,6 +843,117 @@ function createWebpackConfigForManifestMetadata(entry, metadataOutputDir) {
         ]
     });
 }
+function getBaseWebpackConfigForManifestMetadata(entry, bundleOutputDir) {
+    return {
+        devtool: false,
+        mode: 'development',
+        context: $.tooling.utils.root(""),
+        entry: entry,
+        optimization: Object.assign({
+            removeAvailableModules: false,
+            removeEmptyChunks: false,
+            splitChunks: false,
+        }),
+        resolve: {
+            modules: $.tooling.core.getWebpackResolveModules(),
+            extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
+            //extensions: ['.js', '.jsx', '.ts', '.tsx', '.html', '.vue', '.less', '.styl'],
+            symlinks: false,
+            cacheWithContext: true,
+            descriptionFiles: ['package.json'],
+            alias: Object.assign({}, $.tooling.core.getWebpackResolveAlias(), ($.composers.BuildConfigurationRegistry.getBuildOptions()?.moduleOptions?.alias || {}), {
+                'axios$': 'axios/dist/axios.js',
+                'typestyle$': 'typestyle/lib.es2015/index.js',
+                'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
+                '@microsoft/signalr': '@microsoft/signalr/dist/webworker/signalr.js',
+            }),
+            //mainFields: ['main', 'browser', 'module']
+        },
+        output: {
+            pathinfo: false,
+            path: $.tooling.utils.root(bundleOutputDir),
+            filename: '[name].js'
+        },
+        externals: [
+            function ({ context, request }, callback) {
+                if (request.indexOf("node_modules") > -1 || (/\.(sass|scss|styl|less|css)$/i).test(request)) {
+                    return callback(null, 'commonjs ' + request);
+                }
+                callback();
+            }
+        ],
+        module: {
+            noParse: /wwwroot(.*)/,
+            rules: [
+                {
+                    test: /\.m?js$/,
+                    resolve: {
+                        fullySpecified: false, // disable the behaviour
+                    },
+                },
+                ...(0, ts_loader_1.default)(),
+                ...(0, tsx_loader_1.default)(),
+                {
+                    test: /\.styl$/,
+                    use: [
+                        //'style-loader',
+                        //'css-loader',
+                        'stylus-loader'
+                    ]
+                },
+                ...($.isExtensionEnv ? [] : [{
+                        test: /\.s(c|a)ss$/,
+                        use: [
+                            {
+                                loader: 'sass-loader',
+                                options: {
+                                    implementation: require('sass'),
+                                    sassOptions: {
+                                        //fiber: require('fibers'),
+                                        indentedSyntax: true
+                                    }
+                                    //fiber: require('fibers')
+                                }
+                            }
+                        ]
+                    }]),
+                {
+                    test: /\.less$/,
+                    use: [
+                        //'style-loader',
+                        //'css-loader',
+                        'less-loader'
+                    ]
+                },
+                {
+                    test: /\.css$/,
+                    use: [
+                        //'style-loader',
+                        {
+                            loader: 'css-loader'
+                        }
+                    ]
+                },
+                {
+                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                    loader: 'url-loader'
+                },
+                {
+                    test: /\.(ico|gif|png|jpe?g|svg)$/i,
+                    use: [{
+                            loader: 'file-loader',
+                            options: {
+                                name: '[name].[ext]',
+                                outputPath: "../images/",
+                                publicPath: '/omnia/images/'
+                            }
+                        }]
+                    //loader: 'url-loader'
+                }
+            ]
+        }
+    };
+}
 function buildCommonChunk(entry) {
     let bundleOptions = getBuildOption().bundleOptions;
     let minChunk = bundleOptions.commonsChunk.minChunks || 2;
@@ -903,7 +989,7 @@ function buildCommonChunk(entry) {
 function processManifestGenerated(entries, outDir) {
     var allowJsOutputExtensions = [".js", ".ts", ".tsx", ".jsx", ".vue"];
     if (entries) {
-        var manifestsPaths = globby.sync(outDir.replace(/\/$/, '') + '/*.*', {});
+        var manifestsPaths = (0, globby_1.globbySync)(outDir.replace(/\/$/, '') + '/*.*', {});
         if (manifestsPaths) {
             for (let p of manifestsPaths) {
                 var manifestId = $.tooling.utils.getGuidValue($.tooling.utils.getFileName(p));
@@ -1121,7 +1207,8 @@ function buildReferenceManifest(currentEntry, entries) {
         return dynamicReferenceManifests.concat(buildReferenceManifestFromConfig());
     var currentEntryName = Object.keys(currentEntry)[0];
     // exclude omnia vendor
-    if (currentEntryName.indexOf(fx_models_1.OmniaResourceManifests.Vendor.toString()) === -1) {
+    if (currentEntryName.indexOf(fx_models_1.OmniaResourceManifests.Vendor.toString()) === -1
+        && currentEntryName.indexOf(vendorProdId) === -1) {
         Object.keys(entries).forEach((entryName) => {
             if (entryName !== currentEntryName) {
                 if ($.fs.existsSync($.tooling.utils.root(outDirManifestMetadata + "/" + entryName + ".manifest.json"))) {
@@ -1173,7 +1260,8 @@ function buildModuleName() {
                 replace: function (modulePath) {
                     var buildOptions = getBuildOption();
                     if (buildOptions && buildOptions.moduleOptions && buildOptions.moduleOptions.enableTransformResourcePath) {
-                        if (modulePath.indexOf('./node_modules/') === -1 // ignore from npm package
+                        if (modulePath.indexOf('./node_modules/') === -1 // ignore from npm package and in wwwwroot .js file
+                            && (modulePath.indexOf('./wwwroot/') === -1 || path_1.default.extname(modulePath) === ".js")
                             && modulePath.indexOf('./omnia/fx/models/ConfigurationComposers') === -1 // ignore comment interface for special case here
                             && $.fs.existsSync(modulePath)) {
                             let stream = $.fs.readFileSync(modulePath, 'utf8');
@@ -1232,89 +1320,18 @@ function getServiceId() {
     return serviceId;
 }
 exports.getServiceId = getServiceId;
-function extractTypingsForComponents(componentRegistrations) {
-    let foundTypes = {};
-    componentRegistrations.forEach((comp) => {
-        let defPaths = comp.componentOptions.typings;
-        if (defPaths) {
-            let isChildSpec = false;
-            defPaths.forEach((defPath) => {
-                let entryPointPath = (0, shared_1.convertManifestPathToEntryPath)(comp.manifestPath, [defPath])[0];
-                let contents = $.fs.readFileSync(entryPointPath, 'utf8');
-                let wcEl = getWcElement(contents, isChildSpec);
-                if (wcEl) {
-                    //Now lets find the interface mapped to element
-                    //example /*@WebComponentInterface("omfx-dialog")*/
-                    let interfaceToken = `/*@WebComponentInterface("${wcEl}")*/`;
-                    let interfaceIndex = contents.indexOf(interfaceToken);
-                    if (interfaceIndex > -1) {
-                        let wcProps = [];
-                        let intf = contents.substring(interfaceIndex);
-                        let nextIsDomProp = false;
-                        intf = intf
-                            .substring(intf.indexOf("{") + 1, intf.indexOf("}"))
-                            .replace(/\?/g, '')
-                            .trim()
-                            .split(/\r\n|\r|\n/g).forEach((group) => {
-                            /*@DomProperty*/
-                            let sub = group.trim();
-                            if (sub.indexOf("/*@DomProperty*/") > -1) {
-                                nextIsDomProp = true;
-                                return;
-                            }
-                            if (nextIsDomProp) {
-                                if (sub.indexOf(':')) {
-                                    sub = sub.split(':')[0];
-                                }
-                                if (sub) {
-                                    if (!foundTypes[wcEl]) {
-                                        foundTypes[wcEl] = [];
-                                    }
-                                    foundTypes[wcEl].push(sub);
-                                }
-                                nextIsDomProp = false;
-                            }
-                        });
-                    }
-                }
-                isChildSpec = true;
-            });
-        }
-    });
-    return foundTypes;
-}
-var lastWcElement = "";
-function getWcElement(contents, isChildSpec) {
-    if (isChildSpec) {
-        if (lastWcElement === "") {
-            new Error("Cant find the /*@DomProperty*/ on the parent interface for the WebComponent definition");
-        }
-        return lastWcElement;
-    }
-    else {
-        lastWcElement = "";
-    }
-    let wcElToken = "/*@WebComponent*/";
-    let wcElIndex = contents.indexOf(wcElToken);
-    let wcEl = "";
-    if (wcElIndex > -1) {
-        wcEl = contents.substring(wcElIndex);
-        wcEl = wcEl.substring(wcEl.indexOf('"') + 1);
-        wcEl = wcEl.substring(0, wcEl.indexOf('"'));
-        lastWcElement = wcEl;
-    }
-    return lastWcElement;
-}
-function createVueEntryFormRegistrations(registrations) {
+function createVueEntryFormComponentRegistrations(registrations) {
     let entryPaths = {};
     for (let r of registrations) {
-        if (r.componentOptions.entryPoint.endsWith('.jsx') || r.componentOptions.entryPoint.endsWith('.vue') || r.componentOptions.entryPoint.endsWith('.tsx') || r.componentOptions.entryPoint.endsWith('.ts')) {
+        if (r.componentOptions.entryPoint.endsWith('.tsx')
+            || r.componentOptions.entryPoint.endsWith('.vue')) {
             let entryPointPath = (0, shared_1.convertManifestPathToEntryPath)(r.manifestPath, [r.componentOptions.entryPoint]);
             let entryId = r.manifest.resourceId;
             if (r.manifest.resourceName) {
                 entryId = `${r.manifest.resourceName}_${entryId}`;
             }
-            entryPaths[entryId] = entryPointPath;
+            r.componentOptions.entryPointPath = entryPointPath[0];
+            entryPaths[entryId.toString()] = entryPointPath;
         }
         else {
             $.tooling.log('The OmniaFx build system only supports  .jsx, .vue and .tsx based components at the moment ', $.tooling.LogTypes.Error);
@@ -1325,7 +1342,6 @@ function createVueEntryFormRegistrations(registrations) {
 }
 function ensureManifestDependencyInRuntime(currentManifestId, manifestBundleFilePath) {
     let manifest = $.tooling.composer.getManifestById(currentManifestId);
-    let hasChanged = false;
     const content = fsExtra.readFileSync(manifestBundleFilePath, 'utf8');
     const addDependency = (dependOnmanifestId, dependOnServiceId) => {
         let hasNewDependency = false;
@@ -1349,7 +1365,7 @@ function ensureManifestDependencyInRuntime(currentManifestId, manifestBundleFile
                 if (manifestObject && manifestObject.content) {
                     Object.keys(manifestObject.content).forEach((modulePath) => {
                         if (content.indexOf(modulePath) > -1) {
-                            hasChanged = addDependency(manifest.resourceId, manifest.serviceId);
+                            addDependency(manifest.resourceId, manifest.serviceId);
                             return;
                         }
                     });
@@ -1369,7 +1385,8 @@ function ensureManifestDependencyInRuntime(currentManifestId, manifestBundleFile
             if (entryName.toLowerCase() !== currentManifestId.toString().toLowerCase()
                 && entryName.indexOf(fx_models_1.OmniaResourceManifests.FxWorkers.toString()) === -1
                 && entryName.indexOf(fx_models_1.OmniaResourceManifests.FxCore.toString()) === -1 /* ignore omnia.fx.core, omnia.fx.workers and vendor manifest because ith not loaded by our resource loader */
-                && entryName.indexOf(fx_models_1.OmniaResourceManifests.Vendor.toString()) === -1) {
+                && entryName.indexOf(fx_models_1.OmniaResourceManifests.Vendor.toString()) === -1
+                && entryName.indexOf(vendorProdId) === -1) {
                 for (let entryPointPath of _manifestsEntry[entryName]) {
                     if (!hasDependency) {
                         var transformresourcePath = _transformResourcepaths.find(resource => resource.original === entryPointPath);
@@ -1381,7 +1398,7 @@ function ensureManifestDependencyInRuntime(currentManifestId, manifestBundleFile
                             hasDependency = true;
                         }
                         if (hasDependency) {
-                            hasChanged = addDependency($.tooling.utils.getGuidValue(entryName));
+                            addDependency($.tooling.utils.getGuidValue(entryName));
                             break;
                         }
                     }
@@ -1389,10 +1406,6 @@ function ensureManifestDependencyInRuntime(currentManifestId, manifestBundleFile
             }
         });
     }
-    if (hasChanged) {
-        let manifestsData = $.tooling.composer.getManifestData();
-        $.tooling.composer.updateManifestData(manifestsData);
-    }
 }
 exports.ensureManifestDependencyInRuntime = ensureManifestDependencyInRuntime;
 function buildManifestsDependency(entries, manifestId, manifestBundleContent) {
@@ -1423,7 +1436,8 @@ function buildManifestsDependency(entries, manifestId, manifestBundleContent) {
             if (entryName.toLowerCase() !== manifestId.toLowerCase()
                 && entryName.indexOf(fx_models_1.OmniaResourceManifests.FxWorkers.toString()) === -1
                 && entryName.indexOf(fx_models_1.OmniaResourceManifests.FxCore.toString()) === -1 /* ignore omnia.fx.core, omnia.fx.workers and vendor manifest because ith not loaded by our resource loader */
-                && entryName.indexOf(fx_models_1.OmniaResourceManifests.Vendor.toString()) === -1) {
+                && entryName.indexOf(fx_models_1.OmniaResourceManifests.Vendor.toString()) === -1
+                && entryName.indexOf(vendorProdId) === -1) {
                 for (let entryPointPath of entries[entryName]) {
                     if (!hasDependency) {
                         var transformresourcePath = _transformResourcepaths.find(resource => resource.original === entryPointPath);
@@ -1482,15 +1496,12 @@ function chunkAsset(entries, compilation, fileName, viteHmrOption) {
 /******/ 	} 
 /******/ 	omniaLoader['${omniaServiceId}'] = omniaLoader['${omniaServiceId}'] || {};
 /******/
-/******/ 	function preBundle() {
+/******/ 	function hmrPreBundle() {
 ${content}
 /******/    }
 
-if (omniaLoader['${omniaServiceId}']['${manifestId}']){
-    omniaLoader['${omniaServiceId}']['${manifestId}'](preBundle);
-}
-else {
-    omniaLoader['${omniaServiceId}']['${manifestId}'] = preBundle;
+if (!omniaLoader['${omniaServiceId}']['${manifestId}']){
+    omniaLoader['${omniaServiceId}']['${manifestId}'] = hmrPreBundle;
 }`;
             }
             else if (viteHmrOption == 'dynamic') {
@@ -1562,7 +1573,8 @@ function checkDuplicateWebpackEntryPoints(entries) {
     let foundDuplicated = false;
     let entryPathInfos = {};
     Object.keys(entries).forEach(key => {
-        if (entries[key]) {
+        // skip omnia.vendor.prod
+        if (entries[key] && key.indexOf(vendorProdId) === -1) {
             entries[key].forEach(path => {
                 entryPathInfos[path] = entryPathInfos[path] || [];
                 entryPathInfos[path].push(key);
@@ -1577,13 +1589,6 @@ function checkDuplicateWebpackEntryPoints(entries) {
     });
     return foundDuplicated;
 }
-function isEnableMeasureBuild() {
-    let enableMeasure = $.composers.DevelopmentBuildConfiguration.isEnableMeasureBuild;
-    if (enableMeasure !== true && process.argv.length > 0) {
-        enableMeasure = process.argv.find(argv => argv === "--measure") !== undefined;
-    }
-    return enableMeasure;
-}
 function prefixCssSelector() {
     //var applyToSelectors = ['input', '::before', '::after'];
     //var applyToSelectors = ['select', 'textarea', 'button', 'input', '.btn', '.content', '.input-group', '.title', '.icon', '*'];
@@ -1602,56 +1607,31 @@ function prefixCssSelector() {
         //exclude: [/.v-tooltip__content/, /.v-menu__content/],
         //exclude: [/.v-select/],
         transform: function (prefix, selector, prefixedSelector) {
-            // Only apply html/body rule in omnia page.
-            if (selector === "html" || selector === "body") {
-                return `${selector}[data-omfx]`;
-            }
-            // exclude rule .v-application for web component
-            if (selector === '.v-application') {
-                return 'html .v-application:not([data-omwc])';
-            }
-            // fix issue <v-menu content-class="v-application" 
-            if (selector === '.v-menu__content') {
-                return 'html div.v-menu__content:not([data-omwc])';
-            }
-            if (selector.indexOf('.theme--light') === 0
-                || selector.indexOf('.theme--dark') === 0
-                || selector.indexOf('.v-application--is') > -1
-                || selector.indexOf('.v-tooltip__content') > -1
-                || selector.indexOf('.v-menu__content') > -1
-                || selector.indexOf('.v-dialog__content') > -1) {
-                //console.log(selector)
-                return `html ${selector}`;
-            }
-            return `[data-omfx] ${selector}, .v-menu__content ${selector}, .v-tooltip__content ${selector}, .v-dialog__content ${selector}`;
-            //// exclude rule .v-application for web component
-            //if (selector === '.v-application') {
-            //    return '.v-application:not([data-omwc])'
-            //}
-            //// Try to prevent warpper to some special preset like html, body,...etc.
-            ////if (selector === "html" || selector === "body") {
-            ////    return selector;
-            ////}
-            ////return `[data-omfx] ${selector}, .v-menu__content ${selector}, .v-tooltip__content ${selector}, .v-dialog__content ${selector}`
-            //let match = false;
-            //applyToSelectors.forEach(value => {
-            //    if (selector === value) {
-            //        match = true;
-            //        return;
-            //    }
-            //})
-            //if (match) {
-            //    return prefixedSelector;
-            //}
-            //// Need to wrapper to .v-tooltip__content, .v-menu__content and .v-dialog__content also because they render at the level below body.
-            //let prefixedClassSelectoreResult = selector;
-            //applyToClassSelector.forEach(value => {
-            //    if (selector === value || (selector.lastIndexOf(value) > -1 && selector.lastIndexOf(value) === selector.length - value.length)) {
-            //        prefixedClassSelectoreResult = `.v-application ${selector}, .v-menu__content ${selector}, .v-tooltip__content ${selector}, .v-dialog__content ${selector}`
-            //        return prefixedClassSelectoreResult;
-            //    }
-            //})
-            //return prefixedClassSelectoreResult;
+            return selector;
+            // temp comment out prefix rule below to testing with vuetify 3 in omnia page first.
+            // // Only apply html/body rule in omnia page.
+            // if (selector === "html" || selector === "body") {
+            //     return `${selector}[data-omfx]`;
+            // }
+            // // exclude rule .v-application for web component
+            // if (selector === '.v-application') {
+            //     return 'html .v-application:not([data-omwc])'
+            // }
+            // // fix issue <v-menu content-class="v-application" 
+            // if (selector === '.v-menu__content') {
+            //     return 'html div.v-menu__content:not([data-omwc])'
+            // }
+            // if (selector.indexOf('.theme--light') === 0
+            //     || selector.indexOf('.theme--dark') === 0
+            //     || selector.indexOf('.v-application--is') > -1
+            //     || selector.indexOf('.v-tooltip__content') > -1
+            //     || selector.indexOf('.v-overlay-container') > -1
+            //     || selector.indexOf('.v-menu__content') > -1
+            //     || selector.indexOf('.v-dialog__content') > -1) {
+            //     //console.log(selector)
+            //     return `html ${selector}`;
+            // }
+            // return `[data-omfx] ${selector}, .v-menu__content ${selector}, .v-overlay-container ${selector}, .v-tooltip__content ${selector}, .v-dialog__content ${selector}`
         }
     });
 }
@@ -1665,45 +1645,9 @@ exports.registerManifestsReference = registerManifestsReference;
 function getRegisteredReferenceManifests() {
     return _registeredReferenceManifests;
 }
-function registerWebComponentDefinitions(definitions) {
-    if (definitions) {
-        _wcDefinitions = $.merge(_wcDefinitions, definitions);
-    }
-}
-exports.registerWebComponentDefinitions = registerWebComponentDefinitions;
-function getRegisteredWebComponentDefinitions() {
-    return _wcDefinitions;
-}
 function sortString(a, b) {
     if (a >= b) {
         return 1;
     }
     return -1;
 }
-function generateWebComponentTypings(wc, template) {
-    // export default defineVueWebComponent
-    let wcPath = (0, shared_1.convertManifestPathToEntryPath)(wc.manifestPath, [wc.componentOptions.entryPoint])[0];
-    let content = fsExtra.readFileSync(wcPath, 'utf8');
-    if (content.indexOf("defineVueWebComponent") > -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.replace(/-/g, '').toLowerCase()}`;
-        let importPath = wcPath.substring(0, wcPath.lastIndexOf('.tsx'));
-        if (importPath.indexOf("./") === 0) {
-            importPath = importPath.replace("./", "");
-        }
-        if ($.isExtensionEnv) {
-            importPath = `../../../../${importPath}`;
-        }
-        else {
-            importPath = `../../../${importPath}`;
-        }
-        return template
-            .replace(/\/\/{{importWC}}/, `import ${friendlyManifestId} from '${importPath}';
-//{{importWC}}`)
-            .replace(/\/\/{{elementName}}/, `"${wc.componentOptions.elementName}": typeof ${friendlyManifestId}.propsDefinition & VueComponentBaseProps
-//{{elementName}}`);
-    }
-    return template;
-}