switch container for merging widgets to WrappingContainer

Author: softmarshmallow

packages/designto-token/support-flags/index.ts

@@ -23,6 +23,7 @@ export default function handleWithFlags(node: ReflectSceneNode) {
 }
 
 function _handle_with_flags(node, flags: FlagsParseResult) {
+  // #region widget altering flags
   // artwork
   const artwork_flag_alias =
     flags["artwork"] ||
@@ -44,6 +45,20 @@ function _handle_with_flags(node, flags: FlagsParseResult) {
     return tokenize_flagged_wrap(node, wrap_flag_alias);
   }
 
+  if (flags.__meta?.contains_button_flag) {
+    return tokenize_flagged_button(node, flags[keys.flag_key__as_button]);
+  }
+
+  if (flags.__meta?.contains_input_flag) {
+    return tokenize_flagged_textfield(node, flags[keys.flag_key__as_input]);
+  }
+
+  if (flags.__meta?.contains_slider_flag) {
+    return tokenize_flagged_slider(node, flags[keys.flag_key__as_slider]);
+  }
+  // #endregion
+
+  // #region element altering flags
   // heading
   const heading_flag_alias =
     flags[keys.flag_key__as_h1] ||
@@ -61,7 +76,9 @@ function _handle_with_flags(node, flags: FlagsParseResult) {
   if (span_flag_alias) {
     return tokenize_flagged_span(node, span_flag_alias);
   }
+  // #endregion
 
+  // #region style extension flags
   const paragraph_flag_alias = flags[keys.flag_key__as_p];
   if (paragraph_flag_alias) {
     return tokenize_flagged_paragraph(node, paragraph_flag_alias);
@@ -87,16 +104,5 @@ function _handle_with_flags(node, flags: FlagsParseResult) {
   if (fix_wh_flags.length) {
     return tokenize_flagged_fix_wh(node, fix_wh_flags);
   }
-
-  if (flags.__meta?.contains_button_flag) {
-    return tokenize_flagged_button(node, flags[keys.flag_key__as_button]);
-  }
-
-  if (flags.__meta?.contains_input_flag) {
-    return tokenize_flagged_textfield(node, flags[keys.flag_key__as_input]);
-  }
-
-  if (flags.__meta?.contains_slider_flag) {
-    return tokenize_flagged_slider(node, flags[keys.flag_key__as_slider]);
-  }
+  // #endregion style extension flags
 }

packages/designto-token/support-flags/token-button/index.ts

@@ -7,11 +7,12 @@ import type {
 } from "@design-sdk/figma-node";
 import assert from "assert";
 import { tokenizeButton } from "../../token-widgets";
+import { WrappingContainer } from "../../tokens";
 
 export function tokenize_flagged_button(
   node: ReflectSceneNode,
   flag: AsButtonFlag
-): ButtonStyleButton | Container<ButtonStyleButton> {
+): ButtonStyleButton | WrappingContainer<ButtonStyleButton> {
   if (flag.value === false) return;
 
   const validated = validate_button(node);

packages/designto-token/support-flags/token-slider/index.ts

@@ -11,6 +11,7 @@ import assert from "assert";
 import { tokenizeLayout } from "../../token-layout";
 import { unwrappedChild } from "../../wrappings";
 import { RoundSliderThumbShape } from "@reflect-ui/core/lib/slider.thumb";
+import { WrappingContainer } from "../../tokens";
 
 /**
  *
@@ -32,7 +33,7 @@ import { RoundSliderThumbShape } from "@reflect-ui/core/lib/slider.thumb";
 export function tokenize_flagged_slider(
   node: ReflectSceneNode,
   flag: AsSliderFlag
-): Slider | Container {
+): Slider | WrappingContainer {
   if (flag.value === false) return;
 
   const validated = validate_slider(node);
@@ -75,9 +76,9 @@ export function tokenize_flagged_slider(
           )
         ) as Container;
 
-        // @ts-ignore FIXME: no tsignore
-        return new Container({
+        return new WrappingContainer({
           ...container,
+          key: keyFromNode(node),
           child: new Slider({
             key: _key,
             ...container,

packages/designto-token/support-flags/token-textfield/index.ts

@@ -19,6 +19,7 @@ import { detectIf } from "@reflect-ui/detection";
 import { paintToColor } from "@design-sdk/core/utils/colors";
 import { tokenizeLayout } from "../../token-layout";
 import { unwrappedChild } from "../../wrappings";
+import { WrappingContainer } from "../../tokens";
 
 /**
  *
@@ -40,7 +41,7 @@ import { unwrappedChild } from "../../wrappings";
 export function tokenize_flagged_textfield(
   node: ReflectSceneNode,
   flag: AsInputFlag
-): TextField | Container {
+): TextField | WrappingContainer {
   if (flag.value === false) return;
 
   const validated = validate_input(node);
@@ -76,9 +77,9 @@ export function tokenize_flagged_textfield(
           )
         ) as Container;
 
-        // @ts-ignore FIXME: no tsignore
-        return new Container({
+        return new WrappingContainer({
           ...container,
+          key: keyFromNode(node),
           child: new TextField({
             key: _key,
             ...container,

packages/designto-token/token-widgets/button-widget.ts

@@ -7,6 +7,7 @@ import { Colors, Container, EdgeInsets, WidgetKey } from "@reflect-ui/core";
 import assert from "assert";
 import { unwrappedChild } from "../wrappings";
 import { tokenizeLayout } from "../token-layout";
+import { WrappingContainer } from "../tokens";
 
 /**
  * Note - this universal button is used temporarily. the button tokens will be splited into more specific usecase following material button classification.
@@ -18,7 +19,7 @@ import { tokenizeLayout } from "../token-layout";
 function button(
   node: ReflectSceneNode,
   manifest: manifests.DetectedButtonManifest
-): core.ButtonStyleButton | core.Container<core.ButtonStyleButton> {
+): core.ButtonStyleButton | WrappingContainer<core.ButtonStyleButton> {
   assert(manifest.text, "text is required for button composing at this point");
 
   // TODO:
@@ -67,14 +68,14 @@ function button(
       )
     );
 
-    // @ts-ignore FIXME: no tsignore
-    return new Container({
+    return new WrappingContainer({
       ...container,
+      key: keyFromNode(node),
       child: button,
     });
   }
 
-  return new core.Container({
+  return new WrappingContainer({
     key: WidgetKey.copyWith(_key, { id: _key.id + ".sizedbox" }),
     width: sizing.width,
     height: sizing.height,

packages/designto-token/tokens/index.ts

@@ -1 +1,2 @@
 export * from "./stretched";
+export * from "./wrapping-container";

packages/designto-token/tokens/wrapping-container/index.ts

@@ -0,0 +1,8 @@
+import { Container, Widget } from "@reflect-ui/core";
+
+/**
+ * Special token for wrapping a detected component with a container.
+ */
+export class WrappingContainer<
+  T extends Widget = Widget
+> extends Container<T> {}

packages/designto-token/wrappings/wrapping.ts

@@ -9,7 +9,7 @@ import {
   OverflowBox,
   SingleChildScrollView,
 } from "@reflect-ui/core";
-import { Stretched } from "../tokens";
+import { Stretched, WrappingContainer } from "../tokens";
 
 export type WrappingToken =
   // layout / positioning / sizing wrappers
@@ -25,15 +25,17 @@ export type WrappingToken =
   // effect wrappers
   | Blurred
   // clip wrappers
-  | ClipRRect;
+  | ClipRRect
+  // wrapping container
+  | WrappingContainer;
 
 /**
  * CAUTION - this is not related to `Wrap` Widget. this unwrapps a (nested) token that is wrapped with typeof `WrappingToken`
  * @param maybeWrapped
  * @returns
  */
 export function unwrappedChild<T extends Widget>(maybeWrapped: Widget): T {
-  if (
+  const isWrappingWidget =
     maybeWrapped instanceof SizedBox ||
     maybeWrapped instanceof Stretched ||
     maybeWrapped instanceof Positioned ||
@@ -42,8 +44,10 @@ export function unwrappedChild<T extends Widget>(maybeWrapped: Widget): T {
     maybeWrapped instanceof Rotation ||
     maybeWrapped instanceof Opacity ||
     maybeWrapped instanceof Blurred ||
-    maybeWrapped instanceof ClipRRect
-  ) {
+    maybeWrapped instanceof ClipRRect ||
+    maybeWrapped instanceof WrappingContainer;
+
+  if (isWrappingWidget) {
     return unwrappedChild(maybeWrapped.child);
   }
   return maybeWrapped as T;

packages/designto-web/tokens-to-web-widget/index.ts

@@ -21,6 +21,7 @@ import { compose_instanciation } from "./compose-instanciation";
 import { IWHStyleWidget } from "@reflect-ui/core";
 import * as reusable from "@code-features/component/tokens";
 import assert from "assert";
+import { WrappingContainer } from "@designto/token/tokens";
 
 interface WebWidgetComposerConfig {
   /**
@@ -233,6 +234,23 @@ function compose<T extends JsxWidget>(
   } else if (widget instanceof core.Slider) {
     thisWebWidget = compose_unwrapped_slider(_key, widget);
   }
+  // wrapping container
+  else if (widget instanceof WrappingContainer) {
+    // #region
+    // mergable widgets for web
+    if (widget.child instanceof core.TextField) {
+      thisWebWidget = compose_unwrapped_text_input(_key, widget.child, widget);
+    } else if (widget.child instanceof core.ButtonStyleButton) {
+      thisWebWidget = compose_unwrapped_button(_key, widget.child, widget);
+    } else if (widget.child instanceof core.Slider) {
+      thisWebWidget = compose_unwrapped_slider(_key, widget.child, widget);
+    } else {
+      throw new Error(
+        `Unsupported widget type: ${widget.child.constructor.name}`
+      );
+    }
+    // #endregion
+  }
   // #endregion
 
   // execution order matters - some above widgets inherits from Container, this shall be handled at the last.
@@ -249,17 +267,6 @@ function compose<T extends JsxWidget>(
     container.y = widget.y;
     container.background = widget.background;
     thisWebWidget = container;
-
-    // #region
-    // mergable widgets for web
-    if (widget.child instanceof core.TextField) {
-      thisWebWidget = compose_unwrapped_text_input(_key, widget.child, widget);
-    } else if (widget.child instanceof core.ButtonStyleButton) {
-      thisWebWidget = compose_unwrapped_button(_key, widget.child, widget);
-    } else if (widget.child instanceof core.Slider) {
-      thisWebWidget = compose_unwrapped_slider(_key, widget.child, widget);
-    }
-    // #endregion
   }
 
   // -------------------------------------