@fusion.dev/helix-templates 0.169.0 → 0.170.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-templates",
   "description": "Starter templates for Helix, as data. Read by `helix new` and by `npm create @fusion.dev/helix-app`.",
-  "version": "0.169.0",
+  "version": "0.170.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {

package/templates/angular/src/app/data.ts

@@ -63,6 +63,17 @@ export const members: readonly Member[] = [
   { id: 'm-12', name: 'Lena Fischer', reviews: 12, role: 'Engineer', team: 'Design' },
 ]
 
+/**
+ * The first page, in the table's sort and page size: by name, six to a page.
+ *
+ * Written out as rows under the columns, so a page rendered on a server carries
+ * the values and the table is readable before the script runs. The table draws
+ * its own rows from `members` in their place.
+ */
+export const firstPage: readonly Member[] = members
+  .toSorted((a, b) => a.name.localeCompare(b.name))
+  .slice(0, 6)
+
 /** The teams the form offers, read from the roster so the two cannot disagree. */
 export const teams: readonly string[] = [...new Set(members.map((one) => one.team))].toSorted()
 

package/templates/angular/src/app/overview.html

@@ -33,6 +33,17 @@
       Reviews
     </helix-table-column>
 
+    <!-- The first page as rows, so a page rendered on a server carries the
+         values. The table draws its own rows from `members` in their place. -->
+    @for (member of firstPage; track member.id) {
+      <helix-table-row>
+        <helix-table-cell header>{{ member.name }}</helix-table-cell>
+        <helix-table-cell>{{ member.team }}</helix-table-cell>
+        <helix-table-cell>{{ member.role }}</helix-table-cell>
+        <helix-table-cell>{{ member.reviews }}</helix-table-cell>
+      </helix-table-row>
+    }
+
     <!-- The footer is a row across the table: anything you slot goes at the
          start, and the table's own pagination sits at the end. -->
     <helix-text emphasis="subtle" slot="footer" variant="caption">

package/templates/angular/src/app/overview.ts

@@ -1,5 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
-import { members } from './data'
+import { firstPage, members } from './data'
 import { DOCS } from './docs'
 
 /**
@@ -21,5 +21,6 @@ import { DOCS } from './docs'
 })
 export class Overview {
   protected readonly docs = DOCS
+  protected readonly firstPage = firstPage
   protected readonly members = members
 }

package/templates/react-nextjs/app/data.ts

@@ -63,6 +63,17 @@ export const members: readonly Member[] = [
   { id: 'm-12', name: 'Lena Fischer', reviews: 12, role: 'Engineer', team: 'Design' },
 ]
 
+/**
+ * The first page, in the table's sort and page size: by name, six to a page.
+ *
+ * Written out as rows under the columns, so a page rendered on a server carries
+ * the values and the table is readable before the script runs. The table draws
+ * its own rows from `members` in their place.
+ */
+export const firstPage: readonly Member[] = members
+  .toSorted((a, b) => a.name.localeCompare(b.name))
+  .slice(0, 6)
+
 /** The teams the form offers, read from the roster so the two cannot disagree. */
 export const teams: readonly string[] = [...new Set(members.map((one) => one.team))].toSorted()
 

package/templates/react-nextjs/app/overview.tsx

@@ -1,4 +1,4 @@
-import { members } from './data'
+import { firstPage, members } from './data'
 import { DOCS } from './docs'
 
 /**
@@ -10,6 +10,11 @@ import { DOCS } from './docs'
  * table sorts, pages, and selects out of that array on its own, with no handler
  * for you to write.
  *
+ * **The first page is markup too**, so the values are in the HTML the server
+ * sends and the table is readable before the script runs. It is the same array,
+ * sorted and paged as the table sorts and pages it, and the table draws its own
+ * rows in its place once it upgrades.
+ *
  * **Selection is keyed on `row-key`, so it survives a sort and a page.** A row
  * is chosen by its identity, wherever it sits, and `app.css` paints the chosen
  * row through the parts the table names for it.
@@ -67,6 +72,15 @@ export function Overview() {
             Reviews
           </helix-table-column>
 
+          {firstPage.map((member) => (
+            <helix-table-row key={member.id}>
+              <helix-table-cell header>{member.name}</helix-table-cell>
+              <helix-table-cell>{member.team}</helix-table-cell>
+              <helix-table-cell>{member.role}</helix-table-cell>
+              <helix-table-cell>{member.reviews}</helix-table-cell>
+            </helix-table-row>
+          ))}
+
           {/* The footer is a row across the table: anything you slot goes at the
               start, and the table's own pagination sits at the end. */}
           <helix-text emphasis="subtle" slot="footer" variant="caption">

