create-mendix-widget-gleam 2.0.12 → 2.0.13

package/src/prompts.mjs

@@ -1,116 +1,142 @@
-/**
- * 인터랙티브 프롬프트 (node:readline 기반)
- */
-
-import { createInterface } from "node:readline/promises";
-import { stdin, stdout } from "node:process";
-import { existsSync } from "node:fs";
-import { resolve } from "node:path";
-import { splitWords } from "./naming.mjs";
-import { PM_CHOICES, detectPm } from "./pm.mjs";
-
-const BOLD = "\x1b[1m";
-const DIM = "\x1b[2m";
-const RESET = "\x1b[0m";
-const CYAN = "\x1b[36m";
-const YELLOW = "\x1b[33m";
-
-/** 프로젝트 이름 검증 */
-function validateName(name) {
-  if (!name || name.trim().length === 0) {
-    return "프로젝트 이름을 입력해주세요.";
-  }
-  const words = splitWords(name.trim());
-  if (words.length === 0) {
-    return "유효한 영문자를 포함해야 합니다.";
-  }
-  // 영문자, 숫자, -, _ 만 허용
-  if (!/^[a-zA-Z][a-zA-Z0-9\-_]*$/.test(name.trim())) {
-    return "영문자로 시작해야 하며, 영문자/숫자/-/_ 만 사용 가능합니다.";
-  }
-  return null;
-}
-
-/** 인터랙티브 프롬프트로 설정 수집 */
-export async function collectOptions(cliProjectName) {
-  const rl = createInterface({ input: stdin, output: stdout });
-  let done = false;
-
-  // Ctrl+C 처리 (프롬프트 완료 전에만)
-  rl.on("close", () => {
-    if (!done) {
-      console.log("\n취소되었습니다.");
-      process.exit(0);
-    }
-  });
-
-  let projectName = cliProjectName;
-
-  try {
-    // 1. 프로젝트 이름
-    if (!projectName) {
-      projectName = await rl.question(
-        `${BOLD}프로젝트 이름:${RESET} `,
-      );
-    }
-
-    const nameError = validateName(projectName);
-    if (nameError) {
-      done = true;
-      rl.close();
-      console.error(`\n${YELLOW}오류: ${nameError}${RESET}`);
-      process.exit(1);
-    }
-
-    projectName = projectName.trim();
-
-    // 디렉토리 충돌 확인
-    const targetDir = resolve(process.cwd(), projectName);
-    if (existsSync(targetDir)) {
-      done = true;
-      rl.close();
-      console.error(
-        `\n${YELLOW}오류: '${projectName}' 디렉토리가 이미 존재합니다.${RESET}`,
-      );
-      process.exit(1);
-    }
-
-    // 2. 패키지 매니저 선택
-    const detected = detectPm();
-    console.log(
-      `\n${BOLD}패키지 매니저 선택:${RESET} ${DIM}(감지: ${detected})${RESET}`,
-    );
-    PM_CHOICES.forEach((pm, i) => {
-      const marker = pm === detected ? ` ${CYAN}← 감지됨${RESET}` : "";
-      console.log(`  ${i + 1}) ${pm}${marker}`);
-    });
-
-    let pmAnswer = "";
-    try {
-      pmAnswer = await rl.question(
-        `선택 ${DIM}(1-${PM_CHOICES.length}, 기본: ${detected})${RESET}: `,
-      );
-    } catch {
-      // stdin이 닫혀도 기본값 사용
-    }
-
-    let pm = detected;
-    const pmIndex = parseInt(pmAnswer, 10);
-    if (pmIndex >= 1 && pmIndex <= PM_CHOICES.length) {
-      pm = PM_CHOICES[pmIndex - 1];
-    } else if (pmAnswer.trim() && PM_CHOICES.includes(pmAnswer.trim())) {
-      pm = pmAnswer.trim();
-    }
-
-    done = true;
-    rl.close();
-    return { projectName, pm };
-  } catch (err) {
-    done = true;
-    rl.close();
-    if (err.code === "ERR_USE_AFTER_CLOSE") {
-      process.exit(0);
-    }
-    throw err;
-  }
-}
+/**
+ * Interactive prompts (node:readline based)
+ */
+
+import { createInterface } from "node:readline/promises";
+import { stdin, stdout } from "node:process";
+import { existsSync } from "node:fs";
+import { resolve } from "node:path";
+import { splitWords } from "./naming.mjs";
+import { PM_CHOICES, detectPm } from "./pm.mjs";
+import { LANG_CHOICES, getLangLabel, t } from "./i18n.mjs";
+
+const BOLD = "\x1b[1m";
+const DIM = "\x1b[2m";
+const RESET = "\x1b[0m";
+const CYAN = "\x1b[36m";
+const YELLOW = "\x1b[33m";
+
+/** Project name validation */
+function validateName(lang, name) {
+  if (!name || name.trim().length === 0) {
+    return t(lang, "validate.nameRequired");
+  }
+  const words = splitWords(name.trim());
+  if (words.length === 0) {
+    return t(lang, "validate.needAlpha");
+  }
+  if (!/^[a-zA-Z][a-zA-Z0-9\-_]*$/.test(name.trim())) {
+    return t(lang, "validate.invalidChars");
+  }
+  return null;
+}
+
+/** Collect options via interactive prompts */
+export async function collectOptions(cliProjectName) {
+  const rl = createInterface({ input: stdin, output: stdout });
+  let done = false;
+
+  rl.on("close", () => {
+    if (!done) {
+      console.log("\nCancelled.");
+      process.exit(0);
+    }
+  });
+
+  let projectName = cliProjectName;
+
+  try {
+    // 1. Language selection (multilingual labels — shown before language is chosen)
+    console.log(
+      `\n${BOLD}Language / 언어 / 言語:${RESET}`,
+    );
+    LANG_CHOICES.forEach((code, i) => {
+      const label = getLangLabel(code);
+      console.log(`  ${i + 1}) ${label}`);
+    });
+
+    let langAnswer = "";
+    try {
+      langAnswer = await rl.question(
+        `${DIM}(1-${LANG_CHOICES.length}, default: 1)${RESET}: `,
+      );
+    } catch {
+      // stdin closed — use default
+    }
+
+    let lang = "en";
+    const langIndex = parseInt(langAnswer, 10);
+    if (langIndex >= 1 && langIndex <= LANG_CHOICES.length) {
+      lang = LANG_CHOICES[langIndex - 1];
+    }
+
+    // 2. Project name
+    if (!projectName) {
+      projectName = await rl.question(
+        `${BOLD}${t(lang, "prompt.projectName")}${RESET} `,
+      );
+    }
+
+    const nameError = validateName(lang, projectName);
+    if (nameError) {
+      done = true;
+      rl.close();
+      console.error(`\n${YELLOW}${nameError}${RESET}`);
+      process.exit(1);
+    }
+
+    projectName = projectName.trim();
+
+    // Check directory conflict
+    const targetDir = resolve(process.cwd(), projectName);
+    if (existsSync(targetDir)) {
+      done = true;
+      rl.close();
+      console.error(
+        `\n${YELLOW}${t(lang, "error.dirExists", { name: projectName })}${RESET}`,
+      );
+      process.exit(1);
+    }
+
+    // 3. Package manager selection
+    const detected = detectPm();
+    console.log(
+      `\n${BOLD}${t(lang, "prompt.pmSelect")}${RESET} ${DIM}(${t(lang, "prompt.pmDetected", { detected })})${RESET}`,
+    );
+    PM_CHOICES.forEach((pm, i) => {
+      const marker =
+        pm === detected
+          ? ` ${CYAN}${t(lang, "prompt.pmDetectedMarker")}${RESET}`
+          : "";
+      console.log(`  ${i + 1}) ${pm}${marker}`);
+    });
+
+    let pmAnswer = "";
+    try {
+      pmAnswer = await rl.question(
+        `${t(lang, "prompt.pmChoose", { count: PM_CHOICES.length, default: detected })}: `,
+      );
+    } catch {
+      // stdin closed — use default
+    }
+
+    let pm = detected;
+    const pmIndex = parseInt(pmAnswer, 10);
+    if (pmIndex >= 1 && pmIndex <= PM_CHOICES.length) {
+      pm = PM_CHOICES[pmIndex - 1];
+    } else if (pmAnswer.trim() && PM_CHOICES.includes(pmAnswer.trim())) {
+      pm = pmAnswer.trim();
+    }
+
+    done = true;
+    rl.close();
+    return { projectName, pm, lang };
+  } catch (err) {
+    done = true;
+    rl.close();
+    if (err.code === "ERR_USE_AFTER_CLOSE") {
+      process.exit(0);
+    }
+    throw err;
+  }
+}

