create-mendix-widget-gleam 1.0.4 → 1.0.5

package/README.md

@@ -2,7 +2,7 @@
 
 Gleam 언어로 Mendix Pluggable Widget 프로젝트를 스케폴딩하는 CLI 도구.
 
-JSX 없이, **오직 Gleam + FFI**로 React 컴포넌트를 작성하여 Mendix Studio Pro에서 동작하는 위젯을 만든다.
+JSX 없이, **Gleam + [glendix](https://hexdocs.pm/glendix/)**로 React 컴포넌트를 작성하여 Mendix Studio Pro에서 동작하는 위젯을 만든다.
 
 ## 사용법
 
@@ -24,16 +24,14 @@ my-widget/
   src/
     widget/                    # Gleam 위젯 코드
       my_widget.gleam          #   메인 위젯 모듈
-      react_ffi.mjs            #   React FFI 어댑터
-      mendix_ffi.mjs           #   Mendix FFI 어댑터
-      react.gleam + react/     #   React 바인딩 (타입, Props, Hooks, HTML)
-      mendix.gleam + mendix/   #   Mendix API 바인딩 (전체 Pluggable Widget API)
       editor_config.gleam      #   Studio Pro 속성 패널
     scripts/                   #   빌드/개발 스크립트
-  gleam.toml                   # Gleam 프로젝트 설정
+  gleam.toml                   # Gleam 프로젝트 설정 (glendix >= 1.0.0 의존성 포함)
   CLAUDE.md                    # AI 어시스턴트용 프로젝트 컨텍스트
 ```
 
+React/Mendix FFI 바인딩은 프로젝트에 포함되지 않으며, [glendix](https://hexdocs.pm/glendix/) Hex 패키지로 제공된다.
+
 ## 생성 후 시작하기
 
 ```bash
@@ -43,18 +41,12 @@ gleam run -m scripts/dev       # 개발 서버 시작
 gleam run -m scripts/build     # 프로덕션 빌드 (.mpk 생성)
 ```
 
-## 포함된 Mendix API 바인딩
+## glendix — React + Mendix 바인딩
 
-생성된 프로젝트에는 Mendix Pluggable Widget API 전체에 대한 Gleam 바인딩이 포함되어 있다:
+생성된 프로젝트는 [glendix](https://hexdocs.pm/glendix/) Hex 패키지를 의존성으로 사용한다. glendix가 React 원시 함수와 Mendix Pluggable Widget API 전체에 대한 타입 안전한 Gleam 바인딩을 제공한다:
 
-- **EditableValue** — 텍스트, 숫자, 날짜 등 편집 가능한 값
-- **ActionValue** — 마이크로플로우/나노플로우 실행
-- **ListValue** — 데이터 목록 (필터, 정렬, 페이지네이션)
-- **SelectionValue** — 단일/다중 선택
-- **ReferenceValue** — 연관 관계 (단일/다중 참조)
-- **JsDate / Big** — JS Date, Big.js 고정밀 십진수 래퍼
-- **Filter** — 필터 조건 빌더
-- **그 외** — DynamicValue, FileValue, WebIcon, ValueFormatter 등
+- **React** — `react`, `react/prop`, `react/hook`, `react/event`, `react/html`
+- **Mendix** — `mendix`, `mendix/editable_value`, `mendix/action`, `mendix/list_value`, `mendix/selection`, `mendix/reference`, `mendix/date`, `mendix/big`, `mendix/filter` 등
 
 ## 라이선스
 

package/package.json

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

package/src/index.mjs

@@ -125,12 +125,12 @@ Gleam 언어로 Mendix Pluggable Widget을 개발하여 "Hello World"를 화면
 
 ## Goal
 
-**JSX를 사용하지 않고, 오직 Gleam으로만** 위젯을 작성한다. Gleam 코드를 JavaScript로 컴파일하고, 컴파일된 JS가 곧 Mendix Pluggable Widget의 진입점이 된다.
+**JSX를 사용하지 않고, 오직 Gleam으로만** 위젯을 작성한다. Gleam 코드를 JavaScript로 컴파일하고, 컴파일된 JS가 곧 Mendix Pluggable Widget의 진입점이 된다. React와 Mendix API 바인딩은 [glendix](https://hexdocs.pm/glendix/) 패키지가 제공한다.
 
 ## Tech Stack
 
 - **Gleam** → JavaScript 컴파일 (target: javascript)
-- **Gleam FFI** (\`@external\` 어노테이션 + FFI 파일) — React API와 Mendix API를 Gleam에서 직접 호출
+- **[glendix](https://hexdocs.pm/glendix/)** — React + Mendix Pluggable Widget API의 Gleam FFI 바인딩 (Hex 패키지)
 - **Mendix Pluggable Widget** (React 19)
 - **Package Manager**: ${pm} (npm 의존성은 \`gleam run -m scripts/install\`로 설치)
 - **Build**: \`@mendix/pluggable-widgets-tools\` (Rollup 기반)
@@ -139,14 +139,8 @@ Gleam 언어로 Mendix Pluggable Widget을 개발하여 "Hello World"를 화면
 
 \`\`\`
 src/
-  widget/                             # 핵심 Gleam 코드 (개발자가 작업하는 곳)
+  widget/                             # 위젯 고유 코드 (개발자가 작업하는 곳)
     ${names.snakeCase}.gleam           #   위젯 메인 모듈
-    react_ffi.mjs                     #   React FFI 어댑터 (React 원시 함수)
-    mendix_ffi.mjs                    #   Mendix FFI 어댑터 (Mendix 런타임 타입 접근)
-    react.gleam                       #   핵심 타입 + createElement + fragment/text/none
-    react/                            #   React 모듈 (prop, hook, event, html)
-    mendix.gleam                      #   Mendix 핵심 타입 + Props 접근자
-    mendix/                           #   Mendix API 모듈 (editable_value, action, list_value 등)
     editor_config.gleam               #   Studio Pro 속성 패널 설정
   scripts/                            # 빌드/개발 스크립트 (gleam run -m으로 실행)
     cmd.gleam                         #   셸 명령어 실행 유틸리티
@@ -164,17 +158,21 @@ src/
   package.xml                         # Mendix 패키지 매니페스트
   ui/
     ${names.pascalCase}.css             # 위젯 스타일시트
-gleam.toml                            # Gleam 프로젝트 설정
+gleam.toml                            # Gleam 프로젝트 설정 (glendix 의존성 포함)
 docs/
   gleam_language_tour.md              # Gleam 언어 레퍼런스
+  glendix_guide.md                    # glendix 사용 가이드
 \`\`\`
 
+React/Mendix FFI 바인딩은 이 프로젝트에 포함되지 않으며, [glendix](https://hexdocs.pm/glendix/) Hex 패키지로 제공된다.
+
 ## Build Pipeline
 
 \`\`\`
-[src/widget/*.gleam] + [src/widget/react_ffi.mjs] + [src/widget/mendix_ffi.mjs]
+[src/widget/*.gleam] + [glendix 패키지 (Hex)]
     ↓  gleam run -m scripts/build
 [build/dev/javascript/${names.snakeCase}/widget/*.mjs]
+[build/dev/javascript/glendix/glendix/*.mjs]
     ↓  src/${names.pascalCase}.js (브릿지)가 import
     ↓  Rollup (pluggable-widgets-tools build:web)
 [dist/1.0.0/mendix.${names.lowerCase}.${names.pascalCase}.mpk]
@@ -195,42 +193,50 @@ gleam test                       # Gleam 테스트 실행
 gleam format                     # Gleam 코드 포맷팅
 \`\`\`
 
-## Gleam FFI Convention
-
-- FFI는 도메인별로 분리: \`react_ffi.mjs\` (React 원시 함수), \`mendix_ffi.mjs\` (Mendix 런타임 타입 접근)
-- \`react.gleam\`/\`mendix.gleam\`에서 \`@external(javascript, "./<ffi>.mjs", "<function>")\` 형식으로 바인딩
-- \`react/*.gleam\`에서 \`@external(javascript, "../react_ffi.mjs", "<function>")\` 형식으로 바인딩
-- \`mendix/*.gleam\`에서 \`@external(javascript, "../mendix_ffi.mjs", "<function>")\` 형식으로 바인딩
-- FFI 파일에는 API 래핑만 작성. 위젯 로직은 반드시 Gleam으로 작성
-- \`mendix_ffi.mjs\`에서 JS \`undefined\`/\`null\` ↔ Gleam \`Option\` 변환 자동 처리
-
-## Mendix API Modules
-
-- \`mendix.gleam\` — \`ValueStatus\`, \`ObjectItem\`, Props 접근자 (\`get_prop\`, \`get_string_prop\`)
-- \`mendix/editable_value.gleam\` — \`EditableValue\` (편집 가능한 값)
-- \`mendix/action.gleam\` — \`ActionValue\` (마이크로플로우/나노플로우 실행)
-- \`mendix/dynamic_value.gleam\` — \`DynamicValue\` (동적 읽기 전용 값)
-- \`mendix/list_value.gleam\` — \`ListValue\`, \`FilterCondition\`, \`SortInstruction\`
-- \`mendix/list_attribute.gleam\` — \`ListAttributeValue\` 등 리스트 연결 타입
-- \`mendix/selection.gleam\` — 단일/다중 선택
-- \`mendix/reference.gleam\` — 참조 관계 값
-- \`mendix/date.gleam\` — \`JsDate\` (JS Date opaque 래퍼)
-- \`mendix/big.gleam\` — \`Big\` (Big.js 고정밀 십진수 래퍼)
-- \`mendix/file.gleam\` — 파일/이미지
-- \`mendix/icon.gleam\` — 아이콘
-- \`mendix/formatter.gleam\` — 값 포맷팅/파싱
-- \`mendix/filter.gleam\` — 필터 조건 빌더
+## glendix Guide
+
+\`docs/glendix_guide.md\` 파일에 glendix 패키지의 사용법이 수록되어 있다. 주요 내용:
+- 프로젝트 설정 및 첫 번째 위젯 만들기
+- 핵심 개념: opaque 타입, undefined ↔ Option 변환, 파이프라인 API
+- React 바인딩: 엘리먼트 생성, Props 빌더, HTML 태그 함수, Hooks, 이벤트 처리, 조건부/리스트 렌더링, 스타일
+- Mendix 바인딩: Props 접근, ValueStatus, EditableValue, ActionValue, DynamicValue, ListValue, ListAttribute, Selection, Reference, Filter, JsDate, Big 등
+- 실전 패턴: 폼 입력 위젯, 데이터 테이블, 검색 가능 리스트, 컴포넌트 합성
+- 트러블슈팅
+
+## glendix Modules
+
+React:
+- \`glendix/react\` — 핵심 타입 + createElement + fragment/text/none + 조건부 렌더링
+- \`glendix/react/prop\` — Props 파이프라인 빌더
+- \`glendix/react/hook\` — React Hooks (useState, useEffect 등)
+- \`glendix/react/event\` — 이벤트 타입 + 값 추출
+- \`glendix/react/html\` — HTML 태그 편의 함수
+
+Mendix:
+- \`glendix/mendix\` — \`ValueStatus\`, \`ObjectItem\`, Props 접근자
+- \`glendix/mendix/editable_value\` — 편집 가능한 값
+- \`glendix/mendix/action\` — 액션 실행
+- \`glendix/mendix/dynamic_value\` — 동적 읽기 전용 값
+- \`glendix/mendix/list_value\` — 리스트 데이터 + 정렬/필터
+- \`glendix/mendix/list_attribute\` — 리스트 아이템별 접근
+- \`glendix/mendix/selection\` — 단일/다중 선택
+- \`glendix/mendix/reference\` — 참조 관계 값
+- \`glendix/mendix/date\` — JS Date 래퍼
+- \`glendix/mendix/big\` — Big.js 고정밀 십진수 래퍼
+- \`glendix/mendix/file\` — 파일/이미지
+- \`glendix/mendix/icon\` — 아이콘
+- \`glendix/mendix/formatter\` — 값 포맷팅/파싱
+- \`glendix/mendix/filter\` — 필터 조건 빌더
 
 ## Mendix Widget Conventions
 
 - 위젯 ID: \`mendix.${names.lowerCase}.${names.pascalCase}\`
-- JSX 파일을 작성하지 않는다. 모든 React 로직은 Gleam + FFI로 구현
-- Redraw 등 외부 Gleam React 라이브러리는 사용하지 않는다
+- JSX 파일을 작성하지 않는다. 모든 React 로직은 Gleam + glendix로 구현
+- 위젯 프로젝트에 FFI 파일을 직접 작성하지 않는다 — React/Mendix FFI는 glendix가 제공
 
 ## Code Style
 
 - Gleam 파일: \`gleam format\` 사용
-- FFI 파일(\`react_ffi.mjs\`, \`mendix_ffi.mjs\`): API 노출만 담당, 비즈니스 로직 금지
 - 한국어 주석 사용
 `;
 
@@ -291,22 +297,20 @@ gleam format                    # 코드 포맷팅
 
 \`\`\`
 src/
-  widget/                          # Gleam 위젯 코드
+  widget/                          # 위젯 고유 코드
     ${names.snakeCase}.gleam        #   메인 위젯 모듈
-    react_ffi.mjs                  #   React FFI 어댑터
-    mendix_ffi.mjs                 #   Mendix FFI 어댑터
-    react.gleam + react/           #   React 모듈 계층
-    mendix.gleam + mendix/         #   Mendix API 모듈 계층
     editor_config.gleam            #   Studio Pro 속성 패널
   scripts/                         # 빌드/개발 스크립트
   ${names.pascalCase}.js             # Mendix 브릿지 진입점
   ${names.pascalCase}.xml            # 위젯 속성 정의
 \`\`\`
 
+React/Mendix FFI 바인딩은 [glendix](https://hexdocs.pm/glendix/) Hex 패키지로 제공됩니다.
+
 ## 기술 스택
 
 - **Gleam** → JavaScript 컴파일
-- **Gleam FFI** — React/Mendix API 직접 바인딩
+- **[glendix](https://hexdocs.pm/glendix/)** — React + Mendix API Gleam 바인딩
 - **Mendix Pluggable Widget** (React 19)
 - **${pm}** — 패키지 매니저