@emailmaker/emailmaker 1.0.107-dev.3 → 1.0.107-dev.4

package/cli/lib/template-engine/standWebpackDevHostEta.test.ts

@@ -31,6 +31,7 @@ function mockPackageConfig(): PackageConfig {
     uiLanguage: 'en',
     versions: {
       typescript: '5.0.0',
+      tsx: '4.21.0',
       vite: '5.0.0',
       webpack: '5.0.0',
       webpackCli: '5.0.0',
@@ -59,21 +60,21 @@ function oauthWebpackOptions(overrides: Partial<GenerateFilesInput> = {}): Gener
   };
 }
 
-test('stand oauth webpack config/dev-host.cjs uses literal api values', () => {
+test('stand oauth webpack config/dev-host.ts uses literal api values', () => {
   const options = oauthWebpackOptions();
   const { files } = generateFiles(options);
-  const devHost = utf8(files['config/dev-host.cjs']);
+  const devHost = utf8(files['config/dev-host.ts']);
   assert.match(devHost, /target: "http:\/\/localhost:3000"/);
   assert.match(devHost, /setHeader\('origin', "http:\/\/localhost:3000"\)/);
   assert.match(devHost, /new MyAppWebpackPlugin\(\)/);
 });
 
-test('stand-closed webpack config/dev-host.cjs includes wp-json proxy', () => {
+test('stand-closed webpack config/dev-host.ts includes wp-json proxy', () => {
   const options = oauthWebpackOptions({
     standMode: 'closed-loop',
   });
   const { files } = generateFiles(options);
-  const devHost = utf8(files['config/dev-host.cjs']);
+  const devHost = utf8(files['config/dev-host.ts']);
   assert.match(devHost, /context: \['\/wp-json'\]/);
 });
 
@@ -83,7 +84,7 @@ test('advanced subpath webpack dev-host uses subpath static directory', () => {
     advancedProfile: 'subpath',
   });
   const { files } = generateFiles(options);
-  const devHost = utf8(files['config/dev-host.cjs']);
+  const devHost = utf8(files['config/dev-host.ts']);
   assert.match(devHost, /public', 'advanced', 'subpath'/);
   assert.match(devHost, /publicPath: "\/advanced\/subpath\/"/);
 });
@@ -94,7 +95,7 @@ test('advanced umd webpack dev-host serves bundle without webpack plugin', () =>
     advancedProfile: 'umd',
   });
   const { files } = generateFiles(options);
-  const devHost = utf8(files['config/dev-host.cjs']);
+  const devHost = utf8(files['config/dev-host.ts']);
   assert.match(devHost, /const umdPackageRoot = path\.dirname\(require\.resolve\("@acme\/editor\/package\.json"\)\);/);
   assert.match(devHost, /plugins: \[\],/);
   assert.match(devHost, /publicPath: "\/MyApp\/"/);

package/cli/lib/templates/shared/i18n.ts

@@ -160,7 +160,7 @@ const MESSAGES = {
     'readmeStand.storageProviderFile':
       '- `src/dev/storageProvider.ts` - StorageProvider (`pathMode`, `./storage`)',
     'readmeStand.storageMiddleware':
-      '- `scripts/devStorageMiddleware.cjs` - middleware for `/dev-storage`',
+      '- `scripts/devStorageMiddleware.ts` - middleware for `/dev-storage`',
     'readmeStand.storageFolder': '- `storage/` - folder for uploaded files',
     'readmeStand.configDir':
       '- `config/` - bundler config used by `npm run start` and `npm run build`',
@@ -323,7 +323,7 @@ const MESSAGES = {
     'readmeStand.storageProviderFile':
       '- `src/dev/storageProvider.ts` - StorageProvider (`pathMode`, `./storage`)',
     'readmeStand.storageMiddleware':
-      '- `scripts/devStorageMiddleware.cjs` - middleware для `/dev-storage`',
+      '- `scripts/devStorageMiddleware.ts` - middleware для `/dev-storage`',
     'readmeStand.storageFolder': '- `storage/` - папка для загруженных файлов',
     'readmeStand.configDir':
       '- `config/` - bundler-конфиг для `npm run start` и `npm run build`',

package/cli/lib/templates/shared/paths.ts

@@ -7,15 +7,14 @@ function getGeneratedPaths(options: StandEtaRoutingInput) {
   const isSubpathAdvancedStand = isStand
     && getDemoStandMode(options) === 'advanced'
     && getAdvancedStandProfile(options) === 'subpath';
-  const ext = bundler === 'vite' ? 'mjs' : 'cjs';
 
   return {
     indexHtml: bundler === 'vite'
       ? (isSubpathAdvancedStand ? 'advanced/subpath/index.html' : 'index.html')
       : (isSubpathAdvancedStand ? 'public/advanced/subpath/index.html' : 'public/index.html'),
-    devConfig: `config/dev-host.${ext}`,
-    pluginBuildConfig: isStand ? undefined : `config/plugin-build.${ext}`,
-    sandboxBuildConfig: isStand ? undefined : `config/sandbox-build.${ext}`,
+    devConfig: 'config/dev-host.ts',
+    pluginBuildConfig: isStand ? undefined : 'config/plugin-build.ts',
+    sandboxBuildConfig: isStand ? undefined : 'config/sandbox-build.ts',
   };
 }
 

package/cli/lib/types/package-config.ts

@@ -2,6 +2,7 @@
 export interface ToolVersions {
   vite: string;
   typescript: string;
+  tsx: string;
   webpack: string;
   webpackCli: string;
   webpackDevServer: string;

package/cli/package.json

@@ -18,5 +18,5 @@
     "yargs": "^17.5.1"
   },
   "name": "@emailmaker/cli",
-  "version": "0.9.0-dev.4"
+  "version": "0.9.0-dev.5"
 }

package/cli/project-templates/plugin/assets/vite/{plugin-build.config.mjs → plugin-build.config.ts}

@@ -1,13 +1,13 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { defineConfig } from 'vite';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig, type UserConfigExport } from 'vite';
 import PluginDev from '__PKG__/vite/pluginDev';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const projectRoot = path.resolve(__dirname, '..');
 const pluginDevExternals = false;
 
-export default defineConfig({
+const config = defineConfig({
   root: projectRoot,
   plugins: [
     PluginDev({ externals: pluginDevExternals }),
@@ -24,4 +24,6 @@ export default defineConfig({
       fileName: () => 'index.js',
     },
   },
-});
+}) satisfies UserConfigExport;
+
+export default config;

package/cli/project-templates/plugin/assets/vite/{sandbox-build.config.mjs → sandbox-build.config.ts}

@@ -1,11 +1,11 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { defineConfig } from 'vite';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig, type UserConfigExport } from 'vite';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const projectRoot = path.resolve(__dirname, '..');
 
-export default defineConfig(({ mode }) => ({
+const config = defineConfig(({ mode }) => ({
   root: projectRoot,
   build: {
     sourcemap: true,
@@ -19,4 +19,6 @@ export default defineConfig(({ mode }) => ({
       fileName: () => 'sandbox.js',
     },
   },
-}));
+})) satisfies UserConfigExport;
+
+export default config;

package/cli/project-templates/plugin/assets/webpack/{plugin-build.legacy.module.cjs → plugin-build.legacy.module.ts}

@@ -1,21 +1,32 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { Configuration } from 'webpack';
 
+type LegacyExternals = Record<string, string>;
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const projectRoot = path.resolve(__dirname, '..');
 
-function readJsonSync(relativePath) {
+function readJsonSync(relativePath: string): LegacyExternals {
   const absPath = path.resolve(projectRoot, relativePath);
-  return fs.existsSync(absPath) ? JSON.parse(fs.readFileSync(absPath, 'utf8')) : {};
+  if (!fs.existsSync(absPath)) {
+    return {};
+  }
+
+  const parsed = JSON.parse(fs.readFileSync(absPath, 'utf8')) as Record<string, string | number | boolean | null>;
+  const entries = Object.entries(parsed).filter((entry): entry is [string, string] => typeof entry[1] === 'string');
+  return Object.fromEntries(entries);
 }
 
-function getExternals() {
+function getExternals(): LegacyExternals {
   return {
     ...readJsonSync('node_modules/__EXT_API__/externals.json'),
     ...readJsonSync('node_modules/__EXT_REACT__/externals.json'),
   };
 }
 
-module.exports = {
+const config = {
   entry: path.resolve(projectRoot, 'src/index.ts'),
   devtool: 'source-map',
   mode: 'production',
@@ -50,4 +61,6 @@ module.exports = {
       type: 'module',
     },
   },
-};
+} satisfies Configuration;
+
+export default config;

package/cli/project-templates/plugin/assets/webpack/{plugin-build.legacy.umd.cjs → plugin-build.legacy.umd.ts}

@@ -1,21 +1,32 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { Configuration } from 'webpack';
 
+type LegacyExternals = Record<string, string>;
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const projectRoot = path.resolve(__dirname, '..');
 
-function readJsonSync(relativePath) {
+function readJsonSync(relativePath: string): LegacyExternals {
   const absPath = path.resolve(projectRoot, relativePath);
-  return fs.existsSync(absPath) ? JSON.parse(fs.readFileSync(absPath, 'utf8')) : {};
+  if (!fs.existsSync(absPath)) {
+    return {};
+  }
+
+  const parsed = JSON.parse(fs.readFileSync(absPath, 'utf8')) as Record<string, string | number | boolean | null>;
+  const entries = Object.entries(parsed).filter((entry): entry is [string, string] => typeof entry[1] === 'string');
+  return Object.fromEntries(entries);
 }
 
-function getExternals() {
+function getExternals(): LegacyExternals {
   return {
     ...readJsonSync('node_modules/__EXT_API__/externals.json'),
     ...readJsonSync('node_modules/__EXT_REACT__/externals.json'),
   };
 }
 
-module.exports = {
+const config = {
   entry: path.resolve(projectRoot, 'src/index.ts'),
   devtool: 'source-map',
   mode: 'production',
@@ -53,4 +64,6 @@ module.exports = {
     globalObject: 'this',
     umdNamedDefine: true,
   },
-};
+} satisfies Configuration;
+
+export default config;

package/cli/project-templates/plugin/assets/webpack/{plugin-build.modern.module.cjs → plugin-build.modern.module.ts}

@@ -1,10 +1,13 @@
-const path = require('path');
-const PluginDev = require('__PKG__/webpack/pluginDev');
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { Configuration } from 'webpack';
+import PluginDev from '__PKG__/webpack/pluginDev';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const projectRoot = path.resolve(__dirname, '..');
 const pluginDevExternals = false;
 
-module.exports = {
+const config = {
   entry: path.resolve(projectRoot, 'src/index.ts'),
   devtool: 'source-map',
   mode: 'production',
@@ -41,4 +44,6 @@ module.exports = {
       type: 'module',
     },
   },
-};
+} satisfies Configuration;
+
+export default config;

package/cli/project-templates/plugin/assets/webpack/{plugin-build.modern.umd.cjs → plugin-build.modern.umd.ts}

@@ -1,10 +1,13 @@
-const path = require('path');
-const PluginDev = require('__PKG__/webpack/pluginDev');
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { Configuration } from 'webpack';
+import PluginDev from '__PKG__/webpack/pluginDev';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const projectRoot = path.resolve(__dirname, '..');
 const pluginDevExternals = false;
 
-module.exports = {
+const config = {
   entry: path.resolve(projectRoot, 'src/index.ts'),
   devtool: 'source-map',
   mode: 'production',
@@ -44,4 +47,6 @@ module.exports = {
     globalObject: 'this',
     umdNamedDefine: true,
   },
-};
+} satisfies Configuration;
+
+export default config;

package/cli/project-templates/plugin/assets/webpack/{sandbox-build.config.cjs → sandbox-build.config.ts}

@@ -1,7 +1,15 @@
-const path = require('path');
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { Configuration } from 'webpack';
+
+interface WebpackArgv {
+  mode?: string;
+}
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const projectRoot = path.resolve(__dirname, '..');
 
-module.exports = (_env, argv = {}) => {
+const config = (_env: Record<string, never>, argv: WebpackArgv = {}) => {
   const isDev = argv.mode !== 'production';
 
   return {
@@ -34,5 +42,7 @@ module.exports = (_env, argv = {}) => {
       clean: false,
       iife: true,
     },
-  };
+  } satisfies Configuration;
 };
+
+export default config;

package/cli/project-templates/plugin/bundler-vite/release.html.eta

@@ -0,0 +1 @@
+<%~ include('plugin-vite-release-html', it) %>

package/cli/project-templates/plugin/bundler-webpack/public/release.html.eta

@@ -0,0 +1 @@
+<%~ include('plugin-webpack-release-html', it) %>

package/cli/project-templates/plugin/shared-base/public/demo/product-1.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" role="img" aria-label="Demo product 1">
+  <defs>
+    <linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#e8eef5"/>
+      <stop offset="100%" stop-color="#c5d4e8"/>
+    </linearGradient>
+  </defs>
+  <rect width="272" height="272" fill="url(#a)"/>
+  <text x="136" y="142" text-anchor="middle" font-family="Arial,Helvetica,sans-serif" font-size="15" fill="#445566">Demo � 1</text>
+</svg>

package/cli/project-templates/plugin/shared-base/public/demo/product-2.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" role="img" aria-label="Demo product 2">
+  <defs>
+    <linearGradient id="b" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f0ebe3"/>
+      <stop offset="100%" stop-color="#d8cbb8"/>
+    </linearGradient>
+  </defs>
+  <rect width="272" height="272" fill="url(#b)"/>
+  <text x="136" y="142" text-anchor="middle" font-family="Arial,Helvetica,sans-serif" font-size="15" fill="#554433">Demo � 2</text>
+</svg>

package/cli/project-templates/plugin/shared-base/scripts/build-runner.ts

@@ -0,0 +1,22 @@
+import { copyPublicTypes } from './build-types.ts';
+import { cleanBuildArtifacts } from './clean.ts';
+import { runScriptSync } from './npmRun.ts';
+import { isExecutedAsScript } from './scriptRuntime.ts';
+
+export function buildProject(): void {
+  console.log('[build] clean');
+  cleanBuildArtifacts();
+
+  console.log('[build] public types');
+  copyPublicTypes();
+
+  console.log('[build] app bundle');
+  runScriptSync('build:app');
+
+  console.log('[build] sandbox bundle');
+  runScriptSync('build:sandbox');
+}
+
+if (isExecutedAsScript(import.meta.url)) {
+  buildProject();
+}

package/cli/project-templates/plugin/shared-base/scripts/build-types.ts

@@ -0,0 +1,17 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { isExecutedAsScript } from './scriptRuntime.ts';
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+const sourcePath = path.resolve(scriptDir, '..', 'src', 'public-types.d.ts');
+const targetPath = path.resolve(scriptDir, '..', 'dist', 'public-types.d.ts');
+
+export function copyPublicTypes(): void {
+  fs.mkdirSync(path.dirname(targetPath), { recursive: true });
+  fs.copyFileSync(sourcePath, targetPath);
+}
+
+if (isExecutedAsScript(import.meta.url)) {
+  copyPublicTypes();
+}

package/cli/project-templates/plugin/shared-base/scripts/clean.ts

@@ -0,0 +1,16 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { isExecutedAsScript } from './scriptRuntime.ts';
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+
+export function cleanBuildArtifacts(): void {
+  for (const target of ['dist', path.join('public', 'sandbox.js')]) {
+    fs.rmSync(path.resolve(scriptDir, '..', target), { force: true, recursive: true });
+  }
+}
+
+if (isExecutedAsScript(import.meta.url)) {
+  cleanBuildArtifacts();
+}

package/cli/project-templates/plugin/shared-base/scripts/dev-runner.ts

@@ -0,0 +1,52 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import type { ChildProcess } from 'node:child_process';
+import { runScript } from './npmRun.ts';
+
+function waitForFile(filePath: string, timeoutMs = 30_000, pollMs = 250): Promise<void> {
+  const startedAt = Date.now();
+
+  return new Promise((resolve, reject) => {
+    const check = (): void => {
+      if (fs.existsSync(filePath)) {
+        resolve();
+        return;
+      }
+
+      if (Date.now() - startedAt >= timeoutMs) {
+        reject(new Error(`Timed out waiting for file: ${filePath}`));
+        return;
+      }
+
+      setTimeout(check, pollMs);
+    };
+
+    check();
+  });
+}
+
+async function main(): Promise<void> {
+  const sandbox = runScript('dev:sandbox');
+  const sandboxFilePath = path.resolve(process.cwd(), 'public', 'sandbox.js');
+  let app: ChildProcess | undefined;
+
+  const shutdown = (): void => {
+    sandbox.kill('SIGINT');
+    app?.kill('SIGINT');
+  };
+
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+
+  try {
+    await waitForFile(sandboxFilePath);
+    app = runScript('dev:host');
+  } catch (error) {
+    shutdown();
+    const message = error instanceof Error ? error.message : String(error);
+    console.error(message);
+    process.exit(1);
+  }
+}
+
+void main();

package/cli/project-templates/plugin/shared-base/scripts/npmRun.ts

@@ -0,0 +1,61 @@
+import { spawn, spawnSync, type ChildProcess, type SpawnOptionsWithoutStdio } from 'node:child_process';
+
+interface CommandSpec {
+  executable: string;
+  args: string[];
+}
+
+interface RunScriptOptions {
+  env?: NodeJS.ProcessEnv;
+}
+
+function resolveNpmRunCommand(scriptName: string): CommandSpec {
+  const npmRunArgs = ['run', scriptName];
+
+  if (process.platform === 'win32') {
+    const npmExecPath = process.env.npm_execpath;
+    if (typeof npmExecPath === 'string' && npmExecPath.length > 0) {
+      return {
+        executable: process.execPath,
+        args: [npmExecPath, ...npmRunArgs],
+      };
+    }
+
+    return {
+      executable: process.env.ComSpec || 'cmd.exe',
+      args: ['/d', '/s', '/c', 'npm', ...npmRunArgs],
+    };
+  }
+
+  return {
+    executable: 'npm',
+    args: npmRunArgs,
+  };
+}
+
+function createSpawnOptions(env: NodeJS.ProcessEnv = {}): SpawnOptionsWithoutStdio {
+  return {
+    cwd: process.cwd(),
+    stdio: 'inherit',
+    shell: false,
+    env: { ...process.env, ...env },
+  };
+}
+
+export function runScript(scriptName: string, options: RunScriptOptions = {}): ChildProcess {
+  const { executable, args } = resolveNpmRunCommand(scriptName);
+  return spawn(executable, args, createSpawnOptions(options.env));
+}
+
+export function runScriptSync(scriptName: string, options: RunScriptOptions = {}): void {
+  const { executable, args } = resolveNpmRunCommand(scriptName);
+  const result = spawnSync(executable, args, createSpawnOptions(options.env));
+
+  if (result.error) {
+    throw result.error;
+  }
+
+  if (typeof result.status === 'number' && result.status !== 0) {
+    process.exit(result.status);
+  }
+}

package/cli/project-templates/plugin/shared-base/scripts/release-runner.ts

@@ -0,0 +1,18 @@
+import { buildProject } from './build-runner.ts';
+import { runScript } from './npmRun.ts';
+
+function main(): void {
+  buildProject();
+  console.log('[release] dev host — open /release.html');
+
+  const app = runScript('dev:host', { env: { EM_DEV_RELEASE: '1' } });
+
+  const shutdown = (): void => {
+    app.kill('SIGINT');
+  };
+
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+}
+
+main();

package/cli/project-templates/plugin/shared-base/scripts/scriptRuntime.ts

@@ -0,0 +1,10 @@
+import { pathToFileURL } from 'node:url';
+
+export function isExecutedAsScript(metaUrl: string): boolean {
+  const entryPath = process.argv[1];
+  if (!entryPath) {
+    return false;
+  }
+
+  return pathToFileURL(entryPath).href === metaUrl;
+}

package/cli/project-templates/plugin/shared-base/src/dev/hostApp.tsx.eta

@@ -0,0 +1 @@
+<% if (it.isMinimal) { %><%~ include('plugin-dev-host-app-minimal', it) %><% } else { %><%~ include('plugin-dev-host-app-advanced', it) %><% } %>

package/cli/project-templates/plugin/shared-base/src/dev-release.tsx.eta

@@ -0,0 +1 @@
+<%~ include('plugin-dev-tsx-release', it) %>

package/cli/project-templates/plugin/shared-base/src/dev.tsx.eta

@@ -1 +1 @@
-<% if (it.isMinimal) { %><%~ include('plugin-dev-tsx-minimal', it) %><% } else { %><%~ include('plugin-dev-tsx-advanced', it) %><% } %>
+<%~ include('plugin-dev-tsx-debug', it) %>