mdn: update the compatibility table

Close #358
website-local · Jul 18, 2021 · c4ed642 · c4ed642
1 parent dd7025b
commit c4ed642
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 43 deletions.
diff --git a/src/mdn/browser-compatibility-table/README.md b/src/mdn/browser-compatibility-table/README.md
@@ -1,6 +1,6 @@
 browser-compatibility-table
 --------------
-This dir contains code rewritten from [mdn/yari](https://github.com/mdn/yari/tree/v0.4.123/client/src/document/ingredients/browser-compatibility-table), which is licensed [MPL-2.0](https://github.com/mdn/yari/blob/v0.4.123/LICENSE)
+This dir contains code rewritten from [mdn/yari](https://github.com/mdn/yari/tree/v0.4.599/client/src/document/ingredients/browser-compatibility-table), which is licensed [MPL-2.0](https://github.com/mdn/yari/blob/v0.4.123/LICENSE)
 
 `types.ts` is [types.d.ts](https://github.com/mdn/browser-compat-data/blob/3cea0014febfb30025d42d17d2dd420740c77ad4/types.d.ts) from [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data), licensed [CC0](https://github.com/mdn/browser-compat-data/blob/master/LICENSE)
 

diff --git a/src/mdn/browser-compatibility-table/feature-row.ts b/src/mdn/browser-compatibility-table/feature-row.ts
@@ -32,13 +32,8 @@ function getSupportClassName(
     return 'unknown';
   }
 
-  const {
-    flags,
-    version_added,
-    version_removed,
-    partial_implementation,
-  } = getFirst(support);
-
+  const { flags, version_added, version_removed, partial_implementation } =
+    getFirst(support);
 
   let className;
   if (version_added === null) {
@@ -97,24 +92,16 @@ function StatusIcons({ status }: { status: bcd.StatusBlock }): string {
   );
 }
 
-function NonBreakingSpace() {
-  return '\u00A0';
-}
-
 function labelFromString(version: string | boolean | null | undefined) {
   if (typeof version !== 'string') {
     return '?';
   }
-  if (!version.startsWith('≤')) {
-    return version;
+  // Treat BCD ranges as exact versions to avoid confusion for the reader
+  // See https://github.com/mdn/yari/issues/3238
+  if (version.startsWith('≤')) {
+    return version.slice(1);
   }
-  const title = `Supported in version ${version.slice(1)} or earlier.`;
-  return (
-    `<span title=${title}>
-      <sup>≤&#xA0;</sup>
-  ${version.slice(1)}
-  </span>`
-  );
+  return version;
 }
 
 const CellText =({ support }: { support: bcd.SupportStatement | undefined }): string => {
@@ -145,8 +132,9 @@ const CellText =({ support }: { support: bcd.SupportStatement | undefined }): st
   if (removed) {
     status = {
       isSupported: 'no',
-      label: (`${labelFromString(added)}
-          ${NonBreakingSpace()}— ${labelFromString(removed)}`),
+      label: `${
+        labelFromString(added)
+      }&#8202;&ndash;&#8202;${labelFromString(removed)}`,
     };
   } else if (currentSupport && currentSupport.partial_implementation) {
     status = {
@@ -155,7 +143,7 @@ const CellText =({ support }: { support: bcd.SupportStatement | undefined }): st
     };
   }
 
-  let label: string ;
+  let label: string;
   let title = '';
   switch (status.isSupported) {
   case 'yes':
@@ -204,9 +192,9 @@ function CellIcons({ support }: { support: bcd.SupportStatement | undefined }):
   return (`
 <div class="bc-icons">
 ${supportItem.prefix && Icon({name: 'prefix'}) || ''}
-${supportItem.notes && Icon({name: 'footnote'}) || ''}
 ${supportItem.alternative_name && Icon({name: 'altname'}) || ''}
 ${supportItem.flags && Icon({name: 'disabled'}) || ''}
+${supportItem.notes && Icon({name: 'footnote'}) || ''}
 </div>`);
 }
 
@@ -258,32 +246,53 @@ function getNotes(
   return asList(support)
     .flatMap((item, i) => {
       const supportNotes = [
+        item.version_removed
+          ? {
+            iconName: 'footnote',
+            label: `Removed in version ${item.version_removed} and later`,
+          }
+          : null,
+        item.partial_implementation
+          ? {
+            iconName: 'footnote',
+            label: 'Partial support',
+          }
+          : null,
         item.prefix
           ? {
-            iconName: 'prefix',
+            iconName: 'footnote',
             label: `Implemented with the vendor prefix: ${item.prefix}`,
           }
           : null,
-        item.notes
-          ? (Array.isArray(item.notes)
-            ? item.notes
-            : [item.notes]
-          ).map((note: string) => ({ iconName: 'footnote', label: note }))
-          : null,
         item.alternative_name
           ? {
-            iconName: 'altname',
-            label: item.alternative_name,
+            iconName: 'footnote',
+            label: `Alternate name: ${item.alternative_name}`,
           }
           : null,
         item.flags
           ? {
-            iconName: 'disabled',
+            iconName: 'footnote',
             label: FlagsNote({
               browserInfo, browser, supportItem: item
             }),
           }
           : null,
+        item.notes
+          ? (Array.isArray(item.notes) ? item.notes : [item.notes]).map(
+            (note) => ({ iconName: 'footnote', label: note })
+          )
+          : null,
+        // If we encounter nothing else than the required `version_added` and
+        // `release_date` properties, assume full support
+        Object.keys(item).filter(
+          (x) => !['version_added', 'release_date'].includes(x)
+        ).length === 0
+          ? {
+            iconName: 'footnote',
+            label: 'Full support',
+          }
+          : null,
       ].flat().filter(isTruthy);
 
       const hasNotes = supportNotes.length > 0;
@@ -323,11 +332,16 @@ function CompatCell({
 }) {
   const supportClassName = getSupportClassName(support);
   const browserReleaseDate = getSupportBrowserReleaseDate(support);
+  // Whenever the support statement is complex (array with more than one entry)
+  // or if a single entry is complex (prefix, notes, etc.),
+  // we need to render support details in `bc-history`
   const hasNotes =
     support &&
-    asList(support).some((item) =>
-      item.prefix || item.notes || item.alternative_name || item.flags);
-  // aria-expanded="${showNotes ? 'true' : 'false'}"
+    (asList(support).length > 1 ||
+      asList(support).some(
+        (item) =>
+          item.prefix || item.notes || item.alternative_name || item.flags
+      ));
   return (
     `<td key="${browser}" class="bc-browser-${browser} bc-supports-${supportClassName} ${
       hasNotes ? 'bc-has-history' : ''
@@ -348,7 +362,7 @@ function CompatCell({
     </button>`
     ) || ''}
   ${hasNotes && showNotes && support && (
-      `<dl class="bc-history bc-history-mobile bc-hidden">
+      `<dl class="bc-notes-list bc-history bc-history-mobile bc-hidden">
         ${getNotes(browserInfo, browser, support, locale).join('')}
       </dl>`
     ) || ''}

diff --git a/src/mdn/browser-compatibility-table/index.ts b/src/mdn/browser-compatibility-table/index.ts
@@ -8,10 +8,14 @@ import { listFeatures } from './utils';
 // It's done in the component that lazy-loads this component.
 
 function gatherPlatformsAndBrowsers(
-  category: string
+  category: string,
+  data: bcd.Identifier
 ): [string[], bcd.BrowserNames[]] {
   let platforms = ['desktop', 'mobile'];
-  if (category === 'javascript') {
+  if (
+    category === 'javascript' ||
+    (data.__compat && data.__compat.support.nodejs)
+  ) {
     platforms.push('server');
   } else if (category === 'webextensions') {
     platforms = ['webextensions-desktop', 'webextensions-mobile'];
@@ -22,6 +26,7 @@ function gatherPlatformsAndBrowsers(
   ];
 }
 
+
 function FeatureListAccordion({
   browserInfo,
   features,
@@ -62,7 +67,7 @@ export default function BrowserCompatibilityTable({
   const category = breadcrumbs[0];
   const name = breadcrumbs[breadcrumbs.length - 1];
 
-  const [platforms, browsers] = gatherPlatformsAndBrowsers(category);
+  const [platforms, browsers] = gatherPlatformsAndBrowsers(category, data);
 
   return `<table key="bc-table" class="bc-table bc-table-web">
         ${Headers({browserInfo, platforms, browsers})}

diff --git a/src/mdn/browser-compatibility-table/legend.ts b/src/mdn/browser-compatibility-table/legend.ts
@@ -8,7 +8,7 @@ const LEGEND_LABELS: Record<string, string> = {
   no: 'No support',
   unknown: 'Compatibility unknown',
   experimental: 'Experimental. Expect behavior to change in the future.',
-  'non-standard': 'Non-standard. Expect poor cross-browser support.',
+  'non-standard': 'Non-standard. Check cross-browser support before using.',
   deprecated: 'Deprecated. Not for use in new websites.',
   footnote: 'See implementation notes.',
   disabled: 'User must explicitly enable this feature.',