Migrate sdk archives table to Jaspr

src/content/get-dart/archive/_archives_table.html

@@ -1,41 +1,43 @@
-<form class="form-inline">
-  <div class="form-group select">
-    <label for="{{channel}}-versions">Version:</label>
-    <select id="{{channel}}-versions"></select>
-  </div>
-  <div class="form-group select">
-    <label for="{{channel}}-os">OS:</label>
-    <select id="{{channel}}-os">
-      <option value="all">All</option>
-      <option value="macos" id="{{channel}}-macos" class="macos-option">macOS</option>
-      <option value="linux" id="{{channel}}-linux" class="linux-option">Linux</option>
-      <option value="windows" id="{{channel}}-windows" class="windows-option">Windows</option>
-    </select>
-  </div>
-</form>
-<table id="{{channel}}" class="table">
-  <thead>
-    <tr>
-      <th>Version</th>
-      <th>OS</th>
-      <th>Architecture</th>
-      <th>Release date</th>
-      <th>Downloads</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="template">
-      {% if channel == 'stable' %}
-      <td>0.0.0 (rev 00000)</td>
-      {% elsif channel == 'beta' %}
-      <td>0.0.0-0.0.beta (rev 00000)</td>
-      {% else %}
-      <td>0.0.0-0.0.dev (rev 00000)</td>
-      {% endif %}
-      <td>Windows</td>
-      <td>64-width</td>
-      <td>01/01/1970</td>
-      <td>JSON-formatted API documentation</td>
-    </tr>
-  </tbody>
-</table>
+<div class="archive-table" data-channel="{{channel}}">
+  <form class="form-inline">
+    <div class="form-group select">
+      <label for="{{channel}}-versions">Version:</label>
+      <select id="{{channel}}-versions"></select>
+    </div>
+    <div class="form-group select">
+      <label for="{{channel}}-os">OS:</label>
+      <select id="{{channel}}-os">
+        <option value="all">All</option>
+        <option value="macos" id="{{channel}}-macos" class="macos-option">macOS</option>
+        <option value="linux" id="{{channel}}-linux" class="linux-option">Linux</option>
+        <option value="windows" id="{{channel}}-windows" class="windows-option">Windows</option>
+      </select>
+    </div>
+  </form>
+  <table id="{{channel}}" class="table">
+    <thead>
+      <tr>
+        <th>Version</th>
+        <th>OS</th>
+        <th>Architecture</th>
+        <th>Release date</th>
+        <th>Downloads</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="template">
+        {% if channel == 'stable' %}
+        <td>0.0.0 (ref 00000)</td>
+        {% elsif channel == 'beta' %}
+        <td>0.0.0-0.0.beta (ref 00000)</td>
+        {% else %}
+        <td>0.0.0-0.0.dev (ref 00000)</td>
+        {% endif %}
+        <td>---</td>
+        <td>---</td>
+        <td>01/01/1970</td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+</div>

tool/dart_site/lib/src/commands/test_dart.dart

