@flue3/router - npm Package Compare versions

Comparing version 0.0.5-dev.2 to 0.0.5-dev.3

lib/components/DefaultLayout.d.ts

@@ -1,2 +0,4 @@
-declare const _default: import("../types.js").BaseComponent;
+declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

lib/components/DefaultLayout.js

@@ -1,4 +0,3 @@
-import { h } from 'vue';
-import { defineLayoutComponent } from '../defines/defineLayoutComponent.js';
-export default defineLayoutComponent({
+import { h, defineComponent } from 'vue';
+export default defineComponent({
     name: 'DefaultLayout',
@@ -5,0 +4,0 @@ setup(props, { slots }) {

lib/components/RootView.d.ts

@@ -1,4 +0,5 @@
-declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+import { VNode } from 'vue';
+declare const _default: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

lib/components/RootView.js

@@ -1,10 +0,21 @@
-import { defineComponent, h, unref, } from 'vue';
+import { defineComponent, Suspense, unref, h, } from 'vue';
 import { RouterView } from 'vue-router';
-import { useLayout } from '../composables/useLayout.js';
+import { useLayoutResolver } from '../composables/useLayoutResolver.js';
 export default defineComponent({
     name: 'RootView',
     setup() {
-        const { layoutComponent } = useLayout();
-        return () => h(unref(layoutComponent), () => h(RouterView));
+        const { layoutComponent } = useLayoutResolver();
+        const Layout = (_) => {
+            if (unref(layoutComponent)) {
+                return h(unref(layoutComponent), () => _);
+            }
+            return _;
+        };
+        const Root = () => {
+            return h(RouterView, ({ Component: ViewComponent }) => {
+                return Layout(ViewComponent ? h(ViewComponent) : null);
+            });
+        };
+        return () => h(Suspense, () => Root());
     },
 });

lib/composables/useLayout.d.ts

@@ -1,5 +0,2 @@
-export declare const useLayout: () => {
-    layouts: Record<string, import("../types").Layout>;
-    layoutName: import("vue").ComputedRef<string>;
-    layoutComponent: import("vue").ComputedRef<import("../types").BaseComponent>;
-};
+import { LayoutComponent } from '../types.js';
+export declare const useLayout: (layoutComponent: LayoutComponent) => Promise<void>;

lib/composables/useLayout.js

@@ -1,14 +0,7 @@
-import { computed } from 'vue';
-import { useAppContext } from 'flue3';
-export const useLayout = () => {
-    const { resolvedLayouts, layouts, route, } = useAppContext();
-    const layoutName = computed(() => String(route.meta.routerLayoutName) ?? 'default');
-    const layoutComponent = computed(() => {
-        return resolvedLayouts[layoutName.value];
-    });
-    return {
-        layouts,
-        layoutName,
-        layoutComponent,
-    };
+import { useLayoutResolver } from './useLayoutResolver.js';
+import { onBeforeUnmount } from 'vue';
+export const useLayout = async (layoutComponent) => {
+    const { resolveLayout } = useLayoutResolver();
+    const unresolveLayout = await resolveLayout(layoutComponent);
+    onBeforeUnmount(() => unresolveLayout());
 };

lib/router.d.ts

@@ -1,10 +0,10 @@
-import { RouterPluginOptions } from './types.js';
+import { RouteRecordRaw, RouterScrollBehavior } from 'vue-router';
+interface RouterPluginOptions {
+    routes: RouteRecordRaw[];
+    scrollBehavior?: RouterScrollBehavior;
+}
+export * from 'vue-router';
 export declare const createRouterPlugin: (options?: RouterPluginOptions | undefined) => (pluginContext: import("flue3/lib/types/AppPluginContext.js").AppPluginContext) => void;
-export { useRoute, useRouter, RouterView, RouterLink, } from 'vue-router';
+export { default as RootView } from './components/RootView.js';
 export { useLayout } from './composables/useLayout.js';
-export { useAsyncData } from './composables/useAsyncData.js';
-export { default as RootView } from './components/RootView.js';
-export { defineMiddleware } from './defines/defineMiddleware.js';
-export { defineMiddlewares } from './defines/defineMiddlewares.js';
-export { definePageComponent } from './defines/definePageComponent.js';
-export { defineLayoutComponent } from './defines/defineLayoutComponent.js';
+export { useLayoutResolver } from './composables/useLayoutResolver.js';

lib/router.js

@@ -0,23 +1,16 @@
+import { createRouter, createWebHistory, createMemoryHistory, } from 'vue-router';
 import { definePlugin } from 'flue3';
-import { createRouter, createWebHistory, createMemoryHistory, } from 'vue-router';
-import { defaultRoutes } from './routes/defaultRoutes.js';
+import { pluginRoutes } from './routes/pluginRoutes.js';
 import { reactive, computed, unref, } from 'vue';
-import { createMiddlewares } from './middlewares/createMiddlewares.js';
-import { createLayoutsResolver } from './layouts/createLayoutsResolver.js';
-import { createLayouts } from './layouts/createLayouts.js';
-import { createAsyncData } from './asyncData/createAsyncData.js';
-import { createAsyncComponents } from './asyncComponents/createAsyncComponents.js';
-export const createRouterPlugin = definePlugin(async ({ appContext, inject, }, { routes, scrollBehavior, middlewares: defaultMiddlewares, layouts: defaultLayouts, }) => {
-    const layouts = {
-        default: () => import('./components/DefaultLayout.js'),
-        ...(defaultLayouts ?? {}),
-    };
+import { createMiddleware } from './middleware/createMiddleware.js';
+import { createLayoutResolver } from './layout/createLayoutResolver.js';
+export * from 'vue-router';
+export const createRouterPlugin = definePlugin(async ({ appContext, inject }, options) => {
     const router = createRouter({
-        routes: [...routes, ...defaultRoutes],
-        scrollBehavior,
+        routes: [...options.routes, ...pluginRoutes],
+        scrollBehavior: options.scrollBehavior,
         history: appContext.isServer ? createMemoryHistory() : createWebHistory(),
     });
     inject('router', router);
-    // eslint-disable-next-line no-param-reassign
-    appContext.clientRedirect = router.push;
+    inject('clientRedirect', router.push, true);
     const reactiveRoute = {};
@@ -39,20 +32,12 @@ [
     inject('route', reactive(reactiveRoute));
-    createLayoutsResolver(appContext, layouts);
-    createMiddlewares(appContext, defaultMiddlewares);
-    createLayouts(appContext, layouts);
-    createAsyncData(appContext);
-    createAsyncComponents(appContext);
     appContext.vueApp.use(router);
+    createMiddleware(appContext);
+    createLayoutResolver(appContext);
     if (appContext.isServer) {
-        await router.push(appContext.req.url);
+        await router.push(appContext?.req?.url ?? '/');
     }
     await router.isReady();
 });
-export { useRoute, useRouter, RouterView, RouterLink, } from 'vue-router';
+export { default as RootView } from './components/RootView.js';
 export { useLayout } from './composables/useLayout.js';
-export { useAsyncData } from './composables/useAsyncData.js';
-export { default as RootView } from './components/RootView.js';
-export { defineMiddleware } from './defines/defineMiddleware.js';
-export { defineMiddlewares } from './defines/defineMiddlewares.js';
-export { definePageComponent } from './defines/definePageComponent.js';
-export { defineLayoutComponent } from './defines/defineLayoutComponent.js';
+export { useLayoutResolver } from './composables/useLayoutResolver.js';

lib/types.d.ts

@@ -1,35 +0,4 @@
-import { defineMiddlewares } from './defines/defineMiddlewares.js';
-import { RouteRecordRaw, RouterScrollBehavior, RouteLocationNormalized } from 'vue-router';
 import { Component } from 'vue';
-import { AppContext } from 'flue3/lib/types/AppContext.js';
-export { AppContext };
-export interface MiddlewareContext {
-    appContext: AppContext;
-    redirect: AppContext['redirect'];
-    error: AppContext['error'];
-    route: RouteLocationNormalized;
-    fromRoute: RouteLocationNormalized;
-}
-export type Middleware = (middlewareContext: MiddlewareContext) => void;
-export type Middlewares = ((middlewareContext: MiddlewareContext) => void)[];
-export type AsyncData = (<T>(middlewareContext: MiddlewareContext) => T) | (<T>(middlewareContext: MiddlewareContext) => Promise<T>);
-export type BaseComponent = {
-    middlewares?: Middlewares;
-    asyncComponents?: ((middlewareContext: MiddlewareContext) => Record<string, Component>) | ((middlewareContext: MiddlewareContext) => Promise<Record<string, Component>>);
-    asyncData?: AsyncData;
-    components?: Record<string, Component>;
-} & Component;
-export type PageComponent = BaseComponent & {
-    layout?: string | ((middlewareContext: MiddlewareContext) => string) | ((middlewareContext: MiddlewareContext) => Promise<string>);
-};
-export type LayoutComponent = BaseComponent;
-export type Layout = (() => Promise<LayoutComponent>) | (() => Promise<{
-    default: LayoutComponent;
-}>) | LayoutComponent;
-export type Layouts = Record<string, Layout>;
-export interface RouterPluginOptions {
-    routes: RouteRecordRaw[];
-    scrollBehavior?: RouterScrollBehavior;
-    middlewares?: ReturnType<typeof defineMiddlewares>;
-    layouts?: Layouts;
-}
+export type LayoutComponent = (() => Promise<Component | {
+    default: Component;
+}>) | Component;

package.json

 {
     "name": "@flue3/router",
-    "version": "0.0.5-dev.2",
+    "version": "0.0.5-dev.3",
     "description": "flue3 <head> tag manager plugin",
@@ -5,0 +5,0 @@ "author": "FL3NKEY",

router.d.ts

 import { Router, RouteLocationNormalized } from 'vue-router';
-import { Layout, LayoutComponent } from './src/types.js';
+import { Component, Ref } from 'vue';
+import { LayoutComponent } from './src/types.js';
 
@@ -8,8 +9,5 @@ declare module 'flue3/lib/types/AppContext.js' {
         route: RouteLocationNormalized;
-        clientRedirect: Router['push'];
-        layouts: Record<string, Layout>;
-        resolvedLayouts: Record<string, LayoutComponent>;
-        resolveLayout: (layoutName: string) => Promise<boolean>;
-        resolveLayoutComponent: (layoutName: string) => Promise<LayoutComponent | undefined>;
+        routerResolveLayout: (layoutComponent: LayoutComponent) => Promise<() => void>;
+        routerResolvedComponent: Ref<Component>;
     }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1281795

increased by5573.67%

Lines of code

12483

increased by2426.92%

Worsened metrics

Number of package files

37

decreased by-2.63%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes