create-mendix-widget-gleam 3.0.0 → 3.0.2

package/package.json

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

package/template/docs/glendix_guide.md

@@ -43,15 +43,22 @@ glendix는 Gleam으로 Mendix Pluggable Widget을 작성하는 FFI 라이브러
 
 ```toml
 [dependencies]
-glendix = ">= 3.0.0 and < 4.0.0"
+glendix = ">= 3.0.2 and < 4.0.0"
 ```
 
 Peer dependency (위젯 프로젝트 `package.json`):
 
 ```json
-{ "dependencies": { "react": "^19.0.0", "react-dom": "^19.0.0", "big.js": "^6.0.0" } }
+{
+  "dependencies": { "big.js": "^6.0.0" },
+  "overrides": { "react": "19.0.0", "react-dom": "19.0.0", "@types/react": "19.0.0", "@types/react-dom": "19.0.0" },
+  "resolutions": { "react": "19.0.0", "react-dom": "19.0.0", "@types/react": "19.0.0", "@types/react-dom": "19.0.0" }
+}
 ```
 
+> - `react`/`react-dom`은 `dependencies`에 넣지 않는다. `pluggable-widgets-tools`가 자동 제공하며, 직접 선언하면 번들 충돌이 발생한다.
+> - `overrides`/`resolutions`에서 반드시 **캐럿(`^`) 없이 정확한 버전**을 지정한다. `^19.0.0`은 react와 react-dom이 서로 다른 19.x.x로 해석되어 런타임 버전 불일치 에러를 일으킨다.
+
 ```bash
 gleam run -m glendix/install   # 의존성 설치 + 바인딩 생성
 gleam build                    # 컴파일 확인
@@ -75,7 +82,7 @@ pub fn widget(props: JsProps) -> Element
 
 ---
 
-## 3. 렌더링 경로 선택
+## 4. 렌더링 경로 선택
 
 glendix는 두 가지 렌더링 경로를 지원합니다. 둘 다 `redraw.Element`를 반환하므로 자유롭게 합성 가능합니다.
 
@@ -91,9 +98,9 @@ glendix는 두 가지 렌더링 경로를 지원합니다. 둘 다 `redraw.Eleme
 
 ---
 
-## 4. redraw 렌더링 경로 — 레퍼런스
+## 5. redraw 렌더링 경로 — 레퍼런스
 
-### 4.1 필수 import 패턴
+### 5.1 필수 import 패턴
 
 ```gleam
 import glendix/mendix.{type JsProps}   // Mendix props 타입
@@ -103,7 +110,7 @@ import redraw/dom/attribute            // HTML 속성
 import redraw/dom/events               // 이벤트 핸들러
 ```
 
-### 4.2 HTML 엘리먼트 생성
+### 5.2 HTML 엘리먼트 생성
 
 ```gleam
 // 속성 + 자식
@@ -118,7 +125,7 @@ html.img([attribute.src("image.png"), attribute.alt("설명")])
 html.br([])
 ```
 
-### 4.3 텍스트, 빈 렌더링, Fragment
+### 5.3 텍스트, 빈 렌더링, Fragment
 
 ```gleam
 html.text("안녕하세요")              // 텍스트 노드
@@ -129,7 +136,7 @@ html.none()                          // 아무것도 렌더링하지 않음 (Rea
 redraw.fragment([child1, child2])    // Fragment
 ```
 
-### 4.4 조건부 렌더링
+### 5.4 조건부 렌더링
 
 v3.0에서는 Gleam `case` 표현식을 직접 사용합니다:
 
@@ -154,7 +161,7 @@ case mendix.get_status(value) {
 }
 ```
 
-### 4.5 리스트 렌더링
+### 5.5 리스트 렌더링
 
 ```gleam
 import gleam/list
