@lilaquadrat/design-core 0.2.2 → 0.3.0

package/README.md

@@ -28,7 +28,7 @@ longer means porting framework changes by hand into every project.
 | `views/*` | content, editor, login, signup-account, download |
 | `partials/*` | client-only, main-components, error, qrcode, action, mediadetection |
 | `translations/de` | framework wording only - validation, lists, files, signup, order |
-| `vite`, `eslint`, `stylelint`, `cypress` | build and test tooling |
+| `vite`, `eslint`, `cypress` | build and test tooling |
 
 ## What is NOT in here, on purpose
 
@@ -125,13 +125,81 @@ import de from '@/translations/de';
 addMessages('de', de);
 ```
 
-### eslint, stylelint, cypress
+### authentication
+
+Authentication is selected by the runtime configuration, not by the Vue plugin.
+The environment's `auth` configuration is carried into the rendered main store.
+For Keycloak:
+
+```ts
+auth: {
+  type: 'keycloak',
+  url: 'https://auth.example.com',
+  realm: 'studio',
+  clientId: 'design',
+}
+```
+
+Keycloak uses the authorization-code flow with PKCE. Register the app's URLs as
+valid redirect URIs and its origin as a web origin on the public client. Explicit
+login and signup return to `/login-callback` on the app's origin; `redirectUri`
+can override it in the frontend auth configuration. Startup is passive by default:
+opening or reloading a public page does not start a login redirect. Login and
+signup redirects only happen when explicitly triggered; incoming authentication
+callbacks are still processed during startup.
+
+To restore an existing SSO session after a reload, explicitly set
+`silentCheckSsoRedirectUri` to a consumer-hosted Keycloak silent-check page. The
+core does not ship that page. This opts into an iframe-only SSO check, with
+top-level redirect fallback disabled. If silent authentication is unavailable,
+users must explicitly log in again. Without this configuration, sessions are not
+automatically restored after a reload. Tokens stay in memory.
+
+Auth0 configuration uses the same discriminator with its existing SDK options:
+
+```ts
+auth: {
+  type: 'auth0',
+  options: {
+    domain: 'tenant.eu.auth0.com',
+    clientId: 'public-client-id',
+    authorizationParams: {
+      redirect_uri: 'https://app.example.com/login-callback',
+      audience: 'https://api.example.com',
+    },
+  },
+}
+```
+
+The shared environment schema currently describes Keycloak; the frontend's
+`AuthConfig` additionally supports Auth0. Existing rendered `auth0Options` and
+direct `auth.init(auth0Options)` calls remain supported. `auth` takes precedence
+over legacy `auth0Options` when both are present. There are no built-in tenant
+credentials or localhost callback URLs.
+
+`auth` and `useAuth` from `plugins/auth` remain the provider-neutral entry points.
+`functions/AuthProviderFactory` dynamically imports only the selected adapter;
+the adapters own all runtime SDK imports. Do not statically import or re-export
+the adapters from an application entry point or combine them in a vendor chunk.
+Installing the SDKs does not load them in the browser: the consuming build emits
+separate lazy chunks. With no auth configuration (or `initAuth: false`), neither
+provider is initialized or loaded. Preview, editor and server startup skip auth.
+
+Focused auth and browser chunk-graph tests (Node 22+, no live identity server required):
+
+```sh
+yarn node --experimental-strip-types --test tests/auth.test.ts
+```
+
+### eslint, cypress
 
 ```js
 // eslint.config.js
-export { default } from '@lilaquadrat/design-core/eslint';
+export { default } from '@lilaquadrat/frontend/eslint';
 ```
 
+The `@lilaquadrat/design-core/eslint` export also forwards to this shared config.
+
 ```ts
 // cypress.config.ts
 import { createCypressConfig } from '@lilaquadrat/design-core/cypress';

package/html/index.server.html

@@ -4,16 +4,9 @@
 <head>
   <meta charset="UTF-8">
 
