likec4 0.48.0 → 0.50.0

package/dist/__app__/src/router.js

@@ -1,14 +1,20 @@
 import { useStore } from '@nanostores/react';
-import { createSearchParams, createRouter, openPage, getPagePath } from '@nanostores/router';
+import { createRouter, createSearchParams, getPagePath } from '@nanostores/router';
 import { computed } from 'nanostores';
+import { equals, isEmpty, isString, mapValues, omitBy } from 'remeda';
 import { BaseUrl } from './const';
+import { startTransition } from 'react';
 export const $router = createRouter({
     index: BaseUrl,
     view: `${BaseUrl}view/:viewId?`,
     export: `${BaseUrl}export/:viewId`,
     embed: `${BaseUrl}embed/:viewId`
+}, {
+    links: true
+});
+const $searchParams = createSearchParams({
+    links: true
 });
-const $searchParams = createSearchParams();
 const asTheme = (v) => {
     const vlower = v?.toLowerCase();
     if (vlower === 'light' || vlower === 'dark') {
@@ -21,17 +27,61 @@ const asPadding = (v) => {
     if (parsed && isFinite(parsed) && isNaN(parsed) === false) {
         return Math.round(parsed);
     }
-    return 20;
+    return undefined;
+};
+const asViewMode = (v) => {
+    const mode = v?.toLowerCase() ?? '';
+    switch (mode) {
+        case 'dot':
+        case 'mmd':
+        case 'd2':
+        case 'react': {
+            return mode;
+        }
+        default: {
+            return undefined;
+        }
+    }
 };
-const $route = computed([$router, $searchParams], (r, v) => {
+const searchParams = computed($searchParams, v => {
+    return {
+        theme: asTheme(v.theme),
+        padding: asPadding(v.padding),
+        mode: asViewMode(v.mode),
+        showUI: 'showUI' in v ? v.showUI === 'true' : undefined
+    };
+});
+const filter = (v, k) => v == undefined ||
+    (k === 'theme' && v === 'dark') ||
+    (k === 'mode' && v === 'react') ||
+    (k === 'padding' && v === 20);
+function omitDefaults(v) {
+    return omitBy(v, filter);
+}
+export function updateSearchParams(update) {
+    const current = searchParams.get();
+    const next = {
+        ...current,
+        ...update
+    };
+    if (!equals(current, next)) {
+        const params = mapValues(omitDefaults(next), v => (isString(v) ? v : String(v)));
+        startTransition(() => {
+            $searchParams.open(params);
+        });
+    }
+}
+export const useSearchParams = () => useStore(searchParams);
+const $route = computed([$router, searchParams], (r, v) => {
     if (r?.route === 'view') {
         return {
             route: 'view',
             params: {
-                viewId: r.params.viewId ?? 'index',
-                theme: asTheme(v.theme) ?? 'dark'
+                viewId: (r.params.viewId ?? 'index'),
+                theme: v.theme ?? 'dark',
+                mode: v.mode ?? 'react'
             },
-            showUI: 'showUI' in v ? v.showUI === 'true' : true
+            showUI: v.showUI ?? true
         };
     }
     if (r?.route === 'export' || r?.route === 'embed') {
@@ -39,7 +89,7 @@ const $route = computed([$router, $searchParams], (r, v) => {
             route: r.route,
             params: {
                 viewId: r.params.viewId,
-                padding: asPadding(v.padding),
+                padding: v.padding ?? 20,
                 theme: r.route === 'embed' ? asTheme(v.theme) : undefined
             },
             showUI: false
@@ -50,29 +100,49 @@ const $route = computed([$router, $searchParams], (r, v) => {
         params: {
             theme: asTheme(v.theme) ?? 'dark'
         },
-        showUI: 'showUI' in v ? v.showUI === 'true' : true
+        showUI: v.showUI ?? false
     };
 });
 export const useRoute = () => useStore($route);
 export const isCurrentDiagram = (view) => {
     const r = $route.get();
-    return (r.route === 'view' || r.route === 'export') && r.params.viewId === view.id;
+    return ((r.route === 'view' || r.route === 'export' || r.route === 'embed') &&
+        r.params.viewId === view.id);
 };
+function currentSearchParams() {
+    const params = omitDefaults(searchParams.get());
+    if (isEmpty(params)) {
+        return '';
+    }
+    const urlSearchParams = new URLSearchParams();
+    for (const [k, v] of Object.entries(params)) {
+        urlSearchParams.set(k, isString(v) ? v : String(v));
+    }
+    const asString = urlSearchParams.toString();
+    return asString !== '' ? '?' + asString : '';
+}
+function getRoutePath(name, ...params) {
+    // if (params.length > 1) {
+    //   let p = params[0]!
+    //   p.
+    // }
+    return getPagePath($router, name, ...params) + currentSearchParams();
+}
+function openRoute(name, ...params) {
+    startTransition(() => {
+        $router.open(getRoutePath(name, ...params));
+    });
+}
 export const $pages = {
     index: {
-        open: () => openPage($router, 'index')
+        url: () => getRoutePath('index'),
+        open: () => openRoute('index')
     },
     view: {
-        open: (viewId) => openPage($router, 'view', { viewId })
+        url: (viewId) => getRoutePath('view', { viewId }),
+        open: (viewId) => openRoute('view', { viewId })
     },
     embed: {
-        path: (viewId) => getPagePath($router, 'embed', { viewId })
+        path: (viewId) => getRoutePath('embed', { viewId })
     }
 };
-// if (import.meta.env.DEV) {
-//   logger({
-//     $searchParams,
-//     $router,
-//     $route
-//   })
-// }

package/dist/__app__/src/utils/utils.js

@@ -1,5 +1,4 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
-    return twMerge(clsx(inputs));
+    return clsx(inputs);
 }

package/dist/__app__/tsconfig.json

@@ -11,6 +11,7 @@
     "skipLibCheck": true,
     "outDir": "dist",
     "allowJs": true,
+    "exactOptionalPropertyTypes": true,
     "moduleResolution": "bundler",
     "esModuleInterop": true,
     "allowArbitraryExtensions": true,