create-mendix-widget-gleam 2.0.12 → 2.0.13

package/src/templates/widgets_readme.mjs

@@ -0,0 +1,272 @@
+/**
+ * widgets/README.md template — 3 language versions
+ */
+
+export function generateWidgetsReadmeContent(lang) {
+  switch (lang) {
+    case "ko":
+      return generateKo();
+    case "ja":
+      return generateJa();
+    default:
+      return generateEn();
+  }
+}
+
+function generateEn() {
+  return `# widgets/
+
+Mendix widget binding directory. Place \`.mpk\` files (Mendix widget build artifacts) in this directory to render existing Mendix widgets as React components from Gleam code.
+
+## Usage
+
+### 1. Place \`.mpk\` files
+
+Copy built Mendix widget \`.mpk\` files into this directory:
+
+\`\`\`
+widgets/
+├── Switch.mpk
+├── Badge.mpk
+└── README.md
+\`\`\`
+
+### 2. Generate bindings
+
+\`\`\`bash
+gleam run -m glendix/install
+\`\`\`
+
+This automatically:
+
+- Extracts \`.mjs\` and \`.css\` from \`.mpk\` and generates \`widget_ffi.mjs\`
+- Parses \`<property>\` definitions from \`.mpk\` XML and generates binding \`.gleam\` files in \`src/widgets/\` (existing files are skipped)
+
+### 3. Review auto-generated bindings
+
+For example, placing \`Switch.mpk\` generates \`src/widgets/switch.gleam\`:
+
+\`\`\`gleam
+// src/widgets/switch.gleam (auto-generated)
+import glendix/mendix
+import glendix/react.{type JsProps, type ReactElement}
+import glendix/react/attribute
+import glendix/widget
+
+/// Render Switch widget - reads properties from props and passes them to the widget
+pub fn render(props: JsProps) -> ReactElement {
+  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
+  let action = mendix.get_prop_required(props, "action")
+
+  let comp = widget.component("Switch")
+  react.component_el(
+    comp,
+    [
+      attribute.attribute("booleanAttribute", boolean_attribute),
+      attribute.attribute("action", action),
+    ],
+    [],
+  )
+}
+\`\`\`
+
+- Required/optional properties are distinguished automatically
+- If optional properties exist, \`optional_attr\` helper and \`gleam/option\` import are added automatically
+- Gleam reserved words (e.g. \`type\`) are automatically suffixed with \`_\`
+- Generated files can be freely modified as needed
+
+### 4. Use from Gleam
+
+\`\`\`gleam
+import widgets/switch
+
+// Inside a component
+switch.render(props)
+\`\`\`
+
+## How it works
+
+- \`glendix/widget\` module's \`widget.component("Name")\` imports \`.mpk\` widgets as React components
+- Props are passed via the generic \`attribute.attribute(key, value)\` function
+- Widget names use the \`<name>\` value from the \`.mpk\`'s internal XML, and property keys use the original keys from the \`.mpk\` XML
+- Unlike the \`binding\` module, 1 mpk = 1 component, so \`widget.component("Name")\` imports it in one call
+
+## Notes
+
+- After adding/removing \`.mpk\` files, you must run \`gleam run -m glendix/install\` again
+- \`widget_ffi.mjs\` is auto-generated — do not edit it directly
+- Do not write \`.mjs\` FFI files for \`.mpk\` widgets manually — use the \`widgets/\` directory + \`glendix/widget\`
+`;
+}
+
+function generateKo() {
+  return `# widgets/
+
+Mendix 위젯 바인딩 디렉토리. \`.mpk\` 파일(Mendix 위젯 빌드 결과물)을 이 디렉토리에 배치하면, Gleam 코드에서 기존 Mendix 위젯을 React 컴포넌트로 렌더링할 수 있다.
+
+## 사용법
+
+### 1. \`.mpk\` 파일 배치
+
+빌드된 Mendix 위젯의 \`.mpk\` 파일을 이 디렉토리에 복사한다:
+
+\`\`\`
+widgets/
+├── Switch.mpk
+├── Badge.mpk
+└── README.md
+\`\`\`
+
+### 2. 바인딩 생성
+
+\`\`\`bash
+gleam run -m glendix/install
+\`\`\`
+
+실행 시 다음이 자동 처리된다:
+
+- \`.mpk\` 내부의 \`.mjs\`와 \`.css\`가 추출되고, \`widget_ffi.mjs\`가 생성된다
+- \`.mpk\` XML의 \`<property>\` 정의를 파싱하여 \`src/widgets/\`에 바인딩 \`.gleam\` 파일이 자동 생성된다 (이미 존재하면 건너뜀)
+
+### 3. 자동 생성된 바인딩 확인
+
+예를 들어 \`Switch.mpk\`를 배치하면 \`src/widgets/switch.gleam\`이 생성된다:
+
+\`\`\`gleam
+// src/widgets/switch.gleam (자동 생성)
+import glendix/mendix
+import glendix/react.{type JsProps, type ReactElement}
+import glendix/react/attribute
+import glendix/widget
+
+/// Switch 위젯 렌더링 - props에서 속성을 읽어 위젯에 전달
+pub fn render(props: JsProps) -> ReactElement {
+  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
+  let action = mendix.get_prop_required(props, "action")
+
+  let comp = widget.component("Switch")
+  react.component_el(
+    comp,
+    [
+      attribute.attribute("booleanAttribute", boolean_attribute),
+      attribute.attribute("action", action),
+    ],
+    [],
+  )
+}
+\`\`\`
+
+- required/optional 속성이 자동 구분된다
+- optional 속성이 있으면 \`optional_attr\` 헬퍼와 \`gleam/option\` import가 자동 추가된다
+- Gleam 예약어(\`type\` 등)는 접미사 \`_\`로 자동 회피된다
+- 생성된 파일은 필요에 따라 자유롭게 수정 가능하다
+
+### 4. Gleam에서 사용
+
+\`\`\`gleam
+import widgets/switch
+
+// 컴포넌트 내부에서
+switch.render(props)
+\`\`\`
+
+## 동작 원리
+
+- \`glendix/widget\` 모듈의 \`widget.component("Name")\`으로 \`.mpk\` 위젯을 React 컴포넌트로 가져온다
+- Props는 \`attribute.attribute(key, value)\` 범용 함수로 전달한다
+- 위젯 이름은 \`.mpk\` 내부 XML의 \`<name>\` 값을, property key는 XML의 원본 key를 그대로 사용한다
+- \`binding\` 모듈과 달리 1 mpk = 1 컴포넌트이므로 \`widget.component("Name")\` 한 번에 가져온다
+
+## 주의사항
+
+- \`.mpk\` 파일을 추가/제거한 후에는 반드시 \`gleam run -m glendix/install\`을 다시 실행해야 한다
+- \`widget_ffi.mjs\`는 자동 생성 파일이므로 직접 수정하지 않는다
+- \`.mpk\` 위젯용 \`.mjs\` FFI 파일을 직접 작성하지 않는다 — \`widgets/\` 디렉토리 + \`glendix/widget\`을 사용한다
+`;
+}
+
+function generateJa() {
+  return `# widgets/
+
+Mendixウィジェットバインディングディレクトリ。\`.mpk\`ファイル（Mendixウィジェットビルド成果物）をこのディレクトリに配置すると、Gleamコードから既存のMendixウィジェットをReactコンポーネントとしてレンダリングできる。
+
+## 使い方
+
+### 1. \`.mpk\`ファイルの配置
+
+ビルド済みMendixウィジェットの\`.mpk\`ファイルをこのディレクトリにコピーする：
+
+\`\`\`
+widgets/
+├── Switch.mpk
+├── Badge.mpk
+└── README.md
+\`\`\`
+
+### 2. バインディングの生成
+
+\`\`\`bash
+gleam run -m glendix/install
+\`\`\`
+
+実行時に以下が自動処理される：
+
+- \`.mpk\`内部の\`.mjs\`と\`.css\`が抽出され、\`widget_ffi.mjs\`が生成される
+- \`.mpk\` XMLの\`<property>\`定義をパースし、\`src/widgets/\`にバインディング\`.gleam\`ファイルが自動生成される（既存ファイルはスキップ）
+
+### 3. 自動生成されたバインディングの確認
+
+例えば\`Switch.mpk\`を配置すると\`src/widgets/switch.gleam\`が生成される：
+
+\`\`\`gleam
+// src/widgets/switch.gleam（自動生成）
+import glendix/mendix
+import glendix/react.{type JsProps, type ReactElement}
+import glendix/react/attribute
+import glendix/widget
+
+/// Switchウィジェットのレンダリング - propsからプロパティを読み取りウィジェットに渡す
+pub fn render(props: JsProps) -> ReactElement {
+  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
+  let action = mendix.get_prop_required(props, "action")
+
+  let comp = widget.component("Switch")
+  react.component_el(
+    comp,
+    [
+      attribute.attribute("booleanAttribute", boolean_attribute),
+      attribute.attribute("action", action),
+    ],
+    [],
+  )
+}
+\`\`\`
+
+- required/optionalプロパティは自動的に区別される
+- optionalプロパティがある場合、\`optional_attr\`ヘルパーと\`gleam/option\` importが自動追加される
+- Gleam予約語（\`type\`等）はサフィックス\`_\`で自動回避される
+- 生成されたファイルは必要に応じて自由に編集できる
+
+### 4. Gleamから使用
+
+\`\`\`gleam
+import widgets/switch
+
+// コンポーネント内で
+switch.render(props)
+\`\`\`
+
+## 仕組み
+
+- \`glendix/widget\`モジュールの\`widget.component("Name")\`で\`.mpk\`ウィジェットをReactコンポーネントとしてインポートする
+- Propsは\`attribute.attribute(key, value)\`汎用関数で渡す
+- ウィジェット名は\`.mpk\`内部XMLの\`<name>\`値を、プロパティキーはXMLの元のキーをそのまま使用する
+- \`binding\`モジュールと異なり1 mpk = 1コンポーネントなので、\`widget.component("Name")\`で一度にインポートする
+
+## 注意事項
+
+- \`.mpk\`ファイルを追加/削除した後は必ず\`gleam run -m glendix/install\`を再実行すること
+- \`widget_ffi.mjs\`は自動生成ファイルなので直接編集しない
+- \`.mpk\`ウィジェット用の\`.mjs\` FFIファイルを直接記述しない — \`widgets/\`ディレクトリ + \`glendix/widget\`を使用する
+`;
+}

