fix: relax input types

Author: msand

src/index.d.ts

@@ -219,7 +219,7 @@ export interface CircleProps extends CommonPathProps {
 export const Circle: React.ComponentClass<CircleProps>;
 
 export interface ClipPathProps {
-  id: string;
+  id?: string;
 }
 export const ClipPath: React.ComponentClass<ClipPathProps>;
 
@@ -249,7 +249,7 @@ export interface ImageProps
   width?: NumberProp;
   height?: NumberProp;
   xlinkHref?: ReactNative.ImageProps['source'];
-  href: ReactNative.ImageProps['source'];
+  href?: ReactNative.ImageProps['source'];
   preserveAspectRatio?: string;
   opacity?: NumberProp;
   clipPath?: string;
@@ -271,18 +271,18 @@ export interface LinearGradientProps {
   y1?: NumberProp;
   y2?: NumberProp;
   gradientUnits?: Units;
-  id: string;
+  id?: string;
 }
 export const LinearGradient: React.ComponentClass<LinearGradientProps>;
 
 export interface PathProps extends CommonPathProps {
-  d: string;
+  d?: string;
   opacity?: NumberProp;
 }
 export const Path: React.ComponentClass<PathProps>;
 
 export interface PatternProps {
-  id: string;
+  id?: string;
   x?: NumberProp;
   y?: NumberProp;
   width?: NumberProp;
@@ -297,13 +297,13 @@ export const Pattern: React.ComponentClass<PatternProps>;
 
 export interface PolygonProps extends CommonPathProps {
   opacity?: NumberProp;
-  points: string | ReadonlyArray<NumberProp>;
+  points?: string | ReadonlyArray<NumberProp>;
 }
 export const Polygon: React.ComponentClass<PolygonProps>;
 
 export interface PolylineProps extends CommonPathProps {
   opacity?: NumberProp;
-  points: string | ReadonlyArray<NumberProp>;
+  points?: string | ReadonlyArray<NumberProp>;
 }
 export const Polyline: React.ComponentClass<PolylineProps>;
 
@@ -316,7 +316,7 @@ export interface RadialGradientProps {
   cy?: NumberProp;
   r?: NumberProp;
   gradientUnits?: Units;
-  id: string;
+  id?: string;
 }
 export const RadialGradient: React.ComponentClass<RadialGradientProps>;
 
@@ -352,7 +352,7 @@ export const Svg: React.ComponentClass<SvgProps>;
 export default Svg;
 
 export interface SymbolProps {
-  id: string;
+  id?: string;
   viewBox?: string;
   preserveAspectRatio?: string;
   opacity?: NumberProp;
@@ -384,17 +384,17 @@ export const Text: React.ComponentClass<TextProps>;
 
 export interface TextPathProps extends TextSpecificProps {
   xlinkHref?: string;
-  href: string;
+  href?: string;
   startOffset?: NumberProp;
   method?: TextPathMethod;
   spacing?: TextPathSpacing;
-  midLine: TextPathMidLine;
+  midLine?: TextPathMidLine;
 }
 export const TextPath: React.ComponentClass<TextPathProps>;
 
 export interface UseProps extends CommonPathProps {
   xlinkHref?: string;
-  href: string;
+  href?: string;
   width?: NumberProp;
   height?: NumberProp;
   x?: NumberProp;
@@ -413,7 +413,7 @@ export type TMaskUnits =
   | EMaskUnits.OBJECT_BOUNDING_BOX;
 
 export interface MaskProps extends CommonPathProps {
-  id: string;
+  id?: string;
   x?: NumberProp;
   y?: NumberProp;
   width?: NumberProp;

src/xml.tsx

@@ -58,14 +58,25 @@ function missingTag() {
   return null;
 }
 
-interface AST {
+export interface AST {
   tag: string;
   children: (AST | string)[] | (ReactElement | string)[];
   props: {};
   Tag: ComponentType;
 }
 
-export function SvgAst({ ast, override }: { ast: AST; override?: Object }) {
+export type UriProps = { uri: string | null; override?: Object };
+export type UriState = { xml: string | null };
+
+export type XmlProps = { xml: string | null; override?: Object };
+export type XmlState = { ast: AST | null };
+
+export type AstProps = { ast: AST | null; override?: Object };
+
+export function SvgAst({ ast, override }: AstProps) {
+  if (!ast) {
+    return null;
+  }
   const { props, children } = ast;
   return (
     <Svg {...props} {...override}>
@@ -74,10 +85,12 @@ export function SvgAst({ ast, override }: { ast: AST; override?: Object }) {
   );
 }
 
-export function SvgXml(props: { xml: string; override?: Object }) {
+export function SvgXml(props: XmlProps) {
   const { xml, override } = props;
-  const ast = useMemo(() => xml && parse(xml), [xml]);
-  return (ast && <SvgAst ast={ast} override={override || props} />) || null;
+  const ast = useMemo<AST | null>(() => (xml !== null ? parse(xml) : null), [
+    xml,
+  ]);
+  return <SvgAst ast={ast} override={override || props} />;
 }
 
 async function fetchText(uri: string) {
@@ -87,21 +100,23 @@ async function fetchText(uri: string) {
 
 const err = console.error.bind(console);
 
-export function SvgUri(props: { uri: string; override?: Object }) {
+export function SvgUri(props: UriProps) {
   const { uri } = props;
-  const [xml, setXml] = useState();
+  const [xml, setXml] = useState<string | null>(null);
   useEffect(() => {
-    fetchText(uri)
-      .then(setXml)
-      .catch(err);
+    uri
+      ? fetchText(uri)
+          .then(setXml)
+          .catch(err)
+      : setXml(null);
   }, [uri]);
-  return (xml && <SvgXml xml={xml} override={props} />) || null;
+  return <SvgXml xml={xml} override={props} />;
 }
 
 // Extending Component is required for Animated support.
 
-export class SvgFromXml extends Component<{ xml: string; override?: Object }> {
-  state: { ast?: AST } = {};
+export class SvgFromXml extends Component<XmlProps, XmlState> {
+  state = { ast: null };
   componentDidMount() {
     this.parse(this.props.xml);
   }
@@ -111,9 +126,9 @@ export class SvgFromXml extends Component<{ xml: string; override?: Object }> {
       this.parse(xml);
     }
   }
-  parse(xml: string) {
+  parse(xml: string | null) {
     try {
-      this.setState({ ast: parse(xml) });
+      this.setState({ ast: xml ? parse(xml) : null });
     } catch (e) {
       console.error(e);
     }
@@ -123,24 +138,24 @@ export class SvgFromXml extends Component<{ xml: string; override?: Object }> {
       props,
       state: { ast },
     } = this;
-    return ast ? <SvgAst ast={ast} override={props.override || props} /> : null;
+    return <SvgAst ast={ast} override={props.override || props} />;
   }
 }
 
-export class SvgFromUri extends Component<{ uri: string; override?: Object }> {
-  state: { xml?: string } = {};
+export class SvgFromUri extends Component<UriProps, UriState> {
+  state = { xml: null };
   componentDidMount() {
     this.fetch(this.props.uri);
   }
-  componentDidUpdate(prevProps: { uri: string }) {
+  componentDidUpdate(prevProps: { uri: string | null }) {
     const { uri } = this.props;
     if (uri !== prevProps.uri) {
       this.fetch(uri);
     }
   }
-  async fetch(uri: string) {
+  async fetch(uri: string | null) {
     try {
-      this.setState({ xml: await fetchText(uri) });
+      this.setState({ xml: uri ? await fetchText(uri) : null });
     } catch (e) {
       console.error(e);
     }
@@ -150,7 +165,7 @@ export class SvgFromUri extends Component<{ uri: string; override?: Object }> {
       props,
       state: { xml },
     } = this;
-    return xml ? <SvgFromXml xml={xml} override={props} /> : null;
+    return <SvgFromXml xml={xml} override={props} />;
   }
 }