create-mendix-widget-gleam 1.0.4 → 1.0.6

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에서 동작하는 위젯을 만든다.
 
 ## 사용법
 
@@ -22,39 +22,32 @@ npx create-mendix-widget-gleam my-widget
 ```
 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 프로젝트 설정
+    my_widget.gleam            # 메인 위젯 모듈
+    editor_config.gleam        # Studio Pro 속성 패널
+    editor_preview.gleam       # Studio Pro 디자인 뷰 미리보기
+    components/
+      hello_world.gleam      # Hello World 공유 컴포넌트
+  gleam.toml                   # Gleam 프로젝트 설정 (glendix >= 1.1.0 의존성 포함)
   CLAUDE.md                    # AI 어시스턴트용 프로젝트 컨텍스트
 ```
 
+React/Mendix FFI 바인딩은 프로젝트에 포함되지 않으며, [glendix](https://hexdocs.pm/glendix/) Hex 패키지로 제공된다.
+
 ## 생성 후 시작하기
 
 ```bash
 cd my-widget
-gleam run -m scripts/install   # 의존성 설치
-gleam run -m scripts/dev       # 개발 서버 시작
-gleam run -m scripts/build     # 프로덕션 빌드 (.mpk 생성)
+gleam run -m glendix/install   # 의존성 설치
+gleam run -m glendix/dev       # 개발 서버 시작
+gleam run -m glendix/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.6",
   "description": "Scaffold a Mendix Pluggable Widget powered by Gleam",
   "type": "module",
   "license": "Apache-2.0",

package/src/index.mjs

@@ -109,9 +109,9 @@ ${GREEN}${BOLD}프로젝트가 생성되었습니다!${RESET}
 ${BOLD}다음 단계:${RESET}
 
   ${CYAN}cd ${names.kebabCase}${RESET}
-  ${CYAN}gleam run -m scripts/install${RESET}   ${DIM}# 의존성 설치${RESET}
-  ${CYAN}gleam run -m scripts/dev${RESET}       ${DIM}# 개발 서버 시작${RESET}
-  ${CYAN}gleam run -m scripts/build${RESET}     ${DIM}# 프로덕션 빌드${RESET}
+  ${CYAN}gleam run -m glendix/install${RESET}   ${DIM}# 의존성 설치${RESET}
+  ${CYAN}gleam run -m glendix/dev${RESET}       ${DIM}# 개발 서버 시작${RESET}
+  ${CYAN}gleam run -m glendix/build${RESET}     ${DIM}# 프로덕션 빌드${RESET}
 `);
 }
 
@@ -125,57 +125,45 @@ 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\`로 설치)
+- **Package Manager**: ${pm} (npm 의존성은 \`gleam run -m glendix/install\`로 설치)
 - **Build**: \`@mendix/pluggable-widgets-tools\` (Rollup 기반)
 
 ## Architecture
 
 \`\`\`
 src/
-  widget/                             # 핵심 Gleam 코드 (개발자가 작업하는 곳)
-    ${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                         #   셸 명령어 실행 유틸리티
-    cmd_ffi.mjs                       #   Node.js child_process FFI
-    install.gleam                     #   npm 의존성 설치
-    build.gleam                       #   프로덕션 빌드
-    dev.gleam                         #   개발 서버
-    start.gleam                       #   Mendix 테스트 프로젝트 연동
-    release.gleam                     #   릴리즈 빌드
-    lint.gleam                        #   ESLint 실행
-    lint_fix.gleam                    #   ESLint 자동 수정
-  ${names.pascalCase}.js                # 브릿지 진입점
-  ${names.pascalCase}.editorConfig.js   # 브릿지 (editorConfig)
+  ${names.snakeCase}.gleam             # 위젯 메인 모듈
+  editor_config.gleam                 # Studio Pro 속성 패널 설정
+  editor_preview.gleam                # Studio Pro 디자인 뷰 미리보기
+  components/
+    hello_world.gleam               # Hello World 공유 컴포넌트
   ${names.pascalCase}.xml               # 위젯 속성 정의
   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]
-    ↓  gleam run -m scripts/build
-[build/dev/javascript/${names.snakeCase}/widget/*.mjs]
-    ↓  src/${names.pascalCase}.js (브릿지)가 import
+[src/*.gleam] + [glendix 패키지 (Hex)]
+    ↓  gleam run -m glendix/build
+[build/dev/javascript/${names.snakeCase}/*.mjs]
+[build/dev/javascript/glendix/glendix/*.mjs]
+    ↓  브릿지 JS (자동 생성)가 import
     ↓  Rollup (pluggable-widgets-tools build:web)
 [dist/1.0.0/mendix.${names.lowerCase}.${names.pascalCase}.mpk]
 \`\`\`
@@ -183,54 +171,62 @@ docs/
 ## Commands
 
 \`\`\`bash
-gleam run -m scripts/install   # 의존성 설치
-gleam run -m scripts/build     # 위젯 프로덕션 빌드 (.mpk 생성)
-gleam run -m scripts/dev       # 개발 서버 (HMR, port 3000)
-gleam run -m scripts/start     # Mendix 테스트 프로젝트와 연동 개발
-gleam run -m scripts/lint      # ESLint 실행
-gleam run -m scripts/lint_fix  # ESLint 자동 수정
-gleam run -m scripts/release   # 릴리즈 빌드
+gleam run -m glendix/install   # 의존성 설치
+gleam run -m glendix/build     # 위젯 프로덕션 빌드 (.mpk 생성)
+gleam run -m glendix/dev       # 개발 서버 (HMR, port 3000)
+gleam run -m glendix/start     # Mendix 테스트 프로젝트와 연동 개발
+gleam run -m glendix/lint      # ESLint 실행
+gleam run -m glendix/lint_fix  # ESLint 자동 수정
+gleam run -m glendix/release   # 릴리즈 빌드
 gleam build --target javascript  # Gleam → JS 컴파일만
 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 노출만 담당, 비즈니스 로직 금지
 - 한국어 주석 사용
 `;
 
