@coraltravelcenter/b2c-landing-builder 2.1.0 → 2.2.0

package/README.md

@@ -76,13 +76,14 @@ export default {
 
 Поддерживаются:
 
-- JavaScript: `vanilla`, `vue`;
+- JavaScript: `js`, `ts`, `vue`, `vue-ts` (`vanilla` поддерживается для старых проектов);
 - разметка: `html`, `pug`;
 - стили: `css`, `scss`, `less`;
 - сайты: `coral`, `sunmar`.
 
-Зависимости выбранного стека устанавливаются локально в проект: `vue` и
-`@vitejs/plugin-vue` для Vue, `pug` для Pug, `less` для Less и `sass` для SCSS.
+Зависимости выбранного стека устанавливаются локально в проект: `typescript`
+для TS, `vue` и `@vitejs/plugin-vue` для Vue, `pug` для Pug, `less` для Less и
+`sass` для SCSS.
 Builder загружает Vue-плагин из проекта, поэтому Vue-зависимости не
 устанавливаются вместе с глобальным builder.
 
@@ -105,7 +106,7 @@ src/
   styles/
     welcome.css | welcome.scss | welcome.less
   scripts/
-    welcome.js
+    welcome.js | welcome.ts
   components/       # только для Vue
 public/
 pug.rc               # только для Pug
@@ -125,13 +126,13 @@ package.json
 }
 ```
 
-Для каждого ключа builder ищет разметку, стиль и необязательный JS-файл с тем
+Для каждого ключа builder ищет разметку, стиль и необязательный JS/TS-файл с тем
 же именем. Форматы определяются `landing.config.mjs`.
 
-## Контракт JavaScript
+## Контракт JavaScript и TypeScript
 
-Если у блока есть `src/scripts/<key>.js`, файл обязан экспортировать функцию
-инициализации по умолчанию:
+Если у блока есть `src/scripts/<key>.js` или `src/scripts/<key>.ts`, файл обязан
+экспортировать функцию инициализации по умолчанию:
 
 ```js
 export default function hero() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coraltravelcenter/b2c-landing-builder",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "CLI and build toolkit for B2C landing projects",
   "type": "module",
   "bin": {

package/src/blocks/add.mjs

@@ -2,6 +2,7 @@ import fs from "node:fs";
 import path from "node:path";
 
 import {assertBlockKey, readOrder, writeOrder} from "./utils.mjs";
+import {resolveScriptStack} from "../config/script-stack.mjs";
 
 function markupTemplate(key, format) {
   return format === "pug" ? `section.${key}\n` : `<section class="${key}">\n</section>\n`;
@@ -21,10 +22,11 @@ export function addBlock(key, config, root = process.cwd()) {
   const {order, orderPath} = readOrder(root);
   if (order.blocks.includes(key)) throw new Error(`Block already exists in src/order.json: ${key}`);
 
+  const scriptStack = resolveScriptStack(config.stack.script);
   const files = [
     [path.resolve(root, "src/markup", `${key}.${config.stack.markup}`), markupTemplate(key, config.stack.markup)],
     [path.resolve(root, "src/styles", `${key}.${config.stack.styles}`), styleTemplate(key)],
-    [path.resolve(root, "src/scripts", `${key}.js`), scriptTemplate(key)],
+    [path.resolve(root, "src/scripts", `${key}.${scriptStack.extension}`), scriptTemplate(key)],
   ];
   const collision = files.find(([filePath]) => fs.existsSync(filePath));
   if (collision) throw new Error(`Cannot add block; target already exists: ${path.relative(root, collision[0])}`);

package/src/blocks/rename.mjs

@@ -3,7 +3,7 @@ import path from "node:path";
 
 import {assertBlockKey, readOrder, writeOrder} from "./utils.mjs";
 
-const FILES = {markup: ["html", "pug"], styles: ["css", "scss", "less"], scripts: ["js"]};
+const FILES = {markup: ["html", "pug"], styles: ["css", "scss", "less"], scripts: ["js", "ts"]};
 
 export function renameBlock(fromKey, toKey, root = process.cwd()) {
   assertBlockKey(fromKey, "source block key");

package/src/config/script-stack.mjs

@@ -0,0 +1,19 @@
+const SCRIPT_STACKS = {
+  vanilla: {extension: "js", vue: false, dependencies: []},
+  js: {extension: "js", vue: false, dependencies: []},
+  ts: {extension: "ts", vue: false, dependencies: ["typescript"]},
+  vue: {extension: "js", vue: true, dependencies: ["vue", "@vitejs/plugin-vue"]},
+  "vue-ts": {
+    extension: "ts",
+    vue: true,
+    dependencies: ["vue", "@vitejs/plugin-vue", "typescript"],
+  },
+};
+
+export const SCRIPT_STACK_VALUES = new Set(Object.keys(SCRIPT_STACKS));
+
+export function resolveScriptStack(script) {
+  const stack = SCRIPT_STACKS[script];
+  if (!stack) throw new Error(`Unsupported stack.script: ${JSON.stringify(script)}`);
+  return stack;
+}

package/src/config/validate-config.mjs

@@ -1,7 +1,9 @@
+import {SCRIPT_STACK_VALUES} from "./script-stack.mjs";
+
 const PROJECT_NAME_RE = /^[a-z0-9][a-z0-9-]*$/;
 const SUPPORTED_SCHEMA_VERSIONS = new Set([1]);
 const STACK_VALUES = {
-  script: new Set(["vanilla", "vue"]),
+  script: SCRIPT_STACK_VALUES,
   markup: new Set(["html", "pug"]),
   styles: new Set(["css", "scss", "less"]),
 };

package/src/config/validate-project.mjs

@@ -2,18 +2,22 @@ import fs from "node:fs";
 import {createRequire} from "node:module";
 import path from "node:path";
 
+import {resolveScriptStack} from "./script-stack.mjs";
+
 const BLOCK_KEY_RE = /^[a-z0-9][a-z0-9-_]*$/i;
 const DEFAULT_EXPORT_RE = /\bexport\s+default\s+(?:async\s+)?(?:function\b|\([^)]*\)\s*=>|[A-Za-z_$][\w$]*\s*=>|[A-Za-z_$][\w$]*\s*;?)/;
 const STACK_DEPENDENCIES = {
-  script: {vue: ["vue", "@vitejs/plugin-vue"]},
   markup: {pug: ["pug"]},
   styles: {less: ["less"], scss: ["sass"]},
 };
 
 function validateLocalDependencies(config, root) {
   const projectRequire = createRequire(path.resolve(root, "package.json"));
-  const dependencies = Object.entries(STACK_DEPENDENCIES)
-    .flatMap(([section, values]) => values[config.stack[section]] || []);
+  const dependencies = [
+    ...resolveScriptStack(config.stack.script).dependencies,
+    ...Object.entries(STACK_DEPENDENCIES)
+      .flatMap(([section, values]) => values[config.stack[section]] || []),
+  ];
 
   for (const dependency of dependencies) {
     try {
@@ -42,6 +46,7 @@ function readJson(filePath, label) {
 }
 
 export function validateProject(config, root = process.cwd()) {
+  const scriptStack = resolveScriptStack(config.stack.script);
   const orderPath = path.resolve(root, "src/order.json");
   const order = readJson(orderPath, "src/order.json");
   if (!Array.isArray(order.blocks)) {
@@ -61,12 +66,12 @@ export function validateProject(config, root = process.cwd()) {
       throw new Error(`Missing configured markup for block ${key}: src/markup/${key}.${config.stack.markup}`);
     }
 
-    const scriptPath = path.resolve(root, "src/scripts", `${key}.js`);
+    const scriptPath = path.resolve(root, "src/scripts", `${key}.${scriptStack.extension}`);
     if (!fs.existsSync(scriptPath)) continue;
     const source = fs.readFileSync(scriptPath, "utf8");
     if (!DEFAULT_EXPORT_RE.test(source)) {
       throw new Error(
-        `src/scripts/${key}.js must export its initializer as default function`
+        `src/scripts/${key}.${scriptStack.extension} must export its initializer as default function`
       );
     }
   }

package/src/lib/build-cms.mjs

@@ -6,6 +6,7 @@ import {cleanDir, ensureDir, existsFile, normalizeHtml, r, readBlocks} from "./_
 import {loadProjectVuePlugin} from "./loadProjectVuePlugin.mjs";
 import {processMarkup} from "./processMarkup.mjs";
 import {renderPugFile} from "./pugMarkup.mjs";
+import {resolveScriptStack} from "../config/script-stack.mjs";
 
 const ORDER_FILE = r("src/order.json");
 
@@ -83,7 +84,7 @@ try { if (typeof init === "function") init(); } catch (e) { console.warn(e); }
     },
   };
 
-  const vue = stack.script === "vue"
+  const vue = resolveScriptStack(stack.script).vue
     ? await loadProjectVuePlugin(process.cwd())
     : null;
   const res = await build({
@@ -120,11 +121,12 @@ try { if (typeof init === "function") init(); } catch (e) { console.warn(e); }
 // ---------- block build ----------
 
 async function buildBlock(key, stack) {
+  const scriptStack = resolveScriptStack(stack.script);
   const markupPath = path.join(MARKUP_DIR, `${key}.${stack.markup}`);
   if (!markupPath) return null;
   if (!existsFile(markupPath)) return null;
 
-  const jsPath = path.join(SCRIPTS_DIR, `${key}.js`);
+  const jsPath = path.join(SCRIPTS_DIR, `${key}.${scriptStack.extension}`);
 
   const markup = stack.markup === "pug"
     ? renderPugFile(markupPath)

package/src/lib/landingBlocksPlugin.mjs

@@ -4,6 +4,7 @@ import path from "node:path";
 import {existsFile, normalizeHtml, readBlocks} from "./_utils.mjs";
 import {processMarkup} from "./processMarkup.mjs";
 import {getPugConfigFile, renderPugFile} from "./pugMarkup.mjs";
+import {resolveScriptStack} from "../config/script-stack.mjs";
 
 const VIRTUAL_ID = "virtual:landing-blocks";
 const RESOLVED_VIRTUAL_ID = `\0${VIRTUAL_ID}`;
@@ -19,6 +20,7 @@ function isInside(directory, filePath) {
 }
 
 export function landingBlocksPlugin({root = process.cwd(), stack} = {}) {
+  const scriptStack = resolveScriptStack(stack.script);
   const orderFile = path.resolve(root, "src/order.json");
   const markupDir = path.resolve(root, "src/markup");
   const stylesDir = path.resolve(root, "src/styles");
@@ -87,7 +89,7 @@ export function landingBlocksPlugin({root = process.cwd(), stack} = {}) {
           imports.push(`import ${JSON.stringify(toVitePath(stylePath))};`);
         }
 
-        const scriptPath = path.join(scriptsDir, `${key}.js`);
+        const scriptPath = path.join(scriptsDir, `${key}.${scriptStack.extension}`);
         let init = "null";
         if (existsFile(scriptPath)) {
           this.addWatchFile(scriptPath);

package/src/vite/config.mjs

@@ -2,22 +2,37 @@ import {fileURLToPath} from "node:url";
 import path from "node:path";
 
 import {createServer} from "vite";
-import monkey from "vite-plugin-monkey";
 
 import {loadConfig} from "../config/load-config.mjs";
 import {resolvePreset} from "../config/resolve-preset.mjs";
 import {landingBlocksPlugin} from "../lib/landingBlocksPlugin.mjs";
 import {loadProjectVuePlugin} from "../lib/loadProjectVuePlugin.mjs";
+import {resolveScriptStack} from "../config/script-stack.mjs";
 
 const clientEntry = fileURLToPath(new URL("./client.js", import.meta.url));
 const builderRoot = fileURLToPath(new URL("../../", import.meta.url));
 const clientEntryUrl = `/@fs${clientEntry.replaceAll("\\", "/")}`;
+let monkeyPlugin;
+
+async function loadMonkeyPlugin() {
+  if (monkeyPlugin) return monkeyPlugin;
+
+  const projectRoot = process.cwd();
+  try {
+    process.chdir(builderRoot);
+    monkeyPlugin = (await import("vite-plugin-monkey")).default;
+    return monkeyPlugin;
+  } finally {
+    process.chdir(projectRoot);
+  }
+}
 
 export async function createViteConfig(root = process.cwd()) {
   const config = await loadConfig(root);
   const preset = resolvePreset(config.site.preset);
+  const monkey = await loadMonkeyPlugin();
   const shouldOpen = process.env.B2C_NO_OPEN !== "1";
-  const vue = config.stack.script === "vue"
+  const vue = resolveScriptStack(config.stack.script).vue
     ? await loadProjectVuePlugin(root)
     : null;
 
@@ -26,7 +41,7 @@ export async function createViteConfig(root = process.cwd()) {
     configFile: false,
     server: {
       host: "127.0.0.1",
-      port: 5173,
+      port: Number(process.env.B2C_PORT || 5173),
       strictPort: true,
       cors: true,
       open: shouldOpen ? "/__vite-plugin-monkey.install.user.js" : false,