fix: web types

package.json

@@ -58,7 +58,9 @@
     "prepare": "npm run bob && husky install",
     "release": "npm login && release-it",
     "test": "npm run lint && npm run tsc",
-    "tsc": "tsc --noEmit",
+    "tsc": "yarn tsc-native && yarn tsc-web",
+    "tsc-native": "tsc --noEmit",
+    "tsc-web": "tsc --project tsconfig.web.json --noEmit",
     "e2e": "jest e2e",
     "generateE2eReferences": "ts-node e2e/generateReferences.ts",
     "check-archs-consistency": "node ./scripts/codegen-check-consistency.js",

src/ReactNativeSVG.ts

@@ -1,26 +1,30 @@
-import Shape from './elements/Shape';
-import {
-  AstProps,
+export {
   camelCase,
-  JsxAST,
-  Middleware,
   parse,
-  Styles,
   SvgAst,
   SvgFromUri,
   SvgFromXml,
   SvgUri,
   SvgXml,
+} from './xml';
+
+export type {
+  AstProps,
+  JsxAST,
+  Middleware,
+  Styles,
   UriProps,
   UriState,
   XmlAST,
   XmlProps,
   XmlState,
 } from './xml';
 
-import { fetchText } from './utils/fetchData';
+export { fetchText } from './utils/fetchData';
 
-import {
+export { default as Shape } from './elements/Shape';
+
+export {
   RNSVGCircle,
   RNSVGClipPath,
   RNSVGDefs,
@@ -117,57 +121,5 @@ export type { UseProps } from './elements/Use';
 
 export * from './lib/extract/types';
 
-export {
-  camelCase,
-  fetchText,
-  parse,
-  RNSVGCircle,
-  RNSVGClipPath,
-  RNSVGDefs,
-  RNSVGEllipse,
-  RNSVGFeColorMatrix,
-  RNSVGFeComposite,
-  RNSVGFeGaussianBlur,
-  RNSVGFeMerge,
-  RNSVGFeOffset,
-  RNSVGFilter,
-  RNSVGForeignObject,
-  RNSVGGroup,
-  RNSVGImage,
-  RNSVGLine,
-  RNSVGLinearGradient,
-  RNSVGMarker,
-  RNSVGMask,
-  RNSVGPath,
-  RNSVGPattern,
-  RNSVGRadialGradient,
-  RNSVGRect,
-  RNSVGSvgAndroid,
-  RNSVGSvgIOS,
-  RNSVGSymbol,
-  RNSVGText,
-  RNSVGTextPath,
-  RNSVGTSpan,
-  RNSVGUse,
-  Shape,
-  SvgAst,
-  SvgFromUri,
-  SvgFromXml,
-  SvgUri,
-  SvgXml,
-};
-
-export type {
-  AstProps,
-  JsxAST,
-  Middleware,
-  Styles,
-  UriProps,
-  UriState,
-  XmlAST,
-  XmlProps,
-  XmlState,
-};
-
 export * from './elements';
 export { default } from './elements';

src/ReactNativeSVG.web.ts

@@ -1,23 +1,26 @@
-import {
-  AstProps,
+export {
   camelCase,
-  JsxAST,
-  Middleware,
   parse,
-  Styles,
   SvgAst,
   SvgFromUri,
   SvgFromXml,
   SvgUri,
   SvgXml,
+} from './xml';
+
+export type {
+  AstProps,
+  JsxAST,
+  Middleware,
+  Styles,
   UriProps,
   UriState,
   XmlAST,
   XmlProps,
   XmlState,
 } from './xml';
 
-import { fetchText } from './utils/fetchData';
+export { fetchText } from './utils/fetchData';
 
 export {
   inlineStyles,
@@ -30,29 +33,60 @@ export {
   WithLocalSvg,
 } from './deprecated';
 
-export {
-  camelCase,
-  fetchText,
-  parse,
-  SvgAst,
-  SvgFromUri,
-  SvgFromXml,
-  SvgUri,
-  SvgXml,
-};
+export type { CircleProps } from './elements/Circle';
+export type { ClipPathProps } from './elements/ClipPath';
+export type { EllipseProps } from './elements/Ellipse';
+export type { FeBlendProps } from './elements/filters/FeBlend';
+export type { FeColorMatrixProps } from './elements/filters/FeColorMatrix';
+export type { FeComponentTransferProps } from './elements/filters/FeComponentTransfer';
+export type {
+  FeFuncAProps,
+  FeFuncBProps,
+  FeFuncGProps,
+  FeFuncRProps,
+} from './elements/filters/FeComponentTransferFunction';
+export type { FeCompositeProps } from './elements/filters/FeComposite';
+export type { FeConvolveMatrixProps } from './elements/filters/FeConvolveMatrix';
+export type { FeDiffuseLightingProps } from './elements/filters/FeDiffuseLighting';
+export type { FeDisplacementMapProps } from './elements/filters/FeDisplacementMap';
+export type { FeDistantLightProps } from './elements/filters/FeDistantLight';
+export type { FeDropShadowProps } from './elements/filters/FeDropShadow';
+export type { FeFloodProps } from './elements/filters/FeFlood';
+export type { FeGaussianBlurProps } from './elements/filters/FeGaussianBlur';
+export type { FeImageProps } from './elements/filters/FeImage';
+export type { FeMergeProps } from './elements/filters/FeMerge';
+export type { FeMergeNodeProps } from './elements/filters/FeMergeNode';
+export type { FeMorphologyProps } from './elements/filters/FeMorphology';
+export type { FeOffsetProps } from './elements/filters/FeOffset';
+export type { FePointLightProps } from './elements/filters/FePointLight';
+export type { FeSpecularLightingProps } from './elements/filters/FeSpecularLighting';
+export type { FeSpotLightProps } from './elements/filters/FeSpotLight';
+export type { FeTileProps } from './elements/filters/FeTile';
+export type { FeTurbulenceProps } from './elements/filters/FeTurbulence';
+export type { FilterProps } from './elements/filters/Filter';
+export type { FilterPrimitiveCommonProps } from './elements/filters/FilterPrimitive';
+export type { ForeignObjectProps } from './elements/ForeignObject';
+export type { GProps } from './elements/G';
+export type { ImageProps } from './elements/Image';
+export type { LineProps } from './elements/Line';
+export type { LinearGradientProps } from './elements/LinearGradient';
+export type { MarkerProps } from './elements/Marker';
+export type { MaskProps } from './elements/Mask';
+export type { PathProps } from './elements/Path';
+export type { PatternProps } from './elements/Pattern';
+export type { PolygonProps } from './elements/Polygon';
+export type { PolylineProps } from './elements/Polyline';
+export type { RadialGradientProps } from './elements/RadialGradient';
+export type { RectProps } from './elements/Rect';
+export type { StopProps } from './elements/Stop';
+export type { SvgProps } from './elements/Svg';
+export type { SymbolProps } from './elements/Symbol';
+export type { TextProps } from './elements/Text';
+export type { TextPathProps } from './elements/TextPath';
+export type { TSpanProps } from './elements/TSpan';
+export type { UseProps } from './elements/Use';
 
 export * from './lib/extract/types';
 
 export * from './elements';
 export { default } from './elements';
-export type {
-  AstProps,
-  JsxAST,
-  Middleware,
-  Styles,
-  UriProps,
-  UriState,
-  XmlAST,
-  XmlProps,
-  XmlState,
-};

src/filter-image/FilterImage.tsx

@@ -45,6 +45,7 @@ export const FilterImage = (props: FilterImageProps) => {
         <Filter id={filterId}>
           {extractedFilters.map(mapFilterToComponent)}
         </Filter>
+        {/* @ts-ignore This type is broken in web implementation. */}
         <Image
           {...imageProps}
           href={props.src || props.source}

tsconfig.json

@@ -19,7 +19,9 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "moduleSuffixes": [".native", ".ios", ".android", ""]
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/**/*.web.ts", "src/**/*.web.tsx"]
 }

tsconfig.web.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "moduleSuffixes": [".web", ""]
+  },
+  "exclude": [
+    "src/**/*.native.ts",
+    "src/**/*.native,tsx",
+    "src/**/*.ios.ts",
+    "src/**/*.ios.tsx",
+    "src/**/*.android.ts",
+    "src/**/*.android.tsx"
+  ]
+}