add youtube & google maps support with -x-flags

softmarshmallow · softmarshmallow · commit d2534a18e00a · 2022-03-29T16:30:22.000+09:00
diff --git a/packages/builder-web-core/widgets-native/html-iframe-googlemaps/index.ts b/packages/builder-web-core/widgets-native/html-iframe-googlemaps/index.ts
@@ -12,13 +12,15 @@ export class HtmlIframeGoogleMaps extends HtmlIframe {
     key,
     loading = "lazy",
     referrerpolicy = "no-referrer-when-downgrade",
+    sandbox = "allow-scripts",
     q,
     ...rest
   }: { key: WidgetKey } & GoogleMapsProps & IWHStyleWidget) {
     super({
       key,
       ...rest,
       loading,
+      sandbox,
       referrerpolicy,
       src: gmapurl(q),
     });
@@ -31,11 +33,15 @@ function gmapurl(q: string, apikey?: string): string {
   query.set("q", q);
   if (apikey) {
     query.set("key", apikey);
-  }
-
-  // build url
-  const url = new URL("https://www.google.com/maps/embed/v1/place");
-  url.search = query.toString();
+    // build url
+    const url = new URL("https://www.google.com/maps/embed/v1/place");
+    url.search = query.toString();
 
-  return url.toString();
+    return url.toString();
+  } else {
+    query.set("output", "embed");
+    const url = new URL("https://maps.google.com/maps");
+    url.search = query.toString();
+    return url.toString();
+  }
 }