package/template/_gitignore

@@ -1,58 +1,58 @@
-# 의존성
-node_modules/
-.yarn/
-.pnp.*
-
-# 패키지 매니저 lock 파일
-package-lock.json
-yarn.lock
-pnpm-lock.yaml
-bun.lockb
-bun.lock
-
-# 패키지 매니저 캐시/설정
-.npmrc
-.yarnrc
-.yarnrc.yml
-.pnpmfile.cjs
-.npmignore
-
-# Gleam 컴파일 출력
-build/
-
-# Mendix 위젯 빌드 출력
-dist/
-
-# 환경 변수
-.env
-
-# 로그
-*.log
-
-# OS
-.DS_Store
-
-# IDE
-.idea/
-.vscode/
-*.launch
-
-# Mendix 테스트 프로젝트
-tests/testProject/
-
-# 테스트 산출물
-coverage/
-**/e2e/diffs/
-**/screenshot/
-**/screenshot-results/
-**/artifacts/
-
-# 자동 생성 브릿지 파일 (glendix가 빌드 시 생성/삭제)
-src/*.js
-
-# AI
-.claude/
-
-# Mendix marketplace 캐시/설정
-.marketplace-cache/
-
+{{I18N:gitignore_deps}}
+node_modules/
+.yarn/
+.pnp.*
+
+{{I18N:gitignore_lockfiles}}
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+bun.lockb
+bun.lock
+
+{{I18N:gitignore_pm_cache}}
+.npmrc
+.yarnrc
+.yarnrc.yml
+.pnpmfile.cjs
+.npmignore
+
+{{I18N:gitignore_gleam_build}}
+build/
+
+{{I18N:gitignore_mendix_build}}
+dist/
+
+{{I18N:gitignore_env}}
+.env
+
+{{I18N:gitignore_logs}}
+*.log
+
+{{I18N:gitignore_os}}
+.DS_Store
+
+{{I18N:gitignore_ide}}
+.idea/
+.vscode/
+*.launch
+
+{{I18N:gitignore_test_project}}
+tests/testProject/
+
+{{I18N:gitignore_test_artifacts}}
+coverage/
+**/e2e/diffs/
+**/screenshot/
+**/screenshot-results/
+**/artifacts/
+
+{{I18N:gitignore_bridge}}
+src/*.js
+
+{{I18N:gitignore_ai}}
+.claude/
+
+{{I18N:gitignore_marketplace}}
+.marketplace-cache/
+

package/template/gleam.toml

@@ -1,11 +1,11 @@
-name = "{{SNAKE_CASE}}"
-version = "1.0.0"
-target = "javascript"
-
-[javascript]
-typescript_declarations = false
-runtime = "node"
-
-[dependencies]
-gleam_stdlib = ">= 0.44.0 and < 2.0.0"
-glendix = ">= 2.0.11 and < 3.0.0"
+name = "{{SNAKE_CASE}}"
+version = "1.0.0"
+target = "javascript"
+
+[javascript]
+typescript_declarations = false
+runtime = "node"
+
+[dependencies]
+gleam_stdlib = ">= 0.44.0 and < 2.0.0"
+glendix = ">= 2.0.13 and < 3.0.0"

package/template/src/__widget_name__.gleam

@@ -1,12 +1,12 @@
-// Mendix Pluggable Widget - "Hello World"
-// React 함수형 컴포넌트: fn(JsProps) -> ReactElement
-
-import components/hello_world
-import glendix/mendix
-import glendix/react.{type JsProps, type ReactElement}
-
-/// 위젯 메인 함수 - Mendix 런타임이 React 컴포넌트로 호출
-pub fn widget(props: JsProps) -> ReactElement {
-  let sample_text = mendix.get_string_prop(props, "sampleText")
-  hello_world.render(sample_text)
-}
+{{I18N:widget_main_1}}
+{{I18N:widget_main_2}}
+
+import components/hello_world
+import glendix/mendix
+import glendix/react.{type JsProps, type ReactElement}
+
+{{I18N:widget_main_doc}}
+pub fn widget(props: JsProps) -> ReactElement {
+  let sample_text = mendix.get_string_prop(props, "sampleText")
+  hello_world.render(sample_text)
+}

package/template/src/components/hello_world.gleam

@@ -1,13 +1,13 @@
-// Hello World 컴포넌트
-// 위젯 런타임과 Studio Pro 미리보기에서 공유
-
-import glendix/react.{type ReactElement}
-import glendix/react/attribute
-import glendix/react/html
-
-/// Hello World UI 렌더링
-pub fn render(sample_text: String) -> ReactElement {
-  html.div([attribute.class("widget-hello-world")], [
-    react.text("Hello " <> sample_text),
-  ])
-}
+{{I18N:hello_world_1}}
+{{I18N:hello_world_2}}
+
+import glendix/react.{type ReactElement}
+import glendix/react/attribute
+import glendix/react/html
+
+{{I18N:hello_world_doc}}
+pub fn render(sample_text: String) -> ReactElement {
+  html.div([attribute.class("widget-hello-world")], [
+    react.text("Hello " <> sample_text),
+  ])
+}

package/template/src/editor_config.gleam

@@ -1,18 +1,18 @@
-// Mendix Studio Pro 속성 패널 설정
-// getProperties, check, getPreview 등을 정의
-
-// 외부 타입 (Mendix가 전달하는 JS 객체)
-pub type Values
-
-pub type Properties
-
-pub type Target
-
-/// 속성 패널 설정 - Studio Pro에서 위젯 속성의 가시성을 제어
-pub fn get_properties(
-  _values: Values,
-  default_properties: Properties,
-  _target: Target,
-) -> Properties {
-  default_properties
-}
+{{I18N:editor_config_1}}
+{{I18N:editor_config_2}}
+
+{{I18N:editor_config_3}}
+pub type Values
+
+pub type Properties
+
+pub type Target
+
+{{I18N:editor_config_doc}}
+pub fn get_properties(
+  _values: Values,
+  default_properties: Properties,
+  _target: Target,
+) -> Properties {
+  default_properties
+}

package/template/src/editor_preview.gleam

@@ -1,12 +1,12 @@
-// Mendix Studio Pro 디자인 뷰 미리보기
-// Studio Pro에서 위젯의 시각적 미리보기를 렌더링
-
-import components/hello_world
-import glendix/mendix
-import glendix/react.{type JsProps, type ReactElement}
-
-/// Studio Pro 디자인 뷰 미리보기 - 위젯의 시각적 표현을 렌더링
-pub fn preview(props: JsProps) -> ReactElement {
-  let sample_text = mendix.get_string_prop(props, "sampleText")
-  hello_world.render(sample_text)
-}
+{{I18N:editor_preview_1}}
+{{I18N:editor_preview_2}}
+
+import components/hello_world
+import glendix/mendix
+import glendix/react.{type JsProps, type ReactElement}
+
+{{I18N:editor_preview_doc}}
+pub fn preview(props: JsProps) -> ReactElement {
+  let sample_text = mendix.get_string_prop(props, "sampleText")
+  hello_world.render(sample_text)
+}

package/template/widgets/README.md

@@ -1,82 +1 @@
-# widgets/
-
-Mendix 위젯 바인딩 디렉토리. `.mpk` 파일(Mendix 위젯 빌드 결과물)을 이 디렉토리에 배치하면, Gleam 코드에서 기존 Mendix 위젯을 React 컴포넌트로 렌더링할 수 있다.
-
-## 사용법
-
-### 1. `.mpk` 파일 배치
-
-빌드된 Mendix 위젯의 `.mpk` 파일을 이 디렉토리에 복사한다:
-
-```
-widgets/
-├── Switch.mpk
-├── Badge.mpk
-└── README.md
-```
-
-### 2. 바인딩 생성
-
-```bash
-gleam run -m glendix/install
-```
-
-실행 시 다음이 자동 처리된다:
-
-- `.mpk` 내부의 `.mjs`와 `.css`가 추출되고, `widget_ffi.mjs`가 생성된다
-- `.mpk` XML의 `<property>` 정의를 파싱하여 `src/widgets/`에 바인딩 `.gleam` 파일이 자동 생성된다 (이미 존재하면 건너뜀)
-
-### 3. 자동 생성된 바인딩 확인
-
-예를 들어 `Switch.mpk`를 배치하면 `src/widgets/switch.gleam`이 생성된다:
-
-```gleam
-// src/widgets/switch.gleam (자동 생성)
-import glendix/mendix
-import glendix/react.{type JsProps, type ReactElement}
-import glendix/react/attribute
-import glendix/widget
-
-/// Switch 위젯 렌더링 - props에서 속성을 읽어 위젯에 전달
-pub fn render(props: JsProps) -> ReactElement {
-  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
-  let action = mendix.get_prop_required(props, "action")
-
-  let comp = widget.component("Switch")
-  react.component_el(
-    comp,
-    [
-      attribute.attribute("booleanAttribute", boolean_attribute),
-      attribute.attribute("action", action),
-    ],
-    [],
-  )
-}
-```
-
-- required/optional 속성이 자동 구분된다
-- optional 속성이 있으면 `optional_attr` 헬퍼와 `gleam/option` import가 자동 추가된다
-- Gleam 예약어(`type` 등)는 접미사 `_`로 자동 회피된다
-- 생성된 파일은 필요에 따라 자유롭게 수정 가능하다
-
-### 4. Gleam에서 사용
-
-```gleam
-import widgets/switch
-
-// 위젯 컴포넌트 내부에서
-switch.render(props)
-```
-
-## 동작 원리
-
-- `glendix/widget` 모듈의 `widget.component("Name")`으로 `.mpk` 위젯을 React 컴포넌트로 가져온다
-- Props는 `attribute.attribute(key, value)` 범용 함수로 전달한다
-- 위젯 이름은 `.mpk` 내부 XML의 `<name>` 값을, property key는 XML의 원본 key를 그대로 사용한다
-- `binding` 모듈과 달리 1 mpk = 1 컴포넌트이므로 `widget.component("Name")` 한 번에 가져온다
-
-## 주의사항
-
-- `.mpk` 파일을 추가/제거한 후에는 반드시 `gleam run -m glendix/install`을 다시 실행해야 한다
-- `widget_ffi.mjs`는 자동 생성 파일이므로 직접 수정하지 않는다
-- `.mpk` 위젯용 `.mjs` FFI 파일을 직접 작성하지 않는다 — `widgets/` 디렉토리 + `glendix/widget`을 사용한다
+{{I18N:widgets_readme}}