accomadesc 0.3.35 → 0.3.36

package/dist/BookingRequest.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { BookingRequestContent, I18nFacade } from './types.js';
-  import { getContext } from 'svelte';
   import Button from './basic/Button.svelte';
   import Notes from './basic/Notes.svelte';
   import Spinner from './basic/Spinner.svelte';
@@ -55,7 +54,7 @@
   let sending = $state(false);
   let disabled = $derived(preview || errored || successfullySent);
 
-  let occupationState: OccupationState = getOccupationState(calUrl);
+  let occupationState: OccupationState = $derived(getOccupationState(calUrl));
   let invalid = $derived(
     occupationState && arrival && leave ? !occupationState.validRequest(arrival, leave) : false,
   );

package/dist/MainNav.svelte

@@ -19,14 +19,13 @@
     close: () => void;
   } & I18nFacade = $props();
 
-  let allTranslations = $state(supportedLangs);
   const pathForLang = (lang: string) => {
     const pathElements = currentPath.split('/');
     //initial slash results in empty string real first element
     if (pathElements.length == 1) return `/${lang}`;
 
     const firstElement = pathElements[1];
-    if (allTranslations?.includes(firstElement)) {
+    if (supportedLangs?.includes(firstElement)) {
       return ['', lang, ...pathElements.slice(2)].join('/');
     } else {
       return ['', lang, ...pathElements.slice(1)].join('/');
@@ -46,11 +45,11 @@
       </li>
     {/each}
   </ul>
-  {#if allTranslations && allTranslations.length > 1}
+  {#if supportedLangs && supportedLangs.length > 1}
     <fieldset>
       <legend>{translateFunc ? translateFunc('lang') : ''}</legend>
 
-      {#each allTranslations as langKey}
+      {#each supportedLangs as langKey}
         <a
           data-sveltekit-keepfocus
           data-sveltekit-noscroll

package/dist/PageComponent.svelte

@@ -17,7 +17,7 @@
   import Button from './basic/Button.svelte';
   import { fallbackCSS } from './style.js';
   import { GLOBAL_STATE, GlobalState } from './state.svelte';
-  import { setContext } from 'svelte';
+  import { setContext, untrack } from 'svelte';
 
   let {
     hero,
@@ -44,12 +44,11 @@
     calendarTranslation,
   }: PageProps & I18nFacade = $props();
 
-  setContext(GLOBAL_STATE, new GlobalState(disableLinks));
-
-  let pageTitle = hero && hero.title ? hero.title : header ? header : title;
+  // initialize global state, use the initial value of disableLinks
+  setContext(GLOBAL_STATE, new GlobalState(untrack(() => disableLinks)));
 
+  let pageTitle = $derived(hero && hero.title ? hero.title : header ? header : title);
   let langSelectorOpen = $state(false);
-  let allTranslations = $state(supportedLangs);
 
   let currentPath = $derived(page.url.pathname);
   const pathForLang = (lang: string) => {
@@ -58,7 +57,7 @@
     if (pathElements.length == 1) return `/${lang}`;
 
     const firstElement = pathElements[1];
-    if (allTranslations?.includes(firstElement)) {
+    if (supportedLangs?.includes(firstElement)) {
       return ['', lang, ...pathElements.slice(2)].join('/');
     } else {
       return ['', lang, ...pathElements.slice(1)].join('/');
@@ -192,11 +191,11 @@
     {/if}
   {/if}
 
-  {#if langSelectorOpen && allTranslations && allTranslations.length > 1}
+  {#if langSelectorOpen && supportedLangs && supportedLangs.length > 1}
     <fieldset class="lang-selector" transition:fade>
       <legend>{translateFunc ? translateFunc('lang') : ''}</legend>
 
-      {#each allTranslations as langKey}
+      {#each supportedLangs as langKey}
         <a
           class={{
             'lang-link': true,

package/dist/PageFooter.svelte

@@ -4,7 +4,7 @@
 
   let { nav, ref, translateFunc, currentLang }: { nav: Nav; ref?: string } & I18nFacade = $props();
 
-  const contentRef = ref ?? 'footer_html';
+  const contentRef = $derived(ref ?? 'footer_html');
 </script>
 
 <footer>

package/dist/Pricing.svelte

@@ -24,9 +24,9 @@
     currentLang,
   }: PricingContent & I18nFacade = $props();
 
-  if (!ranges || (ranges.length == 0 && entries)) {
-    ranges = entries;
-  }
+  $effect(() => {
+    if (!ranges || (ranges.length == 0 && entries)) ranges = entries;
+  });
 
   const colHeaderStyle: Record<PricingColumn, string> = {
     timeRange: 'width: 20%;',

package/dist/PricingShort.svelte

@@ -14,7 +14,10 @@
     formatFunc,
   }: PricingShortContent & I18nFacade = $props();
 
-  if (!ranges && entries) ranges = entries;
+  $effect(() => {
+    //unclear if this is even needed and working as expected
+    if (!ranges && entries) ranges = entries;
+  });
 
   let filteredEntries = $derived.by(() => {
     let now = DateTime.now();

package/dist/Section.svelte

@@ -53,7 +53,7 @@
 
   let translatedHeader = $derived(header && translateFunc ? translateFunc(header) : '');
 
-  let gridTemplateColumns = $state(`repeat(${columnCount}, 1fr)`);
+  let gridTemplateColumns = $state(`repeat(2, 1fr)`);
 
   let originalPadding = $state(padding);
 

package/dist/SiteState.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type I18nFacade, type OccuplanTranslations } from 'accomadesc';
+import type { CookieSelection, Translation as CookieTranslation } from 'gdpr-cooco-banner';
+import { DateTime } from 'luxon';
+import type { SiteConfig } from './types.ts';
+interface FullTranslation {
+    calendar: OccuplanTranslations;
+    cookies: CookieTranslation;
+    site: Record<string, string>;
+}
+export declare class SiteState implements I18nFacade {
+    fullTranslations: Record<string, FullTranslation>;
+    calendarTranslations: Record<string, OccuplanTranslations>;
+    cookieTranslations: Record<string, CookieTranslation>;
+    siteTranslations: Record<string, Record<string, string>>;
+    supportedLangs: string[];
+    isMenuOpen: boolean;
+    cookieSelection: CookieSelection;
+    currentLang: string;
+    translations: Record<string, Record<string, string>>;
+    calendarTranslation: OccuplanTranslations;
+    cookieTranslation: CookieTranslation;
+    formats: Record<string, Record<string, any>>;
+    selectedTheme: 'light' | 'dark';
+    selectedThemeInitialized: boolean;
+    constructor(siteConfig: SiteConfig, lang: string | undefined);
+    updateCurrentLang: (lang: string) => string;
+    translateFunc: (ref: string) => string;
+    formatFunc: (ref: string, props: Record<string, any>) => string;
+    formatDateFunc: (d: DateTime | string) => string;
+}
+export {};

package/dist/SiteState.svelte.js

@@ -0,0 +1,69 @@
+import { format } from 'accomadesc';
+import { DateTime } from 'luxon';
+export class SiteState {
+    fullTranslations = {};
+    calendarTranslations = {};
+    cookieTranslations = {};
+    siteTranslations = {};
+    supportedLangs = $state(['en']);
+    isMenuOpen = $state(false);
+    cookieSelection = $state({
+        analytics: false,
+        marketing: false,
+        preferences: false,
+        necessary: true,
+    });
+    currentLang = $state('en');
+    translations = $state(this.siteTranslations);
+    calendarTranslation = $derived(this.calendarTranslations[this.currentLang]);
+    cookieTranslation = $state(this.cookieTranslations[this.currentLang]);
+    formats = $state({});
+    selectedTheme = $state('light');
+    selectedThemeInitialized = $state(false);
+    constructor(siteConfig, lang) {
+        if (!lang || !siteConfig.lang.supportedLangs.includes(lang)) {
+            this.currentLang = siteConfig.lang.defaultLang;
+        }
+        else {
+            this.currentLang = lang;
+        }
+        this.fullTranslations = siteConfig.lang.translations;
+        for (const lang in this.fullTranslations) {
+            this.calendarTranslations[lang] = this.fullTranslations[lang].calendar;
+            this.siteTranslations[lang] = this.fullTranslations[lang].site;
+            this.cookieTranslations[lang] = this.fullTranslations[lang].cookies;
+        }
+        this.supportedLangs = siteConfig.lang.supportedLangs;
+        this.formats = siteConfig.lang.formats;
+    }
+    updateCurrentLang = (lang) => (this.currentLang = lang);
+    translateFunc = (ref) => {
+        if (!ref)
+            return 'UNDEF';
+        const current = this.translations[this.currentLang];
+        if (!current[ref])
+            return '';
+        return this.translations[this.currentLang][ref];
+    };
+    formatFunc = (ref, props) => {
+        const fString = this.formats[this.currentLang][ref];
+        if (!fString) {
+            console.log('missing formatFunc', ref);
+            return '';
+        }
+        let formatted = format(fString, props);
+        return formatted;
+    };
+    formatDateFunc = (d) => {
+        let f = 'yyyy-MM-dd';
+        if (this.formats[this.currentLang]?.dateFormat) {
+            f = this.formats[this.currentLang].dateFormat;
+        }
+        let date;
+        if (typeof d === 'string')
+            date = DateTime.fromISO(d);
+        else
+            date = d;
+        return date.toFormat(f);
+    };
+}

package/dist/basic/Button.svelte

@@ -141,7 +141,7 @@
   let innerShadowWidth = $derived(activated ? size / 16 : size / 8);
   let outerShadowWidth = $derived(activated ? size / 8 : size / 4);
 
-  const borderRadius = $state(size / 1.8);
+  const borderRadius = $derived(size / 1.8);
 
   let buttonWidth = $derived.by(() => {
     if (iconName && !text) {

package/dist/occuplan/OccuPlanAvailableInfo.svelte

@@ -23,8 +23,7 @@
     children: Snippet<[AvailableSpans]>;
   } = $props();
 
-  let occupationState: OccupationState = getOccupationState(url, debug);
-
+  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
   let av = $derived(occupationState ? occupationState.calcAvailability(search, maxFutureDate) : {});
 
   onMount(() => {

package/dist/occuplan/OccuPlanGrid.svelte

@@ -49,7 +49,7 @@
 
   const id = randomID();
 
-  let occupationState: OccupationState = getOccupationState(url, debug);
+  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
 
   //let formatFun = $derived(Sqrl.compile(monthHeaderFormat, { useWith: true }));
   const monthHeader = (monthNum: MonthNumbers, year: number): string => {

package/dist/occuplan/OccuPlanPicker.svelte

@@ -56,7 +56,7 @@
     dateSelected?: (arrival: DateTime, leave: DateTime) => void;
   } = $props();
 
-  let occupationState: OccupationState = getOccupationState(url, debug);
+  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
 
   const monthHeader = (monthNum: MonthNumbers, year: number): string => {
     const monthLabel = monthLabels[monthNum];
@@ -103,8 +103,17 @@
     page -= 1;
   };
 
-  let requestStart: DateTime | undefined = $state(arrival);
-  let requestEnd: DateTime | undefined = $state(leave);
+  let requestStart: DateTime | undefined = $state();
+  let requestEnd: DateTime | undefined = $state();
+
+  $effect(() => {
+    requestStart = arrival;
+  });
+
+  $effect(() => {
+    requestEnd = leave;
+  });
+
   let earliestStart: DateTime | undefined = $derived(
     occupationState ? occupationState.earliestRequestStart(requestEnd) : undefined,
   );

package/dist/occuplan/OccuPlanRows.svelte

@@ -47,7 +47,7 @@
 
   const id = randomID();
 
-  let occupationState: OccupationState = getOccupationState(url, debug);
+  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
 
   let page: number = $state(0);
   let rfMonth: number | DateTime = $derived(

package/dist/occuplan/state.svelte.js

@@ -411,7 +411,7 @@ export class OccupationState {
 export const getOccupationState = (url, debug = false) => {
     if (debug)
         console.log('Get OState /w url', url);
-    const stateID = `i-${url}-${OCCUPATION_STATE}`;
+    const stateID = Symbol(`i-${url}-${OCCUPATION_STATE}`);
     let _instance = getContext(stateID);
     if (_instance)
         return _instance;

package/dist/state.svelte.d.ts

@@ -1,4 +1,4 @@
-export declare const GLOBAL_STATE = "GLOBAL_STATE";
+export declare const GLOBAL_STATE: unique symbol;
 export declare class GlobalState {
     disableLinks: boolean;
     constructor(disableLinks: boolean);

package/dist/state.svelte.js

@@ -1,4 +1,4 @@
-export const GLOBAL_STATE = 'GLOBAL_STATE';
+export const GLOBAL_STATE = Symbol('GLOBAL_STATE');
 export class GlobalState {
     disableLinks = $state(false);
     constructor(disableLinks) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accomadesc",
-  "version": "0.3.35",
+  "version": "0.3.36",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -26,16 +26,16 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.3.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.0",
-    "@sveltejs/package": "^2.5.6",
+    "@sveltejs/kit": "^2.49.2",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "@types/luxon": "^3.7.1",
     "gdpr-cooco-banner": "^0.0.11",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.15",
-    "svelte": "^5.43.14",
-    "svelte-check": "^4.3.4",
+    "prettier": "^3.7.4",
+    "prettier-plugin-svelte": "^3.4.1",
+    "publint": "^0.3.16",
+    "svelte": "^5.46.1",
+    "svelte-check": "^4.3.5",
     "typescript": "^5.9.3",
     "vite": "^6.4.1"
   },