Merge pull request #188 from reactjs/sync-with-reactjs

Manual sync with original reactjs repo

Author: arshadkazmi42

.gitignore

@@ -3,4 +3,4 @@
 .idea
 node_modules
 /public
-yarn-error.log
+yarn-error.log

beta/.env.development

@@ -1,2 +0,0 @@
-NEXT_PUBLIC_HJ_SITE_ID = 2411683
-NEXT_PUBLIC_HJ_SITE_V = 6

beta/.env.production

@@ -1,3 +1 @@
-NEXT_PUBLIC_HJ_SITE_ID = 2411651
-NEXT_PUBLIC_HJ_SITE_V = 6
-NEXT_PUBLIC_GA_TRACKING_ID = 'G-3918VS75Y6'
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'

beta/.gitignore

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+tsconfig.tsbuildinfo
 
 # debug
 npm-debug.log*

beta/next.config.js

@@ -11,7 +11,7 @@ module.exports = {
   experimental: {
     plugins: true,
     // TODO: this doesn't work because https://github.com/vercel/next.js/issues/30714
-    // concurrentFeatures: true,
+    concurrentFeatures: false,
     scrollRestoration: true,
   },
   async redirects() {
@@ -27,7 +27,7 @@ module.exports = {
   },
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
-      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+      const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
       config.plugins.push(
         new BundleAnalyzerPlugin({
           analyzerMode: 'static',

beta/package.json

@@ -18,11 +18,11 @@
     "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids",
     "tsc": "tsc --noEmit",
     "start": "next start",
-    "postinstall": "is-ci || (cd .. && husky install beta/.husky)",
+    "postinstall": "patch-package && (is-ci || (cd .. && husky install beta/.husky))",
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "0.13.11-experimental.0",
+    "@codesandbox/sandpack-react": "0.13.16-experimental.0",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",
@@ -31,8 +31,9 @@
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
+    "ga-lite": "^2.1.4",
     "github-slugger": "^1.3.0",
-    "next": "^12.1.0",
+    "next": "^12.0.10",
     "parse-numeric-range": "^1.2.0",
     "react": "experimental",
     "react-collapsed": "3.1.0",
@@ -78,7 +79,7 @@
     "reading-time": "^1.2.0",
     "remark": "^12.0.1",
     "remark-external-links": "^7.0.0",
-    "remark-html": "^13.0.2",
+    "remark-html": "^12.0.0",
     "remark-images": "^2.0.0",
     "remark-slug": "^7.0.0",
     "remark-unwrap-images": "^2.0.0",

beta/plugins/remark-header-custom-ids.js

@@ -32,32 +32,26 @@ module.exports = ({
     visit(tree, 'heading', (node) => {
       const children = node.children;
       let tail = children[children.length - 1];
-
-      // A bit weird: this is to support MDX 2 comments in expressions,
-      // while we’re still on MDX 1, which doesn’t support them.
-      if (!tail || tail.type !== 'text' || tail.value !== '/}') {
-        return;
+      // Generate slugs on the fly (even if not specified in markdown)
+      // so that it's possible to copy anchor links in newly written content.
+      let id = slugs.slug(toString(node), maintainCase);
+      // However, for committed docs, we'll extract slug from the headers.
+      if (tail && tail.type === 'text' && tail.value === '/}') {
+        tail = children[children.length - 2];
+        if (tail && tail.type === 'emphasis') {
+          // Use custom ID instead.
+          id = toString(tail);
+          // Until we're on MDX 2, we need to "cut off" the comment syntax.
+          tail = children[children.length - 3];
+          if (tail && tail.type === 'text' && tail.value.endsWith('{/')) {
+            // Remove the emphasis and trailing `/}`
+            children.splice(children.length - 2, 2);
+            // Remove the `{/`
+            tail.value = tail.value.replace(/[ \t]*\{\/$/, '');
+          }
+        }
       }
 
-      tail = children[children.length - 2];
-
-      if (!tail && tail.type !== 'emphasis') {
-        return;
-      }
-
-      const id = toString(tail);
-
-      tail = children[children.length - 3];
-
-      if (!tail || tail.type !== 'text' || !tail.value.endsWith('{/')) {
-        return;
-      }
-
-      // Remove the emphasis and trailing `/}`
-      children.splice(children.length - 2, 2);
-      // Remove the `{/`
-      tail.value = tail.value.replace(/[ \t]*\{\/$/, '');
-
       const data = patch(node, 'data', {});
 
       patch(data, 'id', id);

beta/public/fonts/Source-Code-Pro-Regular.woff2

@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {useRouter} from 'next/router';
+// @ts-ignore
+import galite from 'ga-lite';
+
+export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
+  const {pathname} = useRouter();
+  // Reset on route changes.
+  return <SendFeedback key={pathname} onSubmit={onSubmit} />;
+}
+
+const thumbsUpIcon = (
+  <svg
+    width="16"
+    height="18"
+    viewBox="0 0 16 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.36603 0.384603C9.36605 0.384617 9.36601 0.384588 9.36603 0.384603L9.45902 0.453415C9.99732 0.851783 10.3873 1.42386 10.5654 2.07648C10.7435 2.72909 10.6993 3.42385 10.44 4.04763L9.27065 6.86008H12.6316C13.5249 6.86008 14.3817 7.22121 15.0134 7.86402C15.6451 8.50683 16 9.37868 16 10.2877V13.7154C16 14.8518 15.5564 15.9416 14.7668 16.7451C13.9771 17.5486 12.9062 18 11.7895 18H5.05263C3.71259 18 2.42743 17.4583 1.47988 16.4941C0.532325 15.5299 0 14.2221 0 12.8585V11.2511C2.40928e-06 9.87711 0.463526 8.54479 1.31308 7.47688L6.66804 0.745592C6.98662 0.345136 7.44414 0.08434 7.94623 0.0171605C8.4483 -0.0500155 8.95656 0.0815891 9.36603 0.384603ZM8.37542 1.77064C8.31492 1.72587 8.23987 1.70646 8.16579 1.71637C8.09171 1.72628 8.02415 1.76477 7.97708 1.82393L2.62213 8.55522C2.0153 9.31801 1.68421 10.2697 1.68421 11.2511V12.8585C1.68421 13.7676 2.03909 14.6394 2.67079 15.2822C3.30249 15.925 4.15927 16.2862 5.05263 16.2862H11.7895C12.4595 16.2862 13.1021 16.0153 13.5759 15.5332C14.0496 15.0511 14.3158 14.3972 14.3158 13.7154V10.2877C14.3158 9.83321 14.1383 9.39729 13.8225 9.07588C13.5066 8.75448 13.0783 8.57392 12.6316 8.57392H8C7.71763 8.57392 7.45405 8.4299 7.29806 8.19039C7.14206 7.95087 7.11442 7.64774 7.22445 7.38311L8.88886 3.37986C9 3.11253 9.01896 2.81477 8.94262 2.53507C8.8663 2.25541 8.69921 2.01027 8.46853 1.83954L8.37542 1.77064Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const thumbsDownIcon = (
+  <svg
+    width="16"
+    height="18"
+    viewBox="0 0 16 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.63397 17.6154C6.63395 17.6154 6.63399 17.6154 6.63397 17.6154L6.54098 17.5466C6.00268 17.1482 5.61269 16.5761 5.43458 15.9235C5.25648 15.2709 5.30069 14.5761 5.56004 13.9524L6.72935 11.1399L3.36842 11.1399C2.47506 11.1399 1.61829 10.7788 0.986585 10.136C0.354883 9.49316 8.1991e-07 8.62132 8.99384e-07 7.71225L1.19904e-06 4.28458C1.29838e-06 3.14824 0.443605 2.05844 1.23323 1.25492C2.02286 0.451403 3.09383 -1.12829e-06 4.21053 -1.03067e-06L10.9474 -4.41715e-07C12.2874 -3.24565e-07 13.5726 0.541687 14.5201 1.50591C15.4677 2.47013 16 3.77789 16 5.1415L16 6.74893C16 8.12289 15.5365 9.45521 14.6869 10.5231L9.33196 17.2544C9.01338 17.6549 8.55586 17.9157 8.05377 17.9828C7.5517 18.05 7.04344 17.9184 6.63397 17.6154ZM7.62458 16.2294C7.68508 16.2741 7.76013 16.2935 7.83421 16.2836C7.90829 16.2737 7.97585 16.2352 8.02292 16.1761L13.3779 9.44478C13.9847 8.68199 14.3158 7.73033 14.3158 6.74892L14.3158 5.1415C14.3158 4.23242 13.9609 3.36058 13.3292 2.71777C12.6975 2.07496 11.8407 1.71383 10.9474 1.71383L4.21053 1.71383C3.5405 1.71383 2.89793 1.98468 2.42415 2.46679C1.95038 2.94889 1.68421 3.60277 1.68421 4.28458L1.68421 7.71225C1.68421 8.16679 1.86166 8.60271 2.1775 8.92411C2.49335 9.24552 2.92174 9.42608 3.36842 9.42608L8 9.42608C8.28237 9.42608 8.54595 9.5701 8.70195 9.80961C8.85794 10.0491 8.88558 10.3523 8.77555 10.6169L7.11114 14.6201C7 14.8875 6.98105 15.1852 7.05738 15.4649C7.1337 15.7446 7.30079 15.9897 7.53147 16.1605L7.62458 16.2294Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+function sendGAEvent(isPositive: boolean) {
+  // Fragile. Don't change unless you've tested the network payload
+  // and verified that the right events actually show up in GA.
+  galite(
+    'send',
+    'event',
+    'button',
+    'feedback',
+    window.location.pathname,
+    isPositive ? '1' : '0'
+  );
+}
+
+function SendFeedback({onSubmit}: {onSubmit: () => void}) {
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+  return (
+    <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
+      <p className="w-full font-bold text-primary dark:text-primary-dark text-lg">
+        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+      </p>
+      {!isSubmitted && (
+        <button
+          aria-label="Yes"
+          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 mr-2"
+          onClick={() => {
+            setIsSubmitted(true);
+            onSubmit();
+            sendGAEvent(true);
+          }}>
+          {thumbsUpIcon}
+        </button>
+      )}
+      {!isSubmitted && (
+        <button
+          aria-label="No"
+          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3"
+          onClick={() => {
+            setIsSubmitted(true);
+            onSubmit();
+            sendGAEvent(false);
+          }}>
+          {thumbsDownIcon}
+        </button>
+      )}
+    </div>
+  );
+}