basic New Arch detection, new status and filter (#870)

components/Filters.tsx

@@ -160,6 +160,13 @@ export const Filters = ({ query, style, basePath = '/' }: FiltersProps) => {
             title="Has TypeScript types"
             basePath={basePath}
           />
+          <ToggleLink
+            key="newArchitecture"
+            query={query}
+            paramName="newArchitecture"
+            title="Supports New Architecture"
+            basePath={basePath}
+          />
           {isMainSearch ? (
             <ToggleLink
               key="isMaintained"

components/Library/MetaData.tsx

@@ -16,6 +16,7 @@ import {
   Fork,
   Code,
   TypeScript,
+  ReactLogo,
 } from '../Icons';
 import { DirectoryScore } from './DirectoryScore';
 
@@ -25,7 +26,7 @@ type Props = {
 };
 
 const generateData = (library, secondary, isDark) => {
-  const { github } = library;
+  const { github, newArchitecture } = library;
 
   if (secondary) {
     const secondaryTextColor = {
@@ -34,7 +35,7 @@ const generateData = (library, secondary, isDark) => {
     const iconColor = isDark ? darkColors.pewter : colors.secondary;
     const paragraphStyles = [styles.secondaryText, secondaryTextColor];
     const linkStyles = [...paragraphStyles, styles.mutedLink];
-    const hoverStyle = isDark ? { color: colors.primaryDark } : undefined;
+    const hoverStyle = isDark && { color: colors.primaryDark };
 
     return [
       github.urls.homepage
@@ -69,6 +70,20 @@ const generateData = (library, secondary, isDark) => {
             content: <P style={paragraphStyles}>TypeScript Types</P>,
           }
         : null,
+      newArchitecture || github.newArchitecture
+        ? {
+            id: 'newArchitecture',
+            icon: <ReactLogo fill={iconColor} width={17} height={17} />,
+            content: (
+              <A
+                href="https://reactnative.dev/docs/new-architecture-intro"
+                style={linkStyles}
+                hoverStyle={hoverStyle}>
+                New Architecture
+              </A>
+            ),
+          }
+        : null,
       library.examples && library.examples.length
         ? {
             id: 'examples',
@@ -80,7 +95,6 @@ const generateData = (library, secondary, isDark) => {
                   <A
                     key={example}
                     href={example}
-                    target="blank"
                     style={[...linkStyles, styles.exampleLink]}
                     hoverStyle={hoverStyle}>
                     #{index + 1}
@@ -102,7 +116,7 @@ const generateData = (library, secondary, isDark) => {
             target="_self"
             href="/scoring"
             style={[styles.link, styles.mutedLink]}
-            hoverStyle={isDark ? { color: colors.primaryDark } : undefined}>
+            hoverStyle={isDark && { color: colors.primaryDark }}>
             Directory Score
           </A>
         ),

debug-github-repos.json

@@ -18,6 +18,7 @@
   {
     "githubUrl": "https://github.com/react-native-datetimepicker/datetimepicker",
     "npmPkg": "@react-native-community/datetimepicker",
-    "expo": true
+    "expo": true,
+    "newArchitecture": true
   }
 ]

pages/api/libraries/index.ts

@@ -65,6 +65,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
     isRecommended: req.query.isRecommended,
     wasRecentlyUpdated: req.query.wasRecentlyUpdated,
     minPopularity: req.query.minPopularity,
+    newArchitecture: req.query.newArchitecture,
   });
 
   const offset = req.query.offset ? parseInt(req.query.offset.toString(), 10) : 0;

react-native-libraries.json

@@ -4807,8 +4807,8 @@
     "examples": ["https://github.com/xcarpentier/rn-tourguide/blob/master/App.tsx"]
   },
   {
-    "githubUrl": "https://github.com/callstack/react-native-slider/tree/master/src",
-    "examples": ["https://github.com/callstack/react-native-slider/tree/master/example"],
+    "githubUrl": "https://github.com/callstack/react-native-slider/tree/main/package",
+    "examples": ["https://github.com/callstack/react-native-slider/tree/main/example"],
     "npmPkg": "@react-native-community/slider",
     "images": [
       "https://i.postimg.cc/dQTYzGD5/Screenshot-2019-03-25-at-11-24-59.png",

react-native-libraries.schema.json

@@ -117,6 +117,13 @@
         "title": "The Template Schema",
         "default": false,
         "examples": [true]
+      },
+      "newArchitecture": {
+        "$id": "#/items/properties/newArch",
+        "type": "boolean",
+        "title": "The New Architecture Support Schema",
+        "default": false,
+        "examples": [true]
       }
     }
   }

scripts/fetch-github-data.js

@@ -11,7 +11,7 @@ const Authorization = `bearer ${process.env.GITHUB_TOKEN}`;
 const licenses = {};
 
 /**
- * Fetch licenses from github to be used later to parse licenses from npm
+ * Fetch licenses from GitHub to be used later to parse licenses from npm
  */
 export const loadGitHubLicenses = async () => {
   const query = `
@@ -237,6 +237,8 @@ const createRepoDataWithResponse = (json, monorepo) => {
     try {
       const packageJson = JSON.parse(json.packageJson.text);
 
+      json.newArchitecture = Boolean(packageJson.codegenConfig);
+
       if (monorepo) {
         json.homepageUrl = packageJson.homepage;
         json.name = packageJson.name;
@@ -307,5 +309,6 @@ const createRepoDataWithResponse = (json, monorepo) => {
     license: json.licenseInfo,
     lastRelease: json.lastRelease,
     hasTypes: json.types,
+    newArchitecture: json.newArchitecture,
   };
 };

types/index.ts

@@ -28,6 +28,7 @@ export type Query = {
   isRecommended?: string;
   wasRecentlyUpdated?: string;
   minPopularity?: string | number;
+  newArchitecture?: string;
 };
 
 export type Library = {
@@ -43,6 +44,7 @@ export type Library = {
   unmaintained?: boolean;
   dev?: boolean;
   template?: boolean;
+  newArchitecture?: boolean;
   github: {
     urls: {
       repo: string;
@@ -82,6 +84,7 @@ export type Library = {
       isPrerelease: boolean;
     };
     hasTypes: boolean;
+    newArchitecture: string;
   };
   npm: {
     downloads: number;

util/search.js

@@ -30,6 +30,7 @@ export const handleFilterLibraries = ({
   isRecommended,
   wasRecentlyUpdated,
   minPopularity,
+  newArchitecture,
 }) => {
   const viewerHasChosenTopic = !isEmptyOrNull(queryTopic);
   const viewerHasTypedSearch = !isEmptyOrNull(querySearch);
@@ -89,6 +90,10 @@ export const handleFilterLibraries = ({
       return false;
     }
 
+    if (newArchitecture && !library.newArchitecture && !library.github.newArchitecture) {
+      return false;
+    }
+
     if (isMaintained && library.unmaintained) {
       return false;
     }