@byline/cli 2.7.0 → 3.0.1

package/dist/templates/routes/_byline/route.lazy.tsx

@@ -9,9 +9,19 @@
 /**
  * Lazy companion to `_byline/route.tsx`. TanStack Router loads this on
  * demand when a `_byline/*` URL matches, so the Byline UI providers,
- * stylesheets, and the admin config side-effect import (which
- * transitively pulls in the Lexical editor module graph) only run when
- * an admin route is actually visited — public routes stay clean.
+ * stylesheets, and the admin config side-effect import (which transitively
+ * pulls in the Lexical editor module graph) only run when an admin route is
+ * actually visited — public routes stay clean.
+ *
+ * The `byline/admin.config` import below registers the client config in the
+ * *client component graph* — it runs whenever this lazy module loads (component
+ * render / initial hydration), where the sibling `route.tsx` `beforeLoad` does
+ * NOT help: on initial hydration TanStack Start reuses the dehydrated SSR result
+ * and does not re-run `beforeLoad`, yet the admin layout component still calls
+ * `getClientConfig()` at render. The two registration points are complementary —
+ * `beforeLoad` (a dynamic import) covers the *loader* phase before any
+ * `_byline/*` child loader; this import covers component render / hydration.
+ * Both call `defineClientConfig` idempotently.
  *
  * If you also want to use the Byline UI components on your public site,
  * import the same stylesheets from your front-end's pathless layout
@@ -26,9 +36,9 @@ import { ToastProvider, ToastViewport } from '@byline/ui/react'
 import '@byline/ui/reset.css'
 import '@byline/ui/styles.css'
 
-// Initialize Byline admin config — sits in the lazy companion so the
-// Lexical editor module graph only loads when a _byline/* URL matches.
-// See byline/admin.config.ts for the comment on why this is side-effecty.
+// Register the Byline client config (component-render / hydration entry point —
+// see the file header). The sibling `route.tsx` `beforeLoad` covers the loader
+// phase. Lexical's module graph only loads when a `_byline/*` URL matches.
 import '../../../byline/admin.config'
 
 export const Route = createLazyFileRoute('/_byline')({

package/dist/templates/routes/_byline/route.tsx

@@ -12,17 +12,42 @@
  * to URL paths — `/_byline/admin/...` resolves to `/admin/...` and
  * `/_byline/sign-in` resolves to `/sign-in`.
  *
- * This file is intentionally bare. The router needs the route definition
- * at startup to build the tree for URL matching, so anything declared
- * here ends up in the eager module graph (and Vite will modulepreload
- * its dependencies on every page).
+ * This file is intentionally light. The router needs the route definition
+ * at startup to build the tree for URL matching, so anything *statically*
+ * imported here ends up in the eager module graph (and Vite will
+ * modulepreload its dependencies on every page).
  *
- * The component, providers, Byline UI stylesheets, and the admin config
- * side-effect import live in the sibling `route.lazy.tsx` — TanStack
- * Router loads that file on demand when a `_byline/*` URL matches, so
- * the editor + admin shell deps stay out of public-route bundles.
+ * The component, providers, and Byline UI stylesheets live in the sibling
+ * `route.lazy.tsx` — TanStack Router loads that file on demand when a
+ * `_byline/*` URL matches, so the editor + admin shell deps stay out of
+ * public-route bundles.
+ *
+ * Registering the Byline client config has two complementary entry points
+ * (both call `defineClientConfig` idempotently):
+ *  - the `beforeLoad` below — covers the *loader* phase, resolving before any
+ *    `_byline/*` child loader reads the config (e.g. the admin dashboard
+ *    loader's `getClientConfig()`);
+ *  - the side-effect import in `route.lazy.tsx` — covers component render /
+ *    initial hydration, where `beforeLoad` is not re-run.
+ * Both use `byline/admin.config` (a dynamic import here), so its module graph
+ * (incl. the Lexical editor) stays code-split out of the eager/public bundle.
  */
 
 import { createFileRoute } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/_byline')({})
