add react-native-svg support (incomplete)

softmarshmallow · softmarshmallow · commit f592616e404b · 2022-02-19T21:31:53.000+09:00
diff --git a/packages/builder-config/framework-reactnative/reactnative-config-svg.ts b/packages/builder-config/framework-reactnative/reactnative-config-svg.ts
@@ -8,4 +8,5 @@ export type ReactNativeSvgConfig = RNSvgModuleConfig;
  */
 interface RNSvgModuleConfig {
   module: "react-native-svg";
+  prefer_mode: "svg-xml" | "svg-with-path";
 }
diff --git a/packages/builder-react-native/rn-svg/README.md b/packages/builder-react-native/rn-svg/README.md
@@ -1 +1,47 @@
 # react-native-svg
+
+## Mode - xml
+
+**Example**:
+
+```tsx
+import * as React from "react";
+import { SvgXml } from "react-native-svg";
+
+const xml = `
+  <svg width="32" height="32" viewBox="0 0 32 32">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      fill="url(#gradient)"
+      d="M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0H4ZM17 6C17 5.44772 17.4477 5 18 5H20C20.5523 5 21 5.44772 21 6V25C21 25.5523 20.5523 26 20 26H18C17.4477 26 17 25.5523 17 25V6ZM12 11C11.4477 11 11 11.4477 11 12V25C11 25.5523 11.4477 26 12 26H14C14.5523 26 15 25.5523 15 25V12C15 11.4477 14.5523 11 14 11H12ZM6 18C5.44772 18 5 18.4477 5 19V25C5 25.5523 5.44772 26 6 26H8C8.55228 26 9 25.5523 9 25V19C9 18.4477 8.55228 18 8 18H6ZM24 14C23.4477 14 23 14.4477 23 15V25C23 25.5523 23.4477 26 24 26H26C26.5523 26 27 25.5523 27 25V15C27 14.4477 26.5523 14 26 14H24Z"
+    />
+    <defs>
+      <linearGradient
+        id="gradient"
+        x1="0"
+        y1="0"
+        x2="8.46631"
+        y2="37.3364"
+        gradient-units="userSpaceOnUse">
+        <stop offset="0" stop-color="#FEA267" />
+        <stop offset="1" stop-color="#E75A4C" />
+      </linearGradient>
+    </defs>
+  </svg>
+`;
+
+export default () => <SvgXml xml={xml} width="100%" height="100%" />;
+```
+
+### Mode - SvgWithPath `<Svg><Path d=""/></Svg>`
+
+```tsx
+<Svg height="100" width="100">
+  <Path
+    d="M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 10 L11 22 L77 95 L20 25"
+    fill="none"
+    stroke="red"
+  />
+</Svg>
+```
diff --git a/packages/builder-react-native/rn-svg/index.ts b/packages/builder-react-native/rn-svg/index.ts
@@ -0,0 +1,2 @@
+export * from "./rn-svg-with-path";
+export * from "./rn-svg-xml";
diff --git a/packages/builder-react-native/rn-svg/rn-svg-with-path.ts b/packages/builder-react-native/rn-svg/rn-svg-with-path.ts
@@ -0,0 +1,52 @@
+import {
+  StylableJsxWidget,
+  SvgElement,
+  UnstylableJSXElementConfig,
+  WidgetKey,
+} from "@web-builder/core";
+import { JSX, JSXAttribute, StringLiteral } from "coli";
+
+export class SvgWithPathElement extends SvgElement {
+  path({ fill }: { fill: string | false }) {
+    return <StylableJsxWidget>{
+      key: new WidgetKey(`${this.key.id}.svg-path`, "svg-path"),
+      styleData: () => null,
+      jsxConfig: () => {
+        // from `import Svg, { Path } from "react-native-svg";`
+        const _tag = JSX.identifier("Path");
+        return {
+          type: "static-tree",
+          tree: JSX.tag("Path", {
+            selfClosing: true,
+            attributes: [
+              fill &&
+                new JSXAttribute("fill", new StringLiteral(fill || "current")),
+              new JSXAttribute("d", new StringLiteral(this.data ?? "")),
+            ],
+          }).make(),
+        };
+      },
+    };
+  }
+
+  private get childConfig() {
+    // single "Path" element make by above `path` method
+    return this.children[0].jsxConfig() as UnstylableJSXElementConfig;
+  }
+
+  jsxConfig(): UnstylableJSXElementConfig {
+    // from `import Svg from "react-native-svg";`
+    const tree = JSX.tag("Svg", {
+      children: [this.childConfig.tree],
+      attributes: [
+        new JSXAttribute("width", new StringLiteral("100%")),
+        new JSXAttribute("height", new StringLiteral("100%")),
+      ],
+    }).make();
+
+    return {
+      type: "static-tree",
+      tree: tree,
+    };
+  }
+}
diff --git a/packages/builder-react-native/rn-svg/rn-svg-xml.ts b/packages/builder-react-native/rn-svg/rn-svg-xml.ts
@@ -0,0 +1,89 @@
+import assert from "assert";
+import {
+  JSX,
+  JSXAttribute,
+  JSXExpression,
+  StringLiteral,
+  TemplateLiteral,
+} from "coli";
+import {
+  StylableJSXElementConfig,
+  WidgetKey,
+  k,
+  UnstylableJSXElementConfig,
+} from "@web-builder/core";
+import * as css from "@web-builder/styles";
+import type { ViewStyle } from "react-native";
+import { SelfClosingContainer } from "../rn-widgets";
+
+/**
+ * Makes Svg element for react-native with `import { SvgXml } from 'react-native-svg';`
+ * 
+ * dependency:
+ * - [`react-native-svg`](https://github.com/react-native-svg/react-native-svg)
+ * 
+ * ```tsx
+ * // Example
+ * import * as React from 'react';
+import { SvgXml } from 'react-native-svg';
+
+const xml = `
+  <svg width="32" height="32" viewBox="0 0 32 32">
+    <path
+      d="M4 0C1.79086 .... 26 14H24Z"
+    />
+  </svg>
+`;
+
+export default () => <SvgXml xml={xml} width="100%" height="100%" />;
+ * ```
+ */
+export class SvgXmlElement extends SelfClosingContainer {
+  _type = "rn-svg-xml";
+  readonly xml: string;
+  width: number;
+  height: number;
+
+  constructor({
+    key,
+    xml,
+    width,
+    height,
+  }: {
+    key: WidgetKey;
+    xml: string;
+    width?: number;
+    height?: number;
+  }) {
+    super({ key });
+    assert(xml !== undefined, "SvgXmlElement requires xml data");
+    this.xml = xml;
+    this.width = width;
+    this.height = height;
+  }
+
+  styleData(): ViewStyle {
+    return {
+      ...super.styleData(),
+      width: css.px(this.width),
+      height: css.px(this.height),
+    };
+  }
+
+  jsxConfig(): UnstylableJSXElementConfig {
+    return <UnstylableJSXElementConfig>{
+      type: "static-tree",
+      //   // `SvgXml` from `import { SvgXml } from 'react-native-svg';`
+      tree: JSX.tag("SvgXml", {
+        attributes: [
+          new JSXAttribute("width", new StringLiteral("100%")),
+          new JSXAttribute("height", new StringLiteral("100%")),
+          new JSXAttribute(
+            "xml",
+            new JSXExpression(new TemplateLiteral(this.xml))
+          ),
+        ],
+      }),
+    };
+  }
+}
diff --git a/packages/builder-react-native/rn-widgets/rn-container/index.ts b/packages/builder-react-native/rn-widgets/rn-container/index.ts
@@ -3,6 +3,7 @@ import {
   StylableJSXElementConfig,
   WidgetKey,
   JsxWidget,
+  UnstylableJSXElementConfig,
 } from "@web-builder/core";
 import {
   Background,
@@ -92,9 +93,9 @@ export class Container
     };
   }
 
