create-mendix-widget-gleam 1.0.0 → 1.0.1

package/package.json

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

package/template/src/widget/__widget_name__.gleam

@@ -1,20 +1,18 @@
 // Mendix Pluggable Widget - "Hello World"
 // React 함수형 컴포넌트: fn(JsProps) -> ReactElement
 
-// 외부 타입 (JS 값의 opaque 핸들)
-pub type ReactElement
+import widget/react.{type JsProps, type ReactElement}
+import widget/react/html
+import widget/react/prop
 
-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")
+// Props에서 문자열 속성값 추출
+@external(javascript, "./react_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)
+  html.div(prop.new() |> prop.class("widget-hello-world"), [
+    react.text("Hello " <> sample_text),
+  ])
 }

package/template/src/widget/react/event.gleam

@@ -0,0 +1,33 @@
+// React 이벤트 타입 + 값 추출 함수
+
+// === 이벤트 타입 (opaque) ===
+
+pub type Event
+
+pub type MouseEvent
+
+pub type ChangeEvent
+
+pub type KeyboardEvent
+
+pub type FormEvent
+
+pub type FocusEvent
+
+// === 값 추출 ===
+
+/// input/textarea의 현재 값 추출
+@external(javascript, "../react_ffi.mjs", "get_target_value")
+pub fn target_value(event: event) -> String
+
+/// 기본 동작 방지
+@external(javascript, "../react_ffi.mjs", "prevent_default")
+pub fn prevent_default(event: event) -> Nil
+
+/// 이벤트 전파 중지
+@external(javascript, "../react_ffi.mjs", "stop_propagation")
+pub fn stop_propagation(event: event) -> Nil
+
+/// 키보드 이벤트의 키 값
+@external(javascript, "../react_ffi.mjs", "get_event_key")
+pub fn key(event: event) -> String

package/template/src/widget/react/hook.gleam

@@ -0,0 +1,47 @@
+// React Hooks - useState, useEffect 등
+
+import widget/react.{type Ref}
+
+// === useState ===
+
+/// 상태 훅. #(현재값, 세터함수) 튜플 반환
+@external(javascript, "../react_ffi.mjs", "use_state")
+pub fn use_state(initial: a) -> #(a, fn(a) -> Nil)
+
+// === useEffect ===
+
+/// 의존성 배열과 함께 실행
+@external(javascript, "../react_ffi.mjs", "use_effect")
+pub fn use_effect(effect_fn: fn() -> Nil, deps: List(a)) -> Nil
+
+/// 매 렌더링마다 실행 (deps 없음)
+@external(javascript, "../react_ffi.mjs", "use_effect_always")
+pub fn use_effect_always(effect_fn: fn() -> Nil) -> Nil
+
+/// 마운트 시 한 번만 실행 (deps = [])
+@external(javascript, "../react_ffi.mjs", "use_effect_once")
+pub fn use_effect_once(effect_fn: fn() -> Nil) -> Nil
+
+// === useMemo / useCallback ===
+
+/// 메모이제이션된 값 계산
+@external(javascript, "../react_ffi.mjs", "use_memo")
+pub fn use_memo(compute: fn() -> a, deps: List(b)) -> a
+
+/// 메모이제이션된 콜백
+@external(javascript, "../react_ffi.mjs", "use_callback")
+pub fn use_callback(callback: fn(a) -> b, deps: List(c)) -> fn(a) -> b
+
+// === useRef ===
+
+/// ref 생성
+@external(javascript, "../react_ffi.mjs", "use_ref")
+pub fn use_ref(initial: a) -> Ref(a)
+
+/// ref 현재 값 읽기
+@external(javascript, "../react_ffi.mjs", "get_ref_current")
+pub fn get_ref(ref: Ref(a)) -> a
+
+/// ref 현재 값 설정
+@external(javascript, "../react_ffi.mjs", "set_ref_current")
+pub fn set_ref(ref: Ref(a), value: a) -> Nil

package/template/src/widget/react/html.gleam

