@lilaquadrat/design-core 0.2.1 → 0.3.0

package/src/main.ts

@@ -17,8 +17,10 @@ import currencyPlugin from './plugins/currency';
 import eventsPlugin from './plugins/events';
 import './models';
 import type { RouteRecordRaw } from 'vue-router';
+import type { WorkingContext } from '@lilaquadrat/interfaces';
 import logger from './mixins/logger';
 import useMainStore from './stores/main.store';
+import useContentStore from './stores/content.store';
 
 /**
  * everything the project owns and the package cannot know: the root component
@@ -33,55 +35,58 @@ export interface AppComponents {
   partialsMail: { name: string, component: Component }[]
 }
 
-export function getAppInstance (context: any, routes: readonly RouteRecordRaw[], isSSR: boolean, components: AppComponents) {
+export function getAppInstance(context: Partial<WorkingContext>, routes: readonly RouteRecordRaw[], isSSR: boolean, components: AppComponents) {
 
-  const app = isSSR
-    ? createSSRApp(components.root)
-    : createApp(components.root);
-  const pinia = createPinia();
+    const app = isSSR
+        ? createSSRApp(components.root)
+        : createApp(components.root);
+    const pinia = createPinia();
 
-  app.use(pinia);
+    app.use(pinia);
 
-  if (isSSR) {
+    if (isSSR) {
 
-    logger.ssr('set initial state');
-    pinia.state.value = window.__INITIAL_STATE__ as Record<string, StateTree>;
-    
-  } else {
+        logger.ssr('set initial state');
+        pinia.state.value = window.__INITIAL_STATE__ as Record<string, StateTree>;
+        console.log(window.__INITIAL_STATE__);
 
-    const mainStore = useMainStore();
-  
-    mainStore.data = context.data;
-    mainStore.layout = context.layout;
-    mainStore.target = context.data?.target || 'browser';
-    mainStore.configuration = context.settings;
+    } else {
 
-  }
+        const mainStore = useMainStore();
+        const contentStore = useContentStore();
 
-  if(context.data?.target === 'mail') {
+        console.log(55, context);
 
-    loadViaDeclarationSync(components.modulesMail, 'lila', 'module', app);
-    loadViaDeclarationSync(components.partialsMail, 'lila', 'partial', app);
+        mainStore.setContext(context);
+        contentStore.setRender(context);
 
-  } else {
+    }
 
-    loadViaDeclarationSync(components.modules, 'lila', 'module', app);
-    loadViaDeclarationSync(components.partials, 'lila', 'partial', app);
+    if(context.content?.target === 'mail') {
 
-  }
+        loadViaDeclarationSync(components.modulesMail, 'lila', 'module', app);
+        loadViaDeclarationSync(components.partialsMail, 'lila', 'partial', app);
 
-  const router = createRouter(routes);
+    } else {
 
-  app.use(i18n);
-  app.use(HelpersPlugin);
-  app.use(youtubePlugin);
-  app.use(traceablePlugin);
-  app.use(authPlugin);
-  app.use(replacerPlugin);
-  app.use(currencyPlugin);
-  app.use(eventsPlugin);
+        loadViaDeclarationSync(components.modules, 'lila', 'module', app);
+        loadViaDeclarationSync(components.partials, 'lila', 'partial', app);
 
-  app.use(router);
+    }
+
+    const router = createRouter(routes);
+
+    app.use(i18n);
+    app.use(HelpersPlugin);
+    app.use(youtubePlugin);
+    app.use(traceablePlugin);
+    app.use(authPlugin);
+    app.use(replacerPlugin);
+    app.use(currencyPlugin);
+    app.use(eventsPlugin);
+
+    app.use(router);
+
+    return { app, router, pinia };
 
-  return { app, router, pinia };
 }

package/src/mixins/createCookieString.ts

@@ -26,53 +26,67 @@ interface CookieOptions {
  *   expires: { value: 2, unit: 'years' }
  * });
  */