package/templates/react-vite/src/data.ts

@@ -63,6 +63,17 @@ export const members: readonly Member[] = [
   { id: 'm-12', name: 'Lena Fischer', reviews: 12, role: 'Engineer', team: 'Design' },
 ]
 
+/**
+ * The first page, in the table's sort and page size: by name, six to a page.
+ *
+ * Written out as rows under the columns, so a page rendered on a server carries
+ * the values and the table is readable before the script runs. The table draws
+ * its own rows from `members` in their place.
+ */
+export const firstPage: readonly Member[] = members
+  .toSorted((a, b) => a.name.localeCompare(b.name))
+  .slice(0, 6)
+
 /** The teams the form offers, read from the roster so the two cannot disagree. */
 export const teams: readonly string[] = [...new Set(members.map((one) => one.team))].toSorted()
 

package/templates/react-vite/src/overview.tsx

@@ -1,4 +1,4 @@
-import { members } from './data.js'
+import { firstPage, members } from './data.js'
 import { DOCS } from './docs.js'
 
 /**
@@ -10,6 +10,11 @@ import { DOCS } from './docs.js'
  * table sorts, pages, and selects out of that array on its own, with no handler
  * for you to write.
  *
+ * **The first page is markup too.** A page rendered on a server sends these rows
+ * in its HTML, so the table is readable before the script runs. Here the table
+ * draws its own rows from `members` at once, and the rows keep the page the same
+ * as one a server renders.
+ *
  * **Selection is keyed on `row-key`, so it survives a sort and a page.** A row
  * is chosen by its identity, wherever it sits, and `app.css` paints the chosen
  * row through the parts the table names for it.
@@ -67,6 +72,15 @@ export function Overview() {
             Reviews
           </helix-table-column>
 
+          {firstPage.map((member) => (
+            <helix-table-row key={member.id}>
+              <helix-table-cell header>{member.name}</helix-table-cell>
+              <helix-table-cell>{member.team}</helix-table-cell>
+              <helix-table-cell>{member.role}</helix-table-cell>
+              <helix-table-cell>{member.reviews}</helix-table-cell>
+            </helix-table-row>
+          ))}
+
           {/* The footer is a row across the table: anything you slot goes at the
               start, and the table's own pagination sits at the end. */}
           <helix-text emphasis="subtle" slot="footer" variant="caption">

package/templates/solid-vite/src/data.ts

@@ -63,6 +63,17 @@ export const members: readonly Member[] = [
   { id: 'm-12', name: 'Lena Fischer', reviews: 12, role: 'Engineer', team: 'Design' },
 ]
 
+/**
+ * The first page, in the table's sort and page size: by name, six to a page.
+ *
+ * Written out as rows under the columns, so a page rendered on a server carries
+ * the values and the table is readable before the script runs. The table draws
+ * its own rows from `members` in their place.
+ */
+export const firstPage: readonly Member[] = members
+  .toSorted((a, b) => a.name.localeCompare(b.name))
+  .slice(0, 6)
+
 /** The teams the form offers, read from the roster so the two cannot disagree. */
 export const teams: readonly string[] = [...new Set(members.map((one) => one.team))].toSorted()
 

package/templates/solid-vite/src/overview.tsx

@@ -1,4 +1,5 @@
-import { members } from './data.ts'
+import { For } from 'solid-js'
+import { firstPage, members } from './data.ts'
 import { DOCS } from './docs.ts'
 
 /**
@@ -9,6 +10,11 @@ import { DOCS } from './docs.ts'
  * at once, since a table of ten thousand rows cannot be written out as
  * elements. The table sorts, pages, and selects out of that array on its own.
  *
+ * **The first page is markup too.** A page rendered on a server sends these rows
+ * in its HTML, so the table is readable before the script runs. Here the table
+ * draws its own rows from `members` at once, and the rows keep the page the same
+ * as one a server renders.
+ *
  * **Selection is keyed on `row-key`, so it survives a sort and a page.**
  * `app.css` paints the chosen row through the parts the table names for it.
  */