@@ -0,0 +1,156 @@
+// HTML 태그 편의 함수 - 순수 Gleam, FFI 없음
+// react.el / react.el_ / react.void 래퍼
+
+import widget/react.{type Props, type ReactElement}
+
+// === 컨테이너 ===
+
+pub fn div(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("div", props, children)
+}
+
+pub fn div_(children: List(ReactElement)) -> ReactElement {
+  react.el_("div", children)
+}
+
+pub fn span(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("span", props, children)
+}
+
+pub fn span_(children: List(ReactElement)) -> ReactElement {
+  react.el_("span", children)
+}
+
+pub fn section(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("section", props, children)
+}
+
+pub fn main(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("main", props, children)
+}
+
+// === 텍스트 ===
+
+pub fn p(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("p", props, children)
+}
+
+pub fn p_(children: List(ReactElement)) -> ReactElement {
+  react.el_("p", children)
+}
+
+pub fn h1(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("h1", props, children)
+}
+
+pub fn h2(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("h2", props, children)
+}
+
+pub fn h3(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("h3", props, children)
+}
+
+pub fn h4(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("h4", props, children)
+}
+
+pub fn h5(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("h5", props, children)
+}
+
+pub fn h6(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("h6", props, children)
+}
+
+// === 리스트 ===
+
+pub fn ul(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("ul", props, children)
+}
+
+pub fn ol(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("ol", props, children)
+}
+
+pub fn li(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("li", props, children)
+}
+
+// === 폼 ===
+
+pub fn form(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("form", props, children)
+}
+
+pub fn button(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("button", props, children)
+}
+
+pub fn label(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("label", props, children)
+}
+
+pub fn input(props: Props) -> ReactElement {
+  react.void("input", props)
+}
+
+pub fn textarea(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("textarea", props, children)
+}
+
+pub fn select(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("select", props, children)
+}
+
+pub fn option(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("option", props, children)
+}
+
+// === 테이블 ===
+
+pub fn table(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("table", props, children)
+}
+
+pub fn thead(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("thead", props, children)
+}
+
+pub fn tbody(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("tbody", props, children)
+}
+
+pub fn tr(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("tr", props, children)
+}
+
+pub fn td(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("td", props, children)
+}
+
+pub fn th(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("th", props, children)
+}
+
+// === 기타 ===
+
+pub fn a(props: Props, children: List(ReactElement)) -> ReactElement {
+  react.el("a", props, children)
+}
+
+pub fn img(props: Props) -> ReactElement {
+  react.void("img", props)
+}
+
+pub fn br() -> ReactElement {
+  react.void("br", empty_props())
+}
+
+pub fn hr(props: Props) -> ReactElement {
+  react.void("hr", props)
+}
+
+// br에서 사용할 빈 props (순환 의존 방지용 내부 FFI)
+@external(javascript, "../react_ffi.mjs", "empty_props")
+fn empty_props() -> Props

package/template/src/widget/react/prop.gleam

@@ -0,0 +1,106 @@
+// Props 빌더 - 파이프라인 API로 React props 구성
+
+import widget/react.{type Props, type Ref}
+
+// === Style 타입 ===
+
+/// CSS 스타일 객체
+pub type Style
+
+// === Props 생성 ===
+
+/// 빈 props 객체 생성
+@external(javascript, "../react_ffi.mjs", "empty_props")
+pub fn new() -> Props
+
+// === 속성 설정 (모두 Props -> Props, 파이프라인 가능) ===
+
+/// 문자열 속성
+@external(javascript, "../react_ffi.mjs", "set_prop_string")
+pub fn string(props: Props, key: String, value: String) -> Props
+
+/// 정수 속성
+@external(javascript, "../react_ffi.mjs", "set_prop_int")
+pub fn int(props: Props, key: String, value: Int) -> Props
+
+/// 실수 속성
+@external(javascript, "../react_ffi.mjs", "set_prop_float")
+pub fn float(props: Props, key: String, value: Float) -> Props
+
+/// 불리언 속성
+@external(javascript, "../react_ffi.mjs", "set_prop_bool")
+pub fn bool(props: Props, key: String, value: Bool) -> Props
+
+/// 임의 타입 속성
+@external(javascript, "../react_ffi.mjs", "set_prop_any")
+pub fn any(props: Props, key: String, value: a) -> Props
+
+// === CSS 클래스 ===
+
+/// className 설정
+@external(javascript, "../react_ffi.mjs", "set_class_name")
+pub fn class(props: Props, class_name: String) -> Props
+
+/// 여러 클래스명을 공백으로 결합
+@external(javascript, "../react_ffi.mjs", "set_class_names")
+pub fn classes(props: Props, class_names: List(String)) -> Props
+
+// === 특수 속성 ===
+
+/// key 설정
+@external(javascript, "../react_ffi.mjs", "set_key")
+pub fn key(props: Props, key: String) -> Props
+
+/// ref 설정
+@external(javascript, "../react_ffi.mjs", "set_ref")
+pub fn ref(props: Props, ref: Ref(a)) -> Props
+
+/// style 객체 설정
+@external(javascript, "../react_ffi.mjs", "set_style")
+pub fn style(props: Props, style: Style) -> Props
+
+// === 이벤트 핸들러 ===
+
+/// 범용 이벤트 핸들러
+@external(javascript, "../react_ffi.mjs", "set_prop_handler")
+pub fn on(props: Props, event_name: String, handler: fn(e) -> Nil) -> Props
+
+/// onClick
+pub fn on_click(props: Props, handler: fn(e) -> Nil) -> Props {
+  on(props, "onClick", handler)
+}
+
+/// onChange
+pub fn on_change(props: Props, handler: fn(e) -> Nil) -> Props {
+  on(props, "onChange", handler)
+}
+
+/// onSubmit
+pub fn on_submit(props: Props, handler: fn(e) -> Nil) -> Props {
+  on(props, "onSubmit", handler)
+}
+
+/// onKeyDown
+pub fn on_key_down(props: Props, handler: fn(e) -> Nil) -> Props {
+  on(props, "onKeyDown", handler)
+}
+
+/// onFocus
+pub fn on_focus(props: Props, handler: fn(e) -> Nil) -> Props {
+  on(props, "onFocus", handler)
+}
+
+/// onBlur
+pub fn on_blur(props: Props, handler: fn(e) -> Nil) -> Props {
+  on(props, "onBlur", handler)
+}
+
+// === Style 빌더 ===
+
+/// 빈 스타일 객체 생성
+@external(javascript, "../react_ffi.mjs", "empty_style")
+pub fn new_style() -> Style
+
+/// 스타일 속성 설정
+@external(javascript, "../react_ffi.mjs", "set_style_prop")
+pub fn set(style: Style, key: String, value: String) -> Style