@@ -37,6 +37,7 @@ int _testDart({
 }) {
   final directoriesToTest = [
     path.join('tool', 'dart_site'),
+    path.join('tool', 'get-dart', 'dart_sdk_archive'),
     ...dartProjectExampleDirectories,
   ];
 

tool/get-dart/dart_sdk_archive/dart_test.yaml

@@ -0,0 +1,11 @@
+platforms:
+  - vm
+  - chrome
+
+override_platforms:
+  chrome:
+    settings:
+      headless: true
+
+verbose_trace: false
+js_trace: true

tool/get-dart/dart_sdk_archive/lib/src/components/archive_table.dart

@@ -0,0 +1,117 @@
+// ignore_for_file: lines_longer_than_80_chars
+
+import 'package:jaspr/jaspr.dart';
+
+import '../version_selector.dart';
+
+typedef VersionRow = ({
+  String version,
+  String? ref,
+  String os,
+  String arch,
+  String date,
+  List<({String label, String url, bool hasSha256})> archives,
+});
+
+class ArchivesTable extends StatelessComponent {
+  const ArchivesTable({required this.selector, super.key});
+
+  static VersionRow templateRow(String channel) {
+    return (
+      version: switch (channel) {
+        'stable' => '0.0.0',
+        'beta' => '0.0.0-0.0.beta',
+        'dev' => '0.0.0-0.0.dev',
+        _ => '0.0.0',
+      },
+      ref: 'ref 00000',
+      os: '---',
+      arch: '---',
+      date: '01/01/1970',
+      archives: [],
+    );
+  }
+
+  final VersionSelector selector;
+
+  @override
+  Iterable<Component> build(BuildContext context) sync* {
+    yield ListenableBuilder(
+      listenable: selector,
+      builder: (context) sync* {
+        final channel = selector.channel;
+
+        yield form(classes: 'form-inline', [
+          div(classes: 'form-group select', [
+            label(htmlFor: '$channel-versions', [text('Version:')]),
+            select(
+              id: '$channel-versions',
+              value: selector.selectedVersion,
+              onChange: (values) {
+                selector.selectedVersion = values.first;
+              },
+              [
+                for (final version in selector.versions?.map((v) => v.canonicalizedVersion).toList() ?? <String>[]) //
+                  option(value: version, selected: version == selector.selectedVersion, [text(version)]),
+              ],
+            ),
+          ]),
+          div(classes: 'form-group select', [
+            label(htmlFor: '$channel-os', [text('OS:')]),
+            select(
+              id: '$channel-os',
+              value: selector.selectedOs,
+              onChange: (values) {
+                selector.selectedOs = values.first;
+              },
+              [
+                option(value: 'all', selected: selector.selectedOs == 'all', [text('All')]),
+                option(value: 'macos', id: '$channel-macos', classes: 'macos-option', selected: selector.selectedOs == 'macos',[text('macOS')]),
+                option(value: 'linux', id: '$channel-linux', classes: 'linux-option', selected: selector.selectedOs == 'linux',[text('Linux')]),
+                option(value: 'windows', id: '$channel-windows', classes: 'windows-option', selected: selector.selectedOs == 'windows',[text('Windows')]),
+              ],
+            ),
+          ]),
+        ]);
+
+        yield table(id: channel, classes: 'table', [
+          thead([
+            tr([
+              th([text('Version')]),
+              th([text('OS')]),
+              th([text('Architecture')]),
+              th([text('Release date')]),
+              th([text('Downloads')]),
+            ]),
+          ]),
+          tbody([
+            for (final version in selector.versionRows)
+              tr(
+                classes: selector.isVersionVisible(version) ? null : 'hidden',
+                attributes: {'data-version': version.version, 'data-os': version.os.toLowerCase()},
+                [
+                  td([
+                    text(version.version),
+                    if (version.ref != null) //
+                      span(classes: 'muted', [text(' (${version.ref})')]),
+                  ]),
+                  td([text(version.os)]),
+                  td([text(version.arch)]),
+                  td([text(version.date)]),
+                  td(classes: 'archives', [
+                    for (final archive in version.archives) ...[
+                      if (archive != version.archives.first) //
+                        br(),
+                      a(href: archive.url, [text(archive.label)]),
+                      if (archive.hasSha256) //
+                        a(href: '${archive.url}.sha256sum', [text(' (SHA-256)')]),
+                    ],
+                  ]),
+                ],
+              ),
+          ]),
+        ]);
+      },
+    );
+  }
+}

tool/get-dart/dart_sdk_archive/lib/src/operating_system.dart

@@ -1,11 +1,15 @@
 import 'package:web/web.dart';
 
+import 'util.dart';
+
 final class OperatingSystem {
-  static final OperatingSystem current =
-      [_chrome, _mac, _windows, _linux, _unix].firstWhere(
-    (system) => window.navigator.appVersion.contains(system._navigatorName),
-    orElse: () => const OperatingSystem('Unknown', 'Unknown'),
-  );
+  static final OperatingSystem current = debugIsTest
+      ? _linux
+      : [_chrome, _mac, _windows, _linux, _unix].firstWhere(
+          (system) =>
+              window.navigator.appVersion.contains(system._navigatorName),
+          orElse: () => const OperatingSystem('Unknown', 'Unknown'),
+        );
 
   final String name;
   final String _navigatorName;

tool/get-dart/dart_sdk_archive/lib/src/run_app.dart

@@ -1,39 +1,20 @@
 import 'dart:async';
 
 import 'package:http/browser_client.dart';
+import 'package:jaspr/browser.dart' as jaspr;
 import 'package:sdk_builds/sdk_builds.dart';
-import 'package:web/web.dart';
 
+import 'components/archive_table.dart';
 import 'version_selector.dart';
 
 Future<void> runApp() async {
   final client = DartDownloads(client: BrowserClient());
 
-  final stableSelector = VersionSelector(
-    'stable',
-    client,
-    document.getElementById('stable') as HTMLTableElement,
-    document.getElementById('stable-versions') as HTMLSelectElement,
-    document.getElementById('stable-os') as HTMLSelectElement,
-  );
-
-  final betaSelector = VersionSelector(
-    'beta',
-    client,
-    document.getElementById('beta') as HTMLTableElement,
-    document.getElementById('beta-versions') as HTMLSelectElement,
-    document.getElementById('beta-os') as HTMLSelectElement,
-  );
-
-  final devSelector = VersionSelector(
-    'dev',
-    client,
-    document.getElementById('dev') as HTMLTableElement,
-    document.getElementById('dev-versions') as HTMLSelectElement,
-    document.getElementById('dev-os') as HTMLSelectElement,
-  );
-
-  unawaited(stableSelector.init());
-  unawaited(betaSelector.init());
-  unawaited(devSelector.init());
+  for (final channel in ['stable', 'beta', 'dev']) {
+    final selector = VersionSelector(channel: channel, client: client);
+    jaspr.runApp(
+      ArchivesTable(selector: selector),
+      attachTo: '.archive-table[data-channel="$channel"]',
+    );
+  }
 }

tool/get-dart/dart_sdk_archive/lib/src/util.dart

@@ -6,8 +6,12 @@ import 'svn_versions.dart';
 
 final _downloader = DartDownloads();
 
-Future<List<Version>> fetchSdkVersions(String channel) async {
-  final versionPaths = await _downloader.fetchVersionPaths(channel).toList();
+Future<List<Version>> fetchSdkVersions(
+  String channel, [
+  DartDownloads? downloader,
+]) async {
+  downloader ??= _downloader;
+  final versionPaths = await downloader.fetchVersionPaths(channel).toList();
   final versions = <Version>[];
   for (final versionPath in versionPaths) {
     final basename = path.basename(versionPath);
@@ -83,3 +87,5 @@ class PlatformVariant {
 
   const PlatformVariant(this.architecture, this.archives);
 }
+
+bool debugIsTest = false;