!712 Support compiling with Module

Merge pull request !712 from hufeng/master

compiler/src/compile_info.ts

@@ -220,7 +220,7 @@ export class ResultStates {
       if (lastModuleCollection && lastModuleCollection !== 'NULL') {
         lastModuleCollection.split(',').forEach(item => {
           moduleCollection.add(item);
-        })
+        });
       }
     }
     const moduleContent: string =

compiler/src/ets_checker.ts

@@ -36,6 +36,7 @@ import { JS_BIND_COMPONENTS } from './component_map';
 import { getName } from './process_component_build';
 import { INNER_COMPONENT_NAMES } from './component_map';
 import { props } from './compile_info';
+import { resolveSourceFile } from './resolve_ohm_url';
 
 function readDeaclareFiles(): string[] {
   const declarationsFileNames: string[] = [];
@@ -90,7 +91,7 @@ export function createLanguageService(rootFileNames: string[]): ts.LanguageServi
         return undefined;
       }
       if (/(?<!\.d)\.(ets|ts)$/.test(fileName)) {
-        const content: string = processContent(fs.readFileSync(fileName).toString());
+        const content: string = processContent(fs.readFileSync(fileName).toString(), fileName);
         checkUISyntax(content, fileName);
         return ts.ScriptSnapshot.fromString(content);
       }
@@ -109,6 +110,16 @@ export function createLanguageService(rootFileNames: string[]): ts.LanguageServi
   return ts.createLanguageService(servicesHost, ts.createDocumentRegistry());
 }
 
+function getOhmUrlFile(moduleName: string): {modulePath: string, suffix: string} {
+  const modulePath: string = resolveSourceFile(moduleName);
+  let suffix: string = path.extname(modulePath);
+  if (suffix === 'ts' && modulePath.endsWith('.d.ts')) {
+    suffix = '.d.ts';
+  }
+
+  return {modulePath, suffix};
+}
+
 function resolveModuleNames(moduleNames: string[], containingFile: string): ts.ResolvedModuleFull[] {
   const resolvedModules: ts.ResolvedModuleFull[] = [];
   for (const moduleName of moduleNames) {
@@ -122,6 +133,13 @@ function resolveModuleNames(moduleNames: string[], containingFile: string): ts.R
     });
     if (result.resolvedModule) {
       resolvedModules.push(result.resolvedModule);
+    } else if (/^@bundle:/.test(moduleName.trim())) {
+      const module: {modulePath: string, suffix: string} = getOhmUrlFile(moduleName.trim());
+      if (ts.sys.fileExists(module.modulePath)) {
+        resolvedModules.push(getResolveModule(module.modulePath, module.suffix));
+      } else {
+        resolvedModules.push(null);
+      }
     } else if (/^@(system|ohos)/.test(moduleName.trim())) {
       const modulePath: string = path.resolve(__dirname, '../../../api', moduleName + '.d.ts');
       if (ts.sys.fileExists(modulePath)) {
@@ -175,7 +193,7 @@ export function createWatchCompilerHost(rootFileNames: string[],
       return undefined;
     }
     if (/(?<!\.d)\.(ets|ts)$/.test(fileName)) {
-      const content: string = processContent(fs.readFileSync(fileName).toString());
+      const content: string = processContent(fs.readFileSync(fileName).toString(), fileName);
       checkUISyntax(content, fileName);
       return content;
     }
@@ -352,8 +370,8 @@ function processDraw(source: string): string {
   });
 }
 