@@ -258,19 +254,19 @@ Gleam 언어로 작성된 Mendix Pluggable Widget.
 ### 설치
 
 \`\`\`bash
-gleam run -m scripts/install
+gleam run -m glendix/install
 \`\`\`
 
 ### 개발
 
 \`\`\`bash
-gleam run -m scripts/dev
+gleam run -m glendix/dev
 \`\`\`
 
 ### 빌드
 
 \`\`\`bash
-gleam run -m scripts/build
+gleam run -m glendix/build
 \`\`\`
 
 빌드 결과물(\`.mpk\`)은 \`dist/\` 디렉토리에 생성됩니다.
@@ -278,10 +274,10 @@ gleam run -m scripts/build
 ### 기타 명령어
 
 \`\`\`bash
-gleam run -m scripts/start      # Mendix 테스트 프로젝트 연동
-gleam run -m scripts/lint       # ESLint 실행
-gleam run -m scripts/lint_fix   # ESLint 자동 수정
-gleam run -m scripts/release    # 릴리즈 빌드
+gleam run -m glendix/start      # Mendix 테스트 프로젝트 연동
+gleam run -m glendix/lint       # ESLint 실행
+gleam run -m glendix/lint_fix   # ESLint 자동 수정
+gleam run -m glendix/release    # 릴리즈 빌드
 gleam build --target javascript # Gleam → JS 컴파일만
 gleam test                      # 테스트 실행
 gleam format                    # 코드 포맷팅
@@ -291,22 +287,20 @@ gleam format                    # 코드 포맷팅
 
 \`\`\`
 src/
-  widget/                          # Gleam 위젯 코드
-    ${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.snakeCase}.gleam           # 메인 위젯 모듈
+  editor_config.gleam              # Studio Pro 속성 패널
+  editor_preview.gleam             # Studio Pro 디자인 뷰 미리보기
+  components/
+    hello_world.gleam            # Hello World 공유 컴포넌트
   ${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}** — 패키지 매니저
 

package/src/scaffold.mjs

@@ -42,8 +42,7 @@ function replaceContent(content, names, pmConfig) {
     .replace(/\{\{LOWERCASE\}\}/g, names.lowerCase)
     .replace(/\{\{DISPLAY_NAME\}\}/g, names.displayName)
     .replace(/\{\{KEBAB_CASE\}\}/g, names.kebabCase)
-    .replace(/\{\{INSTALL_COMMAND\}\}/g, pmConfig.install)
-    .replace(/\{\{RUNNER\}\}/g, pmConfig.runner);
+;
 }
 
 /**

package/template/_gitignore

@@ -46,3 +46,6 @@ coverage/
 **/screenshot/
 **/screenshot-results/
 **/artifacts/
+
+# 자동 생성 브릿지 파일 (glendix가 빌드 시 생성/삭제)
+src/*.js