+export const Route = createFileRoute('/_byline')({
+  beforeLoad: async () => {
+    // Register the Byline client config (`defineClientConfig` runs as a
+    // side-effect of importing `byline/admin.config`) before any `_byline/*`
+    // child loader reads it. A parent route's `beforeLoad` resolves before its
+    // children's loaders, closing the dev race where a loader outran the lazy
+    // component module's side-effect import (on the client there is no
+    // server-config fallback, so `getClientConfig()` threw "Byline has not been
+    // configured yet"). The dynamic import keeps `admin.config` out of the
+    // eager/public bundle and evaluates once (cached). NOTE: `beforeLoad` is
+    // not re-run on initial client hydration (the SSR result is dehydrated), so
+    // the `route.lazy.tsx` side-effect import registers the config for the
+    // hydrated component render.
+    await import('../../../byline/admin.config')
+  },
+})

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/cli",
   "private": false,
   "license": "MPL-2.0",
-  "version": "2.7.0",
+  "version": "3.0.1",
   "engines": {
     "node": ">=20.9.0"
   },

package/dist/templates/byline-examples/fields/available-languages-field.ts

@@ -1,99 +0,0 @@
-/**
- * This Source Code is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Copyright (c) Infonomic Company Limited
- */
-
-/**
- * **Schema-side helper.** Returns a `GroupField` schema that emits one
- * `checkbox` field per configured content locale. Drop the result into
- * a collection's `fields` array in `<collection>/schema.ts`. Pure data;
- * the only imports are `@byline/core` types and the i18n locale list.
- *
- * See `docs/FIELDS.md` for the schema-vs-admin model.
- */
-
-import type { GroupField } from '@byline/core'
-
-import { contentLocales, type LocaleDefinition } from '../i18n.js'
-
-type Options = Partial<Omit<GroupField, 'type' | 'fields'>> & {
-  locales?: readonly LocaleDefinition[]
-}
-
-type LocaleFields<T extends readonly LocaleDefinition[]> = {
-  [K in keyof T]: {
-    name: T[K]['code']
-    label: T[K]['label']
-    type: 'checkbox'
-    optional: true
-  }
-}
-
-type WithOverride<O, K extends string, V, D> = O extends { [P in K]: V } ? O[K] : D
-
-type AvailableLanguagesField<Opts extends Options> = Omit<GroupField, 'name' | 'fields'> & {
-  name: WithOverride<Opts, 'name', string, 'availableLanguages'>
-  fields: LocaleFields<
-    WithOverride<Opts, 'locales', readonly LocaleDefinition[], typeof contentLocales>
-  >
-}
-
-const builtInValidate = (value: Record<string, boolean> | undefined): string | undefined => {
-  const hasSelection =
-    value != null &&
-    typeof value === 'object' &&
-    !Array.isArray(value) &&
-    Object.values(value).some(Boolean)
-  if (!hasSelection) {
-    return 'At least one language must be selected'
-  }
-  return undefined
-}
-
-/**
- * Returns a `GroupField` that renders one checkbox per locale entry.
- * Validation requires at least one language to be selected; if the caller
- * supplies its own `validate`, the built-in rule runs first and the caller's
- * validator only runs when the built-in passes.
- *
- * @description This field is intended for use in a document's "Edit" view
- * to allow editors to specify which languages a document is available in.
- * It is orthogonal to the defined workflow system and is here as a 'signal'
- * to frontend websites / consumers - allowing them to implement their own
- * logic around content availability per language.
- *
- * @param options - Optional overrides. Accepts any `GroupField` property
- *   except `type` and `fields` (which are computed), plus a `locales` array
- *   that drives the generated checkbox set.
- */
-export function availableLanguagesField<const Opts extends Options>(
-  options: Opts = {} as Opts
-): AvailableLanguagesField<Opts> {
-  const { name, label, helpText, locales, validate: userValidate, ...rest } = options
-
-  const validate = userValidate
-    ? (value: any, data: Record<string, any>) => {
-        const builtInError = builtInValidate(value)
-        if (builtInError) return builtInError
-        return userValidate(value, data)
-      }
-    : builtInValidate
-
-  return {
-    ...rest,
-    name: (name ?? 'availableLanguages') as any,
-    label: label ?? 'Published Languages',
-    helpText: helpText ?? 'Select the languages this document is available in.',
-    type: 'group',
-    fields: (locales ?? contentLocales).map(({ code, label }) => ({
-      name: code,
-      label,
-      type: 'checkbox' as const,
-      optional: true,
-    })) as any,
-    validate,
-  }
-}