fix: make base and canvas paths configurable

itsjavi · Mar 27, 2024 · 9dfc797 · 9dfc797
1 parent 104f743
commit 9dfc797
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/packages/storylite/src/app/stores/global.ts b/packages/storylite/src/app/stores/global.ts
@@ -15,13 +15,18 @@ const builtinAddons: SLAddonsMap = new Map(
   Array.from(getDefaultToolbarAddons().entries()).map(([id, addon]) => [id, { ...addon, id }]),
 )
 
+// @ts-ignore
+const basePath = import.meta?.env?.BASE_URL ? import.meta.env.BASE_URL : '/'
+
 const defaultState: StoryLiteState = {
   canvas: {
     element: null,
     standalone: false,
   },
   config: {
     title: getDefaultTitle(),
+    basePath: basePath,
+    canvasPath: `${basePath}/canvas.html`.replace(/[\/]+/g, '/'),
     defaultStory: 'index',
     iframeProps: {},
     useIframeStyles: true,
@@ -200,3 +205,10 @@ export const useStoryLiteIframe = (): {
     document: doc,
   }
 }
+
+/**
+ * Returns a non-reactive fresh state of the store.
+ */
+export function getStoryLiteState() {
+  return useStoryLiteStore.getState()
+}
diff --git a/packages/storylite/src/services/csf-api/navigation.tsx b/packages/storylite/src/services/csf-api/navigation.tsx
@@ -1,7 +1,7 @@
 import type { SLNode, StoryModuleMap } from '@/types'
 import { isTruthy } from '@/utility'
 
-import { getStoryLiteBasePath } from '../router/getStoryLiteBasePath'
+import { getStoryLiteBaseCanvasPath, getStoryLiteBasePath } from '../router/getStoryLiteBasePath'
 
 export type SLNavigationNode = {
   title: string
@@ -24,7 +24,7 @@ export function getStoryUrl(
   const { standalone, target } = options
   const isIframe = target === 'iframe'
 
-  const targetBasePath = isIframe ? '/canvas.html#' : '#'
+  const targetBasePath = isIframe ? getStoryLiteBaseCanvasPath() + '#' : '#'
   const targetHashBasePath = isIframe ? 'preview/' : ''
   const baseStr = [getStoryLiteBasePath(), targetBasePath, targetHashBasePath].join('').replace(/\/\//g, '/')
 

diff --git a/packages/storylite/src/services/router/getStoryLiteBasePath.ts b/packages/storylite/src/services/router/getStoryLiteBasePath.ts
@@ -1,4 +1,9 @@
+import { getStoryLiteState } from '@/app/stores/global'
+
 export function getStoryLiteBasePath() {
-  // @ts-ignore
-  return import.meta.env.BASE_URL ?? '/m/'
+  return getStoryLiteState().config.basePath
+}
+
+export function getStoryLiteBaseCanvasPath() {
+  return getStoryLiteState().config.canvasPath
 }
diff --git a/packages/storylite/src/types/config.ts b/packages/storylite/src/types/config.ts
@@ -11,6 +11,8 @@ import type { SLUserDefinedAddons } from './ui'
 
 export type SLAppComponentProps = {
   title: SLNode
+  basePath?: string
+  canvasPath?: string
   defaultStory: string
   iframeProps?: Omit<Record<string, any>, 'src'>
   useIframeStyles?: boolean