-  jsxConfig(): StylableJSXElementConfig {
+  jsxConfig(): StylableJSXElementConfig | UnstylableJSXElementConfig {
     // TODO: add dependency loading
-    return {
+    return <StylableJSXElementConfig>{
       type: "tag-and-attr",
       tag: JSX.identifier("View"),
     };
diff --git a/packages/builder-react-native/rn-widgets/rn-svg/index.ts b/packages/builder-react-native/rn-widgets/rn-svg/index.ts
@@ -1 +1,28 @@
-export class SvgElement {}
+import { reactnative } from "@designto/config";
+import { WidgetKey } from "@web-builder/core";
+import { SvgWithPathElement, SvgXmlElement } from "../../rn-svg";
+
+export function SvgElement(
+  p: {
+    key: WidgetKey;
+    width: number;
+    height: number;
+    data: string;
+    fill;
+    stroke?;
+  },
+  {
+    config,
+  }: {
+    config: reactnative.ReactNativeSvgConfig;
+  }
+) {
+  switch (config.prefer_mode) {
+    case "svg-with-path":
+      return new SvgWithPathElement(p);
+    case "svg-xml":
+      return new SvgXmlElement({ ...p, xml: p.data });
+    default:
+      return new SvgWithPathElement(p);
+  }
+}
diff --git a/packages/builder-web-core/widgets-native/html-svg/index.ts b/packages/builder-web-core/widgets-native/html-svg/index.ts
@@ -53,7 +53,7 @@ export class SvgElement extends StylableJsxWidget {
    */
   readonly stroke?: Color;
 
-  readonly children;
+  readonly children: StylableJsxWidget[];
 
   constructor(p: {
     key: WidgetKey;
@@ -81,39 +81,40 @@ export class SvgElement extends StylableJsxWidget {
     this.children = this._init_children();
   }
 
-  private _init_children() {
-    const path_with_fill = (fill: string | false) =>
-      <StylableJsxWidget>{
-        key: new WidgetKey(`${this.key.id}.svg-path`, "svg-path"),
-        styleData: () => null,
-        jsxConfig: () => {
-          const _tag = JSX.identifier("path");
-          return {
-            tag: _tag,
-            type: "tag-and-attr",
-            attributes: [
-              fill &&
-                new JSXAttribute("fill", new StringLiteral(fill || "current")),
-              new JSXAttribute("d", new StringLiteral(this.data ?? "")),
-            ],
-          };
-        },
-      };
+  path({ fill }: { fill: string | false }) {
+    return <StylableJsxWidget>{
+      key: new WidgetKey(`${this.key.id}.svg-path`, "svg-path"),
+      styleData: () => null,
+      jsxConfig: () => {
+        const _tag = JSX.identifier("path");
+        return {
+          tag: _tag,
+          type: "tag-and-attr",
+          attributes: [
+            fill &&
+              new JSXAttribute("fill", new StringLiteral(fill || "current")),
+            new JSXAttribute("d", new StringLiteral(this.data ?? "")),
+          ],
+        };
+      },
+    };
+  }
 
+  private _init_children() {
     if (!this.fill) {
-      return [path_with_fill("transparent")];
+      return [this.path({ fill: "transparent" })];
     }
 
     if (Array.isArray(this.fill)) {
       console.error("multiple fills for svg path is not supported.");
     } else {
       switch (this.fill.type) {
         case "solid-color": {
-          return [path_with_fill(css.color(this.fill as Color))];
+          return [this.path({ fill: css.color(this.fill as Color) })];
         }
         case "graphics": {
           console.error("graphics fill for svg not supported.");
-          return [path_with_fill("black")];
+          return [this.path({ fill: "black" })];
         }
         case "gradient": {
           switch (this.fill._type) {
@@ -168,11 +169,11 @@ export class SvgElement extends StylableJsxWidget {
                 },
               };
 
-              return [fill, path_with_fill(`url(#${fillid})`)];
+              return [fill, this.path({ fill: `url(#${fillid})` })];
             }
             default: {
               console.error("unsupported gradient type for svg path.");
-              return [path_with_fill("black")];
+              return [this.path({ fill: "black" })];
             }
           }
         }
@@ -199,8 +200,8 @@ export class SvgElement extends StylableJsxWidget {
     };
   }
 
-  jsxConfig(): StylableJSXElementConfig {
-    return {
+  jsxConfig(): StylableJSXElementConfig | UnstylableJSXElementConfig {
+    return <StylableJSXElementConfig>{
       type: "tag-and-attr",
       tag: JSX.identifier("svg"),
       attributes: [
diff --git a/packages/designto-react-native/tokens-to-rn-widget/index.ts b/packages/designto-react-native/tokens-to-rn-widget/index.ts
@@ -161,13 +161,21 @@ function compose<T extends JsxWidget>(
       elementPreference: widget.element_preference_experimental,
     });
   } else if (widget instanceof core.VectorWidget) {
-    // FIXME: add svg support
-    // thisRnWidget = new rn.SvgElement({
-    //   ...widget,
-    //   data: widget.data,
-    //   fill: widget.fill,
-    //   key: _key,
-    // });
+    thisRnWidget = rn.SvgElement(
+      {
+        width: widget.width,
+        height: widget.height,
+        data: widget.data,
+        fill: widget.fill,
+        key: _key,
+      },
+      {
+        config: {
+          module: "react-native-svg",
+          prefer_mode: "svg-with-path",
+        },
+      }
+    );
   } else if (widget instanceof core.ImageWidget) {
     thisRnWidget = new rn.ImageElement({
       ...widget,

Original file line number	Diff line number	Diff line change
`@@ -8,4 +8,5 @@ export type ReactNativeSvgConfig = RNSvgModuleConfig;`
`8`	`8`	`*/`
`9`	`9`	`interface RNSvgModuleConfig {`
`10`	`10`	`module: "react-native-svg";`
	`11`	`+ prefer_mode: "svg-xml" \| "svg-with-path";`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from "./rn-svg-with-path";`
	`2`	`+export * from "./rn-svg-xml";`