-export function createCookieString (
-  name: string,
-  value: string,
-  options: CookieOptions = {}
+export function createCookieString(
+    name: string,
+    value: string,
+    options: CookieOptions = {}
 ): string {
-  const {
-    expires = { value: 2, unit: 'years' },
-    dev = false,
-    path = '/',
-    domain
-  } = options;
+
+    const {
+        expires = { value: 2, unit: 'years' },
+        dev = false,
+        path = '/',
+        domain
+    } = options;
     // Set sameSite and secure based on dev mode
     // Can be overridden by explicitly setting these values in options
-  const sameSite = options.sameSite ?? (dev ? 'Lax' : 'None');
-  const secure = options.secure ?? !dev;
-  const cookieParts = [`${name}=${value}`];
-  let isIframe = false;
+    const sameSite = options.sameSite ?? (dev ? 'Lax' : 'None');
+    const secure = options.secure ?? !dev;
+    const cookieParts = [`${name}=${value}`];
+    let isIframe = false;
+
+    try {
+
+        isIframe = window.self !== window.top;
+    
+    } catch (e) {
+
+        // If an error occurs, assume the page is in an iframe.
+        isIframe = true;
+    
+    }
+
+    if (expires) {
+
+        cookieParts.push(`expires=${dayjs().add(expires.value, expires.unit).toString()}`);
+    
+    }
+
+    cookieParts.push(`path=${path}`);
+
+    if (domain) {
 
-  try {
-    isIframe = window.self !== window.top;
-  } catch (e) {
-    // If an error occurs, assume the page is in an iframe.
-    isIframe = true;
-  }
+        cookieParts.push(`domain=${domain}`);
+    
+    }
 
-  if (expires) {
-    cookieParts.push(`expires=${dayjs().add(expires.value, expires.unit).toString()}`);
-  }
+    cookieParts.push(`SameSite=${sameSite}`);
 
-  cookieParts.push(`path=${path}`);
+    if (secure) {
 
-  if (domain) {
-    cookieParts.push(`domain=${domain}`);
-  }
+        cookieParts.push('Secure');
+    
+    }
 
-  cookieParts.push(`SameSite=${sameSite}`);
+    if(isIframe) {
 
-  if (secure) {
-    cookieParts.push('Secure');
-  }
+        cookieParts.push('Partitioned');
+    
+    }
 
-  if(isIframe) {
-    cookieParts.push('Partitioned');
-  }
+    console.log(cookieParts.join('; ').trim());
+    return cookieParts.join('; ').trim();
 
-  console.log(cookieParts.join('; ').trim());
-  return cookieParts.join('; ').trim();
 }
 
 export default createCookieString;

package/src/mixins/createModelDeclaration.ts

@@ -1,29 +1,32 @@
 import type { SingleDeclaration } from '../libs/Models.class';
 import type { BasicData, Structure } from '@lilaquadrat/interfaces';
 
-export default function createModelDeclaration (structure: BasicData<Structure & {required: boolean}>): SingleDeclaration {
+export default function createModelDeclaration(structure: BasicData<Structure & {required: boolean}>): SingleDeclaration {
 
-  if(!structure) {
-    throw new Error('Structure is required');
-  }
+    if(!structure) {
 
-  switch(structure.type) {
-  case 'string':
-  case 'text':
-    return { type: 'string' };
+        throw new Error('Structure is required');
     
-  case 'number':
-    return { type: 'number' };
+    }
+
+    switch(structure.type) {
+    case 'string':
+    case 'text':
+        return { type: 'string' };
+    
+    case 'number':
+        return { type: 'number' };
     
-  case 'boolean':
-    return { type: 'boolean' };
+    case 'boolean':
+        return { type: 'boolean' };
     
-  case 'select':
-    return structure.multiple 
-      ? { type: 'array', contains: { type: 'string' } }
-      : { type: 'string' };
+    case 'select':
+        return structure.multiple 
+            ? { type: 'array', contains: { type: 'string' } }
+            : { type: 'string' };
     
-  default:
-    return {} as SingleDeclaration;
-  }
+    default:
+        return {} as SingleDeclaration;
+    }
+
 }

package/src/mixins/createRouter.ts

@@ -1,30 +1,30 @@
 import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory, type RouteRecordRaw } from 'vue-router';
 import { smartScrollBehavior } from './scroll';
 
-function getHistory () {
+function getHistory() {
 
-  if(import.meta.env.SSR) return createMemoryHistory('/');
+    if(import.meta.env.SSR) return createMemoryHistory('/');
 
-  /**
+    /**
    * the shareable static preview is opened straight from disk, where pushState
    * is blocked and no server exists to rewrite deep links - so the route has
    * to live in the hash
    */
-  if(__PREVIEW__) return createWebHashHistory();
+    if(__PREVIEW__) return createWebHashHistory();
 
-  return createWebHistory('/');
+    return createWebHistory('/');
 
 }
 
 export default (routes: readonly RouteRecordRaw[]) => {
 
-  const historyMode = getHistory();
-  const router = createRouter({
-    history       : historyMode,
-    routes,
-    scrollBehavior: smartScrollBehavior
-  });
+    const historyMode = getHistory();
+    const router = createRouter({
+        history: historyMode,
+        routes,
+        scrollBehavior: smartScrollBehavior
+    });
 
-  return router;
+    return router;
 
 };

package/src/mixins/date.ts

@@ -16,8 +16,10 @@ dayjs.locale('de');
  * @param date Optional date parameter to initialize the dayjs instance with
  * @returns A dayjs instance with Berlin timezone
  */
-export function useDate (date?: string | number | Date | dayjs.Dayjs) {
-  return dayjs(date).tz('Europe/Berlin');
+export function useDate(date?: string | number | Date | dayjs.Dayjs) {
+
+    return dayjs(date).tz('Europe/Berlin');
+
 }
 
 export default useDate;

package/src/mixins/formatSize.ts

@@ -1,11 +1,11 @@
-export function formatSize (size?: number): string {
+export function formatSize(size?: number): string {
 
-  if (!size) return '';
+    if (!size) return '';
 
-  if (size < 1024) return `${size} B`;
-  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+    if (size < 1024) return `${size} B`;
+    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
 
-  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+    return `${(size / 1024 / 1024).toFixed(1)} MB`;
 
 }
 

package/src/mixins/getAnchor.ts

@@ -11,4 +11,4 @@
  *
  */
 export default (input: string) => input?.toLowerCase().replace(/[^\w\s-]/g, '').trim().replace(/\s+/g, '-')
-  .replace(/-+/g, '-');
+    .replace(/-+/g, '-');

package/src/mixins/getRoutes.ts

@@ -9,42 +9,30 @@ export interface RouteSets {
 
 export default (routeSets: RouteSets) => {
 
-  const config = __FRONTEND_CONFIG__;
-  const mode = import.meta.env.MODE;
-  const isIframe = window !== window.top;
-  const isDynamic = config.dynamic === true;
+    const isIframe = window !== window.top;
 
-  /**
+    /**
    * the shareable static build (yarn build:preview) is always the module
    * gallery - it has no backend and no editor parent to talk to
    */
-  if(__PREVIEW__) {
+    if(__PREVIEW__) {
 
-    logger.router('mode: preview routes (static build)');
-    return routeSets.previewRoutes;
+        logger.router('mode: preview routes (static build)');
+        return routeSets.previewRoutes;
 
-  }
+    }
 
-  /**
+    /**
    * running in an iframe indicates that we are in the STUDIO editor
    */
-  if(isIframe) {
+    if(isIframe) {
 
-    logger.router('mode: editor routes');
-    return routeSets.editorRoutes;
-  }
-
-  /**
-   * no iframe but development mode indicates that the design is started locally
-   */
-  if(mode === 'development' && !isDynamic) {
-    
-    logger.router('mode: preview routes');
-    return routeSets.previewRoutes
+        logger.router('mode: editor routes');
+        return routeSets.editorRoutes;
     
-  }
+    }
 
-  logger.router('mode: dynamic routes');
-  return routeSets.dynamicRoutes;
+    logger.router('mode: dynamic routes');
+    return routeSets.dynamicRoutes;
 
 }

package/src/mixins/hasSlotContent.ts

@@ -8,25 +8,31 @@ import { Comment } from 'vue';
  * @param slot - The slot function to check.
  * @returns True if the slot has meaningful content, false otherwise.
  */
-export function hasSlotContent (slot: Slot | undefined): boolean {
-  // If the slot function does not exist, consider the slot empty.
-  if (!slot) return false;
+export function hasSlotContent(slot: Slot | undefined): boolean {
 
-  // Call the slot function to retrieve an array of VNodes.
-  const nodes: VNode[] = slot();
+    // If the slot function does not exist, consider the slot empty.
+    if (!slot) return false;
 
-  if (!nodes || nodes.length === 0) return false;
+    // Call the slot function to retrieve an array of VNodes.
+    const nodes: VNode[] = slot();
 
-  // Check if any of the VNodes contain meaningful content.
-  return nodes.some((node: VNode) => {
-    // Ignore comment nodes.
-    if (node.type === Comment) return false;
+    if (!nodes || nodes.length === 0) return false;
+
+    // Check if any of the VNodes contain meaningful content.
+    return nodes.some((node: VNode) => {
+
+        // Ignore comment nodes.
+        if (node.type === Comment) return false;
+    
+        // If the node's children is a string, ignore it if it’s only whitespace.
+        if (typeof node.children === 'string' && node.children.trim() === '') {
+
+            return false;
+        
+        }
+
+        return true;
     
-    // If the node's children is a string, ignore it if it’s only whitespace.
-    if (typeof node.children === 'string' && node.children.trim() === '') {
-      return false;
-    }
+    });
 
-    return true;
-  });
 }

package/src/mixins/hooks.ts

@@ -1,104 +1,145 @@
 import { useMainStore } from '../stores/main.store'
-import type { Router } from 'vue-router';
+import type { RouteLocationRaw, Router } from 'vue-router';
+import type { WorkingAuth } from '@lilaquadrat/interfaces';
+import type AuthConfig from '../interfaces/AuthConfig.interface';
 import logger from './logger';
 import { auth } from '../plugins/auth';
 import useUserStore from '../stores/user.store';
 import { routeForLock } from '../plugins/signupFlow';
 
+/**
+ * the working context carries only what the frontend needs to log in; the
+ * provider factories still expect their own config shape
+ */
+function toAuthConfig(workingAuth: WorkingAuth): AuthConfig | undefined {
+
+    if (workingAuth.provider === 'auth0') {
+
+        if (!workingAuth.domain || !workingAuth.clientId) return undefined;
+
+        return {
+            type: 'auth0',
+            options: {
+                domain: workingAuth.domain,
+                clientId: workingAuth.clientId,
+                authorizationParams: { audience: workingAuth.audience },
+            },
+        };
+
+    }
+
+    return {
+        type: 'keycloak',
+        url: workingAuth.url,
+        realm: workingAuth.realm,
+        clientId: workingAuth.clientId,
+    };
+
+}
+
 export default (router: Router, options?: {initAuth?: boolean}, target: 'server' | 'client' = 'server') => {
 
-  router.beforeEach(async (to, from, next) => {
+    router.beforeEach(async (to, from, next) => {
+
+        const mainStore = useMainStore();
+        const userStore = useUserStore();
+        let startupRedirect: RouteLocationRaw | undefined;
+
+        if (target === 'client') mainStore.isEditor = window !== window.top;
+
+        if (!mainStore.startupDone) {
 
-    const mainStore = useMainStore();
-    const userStore = useUserStore();
+            logger.startup('start');
 
-    if (!mainStore.startupDone) {
+            if(target !== 'client' && options?.initAuth !== false && !mainStore.isEditor){
+
+                await userStore.initCustomer();
+
+            }
 
-      logger.startup('start');
+            mainStore.startupDone = true;
 
-      if(!mainStore.config) {
-        mainStore.config = __FRONTEND_CONFIG__;
-      }
+            logger.startup('done');
 
-      if(options?.initAuth !== false && !mainStore.isEditor){
-        if (mainStore.config?.auth0Options) {
-  
-          await auth.init(mainStore.config.auth0Options);
-  
         }
-  
-        await userStore.initCustomer();
-      }
 
-      mainStore.startupDone = true;
+        if(target === 'client' && !mainStore.clientOnlyStartupDone) {
 
-      logger.startup('done');
+            if(options?.initAuth !== false && !mainStore.isEditor) {
 
-    } else {
+                const authConfig = mainStore.auth ? toAuthConfig(mainStore.auth) : undefined;
 
-      if(target === 'client') {
+                if (authConfig) {
 
-        if(!mainStore.clientOnlyStartupDone) {
+                    const locationBeforeAuth = window.location.href;
+                    await auth.init(authConfig);
+
+                    if (window.location.href !== locationBeforeAuth) {
+
+                        // The SDK cleaned its callback, but the pending router navigation still has the old query.
+                        const location = new URL(window.location.href);
+                        const cleanedRoute = router.resolve(location.pathname + location.search + location.hash);
+
+                        if (cleanedRoute.fullPath !== to.fullPath) {
+
+                            startupRedirect = { path: cleanedRoute.path, query: cleanedRoute.query, hash: cleanedRoute.hash, replace: true };
+                        
+                        }
+
+                    }
+
+                }
+
+                await userStore.initCustomer();
 
-          if(options?.initAuth !== false) {
-            
-            if (mainStore.config?.auth0Options) {
-      
-              await auth.init(mainStore.config.auth0Options);
-      
             }
-      
-            await userStore.initCustomer();
-          }
-    
-          mainStore.clientOnlyStartupDone = true;
 
-        }
+            mainStore.clientOnlyStartupDone = true;
 
-      }
+        }
 
-    }
+        if (startupRedirect) return next(startupRedirect);
 
-    if(mainStore.disabledLockUpdate) mainStore.disabledLockUpdate = false;
+        if(mainStore.disabledLockUpdate) mainStore.disabledLockUpdate = false;
 
-    /**
+        /**
     * signup gate: locked users are forced through the signup steps before they can
     * reach any members area. public pages stay reachable.
     */
-    const locked = userStore.locked;
-    const toName = typeof to.name === 'string' ? to.name : '';
+        const locked = userStore.locked;
+        const toName = typeof to.name === 'string' ? to.name : '';
 
-    if (locked) {
+        if (locked) {
 
-      const stepRoute = routeForLock(locked);
+            const stepRoute = routeForLock(locked);
 
-      // a locked user heading into members content (that isn't a signup step) → current step
-      if (to.meta?.contentType === 'members' && !toName.startsWith('signup') && toName !== stepRoute.name) {
+            // a locked user heading into members content (that isn't a signup step) → current step
+            if (to.meta?.contentType === 'members' && !toName.startsWith('signup') && toName !== stepRoute.name) {
 
-        return next(stepRoute);
+                return next(stepRoute);
 
-      }
+            }
 
-      // a locked user on any signup screen that isn't their current step → that step
-      // (signup-account is the external account-creation trigger, leave it alone)
-      if (toName.startsWith('signup') && toName !== 'signup-account' && toName !== stepRoute.name) {
+            // a locked user on any signup screen that isn't their current step → that step
+            // (signup-account is the external account-creation trigger, leave it alone)
+            if (toName.startsWith('signup') && toName !== 'signup-account' && toName !== stepRoute.name) {
 
-        return next(stepRoute);
+                return next(stepRoute);
 
-      }
+            }
 
-    } else if (toName === 'signup' || toName === 'signup-connect' || toName === 'signup-verify') {
+        } else if (toName === 'signup' || toName === 'signup-connect' || toName === 'signup-verify') {
 
-      // not locked: a fully set up (authenticated) user has nothing to do here → app
-      if (auth.isAuth.value) return next({ name: 'members' });
+            // not locked: a fully set up (authenticated) user has nothing to do here → app
+            if (auth.isAuth.value) return next({ name: 'members' });
 
-      // a guest can only start at the register step
-      if (toName !== 'signup') return next({ name: 'signup' });
+            // a guest can only start at the register step
+            if (toName !== 'signup') return next({ name: 'signup' });
 
-    }
+        }
 
-    next();
+        next();
 
-  });
+    });
 
-};
+};