package/template/src/widget/react.gleam

@@ -0,0 +1,81 @@
+// React 핵심 타입 + createElement + fragment/text/none
+
+import gleam/option.{type Option, None, Some}
+
+// === Opaque 타입 ===
+
+/// React가 렌더링하는 요소
+pub type ReactElement
+
+/// Mendix가 전달하는 props 객체
+pub type JsProps
+
+/// React 컴포넌트 참조
+pub type Component
+
+/// React ref 객체
+pub type Ref(a)
+
+// Props 타입 (react/prop 모듈에서 빌더 제공)
+pub type Props
+
+// === 요소 생성 FFI 바인딩 ===
+
+/// 범용 HTML 요소 생성
+@external(javascript, "./react_ffi.mjs", "create_element")
+pub fn el(tag: String, props: Props, children: List(ReactElement)) -> ReactElement
+
+/// props 없이 자식만으로 요소 생성
+@external(javascript, "./react_ffi.mjs", "create_element_no_props")
+pub fn el_(tag: String, children: List(ReactElement)) -> ReactElement
+
+/// self-closing 요소 (input, img, br 등)
+@external(javascript, "./react_ffi.mjs", "create_void_element")
+pub fn void(tag: String, props: Props) -> ReactElement
+
+/// React 컴포넌트 합성
+@external(javascript, "./react_ffi.mjs", "create_component")
+pub fn component(
+  comp: Component,
+  props: Props,
+  children: List(ReactElement),
+) -> ReactElement
+
+// === Fragment / null / text ===
+
+/// Fragment로 여러 자식을 감싸기
+@external(javascript, "./react_ffi.mjs", "fragment")
+pub fn fragment(children: List(ReactElement)) -> ReactElement
+
+/// key가 있는 Fragment
+@external(javascript, "./react_ffi.mjs", "keyed_fragment")
+pub fn keyed_fragment(key: String, children: List(ReactElement)) -> ReactElement
+
+/// null 렌더링 (아무것도 표시하지 않음)
+@external(javascript, "./react_ffi.mjs", "null_element")
+pub fn none() -> ReactElement
+
+/// 텍스트 노드
+@external(javascript, "./react_ffi.mjs", "text")
+pub fn text(content: String) -> ReactElement
+
+// === 순수 Gleam 헬퍼 ===
+
+/// Bool 기반 조건부 렌더링
+pub fn when(condition: Bool, element_fn: fn() -> ReactElement) -> ReactElement {
+  case condition {
+    True -> element_fn()
+    False -> none()
+  }
+}
+
+/// Option 기반 조건부 렌더링
+pub fn when_some(
+  option: Option(a),
+  render_fn: fn(a) -> ReactElement,
+) -> ReactElement {
+  case option {
+    Some(value) -> render_fn(value)
+    None -> none()
+  }
+}

