feat!: fully native esm

engine.config.js

@@ -1,7 +1,5 @@
-/**
- * @type {import('@wixc3/engine-cli').EngineConfig}
- */
-module.exports = {
+/** @type {import('@wixc3/engine-cli').EngineConfig} */
+export default {
     featureDiscoveryRoot: 'dist',
     buildPlugins: ({ webConfig, nodeConfig }) => {
         nodeConfig.packages = 'external';

examples/cross-iframe/package.json

@@ -2,6 +2,7 @@
   "name": "@fixture/cross-iframe",
   "version": "48.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "start": "engine --dev",
     "test": "npm run test:it",

examples/file-server/package.json

@@ -1,6 +1,8 @@
 {
   "name": "@example/file-server",
   "version": "48.0.0",
+  "private": true,
+  "type": "module",
   "scripts": {
     "start": "engine --dev",
     "test": "npm run test:it && npm run test:unit",
@@ -10,6 +12,5 @@
   "dependencies": {
     "@file-services/node": "^9.4.1"
   },
-  "license": "UNLICENSED",
-  "private": true
+  "license": "UNLICENSED"
 }

examples/file-server/src/test/file-server.it.ts

@@ -12,7 +12,7 @@ describe('File Server Feature', function () {
         featureName: 'file-server/example',
         configName: 'file-server/run',
         runOptions: {
-            projectPath: path.dirname(__dirname),
+            projectPath: path.dirname(import.meta.dirname),
         },
         config: [
             fileServerFeature.configure({

examples/file-server/src/test/file-server.unit.ts

@@ -12,12 +12,12 @@ describe('file-server Processing env test', () => {
             featureName: 'file-server',
             env: server,
             runtimeOptions: {
-                projectPath: __dirname,
+                projectPath: import.meta.dirname,
             },
             feature: Feature,
         });
 
-        const remoteFile = remoteFiles.readFile(path.basename(__filename));
-        expect(remoteFile).to.eq(fs.readFileSync(__filename, 'utf8'));
+        const remoteFile = remoteFiles.readFile(path.basename(import.meta.filename));
+        expect(remoteFile).to.eq(fs.readFileSync(import.meta.filename, 'utf8'));
     });
 });

examples/multi-env/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@example/multi-env",
   "version": "48.0.0",
+  "private": true,
+  "type": "module",
   "scripts": {
     "start": "engine --dev",
     "test": "npm run test:it && npm run test:unit",
     "test:it": "mocha \"dist/test/**/*.it.js\"",
     "test:unit": "mocha \"dist/test/**/*.unit.js\""
   },
-  "license": "UNLICENSED",
-  "private": true
+  "license": "UNLICENSED"
 }

examples/multi-env/src/test/file-server.unit.ts

@@ -8,7 +8,7 @@ describe('multi-env Processing env test', () => {
             featureName: 'multi-env/test-node',
             env: processingEnv,
             runtimeOptions: {
-                projectPath: __dirname,
+                projectPath: import.meta.dirname,
             },
             feature: Feature,
         });

examples/node-only/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@example/node-only",
   "version": "48.0.0",
+  "private": true,
+  "type": "module",
   "main": "index.js",
   "license": "MIT",
-  "private": true,
   "scripts": {
     "start": "engine --dev"
   }

examples/playground/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@example/playground",
   "version": "48.0.0",
+  "private": true,
+  "type": "module",
   "scripts": {
     "start": "engine --dev"
   },
-  "license": "UNLICENSED",
-  "private": true
+  "license": "UNLICENSED"
 }

examples/react/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@examples/react",
   "version": "48.0.0",
+  "private": true,
+  "type": "module",
   "main": "index.js",
   "scripts": {
     "start": "engine --dev -f react/someplugin",
     "test": "npm run test:it",
     "test:it": "mocha \"dist/test/**/*.it.js\""
   },
-  "license": "UNLICENSED",
-  "private": true
+  "license": "UNLICENSED"
 }

examples/react/src/test/react.it.ts

@@ -7,7 +7,7 @@ describe('React Feature', function () {
     const { getLoadedFeature } = withFeature({
         featureName: 'react/someplugin',
         runOptions: {
-            projectPath: join(__dirname, '..'),
+            projectPath: join(import.meta.dirname, '..'),
         },
     });
 

examples/react/src/test/react.persist.it.ts

@@ -12,7 +12,7 @@ describe('react/someplugin persistent checks', function () {
     const { getLoadedFeature } = withFeature({
         featureName: 'react/someplugin',
         runOptions: {
-            projectPath: path.join(__dirname, '..'),
+            projectPath: path.join(import.meta.dirname, '..'),
         },
         persist: true,
     });

examples/reloaded-iframe/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@example/reloaded-iframe",
   "version": "48.0.0",
+  "private": true,
+  "type": "module",
   "scripts": {
     "start": "engine --dev",
     "test": "npm run test:it",
     "test:it": "mocha \"dist/test/**/*.it.js\""
-  },
-  "private": true
+  }
 }

guides/babel.config.js

@@ -1,3 +1,3 @@
-module.exports = {
+export default {
     presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
 };

guides/docs/getting-started/index.md

@@ -18,20 +18,20 @@ mkdir hello-engine && cd hello-engine && git init && npm init -y
 Let's make a node application, in typescript.
 
 ```bash
-npm install --saveDev typescript stylable
+npm install typescript -D
 
 ```
 
 In your blank typescript repo:
 
 1. install engine-core package `npm i @wixc3/engine-core`
-2. install dev-dependencies `npm i -D typescript webpack html-webpack-plugin react stylable`
-3. install engineer as a dev dependency `npm i -D @wixc3/engineer`
-4. if this is a typescript project, in the root of the project create an `engine.config.js` file, and inside we should
+2. install engine-cli as a dev dependency `npm i -D @wixc3/engine-cli`
+3. if this is a typescript project, in the root of the project create an `engine.config.js` file, and inside we should
    add one of the following:
 
 ```ts
-module.exports = {
+/** @type {import('@wixc3/engine-cli').EngineConfig} */
+export default {
   // the folder where the transpiled js files will be located
   featureDiscoveryRoot: 'dist',
 };
@@ -82,16 +82,6 @@ export default new Feature({
 });
 ```
 
-create `webpack.config.js` file and add:
-
-```js
-const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');
-
-module.exports = {
-  plugins: [new StylableWebpackPlugin()],
-};
-```
-
 We create the feature file, in which we declare what is the feature's API and its Id.
 We also create a new environment - `my-env`.
 

package.json

@@ -1,5 +1,7 @@
 {
   "name": "engine",
+  "private": true,
+  "type": "module",
   "workspaces": [
     "examples/*",
     "packages/*",
@@ -62,6 +64,5 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.18.0"
   },
-  "license": "MIT",
-  "private": true
+  "license": "MIT"
 }

packages/core/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@wixc3/engine-core",
   "version": "48.0.0",
+  "type": "module",
   "main": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",

packages/core/src/com/communication-errors.ts

@@ -1,5 +1,5 @@
-import type { Message } from './message-types';
-import { redactArguments } from './helpers';
+import type { Message } from './message-types.js';
+import { redactArguments } from './helpers.js';
 
 export class EngineCommunicationError extends Error {
     constructor(

packages/core/src/com/communication.ts

@@ -55,7 +55,7 @@ import {
     EnvironmentDisconnectedError,
     UnConfiguredMethodError,
     UnknownCallbackIdError,
-} from './communication-errors';
+} from './communication-errors.js';
 
 export interface ConfigEnvironmentRecord extends EnvironmentRecord {
     registerMessageHandler?: boolean;

packages/core/src/com/helpers.ts

@@ -1,7 +1,7 @@
 // we cannot mix types of "dom" and "webworker". tsc fails building.
 declare let WorkerGlobalScope: new () => Worker;
 
-import { Message } from './message-types';
+import { Message } from './message-types.js';
 
 export function isWorkerContext(target: unknown): target is Worker {
     return (

packages/core/src/helpers/web.ts

@@ -1,4 +1,4 @@
-import { IRunOptions } from '../types';
+import type { IRunOptions } from '../types.js';
 
 export function injectScript(win: Window, rootComId: string, scriptUrl: string) {
     return new Promise<Window>((res, rej) => {

packages/core/src/polyfills/report-error-polyfill.ts

@@ -1,4 +1,4 @@
-import { reportError } from '../com';
+import { reportError } from '../com/index.js';
 
 /**
  * This polyfill is not essential for the engine itself. But applications built

packages/engine-cli/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@wixc3/engine-cli",
   "version": "48.0.0",
+  "type": "module",
   "bin": {
     "engine": "./bin/engine.mjs"
   },

packages/engine-cli/src/analyze-command.ts

@@ -1,6 +1,6 @@
 import { nodeFs as fs } from '@file-services/node';
-import type { EngineConfig } from './types';
-import { analyzeFeatures } from './find-features/analyze-features';
+import type { EngineConfig } from './types.js';
+import { analyzeFeatures } from './find-features/analyze-features.js';
 
 export async function analyzeCommand({
     engineConfig,
@@ -14,7 +14,7 @@ export async function analyzeCommand({
     const { extensions, buildConditions, featureDiscoveryRoot } = engineConfig;
 
     const { features } = await analyzeFeatures(fs, rootDir, featureDiscoveryRoot, feature, extensions, buildConditions);
-    const htmlTemplate = fs.readFileSync(fs.join(__dirname, 'dashboard/feature-walker.html'), 'utf8');
+    const htmlTemplate = fs.readFileSync(fs.join(import.meta.dirname, 'dashboard/feature-walker.html'), 'utf8');
     const replaceString = 'globalThis.EMBEDDED_DATA = new Map();';
     if (!htmlTemplate.includes(replaceString)) {
         throw new Error(`Cannot find "${replaceString}" in the feature-walker.html template`);

packages/engine-cli/src/create-entrypoints.ts

@@ -5,10 +5,10 @@ import {
     IConfigDefinition,
 } from '@wixc3/engine-runtime-node';
 import { SetMultiMap } from '@wixc3/patterns';
-import type { IFeatureDefinition } from './types';
-import type { getResolvedEnvironments } from './environments';
-import { createNodeEntrypoint, createNodeEnvironmentManagerEntrypoint } from './entrypoint/create-node-entrypoint';
-import { createMainEntrypoint } from './entrypoint/create-web-entrypoint';
+import type { IFeatureDefinition } from './types.js';
+import type { getResolvedEnvironments } from './environments.js';
+import { createNodeEntrypoint, createNodeEnvironmentManagerEntrypoint } from './entrypoint/create-node-entrypoint.js';
+import { createMainEntrypoint } from './entrypoint/create-web-entrypoint.js';
 
 export interface CreateEntryPointOptions {
     dev: boolean;

packages/engine-cli/src/create-environments-build-configuration.ts

@@ -1,10 +1,10 @@
-import { BuildOptions, Plugin } from 'esbuild';
-import { topLevelConfigPlugin } from './top-level-config-plugin-esbuild';
 import { join } from 'node:path';
-import { htmlPlugin } from './esbuild-html-plugin';
-import { dynamicEntryPlugin } from './esbuild-dynamic-entry-plugin';
-import { EntryPoints, EntryPointsPaths } from './create-entrypoints';
-import type { OverrideConfigHook } from './types';
+import { BuildOptions, Plugin } from 'esbuild';
+import { topLevelConfigPlugin } from './top-level-config-plugin-esbuild.js';
+import { htmlPlugin } from './esbuild-html-plugin.js';
+import { dynamicEntryPlugin } from './esbuild-dynamic-entry-plugin.js';
+import { EntryPoints, EntryPointsPaths } from './create-entrypoints.js';
+import type { OverrideConfigHook } from './types.js';
 
 export interface CreateBuildConfigOptions {
     dev: boolean;
@@ -46,11 +46,7 @@ export function createBuildConfiguration(options: CreateBuildConfigOptions) {
     const commonConfig = {
         target: 'es2020',
         bundle: true,
-        /*
-            using iife here because esm makes debugging very slow to pickup variables in scope.
-            if one want to change this to esm, make sure that some bundle splitting is happening.
-        */
-        format: 'iife',
+        format: 'esm',
         publicPath,
         metafile: true,
         sourcemap: true,

packages/engine-cli/src/engine-app-manager.ts

@@ -1,6 +1,6 @@
-import { loadEngineConfig, runEngine } from './engine-build';
-import { resolveRuntimeOptions } from './resolve-runtime-options';
-import { runLocalNodeManager } from './run-local-mode-manager';
+import { loadEngineConfig, runEngine } from './engine-build.js';
+import { resolveRuntimeOptions } from './resolve-runtime-options.js';
+import { runLocalNodeManager } from './run-local-mode-manager.js';
 import isCI from 'is-ci';
 import type { IExecutableApplication, IFeatureTarget } from './types.js';
 import { join } from 'path';
@@ -9,7 +9,7 @@ import {
     type FeatureEnvironmentMapping,
     readMetadataFiles,
 } from '@wixc3/engine-runtime-node';
-import { checkWatchSignal } from './watch-signal';
+import { checkWatchSignal } from './watch-signal.js';
 
 export const OUTPUT_PATH = process.env.ENGINE_OUTPUT_PATH || join(process.cwd(), 'dist-engine');