-  <link rel="apple-touch-icon" sizes="180x180" href="<!--cdn-->/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="<!--cdn-->/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="<!--cdn-->/favicon-16x16.png">
-  <link rel="manifest" href="<!--cdn-->/site.webmanifest">
-  <link rel="mask-icon" href="<!--cdn-->/safari-pinned-tab.svg" color="#5bbad5">
-  <meta name="msapplication-TileColor" content="#da532c">
-  <meta name="theme-color" content="#ffffff">
+  <!--metalinks-->
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="<!--description-->">
   <title><!--sitetitle--></title>
   <link rel="preconnect" href="<!--cdn-->">
   <link rel="stylesheet" href="<!--style-->">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lilaquadrat/design-core",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "framework layer shared by every lilaquadrat STUDIO design: app bootstrap, router, stores, plugins and build tooling",
   "type": "module",
   "license": "MIT",
@@ -49,7 +49,6 @@
     "./html/*": "./html/*",
     "./vite": "./tooling/vite.js",
     "./eslint": "./tooling/eslint.config.js",
-    "./stylelint": "./tooling/stylelint.config.mjs",
     "./cypress": "./tooling/cypress/config.ts",
     "./ssr-test": "./tooling/ssr-test/index.mjs",
     "./cypress/*": "./tooling/cypress/*"