package/src/scaffold.mjs

@@ -1,89 +1,97 @@
-/**
- * 파일 복사 + 템플릿 치환
- */
-
-import { readdir, readFile, writeFile, mkdir, copyFile } from "node:fs/promises";
-import { join, relative } from "node:path";
-
-/** 바이너리 판별용 확장자 */
-const BINARY_EXTS = new Set([".png", ".jpg", ".gif", ".ico", ".woff", ".woff2", ".ttf", ".eot"]);
-
-/** 재귀적으로 디렉토리 내 모든 파일 경로를 수집 */
-async function walkDir(dir) {
-  const entries = await readdir(dir, { withFileTypes: true });
-  const files = [];
-  for (const entry of entries) {
-    const fullPath = join(dir, entry.name);
-    if (entry.isDirectory()) {
-      files.push(...(await walkDir(fullPath)));
-    } else {
-      files.push(fullPath);
-    }
-  }
-  return files;
-}
-
-// npm publish 시 제외되는 dotfile을 언더스코어 접두사로 보관하고 복원
-const DOTFILE_MAP = { _gitignore: ".gitignore" };
-
-/** 파일명에서 플레이스홀더 치환 + dotfile 복원 */
-function replaceFileName(name, names) {
-  if (DOTFILE_MAP[name]) return DOTFILE_MAP[name];
-  return name
-    .replace(/__WidgetName__/g, names.pascalCase)
-    .replace(/__widget_name__/g, names.snakeCase);
-}
-
-/** 파일 내용에서 플레이스홀더 치환 */
-function replaceContent(content, names, pmConfig) {
-  return content
-    .replace(/\{\{PASCAL_CASE\}\}/g, names.pascalCase)
-    .replace(/\{\{SNAKE_CASE\}\}/g, names.snakeCase)
-    .replace(/\{\{LOWERCASE\}\}/g, names.lowerCase)
-    .replace(/\{\{DISPLAY_NAME\}\}/g, names.displayName)
-    .replace(/\{\{KEBAB_CASE\}\}/g, names.kebabCase)
-;
-}
-
-/**
- * 템플릿을 대상 디렉토리에 스케폴딩
- * @param {string} templateDir - 템플릿 디렉토리 경로
- * @param {string} targetDir - 생성할 프로젝트 디렉토리 경로
- * @param {object} names - 이름 변환 결과
- * @param {object} pmConfig - 패키지 매니저 설정
- */
-export async function scaffold(templateDir, targetDir, names, pmConfig) {
-  const files = await walkDir(templateDir);
-  const created = [];
-
-  for (const srcPath of files) {
-    // 템플릿 기준 상대 경로
-    const relPath = relative(templateDir, srcPath);
-
-    // 경로의 각 부분에서 파일명 치환
-    const destRelPath = relPath
-      .split(/[\\/]/)
-      .map((part) => replaceFileName(part, names))
-      .join("/");
-
-    const destPath = join(targetDir, destRelPath);
-    const ext = srcPath.substring(srcPath.lastIndexOf(".")).toLowerCase();
-
-    // 디렉토리 생성
-    await mkdir(join(destPath, ".."), { recursive: true });
-
-    if (BINARY_EXTS.has(ext)) {
-      // 바이너리 파일은 그대로 복사
-      await copyFile(srcPath, destPath);
-    } else {
-      // 텍스트 파일은 내용 치환
-      const content = await readFile(srcPath, "utf-8");
-      const replaced = replaceContent(content, names, pmConfig);
-      await writeFile(destPath, replaced, "utf-8");
-    }
-
-    created.push(destRelPath);
-  }
-
-  return created;
-}
+/**
+ * 파일 복사 + 템플릿 치환
+ */
+
+import { readdir, readFile, writeFile, mkdir, copyFile } from "node:fs/promises";
+import { join, relative } from "node:path";
+
+/** 바이너리 판별용 확장자 */
+const BINARY_EXTS = new Set([".png", ".jpg", ".gif", ".ico", ".woff", ".woff2", ".ttf", ".eot"]);
+
+/** 재귀적으로 디렉토리 내 모든 파일 경로를 수집 */
+async function walkDir(dir) {
+  const entries = await readdir(dir, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...(await walkDir(fullPath)));
+    } else {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+// npm publish 시 제외되는 dotfile을 언더스코어 접두사로 보관하고 복원
+const DOTFILE_MAP = { _gitignore: ".gitignore" };
+
+/** 파일명에서 플레이스홀더 치환 + dotfile 복원 */
+function replaceFileName(name, names) {
+  if (DOTFILE_MAP[name]) return DOTFILE_MAP[name];
+  return name
+    .replace(/__WidgetName__/g, names.pascalCase)
+    .replace(/__widget_name__/g, names.snakeCase);
+}
+
+/** 파일 내용에서 플레이스홀더 치환 */
+function replaceContent(content, names, pmConfig, templateComments) {
+  let result = content
+    .replace(/\{\{PASCAL_CASE\}\}/g, names.pascalCase)
+    .replace(/\{\{SNAKE_CASE\}\}/g, names.snakeCase)
+    .replace(/\{\{LOWERCASE\}\}/g, names.lowerCase)
+    .replace(/\{\{DISPLAY_NAME\}\}/g, names.displayName)
+    .replace(/\{\{KEBAB_CASE\}\}/g, names.kebabCase);
+
+  if (templateComments) {
+    result = result.replace(/\{\{I18N:(\w+)\}\}/g, (_, key) => {
+      return templateComments[key] ?? `{{I18N:${key}}}`;
+    });
+  }
+
+  return result;
+}
+
+/**
+ * 템플릿을 대상 디렉토리에 스케폴딩
+ * @param {string} templateDir - 템플릿 디렉토리 경로
+ * @param {string} targetDir - 생성할 프로젝트 디렉토리 경로
+ * @param {object} names - 이름 변환 결과
+ * @param {object} pmConfig - 패키지 매니저 설정
+ * @param {object} [templateComments] - i18n 템플릿 주석 ({{I18N:*}} 치환용)
+ */
+export async function scaffold(templateDir, targetDir, names, pmConfig, templateComments) {
+  const files = await walkDir(templateDir);
+  const created = [];
+
+  for (const srcPath of files) {
+    // 템플릿 기준 상대 경로
+    const relPath = relative(templateDir, srcPath);
+
+    // 경로의 각 부분에서 파일명 치환
+    const destRelPath = relPath
+      .split(/[\\/]/)
+      .map((part) => replaceFileName(part, names))
+      .join("/");
+
+    const destPath = join(targetDir, destRelPath);
+    const ext = srcPath.substring(srcPath.lastIndexOf(".")).toLowerCase();
+
+    // 디렉토리 생성
+    await mkdir(join(destPath, ".."), { recursive: true });
+
+    if (BINARY_EXTS.has(ext)) {
+      // 바이너리 파일은 그대로 복사
+      await copyFile(srcPath, destPath);
+    } else {
+      // 텍스트 파일은 내용 치환
+      const content = await readFile(srcPath, "utf-8");
+      const replaced = replaceContent(content, names, pmConfig, templateComments);
+      await writeFile(destPath, replaced, "utf-8");
+    }
+
+    created.push(destRelPath);
+  }
+
+  return created;
+}

package/src/templates/claude_md.mjs

@@ -0,0 +1,105 @@
+/**
+ * CLAUDE.md template — always generated in English.
+ * Only the Code Style comment language instruction varies by lang.
+ */
+
+const COMMENT_LANG_INSTRUCTIONS = {
+  en: "Use English comments",
+  ko: "Use Korean comments",
+  ja: "Use Japanese comments",
+};
+
+export function generateClaudeMdContent(lang, names, pm, pmConfig) {
+  const commentInstruction =
+    COMMENT_LANG_INSTRUCTIONS[lang] ?? COMMENT_LANG_INSTRUCTIONS["en"];
+
+  return `# ${names.pascalCase}
+
+A project for developing Mendix Pluggable Widgets with Gleam. Widgets are implemented using only Gleam + [glendix](https://hexdocs.pm/glendix/) bindings, without JSX.
+
+## Commands
+
+\`\`\`bash
+gleam run -m glendix/install      # Install dependencies (Gleam deps + npm + bindings.json code generation)
+gleam run -m glendix/build        # Production build (.mpk output)
+gleam run -m glendix/dev          # Dev server (HMR, port 3000)
+gleam run -m glendix/start        # Link with Mendix test project
+gleam run -m glendix/release      # Release build
+gleam run -m glendix/lint         # Run ESLint
+gleam run -m glendix/lint_fix     # ESLint auto-fix
+gleam run -m glendix/marketplace  # Search/download Marketplace widgets
+gleam test                        # Run tests
+gleam format                      # Format code
+\`\`\`
+
+If you add external React packages to bindings.json, install the npm package manually before running \`glendix/install\`.
+
+## Hard Rules
+
+IMPORTANT: Breaking these rules will break the build or compromise the architecture.
+
+- **Do not write JSX/JS files directly.** All widget logic and UI must be written in Gleam
+- **Do not write FFI files (.mjs) in the widget project.** React/Mendix FFI is provided by the glendix package
+- **Do not manually manage bridge JS files (src/*.js).** glendix auto-generates/deletes them at build time
+- **Do not use external Gleam React libraries such as Redraw.** Use only glendix for React bindings
+- The Gleam compilation output path (\`build/dev/javascript/{gleam.toml name}/\`) must match the Rollup input path
+- Mendix widget names allow only alphabetic characters (a-zA-Z)
+
+## Code Style
+
+- Format with \`gleam format\`
+- ${commentInstruction}
+- Do not manually edit compiled JS output (\`build/\`)
+
+## Architecture
+
+Widget entry point signature: \`pub fn widget(props: JsProps) -> ReactElement\` — identical to a React functional component.
+
+- \`src/${names.snakeCase}.gleam\` — Main widget (called by Mendix runtime)
+- \`src/editor_config.gleam\` — Studio Pro property panel configuration
+- \`src/editor_preview.gleam\` — Studio Pro design view preview
+- \`src/components/\` — Shared components
+- \`src/${names.pascalCase}.xml\` — Widget property definitions. Adding \`<property>\` triggers automatic type generation by the build tool
+- \`src/package.xml\` — Mendix package manifest
+- \`bindings.json\` — External React component binding configuration
+- \`widgets/\` — .mpk widget file bindings (used via \`glendix/widget\`)
+
+## Build Pipeline
+
+\`\`\`
+src/*.gleam → gleam build → build/dev/javascript/**/*.mjs → Bridge JS (auto-generated) → Rollup → dist/**/*.mpk
+\`\`\`
+
+## Mendix Widget Conventions
+
+- Widget ID: \`mendix.${names.lowerCase}.${names.pascalCase}\`
+- \`packagePath: "mendix"\` in \`package.json\` determines the deployment path
+- \`needsEntityContext="true"\` → Requires Mendix data context
+- \`offlineCapable="true"\` → Offline support
+- \`.mpk\` output: \`dist/\` directory
+- Test project: \`./tests/testProject\`
+
+## Key Concepts
+
+- Mendix props (\`JsProps\`) are accessed via \`mendix.get_prop\`/\`mendix.get_string_prop\` etc.
+- Mendix complex types (\`EditableValue\`, \`ActionValue\`, \`ListValue\`) are opaque types with FFI accessors
+- JS \`undefined\` ↔ Gleam \`Option\` conversion is handled automatically at the FFI boundary
+- HTML attributes use the Attribute list API: \`[attribute.class("x"), event.on_click(handler)]\`
+- Gleam tuples \`#(a, b)\` = JS \`[a, b]\` — directly compatible with \`useState\` return values
+
+## Reference Docs
+
+For detailed glendix API and Gleam syntax, see:
+
+- docs/glendix_guide.md — Complete React/Mendix bindings guide (elements, Hooks, events, Mendix types, practical patterns, troubleshooting)
+- docs/gleam_language_tour.md — Gleam syntax reference (types, pattern matching, FFI, use keyword, etc.)
+
+## Mendix Documentation Sources
+
+docs.mendix.com is not accessible. Use GitHub raw sources:
+
+- Pluggable Widgets API: \`https://github.com/mendix/docs/blob/development/content/en/docs/apidocs-mxsdk/apidocs/pluggable-widgets/\`
+- Build tools source: \`https://github.com/mendix/widgets-tools\`
+- Official widget examples: \`https://github.com/mendix/web-widgets\`
+`;
+}