create-mendix-widget-gleam 1.0.0

package/template/gleam.toml

@@ -0,0 +1,10 @@
+name = "{{SNAKE_CASE}}"
+version = "1.0.0"
+target = "javascript"
+
+[javascript]
+typescript_declarations = false
+runtime = "node"
+
+[dependencies]
+gleam_stdlib = ">= 0.44.0 and < 2.0.0"

package/template/manifest.toml

@@ -0,0 +1,9 @@
+# This file was generated by Gleam
+# You typically do not need to edit this file
+
+packages = [
+  { name = "gleam_stdlib", version = "0.70.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "86949BF5D1F0E4AC0AB5B06F235D8A5CC11A2DFC33BF22F752156ED61CA7D0FF" },
+]
+
+[requirements]
+gleam_stdlib = { version = ">= 0.44.0 and < 2.0.0" }

package/template/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "{{LOWERCASE}}",
+  "widgetName": "{{PASCAL_CASE}}",
+  "version": "1.0.0",
+  "description": "My widget description",
+  "copyright": "© Mendix Technology BV 2026. All rights reserved.",
+  "author": "",
+  "engines": {
+    "node": ">=16"
+  },
+  "license": "Apache-2.0",
+  "config": {
+    "projectPath": "./tests/testProject",
+    "mendixHost": "http://localhost:8080",
+    "developmentPort": 3000
+  },
+  "packagePath": "mendix",
+  "scripts": {
+    "prerelease": "echo skipping lint"
+  },
+  "devDependencies": {
+    "@mendix/pluggable-widgets-tools": "^11.8.0"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1"
+  },
+  "resolutions": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "overrides": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/template/prettier.config.js

@@ -0,0 +1,6 @@
+const base = require("@mendix/pluggable-widgets-tools/configs/prettier.base.json");
+
+module.exports = {
+    ...base,
+    plugins: [require.resolve("@prettier/plugin-xml")],
+};

package/template/src/__WidgetName__.editorConfig.js

@@ -0,0 +1,5 @@
+// 브릿지: 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

@@ -0,0 +1,6 @@
+// 브릿지: 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/__WidgetName__.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<widget id="mendix.{{LOWERCASE}}.{{PASCAL_CASE}}" pluginWidget="true" needsEntityContext="true" offlineCapable="true"
+        supportedPlatform="Web"
+        xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
+    <name>{{DISPLAY_NAME}}</name>
+    <description>My widget description</description>
+    <icon/>
+    <properties>
+        <propertyGroup caption="General">
+            <property key="sampleText" type="string" required="false">
+                <caption>Default value</caption>
+                <description>Sample text input</description>
+            </property>
+        </propertyGroup>
+    </properties>
+</widget>

package/template/src/package.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<package xmlns="http://www.mendix.com/package/1.0/">
+    <clientModule name="{{PASCAL_CASE}}" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+        <widgetFiles>
+            <widgetFile path="{{PASCAL_CASE}}.xml"/>
+        </widgetFiles>
+        <files>
+            <file path="mendix/{{LOWERCASE}}"/>
+        </files>
+    </clientModule>
+</package>

package/template/src/scripts/build.gleam

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

package/template/src/scripts/cmd.gleam

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

package/template/src/scripts/cmd_ffi.mjs

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

package/template/src/scripts/dev.gleam

@@ -0,0 +1,8 @@
+// 개발 서버 시작 (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

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

package/template/src/scripts/lint.gleam

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

package/template/src/scripts/lint_fix.gleam

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

package/template/src/scripts/release.gleam

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

package/template/src/scripts/start.gleam

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

package/template/src/ui/__WidgetName__.css

@@ -0,0 +1,6 @@
+/*
+Place your custom CSS here
+*/
+.widget-hello-world {
+
+}

package/template/src/widget/__widget_name__.gleam

@@ -0,0 +1,20 @@
+// Mendix Pluggable Widget - "Hello World"
+// React 함수형 컴포넌트: fn(JsProps) -> ReactElement
+
+// 외부 타입 (JS 값의 opaque 핸들)
+pub type ReactElement
+
+pub type JsProps
+
+// FFI 바인딩
+@external(javascript, "./{{SNAKE_CASE}}_ffi.mjs", "create_div")
+fn create_div(class_name: String, text_content: String) -> ReactElement
+
+@external(javascript, "./{{SNAKE_CASE}}_ffi.mjs", "get_string_prop")
+fn get_string_prop(props: JsProps, key: String) -> String
+
+/// 위젯 메인 함수 - Mendix 런타임이 React 컴포넌트로 호출
+pub fn widget(props: JsProps) -> ReactElement {
+  let sample_text = get_string_prop(props, "sampleText")
+  create_div("widget-hello-world", "Hello " <> sample_text)
+}

package/template/src/widget/__widget_name___ffi.mjs

@@ -0,0 +1,13 @@
+// React FFI 어댑터 - React 원시 함수만 노출
+import * as React from "react";
+
+// div 요소에 텍스트 자식을 렌더링
+export function create_div(class_name, text_content) {
+  return React.createElement("div", { className: class_name }, text_content);
+}
+
+// props 객체에서 문자열 속성값 추출
+export function get_string_prop(props, key) {
+  const value = props[key];
+  return value !== undefined && value !== null ? String(value) : "";
+}

package/template/src/widget/editor_config.gleam

@@ -0,0 +1,18 @@
+// Mendix Studio Pro 속성 패널 설정
+// getProperties, check, getPreview 등을 정의
+
+// 외부 타입 (Mendix가 전달하는 JS 객체)
+pub type Values
+
+pub type Properties
+
+pub type Target
+
+/// 속성 패널 설정 - Studio Pro에서 위젯 속성의 가시성을 제어
+pub fn get_properties(
+  _values: Values,
+  default_properties: Properties,
+  _target: Target,
+) -> Properties {
+  default_properties
+}