refactor(typescript): use node16 moduleResolution

packages/build-tools/src/load-stylable-config.ts

@@ -30,10 +30,6 @@ export function loadStylableConfig<T>(
     return undefined;
 }
 
-// use eval to preserve esm import from typescript compiling
-// it to require, because of our current build to cjs
-const esmImport: (url: URL) => any = eval(`(path) => import(path)`);
-
 export async function loadStylableConfigEsm<T>(
     context: string,
     extract: (config: any) => T,
@@ -44,7 +40,7 @@ export async function loadStylableConfigEsm<T>(
     let config;
     if (path) {
         try {
-            config = await esmImport(pathToFileURL(path));
+            config = await import(pathToFileURL(path).href);
         } catch (e) {
             throw new Error(
                 `Failed to load "stylable.config.js" from ${path}\n${(e as Error)?.stack}`,

packages/create-stylable-app/src/create-project.ts

@@ -1,8 +1,9 @@
-import path from 'path';
-import { promises } from 'fs';
-import type { SpawnOptions } from 'child_process';
+import type { SpawnOptions } from 'node:child_process';
+import { promises } from 'node:fs';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
 import validatePackageName from 'validate-npm-package-name';
-import { statSafe, spawnSafe, directoryDeepChildren, executeWithProgress } from './helpers';
+import { directoryDeepChildren, executeWithProgress, spawnSafe, statSafe } from './helpers';
 
 const templateDefinitionFileName = 'template.js';
 
@@ -36,9 +37,11 @@ export async function createProjectFromTemplate({
 }: CreateProjectFromTemplateOptions) {
     const templateDefinitionPath = path.join(templatePath, templateDefinitionFileName);
 
-    const { dependencies, devDependencies, packageJson, postinstall } = (await import(
-        templateDefinitionPath
-    )) as TemplateDefinition;
+    const {
+        default: { dependencies, devDependencies, packageJson, postinstall },
+    } = (await import(pathToFileURL(templateDefinitionPath).href)) as {
+        default: TemplateDefinition;
+    };
 
     // package name validation
     const targetDirectoryName = path.basename(targetDirectoryPath);

packages/dom-test-kit/test/tsconfig.json

@@ -7,6 +7,7 @@
   "references": [
     { "path": "../../runtime/src" },
     { "path": "../../core-test-kit/src" },
+    { "path": "../../e2e-test-kit/src" },
     { "path": "../src" }
   ]
 }

packages/esbuild/test/e2e/esbuild-testkit.ts

@@ -1,9 +1,9 @@
-import { dirname, join } from 'node:path';
-import { readFileSync, symlinkSync, writeFileSync } from 'node:fs';
 import fs from '@file-services/node';
-import { BuildContext, BuildOptions, context, Plugin } from 'esbuild';
 import { createTempDirectorySync, runServer } from '@stylable/e2e-test-kit';
-
+import { BuildContext, BuildOptions, context, Plugin } from 'esbuild';
+import { readFileSync, symlinkSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { pathToFileURL } from 'node:url';
 import playwright from 'playwright-core';
 
 type BuildFn = (
@@ -48,7 +48,7 @@ export class ESBuildTestKit {
             this.options.log &&
                 console.log(`created temp project ${projectDir} and linked node_modules`);
         }
-        const moduleExports = await import(buildFile);
+        const moduleExports = await import(pathToFileURL(buildFile).href);
         const run = moduleExports[buildExport || 'run'] as BuildFn;
         if (!run) {
             throw new Error(`could not find ${buildExport || 'run'} export in ${buildFile}`);

packages/runtime/src/tsconfig.esm.json

@@ -2,6 +2,7 @@
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../esm",
-    "module": "ESNext"
+    "module": "esnext",
+    "moduleResolution": "node"
   }
 }

packages/uni-driver/test/tsconfig.json

@@ -6,6 +6,7 @@
   },
   "references": [
     { "path": "../../dom-test-kit/src" },
+    { "path": "../../dom-test-kit/test" },
     { "path": "../../core-test-kit/src" },
     { "path": "../src" }
   ]

tsconfig.base.json

@@ -25,9 +25,9 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "node16",                                  /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "node",                          /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node16",                        /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */

typings/externals/index.d.ts

@@ -3,6 +3,12 @@ declare module 'enhanced-resolve/lib/ResolverFactory.js' {
     export = ResolverFactory;
 }
 
+declare module 'vlq' {
+    // can be removed if https://github.com/Rich-Harris/vlq/pull/19 is merged/released
+    const VLQ: typeof import('../../node_modules/vlq/types');
+    export = VLQ;
+}
+
 declare module 'is-vendor-prefixed' {
     function isVendorPrefixed(value: string): boolean;
     export = isVendorPrefixed;