@@ -61,27 +60,31 @@
     "release": "standard-version"
   },
   "peerDependencies": {
-    "@auth0/auth0-spa-js": "^2.1.3",
-    "@lilaquadrat/frontend": ">=0.2.0",
-    "@lilaquadrat/interfaces": ">=1.48.0",
-    "@lilaquadrat/sdk": "^0.1.2",
-    "axios": "^1.9.0",
-    "cypress": "^15.0.0",
-    "dayjs": "^1.11.13",
-    "eslint": "^9.25.1",
-    "less": "^4.3.0",
+    "@auth0/auth0-spa-js": "^2.30.0",
+    "@lilaquadrat/frontend": ">=0.2.19",
+    "@lilaquadrat/interfaces": ">=1.57.0",
+    "@lilaquadrat/sdk": "^0.2.2",
+    "@vue/devtools-api": "^8.2.1",
+    "axios": "^1.21.0",
+    "cypress": "^16.0.0",
+    "dayjs": "^1.11.23",
+    "eslint": "^10.14.0",
+    "keycloak-js": "^26.2.5",
+    "less": "^4.9.1",
     "object-path": "^0.11.8",
-    "pinia": "^3.0.2",
+    "pinia": "^4.1.0",
     "qrcode": "^1.5.4",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "stylelint": "^16.19.1",
-    "uuid": "^11.1.0",
-    "vite": "^8.0.0",
-    "vue": "^3.5.13",
-    "vue-i18n": "^11.4.4",
-    "vue-router": "^4.5.1"
+    "rollup-plugin-visualizer": "^7.1.1",
+    "uuid": "^14.0.3",
+    "vite": "^8.3.5",
+    "vue": "^3.5.44",
+    "vue-i18n": "^11.4.17",
+    "vue-router": "^5.4.0"
   },
   "peerDependenciesMeta": {
+    "@vue/devtools-api": {
+      "optional": true
+    },
     "cypress": {
       "optional": true
     },
@@ -94,52 +97,49 @@
     "rollup-plugin-visualizer": {
       "optional": true
     },
-    "stylelint": {
-      "optional": true
-    },
     "vite": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@auth0/auth0-spa-js": "2.1.3",
-    "@eslint/js": "^9.25.1",
-    "@lilaquadrat/frontend": "^0.2.0",
-    "@lilaquadrat/interfaces": "1.48.0",
-    "@lilaquadrat/sdk": "^0.1.2",
-    "@types/node": "^22.15.3",
+    "@auth0/auth0-spa-js": "2.30.0",
+    "@eslint/js": "^10.0.1",
+    "@lilaquadrat/frontend": "^0.2.19",
+    "@lilaquadrat/interfaces": "^2.0.0",
+    "@lilaquadrat/sdk": "^0.2.2",
+    "@types/node": "^26.6.6",
     "@types/object-path": "^0.11.4",
     "@types/qrcode": "^1.5.5",
-    "@types/uuid": "^10.0.0",
     "@types/youtube": "^0.1.0",
-    "@typescript-eslint/eslint-plugin": "^8.31.1",
-    "@typescript-eslint/parser": "^8.31.1",
-    "@vitejs/plugin-vue": "^5.2.3",
-    "@vue/eslint-config-typescript": "^14.5.0",
-    "@vue/tsconfig": "^0.7.0",
-    "axios": "^1.9.0",
-    "commitizen": "^4.3.1",
-    "cypress": "^15.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.72.1",
+    "@typescript-eslint/parser": "^8.72.1",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vue/devtools-api": "^8.2.1",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "@vue/tsconfig": "^0.9.1",
+    "axios": "^1.21.0",
+    "commitizen": "^4.3.2",
+    "cypress": "^16.2.1",
     "cz-conventional-changelog": "^3.3.0",
-    "dayjs": "^1.11.13",
-    "eslint": "^9.25.1",
-    "eslint-plugin-vue": "^10.1.0",
-    "globals": "^16.0.0",
-    "less": "^4.3.0",
+    "dayjs": "^1.11.23",
+    "eslint": "^10.14.0",
+    "eslint-plugin-vue": "^10.12.0",
+    "globals": "^17.14.0",
+    "keycloak-js": "^26.2.5",
+    "less": "^4.9.1",
     "object-path": "^0.11.8",
-    "pinia": "^3.0.2",
+    "pinia": "^4.1.0",
     "qrcode": "^1.5.4",
-    "rollup-plugin-visualizer": "^5.14.0",
+    "rollup-plugin-visualizer": "^7.1.1",
     "standard-version": "^9.5.0",
-    "stylelint": "^16.19.1",
-    "typescript": "~5.8.3",
-    "uuid": "^11.1.0",
-    "vite": "^8.0.15",
-    "vue": "^3.5.13",
-    "vue-eslint-parser": "^10.1.3",
-    "vue-i18n": "^11.4.4",
-    "vue-router": "^4.5.1",
-    "vue-tsc": "^2.2.10"
+    "typescript": "~6.0.3",
+    "uuid": "^14.0.3",
+    "vite": "^8.3.5",
+    "vue": "^3.5.44",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-i18n": "^11.4.17",
+    "vue-router": "^5.4.0",
+    "vue-tsc": "^3.3.14"
   },
   "config": {
     "commitizen": {

package/src/client-entry.ts

@@ -8,20 +8,20 @@ import { getAppInstance, type AppComponents } from './main';
  * boots the browser app. the project passes its own root component, module
  * registries and route sets - everything else is framework.
  */
-export function createClientEntry (options: { components: AppComponents, routes: RouteSets, initAuth?: boolean }) {
+export function createClientEntry(options: { components: AppComponents, routes: RouteSets, initAuth?: boolean }) {
 
-  const { app, router } = getAppInstance({}, getRoutes(options.routes), !!window.__INITIAL_STATE__, options.components);
+    const { app, router } = getAppInstance({}, getRoutes(options.routes), !!window.__INITIAL_STATE__, options.components);
 
-  // the static preview has no backend: skip the auth0 init and the customer call
-  hooks(router, { initAuth: options.initAuth ?? !__PREVIEW__ }, 'client');
+    // the static preview has no backend: skip auth init and the customer call
+    hooks(router, { initAuth: options.initAuth ?? !__PREVIEW__ }, 'client');
 
-  router.isReady().then(() => {
+    router.isReady().then(() => {
 
-    app.mount('#app');
+        app.mount('#app');
 
-  });
+    });
 
-  return { app, router };
+    return { app, router };
 
 }
 

package/src/components/partials/error.partial.vue

@@ -17,21 +17,21 @@ const data = ref<SDKResponse<BasicData<Content>>>();
 
 watch(props, () => getContent());
 
-function getFilename () {
+function getFilename() {
 
-  if(props.hint) return props.hint;
+    if(props.hint) return props.hint;
 
-  const nameArray: string[] = ['error', props.status.toString()];
+    const nameArray: string[] = ['error', props.status.toString()];
 
-  if(props.type) nameArray.push(props.type);
+    if(props.type) nameArray.push(props.type);
 
-  return nameArray.join('-');
+    return nameArray.join('-');
 
 }
 
-async function getContent () {
+async function getContent() {
 
-  data.value = await store.getContent({filename: getFilename()}, 'public') as SDKResponse<BasicData<Content>>;
+    data.value = await store.getContent({filename: getFilename()}, 'public') as SDKResponse<BasicData<Content>>;
 
 }
 
@@ -39,31 +39,31 @@ onBeforeMount(async () => await getContent());
 
 const useData = computed(() => {
 
-  if(data?.value?.data?.modules) return data.value?.data;
+    if(data?.value?.data?.modules) return data.value?.data;
 
-  if(store.staticData) {
+    if(store.staticData) {
 
-    if(props.hint) {
+        if(props.hint) {
   
-      return store.staticData[props.hint];
+            return store.staticData[props.hint];
   
-    }
+        }
   
-    if(props.status > 0) {
+        if(props.status > 0) {
   
-      return store.staticData[props.status];
+            return store.staticData[props.status];
   
-    }
+        }
 
-  }
+    }
 
-  return undefined;
+    return undefined;
 
 });
 const contentMerged = computed(() => {
 
-  if(useData.value) return prepareContent(useData.value);
-  return prepareContent({})
+    if(useData.value) return prepareContent(useData.value);
+    return prepareContent({})
 
 }); 
 

package/src/components/partials/main-components.partial.vue

@@ -27,137 +27,142 @@ const isLocked = computed(() => contentType.value == 'members' && userStore.lock
 watch(route, () => getContent());
 watch(() => userStore.locked, () => {
 
-  if(!userStore.locked) {
-    getContent();
-  }
+    if(!userStore.locked) {
+
+        getContent();
+    
+    }
 
 });
 
 onBeforeMount(async () => await getContent());
 onServerPrefetch(() => getStoreContent());
 
-function getStoreContent () {
+function getStoreContent() {
 
-  const contentId = HelpersPlugin.getFilename(route.meta.contentType as 'public' | 'members', props.type);
-  const storeContent = contentStore.findByFilename(contentId);
+    const contentId = HelpersPlugin.getFilename(route.meta.contentType as 'public' | 'members', props.type);
+    const storeContent = contentStore.findByFilename(contentId);
 
-  if(!storeContent) return;
+    if(!storeContent) return;
 
-  data.value = {
-    data  : storeContent,
-    status: 200,
-  };
+    data.value = {
+        data: storeContent,
+        status: 200,
+    };
 
-  loading.value = 200;
+    loading.value = 200;
 
-  dataMerged.value = mergeContent(data.value.data);
+    dataMerged.value = mergeContent(data.value.data);
 
 }
 
-async function getContent () {
+async function getContent() {
 
-  getStoreContent();
+    getStoreContent();
   
-  const contentId = HelpersPlugin.getFilename(route.meta.contentType as 'public' | 'members', props.type);
+    const contentId = HelpersPlugin.getFilename(route.meta.contentType as 'public' | 'members', props.type);
   
-  if(data.value?.data?.id === contentId) {
+    if(data.value?.data?.id === contentId) {
     
-    return;
+        return;
     
-  }
+    }
 
-  if(isLocked.value) {
+    if(isLocked.value) {
 
-    loading.value = 0;
-    error.value = true;
+        loading.value = 0;
+        error.value = true;
 
-    return;
-  }
+        return;
+    
+    }
 
-  if(contentType.value !== typeCache.value) {
+    if(contentType.value !== typeCache.value) {
 
-    loading.value = 0;
-    error.value = false;
-    data.value = undefined;
+        loading.value = 0;
+        error.value = false;
+        data.value = undefined;
 
-  }
+    }
 
-  const storeData = contentStore.findByFilename(contentId);
+    const storeData = contentStore.findByFilename(contentId);
 
-  if(storeData) {
+    if(storeData) {
 
-    data.value = {data: storeData, status: 200};
-    loading.value = 200;
-    return;
+        data.value = {data: storeData, status: 200};
+        loading.value = 200;
+        return;
 
-  }
+    }
     
-  // get content only if there is a difference between the current and the needed content
-  if (data.value?.data?.id !== contentId && loading.value === 0) {
+    // get content only if there is a difference between the current and the needed content
+    if (data.value?.data?.id !== contentId && loading.value === 0) {
     
-    loading.value = 100;
+        loading.value = 100;
         
-    try {
+        try {
         
-      data.value = await store.getContent({filename: contentId}, contentType.value) as SDKResponse<BasicData<Content>>;
-      loading.value = data.value.status;
+            data.value = await store.getContent({filename: contentId}, contentType.value) as SDKResponse<BasicData<Content>>;
+            loading.value = data.value.status;
 
-    } catch (e: any) {
+        } catch (e: any) {
 
-      data.value = undefined;
-      error.value = true;
-      loading.value = e?.response?.status;
+            data.value = undefined;
+            error.value = true;
+            loading.value = e?.response?.status;
         
-    }
+        }
 
-    if(data.value?.status === 403 || data.value?.status === 401) {
+        if(data.value?.status === 403 || data.value?.status === 401) {
 
-      error.value = true;
-      loading.value = data.value?.status;
-      data.value = undefined;
+            error.value = true;
+            loading.value = data.value?.status;
+            data.value = undefined;
 
-    } 
+        } 
 
-    typeCache.value = route.meta.contentType as string;
+        typeCache.value = route.meta.contentType as string;
 
-  }
+    }
 
-  if(data.value) {
+    if(data.value) {
 
-    dataMerged.value = mergeContent(data.value?.data);
+        dataMerged.value = mergeContent(data.value?.data);
 
-  } else {
+    } else {
 
-    dataMerged.value = undefined;
+        dataMerged.value = undefined;
 
-  }
+    }
 
 }
 
-function mergeContent (baseContent: BasicData<Content>) {
+function mergeContent(baseContent: BasicData<Content>) {
 
-  if(baseContent) {
+    if(baseContent) {
   
-    const safeData = hardCopy(baseContent);
+        const safeData = hardCopy(baseContent);
 
-    if(safeData.modules) {
-      /**
+        if(safeData.modules) {
+
+            /**
        * content without generic data is the normal case for a static page, and
        * generateDataWithContent reads Object.keys of what it is given - so it
        * throws on undefined instead of returning nothing
        */
-      if(safeData.genericData) {
+            if(safeData.genericData) {
 
-        distributeGenericData(safeData.modules, generateDataWithContent(safeData.genericData as GenericData));
+                distributeGenericData(safeData.modules, generateDataWithContent(safeData.genericData as GenericData));
 
-      }
-    }
+            }
+        
+        }
 
-    return prepareContent(safeData);
+        return prepareContent(safeData);
 
-  }
+    }
 
-  return undefined;
+    return undefined;
 
 } 
 

package/src/components/partials/qrcode.partial.vue

@@ -9,21 +9,21 @@ const qrCanvas = ref<HTMLCanvasElement | null>(null);
 
 onMounted(() => {
 
-  renderQRCode();
+    renderQRCode();
 
 });
 
 const renderQRCode = () => {
 
-  if (qrCanvas.value) {
+    if (qrCanvas.value) {
 
-    QRCode.toCanvas(qrCanvas.value, props.content, {
-      errorCorrectionLevel: 'M',
-      margin              : 5,
-      width               : 250,
-    })
+        QRCode.toCanvas(qrCanvas.value, props.content, {
+            errorCorrectionLevel: 'M',
+            margin: 5,
+            width: 250,
+        })
     
-  }
+    }
 
 };
 

package/src/functions/AuthProviderFactory.ts

@@ -0,0 +1,30 @@
+import type AuthConfig from '../interfaces/AuthConfig.interface';
+import type AuthProvider from '../interfaces/AuthProvider.interface';
+
+export default async function AuthProviderFactory(config: AuthConfig): Promise<AuthProvider> {
+
+    // These targets inline dynamic imports, so eliminate the SDK branches at build time.
+    if (import.meta.env.SSR || (typeof __PREVIEW__ !== 'undefined' && __PREVIEW__)) {
+
+        throw new Error('AUTH_UNAVAILABLE_FOR_TARGET');
+    
+    }
+
+    switch (config.type) {
+    case 'auth0': {
+
+        const { default: Auth0Provider } = await import('./auth0.provider');
+        return new Auth0Provider(config.options);
+    
+    }
+    case 'keycloak': {
+
+        const { default: KeycloakProvider } = await import('./keycloak.provider');
+        return new KeycloakProvider(config);
+    
+    }
+    default:
+        throw new Error('AUTH_PROVIDER_UNAVAILABLE');
+    }
+
+}