@tomehq/theme 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/chunk-IW3NHNOQ.js +2187 -0
  2. package/dist/chunk-SWFYJO5H.js +2187 -0
  3. package/dist/chunk-YXKONM3A.js +2192 -0
  4. package/dist/entry.js +1 -1
  5. package/dist/index.js +1 -1
  6. package/package.json +3 -3
  7. package/src/entry.tsx +34 -16
package/dist/entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  entry_default
3
- } from "./chunk-GR2WCRGK.js";
3
+ } from "./chunk-YXKONM3A.js";
4
4
  export {
5
5
  entry_default as default
6
6
  };
package/dist/index.js CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  Shell,
4
4
  THEME_PRESETS,
5
5
  entry_default
6
- } from "./chunk-GR2WCRGK.js";
6
+ } from "./chunk-YXKONM3A.js";
7
7
  export {
8
8
  AiChat,
9
9
  entry_default as App,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tomehq/theme",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "Tome default theme and React app shell",
5
5
  "type": "module",
6
6
  "main": "./src/index.tsx",
@@ -9,8 +9,8 @@
9
9
  "./entry": "./src/entry.tsx"
10
10
  },
11
11
  "dependencies": {
12
- "@tomehq/components": "0.3.0",
13
- "@tomehq/core": "0.3.0"
12
+ "@tomehq/components": "0.3.1",
13
+ "@tomehq/core": "0.3.1"
14
14
  },
15
15
  "peerDependencies": {
16
16
  "react": "^18.0.0 || ^19.0.0",
package/src/entry.tsx CHANGED
@@ -156,17 +156,22 @@ function pageIdToPath(id: string): string {
156
156
  return _pageIdToPath(id, basePath, routes);
157
157
  }
158
158
 
159
+ // ── EAGER INITIAL PAGE LOAD ──────────────────────────────
160
+ // Start loading the initial page at module scope — before React mounts —
161
+ // so the data is ready (or nearly ready) by the time App first renders.
162
+ // This eliminates the "Loading..." flash on production.
163
+ const _initialPageId = resolveInitialPageId(
164
+ window.location.pathname,
165
+ window.location.hash,
166
+ routes,
167
+ basePath,
168
+ _pathnameToPageId,
169
+ );
170
+ const _initialPagePromise = loadPage(_initialPageId, routes, loadPageModule);
171
+
159
172
  // ── APP ──────────────────────────────────────────────────
160
173
  function App() {
161
- const [currentPageId, setCurrentPageId] = useState(() =>
162
- resolveInitialPageId(
163
- window.location.pathname,
164
- window.location.hash,
165
- routes,
166
- basePath,
167
- _pathnameToPageId,
168
- )
169
- );
174
+ const [currentPageId, setCurrentPageId] = useState(_initialPageId);
170
175
 
171
176
  const [pageData, setPageData] = useState<LoadedPage | null>(null);
172
177
  const [loading, setLoading] = useState(true);
@@ -197,7 +202,7 @@ function App() {
197
202
  }
198
203
  }, []);
199
204
 
200
- // Initial page load
205
+ // Initial page load — use the eagerly-started promise from module scope
201
206
  useEffect(() => {
202
207
  // If user landed on a legacy hash URL, redirect to clean path
203
208
  const hash = window.location.hash.slice(1);
@@ -206,7 +211,13 @@ function App() {
206
211
  window.history.replaceState(null, "", fullPath);
207
212
  navigateTo(hash, { replace: true });
208
213
  } else {
209
- navigateTo(currentPageId, { replace: true, skipScroll: true });
214
+ // Use the pre-fetched promise instead of starting a new load
215
+ const fullPath = pageIdToPath(currentPageId);
216
+ window.history.replaceState(null, "", fullPath);
217
+ _initialPagePromise.then((data) => {
218
+ setPageData(data);
219
+ setLoading(false);
220
+ });
210
221
  }
211
222
  }, []);
212
223
 
@@ -225,9 +236,16 @@ function App() {
225
236
  // Mermaid diagram rendering: load from CDN and render .tome-mermaid elements.
226
237
  // Also re-renders when theme changes (dark ↔ light) so colors stay correct.
227
238
  const mermaidModuleRef = useRef<any>(null);
228
- const [mermaidTheme, setMermaidTheme] = useState(() =>
229
- typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light"
230
- );
239
+ const [mermaidTheme, setMermaidTheme] = useState(() => {
240
+ if (typeof document === "undefined") return "light";
241
+ // Check the class first (already set), then fall back to config + system preference
242
+ // to avoid a white flash before Shell syncs the dark class onto <html>
243
+ if (document.documentElement.classList.contains("dark")) return "dark";
244
+ const mode = config.theme?.mode || "auto";
245
+ if (mode === "dark") return "dark";
246
+ if (mode === "light") return "light";
247
+ return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
248
+ });
231
249
 
232
250
  // Watch for dark class changes on <html> to trigger mermaid re-render
233
251
  useEffect(() => {
@@ -357,10 +375,10 @@ function App() {
357
375
  config={config}
358
376
  navigation={navigation}
359
377
  currentPageId={currentPageId}
360
- pageHtml={!pageData?.isMdx ? (loading ? "<p>Loading...</p>" : pageData?.html || "<p>Page not found</p>") : undefined}
378
+ pageHtml={!pageData?.isMdx ? (loading ? "" : pageData?.html || "<p>Page not found</p>") : undefined}
361
379
  pageComponent={pageData?.isMdx ? pageData.component : undefined}
362
380
  mdxComponents={MDX_COMPONENTS}
363
- pageTitle={pageData?.frontmatter.title || (loading ? "Loading..." : "Not Found")}
381
+ pageTitle={pageData?.frontmatter.title || (loading ? "" : "Not Found")}
364
382
  pageDescription={pageData?.frontmatter.description}
365
383
  headings={pageData?.headings || []}
366
384
  tocEnabled={pageData?.frontmatter.toc !== false}