add alt image support for disable broken image symbol; add config to disable detection for view only canvas build - for vanilla

softmarshmallow · softmarshmallow · commit d82399d5b590 · 2022-01-27T15:52:08.000+09:00
diff --git a/editor/scaffolds/canvas/canvas.tsx b/editor/scaffolds/canvas/canvas.tsx
@@ -49,6 +49,7 @@ export function VisualContentArea({ fileid }: { fileid: string }) {
             }}
           >
             <Canvas
+              key={selectedPage}
               selectedNodes={selectedNodes.filter(Boolean)}
               highlightedLayer={highlightedLayer}
               onSelectNode={(node) => {
diff --git a/editor/scaffolds/preview/index.tsx b/editor/scaffolds/preview/index.tsx
@@ -35,9 +35,11 @@ export function Preview({
         name: __target.name,
         entry: __target,
       };
-      const build_config = {
+      const build_config: config.BuildConfiguration = {
         ...config.default_build_configuration,
         disable_components: true,
+        disable_detection: true,
+        disable_flags_support: true,
       };
 
       // ----- for preview -----
@@ -95,8 +97,7 @@ export function Preview({
     <VanillaRunner
       key={preview.scaffold.raw}
       style={{
-        borderRadius: 4,
-        boxShadow: "0px 0px 48px #00000020",
+        borderRadius: 1,
       }}
       source={preview.scaffold.raw}
       width="100%"
diff --git a/packages/builder-config-preset/index.ts b/packages/builder-config-preset/index.ts
@@ -58,6 +58,9 @@ export const vanilla_presets = {
   vanilla_default: <config.VanillaFrameworkConfig>{
     framework: Framework.vanilla,
     language: Language.html,
+    imgage_alt: {
+      no_alt: true,
+    },
   },
 };
 
diff --git a/packages/builder-config/configure/build-config.ts b/packages/builder-config/configure/build-config.ts
@@ -15,6 +15,18 @@ export interface BuildConfiguration {
    * @default false
    */
   disable_components?: boolean;
+
+  /**
+   * if disabled(true), we won't use detection for buttons, icons, and other widgets.
+   * @default false
+   */
+  disable_detection?: boolean;
+
+  /**
+   * if disabled(true), we won't read flags annotations.
+   * @default false
+   */
+  disable_flags_support?: boolean;
 }
 
 export const default_build_configuration: BuildConfiguration = {
diff --git a/packages/builder-config/configure/framework-config.ts b/packages/builder-config/configure/framework-config.ts
@@ -1,19 +1,16 @@
 import { Language } from "@grida/builder-platform-types";
 import type { ReactFrameworkConfig } from "../framework-react";
+import type { VanillaFrameworkConfig } from "../framework-vanilla";
 
 export type FrameworkConfig =
   | ReactFrameworkConfig
   | FlutterFrameworkConfig
   | VanillaFrameworkConfig;
 
 export type { ReactFrameworkConfig };
+export type { VanillaFrameworkConfig };
 
 export interface FlutterFrameworkConfig {
   framework: "flutter";
   language: Language.dart;
 }
-
-export interface VanillaFrameworkConfig {
-  framework: "vanilla";
-  language: Language.html;
-}
diff --git a/packages/builder-config/framework-vanilla/index.ts b/packages/builder-config/framework-vanilla/index.ts
@@ -1,3 +1,10 @@
+import { Language } from "@grida/builder-platform-types";
 import { ComponentOutput } from "../output";
-
+import type { WebImgAltConfig } from "../platform-web/web-img-alt";
 export interface VanillaComponentOutput extends ComponentOutput {}
+
+export interface VanillaFrameworkConfig {
+  framework: "vanilla";
+  language: Language.html;
+  imgage_alt: WebImgAltConfig;
+}
diff --git a/packages/builder-config/platform-web/web-img-alt.ts b/packages/builder-config/platform-web/web-img-alt.ts
@@ -0,0 +1,6 @@
+export interface WebImgAltConfig {
+  /**
+   * if no alt set to true, the alt will be removed from image (web) wich will no longer show broken image.
+   */
+  no_alt?: boolean;
+}
diff --git a/packages/builder-web-core/widgets-native/html-image/index.ts b/packages/builder-web-core/widgets-native/html-image/index.ts
@@ -28,7 +28,7 @@ export class ImageElement extends SelfClosingContainer {
     super({ key });
     assert(src !== undefined, "ImageElement requires src");
     this.src = src;
-    this.alt = alt || `image of ${key.name}`;
+    this.alt = alt;
     this.width = width;
     this.height = height;
   }
@@ -44,19 +44,19 @@ export class ImageElement extends SelfClosingContainer {
   }
 
   jsxConfig(): StylableJSXElementConfig {
+    const attributes = [
+      this.src &&
+        new JSXAttribute(
+          "src",
+          new StringLiteral(this.src || image_smallest_fallback_source_base_64)
+        ),
+      !!!this.alt && new JSXAttribute("alt", new StringLiteral(this.alt)),
+    ];
+
     return <StylableJSXElementConfig>{
       type: "tag-and-attr",
       tag: JSX.identifier("img"),
-      attributes: [
-        this.src &&
-          new JSXAttribute(
-            "src",
-            new StringLiteral(
-              this.src || image_smallest_fallback_source_base_64
-            )
-          ),
-        this.alt && new JSXAttribute("alt", new StringLiteral(this.alt)),
-      ],
+      attributes: attributes,
     };
   }
 }
diff --git a/packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts b/packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts
@@ -32,7 +32,7 @@ export function finalizeReactReusable_StyledComponents__Experimental({
 
   const token = hanlde(tree);
   console.log("from-reusable-widget-tree::token", { token, tree });
-  const webwi = buildWebWidgetFromTokens(token);
+  const webwi = buildWebWidgetFromTokens(token, {});
   console.log("from-reusable-widget-tree::web-widget", webwi);
   const builder = new ReactStyledComponentsBuilder({
     entry: webwi,
diff --git a/packages/designto-code/universal/design-to-code.ts b/packages/designto-code/universal/design-to-code.ts
@@ -10,7 +10,10 @@ import {
 } from "@code-features/assets";
 import { BaseImageRepositories } from "@design-sdk/core/assets-repository";
 import { k } from "@web-builder/core";
-import { default_tokenizer_config } from "@designto/token/config";
+import {
+  default_tokenizer_config,
+  TokenizerConfig,
+} from "@designto/token/config";
 import { default_build_configuration } from "@designto/config";
 import { reusable } from "@code-features/component";
 import assert from "assert";
@@ -52,7 +55,10 @@ export async function designToCode({
   }
 
   // post token processing
-  let tokenizer_config = { ...default_tokenizer_config, id: input.id };
+  let tokenizer_config: TokenizerConfig = {
+    ...default_tokenizer_config,
+    id: input.id,
+  };
   if (build_config.force_root_widget_fixed_size_no_scroll) {
     tokenizer_config.custom_wrapping_provider = (w, n, d) => {
       if (n.id === input.entry.id) {
@@ -64,6 +70,15 @@ export async function designToCode({
       return false;
     };
   }
+
+  if (build_config.disable_detection) {
+    tokenizer_config.disable_detection = true;
+  }
+
+  if (build_config.disable_flags_support) {
+    tokenizer_config.disable_flags_support = true;
+  }
+
   const vanilla_token = tokenize(input.entry, tokenizer_config);
 
   // post token processing for componentization
@@ -236,7 +251,10 @@ export async function designToVanilla({
   vanilla_config: config.VanillaFrameworkConfig;
   asset_config?: AssetsConfig;
 }): Promise<output.ICodeOutput> {
-  const vanillawidget = tovanilla.buildVanillaWidget(input.widget);
+  const vanillawidget = tovanilla.buildVanillaWidget(
+    input.widget,
+    vanilla_config
+  );
   const res = tovanilla.buildVanillaFile(vanillawidget);
 
   // ------------------------------------------------------------------------
diff --git a/packages/designto-react/app/index.ts b/packages/designto-react/app/index.ts
@@ -37,7 +37,7 @@ export function buildReactWidget(widget: Widget) {
     "A valid reflect widget manifest should be passed as an input. none was passed."
   );
 
-  return buildWebWidgetFromTokens(widget);
+  return buildWebWidgetFromTokens(widget, {});
 }
 
 export function buildReusableReactApp__Experimental({
diff --git a/packages/designto-token/config/config.ts b/packages/designto-token/config/config.ts
@@ -19,6 +19,11 @@ export interface TokenizerConfig {
    */
   disable_flags_support?: boolean;
 
+  /**
+   * @default false - detection support enabled by default.
+   */
+  disable_detection?: boolean;
+
   /**
    * stops the tokenizer when max depth is reached relative to starter (root) node.
    * @default "infinite"
diff --git a/packages/designto-token/config/default-config.ts b/packages/designto-token/config/default-config.ts
@@ -4,6 +4,7 @@ export const default_tokenizer_config: TokenizerConfig = <TokenizerConfig>{
   // temporarily ignoring since masking is not supported yet.
   sanitizer_ignore_masking_node: true,
   disable_flags_support: false,
+  disable_detection: false,
   max_depth: "infinite",
   max_each_depth: "infinite",
   should_break: () => false,
diff --git a/packages/designto-token/main.ts b/packages/designto-token/main.ts
@@ -150,25 +150,29 @@ function handleNode(
   // --------------------------- Detected tokens -----------------------------
   // -------------------------------------------------------------------------
 
-  // - image -
+  // - image - // image detection is always enabled exceptionally.
+  // TODO: separate image detection with static logic based and the smart one.
   const _detect_if_image = detectIf.image(node);
   if (_detect_if_image.result) {
     return tokenizeGraphics.fromImage(node, _detect_if_image.data);
   }
 
-  // - icon -
-  const _detect_if_icon = detectIf.icon(node);
-  if (_detect_if_icon.result) {
-    return tokenizeGraphics.fromIcon(node, _detect_if_icon.data);
-  }
-
-  // - button -
-  // TODO: temporarily disabled - remove comment after button widget is ready
-  // const _detect_if_button = detectIf.button(node);
-  // if (_detect_if_button.result) {
-  //   return tokenizeButton.fromManifest(node, _detect_if_button.data);
-  // }
+  if (config.disable_detection) {
+    // skip detection
+  } else {
+    // - icon -
+    const _detect_if_icon = detectIf.icon(node);
+    if (_detect_if_icon.result) {
+      return tokenizeGraphics.fromIcon(node, _detect_if_icon.data);
+    }
 
+    // - button -
+    // TODO: temporarily disabled - remove comment after button widget is ready
+    // const _detect_if_button = detectIf.button(node);
+    // if (_detect_if_button.result) {
+    //   return tokenizeButton.fromManifest(node, _detect_if_button.data);
+    // }
+  }
   // -------------------------------------------------------------------------
   // --------------------------- Detected tokens -----------------------------
   // -------------------------------------------------------------------------
diff --git a/packages/designto-vanilla/index.ts b/packages/designto-vanilla/index.ts
@@ -24,10 +24,15 @@ export function buildVanillaFile(
   };
 }
 
-export function buildVanillaWidget(widget: Widget) {
+export function buildVanillaWidget(
+  widget: Widget,
+  config: config.VanillaFrameworkConfig
+) {
   if (!widget) {
     throw "A valid reflect widget manifest should be passed as an input. none was passed.";
   }
 
-  return buildWebWidgetFromTokens(widget);
+  return buildWebWidgetFromTokens(widget, {
+    img_no_alt: config.imgage_alt.no_alt,
+  });
 }
diff --git a/packages/designto-web/tokens-to-web-widget/index.ts b/packages/designto-web/tokens-to-web-widget/index.ts
@@ -19,22 +19,38 @@ import { IWHStyleWidget } from "@reflect-ui/core";
 import * as reusable from "@code-features/component/tokens";
 import assert from "assert";
 
-export function buildWebWidgetFromTokens(widget: core.Widget): JsxWidget {
-  const composed = compose(widget, {
-    is_root: true,
-  });
+interface WebWidgetComposerConfig {
+  /**
+   * set alt to "" so when image is broken the broken image symbol won't show.
+   */
+  img_no_alt?: boolean;
+}
+
+export function buildWebWidgetFromTokens(
+  widget: core.Widget,
+  config: WebWidgetComposerConfig
+): JsxWidget {
+  const composed = compose(
+    widget,
+    {
+      is_root: true,
+    },
+    config
+  );
 
   return composed;
 }
 
 export type Composer = (
   widget: core.Widget,
-  context?: { is_root: boolean }
+  context?: { is_root: boolean },
+  config?: WebWidgetComposerConfig
 ) => StylableJsxWidget;
 
 function compose<T extends JsxWidget>(
   widget: core.Widget,
-  context: { is_root: boolean }
+  context: { is_root: boolean },
+  config: WebWidgetComposerConfig
 ): T {
   assert(widget, "input widget is required");
   const handleChildren = <T extends JsxWidget>(
@@ -46,7 +62,7 @@ function compose<T extends JsxWidget>(
   };
 
   const handleChild = <T extends JsxWidget>(child: core.Widget): T => {
-    return compose(child, { ...context, is_root: false });
+    return compose(child, { ...context, is_root: false }, config);
   };
 
   const _remove_width_height_if_root_wh = {
@@ -160,6 +176,7 @@ function compose<T extends JsxWidget>(
   } else if (widget instanceof core.ImageWidget) {
     thisWebWidget = new web.ImageElement({
       ...widget,
+      alt: config.img_no_alt ? "" : `image of ${_key.name}`,
       src: widget.src,
       key: _key,
     });

Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,7 @@ export function VisualContentArea({ fileid }: { fileid: string }) {`
`49`	`49`	`}}`
`50`	`50`	`>`
`51`	`51`	`<Canvas`
	`52`	`+ key={selectedPage}`
`52`	`53`	`selectedNodes={selectedNodes.filter(Boolean)}`
`53`	`54`	`highlightedLayer={highlightedLayer}`
`54`	`55`	`onSelectNode={(node) => {`