-function processContent(source: string): string {
-  source = processSystemApi(source);
+function processContent(source: string, sourcePath: string): string {
+  source = processSystemApi(source, false, sourcePath);
   source = preprocessExtend(source, extendCollection);
   source = preprocessNewExtend(source, extendCollection);
   source = processDraw(source);

compiler/src/process_import.ts

@@ -46,6 +46,7 @@ import {
 } from './validate_ui_syntax';
 import { LogInfo, LogType } from './utils';
 import { projectConfig } from '../main';
+import { isOhmUrl, resolveSourceFile } from './resolve_ohm_url';
 
 export default function processImport(node: ts.ImportDeclaration | ts.ImportEqualsDeclaration |
   ts.ExportDeclaration, pagesDir: string, log: LogInfo[], asName: Map<string, string> = new Map(),
@@ -84,12 +85,15 @@ export default function processImport(node: ts.ImportDeclaration | ts.ImportEqua
       }
     }
   }
-  if (filePath && path.extname(filePath) !== EXTNAME_ETS && !isModule(filePath)) {
+  if (filePath && path.extname(filePath) !== EXTNAME_ETS && !isModule(filePath) && !isOhmUrl(filePath)) {
     filePath += EXTNAME_ETS;
   }
+
   try {
     let fileResolvePath: string;
-    if (/^(\.|\.\.)\//.test(filePath) && filePath.indexOf(NODE_MODULES) < 0) {
+    if (isOhmUrl(filePath) && filePath.indexOf(NODE_MODULES) < 0) {
+      fileResolvePath = resolveSourceFile(filePath);
+    } else if (/^(\.|\.\.)\//.test(filePath) && filePath.indexOf(NODE_MODULES) < 0) {
       fileResolvePath = path.resolve(pagesDir, filePath);
     } else if (/^\//.test(filePath) && filePath.indexOf(NODE_MODULES) < 0) {
       fileResolvePath = filePath;

compiler/src/resolve_ohm_url.ts

@@ -0,0 +1,84 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { logger } from './compile_info';
+const { projectConfig } = require('../main');
+
+const red: string = '\u001b[31m';
+const reset: string = '\u001b[39m';
+
+const REG_OHM_URL: RegExp = /^@bundle:(\S+)\/(\S+)\/(ets|js)\/(\S+)$/;
+
+export class OHMResolverPlugin {
+  private source: any;
+  private target: any;
+
+  constructor(source = 'resolve', target = 'resolve') {
+    this.source = source;
+    this.target = target;
+  }
+
+  apply(resolver) {
+    const target: any = resolver.ensureHook(this.target);
+    resolver.getHook(this.source).tapAsync('OHMResolverPlugin', (request, resolveContext, callback) => {
+      if (isOhmUrl(request.request)) {
+        const resolvedSourceFile: string = resolveSourceFile(request.request);
+        const obj = Object.assign({}, request, {
+          request: resolvedSourceFile
+        });
+        return resolver.doResolve(target, obj, null, resolveContext, callback);
+      }
+      callback();
+    });
+  }
+}
+
+export function isOhmUrl(moduleRequest: string): boolean {
+  return !!/^@(\S+):/.test(moduleRequest);
+}
+
+function addExtension(file: string, srcPath: string): string {
+  if (path.extname(file) !== '') {
+    return file;
+  }
+
+  let extension: string = '.d.ts';
+  if (fs.existsSync(file + '.ets') && fs.statSync(file + '.ets').isFile()) {
+    extension = '.ets';
+  }
+  if (fs.existsSync(file + '.ts') && fs.statSync(file + '.ts').isFile()) {
+    if (extension !== '.d.ts') {
+      logger.error(red, `ETS:ERROR Failed to compile with files with same name ${srcPath} in the same directory`, reset);
+    }
+    extension = '.ts';
+  }
+  if (fs.existsSync(file + '.js') && fs.statSync(file + '.js').isFile()) {
+    if (extension !== '.d.ts') {
+      logger.error(red, `ETS:ERROR Failed to compile with files with same name ${srcPath} in the same directory`, reset);
+    }
+    extension = '.js';
+  }
+  return file + extension;
+}
+
+export function resolveSourceFile(ohmUrl: string): string {
+  const result: RegExpMatchArray = ohmUrl.match(REG_OHM_URL);
+  const moduleName: string = result[2];
+  const srcKind: string = result[3];
+
+  let file: string = '';
+
+  if (projectConfig.aceBuildJson) {
+    const modulePath: string = projectConfig.modulePathMap[moduleName];
+    file = path.join(modulePath, 'src/main', srcKind, result[4]);
+  } else {
+    logger.error(red, `ETS:ERROR Failed to resolve OhmUrl because of aceBuildJson not existing `, reset);
+  }
+
+  file = addExtension(file, result[4]);
+
+  if (!fs.existsSync(file) || !fs.statSync(file).isFile()) {
+    logger.error(red, `ETS:ERROR Failed to resolve existed file by this ohm url ${ohmUrl} `, reset);
+  }
+
+  return file;
+}

compiler/src/validate_ui_syntax.ts

@@ -15,6 +15,7 @@
 
 import ts from 'typescript';
 import path from 'path';
+import fs from 'fs';
 
 import {
   INNER_COMPONENT_DECORATORS,
@@ -58,19 +59,21 @@ import {
   EXTEND_ATTRIBUTE,
   GLOBAL_STYLE_FUNCTION,
   STYLES_ATTRIBUTE,
-  CUSTOM_BUILDER_METHOD,
+  CUSTOM_BUILDER_METHOD
 } from './component_map';
 import {
   LogType,
   LogInfo,
   componentInfo,
   addLog,
-  hasDecorator
+  hasDecorator,
+  toUnixPath
 } from './utils';
 import { projectConfig } from '../main';
 import { collectExtend } from './process_ui_syntax';
-import { importModuleCollection } from './ets_checker';
 import { isExtendFunction } from './process_ui_syntax';
+import { isOhmUrl } from './resolve_ohm_url';
+import { logger } from './compile_info';
 
 export interface ComponentCollection {
   localStorageName: string;
@@ -129,6 +132,7 @@ export const localStoragePropCollection: Map<string, Map<string, Set<string>>> =
 
 export const isStaticViewCollection: Map<string, boolean> = new Map();
 
+export const packageCollection: Map<string, Array<string>> = new Map();
 export const moduleCollection: Set<string> = new Set();
 export const useOSFiles: Set<string> = new Set();
 
@@ -841,66 +845,183 @@ export function preprocessNewExtend(content: string, extendCollection?: Set<stri
   });
 }
 
-export function processSystemApi(content: string, isProcessAllowList: boolean = false,
-  sourcePath: string = null, isSystemModule: boolean = false): string {
-  let REG_SYSTEM: RegExp;
-  if (isProcessAllowList) {
-    REG_SYSTEM =
-      /(import|const)\s+(.+)\s*=\s*(\_\_importDefault\()?require\(\s*['"]@(system|ohos)\.(\S+)['"]\s*\)(\))?/g;
-  } else {
-    REG_SYSTEM =
-      /import\s+(.+)\s+from\s+['"]@(system|ohos)\.(\S+)['"]|import\s+(.+)\s*=\s*require\(\s*['"]@(system|ohos)\.(\S+)['"]\s*\)/g;
+function getPackageInfo(configFile: string): Array<string> {
+  if (packageCollection.has(configFile)) {
+    return packageCollection.get(configFile);
   }
-  const REG_LIB_SO: RegExp =
-    /import\s+(.+)\s+from\s+['"]lib(\S+)\.so['"]|import\s+(.+)\s*=\s*require\(\s*['"]lib(\S+)\.so['"]\s*\)/g;
-  const systemValueCollection: Set<string> = new Set();
-  const newContent: string = content.replace(REG_LIB_SO, (_, item1, item2, item3, item4) => {
-    const libSoValue: string = item1 || item3;
-    const libSoKey: string = item2 || item4;
-    if (sourcePath) {
-      useOSFiles.add(sourcePath);
-    }
-    return `var ${libSoValue} = globalThis.requireNapi("${libSoKey}", true);`;
-  }).replace(REG_SYSTEM, (item, item1, item2, item3, item4, item5, item6, item7) => {
-    let moduleType: string = item2 || item5;
-    let systemKey: string = item3 || item6;
-    let systemValue: string = item1 || item4;
-    if (!VALIDATE_MODULE.includes(systemValue)) {
-      importModuleCollection.add(systemValue);
-    }
-    if (!isProcessAllowList && !isSystemModule) {
-      return item;
-    } else if (isProcessAllowList) {
-      systemValue = item2;
-      moduleType = item4;
-      systemKey = item5;
-      systemValueCollection.add(systemValue);
-    }
-    moduleCollection.add(`${moduleType}.${systemKey}`);
-    if (NATIVE_MODULE.has(`${moduleType}.${systemKey}`)) {
-      item = `var ${systemValue} = globalThis.requireNativeModule('${moduleType}.${systemKey}')`;
-    } else if (moduleType === SYSTEM_PLUGIN) {
-      item = `var ${systemValue} = isSystemplugin('${systemKey}', '${SYSTEM_PLUGIN}') ? ` +
-          `globalThis.systemplugin.${systemKey} : globalThis.requireNapi('${systemKey}')`;
-    } else if (moduleType === OHOS_PLUGIN) {
-      item = `var ${systemValue} = globalThis.requireNapi('${systemKey}') || ` +
-          `(isSystemplugin('${systemKey}', '${OHOS_PLUGIN}') ? ` +
-          `globalThis.ohosplugin.${systemKey} : isSystemplugin('${systemKey}', '${SYSTEM_PLUGIN}') ` +
-          `? globalThis.systemplugin.${systemKey} : undefined)`;
-    }
-    return item;
-  });
-  return processInnerModule(newContent, systemValueCollection);
+  const data: any = JSON.parse(fs.readFileSync(configFile).toString());
+  const bundleName: string = data.app.bundleName;
+  const moduleName: string = data.module.name;
+  packageCollection.set(configFile, [bundleName, moduleName]);
+  return [bundleName, moduleName];
 }
 
-function processInnerModule(content: string, systemValueCollection: Set<string>): string {
-  systemValueCollection.forEach(element => {
-    const target: string = element.trim() + '.default';
-    while (content.includes(target)) {
-      content = content.replace(target, element.trim());
+function replaceSystemApi(item: string, systemValue: string, moduleType: string, systemKey: string): string {
+  moduleCollection.add(`${moduleType}.${systemKey}`);
+  if (NATIVE_MODULE.has(`${moduleType}.${systemKey}`)) {
+    item = `var ${systemValue} = globalThis.requireNativeModule('${moduleType}.${systemKey}')`;
+  } else if (moduleType === SYSTEM_PLUGIN) {
+    item = `var ${systemValue} = isSystemplugin('${systemKey}', '${SYSTEM_PLUGIN}') ? ` +
+        `globalThis.systemplugin.${systemKey} : globalThis.requireNapi('${systemKey}')`;
+  } else if (moduleType === OHOS_PLUGIN) {
+    item = `var ${systemValue} = globalThis.requireNapi('${systemKey}') || ` +
+        `(isSystemplugin('${systemKey}', '${OHOS_PLUGIN}') ? ` +
+        `globalThis.ohosplugin.${systemKey} : isSystemplugin('${systemKey}', '${SYSTEM_PLUGIN}') ` +
+        `? globalThis.systemplugin.${systemKey} : undefined)`;
+  }
+  return item;
+}
+
+function replaceLibSo(importValue: string, libSoKey: string, sourcePath: string = null): string {
+  if (sourcePath) {
+    useOSFiles.add(sourcePath);
+  }
+  return `var ${importValue} = globalThis.requireNapi("${libSoKey}", true);`;
+}
+
+function replaceOhmStartsWithBundle(url: string, item: string, importValue: string, moduleRequest: string, sourcePath: string): string {
+  const urlResult: RegExpMatchArray | null = url.match(/^(\S+)\/(\S+)\/(\S+)\/(\S+)$/);
+  if (urlResult) {
+    const moduleKind: string = urlResult[3];
+    if (moduleKind === 'lib') {
+      item = replaceLibSo(importValue, moduleRequest, sourcePath);
     }
+  }
+  return item;
+}
+
+function replaceOhmStartsWithModule(url: string, item: string, importValue: string, moduleRequest: string, sourcePath: string): string {
+  const urlResult: RegExpMatchArray | null = url.match(/^(\S+)\/(\S+)\/(\S+)$/);
+  if (urlResult && projectConfig.aceModuleJsonPath) {
+    const moduleName: string = urlResult[1];
+    const moduleKind: string = urlResult[2];
+    const modulePath: string = urlResult[3];
+    const bundleName: string = getPackageInfo(projectConfig.aceModuleJsonPath)[0];
+    moduleRequest = `@bundle:${bundleName}/${moduleName}/${moduleKind}/${modulePath}`;
+    item = moduleKind === 'lib' ? replaceLibSo(importValue, moduleRequest, sourcePath) :
+      item.replace(/['"](\S+)['"]/, '\"' + moduleRequest + '\"');
+  }
+  return item;
+}
+
+function replaceOhmStartsWithOhos(url: string, item: string, importValue:string, moduleRequest: string, isSystemModule: boolean): string {
+  url = url.replace('/', '.');
+  const urlResult: RegExpMatchArray | null = url.match(/^system\.(\S+)/);
+  moduleRequest = urlResult ? `@${url}` : `@ohos.${url}`;
+  if (!isSystemModule) {
+    item = item.replace(/['"](\S+)['"]/, '\"' + moduleRequest + '\"');
+  } else {
+    const moduleType: string = urlResult ? 'system' : 'ohos';
+    const systemKey: string = urlResult ? url.substring(7) : url;
+    item = replaceSystemApi(item, importValue, moduleType, systemKey);
+  }
+  return item;
+}
+
+function replaceOhmStartsWithLocal(url: string, item: string, importValue: string, moduleRequest: string, sourcePath: string): string {
+  const result: RegExpMatchArray | null = sourcePath.match(/(\S+)(\/|\\)src(\/|\\)main(\/|\\)(ets|js)(\/|\\)(\S+)/);
+  if (result && projectConfig.aceModuleJsonPath) {
+    const packageInfo: string[] = getPackageInfo(projectConfig.aceModuleJsonPath);
+    const urlResult: RegExpMatchArray | null = url.match(/^\/(ets|js|lib|node_modules)\/(\S+)$/);
+    if (urlResult) {
+      const moduleKind: string = urlResult[1];
+      const modulePath: string = urlResult[2];
+      if (moduleKind === 'lib') {
+        item = replaceLibSo(importValue, modulePath, sourcePath);
+      } else if (moduleKind === 'node_modules') {
+        moduleRequest = `${modulePath}`;
+        item = item.replace(/['"](\S+)['"]/, '\"' + moduleRequest + '\"');
+      } else {
+        moduleRequest = `@bundle:${packageInfo[0]}/${packageInfo[1]}/${moduleKind}/${modulePath}`;
+        item = item.replace(/['"](\S+)['"]/, '\"' + moduleRequest + '\"');
+      }
+    }
+  }
+  return item;
+}
+
+function replaceOhmUrl(isSystemModule: boolean, item: string, importValue: string, moduleRequest: string, sourcePath: string = null): string {
+  const result: RegExpMatchArray = moduleRequest.match(/^@(\S+):(\S+)$/);
+  const urlType: string = result[1];
+  const url: string = result[2];
+  switch (urlType) {
+    case 'bundle': {
+      item = replaceOhmStartsWithBundle(url, item, importValue, moduleRequest, sourcePath);
+      break;
+    }
+    case 'module': {
+      item = replaceOhmStartsWithModule(url, item, importValue, moduleRequest, sourcePath);
+      break;
+    }
+    case 'ohos': {
+      item = replaceOhmStartsWithOhos(url, item, importValue, moduleRequest, isSystemModule);
+      break;
+    }
+    case 'lib': {
+      item = replaceLibSo(importValue, url, sourcePath);
+      break;
+    }
+    case 'local': {
+      item = replaceOhmStartsWithLocal(url, item, importValue, moduleRequest, sourcePath);
+      break;
+    }
+    default:
+      logger.error('\u001b[31m', `ETS:ERROR Incorrect OpenHarmony module kind: ${urlType}`, '\u001b[39m');
+  }
+  return item;
+}
+
+function replaceRelativePath(item:string, moduleRequest: string, sourcePath: string): string {
+  // Do not replace relativePath to ohmUrl when building bundle
+  if (sourcePath && projectConfig.compileMode === 'esmodule') {
+    const filePath: string = path.resolve(path.dirname(sourcePath), moduleRequest);
+    const result: RegExpMatchArray | null = filePath.match(/(\S+)(\/|\\)src(\/|\\)main(\/|\\)(ets|js)(\/|\\)(\S+)/);
+    if (result && projectConfig.aceModuleJsonPath) {
+      const packageInfo: string[] = getPackageInfo(projectConfig.aceModuleJsonPath);
+      const bundleName: string = packageInfo[0];
+      const moduleName: string = packageInfo[1];
+      moduleRequest = `@bundle:${bundleName}/${moduleName}/${result[5]}/${toUnixPath(result[7])}`;
+      item = item.replace(/['"](\S+)['"]/, '\"' + moduleRequest + '\"');
+    }
+  }
+  return item;
+}
+
+export function processSystemApi(content: string, isProcessAllowList: boolean = false,
+  sourcePath: string = null, isSystemModule: boolean = false): string {
+  const REG_IMPORT_DECL: RegExp = isProcessAllowList ? /import\s+(.+)\s+from\s+['"]@(system|ohos)\.(\S+)['"]/g :
+    /(import|export)\s+(.+)\s+from\s+['"](\S+)['"]|import\s+(.+)\s*=\s*require\(\s*['"](\S+)['"]\s*\)/g;
+
+  const processedContent: string = content.replace(REG_IMPORT_DECL, (item, item1, item2, item3, item4, item5) => {
+    const importValue: string = isProcessAllowList ? item1 : item2 || item4;
+
+    if (isProcessAllowList) {
+      return replaceSystemApi(item, importValue, item2, item3);
+    }
+
+    const moduleRequest: string = item3 || item5;
+    if (isOhmUrl(moduleRequest)) { // ohmURL
+      return replaceOhmUrl(isSystemModule, item, importValue, moduleRequest, sourcePath);
+    } else if (/^@(system|ohos)\./.test(moduleRequest)) { // ohos/system.api
+      // ets & ts file need compile with .d.ts, so do not replace at the phase of pre_process
+      if (!isSystemModule) {
+        return item;
+      }
+      const result: RegExpMatchArray = moduleRequest.match(/^@(system|ohos)\.(\S+)$/);
+      const moduleType: string = result[1];
+      const apiName: string = result[2];
+      return replaceSystemApi(item, importValue, moduleType, apiName);
+    } else if (/^(\.|\.\.)\//.test(moduleRequest)) { // relativePath
+      return replaceRelativePath(item, moduleRequest, sourcePath);
+    } else if (/^lib(\S+)\.so$/.test(moduleRequest)) { // libxxx.so
+      const result: RegExpMatchArray = moduleRequest.match(/^lib(\S+)\.so$/);
+      const libSoKey: string = result[1];
+      return replaceLibSo(importValue, libSoKey, sourcePath);
+    }
+    // node_modules
+    return item;
   });
-  return content;
+  return processedContent;
 }
 
 const VALIDATE_MODULE_REG: RegExp = new RegExp('^(' + VALIDATE_MODULE.join('|') + ')');

compiler/test/ut/import/importAllEts.ts

@@ -49,36 +49,12 @@ struct ImportTest {
 `
 
 exports.expectResult =
-`"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const AllComponent = __importStar(require("./test/pages/NamespaceComponent"));
-const TsModule_1 = __importDefault(require("./test/pages/TsModule"));
+`import * as AllComponent from './test/pages/NamespaceComponent';
+import TsModule from './test/pages/TsModule';
 class ImportTest extends View {
     constructor(compilerAssignedUniqueChildId, parent, params) {
         super(compilerAssignedUniqueChildId, parent);
-        this.__myState1 = new ObservedPropertyObject(new TsModule_1.default(1).method(), this, "myState1");
+        this.__myState1 = new ObservedPropertyObject(new TsModule(1).method(), this, "myState1");
         this.__myState2 = new ObservedPropertySimple(0, this, "myState2");
         this.__myState3 = new ObservedPropertySimple(false, this, "myState3");
         this.__myState4 = new ObservedPropertySimple('ImportTest', this, "myState4");

compiler/test/ut/import/importEts.ts

@@ -21,7 +21,7 @@ LinkComponentDefault, {
   LinkComponent3
 } from './test/pages/LinkComponent'
 import DefaultComponent from "./test/pages/DefaultComponent"
-import AMDComponentDefault = require('./test/pages/AMDComponent')
+import AMDComponentDefault from "./test/pages/AMDComponent"
 import TsModule from './test/pages/TsModule'
 
 @Entry
@@ -99,38 +99,14 @@ struct ImportTest {
 `
 
 exports.expectResult =
-`"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const LinkComponent_1 = __importStar(require("./test/pages/LinkComponent"));
-const DefaultComponent_1 = __importDefault(require("./test/pages/DefaultComponent"));
-const AMDComponentDefault = require("./test/pages/AMDComponent");
-const TsModule_1 = __importDefault(require("./test/pages/TsModule"));
+`import LinkComponentDefault, { LinkComponent as LinkComponent1Ref, LinkComponent2 as LinkComponent2Ref, LinkComponent3 } from './test/pages/LinkComponent';
+import DefaultComponent from "./test/pages/DefaultComponent";
+import AMDComponentDefault from "./test/pages/AMDComponent";
+import TsModule from './test/pages/TsModule';
 class ImportTest extends View {
     constructor(compilerAssignedUniqueChildId, parent, params) {
         super(compilerAssignedUniqueChildId, parent);
-        this.__myState1 = new ObservedPropertyObject(new TsModule_1.default(1).method(), this, "myState1");
+        this.__myState1 = new ObservedPropertyObject(new TsModule(1).method(), this, "myState1");
         this.__myState2 = new ObservedPropertySimple(0, this, "myState2");
         this.__myState3 = new ObservedPropertySimple(false, this, "myState3");
         this.__myState4 = new ObservedPropertySimple('ImportTest', this, "myState4");
@@ -185,7 +161,7 @@ class ImportTest extends View {
         Column.create();
         let earlierCreatedChild_2 = this.findChildById("2");
         if (earlierCreatedChild_2 == undefined) {
-            View.create(new LinkComponent_1.LinkComponent2("2", this, {
+            View.create(new LinkComponent2Ref("2", this, {
                 LinkComponent2Link1: this.__myState1,
                 LinkComponent2Link2: this.__myState2,
                 LinkComponent2Link3: this.__myState3,
@@ -211,7 +187,7 @@ class ImportTest extends View {
         Text.pop();
         let earlierCreatedChild_3 = this.findChildById("3");
         if (earlierCreatedChild_3 == undefined) {
-            View.create(new LinkComponent_1.LinkComponent("3", this, {
+            View.create(new LinkComponent1Ref("3", this, {
                 LinkComponent1Link1: this.__myState1,
                 LinkComponent1Link2: this.__myState2,
                 LinkComponent1Link3: this.__myState3,
@@ -233,7 +209,7 @@ class ImportTest extends View {
         }
         let earlierCreatedChild_4 = this.findChildById("4");
         if (earlierCreatedChild_4 == undefined) {
-            View.create(new DefaultComponent_1.default("4", this, {
+            View.create(new DefaultComponent("4", this, {
                 DefaultComponentLink1: this.__myState1,
                 DefaultComponentLink2: this.__myState2,
                 DefaultComponentLink3: this.__myState3,
@@ -251,7 +227,7 @@ class ImportTest extends View {
         }
         let earlierCreatedChild_5 = this.findChildById("5");
         if (earlierCreatedChild_5 == undefined) {
-            View.create(new LinkComponent_1.default("5", this, {
+            View.create(new LinkComponentDefault("5", this, {
                 LinkComponent3Link1: this.__myState1,
                 LinkComponent3Link2: this.__myState2,
                 LinkComponent3Link3: this.__myState3,
@@ -291,7 +267,7 @@ class ImportTest extends View {
         }
         let earlierCreatedChild_7 = this.findChildById("7");
         if (earlierCreatedChild_7 == undefined) {
-            View.create(new LinkComponent_1.LinkComponent3("7", this, {
+            View.create(new LinkComponent3("7", this, {
                 LinkComponent3Link1: this.__myState1,
                 LinkComponent3Link2: this.__myState2,
                 LinkComponent3Link3: this.__myState3,

compiler/test/ut/import/importExportEts.ts

@@ -53,17 +53,12 @@ struct ImportTest {
 `
 
 exports.expectResult =
-`"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const ExportStarComponent_1 = require("./test/pages/ExportStarComponent");
-const TsModule_1 = __importDefault(require("./test/pages/TsModule"));
+`import { AllStarComponent } from './test/pages/ExportStarComponent';
+import TsModule from './test/pages/TsModule';
 class ImportTest extends View {
     constructor(compilerAssignedUniqueChildId, parent, params) {
         super(compilerAssignedUniqueChildId, parent);
-        this.__myState1 = new ObservedPropertyObject(new TsModule_1.default(1).method(), this, "myState1");
+        this.__myState1 = new ObservedPropertyObject(new TsModule(1).method(), this, "myState1");
         this.__myState2 = new ObservedPropertySimple(0, this, "myState2");
         this.__myState3 = new ObservedPropertySimple(false, this, "myState3");
         this.__myState4 = new ObservedPropertySimple('ImportTest', this, "myState4");
@@ -118,7 +113,7 @@ class ImportTest extends View {
         Column.create();
         let earlierCreatedChild_2 = this.findChildById("2");
         if (earlierCreatedChild_2 == undefined) {
-            View.create(new ExportStarComponent_1.AllStarComponent.ExportComponent("2", this, {
+            View.create(new AllStarComponent.ExportComponent("2", this, {
                 ExportComponent1Link1: this.__myState1,
                 ExportComponent1Link2: this.__myState2,
                 ExportComponent1Link3: this.__myState3,
@@ -140,7 +135,7 @@ class ImportTest extends View {
         }
         let earlierCreatedChild_3 = this.findChildById("3");
         if (earlierCreatedChild_3 == undefined) {
-            View.create(new ExportStarComponent_1.AllStarComponent.default("3", this, {
+            View.create(new AllStarComponent.default("3", this, {
                 ExportComponent4Link1: this.__myState1,
                 ExportComponent4Link2: this.__myState2,
                 ExportComponent4Link3: this.__myState3,

compiler/test/ut/import/importTs.ts

@@ -53,17 +53,12 @@ struct ImportTest {
 `
 
 exports.expectResult =
-`"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const ExportStarComponent_1 = require("./test/pages/ExportStarComponent");
-const TsModule_1 = __importDefault(require("./test/pages/TsModule"));
+`import { AllStarComponent } from './test/pages/ExportStarComponent';
+import TsModule from './test/pages/TsModule';
 class ImportTest extends View {
     constructor(compilerAssignedUniqueChildId, parent, params) {
         super(compilerAssignedUniqueChildId, parent);
-        this.__myState1 = new ObservedPropertyObject(new TsModule_1.default(1).method(), this, "myState1");
+        this.__myState1 = new ObservedPropertyObject(new TsModule(1).method(), this, "myState1");
         this.__myState2 = new ObservedPropertySimple(0, this, "myState2");
         this.__myState3 = new ObservedPropertySimple(false, this, "myState3");
         this.__myState4 = new ObservedPropertySimple('ImportTest', this, "myState4");
@@ -118,7 +113,7 @@ class ImportTest extends View {
         Column.create();
         let earlierCreatedChild_2 = this.findChildById("2");
         if (earlierCreatedChild_2 == undefined) {
-            View.create(new ExportStarComponent_1.AllStarComponent.ExportComponent("2", this, {
+            View.create(new AllStarComponent.ExportComponent("2", this, {
                 ExportComponent1Link1: this.__myState1,
                 ExportComponent1Link2: this.__myState2,
                 ExportComponent1Link3: this.__myState3,
@@ -140,7 +135,7 @@ class ImportTest extends View {
         }
         let earlierCreatedChild_3 = this.findChildById("3");
         if (earlierCreatedChild_3 == undefined) {
-            View.create(new ExportStarComponent_1.AllStarComponent.default("3", this, {
+            View.create(new AllStarComponent.default("3", this, {
                 ExportComponent4Link1: this.__myState1,
                 ExportComponent4Link2: this.__myState2,
                 ExportComponent4Link3: this.__myState3,

compiler/test/ut/inner_commponent_transform/render_component/if/if.ts

@@ -52,10 +52,8 @@ struct MyComponent {
 `
 
 exports.expectResult =
-`"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const TestComponent_1 = require("./test/pages/TestComponent");
-const TsModule_1 = require("./test/pages/TsModule");
+`import { TestComponent } from './test/pages/TestComponent';
+import { Animal } from './test/pages/TsModule';
 class MyComponent extends View {
     constructor(compilerAssignedUniqueChildId, parent, params) {
         super(compilerAssignedUniqueChildId, parent);
@@ -110,11 +108,11 @@ class MyComponent extends View {
         }
         If.pop();
         If.create();
-        if (TsModule_1.Animal.Dog) {
+        if (Animal.Dog) {
             If.branchId(0);
             let earlierCreatedChild_2 = this.findChildById("2");
             if (earlierCreatedChild_2 == undefined) {
-                View.create(new TestComponent_1.TestComponent("2", this, { content: 'if (import enum)' }));
+                View.create(new TestComponent("2", this, { content: 'if (import enum)' }));
             }
             else {
                 earlierCreatedChild_2.updateWithValueParams({

compiler/test/ut/render_decorator/@styles/@stylesExport.ts

@@ -55,10 +55,7 @@ export struct FancyUseExp {
 `
 
 exports.expectResult =
-`"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FancyUseExp = void 0;
-class FancyUseExp extends View {
+`export class FancyUseExp extends View {
     constructor(compilerAssignedUniqueChildId, parent, params) {
         super(compilerAssignedUniqueChildId, parent);
         this.__enable = new ObservedPropertySimple(true, this, "enable");
@@ -109,6 +106,5 @@ class FancyUseExp extends View {
         Column.pop();
     }
 }
-exports.FancyUseExp = FancyUseExp;
 loadDocument(new FancyUseExp("1", undefined, {}));
 `

compiler/tsconfig.cjs.json

@@ -0,0 +1,571 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+   "ets": {
+      "render": {
+        "method": ["build", "pageTransition"],
+        "decorator": "Builder"
+      },
+      "components": [
+        "AbilityComponent",
+        "AlphabetIndexer",
+        "Animator",
+        "Badge",
+        "Blank",
+        "Button",
+        "Calendar",
+        "Camera",
+        "Canvas",
+        "Checkbox",
+        "CheckboxGroup",
+        "Circle",
+        "ColorPicker",
+        "ColorPickerDialog",
+        "Column",
+        "ColumnSplit",
+        "Counter",
+        "DataPanel",
+        "DatePicker",
+        "Divider",
+        "Ellipse",
+        "Flex",
+        "FormComponent",
+        "Gauge",
+        "GeometryView",
+        "Grid",
+        "GridItem",
+        "GridContainer",
+        "Hyperlink",
+        "Image",
+        "ImageAnimator",
+        "Line",
+        "List",
+        "ListItem",
+        "LoadingProgress",
+        "Marquee",
+        "Menu",
+        "Navigation",
+        "Navigator",
+        "Option",
+        "PageTransitionEnter",
+        "PageTransitionExit",
+        "Panel",
+        "Path",
+        "PatternLock",
+        "Piece",
+        "PluginComponent",
+        "Polygon",
+        "Polyline",
+        "Progress",
+        "QRCode",
+        "Radio",
+        "Rating",
+        "Rect",
+        "Refresh",
+        "RelativeContainer",
+        "RemoteWindow",
+        "Row",
+        "RowSplit",
+        "RichText",
+        "Scroll",
+        "ScrollBar",
+        "Search",
+        "Section",
+        "Select",
+        "Shape",
+        "Sheet",
+        "SideBarContainer",
+        "Slider",
+        "Span",
+        "Stack",
+        "Stepper",
+        "StepperItem",
+        "Swiper",
+        "TabContent",
+        "Tabs",
+        "Text",
+        "TextPicker",
+        "TextClock",
+        "TextArea",
+        "TextInput",
+        "TextTimer",
+        "TimePicker",
+        "Toggle",
+        "Video",
+        "Web",
+        "XComponent"
+      ],
+      "extend": {
+        "decorator": "Extend",
+        "components": [
+          {
+            "name": "AbilityComponent",
+            "type": "AbilityComponentAttribute",
+            "instance": "AbilityComponentInstance"
+          },
+          {
+            "name": "AlphabetIndexer",
+            "type": "AlphabetIndexerAttribute",
+            "instance": "AlphabetIndexerInstance"
+          },
+          {
+            "name": "Animator",
+            "type": "AnimatorAttribute",
+            "instance": "AnimatorInstance"
+          },
+          {
+            "name": "Badge",
+            "type": "BadgeAttribute",
+            "instance": "BadgeInstance"
+          },
+          {
+            "name": "Blank",
+            "type": "BlankAttribute",
+            "instance": "BlankInstance"
+          },
+          {
+            "name": "Button",
+            "type": "ButtonAttribute",
+            "instance": "ButtonInstance"
+          },
+          {
+            "name": "Calendar",
+            "type": "CalendarAttribute",
+            "instance": "CalendarInstance"
+          },
+          {
+            "name": "Camera",
+            "type": "CameraAttribute",
+            "instance": "CameraInstance"
+          },
+          {
+            "name": "Canvas",
+            "type": "CanvasAttribute",
+            "instance": "CanvasInstance"
+          },
+          {
+            "name": "Checkbox",
+            "type": "CheckboxAttribute",
+            "instance": "CheckboxInstance"
+          },
+          {
+            "name": "CheckboxGroup",
+            "type": "CheckboxGroupAttribute",
+            "instance": "CheckboxGroupInstance"
+          },
+          {
+            "name": "Circle",
+            "type": "CircleAttribute",
+            "instance": "CircleInstance"
+          },
+          {
+            "name": "ColorPicker",
+            "type": "ColorPickerAttribute",
+            "instance": "ColorPickerInstance"
+          },
+          {
+            "name": "ColorPickerDialog",
+            "type": "ColorPickerDialogAttribute",
+            "instance": "ColorPickerDialogInstance"
+          },
+          {
+            "name": "Column",
+            "type": "ColumnAttribute",
+            "instance": "ColumnInstance"
+          },
+          {
+            "name": "ColumnSplit",
+            "type": "ColumnSplitAttribute",
+            "instance": "ColumnSplitInstance"
+          },
+          {
+            "name": "Counter",
+            "type": "CounterAttribute",
+            "instance": "CounterInstance"
+          },
+          {
+            "name": "DataPanel",
+            "type": "DataPanelAttribute",
+            "instance": "DataPanelInstance"
+          },
+          {
+            "name": "DatePicker",
+            "type": "DatePickerAttribute",
+            "instance": "DatePickerInstance"
+          },
+          {
+            "name": "Divider",
+            "type": "DividerAttribute",
+            "instance": "DividerInstance"
+          },
+          {
+            "name": "Ellipse",
+            "type": "EllipseAttribute",
+            "instance": "EllipseInstance"
+          },
+          {
+            "name": "Flex",
+            "type": "FlexAttribute",
+            "instance": "FlexInstance"
+          },
+          {
+            "name": "FormComponent",
+            "type": "FormComponentAttribute",
+            "instance": "FormComponentInstance"
+          },
+          {
+            "name": "Gauge",
+            "type": "GaugeAttribute",
+            "instance": "GaugeInstance"
+          },
+          {
+            "name": "GeometryView",
+            "type": "GeometryViewAttribute",
+            "instance": "GeometryViewInstance"
+          },
+          {
+            "name": "Grid",
+            "type": "GridAttribute",
+            "instance": "GridInstance"
+          },
+          {
+            "name": "GridItem",
+            "type": "GridItemAttribute",
+            "instance": "GridItemInstance"
+          },
+          {
+            "name": "GridContainer",
+            "type": "GridContainerAttribute",
+            "instance": "GridContainerInstance"
+          },
+          {
+            "name": "Hyperlink",
+            "type": "HyperlinkAttribute",
+            "instance": "HyperlinkInstance"
+          },
+          {
+            "name": "Image",
+            "type": "ImageAttribute",
+            "instance": "ImageInstance"
+          },
+          {
+            "name": "ImageAnimator",
+            "type": "ImageAnimatorAttribute",
+            "instance": "ImageAnimatorInstance"
+          },
+          {
+            "name": "Line",
+            "type": "LineAttribute",
+            "instance": "LineInstance"
+          },
+          {
+            "name": "List",
+            "type": "ListAttribute",
+            "instance": "ListInstance"
+          },
+          {
+            "name": "ListItem",
+            "type": "ListItemAttribute",
+            "instance": "ListItemInstance"
+          },
+          {
+            "name": "LoadingProgress",
+            "type": "LoadingProgressAttribute",
+            "instance": "LoadingProgressInstance"
+          },
+          {
+            "name": "Marquee",
+            "type": "MarqueeAttribute",
+            "instance": "MarqueeInstance"
+          },
+          {
+            "name": "Menu",
+            "type": "MenuAttribute",
+            "instance": "MenuInstance"
+          },
+          {
+            "name": "Navigation",
+            "type": "NavigationAttribute",
+            "instance": "NavigationInstance"
+          },
+          {
+            "name": "Navigator",
+            "type": "NavigatorAttribute",
+            "instance": "NavigatorInstance"
+          },
+          {
+            "name": "Option",
+            "type": "OptionAttribute",
+            "instance": "OptionInstance"
+          },
+          {
+            "name": "PageTransitionEnter",
+            "type": "PageTransitionEnterAttribute",
+            "instance": "PageTransitionEnterInstance"
+          },
+          {
+            "name": "PageTransitionExit",
+            "type": "PageTransitionExitAttribute",
+            "instance": "PageTransitionExitInstance"
+          },
+          {
+            "name": "Panel",
+            "type": "PanelAttribute",
+            "instance": "PanelInstance"
+          },
+          {
+            "name": "Path",
+            "type": "PathAttribute",
+            "instance": "PathInstance"
+          },
+          {
+            "name": "PatternLock",
+            "type": "PatternLockAttribute",
+            "instance": "PatternLockInstance"
+          },
+          {
+            "name": "Piece",
+            "type": "PieceAttribute",
+            "instance": "PieceInstance"
+          },
+          {
+            "name": "PluginComponent",
+            "type": "PluginComponentAttribute",
+            "instance": "PluginComponentInstance"
+          },
+          {
+            "name": "Polygon",
+            "type": "PolygonAttribute",
+            "instance": "PolygonInstance"
+          },
+          {
+            "name": "Polyline",
+            "type": "PolylineAttribute",
+            "instance": "PolylineInstance"
+          },
+          {
+            "name": "Progress",
+            "type": "ProgressAttribute",
+            "instance": "ProgressInstance"
+          },
+          {
+            "name": "QRCode",
+            "type": "QRCodeAttribute",
+            "instance": "QRCodeInstance"
+          },
+          {
+            "name": "Radio",
+            "type": "RadioAttribute",
+            "instance": "RadioInstance"
+          },
+          {
+            "name": "Rating",
+            "type": "RatingAttribute",
+            "instance": "RatingInstance"
+          },
+          {
+            "name": "Rect",
+            "type": "RectAttribute",
+            "instance": "RectInstance"
+          },
+          {
+            "name": "RelativeContainer",
+            "type": "RelativeContainerAttribute",
+            "instance": "RelativeContainerInstance"
+          },
+          {
+            "name": "Refresh",
+            "type": "RefreshAttribute",
+            "instance": "RefreshInstance"
+          },
+          {
+            "name": "RemoteWindow",
+            "type": "RemoteWindowAttribute",
+            "instance": "RemoteWindowInstance"
+          },
+          {
+            "name": "Row",
+            "type": "RowAttribute",
+            "instance": "RowInstance"
+          },
+          {
+            "name": "RowSplit",
+            "type": "RowSplitAttribute",
+            "instance": "RowSplitInstance"
+          },
+          {
+            "name": "RichText",
+            "type": "RichTextAttribute",
+            "instance": "RichTextInstance"
+          },
+          {
+            "name": "Scroll",
+            "type": "ScrollAttribute",
+            "instance": "ScrollInstance"
+          },
+          {
+            "name": "ScrollBar",
+            "type": "ScrollBarAttribute",
+            "instance": "ScrollBarInstance"
+          },
+          {
+            "name": "Search",
+            "type": "SearchAttribute",
+            "instance": "SearchInstance"
+          },
+          {
+            "name": "Section",
+            "type": "SectionAttribute",
+            "instance": "SectionInstance"
+          },
+          {
+            "name": "Select",
+            "type": "SelectAttribute",
+            "instance": "SelectInstance"
+          },
+          {
+            "name": "Shape",
+            "type": "ShapeAttribute",
+            "instance": "ShapeInstance"
+          },
+          {
+            "name": "Sheet",
+            "type": "SheetAttribute",
+            "instance": "SheetInstance"
+          },
+          {
+            "name": "SideBarContainer",
+            "type": "SideBarContainerAttribute",
+            "instance": "SideBarContainerInstance"
+          },
+          {
+            "name": "Slider",
+            "type": "SliderAttribute",
+            "instance": "SliderInstance"
+          },
+          {
+            "name": "Span",
+            "type": "SpanAttribute",
+            "instance": "SpanInstance"
+          },
+          {
+            "name": "Stack",
+            "type": "StackAttribute",
+            "instance": "StackInstance"
+          },
+          {
+            "name": "Stepper",
+            "type": "StepperAttribute",
+            "instance": "StepperInstance"
+          },
+          {
+            "name": "StepperItem",
+            "type": "StepperItemAttribute",
+            "instance": "StepperItemInstance"
+          },
+          {
+            "name": "Swiper",
+            "type": "SwiperAttribute",
+            "instance": "SwiperInstance"
+          },
+          {
+            "name": "TabContent",
+            "type": "TabContentAttribute",
+            "instance": "TabContentInstance"
+          },
+          {
+            "name": "Tabs",
+            "type": "TabsAttribute",
+            "instance": "TabsInstance"
+          },
+          {
+            "name": "Text",
+            "type": "TextAttribute",
+            "instance": "TextInstance"
+          },
+          {
+            "name": "TextPicker",
+            "type": "TextPickerAttribute",
+            "instance": "TextPickerInstance"
+          },
+          {
+            "name": "TextClock",
+            "type": "TextClockAttribute",
+            "instance": "TextClockInstance"
+          },
+          {
+            "name": "TextArea",
+            "type": "TextAreaAttribute",
+            "instance": "TextAreaInstance"
+          },
+          {
+            "name": "TextInput",
+            "type": "TextInputAttribute",
+            "instance": "TextInputInstance"
+          },
+          {
+            "name": "TextTimer",
+            "type": "TextTimerAttribute",
+            "instance": "TextTimerInstance"
+          },
+          {
+            "name": "TimePicker",
+            "type": "TimePickerAttribute",
+            "instance": "TimePickerInstance"
+          },
+          {
+            "name": "Toggle",
+            "type": "ToggleAttribute",
+            "instance": "ToggleInstance"
+          },
+          {
+            "name": "Video",
+            "type": "VideoAttribute",
+            "instance": "VideoInstance"
+          },
+          {
+            "name": "Web",
+            "type": "WebAttribute",
+            "instance": "WebInstance"
+          },
+          {
+            "name": "XComponent",
+            "type": "XComponentAttribute",
+            "instance": "XComponentInstance"
+          },
+        ]
+      },
+      "styles": {
+        "decorator": "Styles",
+        "component": {
+            "name": "Common",
+            "type": "T",
+            "instance": "CommonInstance"
+        },
+        "property": "stateStyles"
+      },
+    },
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "importsNotUsedAsValues": "preserve",
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "module": "commonjs",
+    "target": "es2017",
+    "types": [],
+    "typeRoots": [],
+    "lib": [
+      "es2020"
+    ]
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

compiler/tsconfig.json

@@ -557,7 +557,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "module": "commonjs",
+    "module": "es2020",
     "target": "es2017",
     "types": [],
     "typeRoots": [],

compiler/webpack.config.js

@@ -18,6 +18,7 @@ const fs = require('fs');
 const CopyPlugin = require('copy-webpack-plugin');
 const Webpack = require('webpack');
 const { GenAbcPlugin } = require('./lib/gen_abc_plugin');
+const { OHMResolverPlugin } = require('./lib/resolve_ohm_url');
 const buildPipeServer = require('./server/build_pipe_server');
 
 const {
@@ -100,6 +101,7 @@ function initConfig(config) {
       global: false
     },
     resolve: {
+      plugins: [new OHMResolverPlugin()],
       extensions: ['.js', '.ets', '.ts', '.d.ts'],
       modules: [
         projectPath,
@@ -285,10 +287,26 @@ function setOptimizationConfig(config, workerFile) {
   }
 }
 
+function setTsConfigFile() {
+  let tsconfigTemplate =
+    path.resolve(__dirname, projectConfig.compileMode === 'esmodule' ? 'tsconfig.esm.json' : 'tsconfig.cjs.json');
+  if (fs.existsSync(tsconfigTemplate) && fs.statSync(tsconfigTemplate).isFile()) {
+    let currentTsconfigFile = path.resolve(__dirname, 'tsconfig.json');
+    let tsconfigTemplateNew =
+      currentTsconfigFile.replace(/.json$/, projectConfig.compileMode === 'esmodule' ? '.cjs.json' : '.esm.json');
+    fs.renameSync(currentTsconfigFile, tsconfigTemplateNew);
+
+    let tsconfigFileNew =
+      tsconfigTemplate.replace(projectConfig.compileMode === 'esmodule' ? /.esm.json$/ : /.cjs.json$/, '.json');
+    fs.renameSync(tsconfigTemplate, tsconfigFileNew);
+  }
+}
+
 module.exports = (env, argv) => {
   const config = {};
   setProjectConfig(env);
   loadEntryObj(projectConfig);
+  setTsConfigFile();
   initConfig(config);
   const workerFile = readWorkerFile();
   setOptimizationConfig(config, workerFile);