@@ -168,7 +175,7 @@ html.ul([], list.map(items, fn(item) {
 
 > 리스트 렌더링 시 `attribute.key()`를 항상 설정해야 합니다. React reconciliation에 필요합니다.
 
-### 4.6 속성
+### 5.6 속성
 
 ```gleam
 import redraw/dom/attribute
@@ -193,7 +200,7 @@ attribute.attribute("data-custom", "value")
 attribute.ref(my_ref)
 ```
 
-### 4.7 이벤트 핸들러
+### 5.7 이벤트 핸들러
 
 ```gleam
 import redraw/dom/events
@@ -210,7 +217,7 @@ events.on_blur(fn(e) { Nil })
 events.on_click_capture(fn(e) { Nil })
 ```
 
-### 4.8 Hooks
+### 5.8 Hooks
 
 모든 훅은 `redraw` 메인 모듈에 있습니다:
 
@@ -227,8 +234,11 @@ redraw.use_effect(fn() { Nil }, deps)               // 의존성 지정
 redraw.use_effect_(fn() { fn() { cleanup() } }, deps)  // 클린업 포함
 
 // Ref
-let my_ref = redraw.use_ref()          // Option(a)
-let my_ref = redraw.use_ref_(initial)  // 초기값 지정
+import redraw/ref
+let my_ref = redraw.use_ref()          // Ref(Option(a))
+let my_ref = redraw.use_ref_(initial)  // Ref(a) — 초기값 지정
+ref.current(my_ref)                    // 현재 값 읽기
+ref.assign(my_ref, new_value)          // 값 쓰기
 
 // 메모이제이션
 let result = redraw.use_memo(fn() { expensive(data) }, data)
@@ -246,7 +256,7 @@ let #(is_pending, start) = redraw.use_transition()
 let deferred = redraw.use_deferred_value(value)
 ```
 
-### 4.9 컴포넌트 정의
+### 5.9 컴포넌트 정의
 
 ```gleam
 import redraw
@@ -260,7 +270,7 @@ let my_comp = redraw.component_("MyComponent", fn(props) {
 let memoized = redraw.memoize_(my_comp)
 ```
 
-### 4.10 Context API
+### 5.10 Context API
 
 ```gleam
 import redraw
@@ -274,7 +284,7 @@ redraw.provider(theme_ctx, "dark", [child_elements])
 let theme = redraw.use_context(theme_ctx)
 ```
 
-### 4.11 SVG
+### 5.11 SVG
 
 ```gleam
 import redraw/dom/svg
@@ -292,9 +302,9 @@ svg.svg([attribute.attribute("viewBox", "0 0 100 100")], [
 
 ---
 
-## 5. lustre 렌더링 경로 — 레퍼런스
+## 6. lustre 렌더링 경로 — 레퍼런스
 
-### 5.1 TEA 패턴 (use_tea)
+### 6.1 TEA 패턴 (use_tea)
 
 `update`와 `view`는 표준 lustre 코드와 100% 동일합니다. 진입점만 `glendix/lustre.use_tea()`를 사용합니다.
 
@@ -341,7 +351,7 @@ pub fn widget(_props: JsProps) -> Element {
 }
 ```
 
-### 5.2 Simple TEA (use_simple) — Effect 없음
+### 6.2 Simple TEA (use_simple) — Effect 없음
 
 ```gleam
 import glendix/lustre as gl
@@ -358,7 +368,7 @@ fn update_simple(model: Model, msg: Msg) -> Model {
 }
 ```
 
-### 5.3 Lustre Element를 수동으로 변환 (render)
+### 6.3 Lustre Element를 수동으로 변환 (render)
 
 lustre 뷰를 React 트리 안에 삽입할 때 사용합니다:
 
@@ -368,7 +378,7 @@ import glendix/lustre as gl
 let react_element = gl.render(lustre_element, dispatch_fn)
 ```
 
-### 5.4 redraw Element를 lustre 트리에 삽입 (embed)
+### 6.4 redraw Element를 lustre 트리에 삽입 (embed)
 
 lustre view 안에서 redraw 컴포넌트를 사용할 때 호출합니다:
 
@@ -395,9 +405,9 @@ fn view(model: Model) {
 
 ---
 
-## 6. 외부 컴포넌트 통합
+## 7. 외부 컴포넌트 통합
 
-### 6.1 모듈 선택 가이드
+### 7.1 모듈 선택 가이드
 
 | 컴포넌트 출처 | 사용 모듈 | 예시 |
 |--------------|----------|------|
@@ -405,7 +415,7 @@ fn view(model: Model) {
 | `.mpk` Pluggable 위젯 | `glendix/widget` + `glendix/interop` | Switch.mpk, Badge.mpk |
 | `.mpk` Classic (Dojo) 위젯 | `glendix/classic` | CameraWidget.mpk |
 
-### 6.2 외부 React 컴포넌트 (binding + interop)
+### 7.2 외부 React 컴포넌트 (binding + interop)
 
 **설정:** `bindings.json` 작성 → `npm install 패키지명` → `gleam run -m glendix/install`
 
@@ -444,7 +454,7 @@ pub fn tooltip(attrs: List(Attribute)) -> Element {
 | `interop.component_el_(comp, children)` | 자식만 |
 | `interop.void_component_el(comp, attrs)` | self-closing (자식 없음) |
 
-### 6.3 .mpk Pluggable 위젯 (widget + interop)
+### 7.3 .mpk Pluggable 위젯 (widget + interop)
 
 **설정:** `.mpk`를 `widgets/`에 배치 → `gleam run -m glendix/install`
 
@@ -489,7 +499,7 @@ interop.component_el(comp, [
 
 > Mendix에서 받은 prop (JsProps에서 꺼낸 값)은 이미 올바른 형식이므로 `attribute.attribute(key, value)`로 그대로 전달합니다.
 
-### 6.4 Classic (Dojo) 위젯
+### 7.4 Classic (Dojo) 위젯
 
 ```gleam
 import gleam/dynamic
@@ -505,9 +515,9 @@ classic.render("CameraWidget.widget.CameraWidget", [
 
 ---
 
-## 7. Mendix API 레퍼런스
+## 8. Mendix API 레퍼런스
 
-### 7.1 Props 접근 (`glendix/mendix`)
+### 8.1 Props 접근 (`glendix/mendix`)
 
 `JsProps`는 opaque 타입입니다. 접근자 함수로만 읽습니다.
 
@@ -527,7 +537,7 @@ mendix.get_string_prop(props, "caption")   // String
 mendix.has_prop(props, "onClick")          // Bool
 ```
 
-### 7.2 ValueStatus 확인
+### 8.2 ValueStatus 확인
 
 Mendix의 모든 동적 값은 상태를 가집니다:
 
@@ -541,7 +551,7 @@ case mendix.get_status(some_value) {
 }
 ```
 
-### 7.3 EditableValue (`glendix/mendix/editable_value`)
+### 8.3 EditableValue (`glendix/mendix/editable_value`)
 
 텍스트, 숫자, 날짜 등 편집 가능한 Mendix 속성:
 
@@ -571,7 +581,7 @@ ev.set_validator(attr, Some(fn(value) {
 ev.universe(attr)        // Option(List(a))
 ```
 
-### 7.4 ActionValue (`glendix/mendix/action`)
+### 8.4 ActionValue (`glendix/mendix/action`)
 
 Mendix 마이크로플로우/나노플로우 실행:
 
@@ -586,7 +596,7 @@ action.can_execute(my_action)          // Bool
 action.is_executing(my_action)         // Bool
 ```
 
-### 7.5 DynamicValue (`glendix/mendix/dynamic_value`)
+### 8.5 DynamicValue (`glendix/mendix/dynamic_value`)
 
 읽기 전용 표현식 속성:
 
@@ -598,7 +608,7 @@ dv.status(expr)        // String
 dv.is_available(expr)  // Bool
 ```
 
-### 7.6 ListValue (`glendix/mendix/list_value`)
+### 8.6 ListValue (`glendix/mendix/list_value`)
 
 Mendix 데이터 소스 리스트:
 
@@ -631,7 +641,7 @@ lv.set_filter(list_val, None)         // 필터 해제
 lv.reload(list_val)
 ```
 
-### 7.7 ListAttribute (`glendix/mendix/list_attribute`)
+### 8.7 ListAttribute (`glendix/mendix/list_attribute`)
 
 리스트의 각 아이템에서 속성/액션/위젯 추출:
 
@@ -651,7 +661,7 @@ la.attr_type(attr)              // "String", "Integer" 등
 la.attr_formatter(attr)         // ValueFormatter
 ```
 
-### 7.8 Selection (`glendix/mendix/selection`)
+### 8.8 Selection (`glendix/mendix/selection`)
 
 ```gleam
 import glendix/mendix/selection
@@ -666,7 +676,7 @@ selection.selections(multi_sel)              // List(ObjectItem)
 selection.set_selections(multi_sel, [item1, item2])
 ```
 
-### 7.9 Reference / ReferenceSet
+### 8.9 Reference / ReferenceSet
 
 ```gleam
 import glendix/mendix/reference as ref
@@ -683,7 +693,7 @@ ref_set.value(my_ref_set)          // Option(List(a))
 ref_set.set_value(my_ref_set, Some([item1, item2]))
 ```
 
-### 7.10 Filter (`glendix/mendix/filter`)
+### 8.10 Filter (`glendix/mendix/filter`)
 
 ```gleam
 import glendix/mendix/filter
@@ -709,7 +719,7 @@ filter.literal(value)           // 상수 값
 filter.empty()                  // null 비교용
 ```
 
-### 7.11 날짜 (`glendix/mendix/date`)
+### 8.11 날짜 (`glendix/mendix/date`)
 
 > Gleam month는 1-based (1~12), JS는 0-based. glendix가 자동 변환합니다.
 
@@ -731,7 +741,7 @@ date.to_input_value(d)    // "2024-03-15" (input[type="date"]용)
 date.from_input_value(s)  // Option(JsDate)
 ```
 
-### 7.12 Big (`glendix/mendix/big`)
+### 8.12 Big (`glendix/mendix/big`)
 
 Big.js 래퍼. Mendix Decimal 타입 처리용:
 
@@ -752,7 +762,7 @@ big.to_string(a)    big.to_float(a)
 big.to_int(a)       big.to_fixed(a, 2)
 ```
 
-### 7.13 File, Icon, Formatter
+### 8.13 File, Icon, Formatter
 
 ```gleam
 // FileValue / WebImage
@@ -776,7 +786,7 @@ formatter.parse(fmt, "123.45")      // Result(Option(a), Nil)
 
 ---
 
-## 8. Editor Configuration (`glendix/editor_config`)
+## 9. Editor Configuration (`glendix/editor_config`)
 
 Studio Pro의 editorConfig 로직을 Gleam으로 작성합니다.
 
@@ -823,7 +833,7 @@ pub fn get_properties(
 
 ---
 
-## 9. JS Interop Escape Hatch (`glendix/js/*`)
+## 10. JS Interop Escape Hatch (`glendix/js/*`)
 
 외부 JS 라이브러리(SpreadJS, Chart.js 등)와 직접 상호작용할 때 사용합니다. 모든 값은 `Dynamic` 타입. 가능하면 `glendix/binding`을 먼저 고려하세요.
 
@@ -835,14 +845,14 @@ array.to_list(js_arr)        // JS Array → Gleam List
 
 // 객체
 import glendix/js/object
-object.object([#("width", dynamic.from(800))])
+object.object([#("width", dynamic.int(800))])
 object.get(obj, "key")
-object.set(obj, "key", dynamic.from(val))
+object.set(obj, "key", dynamic.string(val))
 object.call_method(obj, "method", [arg1, arg2])
 
 // JSON
 import glendix/js/json
-json.stringify(dynamic.from(data))    // String
+json.stringify(data)                  // String
 json.parse("{\"k\":\"v\"}")           // Result(Dynamic, String)
 
 // Promise
@@ -870,7 +880,7 @@ timer.clear_interval(id)
 
 ---
 
-## 10. 빌드 & 도구
+## 11. 빌드 & 도구
 
 | 명령어 | 설명 |
 |--------|------|
@@ -889,9 +899,9 @@ timer.clear_interval(id)
 
 ---
 
-## 11. 실전 패턴
+## 12. 실전 패턴
 
-### 11.1 폼 입력 위젯
+### 12.1 폼 입력 위젯
 
 ```gleam
 import gleam/option.{None, Some}
@@ -942,7 +952,7 @@ pub fn text_input_widget(props: JsProps) -> Element {
 }
 ```
 
-### 11.2 데이터 테이블 위젯
+### 12.2 데이터 테이블 위젯
 
 ```gleam
 import gleam/list
@@ -976,7 +986,7 @@ pub fn data_table(props: JsProps) -> Element {
 }
 ```
 
-### 11.3 검색 가능한 리스트
+### 12.3 검색 가능한 리스트
 
 ```gleam
 import gleam/option.{None, Some}
@@ -1018,11 +1028,12 @@ pub fn searchable_list(props: JsProps) -> Element {
 
 ---
 
-## 12. 절대 하지 말 것
+## 13. 절대 하지 말 것
 
 | 실수 | 올바른 방법 |
 |------|------------|
 | `import glendix/react` | **삭제됨.** `import redraw` 사용 |
+| `react`/`react-dom`을 `dependencies`에 추가 | `pluggable-widgets-tools`가 제공. 직접 넣으면 버전 충돌 |
 | 조건 안에서 Hook 호출 | Hook은 항상 함수 최상위에서 호출 |
 | `html.text("")`로 빈 렌더링 | `html.none()` 사용 |
 | `binding.resolve(m(), "pie_chart")` | JS 원본 이름 유지: `"PieChart"` |
@@ -1034,7 +1045,7 @@ pub fn searchable_list(props: JsProps) -> Element {
 
 ---
 
-## 13. 트러블슈팅
+## 14. 트러블슈팅
 
 | 문제 | 원인 | 해결 |
 |------|------|------|

package/template/gleam.toml

@@ -8,7 +8,7 @@ runtime = "node"
 
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
-glendix = ">= 3.0.0 and < 4.0.0"
+glendix = ">= 3.0.2 and < 4.0.0"
 redraw = ">= 19.2.2 and < 20.0.0"
 redraw_dom = ">= 19.2.2 and < 20.0.0"
 lustre = ">= 5.6.0 and < 6.0.0"

package/template/package.json

@@ -24,16 +24,18 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
     "big.js": "^6.0.0"
   },
   "resolutions": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0"
   },
   "overrides": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0"
   }
 }