@lilaquadrat/design-core 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lilaquadrat/design-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "framework layer shared by every lilaquadrat STUDIO design: app bootstrap, router, stores, plugins and build tooling",
   "type": "module",
   "license": "MIT",
@@ -10,6 +10,10 @@
     "url": "https://lilaquadrat.de"
   },
   "homepage": "https://lilaquadrat.de",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@ssh.dev.azure.com/v3/lilaquadrat/studio-packages/studio-design-core"
+  },
   "engines": {
     "node": ">=18"
   },
@@ -53,13 +57,14 @@
   "scripts": {
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --fix",
+    "commit": "cz",
     "release": "standard-version"
   },
   "peerDependencies": {
     "@auth0/auth0-spa-js": "^2.1.3",
-    "@lilaquadrat/interfaces": ">=1.31.0",
+    "@lilaquadrat/frontend": ">=0.2.0",
+    "@lilaquadrat/interfaces": ">=1.48.0",
     "@lilaquadrat/sdk": "^0.1.2",
-    "@lilaquadrat/studio": "^9.14.3",
     "axios": "^1.9.0",
     "cypress": "^15.0.0",
     "dayjs": "^1.11.13",
@@ -99,9 +104,9 @@
   "devDependencies": {
     "@auth0/auth0-spa-js": "2.1.3",
     "@eslint/js": "^9.25.1",
-    "@lilaquadrat/interfaces": "1.31.0",
+    "@lilaquadrat/frontend": "^0.2.0",
+    "@lilaquadrat/interfaces": "1.48.0",
     "@lilaquadrat/sdk": "^0.1.2",
-    "@lilaquadrat/studio": "9.15.4",
     "@types/node": "^22.15.3",
     "@types/object-path": "^0.11.4",
     "@types/qrcode": "^1.5.5",
@@ -140,9 +145,5 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  },
-  "resolutions": {
-    "@lilaquadrat/sdk/@lilaquadrat/interfaces": "1.31.0",
-    "@lilaquadrat/studio/@lilaquadrat/interfaces": "1.31.0"
   }
 }

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

@@ -2,7 +2,7 @@
 import useMainStore from '../../stores/main.store';
 import type { BasicData, Content } from '@lilaquadrat/interfaces';
 import type { SDKResponse } from '@lilaquadrat/sdk';
-import { prepareContent } from '@lilaquadrat/studio/lib/esm/frontend';
+import { prepareContent } from '@lilaquadrat/frontend/content';
 import { watch } from 'vue';
 import { onBeforeMount } from 'vue';
 import { ref, computed } from 'vue';

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

@@ -5,7 +5,7 @@ import useMainStore from '../../stores/main.store';
 import useUserStore from '../../stores/user.store';
 import type { BasicData, Content, ContentWithPositions, GenericData } from '@lilaquadrat/interfaces';
 import type { SDKResponse } from '@lilaquadrat/sdk';
