create-mendix-widget-gleam 2.0.1 → 2.0.3

package/README.md

@@ -30,7 +30,7 @@ my-widget/
   widgets/                       # .mpk 위젯 파일 (glendix/widget로 바인딩)
   bindings.json                  # 외부 React 컴포넌트 바인딩 설정
   package.json                   # npm 의존성 (React, 외부 라이브러리 등)
-  gleam.toml                   # Gleam 프로젝트 설정 (glendix >= 2.0.1 의존성 포함)
+  gleam.toml                   # Gleam 프로젝트 설정 (glendix >= 2.0.3 의존성 포함)
   CLAUDE.md                    # AI 어시스턴트용 프로젝트 컨텍스트
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mendix-widget-gleam",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Scaffold a Mendix Pluggable Widget powered by Gleam",
   "type": "module",
   "license": "Apache-2.0",

package/src/index.mjs

@@ -463,28 +463,46 @@ gleam run -m glendix/install
 
 실행 시 다음이 자동 처리된다:
 - \`.mpk\`에서 \`.mjs\`/\`.css\`를 추출하고 \`widget_ffi.mjs\`가 생성된다
-- \`.mpk\` XML의 \`<property>\` 정의가 부모 위젯 XML에 자동 주입된다
+- \`.mpk\` XML의 \`<property>\` 정의를 파싱하여 \`src/widgets/\`에 바인딩 \`.gleam\` 파일이 자동 생성된다 (이미 존재하면 건너뜀)
 
-### 3단계: Gleam에서 사용
+### 3단계: 자동 생성된 \`src/widgets/*.gleam\` 파일 확인
 
 \`\`\`gleam
+// src/widgets/switch.gleam (자동 생성)
 import glendix/mendix
-import glendix/widget
-import glendix/react
+import glendix/react.{type JsProps, type ReactElement}
 import glendix/react/attribute
+import glendix/widget
 
-// props에서 자동 주입된 속성을 읽어 위젯에 전달
-let boolean_attr = mendix.get_prop_required(props, "booleanAttribute")
-let action = mendix.get_prop_required(props, "action")
+/// 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 속성이 자동 구분되며, 필요에 따라 생성된 파일을 자유롭게 수정할 수 있다.
+
+### 4단계: 위젯에서 사용
+
+\`\`\`gleam
+import widgets/switch
 
-let switch_comp = widget.component("Switch")
-react.component_el(switch_comp, [
-  attribute.attribute("booleanAttribute", boolean_attr),
-  attribute.attribute("action", action),
-], [])
+// 컴포넌트 내부에서
+switch.render(props)
 \`\`\`
 
-위젯 이름은 \`.mpk\` 내부 XML의 \`<name>\` 값(PascalCase)을, property key는 \`.mpk\` XML의 원본 key를 그대로 사용한다.
+위젯 이름은 \`.mpk\` 내부 XML의 \`<name>\` 값을, property key는 \`.mpk\` XML의 원본 key를 그대로 사용한다.
 
 ## 기술 스택
 

package/template/docs/glendix_guide.md

@@ -344,47 +344,48 @@ my_widget/
 
 install 시 두 가지가 자동 수행됩니다:
 - `.mpk` 내부의 `.mjs`와 `.css`가 추출되고, `widget_ffi.mjs`가 생성됩니다
-- `.mpk` XML의 `<property>` 정의가 부모 위젯 XML(`src/{WidgetName}.xml`)에 `<propertyGroup caption="{위젯명}">` 으로 자동 주입됩니다 (동일 caption이 이미 있으면 건너뜀)
+- `.mpk` XML의 `<property>` 정의를 파싱하여 `src/widgets/`에 바인딩 `.gleam` 파일이 자동 생성됩니다 (이미 존재하면 건너뜀)
 
-예를 들어 `Switch.mpk`를 설치하면, 부모 위젯 XML에 다음이 자동 추가됩니다:
-
-```xml
-<propertyGroup caption="Switch">
-    <property key="booleanAttribute" type="attribute">
-        <caption>Boolean attribute</caption>
-        <description>Attribute to toggle</description>
-        <attributeTypes>
-            <attributeType name="Boolean" />
-        </attributeTypes>
-    </property>
-    <property key="action" type="action" required="false">
-        <caption>On change</caption>
-        <description>Action to be performed when the switch is toggled</description>
-    </property>
-</propertyGroup>
-```
-
-**3단계: Gleam 코드에서 사용**
+예를 들어 `Switch.mpk`를 설치하면, `src/widgets/switch.gleam`이 자동 생성됩니다:
 
 ```gleam
+// src/widgets/switch.gleam (자동 생성)
 import glendix/mendix
-import glendix/widget
-import glendix/react
+import glendix/react.{type JsProps, type ReactElement}
 import glendix/react/attribute
+import glendix/widget
 
-// props에서 자동 주입된 속성을 읽어 위젯에 전달
-let boolean_attr = mendix.get_prop_required(props, "booleanAttribute")
-let action = mendix.get_prop_required(props, "action")
+/// 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")
 
-// widgets/Switch.mpk의 Switch 컴포넌트 사용
-let switch_comp = widget.component("Switch")
-react.component_el(switch_comp, [
-  attribute.attribute("booleanAttribute", boolean_attr),
-  attribute.attribute("action", action),
-], [])
+  let comp = widget.component("Switch")
+  react.component_el(
+    comp,
+    [
+      attribute.attribute("booleanAttribute", boolean_attribute),
+      attribute.attribute("action", action),
+    ],
+    [],
+  )
+}
+```
+
+optional 속성이 있으면 `optional_attr` 헬퍼와 `gleam/option` import가 자동 추가됩니다. Gleam 예약어(`type` 등)는 접미사 `_`로 회피합니다.
+
+**3단계: 위젯에서 사용**
+
+생성된 `src/widgets/*.gleam` 파일을 import하여 사용합니다. 필요에 따라 자유롭게 수정할 수 있습니다.
+
+```gleam
+import widgets/switch
+
+// 컴포넌트 내부에서
+switch.render(props)
 ```
 
-위젯의 Props는 기존 `attribute.attribute(key, value)` 범용 함수로 전달합니다. 위젯 이름은 `.mpk` 내부 XML의 `<name>` 태그 값(PascalCase)을, property key는 `.mpk` XML의 원본 key를 그대로 사용합니다.
+위젯의 Props는 기존 `attribute.attribute(key, value)` 범용 함수로 전달합니다. 위젯 이름은 `.mpk` 내부 XML의 `<name>` 태그 값을, property key는 `.mpk` XML의 원본 key를 그대로 사용합니다.
 
 > `binding` 모듈과 달리 `widget` 모듈은 1 mpk = 1 컴포넌트이므로 `module` + `resolve` 2단계 없이 `component("Name")` 한 번에 가져옵니다.
 

package/template/gleam.toml

@@ -8,4 +8,4 @@ runtime = "node"
 
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
-glendix = ">= 2.0.1 and < 3.0.0"
+glendix = ">= 2.0.3 and < 3.0.0"

package/template/widgets/README.md

@@ -0,0 +1,82 @@
+# 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`을 사용한다