@unsetsoft/ryunix-presets 1.0.26-canary.39 → 1.0.26-canary.41

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 (5) hide show
  1. package/package.json +1 -1
  2. package/webpack/utils/appRouterPlugin.js +19 -11
  3. package/webpack/utils/appRouterPlugin.ts +19 -11
  4. package/webpack/webpack.config.js +13 -0
  5. package/webpack/webpack.config.ts +13 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@unsetsoft/ryunix-presets",
3
3
  "description": "Package with presets for different development environments.",
4
- "version": "1.0.26-canary.39",
4
+ "version": "1.0.26-canary.41",
5
5
  "author": "Neyunse",
6
6
  "type": "module",
7
7
  "repository": {
package/webpack/utils/appRouterPlugin.js CHANGED
@@ -188,7 +188,7 @@ class AppRouterPlugin {
188
188
  }
189
189
  generateRouterFile(routeNode, outputPath) {
190
190
  const generate = (isServerBuild) => {
191
- let importStatements = `import Ryunix, { RouterProvider, Children, useMetadata, useEffect, useStore, ServerBoundary, RyunixDevOverlay } from '@unsetsoft/ryunixjs';\n`
191
+ let importStatements = `import Ryunix, { RouterProvider, Children, useMetadata, useEffect, useStore, ServerBoundary, HydrationBoundary, RyunixDevOverlay } from '@unsetsoft/ryunixjs';\n`
192
192
  let componentIdCounter = 0
193
193
  const getNextId = () => componentIdCounter++
194
194
  const flattenedRoutes = []
@@ -272,7 +272,7 @@ class AppRouterPlugin {
272
272
  flattenedRoutes.push(`
273
273
  {
274
274
  path: '${node.path}',
275
- component: (props) => <RouteWrapper layouts={${layoutsArrayStr}} index={${errorPropStr}} loading={${loadingConfigStr}} error={${errorConfigStr}} props={props} />
275
+ component: (props) => <RouteWrapper routePath="${node.path}" layouts={${layoutsArrayStr}} index={${errorPropStr}} loading={${loadingConfigStr}} error={${errorConfigStr}} props={props} />
276
276
  }`)
277
277
  if (isServerBuild) {
278
278
  ssgRoutes.push({ path: node.path, meta: {} })
@@ -289,7 +289,7 @@ class AppRouterPlugin {
289
289
  flattenedRoutes.push(`
290
290
  {
291
291
  path: '*',
292
- NotFound: (props) => <RouteWrapper layouts={${layoutsArrayStr}} index={{ default: getOptExport(${errorsId}, 'NotFound') || getOptExport(${errorsId}, 'default'), isAsync: false, Metatags: getOptExport(${errorsId}, 'Metatags') || getOptExport(${errorsId}, 'frontmatter') || {} }} props={props} />
292
+ NotFound: (props) => <RouteWrapper routePath="*" layouts={${layoutsArrayStr}} index={{ default: getOptExport(${errorsId}, 'NotFound') || getOptExport(${errorsId}, 'default'), isAsync: false, Metatags: getOptExport(${errorsId}, 'Metatags') || getOptExport(${errorsId}, 'frontmatter') || {} }} props={props} />
293
293
  }`)
294
294
  }
295
295
  return {
@@ -366,6 +366,16 @@ const SyncComponentRenderer = ({ Component, componentProps, ErrorFallback }) =>
366
366
  }
367
367
  };
368
368
 
369
+ const wrapRouteHydrationBoundary = (element, routePath) => {
370
+ const mode = process.env.RYUNIX_HYDRATION_BOUNDARIES || 'route';
371
+ if (!element || mode === 'server-only') return element;
372
+ if (mode === 'route' || mode === 'all-layouts') {
373
+ const id = routePath || 'route';
374
+ return <HydrationBoundary id={id}>{element}</HydrationBoundary>;
375
+ }
376
+ return element;
377
+ };
378
+
369
379
  const RouteWrapper = (props) => {
370
380
  const isServer = typeof process !== 'undefined' && String(process.env.RYUNIX_IS_SERVER) === 'true';
371
381
  if (isServer) {
@@ -374,7 +384,7 @@ const RouteWrapper = (props) => {
374
384
  return RouteWrapperClient(props);
375
385
  };
376
386
 
377
- const RouteWrapperServer = async ({ layouts, index, props, loading, error }) => {
387
+ const RouteWrapperServer = async ({ routePath, layouts, index, props, loading, error }) => {
378
388
  let combinedMeta = {};
379
389
  if (layouts) {
380
390
  for (const l of layouts) {
@@ -398,10 +408,10 @@ const RouteWrapperServer = async ({ layouts, index, props, loading, error }) =>
398
408
  }
399
409
  useMetadata(combinedMeta);
400
410
 
401
- return <RouteWrapperRender layouts={layouts} index={index} props={props} loading={loading} error={error} />;
411
+ return <RouteWrapperRender routePath={routePath} layouts={layouts} index={index} props={props} loading={loading} error={error} />;
402
412
  };
403
413
 
404
- const RouteWrapperClient = ({ layouts, index, props, loading, error }) => {
414
+ const RouteWrapperClient = ({ routePath, layouts, index, props, loading, error }) => {
405
415
  const getStaticMeta = () => {
406
416
  let meta = {};
407
417
  if (layouts) {
@@ -442,10 +452,10 @@ const RouteWrapperClient = ({ layouts, index, props, loading, error }) => {
442
452
  runMetadata();
443
453
  }, [JSON.stringify(props.params), JSON.stringify(props.query), props.location]);
444
454
 
445
- return <RouteWrapperRender layouts={layouts} index={index} props={props} loading={loading} error={error} />;
455
+ return <RouteWrapperRender routePath={routePath} layouts={layouts} index={index} props={props} loading={loading} error={error} />;
446
456
  };
447
457
 
448
- const RouteWrapperRender = ({ layouts, index, props, loading, error }) => {
458
+ const RouteWrapperRender = ({ routePath, layouts, index, props, loading, error }) => {
449
459
 
450
460
  let content = null;
451
461
  const isServerRender = typeof process !== 'undefined' && String(process.env.RYUNIX_IS_SERVER) === 'true';
@@ -517,11 +527,9 @@ const RouteWrapperRender = ({ layouts, index, props, loading, error }) => {
517
527
  }
518
528
  }
519
529
 
520
- return content;
530
+ return wrapRouteHydrationBoundary(content, routePath);
521
531
  };
522
532
 
523
- const routes = [${flattenedRoutes.join(',\n')}];
524
-
525
533
  export default function AppRouter() {
526
534
  const isDev = process.env.NODE_ENV !== 'production';
527
535
  const content = (
package/webpack/utils/appRouterPlugin.ts CHANGED
@@ -226,7 +226,7 @@ class AppRouterPlugin {
226
226
 
227
227
  generateRouterFile(routeNode, outputPath) {
228
228
  const generate = (isServerBuild) => {
229
- let importStatements = `import Ryunix, { RouterProvider, Children, useMetadata, useEffect, useStore, ServerBoundary, RyunixDevOverlay } from '@unsetsoft/ryunixjs';\n`
229
+ let importStatements = `import Ryunix, { RouterProvider, Children, useMetadata, useEffect, useStore, ServerBoundary, HydrationBoundary, RyunixDevOverlay } from '@unsetsoft/ryunixjs';\n`
230
230
  let componentIdCounter = 0
231
231
  const getNextId = () => componentIdCounter++
232
232
  const flattenedRoutes = []
@@ -324,7 +324,7 @@ class AppRouterPlugin {
324
324
  flattenedRoutes.push(`
325
325
  {
326
326
  path: '${node.path}',
327
- component: (props) => <RouteWrapper layouts={${layoutsArrayStr}} index={${errorPropStr}} loading={${loadingConfigStr}} error={${errorConfigStr}} props={props} />
327
+ component: (props) => <RouteWrapper routePath="${node.path}" layouts={${layoutsArrayStr}} index={${errorPropStr}} loading={${loadingConfigStr}} error={${errorConfigStr}} props={props} />
328
328
  }`)
329
329
 
330
330
  if (isServerBuild) {
@@ -345,7 +345,7 @@ class AppRouterPlugin {
345
345
  flattenedRoutes.push(`
346
346
  {
347
347
  path: '*',
348
- NotFound: (props) => <RouteWrapper layouts={${layoutsArrayStr}} index={{ default: getOptExport(${errorsId}, 'NotFound') || getOptExport(${errorsId}, 'default'), isAsync: false, Metatags: getOptExport(${errorsId}, 'Metatags') || getOptExport(${errorsId}, 'frontmatter') || {} }} props={props} />
348
+ NotFound: (props) => <RouteWrapper routePath="*" layouts={${layoutsArrayStr}} index={{ default: getOptExport(${errorsId}, 'NotFound') || getOptExport(${errorsId}, 'default'), isAsync: false, Metatags: getOptExport(${errorsId}, 'Metatags') || getOptExport(${errorsId}, 'frontmatter') || {} }} props={props} />
349
349
  }`)
350
350
  }
351
351
 
@@ -432,6 +432,16 @@ const SyncComponentRenderer = ({ Component, componentProps, ErrorFallback }) =>
432
432
  }
433
433
  };
434
434
 
435
+ const wrapRouteHydrationBoundary = (element, routePath) => {
436
+ const mode = process.env.RYUNIX_HYDRATION_BOUNDARIES || 'route';
437
+ if (!element || mode === 'server-only') return element;
438
+ if (mode === 'route' || mode === 'all-layouts') {
439
+ const id = routePath || 'route';
440
+ return <HydrationBoundary id={id}>{element}</HydrationBoundary>;
441
+ }
442
+ return element;
443
+ };
444
+
435
445
  const RouteWrapper = (props) => {
436
446
  const isServer = typeof process !== 'undefined' && String(process.env.RYUNIX_IS_SERVER) === 'true';
437
447
  if (isServer) {
@@ -440,7 +450,7 @@ const RouteWrapper = (props) => {
440
450
  return RouteWrapperClient(props);
441
451
  };
442
452
 
443
- const RouteWrapperServer = async ({ layouts, index, props, loading, error }) => {
453
+ const RouteWrapperServer = async ({ routePath, layouts, index, props, loading, error }) => {
444
454
  let combinedMeta = {};
445
455
  if (layouts) {
446
456
  for (const l of layouts) {
@@ -464,10 +474,10 @@ const RouteWrapperServer = async ({ layouts, index, props, loading, error }) =>
464
474
  }
465
475
  useMetadata(combinedMeta);
466
476
 
467
- return <RouteWrapperRender layouts={layouts} index={index} props={props} loading={loading} error={error} />;
477
+ return <RouteWrapperRender routePath={routePath} layouts={layouts} index={index} props={props} loading={loading} error={error} />;
468
478
  };
469
479
 
470
- const RouteWrapperClient = ({ layouts, index, props, loading, error }) => {
480
+ const RouteWrapperClient = ({ routePath, layouts, index, props, loading, error }) => {
471
481
  const getStaticMeta = () => {
472
482
  let meta = {};
473
483
  if (layouts) {
@@ -508,10 +518,10 @@ const RouteWrapperClient = ({ layouts, index, props, loading, error }) => {
508
518
  runMetadata();
509
519
  }, [JSON.stringify(props.params), JSON.stringify(props.query), props.location]);
510
520
 
511
- return <RouteWrapperRender layouts={layouts} index={index} props={props} loading={loading} error={error} />;
521
+ return <RouteWrapperRender routePath={routePath} layouts={layouts} index={index} props={props} loading={loading} error={error} />;
512
522
  };
513
523
 
514
- const RouteWrapperRender = ({ layouts, index, props, loading, error }) => {
524
+ const RouteWrapperRender = ({ routePath, layouts, index, props, loading, error }) => {
515
525
 
516
526
  let content = null;
517
527
  const isServerRender = typeof process !== 'undefined' && String(process.env.RYUNIX_IS_SERVER) === 'true';
@@ -583,11 +593,9 @@ const RouteWrapperRender = ({ layouts, index, props, loading, error }) => {
583
593
  }
584
594
  }
585
595
 
586
- return content;
596
+ return wrapRouteHydrationBoundary(content, routePath);
587
597
  };
588
598
 
589
- const routes = [${flattenedRoutes.join(',\n')}];
590
-
591
599
  export default function AppRouter() {
592
600
  const isDev = process.env.NODE_ENV !== 'production';
593
601
  const content = (
package/webpack/webpack.config.js CHANGED
@@ -370,11 +370,24 @@ const getPlugins = (isServer = false) =>
370
370
  }),
371
371
  new webpack.DefinePlugin({
372
372
  'ryunix.config.env': JSON.stringify(config.env),
373
+ 'process.env.NODE_ENV': JSON.stringify(
374
+ process.env.NODE_ENV ||
375
+ (config.webpack.production ? 'production' : 'development'),
376
+ ),
373
377
  'process.env.RYUNIX_SSR': JSON.stringify(
374
378
  config.ssr || (config.legacy.ssg?.prerender?.length ?? 0) > 0,
375
379
  ),
376
380
  'process.env.RYUNIX_DEBUG': JSON.stringify(config.debug),
377
381
  'process.env.RYUNIX_IS_SERVER': JSON.stringify(isServer),
382
+ 'process.env.RYUNIX_HYDRATION_RECOVER': JSON.stringify(
383
+ config.hydration?.recover ?? 'boundary',
384
+ ),
385
+ 'process.env.RYUNIX_HYDRATION_BOUNDARIES': JSON.stringify(
386
+ config.hydration?.boundaries ?? 'route',
387
+ ),
388
+ 'process.env.RYUNIX_HYDRATION_STRICT': JSON.stringify(
389
+ config.hydration?.strict ?? false,
390
+ ),
378
391
  }),
379
392
  // Only inject HTML for the client build
380
393
  !isServer &&
package/webpack/webpack.config.ts CHANGED
@@ -385,11 +385,24 @@ const getPlugins = (isServer = false) =>
385
385
  }),
386
386
  new webpack.DefinePlugin({
387
387
  'ryunix.config.env': JSON.stringify(config.env),
388
+ 'process.env.NODE_ENV': JSON.stringify(
389
+ process.env.NODE_ENV ||
390
+ (config.webpack.production ? 'production' : 'development'),
391
+ ),
388
392
  'process.env.RYUNIX_SSR': JSON.stringify(
389
393
  config.ssr || (config.legacy.ssg?.prerender?.length ?? 0) > 0,
390
394
  ),
391
395
  'process.env.RYUNIX_DEBUG': JSON.stringify(config.debug),
392
396
  'process.env.RYUNIX_IS_SERVER': JSON.stringify(isServer),
397
+ 'process.env.RYUNIX_HYDRATION_RECOVER': JSON.stringify(
398
+ config.hydration?.recover ?? 'boundary',
399
+ ),
400
+ 'process.env.RYUNIX_HYDRATION_BOUNDARIES': JSON.stringify(
401
+ config.hydration?.boundaries ?? 'route',
402
+ ),
403
+ 'process.env.RYUNIX_HYDRATION_STRICT': JSON.stringify(
404
+ config.hydration?.strict ?? false,
405
+ ),
393
406
  }),
394
407
  // Only inject HTML for the client build
395
408
  !isServer &&