diff --git a/packages/builder-web-core/widgets-native/html-iframe-youtube/index.ts b/packages/builder-web-core/widgets-native/html-iframe-youtube/index.ts
@@ -12,13 +12,15 @@ export class HtmlIframeYoutube extends HtmlIframe {
     key,
     loading = "lazy",
     referrerpolicy = "no-referrer-when-downgrade",
+    sandbox = ["allow-scripts", "allow-same-origin"],
     video,
     ...rest
   }: { key: WidgetKey } & YoutubeProps & IWHStyleWidget) {
     super({
       key,
       ...rest,
       loading,
+      sandbox,
       referrerpolicy,
       src: yturl(video),
     });
diff --git a/packages/builder-web-core/widgets-native/html-iframe/index.ts b/packages/builder-web-core/widgets-native/html-iframe/index.ts
@@ -122,7 +122,7 @@ export class HtmlIframe extends Container implements IIframeProps {
       this.height &&
         new JSXAttribute("height", new StringLiteral(css.length(this.height))),
 
-      this.sandbox.length > 0 &&
+      this.sandbox?.length > 0 &&
         new JSXAttribute(
           "sandbox",
           new StringLiteral(
diff --git a/packages/builder-web-core/widgets-native/index.ts b/packages/builder-web-core/widgets-native/index.ts
@@ -12,6 +12,7 @@ export * from "./html-input";
 export { HtmlIframe as Iframe } from "./html-iframe";
 export { HtmlIframeGoogleMaps as GoogleMaps } from "./html-iframe-googlemaps";
 export { HtmlIframeOpenStreetMap as OpenStreetMap } from "./html-iframe-osm";
+export { HtmlIframeYoutube as Youtube } from "./html-iframe-youtube";
 export { HtmlIframeFigma as EmbedFigma } from "./html-iframe-figma";
 export * from "./error-widget";
 
diff --git a/packages/designto-token/support-flags/index.ts b/packages/designto-token/support-flags/index.ts
@@ -18,6 +18,10 @@ import { tokenize_flagged_button } from "./token-button";
 import { tokenize_flagged_slider } from "./token-slider";
 import { tokenize_flagged_progress } from "./token-progress";
 
+import { tokenize_flagged_google_maps_view } from "./token-x-google-maps-view";
+import { tokenize_gradient_direction_from_angle } from "../token-gradient";
+import { tokenize_flagged_youtube_view } from "./token-x-youtube-view";
+
 export default function handleWithFlags(node: ReflectSceneNode) {
   const flags = parse(node.name);
   return _handle_with_flags(node, flags);
@@ -63,6 +67,22 @@ function _handle_with_flags(node, flags: FlagsParseResult) {
   }
   // #endregion
 
+  // #region exetnded views
+  if (flags.__meta?.contains_x_google_maps_view_flag) {
+    return tokenize_flagged_google_maps_view(
+      node,
+      flags[keys.flag_key__x_google_maps_view]
+    );
+  }
+
+  if (flags.__meta?.contains_x_youtube_view_flag) {
+    return tokenize_flagged_youtube_view(
+      node,
+      flags[keys.flag_key__x_youtube_view]
+    );
+  }
+  // #end exetnded views
+
   // #region element altering flags
   // heading
   const heading_flag_alias =
diff --git a/packages/designto-token/support-flags/token-x-figma-embed-view/index.ts b/packages/designto-token/support-flags/token-x-figma-embed-view/index.ts
diff --git a/packages/designto-token/support-flags/token-x-google-maps-view/index.ts b/packages/designto-token/support-flags/token-x-google-maps-view/index.ts
@@ -0,0 +1,57 @@
+import type {
+  ReflectFrameNode,
+  ReflectGroupNode,
+  ReflectRectangleNode,
+  ReflectSceneNode,
+} from "@design-sdk/figma-node";
+import type { Container } from "@reflect-ui/core";
+import { tokenizeLayout } from "../../token-layout";
+import { tokenizeContainer } from "../../token-container";
+import { unwrappedChild } from "../../wrappings";
+import type { XGoogleMapsFlag } from "@code-features/flags";
+import { WrappingContainer, XGoogleMapsView } from "../../tokens";
+import assert from "assert";
+import { keyFromNode } from "../../key";
+
+export function tokenize_flagged_google_maps_view(
+  node: ReflectSceneNode,
+  flag: XGoogleMapsFlag
+) {
+  try {
+    const q = flag.value;
+    node = validate_input(node);
+    const _key = keyFromNode(node);
+
+    const container = unwrappedChild(
+      node.type === "RECTANGLE"
+        ? tokenizeContainer.fromRectangle(node)
+        : tokenizeLayout.fromFrameOrGroup(node, [], { is_root: false }, {})
+    ) as Container;
+
+    return new WrappingContainer({
+      ...container,
+      key: keyFromNode(node),
+      child: new XGoogleMapsView({
+        key: _key,
+        ...container,
+        q: q,
+      }),
+    });
+  } catch (e) {
+    throw new Error(`failed to tokenize google maps view: ${e.message}`);
+  }
+}
+
+type GoogleMapsViewCompatNodeType =
+  | ReflectFrameNode
+  | ReflectGroupNode
+  | ReflectRectangleNode;
+
+function validate_input(node: ReflectSceneNode): GoogleMapsViewCompatNodeType {
+  assert(
+    node.type === "FRAME" || node.type === "GROUP" || node.type === "RECTANGLE",
+    `google maps view target input must be a frame, group or rectangle, but "${node.type}" was given`
+  );
+
+  return node;
+}
diff --git a/packages/designto-token/support-flags/token-x-youtube-view/index.ts b/packages/designto-token/support-flags/token-x-youtube-view/index.ts
@@ -0,0 +1,57 @@
+import type {
+  ReflectFrameNode,
+  ReflectGroupNode,
+  ReflectRectangleNode,
+  ReflectSceneNode,
+} from "@design-sdk/figma-node";
+import type { Container } from "@reflect-ui/core";
+import { tokenizeLayout } from "../../token-layout";
+import { tokenizeContainer } from "../../token-container";
+import { unwrappedChild } from "../../wrappings";
+import type { XYoutubeFlag } from "@code-features/flags";
+import { WrappingContainer, XYoutubeView } from "../../tokens";
+import assert from "assert";
+import { keyFromNode } from "../../key";
+
+export function tokenize_flagged_youtube_view(
+  node: ReflectSceneNode,
+  flag: XYoutubeFlag
+) {
+  try {
+    const videoid = flag.value;
+    node = validate_input(node);
+    const _key = keyFromNode(node);
+
+    const container = unwrappedChild(
+      node.type === "RECTANGLE"
+        ? tokenizeContainer.fromRectangle(node)
+        : tokenizeLayout.fromFrameOrGroup(node, [], { is_root: false }, {})
+    ) as Container;
+
+    return new WrappingContainer({
+      ...container,
+      key: keyFromNode(node),
+      child: new XYoutubeView({
+        key: _key,
+        ...container,
+        video: videoid,
+      }),
+    });
+  } catch (e) {
+    throw new Error(`failed to tokenize google maps view: ${e.message}`);
+  }
+}
+
+type YoutubeViewCompatNodeType =
+  | ReflectFrameNode
+  | ReflectGroupNode
+  | ReflectRectangleNode;
+
+function validate_input(node: ReflectSceneNode): YoutubeViewCompatNodeType {
+  assert(
+    node.type === "FRAME" || node.type === "GROUP" || node.type === "RECTANGLE",
+    `youtube view target input must be a frame, group or rectangle, but "${node.type}" was given`
+  );
+
+  return node;
+}
diff --git a/packages/designto-token/tokens/index.ts b/packages/designto-token/tokens/index.ts
@@ -1,2 +1,7 @@
 export * from "./stretched";
 export * from "./wrapping-container";
+
+export * from "./x-figma-embed-view";
+export * from "./x-google-maps-view";
+export * from "./x-osm-view";
+export * from "./x-youtube-view";
diff --git a/packages/designto-token/tokens/x-figma-embed-view/index.ts b/packages/designto-token/tokens/x-figma-embed-view/index.ts
@@ -0,0 +1,8 @@
+import { Container, Widget, WidgetKey } from "@reflect-ui/core";
+
+export class XFigmaEmbedView extends Container {
+  readonly _type = "x/figma-embed-view";
+  constructor({ key }: { key: WidgetKey }) {
+    super({ key });
+  }
+}
diff --git a/packages/designto-token/tokens/x-google-maps-view/index.ts b/packages/designto-token/tokens/x-google-maps-view/index.ts
@@ -0,0 +1,14 @@
+import { Container, WidgetKey } from "@reflect-ui/core";
+
+export class XGoogleMapsView extends Container {
+  readonly _type = "x/google-maps-view";
+  readonly q: string;
+  constructor({
+    key,
+    q = "Mountain View, California, United States", // default fallback
+  }: { key: WidgetKey } & { q?: string }) {
+    super({ key });
+
+    this.q = q;
+  }
+}
diff --git a/packages/designto-token/tokens/x-osm-view/index.ts b/packages/designto-token/tokens/x-osm-view/index.ts
@@ -0,0 +1,8 @@
+import { Container, Widget, WidgetKey } from "@reflect-ui/core";
+
+export class XOSMView extends Container {
+  readonly _type = "x/osm-view";
+  constructor({ key }: { key: WidgetKey }) {
+    super({ key });
+  }
+}
diff --git a/packages/designto-token/tokens/x-youtube-view/index.ts b/packages/designto-token/tokens/x-youtube-view/index.ts
@@ -0,0 +1,16 @@
+import { Container, WidgetKey } from "@reflect-ui/core";
+
+export class XYoutubeView extends Container {
+  readonly _type = "x/youtube-view";
+  readonly video: string;
+  constructor({
+    key,
+    video = "LOZuxwVk7TU", // placeholder video - toxic by Britney Spears
+  }: { key: WidgetKey } & {
+    video: string;
+  }) {
+    super({ key });
+
+    this.video = video;
+  }
+}
diff --git a/packages/designto-web/tokens-to-web-widget/compose-xtended-views.ts b/packages/designto-web/tokens-to-web-widget/compose-xtended-views.ts
@@ -0,0 +1,31 @@
+import * as core from "@reflect-ui/core";
+import * as web from "@web-builder/core";
+import { tokens as special } from "@designto/token";
+
+export function compose_xtended_views(
+  key,
+  widget:
+    | special.XFigmaEmbedView
+    | special.XGoogleMapsView
+    | special.XOSMView
+    | special.XYoutubeView,
+  container?: core.Container
+) {
+  if (widget instanceof special.XFigmaEmbedView) {
+    throw new Error("not implemented");
+  }
+
+  if (widget instanceof special.XGoogleMapsView) {
+    return new web.GoogleMaps({ ...(container ?? {}), ...widget, key });
+  }
+
+  if (widget instanceof special.XOSMView) {
+    throw new Error("not implemented");
+  }
+
+  if (widget instanceof special.XYoutubeView) {
+    return new web.Youtube({ ...(container ?? {}), ...widget, key });
+  }
+
+  throw new Error("not implemented");
+}
diff --git a/packages/designto-web/tokens-to-web-widget/index.ts b/packages/designto-web/tokens-to-web-widget/index.ts
@@ -20,6 +20,7 @@ import { compose_unwrapped_button } from "./compose-unwrapped-button";
 import { compose_unwrapped_slider } from "./compose-unwrapped-slider";
 import { compose_unwrapped_progress } from "./compose-unwrapped-progress";
 import { compose_instanciation } from "./compose-instanciation";
+import { compose_xtended_views } from "./compose-xtended-views";
 import { IWHStyleWidget } from "@reflect-ui/core";
 import * as reusable from "@code-features/component/tokens";
 import assert from "assert";
@@ -224,6 +225,14 @@ function compose<T extends JsxWidget>(
         break;
       }
     }
+  } else if (
+    widget instanceof special.XFigmaEmbedView ||
+    widget instanceof special.XGoogleMapsView ||
+    widget instanceof special.XOSMView ||
+    widget instanceof special.XYoutubeView
+  ) {
+    // xtended views
+    thisWebWidget = compose_xtended_views(_key, widget);
   }
 
   // #region component widgets
@@ -257,12 +266,25 @@ function compose<T extends JsxWidget>(
       thisWebWidget = compose_unwrapped_slider(_key, widget.child, widget);
     } else if (widget.child instanceof core.ProgressIndicator) {
       thisWebWidget = compose_unwrapped_progress(_key, widget.child, widget);
-    } else {
+    }
+
+    // --- xtended views
+    else if (
+      widget.child instanceof special.XFigmaEmbedView ||
+      widget.child instanceof special.XGoogleMapsView ||
+      widget.child instanceof special.XOSMView ||
+      widget.child instanceof special.XYoutubeView
+    ) {
+      // xtended views
+      thisWebWidget = compose_xtended_views(_key, widget.child, widget);
+    }
+    // --- --- --- --- ---
+    // #endregion
+    else {
       throw new Error(
         `Unsupported web widget type: ${widget.child.constructor.name}`
       );
     }
-    // #endregion
   }
   // #endregion
 