-import { distributeGenericData, generateDataWithContent, hardCopy, prepareContent } from '@lilaquadrat/studio';
+import { distributeGenericData, generateDataWithContent, hardCopy, prepareContent } from '@lilaquadrat/frontend/content';
 import { ref, computed, watch, onServerPrefetch, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
 

package/src/libs/Models.class.ts

@@ -1,5 +1,5 @@
 import { v4 as uuid } from 'uuid';
-import { hardCopy } from '@lilaquadrat/studio/lib/esm/frontend';
+import { hardCopy } from '@lilaquadrat/frontend/content';
 
 type DeclarationTypes = 'string' | 'number' | 'boolean' | 'object';
 type SingleDeclaration = { type: 'string', default?: string } |

package/src/main.ts

@@ -3,7 +3,11 @@ import { createPinia, type StateTree } from 'pinia';
 import createRouter from './mixins/createRouter';
 import { loadViaDeclarationSync } from './mixins/loadComponents';
 import i18n from './plugins/translations';
-import resizePlugin from './plugins/resize';
+/**
+ * side effect import: the resize singleton in @lilaquadrat/frontend attaches its
+ * listeners on import, there is no plugin to install
+ */
+import './plugins/resize';
 import HelpersPlugin from './plugins/filters';
 import youtubePlugin from './plugins/youtube';
 import traceablePlugin from './plugins/traceable';
@@ -70,7 +74,6 @@ export function getAppInstance (context: any, routes: readonly RouteRecordRaw[],
 
   app.use(i18n);
   app.use(HelpersPlugin);
-  app.use(resizePlugin);
   app.use(youtubePlugin);
   app.use(traceablePlugin);
   app.use(authPlugin);

package/src/plugins/inview.ts

@@ -1,351 +1,9 @@
-import { computed, watch } from 'vue';
-import { ref } from 'vue';
-import { type Ref } from 'vue';
-
-class Inview {
-
-  timeout!: NodeJS.Timeout | undefined;
-
-  lastScrollingAdjustment = 0;
-
-  debounceTime: number = 50;
-
-  isTop = ref<boolean>(false);
-
-  scrolledEvent: Event;
-
-  scrolled = ref<number>(0);
-
-  moduleAdded = ref<number>(0);
-
-  scrollDirection = ref<'up' | 'down'>();
-
-  parentElement = ref<HTMLElement>();
-
-  lastScrollY = 0;
-  lastTimestamp = 0;
-  scrollVelocity = 0;
-
-  /**
-  * if true we fire an inital scroll event to indicate that scrolling has started without waiting for the debounce
-  */
-  triggerStart = ref<boolean>(true);
-
-  safeWindow = computed(() => {
-
-    if (typeof window === 'undefined') return null;
-    if (this.parentElement.value) return this.parentElement.value;
-    return window;
-
-  });
-
-  scrollY () {
-
-    if (this.safeWindow.value instanceof Window) {
-
-      return this.safeWindow.value.scrollY;
-
-    }
-
-    if (this.parentElement.value) {
-
-      return this.parentElement.value.scrollTop;
-    }
-
-    return 0
-
-  }
-
-  height () {
-
-    if (this.safeWindow.value instanceof Window) {
-
-      return this.safeWindow.value.outerHeight;
-
-    }
-
-    if (this.parentElement.value) {
-
-      return this.parentElement.value.offsetHeight;
-    }
-
-    return 0
-    
-  }
-
-  constructor () {
-
-    this.scrolledEvent = new Event('scrolled');
-    this.checkIsTop();
-
-    if (this.safeWindow.value) {
-
-      this.safeWindow.value?.addEventListener('scroll', () => {
-
-        this.debounce();
-
-      });
-
-    }
-
-  }
-
-  setParentElement (element: HTMLElement) {
-
-    this.parentElement.value = element;
-    this.addScrollListener(element);
-
-  }
-
-  addScrollListener (element: Element) {
-
-    element.addEventListener('scroll', () => {
-
-      const currentTimestamp = performance.now();
-      const deltaY = this.scrollY() - this.lastScrollY;
-      const deltaTime = currentTimestamp - this.lastTimestamp;
-  
-      // Calculate velocity (pixels per millisecond)
-      this.scrollVelocity = Math.abs(deltaY / deltaTime);
-  
-      this.lastScrollY = this.scrollY();
-      this.lastTimestamp = currentTimestamp;
-  
-      // console.log(`Scroll Velocity: ${this.scrollVelocity.toFixed(2)} pixels/ms`);
-
-      this.debounce();
-
-    });
-
-  }
-
-  trigger (isStart?: boolean) {
-
-    if (!this.safeWindow.value) return;
-
-    this.checkIsTop();
-    this.scrollDirection.value = this.scrolled.value > this.scrollY()
-      ? 'down'
-      : 'up'
-    this.scrolled.value = this.scrollY();
-
-    this.safeWindow.value?.dispatchEvent(this.scrolledEvent);
-    if (!isStart) this.triggerStart.value = true;
-
-  }
-
-  checkIsTop () {
-
-    if (!this.safeWindow.value) return;
-
-    this.isTop.value = this.scrollY() <= 0
-
-  }
-
-  debounce () {
-
-    /**
-     * indicates that the scrolling has begun and fire an inital scrolling event without waiting for the debounce
-     */
-    if (this.triggerStart.value) {
-
-      this.triggerStart.value = false;
-      this.trigger(true);
-
-    }
-
-    clearTimeout(this.timeout);
-    this.timeout = setTimeout(() => {
-
-      this.trigger();
-
-    }, this.debounceTime);
-
-  }
-
-  check (component: HTMLElement, state: Ref<string[]>, options?: { align?: boolean }) {
-    const element = component;
-    const newState: string[] = [];
-
-    if (typeof element?.getBoundingClientRect !== 'function') return;
-    if (!this.safeWindow.value) return;
-
-    const viewportHeight = this.height();
-    const height = viewportHeight / 2;
-    const rect = element.getBoundingClientRect();
-    let top = rect.top - height + 10;
-    let bottom = rect.bottom - height + 10;
-    let visibleHeight = 0;
-    let marginToTop = 0;
-
-    if (this.parentElement.value) {
-
-      const parentRect = this.parentElement.value.getBoundingClientRect();
-      // Adjust top and bottom based on parent element's top and bottom
-      const parentTop = parentRect.top;
-      const parentBottom = parentRect.bottom;
-
-      top = rect.top - parentTop - height + 10;
-      bottom = rect.bottom - parentTop - height + 10;
-
-      marginToTop = Math.abs(rect.top - parentTop);
-
-      // Adjust visibleTop and visibleBottom for parent element
-      const visibleTop = Math.max(parentTop, rect.top);
-      const visibleBottom = Math.min(parentBottom, rect.bottom);
-
-      visibleHeight = Math.max(0, visibleBottom - visibleTop);
-
-    } else {
-
-      // Original calculations if no parent element is provided
-      const visibleTop = Math.max(0, rect.top);
-      const visibleBottom = Math.min(rect.bottom, viewportHeight);
-
-      marginToTop = Math.abs(rect.top);
-
-      visibleHeight = Math.max(0, visibleBottom - visibleTop);
-
-    }
-
-    if (top > 0) {
-      newState.push('inview-after');
-    }
-
-    if (top <= 0 && bottom >= 0) {
-      newState.push('inview-current');
-    }
-
-    if (bottom < 0) {
-      newState.push('inview-before');
-    }
-
-    // Check if more than 30% of the element is visible
-    if (visibleHeight / rect.height >= 0.3) {
-      newState.push('inview-visible');
-    }
-
-    if (newState.includes('inview-current') && options?.align) {
-
-      if(!this.lastScrollingAdjustment || Date.now() - this.lastScrollingAdjustment > 1500) {
-
-        requestAnimationFrame(() => this.adjustScrolling(element, marginToTop));
-
-      }
-
-    }
-
-    state.value.length = 0;
-    state.value.push(...newState);
-  }
-
-  checkPreload (component: HTMLElement, state: Ref<boolean>) {
-
-    const preloadRange = window?.outerHeight * 2;
-    const rect = component.getBoundingClientRect();
-
-    if (rect.bottom > -preloadRange && rect.top < preloadRange) {
-
-      state.value = true;
-
-    }
-
-  }
-
-  adjustScrolling (component: HTMLElement, top: number) {
-
-    const offset = this.height() / 10;
-
-    if (top < offset && top > (offset * -1)) {
-
-      this.lastScrollingAdjustment = Date.now();
-
-      component.scrollIntoView({
-        behavior: 'smooth',
-      });
-
-    }
-
-  }
-
-  moduleRendered () {
-
-    this.moduleAdded.value++;
-
-  }
-
-}
-
-const inview = new Inview();
-
 /**
- * the preload option is used to check if the element is in range of two times of the viewport and changes the preload value accordingly
+ * Inview lives in @lilaquadrat/frontend - it is shared with the internal apps,
+ * and that copy is the truth. This path stays so a design keeps importing
+ * '@/plugins/inview'.
  *
- * without the preload options the inviewState array holds the following values
- ** inview-before - the element is before the viewport
- ** inview-current - the element is centered in the viewport
- ** inview-after - the element is after the viewport
- ** inview-visible - more than 30% of the element are visible in the current viewport, regardless if it is centered or nor
+ * Importing the module starts the scroll listener.
  */
-
-export function useInview (element?: Ref<HTMLElement | undefined>, options?: { align?: boolean, preload?: boolean }) {
-
-  const state = ref<string[]>([]);
-  const preload = ref<boolean>(false);
-
-  if (element) {
-
-    watch(element, () => {
-
-      if (element.value) {
-
-        inview.moduleRendered();
-
-        if (options?.preload) {
-
-          inview.checkPreload(element.value, preload);
-
-          const unwatchPreload = watch(inview.scrolled, () => {
-
-            if (!element.value) return;
-
-            inview.checkPreload(element.value as HTMLElement, preload);
-
-            //unwatch when the preload value is true
-            if (preload.value) unwatchPreload();
-
-          })
-
-        } else {
-
-          inview.check(element.value, state, options);
-
-          watch(inview.scrolled, () => {
-
-            inview.check(element.value as HTMLElement, state, options)
-
-          })
-
-          watch(inview.moduleAdded, () => {
-
-            requestAnimationFrame(() => {
-
-              inview.check(element.value as HTMLElement, state, options);
-
-            })
-
-          })
-
-        }
-
-      }
-
-    })
-
-  }
-
-  return { inviewState: state, scrolled: inview.scrolled, scrollDirection: inview.scrollDirection, preload };
-
-}
-
-export default inview;
+export * from '@lilaquadrat/frontend/inview';
+export { default } from '@lilaquadrat/frontend/inview';

package/src/plugins/resize.ts

@@ -1,128 +1,7 @@
-import logger from '../mixins/logger';
-import { ref, computed } from 'vue';
-
-class Resize {
-
-  timeout: any;
-
-  debounceTime: number = 50;
-
-  resizedEvent: Event;
-
-  mediaEvent: Event;
-
-  media = ref<string>('mobile');
-
-  resized = ref<number>(Date.now());
-
-  realHeight = ref<number>(0);
-
-  /**
-  * if true we fire an inital resized event to indicate that resizing has started without waiting for the debounce
-  */
-  triggerStart = ref<boolean>(true); 
-
-  safeWindow = computed(() => {
-
-    if(typeof window === 'undefined') return null;
-    return window;
-
-  });
-
-  constructor () {
-
-    this.resizedEvent = new Event('resized');
-    this.mediaEvent = new Event('media');
-    this.realHeight.value = this.safeWindow.value?.innerHeight || 0;
-
-    this.getMediaQuery();
-
-    this.safeWindow.value?.addEventListener('resize', () => this.debounce());
-
-  }
-
-  trigger (isStart?: boolean) {
-
-    this.getMediaQuery();
-
-    if(this.safeWindow.value) {
-
-      this.realHeight.value = this.safeWindow.value?.innerHeight;
-    }
-
-    this.resized.value = Date.now();
-    this.safeWindow.value?.dispatchEvent(this.resizedEvent);
-
-    if(!isStart) this.triggerStart.value = true;
-
-  }
-
-  getMediaQuery (): void {
-
-    if(typeof document === 'undefined') return;
-    
-    const element = document.getElementById('mediadetection');
-    
-    if (!element) return;
-
-    const child = Array.from(element.children).find(child => this.safeWindow.value?.getComputedStyle(child).display === 'block');
-
-    if (child) {
-      const childClass = child.getAttribute('class') as string;
-
-      if (this.media.value !== childClass) {
-
-        this.media.value = childClass;
-        this.safeWindow.value?.dispatchEvent(this.mediaEvent);
-
-      } else {
-
-        this.media.value = childClass;
-        
-      }
-    }
-  }
-
-  debounce () {
-
-    /**
-     * indicates that the scrolling has begun and fire an inital scrolling event without waiting for the debounce
-     */
-    if(this.triggerStart.value) {
-
-      this.triggerStart.value = false;
-      this.trigger(true);
-    
-    } 
-
-    clearTimeout(this.timeout);
-    this.timeout = setTimeout(() => {
-
-      this.trigger();
-
-    }, this.debounceTime);
-
-  }
-
-}
-
-const resize = new Resize();
-const plugin = {
-  install: (): void => {
-    // this exists only for initialization purposes
-    logger.plugins('resize installed');
-  },
-};
-
-function useResize () {
-
-  return {realHeight: resize.realHeight, media: resize.media, resized: resize.resized, plugin: resize};
-
-}
-
-export default plugin;
-
-export {
-  useResize,
-  resize
-};
+/**
+ * Resize lives in @lilaquadrat/frontend - it is shared with the internal apps,
+ * and that copy is the truth. This path stays so a design keeps importing
+ * '@/plugins/resize'.
+ */
+export * from '@lilaquadrat/frontend/resize';
+export { default } from '@lilaquadrat/frontend/resize';

package/src/stores/main.store.ts

@@ -7,7 +7,7 @@ import { useAuth } from '../plugins/auth';
 import type FrontendConfig from '../interfaces/FrontendConfig.interface';
 import type { AxiosError } from 'axios';
 import { computed } from 'vue';
-import { hardCopy } from '@lilaquadrat/studio/lib/esm/frontend';
+import { hardCopy } from '@lilaquadrat/frontend/content';
 
 export const useMainStore = defineStore('main', () => {
 

package/src/views/content.view.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { distributeGenericData, generateDataWithContent, hardCopy, prepareContent } from '@lilaquadrat/studio';
+import { distributeGenericData, generateDataWithContent, hardCopy, prepareContent } from '@lilaquadrat/frontend/content';
 import type { BasicData, Content, ContentWithPositions, GenericData } from '@lilaquadrat/interfaces';
 import useMainStore from '../stores/main.store';
 import { useRoute } from 'vue-router';

package/src/views/editor.view.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import useEditorStore from '../stores/editor.store';
-import { hardCopy, prepareContent } from '@lilaquadrat/studio/lib/esm/frontend';
+import { hardCopy, prepareContent } from '@lilaquadrat/frontend/content';
 import { getCurrentInstance, nextTick, onMounted, ref } from 'vue';
 import { type Content, type ContentWithPositions, type EditorActiveModule, type StudioIframeMessage } from '@lilaquadrat/interfaces';
 import { onBeforeUnmount } from 'vue';

package/src/views/signup-account.view.vue

@@ -2,7 +2,7 @@
 import { auth } from '../plugins/auth';
 import useMainStore from '../stores/main.store';
 import useUserStore from '../stores/user.store';
-import { prepareContent } from '@lilaquadrat/studio/lib/esm/frontend';
+import { prepareContent } from '@lilaquadrat/frontend/content';
 import type { ContentWithPositions } from '@lilaquadrat/interfaces';
 import { computed, onBeforeMount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';

package/tooling/vite.ts

@@ -110,9 +110,14 @@ export function createViteConfig (options: ViteFactoryOptions) {
         host: '0.0.0.0',
       },
       optimizeDeps: {
-        // keep both packages in source form: their less needs the project
-        // variables injected below, which a prebundle would not see
-        exclude: ['@lilaquadrat/studio', '@lilaquadrat/design-core']
+        // design-core ships source, and its less needs the project variables
+        // injected below - a prebundle would not see them.
+        //
+        // @lilaquadrat/frontend rides along because design-core imports it:
+        // prebundling it there and serving it raw here would give the resize and
+        // inview singletons two module identities, and a second scroll listener
+        // with it
+        exclude: ['@lilaquadrat/design-core', '@lilaquadrat/frontend']
       },
       build: {
         cssCodeSplit   : false,
@@ -173,13 +178,22 @@ export function createViteConfig (options: ViteFactoryOptions) {
           'vue-router',
           'vue-i18n',
           'pinia',
-          '@lilaquadrat/interfaces',
+          // holds a static request cache, so a second copy would cache twice
           '@lilaquadrat/sdk',
-          '@lilaquadrat/studio',
+          // resize and inview are singletons: a second copy means a second
+          // scroll listener and a second set of refs nobody reads
+          '@lilaquadrat/frontend',
           '@auth0/auth0-spa-js',
           'axios',
           'dayjs',
         ],
+        /**
+         * @lilaquadrat/studio is deliberately NOT deduped: it is the backend
+         * package and a project may still hold a copy for other reasons, while
+         * a second one costs nothing here.
+         *
+         * @lilaquadrat/interfaces is types only, so it has nothing to dedupe.
+         */
       },
       define: {
         '__FRONTEND_CONFIG__'                  : JSON.stringify(config),