create-mendix-widget-gleam 2.0.19 → 3.0.0

package/src/scaffold.mjs

@@ -1,97 +1,108 @@
-/**
- * 파일 복사 + 템플릿 치환
- */
-
-import { readdir, readFile, writeFile, mkdir, copyFile } from "node:fs/promises";
-import { join, relative } from "node:path";
-
-/** 바이너리 판별용 확장자 */
-const BINARY_EXTS = new Set([".png", ".jpg", ".gif", ".ico", ".woff", ".woff2", ".ttf", ".eot"]);
-
-/** 재귀적으로 디렉토리 내 모든 파일 경로를 수집 */
-async function walkDir(dir) {
-  const entries = await readdir(dir, { withFileTypes: true });
-  const files = [];
-  for (const entry of entries) {
-    const fullPath = join(dir, entry.name);
-    if (entry.isDirectory()) {
-      files.push(...(await walkDir(fullPath)));
-    } else {
-      files.push(fullPath);
-    }
-  }
-  return files;
-}
-
-// npm publish 시 제외되는 dotfile을 언더스코어 접두사로 보관하고 복원
-const DOTFILE_MAP = { _gitignore: ".gitignore" };
-
-/** 파일명에서 플레이스홀더 치환 + dotfile 복원 */
-function replaceFileName(name, names) {
-  if (DOTFILE_MAP[name]) return DOTFILE_MAP[name];
-  return name
-    .replace(/__WidgetName__/g, names.pascalCase)
-    .replace(/__widget_name__/g, names.snakeCase);
-}
-
-/** 파일 내용에서 플레이스홀더 치환 */
-function replaceContent(content, names, pmConfig, templateComments) {
-  let result = content
-    .replace(/\{\{PASCAL_CASE\}\}/g, names.pascalCase)
-    .replace(/\{\{SNAKE_CASE\}\}/g, names.snakeCase)
-    .replace(/\{\{LOWERCASE\}\}/g, names.lowerCase)
-    .replace(/\{\{DISPLAY_NAME\}\}/g, names.displayName)
-    .replace(/\{\{KEBAB_CASE\}\}/g, names.kebabCase);
-
-  if (templateComments) {
-    result = result.replace(/\{\{I18N:(\w+)\}\}/g, (_, key) => {
-      return templateComments[key] ?? `{{I18N:${key}}}`;
-    });
-  }
-
-  return result;
-}
-
-/**
- * 템플릿을 대상 디렉토리에 스케폴딩
- * @param {string} templateDir - 템플릿 디렉토리 경로
- * @param {string} targetDir - 생성할 프로젝트 디렉토리 경로
- * @param {object} names - 이름 변환 결과
- * @param {object} pmConfig - 패키지 매니저 설정
- * @param {object} [templateComments] - i18n 템플릿 주석 ({{I18N:*}} 치환용)
- */
-export async function scaffold(templateDir, targetDir, names, pmConfig, templateComments) {
-  const files = await walkDir(templateDir);
-  const created = [];
-
-  for (const srcPath of files) {
-    // 템플릿 기준 상대 경로
-    const relPath = relative(templateDir, srcPath);
-
-    // 경로의 각 부분에서 파일명 치환
-    const destRelPath = relPath
-      .split(/[\\/]/)
-      .map((part) => replaceFileName(part, names))
-      .join("/");
-
-    const destPath = join(targetDir, destRelPath);
-    const ext = srcPath.substring(srcPath.lastIndexOf(".")).toLowerCase();
-
-    // 디렉토리 생성
-    await mkdir(join(destPath, ".."), { recursive: true });
-
-    if (BINARY_EXTS.has(ext)) {
-      // 바이너리 파일은 그대로 복사
-      await copyFile(srcPath, destPath);
-    } else {
-      // 텍스트 파일은 내용 치환
-      const content = await readFile(srcPath, "utf-8");
-      const replaced = replaceContent(content, names, pmConfig, templateComments);
-      await writeFile(destPath, replaced, "utf-8");
-    }
-
-    created.push(destRelPath);
-  }
-
-  return created;
-}
+/**
+ * 파일 복사 + 템플릿 치환
+ */
+
+import { readdir, readFile, writeFile, mkdir, copyFile } from "node:fs/promises";
+import { join, relative } from "node:path";
+
+/** 바이너리 판별용 확장자 */
+const BINARY_EXTS = new Set([".png", ".jpg", ".gif", ".ico", ".woff", ".woff2", ".ttf", ".eot"]);
+
+/** 재귀적으로 디렉토리 내 모든 파일 경로를 수집 */
+async function walkDir(dir) {
+  const entries = await readdir(dir, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...(await walkDir(fullPath)));
+    } else {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+// npm publish 시 제외되는 dotfile을 언더스코어 접두사로 보관하고 복원
+const DOTFILE_MAP = { _gitignore: ".gitignore" };
+
+/** 파일명에서 플레이스홀더 치환 + dotfile 복원 */
+function replaceFileName(name, names) {
+  if (DOTFILE_MAP[name]) return DOTFILE_MAP[name];
+  return name
+    .replace(/__WidgetName__/g, names.pascalCase)
+    .replace(/__widget_name__/g, names.snakeCase);
+}
+
+/** 파일 내용에서 플레이스홀더 치환 */
+function replaceContent(content, names, pmConfig, templateComments, options) {
+  let result = content
+    .replace(/\{\{PASCAL_CASE\}\}/g, names.pascalCase)
+    .replace(/\{\{SNAKE_CASE\}\}/g, names.snakeCase)
+    .replace(/\{\{LOWERCASE\}\}/g, names.lowerCase)
+    .replace(/\{\{DISPLAY_NAME\}\}/g, names.displayName)
+    .replace(/\{\{KEBAB_CASE\}\}/g, names.kebabCase);
+
+  if (options) {
+    result = result
+      .replace(/\{\{ORGANIZATION\}\}/g, options.organization)
+      .replace(/\{\{COPYRIGHT\}\}/g, options.copyright)
+      .replace(/\{\{LICENSE_ID\}\}/g, options.license)
+      .replace(/\{\{VERSION\}\}/g, options.version)
+      .replace(/\{\{AUTHOR\}\}/g, options.author)
+      .replace(/\{\{PROJECT_PATH\}\}/g, options.projectPath);
+  }
+
+  if (templateComments) {
+    result = result.replace(/\{\{I18N:(\w+)\}\}/g, (_, key) => {
+      return templateComments[key] ?? `{{I18N:${key}}}`;
+    });
+  }
+
+  return result;
+}
+
+/**
+ * 템플릿을 대상 디렉토리에 스케폴딩
+ * @param {string} templateDir - 템플릿 디렉토리 경로
+ * @param {string} targetDir - 생성할 프로젝트 디렉토리 경로
+ * @param {object} names - 이름 변환 결과
+ * @param {object} pmConfig - 패키지 매니저 설정
+ * @param {object} [templateComments] - i18n 템플릿 주석 ({{I18N:*}} 치환용)
+ * @param {object} [options] - 추가 옵션 (organization, copyright, license, version, author, projectPath)
+ */
+export async function scaffold(templateDir, targetDir, names, pmConfig, templateComments, options) {
+  const files = await walkDir(templateDir);
+  const created = [];
+
+  for (const srcPath of files) {
+    // 템플릿 기준 상대 경로
+    const relPath = relative(templateDir, srcPath);
+
+    // 경로의 각 부분에서 파일명 치환
+    const destRelPath = relPath
+      .split(/[\\/]/)
+      .map((part) => replaceFileName(part, names))
+      .join("/");
+
+    const destPath = join(targetDir, destRelPath);
+    const ext = srcPath.substring(srcPath.lastIndexOf(".")).toLowerCase();
+
+    // 디렉토리 생성
+    await mkdir(join(destPath, ".."), { recursive: true });
+
+    if (BINARY_EXTS.has(ext)) {
+      // 바이너리 파일은 그대로 복사
+      await copyFile(srcPath, destPath);
+    } else {
+      // 텍스트 파일은 내용 치환
+      const content = await readFile(srcPath, "utf-8");
+      const replaced = replaceContent(content, names, pmConfig, templateComments, options);
+      await writeFile(destPath, replaced, "utf-8");
+    }
+
+    created.push(destRelPath);
+  }
+
+  return created;
+}

package/src/templates/claude_md.mjs

@@ -9,7 +9,7 @@ const COMMENT_LANG_INSTRUCTIONS = {
   ja: "Use Japanese comments",
 };
 
-export function generateClaudeMdContent(lang, names, pm, pmConfig) {
+export function generateClaudeMdContent(lang, names, pm, pmConfig, organization) {
   const commentInstruction =
     COMMENT_LANG_INSTRUCTIONS[lang] ?? COMMENT_LANG_INSTRUCTIONS["en"];
 
@@ -41,7 +41,7 @@ IMPORTANT: Breaking these rules will break the build or compromise the architect
 - **Do not write JSX/JS files directly.** All widget logic and UI must be written in Gleam
 - **Do not write FFI files (.mjs) in the widget project.** React/Mendix FFI is provided by the glendix package
 - **Do not manually manage bridge JS files (src/*.js).** glendix auto-generates/deletes them at build time
-- **Do not use external Gleam React libraries such as Redraw.** Use only glendix for React bindings
+- **React bindings use \`redraw\`/\`redraw_dom\` packages.** glendix v3.0 no longer provides React bindings directly
 - The Gleam compilation output path (\`build/dev/javascript/{gleam.toml name}/\`) must match the Rollup input path
 - Mendix widget names allow only alphabetic characters (a-zA-Z)
 
@@ -53,7 +53,7 @@ IMPORTANT: Breaking these rules will break the build or compromise the architect
 
 ## Architecture
 
-Widget entry point signature: \`pub fn widget(props: JsProps) -> ReactElement\` — identical to a React functional component.
+Widget entry point signature: \`pub fn widget(props: JsProps) -> Element\` — identical to a React functional component. \`JsProps\` from \`glendix/mendix\`, \`Element\` from \`redraw\`.
 
 - \`src/${names.snakeCase}.gleam\` — Main widget (called by Mendix runtime)
 - \`src/editor_config.gleam\` — Studio Pro property panel configuration
@@ -72,8 +72,8 @@ src/*.gleam → gleam build → build/dev/javascript/**/*.mjs → Bridge JS (aut
 
 ## Mendix Widget Conventions
 
-- Widget ID: \`mendix.${names.lowerCase}.${names.pascalCase}\`
-- \`packagePath: "mendix"\` in \`package.json\` determines the deployment path
+- Widget ID: \`${organization}.${names.lowerCase}.${names.pascalCase}\`
+- \`packagePath: "${organization}"\` in \`package.json\` determines the deployment path
 - \`needsEntityContext="true"\` → Requires Mendix data context
 - \`offlineCapable="true"\` → Offline support
 - \`.mpk\` output: \`dist/\` directory
@@ -84,7 +84,8 @@ src/*.gleam → gleam build → build/dev/javascript/**/*.mjs → Bridge JS (aut
 - Mendix props (\`JsProps\`) are accessed via \`mendix.get_prop\`/\`mendix.get_string_prop\` etc.
 - Mendix complex types (\`EditableValue\`, \`ActionValue\`, \`ListValue\`) are opaque types with FFI accessors
 - JS \`undefined\` ↔ Gleam \`Option\` conversion is handled automatically at the FFI boundary
-- HTML attributes use the Attribute list API: \`[attribute.class("x"), event.on_click(handler)]\`
+- HTML elements use \`redraw/dom/html\`, attributes use \`redraw/dom/attribute\`, events use \`redraw/dom/events\`
+- lustre TEA pattern is supported via \`glendix/lustre\` bridge (optional)
 - Gleam tuples \`#(a, b)\` = JS \`[a, b]\` — directly compatible with \`useState\` return values
 
 ## Reference Docs

package/src/templates/readme_md.mjs

@@ -2,7 +2,7 @@
  * README.md template — 3 language versions
  */
 
-export function generateReadmeContent(lang, names, pm, pmConfig) {
+export function generateReadmeContent(lang, names, pm, pmConfig, license) {
   const installCmd =
     pm === "npm"
       ? "npm install"
@@ -14,11 +14,11 @@ export function generateReadmeContent(lang, names, pm, pmConfig) {
 
   switch (lang) {
     case "ko":
-      return generateKo(names, pm, installCmd);
+      return generateKo(names, pm, installCmd, license);
     case "ja":
-      return generateJa(names, pm, installCmd);
+      return generateJa(names, pm, installCmd, license);
     default:
-      return generateEn(names, pm, installCmd);
+      return generateEn(names, pm, installCmd, license);
   }
 }
 
@@ -26,26 +26,26 @@ export function generateReadmeContent(lang, names, pm, pmConfig) {
 // English
 // ---------------------------------------------------------------------------
 
-function generateEn(names, pm, installCmd) {
+function generateEn(names, pm, installCmd, license) {
   return `# ${names.pascalCase}
 
 A Mendix Pluggable Widget written in Gleam.
 
 ## Core Principles
 
-The Gleam function \`fn(JsProps) -> ReactElement\` has the same signature as a React functional component. glendix provides type-safe access to React primitives and Mendix runtime type accessors, so widget projects only need to focus on business logic.
+The Gleam function \`fn(JsProps) -> Element\` has the same signature as a React functional component. React bindings come from the \`redraw\`/\`redraw_dom\` packages, while glendix handles Mendix API access and JS interop, so widget projects only need to focus on business logic.
 
 \`\`\`gleam
 // src/${names.snakeCase}.gleam
-import glendix/mendix
-import glendix/react.{type JsProps, type ReactElement}
-import glendix/react/attribute
-import glendix/react/html
+import glendix/mendix.{type JsProps}
+import redraw.{type Element}
+import redraw/dom/attribute
+import redraw/dom/html
 
-pub fn widget(props: JsProps) -> ReactElement {
+pub fn widget(props: JsProps) -> Element {
   let sample_text = mendix.get_string_prop(props, "sampleText")
   html.div([attribute.class("widget-hello-world")], [
-    react.text("Hello " <> sample_text),
+    html.text("Hello " <> sample_text),
   ])
 }
 \`\`\`
@@ -53,11 +53,12 @@ pub fn widget(props: JsProps) -> ReactElement {
 Mendix complex types can also be used type-safely from Gleam:
 
 \`\`\`gleam
-import glendix/mendix
+import glendix/mendix.{type JsProps}
 import glendix/mendix/editable_value
 import glendix/mendix/action
+import redraw.{type Element}
 
-pub fn widget(props: JsProps) -> ReactElement {
+pub fn widget(props: JsProps) -> Element {
   // Access EditableValue
   let name_attr: EditableValue = mendix.get_prop_required(props, "name")
   let display = editable_value.display_value(name_attr)
@@ -126,7 +127,7 @@ bindings.json                      # External React component binding configurat
 package.json                       # npm dependencies (React, external libraries, etc.)
 \`\`\`
 
-React/Mendix FFI and JS Interop bindings are provided by the [glendix](https://hexdocs.pm/glendix/) Hex package.
+React bindings come from [redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/), while Mendix API and JS Interop bindings are provided by [glendix](https://hexdocs.pm/glendix/).
 
 ## Using External React Components
 
@@ -162,17 +163,18 @@ gleam run -m glendix/install
 
 \`\`\`gleam
 import glendix/binding
-import glendix/react.{type ReactElement}
-import glendix/react/attribute.{type Attribute}
+import glendix/interop
+import redraw.{type Element}
+import redraw/dom/attribute.{type Attribute}
 
 fn m() { binding.module("recharts") }
 
-pub fn pie_chart(attrs: List(Attribute), children: List(ReactElement)) -> ReactElement {
-  react.component_el(binding.resolve(m(), "PieChart"), attrs, children)
+pub fn pie_chart(attrs: List(Attribute), children: List(Element)) -> Element {
+  interop.component_el(binding.resolve(m(), "PieChart"), attrs, children)
 }
 
-pub fn tooltip(attrs: List(Attribute)) -> ReactElement {
-  react.void_component_el(binding.resolve(m(), "Tooltip"), attrs)
+pub fn tooltip(attrs: List(Attribute)) -> Element {
+  interop.void_component_el(binding.resolve(m(), "Tooltip"), attrs)
 }
 \`\`\`
 
@@ -229,18 +231,19 @@ This automatically:
 
 \`\`\`gleam
 // src/widgets/switch.gleam (auto-generated)
-import glendix/mendix
-import glendix/react.{type JsProps, type ReactElement}
-import glendix/react/attribute
+import glendix/mendix.{type JsProps}
+import glendix/interop
+import redraw.{type Element}
+import redraw/dom/attribute
 import glendix/widget
 
 /// Render Switch widget - reads properties from props and passes them to the widget
-pub fn render(props: JsProps) -> ReactElement {
+pub fn render(props: JsProps) -> Element {
   let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
   let action = mendix.get_prop_required(props, "action")
 
   let comp = widget.component("Switch")
-  react.component_el(
+  interop.component_el(
     comp,
     [
       attribute.attribute("booleanAttribute", boolean_attribute),
@@ -267,13 +270,14 @@ Widget names use the \`<name>\` value from the \`.mpk\`'s internal XML, and prop
 ## Tech Stack
 
 - **Gleam** → JavaScript compilation
-- **[glendix](https://hexdocs.pm/glendix/)** — React + Mendix API + JS Interop Gleam bindings
+- **[glendix](https://hexdocs.pm/glendix/)** — Mendix API + JS Interop Gleam bindings
+- **[redraw](https://hexdocs.pm/redraw/)** / **[redraw_dom](https://hexdocs.pm/redraw_dom/)** — React Gleam bindings
 - **Mendix Pluggable Widget** (React 19)
 - **${pm}** — Package manager
 
 ## License
 
-Apache-2.0
+${license}
 `;
 }
 
@@ -281,26 +285,26 @@ Apache-2.0
 // Korean
 // ---------------------------------------------------------------------------
 
-function generateKo(names, pm, installCmd) {
+function generateKo(names, pm, installCmd, license) {
   return `# ${names.pascalCase}
 
 Gleam 언어로 작성된 Mendix Pluggable Widget.
 
 ## 핵심 원리
 
-Gleam 함수 \`fn(JsProps) -> ReactElement\`는 React 함수형 컴포넌트와 동일한 시그니처다. glendix가 React 원시 함수와 Mendix 런타임 타입 접근자를 타입 안전하게 제공하므로, 위젯 프로젝트에서는 비즈니스 로직에만 집중하면 된다.
+Gleam 함수 \`fn(JsProps) -> Element\`는 React 함수형 컴포넌트와 동일한 시그니처다. React 바인딩은 \`redraw\`/\`redraw_dom\` 패키지가, Mendix API 접근과 JS interop은 glendix가 제공하므로, 위젯 프로젝트에서는 비즈니스 로직에만 집중하면 된다.
 
 \`\`\`gleam
 // src/${names.snakeCase}.gleam
-import glendix/mendix
-import glendix/react.{type JsProps, type ReactElement}
-import glendix/react/attribute
-import glendix/react/html
+import glendix/mendix.{type JsProps}
+import redraw.{type Element}
+import redraw/dom/attribute
+import redraw/dom/html
 
-pub fn widget(props: JsProps) -> ReactElement {
+pub fn widget(props: JsProps) -> Element {
   let sample_text = mendix.get_string_prop(props, "sampleText")
   html.div([attribute.class("widget-hello-world")], [
-    react.text("Hello " <> sample_text),
+    html.text("Hello " <> sample_text),
   ])
 }
 \`\`\`
@@ -308,11 +312,12 @@ pub fn widget(props: JsProps) -> ReactElement {
 Mendix 복합 타입도 Gleam에서 타입 안전하게 사용할 수 있다:
 
 \`\`\`gleam
-import glendix/mendix
+import glendix/mendix.{type JsProps}
 import glendix/mendix/editable_value
 import glendix/mendix/action
+import redraw.{type Element}
 
-pub fn widget(props: JsProps) -> ReactElement {
+pub fn widget(props: JsProps) -> Element {
   // EditableValue 접근
   let name_attr: EditableValue = mendix.get_prop_required(props, "name")
   let display = editable_value.display_value(name_attr)
@@ -381,7 +386,7 @@ bindings.json                      # 외부 React 컴포넌트 바인딩 설정
 package.json                       # npm 의존성 (React, 외부 라이브러리 등)
 \`\`\`
 
-React/Mendix FFI 및 JS Interop 바인딩은 [glendix](https://hexdocs.pm/glendix/) Hex 패키지로 제공됩니다.
+React 바인딩은 [redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/)이, Mendix API 및 JS Interop 바인딩은 [glendix](https://hexdocs.pm/glendix/)가 제공합니다.
 
 ## 외부 React 컴포넌트 사용
 
@@ -417,17 +422,18 @@ gleam run -m glendix/install
 
 \`\`\`gleam
 import glendix/binding
-import glendix/react.{type ReactElement}
-import glendix/react/attribute.{type Attribute}
+import glendix/interop
+import redraw.{type Element}
+import redraw/dom/attribute.{type Attribute}
 
 fn m() { binding.module("recharts") }
 
-pub fn pie_chart(attrs: List(Attribute), children: List(ReactElement)) -> ReactElement {
-  react.component_el(binding.resolve(m(), "PieChart"), attrs, children)
+pub fn pie_chart(attrs: List(Attribute), children: List(Element)) -> Element {
+  interop.component_el(binding.resolve(m(), "PieChart"), attrs, children)
 }
 
-pub fn tooltip(attrs: List(Attribute)) -> ReactElement {
-  react.void_component_el(binding.resolve(m(), "Tooltip"), attrs)
+pub fn tooltip(attrs: List(Attribute)) -> Element {
+  interop.void_component_el(binding.resolve(m(), "Tooltip"), attrs)
 }
 \`\`\`
 
@@ -484,18 +490,19 @@ gleam run -m glendix/install
 
 \`\`\`gleam
 // src/widgets/switch.gleam (자동 생성)
-import glendix/mendix
-import glendix/react.{type JsProps, type ReactElement}
-import glendix/react/attribute
+import glendix/mendix.{type JsProps}
+import glendix/interop
+import redraw.{type Element}
+import redraw/dom/attribute
 import glendix/widget
 
 /// Switch 위젯 렌더링 - props에서 속성을 읽어 위젯에 전달
-pub fn render(props: JsProps) -> ReactElement {
+pub fn render(props: JsProps) -> Element {
   let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
   let action = mendix.get_prop_required(props, "action")
 
   let comp = widget.component("Switch")
-  react.component_el(
+  interop.component_el(
     comp,
     [
       attribute.attribute("booleanAttribute", boolean_attribute),
@@ -522,13 +529,14 @@ switch.render(props)
 ## 기술 스택
 
 - **Gleam** → JavaScript 컴파일
-- **[glendix](https://hexdocs.pm/glendix/)** — React + Mendix API + JS Interop Gleam 바인딩
+- **[glendix](https://hexdocs.pm/glendix/)** — Mendix API + JS Interop Gleam 바인딩
+- **[redraw](https://hexdocs.pm/redraw/)** / **[redraw_dom](https://hexdocs.pm/redraw_dom/)** — React Gleam 바인딩
 - **Mendix Pluggable Widget** (React 19)
 - **${pm}** — 패키지 매니저
 
 ## 라이센스
 
-Apache-2.0
+${license}
 `;
 }
 
@@ -536,26 +544,26 @@ Apache-2.0
 // Japanese
 // ---------------------------------------------------------------------------
 
-function generateJa(names, pm, installCmd) {
+function generateJa(names, pm, installCmd, license) {
   return `# ${names.pascalCase}
 
 Gleam言語で作成されたMendix Pluggable Widget。
 
 ## 基本原理
 
-Gleam関数 \`fn(JsProps) -> ReactElement\` はReact関数コンポーネントと同一のシグネチャを持つ。glendixがReactプリミティブ関数とMendixランタイム型アクセサを型安全に提供するため、ウィジェットプロジェクトではビジネスロジックにのみ集中すればよい。
+Gleam関数 \`fn(JsProps) -> Element\` はReact関数コンポーネントと同一のシグネチャを持つ。Reactバインディングは\`redraw\`/\`redraw_dom\`パッケージが、Mendix APIアクセスとJS interopはglendixが提供するため、ウィジェットプロジェクトではビジネスロジックにのみ集中すればよい。
 
 \`\`\`gleam
 // src/${names.snakeCase}.gleam
-import glendix/mendix
-import glendix/react.{type JsProps, type ReactElement}
-import glendix/react/attribute
-import glendix/react/html
+import glendix/mendix.{type JsProps}
+import redraw.{type Element}
+import redraw/dom/attribute
+import redraw/dom/html
 
-pub fn widget(props: JsProps) -> ReactElement {
+pub fn widget(props: JsProps) -> Element {
   let sample_text = mendix.get_string_prop(props, "sampleText")
   html.div([attribute.class("widget-hello-world")], [
-    react.text("Hello " <> sample_text),
+    html.text("Hello " <> sample_text),
   ])
 }
 \`\`\`
@@ -563,11 +571,12 @@ pub fn widget(props: JsProps) -> ReactElement {
 Mendixの複合型もGleamから型安全に使用できる：
 
 \`\`\`gleam
-import glendix/mendix
+import glendix/mendix.{type JsProps}
 import glendix/mendix/editable_value
 import glendix/mendix/action
+import redraw.{type Element}
 
-pub fn widget(props: JsProps) -> ReactElement {
+pub fn widget(props: JsProps) -> Element {
   // EditableValueへのアクセス
   let name_attr: EditableValue = mendix.get_prop_required(props, "name")
   let display = editable_value.display_value(name_attr)
@@ -636,7 +645,7 @@ bindings.json                      # 外部Reactコンポーネントバイン
 package.json                       # npm依存関係（React、外部ライブラリなど）
 \`\`\`
 
-React/Mendix FFIおよびJS Interopバインディングは[glendix](https://hexdocs.pm/glendix/) Hexパッケージとして提供される。
+Reactバインディングは[redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/)が、Mendix APIおよびJS Interopバインディングは[glendix](https://hexdocs.pm/glendix/)が提供する。
 
 ## 外部Reactコンポーネントの使用
 
@@ -672,17 +681,18 @@ gleam run -m glendix/install
 
 \`\`\`gleam
 import glendix/binding
-import glendix/react.{type ReactElement}
-import glendix/react/attribute.{type Attribute}
+import glendix/interop
+import redraw.{type Element}
+import redraw/dom/attribute.{type Attribute}
 
 fn m() { binding.module("recharts") }
 
-pub fn pie_chart(attrs: List(Attribute), children: List(ReactElement)) -> ReactElement {
-  react.component_el(binding.resolve(m(), "PieChart"), attrs, children)
+pub fn pie_chart(attrs: List(Attribute), children: List(Element)) -> Element {
+  interop.component_el(binding.resolve(m(), "PieChart"), attrs, children)
 }
 
-pub fn tooltip(attrs: List(Attribute)) -> ReactElement {
-  react.void_component_el(binding.resolve(m(), "Tooltip"), attrs)
+pub fn tooltip(attrs: List(Attribute)) -> Element {
+  interop.void_component_el(binding.resolve(m(), "Tooltip"), attrs)
 }
 \`\`\`
 
@@ -739,18 +749,19 @@ gleam run -m glendix/install
 
 \`\`\`gleam
 // src/widgets/switch.gleam（自動生成）
-import glendix/mendix
-import glendix/react.{type JsProps, type ReactElement}
-import glendix/react/attribute
+import glendix/mendix.{type JsProps}
+import glendix/interop
+import redraw.{type Element}
+import redraw/dom/attribute
 import glendix/widget
 
 /// Switchウィジェットのレンダリング - propsからプロパティを読み取りウィジェットに渡す
-pub fn render(props: JsProps) -> ReactElement {
+pub fn render(props: JsProps) -> Element {
   let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
   let action = mendix.get_prop_required(props, "action")
 
   let comp = widget.component("Switch")
-  react.component_el(
+  interop.component_el(
     comp,
     [
       attribute.attribute("booleanAttribute", boolean_attribute),
@@ -777,12 +788,13 @@ switch.render(props)
 ## 技術スタック
 
 - **Gleam** → JavaScriptコンパイル
-- **[glendix](https://hexdocs.pm/glendix/)** — React + Mendix API + JS Interop Gleamバインディング
+- **[glendix](https://hexdocs.pm/glendix/)** — Mendix API + JS Interop Gleamバインディング
+- **[redraw](https://hexdocs.pm/redraw/)** / **[redraw_dom](https://hexdocs.pm/redraw_dom/)** — React Gleamバインディング
 - **Mendix Pluggable Widget**（React 19）
 - **${pm}** — パッケージマネージャー
 
 ## ライセンス
 
-Apache-2.0
+${license}
 `;
 }