create-mendix-widget-gleam 1.0.5 → 1.0.6

package/README.md

@@ -22,11 +22,12 @@ npx create-mendix-widget-gleam my-widget
 ```
 my-widget/
   src/
-    widget/                    # Gleam 위젯 코드
-      my_widget.gleam          #   메인 위젯 모듈
-      editor_config.gleam      #   Studio Pro 속성 패널
-    scripts/                   #   빌드/개발 스크립트
-  gleam.toml                   # Gleam 프로젝트 설정 (glendix >= 1.0.0 의존성 포함)
+    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 어시스턴트용 프로젝트 컨텍스트
 ```
 
@@ -36,9 +37,9 @@ React/Mendix FFI 바인딩은 프로젝트에 포함되지 않으며, [glendix](
 
 ```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 생성)
 ```
 
 ## glendix — React + Mendix 바인딩

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mendix-widget-gleam",
-  "version": "1.0.5",
+  "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}
 `);
 }
 
@@ -132,28 +132,18 @@ Gleam 언어로 Mendix Pluggable Widget을 개발하여 "Hello World"를 화면
 - **Gleam** → JavaScript 컴파일 (target: javascript)
 - **[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/                             # 위젯 고유 코드 (개발자가 작업하는 곳)
-    ${names.snakeCase}.gleam           #   위젯 메인 모듈
-    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/
@@ -169,11 +159,11 @@ React/Mendix FFI 바인딩은 이 프로젝트에 포함되지 않으며, [glend
 ## Build Pipeline
 
 \`\`\`
-[src/widget/*.gleam] + [glendix 패키지 (Hex)]
-    ↓  gleam run -m scripts/build
-[build/dev/javascript/${names.snakeCase}/widget/*.mjs]
+[src/*.gleam] + [glendix 패키지 (Hex)]
+    ↓  gleam run -m glendix/build
+[build/dev/javascript/${names.snakeCase}/*.mjs]
 [build/dev/javascript/glendix/glendix/*.mjs]
-    ↓  src/${names.pascalCase}.js (브릿지)가 import
+    ↓  브릿지 JS (자동 생성)가 import
     ↓  Rollup (pluggable-widgets-tools build:web)
 [dist/1.0.0/mendix.${names.lowerCase}.${names.pascalCase}.mpk]
 \`\`\`
@@ -181,13 +171,13 @@ React/Mendix FFI 바인딩은 이 프로젝트에 포함되지 않으며, [glend
 ## 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 코드 포맷팅
@@ -264,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/\` 디렉토리에 생성됩니다.
@@ -284,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                    # 코드 포맷팅
@@ -297,11 +287,11 @@ gleam format                    # 코드 포맷팅
 
 \`\`\`
 src/
-  widget/                          # 위젯 고유 코드
-    ${names.snakeCase}.gleam        #   메인 위젯 모듈
-    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            # 위젯 속성 정의
 \`\`\`
 

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

package/template/src/{widget/__widget_name__.gleam → __widget_name__.gleam}

@@ -1,15 +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}
-import glendix/react/html
-import glendix/react/prop
 
 /// 위젯 메인 함수 - Mendix 런타임이 React 컴포넌트로 호출
 pub fn widget(props: JsProps) -> ReactElement {
   let sample_text = mendix.get_string_prop(props, "sampleText")
-  html.div(prop.new() |> prop.class("widget-hello-world"), [
-    react.text("Hello " <> sample_text),
-  ])
+  hello_world.render(sample_text)
 }

package/template/src/components/hello_world.gleam

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

package/template/src/editor_preview.gleam

@@ -0,0 +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)
+}

package/template/src/__WidgetName__.editorConfig.js

@@ -1,5 +0,0 @@
-// 브릿지: Gleam 컴파일 출력을 Mendix editorConfig 진입점으로 연결
-// Gleam(snake_case) → Mendix(camelCase) 이름 변환만 담당
-import { get_properties } from "../build/dev/javascript/{{SNAKE_CASE}}/widget/editor_config.mjs";
-
-export const getProperties = get_properties;

package/template/src/__WidgetName__.js

@@ -1,6 +0,0 @@
-// 브릿지: Gleam 컴파일 출력을 Mendix 빌드 진입점으로 연결
-// 위젯 로직 없음 - re-export와 CSS import만 담당
-import { widget } from "../build/dev/javascript/{{SNAKE_CASE}}/widget/{{SNAKE_CASE}}.mjs";
-import "./ui/{{PASCAL_CASE}}.css";
-
-export const {{PASCAL_CASE}} = widget;

package/template/src/scripts/build.gleam

@@ -1,8 +0,0 @@
-// 위젯 프로덕션 빌드 (.mpk 생성)
-// gleam run 시 Gleam 컴파일이 먼저 자동 수행됨
-
-import scripts/cmd
-
-pub fn main() {
-  cmd.exec("{{RUNNER}} pluggable-widgets-tools build:web")
-}

package/template/src/scripts/cmd.gleam

@@ -1,4 +0,0 @@
-// 셸 명령어 실행 유틸리티
-
-@external(javascript, "./cmd_ffi.mjs", "exec")
-pub fn exec(command: String) -> Nil

package/template/src/scripts/cmd_ffi.mjs

@@ -1,6 +0,0 @@
-// 셸 명령어 실행 FFI 어댑터
-import { execSync } from "node:child_process";
-
-export function exec(command) {
-  execSync(command, { stdio: "inherit", shell: true });
-}

package/template/src/scripts/dev.gleam

@@ -1,8 +0,0 @@
-// 개발 서버 시작 (HMR, port 3000)
-// gleam run 시 Gleam 컴파일이 먼저 자동 수행됨
-
-import scripts/cmd
-
-pub fn main() {
-  cmd.exec("{{RUNNER}} pluggable-widgets-tools start:web")
-}

package/template/src/scripts/install.gleam

@@ -1,8 +0,0 @@
-// 의존성 설치
-// Gleam 의존성은 gleam run 실행 시 자동으로 다운로드됨
-
-import scripts/cmd
-
-pub fn main() {
-  cmd.exec("{{INSTALL_COMMAND}}")
-}

package/template/src/scripts/lint.gleam

@@ -1,7 +0,0 @@
-// ESLint 실행
-
-import scripts/cmd
-
-pub fn main() {
-  cmd.exec("{{RUNNER}} pluggable-widgets-tools lint")
-}

package/template/src/scripts/lint_fix.gleam

@@ -1,7 +0,0 @@
-// ESLint 자동 수정
-
-import scripts/cmd
-
-pub fn main() {
-  cmd.exec("{{RUNNER}} pluggable-widgets-tools lint:fix")
-}

package/template/src/scripts/release.gleam

@@ -1,8 +0,0 @@
-// 릴리즈 빌드
-// gleam run 시 Gleam 컴파일이 먼저 자동 수행됨
-
-import scripts/cmd
-
-pub fn main() {
-  cmd.exec("{{RUNNER}} pluggable-widgets-tools release:web")
-}

package/template/src/scripts/start.gleam

@@ -1,8 +0,0 @@
-// Mendix 테스트 프로젝트와 연동 개발
-// gleam run 시 Gleam 컴파일이 먼저 자동 수행됨
-
-import scripts/cmd
-
-pub fn main() {
-  cmd.exec("{{RUNNER}} pluggable-widgets-tools start:server")
-}