@@ -56,6 +62,17 @@ export function Overview() {
             Reviews
           </helix-table-column>
 
+          <For each={firstPage}>
+            {(member) => (
+              <helix-table-row>
+                <helix-table-cell header>{member.name}</helix-table-cell>
+                <helix-table-cell>{member.team}</helix-table-cell>
+                <helix-table-cell>{member.role}</helix-table-cell>
+                <helix-table-cell>{member.reviews}</helix-table-cell>
+              </helix-table-row>
+            )}
+          </For>
+
           {/* The footer is a row across the table: anything you slot goes at the
               start, and the table's own pagination sits at the end. */}
           <helix-text emphasis="subtle" slot="footer" variant="caption">

package/templates/svelte-vite/src/Overview.svelte

@@ -10,7 +10,7 @@
   `app.css` paints the chosen row through the parts the table names for it.
 -->
 <script lang="ts">
-  import { members } from './data.ts'
+  import { firstPage, members } from './data.ts'
   import { DOCS } from './docs.ts'
 </script>
 
@@ -50,6 +50,17 @@
         Reviews
       </helix-table-column>
 
+      <!-- The first page as rows, so a page rendered on a server carries the
+           values. The table draws its own rows from `members` in their place. -->
+      {#each firstPage as member (member.id)}
+        <helix-table-row>
+          <helix-table-cell header>{member.name}</helix-table-cell>
+          <helix-table-cell>{member.team}</helix-table-cell>
+          <helix-table-cell>{member.role}</helix-table-cell>
+          <helix-table-cell>{member.reviews}</helix-table-cell>
+        </helix-table-row>
+      {/each}
+
       <!-- The footer is a row across the table: anything you slot goes at the
            start, and the table's own pagination sits at the end. -->
       <helix-text emphasis="subtle" slot="footer" variant="caption">

package/templates/svelte-vite/src/data.ts

@@ -63,6 +63,17 @@ export const members: readonly Member[] = [
   { id: 'm-12', name: 'Lena Fischer', reviews: 12, role: 'Engineer', team: 'Design' },
 ]
 
+/**
+ * The first page, in the table's sort and page size: by name, six to a page.
+ *
+ * Written out as rows under the columns, so a page rendered on a server carries
+ * the values and the table is readable before the script runs. The table draws
+ * its own rows from `members` in their place.
+ */
+export const firstPage: readonly Member[] = members
+  .toSorted((a, b) => a.name.localeCompare(b.name))
+  .slice(0, 6)
+
 /** The teams the form offers, read from the roster so the two cannot disagree. */
 export const teams: readonly string[] = [...new Set(members.map((one) => one.team))].toSorted()
 

package/templates/vue-vite/src/OverviewPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { members } from './data.ts'
+import { firstPage, members } from './data.ts'
 import { DOCS } from './docs.ts'
 </script>
 
@@ -51,6 +51,15 @@ import { DOCS } from './docs.ts'
           Reviews
         </helix-table-column>
 
+        <!-- The first page as rows, so a page rendered on a server carries the
+             values. The table draws its own rows from `members` in their place. -->
+        <helix-table-row v-for="member in firstPage" :key="member.id">
+          <helix-table-cell header>{{ member.name }}</helix-table-cell>
+          <helix-table-cell>{{ member.team }}</helix-table-cell>
+          <helix-table-cell>{{ member.role }}</helix-table-cell>
+          <helix-table-cell>{{ member.reviews }}</helix-table-cell>
+        </helix-table-row>
+
         <!-- The footer is a row across the table: anything you slot goes at the
              start, and the table's own pagination sits at the end. -->
         <helix-text emphasis="subtle" slot="footer" variant="caption">

package/templates/vue-vite/src/data.ts

@@ -63,6 +63,17 @@ export const members: readonly Member[] = [
   { id: 'm-12', name: 'Lena Fischer', reviews: 12, role: 'Engineer', team: 'Design' },
 ]
 
+/**
+ * The first page, in the table's sort and page size: by name, six to a page.
+ *
+ * Written out as rows under the columns, so a page rendered on a server carries
+ * the values and the table is readable before the script runs. The table draws
+ * its own rows from `members` in their place.
+ */
+export const firstPage: readonly Member[] = members
+  .toSorted((a, b) => a.name.localeCompare(b.name))
+  .slice(0, 6)
+
 /** The teams the form offers, read from the roster so the two cannot disagree. */
 export const teams: readonly string[] = [...new Set(members.map((one) => one.team))].toSorted()