package/template/src/widget/react_ffi.mjs

@@ -0,0 +1,184 @@
+// React FFI 어댑터 - 모든 React 원시 함수를 Gleam에 노출
+import * as React from "react";
+import { toList } from "../gleam.mjs";
+
+// === 요소 생성 ===
+
+// 범용 요소 생성: tag + props + children(Gleam List)
+export function create_element(tag, props, children) {
+  return React.createElement(tag, props, ...children.toArray());
+}
+
+// props 없이 자식만
+export function create_element_no_props(tag, children) {
+  return React.createElement(tag, null, ...children.toArray());
+}
+
+// self-closing 요소 (input, img, br 등)
+export function create_void_element(tag, props) {
+  return React.createElement(tag, props);
+}
+
+// React 컴포넌트 합성
+export function create_component(component, props, children) {
+  return React.createElement(component, props, ...children.toArray());
+}
+
+// === Fragment / null / text ===
+
+export function fragment(children) {
+  return React.createElement(React.Fragment, null, ...children.toArray());
+}
+
+export function keyed_fragment(key, children) {
+  return React.createElement(React.Fragment, { key }, ...children.toArray());
+}
+
+export function null_element() {
+  return null;
+}
+
+export function text(content) {
+  return content;
+}
+
+// === Props 빌더 ===
+
+export function empty_props() {
+  return {};
+}
+
+export function set_prop_string(props, key, value) {
+  return { ...props, [key]: value };
+}
+
+export function set_prop_int(props, key, value) {
+  return { ...props, [key]: value };
+}
+
+export function set_prop_float(props, key, value) {
+  return { ...props, [key]: value };
+}
+
+export function set_prop_bool(props, key, value) {
+  return { ...props, [key]: value };
+}
+
+export function set_prop_handler(props, key, handler) {
+  return { ...props, [key]: handler };
+}
+
+export function set_prop_any(props, key, value) {
+  return { ...props, [key]: value };
+}
+
+export function set_class_name(props, class_name) {
+  return { ...props, className: class_name };
+}
+
+export function set_class_names(props, class_names) {
+  return { ...props, className: class_names.toArray().join(" ") };
+}
+
+export function set_key(props, key) {
+  return { ...props, key };
+}
+
+export function set_ref(props, ref) {
+  return { ...props, ref };
+}
+
+export function set_style(props, style_obj) {
+  return { ...props, style: style_obj };
+}
+
+// === Style 빌더 ===
+
+export function empty_style() {
+  return {};
+}
+
+export function set_style_prop(style, key, value) {
+  return { ...style, [key]: value };
+}
+
+// === Props 읽기 (Mendix props에서 값 추출) ===
+
+export function get_string_prop(props, key) {
+  const value = props[key];
+  return value !== undefined && value !== null ? String(value) : "";
+}
+
+export function get_prop(props, key) {
+  return props[key];
+}
+
+export function has_prop(props, key) {
+  return key in props && props[key] !== undefined && props[key] !== null;
+}
+
+// === React Hooks ===
+
+export function use_state(initial) {
+  return React.useState(initial);
+}
+
+export function use_effect(effect_fn, deps) {
+  React.useEffect(effect_fn, deps.toArray());
+}
+
+export function use_effect_always(effect_fn) {
+  React.useEffect(effect_fn);
+}
+
+export function use_effect_once(effect_fn) {
+  React.useEffect(effect_fn, []);
+}
+
+export function use_memo(compute_fn, deps) {
+  return React.useMemo(compute_fn, deps.toArray());
+}
+
+export function use_callback(callback, deps) {
+  return React.useCallback(callback, deps.toArray());
+}
+
+export function use_ref(initial) {
+  return React.useRef(initial);
+}
+
+export function get_ref_current(ref) {
+  return ref.current;
+}
+
+export function set_ref_current(ref, value) {
+  ref.current = value;
+}
+
+// === 이벤트 ===
+
+export function get_target_value(event) {
+  return event.target.value ?? "";
+}
+
+export function prevent_default(event) {
+  event.preventDefault();
+}
+
+export function stop_propagation(event) {
+  event.stopPropagation();
+}
+
+export function get_event_key(event) {
+  return event.key;
+}
+
+// === 유틸리티 ===
+
+export function list_to_array(gleam_list) {
+  return gleam_list.toArray();
+}
+
+export function array_to_list(js_array) {
+  return toList(js_array);
+}

package/template/src/widget/__widget_name___ffi.mjs

@@ -1,13 +0,0 @@
-// 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) : "";
-}