Update dependencies in package.json and yarn.lock; remove unused components and files from the project.

Author: sunnylqm

cnwebsite/core/DocsRating.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useState} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+const DocsRating = ({label}) => {
+  const isBrowser = useIsBrowser();
+  const [haveVoted, setHaveVoted] = useState(false);
+
+  if (!isBrowser) {
+    return null;
+  }
+
+  const giveFeedback = value => {
+    if (window.ga) {
+      window.ga('send', {
+        hitType: 'event',
+        eventCategory: 'button',
+        eventAction: 'feedback',
+        eventLabel: label,
+        eventValue: value,
+      });
+    }
+    setHaveVoted(true);
+  };
+
+  return (
+    <div className="docsRating">
+      {haveVoted ? (
+        'Thanks for letting us know!'
+      ) : (
+        <>
+          Is this page useful?
+          <svg
+            className="i_thumbsup"
+            aria-label="Like"
+            onClick={() => giveFeedback(1)}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 81.13 89.76">
+            <path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z" />
+          </svg>
+          <svg
+            className="i_thumbsdown"
+            aria-label="Dislike"
+            onClick={() => giveFeedback(0)}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 81.13 89.76">
+            <path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z" />
+          </svg>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default DocsRating;

cnwebsite/core/PlatformTag.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const PlatformTag = ({platform}) => {
+  const platformLabel = platform === 'ios' ? 'iOS' : 'Android';
+  return (
+    <div
+      className={`label ${platform}`}
+      title={`This section is related to ${platformLabel} platform`}>
+      {platformLabel}
+    </div>
+  );
+};
+
+export default PlatformTag;

cnwebsite/core/PrismTheme.js cnwebsite/core/PrismTheme.tscnwebsite/core/PrismTheme.js renamed to cnwebsite/core/PrismTheme.ts

@@ -1,4 +1,13 @@
-const theme = {
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {ThemeConfig} from '@docusaurus/preset-classic';
+
+const theme: ThemeConfig['prism']['theme'] = {
   plain: {
     color: '#FFFFFF',
     backgroundColor: '#282C34',
@@ -116,4 +125,4 @@ const theme = {
   ],
 };
 
-module.exports = theme;
+export default theme;

cnwebsite/core/RNRepoLink.tsx

@@ -0,0 +1,15 @@
+import A from '@theme/MDXComponents/A';
+import type {ComponentProps} from 'react';
+import {getTemplateBranchNameForCurrentVersion} from '../src/getTemplateBranchNameForCurrentVersion';
+
+type Props = ComponentProps<'a'>;
+
+export default function RNRepoLink({href, children, ...rest}: Props) {
+  return (
+    <A
+      href={`https://github.com/facebook/react-native/blob/${getTemplateBranchNameForCurrentVersion()}/${href.startsWith('/') ? href.slice(1) : href}`}
+      {...rest}>
+      {children}
+    </A>
+  );
+}

cnwebsite/core/RNTemplateRepoLink.tsx

@@ -0,0 +1,15 @@
+import A from '@theme/MDXComponents/A';
+import type {ComponentProps} from 'react';
+import {getTemplateBranchNameForCurrentVersion} from '../src/getTemplateBranchNameForCurrentVersion';
+
+type Props = ComponentProps<'a'>;
+
+export default function RNTemplateRepoLink({href, children, ...rest}: Props) {
+  return (
+    <A
+      href={`https://github.com/react-native-community/template/blob/${getTemplateBranchNameForCurrentVersion()}/${href.startsWith('/') ? href.slice(1) : href}`}
+      {...rest}>
+      {children}
+    </A>
+  );
+}

cnwebsite/core/TableRowWithCodeBlock.js cnwebsite/core/TableRowWithCodeBlock.tsxcnwebsite/core/TableRowWithCodeBlock.js renamed to cnwebsite/core/TableRowWithCodeBlock.tsx

@@ -1,4 +1,11 @@
-import React, {useState} from 'react';
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
 
 import CodeBlock from '@theme/CodeBlock';
 

cnwebsite/core/TabsConstants.js cnwebsite/core/TabsConstants.tsxcnwebsite/core/TabsConstants.js renamed to cnwebsite/core/TabsConstants.tsx

@@ -15,8 +15,8 @@ const isWindows = ExecutionEnvironment.canUseDOM
   : false;
 
 const syntax = [
-  {label: '函数式组件', value: 'functional'},
-  {label: 'Class 组件', value: 'classical'},
+  {label: 'Function Component', value: 'functional'},
+  {label: 'Class Component', value: 'classical'},
 ];
 const defaultSyntax = 'functional';
 
@@ -58,10 +58,10 @@ const jsDebuggers = [
 const defaultJsDebugger = 'flipper';
 
 const guides = [
-  {label: '完整原生环境', value: 'native'},
-  {label: '简易沙盒环境', value: 'quickstart'},
+  {label: 'Expo Go Quickstart', value: 'quickstart'},
+  {label: 'React Native CLI Quickstart', value: 'native'},
 ];
-const defaultGuide = 'native';
+const defaultGuide = 'quickstart';
 
 const platforms = [
   {label: 'Android', value: 'android'},

cnwebsite/core/VerticalTable.js cnwebsite/core/VerticalTable.tsxcnwebsite/core/VerticalTable.js renamed to cnwebsite/core/VerticalTable.tsx

@@ -15,13 +15,13 @@ export default (() => {
   const updateSnacksTheme = () => {
     const theme = document.querySelector('html').dataset.theme;
     document.querySelectorAll('.snack-player').forEach(snack => {
-      snack.dataset.snackTheme = theme;
+      (snack as HTMLElement).dataset.snackTheme = theme;
     });
   };
 
   const initSnackPlayers = () => {
     updateSnacksTheme();
-    window.ExpoSnack && window.ExpoSnack.initialize();
+    window?.ExpoSnack?.initialize();
   };
 
   const setupTabPanelsMutationObservers = () => {
@@ -53,8 +53,8 @@ export default (() => {
       if ('ExpoSnack' in window) {
         document.querySelectorAll('.snack-player').forEach(container => {
           updateSnacksTheme();
-          window.ExpoSnack && window.ExpoSnack.remove(container);
-          window.ExpoSnack && window.ExpoSnack.append(container);
+          window?.ExpoSnack?.remove(container);
+          window?.ExpoSnack?.append(container);
         });
       }
     }).observe(document.getElementsByTagName('html')[0], {
@@ -65,13 +65,34 @@ export default (() => {
     });
   };
 
+  const setupSnackObserver = () => {
+    const observer = new MutationObserver(() => {
+      const snacks = document.body.querySelectorAll('.snack-player');
+
+      if (snacks.length) {
+        initSnackPlayers();
+      }
+    });
+
+    // Homepage or Showcase pages does not use MDX content, so `.container` node is not present there
+    const mdxContentContainer = document.body.querySelector('.container');
+    if (mdxContentContainer) {
+      observer.observe(mdxContentContainer, {
+        childList: true,
+        subtree: true,
+      });
+    }
+  };
+
   // Need to set the theme before the snack script (deferred) initialize
   updateSnacksTheme();
+  setupSnackObserver();
   setupThemeSynchronization();
 
   return {
     onRouteDidUpdate() {
       initSnackPlayers();
+      setupSnackObserver();
       setupTabPanelsMutationObservers();
     },
   };