composition dimensions

jacob-8 · Oct 19, 2023 · 070e35e · 070e35e
1 parent f47e944
commit 070e35e
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 41 deletions.
diff --git a/packages/kitbook/src/docs/9-maintainer-notes/4-roadmap.md b/packages/kitbook/src/docs/9-maintainer-notes/4-roadmap.md
@@ -4,13 +4,13 @@
 *(you have been warned, early-adopters)*
 
 ## Alpha features I have already planned out and just need to implement - hold your horses
-- composition dimensions
 - visual regression testing
   - using Playwright but do note VitestPreview, [Histoire plugin](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-screenshot) and [Viteshot](https://viteshot.com/)
 - auto-adjusting iframe height
 - i18n
-- swap svelte-markdown from mdsvex
-- compositions display in documentation when referenced, update the MDSvex to parse for links to compositions and just create an ID that can be targeted by composition
+- use remark+rehype for basic html instead of mdsvex
+  - compositions display in documentation when referenced, update the MDSvex to parse for links to compositions and just create an ID that can be targeted by composition
+  - May need .not-prose when hoisted into documentation
 
 ## Beta - please feel free to open issues and discuss what you may be able to contribute!
 - responsive iframes shrink to keep interior resolution

diff --git a/packages/kitbook/src/lib/index.ts b/packages/kitbook/src/lib/index.ts
@@ -1,4 +1,4 @@
-export type { KitbookSettings, Language, ViewerOptions, Viewport, Folder, Modules, Variant, GroupedPage, GroupedPageMap, LoadedModules, UngroupedPage, VariantsModule } from './kitbook-types'
+export type { KitbookSettings, Language, ViewerOptions, Viewport, Folder, Modules, Variant, GroupedPage, GroupedPageMap, LoadedModules, UngroupedPage, VariantsModule, CompositionModule } from './kitbook-types'
 
 export { default as Layout } from './layout/Layout.svelte'
 export { layoutLoad } from './layout/layoutLoad'

diff --git a/packages/kitbook/src/lib/kitbook-types.ts b/packages/kitbook/src/lib/kitbook-types.ts
@@ -49,7 +49,7 @@ export type GroupedPage = PageMetadata & {
   extensions: string[]
   loadSvx?: LoadFunctions<{ default: typeof SvelteComponent }>
   loadComponent?: LoadFunctions<{ default: typeof SvelteComponent }>
-  loadCompositions?: Record<string, LoadFunctions<{ default: typeof SvelteComponent }>>
+  loadCompositions?: Record<string, LoadFunctions<CompositionModule>>
   loadVariants?: LoadFunctions<VariantsModule>
 }
 export type GroupedPageMap = Record<string, GroupedPage>
@@ -65,6 +65,7 @@ type Module = () => Promise<{ [key: string]: any }>
 type RawModule = () => Promise<string>
 
 export interface VariantsModule { 'variants': Variant<any>[]; 'viewports': Viewport[] }
+export interface CompositionModule { default: typeof SvelteComponent; width?: number; height?: number }
 
 export interface LoadedModules {
   svx?: typeof SvelteComponent
@@ -73,7 +74,7 @@ export interface LoadedModules {
   componentRaw?: string
   variantsModule?: VariantsModule
   variantsRaw?: string
-  compositions?: Record<string, typeof SvelteComponent>
+  compositionsModules?: Record<string, CompositionModule>
   compositionsRaw?: Record<string, string>
 }
 

diff --git a/packages/kitbook/src/lib/layout/parseModules/groupColocatedPages.ts b/packages/kitbook/src/lib/layout/parseModules/groupColocatedPages.ts
@@ -1,9 +1,9 @@
 import type { SvelteComponent } from 'svelte'
-import type { GroupedPage, GroupedPageMap, UngroupedPage, VariantsModule } from '../../kitbook-types'
+import type { CompositionModule, GroupedPage, GroupedPageMap, UngroupedPage, VariantsModule } from '../../kitbook-types'
 import { testModules } from './testModules'
 import { parseModulesIntoUngroupedPages } from './parseModulesIntoUngroupedPages'
 
-export function groupColocatedPages(ungrouped: UngroupedPage<{ default: typeof SvelteComponent } | VariantsModule>[] = [], extensions = { svx: ['md', 'svx'], variants: 'variants.ts', compositions: 'composition' }): GroupedPageMap {
+export function groupColocatedPages(ungrouped: UngroupedPage<{ default: typeof SvelteComponent } | VariantsModule | CompositionModule>[] = [], extensions = { svx: ['md', 'svx'], variants: 'variants.ts', compositions: 'composition' }): GroupedPageMap {
   const allowedExtensions = [...extensions.svx, extensions.variants, 'svelte']
   const grouped: GroupedPageMap = {}
 

diff --git a/packages/kitbook/src/lib/layout/sidebar/search/SearchResult.composition b/packages/kitbook/src/lib/layout/sidebar/search/SearchResult.composition
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
-  export let width = 600;
-  export let height = 400;
+  export let width = 800;
+  export let height = 200;
 </script>
 
 <script lang="ts">

diff --git a/packages/kitbook/src/lib/pages/Compositions.svelte b/packages/kitbook/src/lib/pages/Compositions.svelte
@@ -1,19 +1,15 @@
 <script lang="ts">
-  import type { SvelteComponent } from 'svelte'
   import View from '../view/View.svelte'
   import { openComposition } from '../open/openFiles'
+  import type { CompositionModule } from '$lib/kitbook-types'
 
-  // max width - see how much space there is
-  export let compositions: Record<string, typeof SvelteComponent>
+  export let compositionModules: Record<string, CompositionModule>
   export let pathWithoutExtension: string
-  export let width: number = undefined
-  export let height: number = undefined
 
   let containerWidth = 1000
-// May need .not-prose when hoisted into documentation
 </script>
 
-{#each Object.entries(compositions) as [compositionName, _composition]}
+{#each Object.entries(compositionModules) as [compositionName, { width, height }]}
   <div class="font-semibold text-sm py-1">
     <button
       class="capitalize relative z-2"

diff --git a/packages/kitbook/src/lib/pages/MainPage.svelte b/packages/kitbook/src/lib/pages/MainPage.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import '../styles/kb-prose.css'
-  import type { GroupedPage, GroupedPageMap, KitbookSettings, LoadedModules, VariantsModule } from 'kitbook'
+  import type { GroupedPage, GroupedPageMap, KitbookSettings, LoadedModules } from 'kitbook'
   import { Button } from 'svelte-pieces'
-  import type { SvelteComponent } from 'svelte'
   import EditInGithub from '../components/EditInGithub.svelte'
   import { pagesStore } from '../modules/hmrUpdatedModules'
   import { openComponent, openComposition, openSvx, openVariants } from '../open/openFiles'
@@ -20,39 +19,38 @@
     error?: string
   } = { loadedModules: {} }
 
-  const { viewports, languages, githubURL, viewer: { __internal: { viteBase } } } = data.settings
+  const { viewports: kitbookViewports, languages, githubURL, viewer: { __internal: { viteBase } } } = data.settings
 
   $: pageFromUpdatingStore = $pagesStore?.[data.pageKey]
 
-  let variantsModule: VariantsModule
-  $: if (pageFromUpdatingStore?.loadVariants?.loadModule) {
+  let variantsModule = data.loadedModules?.variantsModule
+  $: if (pageFromUpdatingStore?.loadVariants?.loadModule)
+    updateVariantsModule()
+  else
+    variantsModule = data.loadedModules?.variantsModule
+
+  function updateVariantsModule() {
     pageFromUpdatingStore.loadVariants.loadModule().then((module) => {
       variantsModule = module
     }).catch((error) => {
       console.error(error)
     })
   }
-  else {
-    variantsModule = null
-  }
-
-  $: variants = variantsModule?.variants || data.loadedModules?.variantsModule?.variants
 
-  let compositions: Record<string, typeof SvelteComponent>
+  let compositionModules = data.loadedModules?.compositionsModules
   $: if (pageFromUpdatingStore?.loadCompositions)
     updateCompositions()
   else
-    compositions = data.loadedModules?.compositions
+    compositionModules = data.loadedModules?.compositionsModules
 
   function updateCompositions() {
-    if (!compositions)
-      compositions = {}
+    if (!compositionModules)
+      compositionModules = {}
     Object.entries(pageFromUpdatingStore.loadCompositions).forEach(async ([compositionName, loadComposition]) => {
-      compositions[compositionName] = (await loadComposition.loadModule()).default
+      compositionModules[compositionName] = (await loadComposition.loadModule())
     })
   }
 
-  $: fileViewports = variantsModule?.viewports || data.loadedModules?.variantsModule?.viewports
   $: pathWithoutExtension = `.${data.page?.path.replace(/.\w+$/, '')}`
   $: title = ['+page', '+layout'].includes(data.page?.name) ? data.page?.path : data.page?.name
 </script>
@@ -75,7 +73,7 @@
 
             <Button
               onclick={() => {
-                if (data.loadedModules.compositions) {
+                if (compositionModules) {
                   const name = prompt('What do you want to name this composition? (lowercase, no spaces or periods)')
                   if (name)
                     openComposition(pathWithoutExtension, `${name}.composition`)
@@ -86,7 +84,7 @@
               form="menu"
               color="black"><span class="i-carbon-chart-treemap text-lg align--4px" /> Add Composition</Button>
 
-            {#if !variants}
+            {#if !variantsModule?.variants}
               <Button onclick={() => openVariants(`${pathWithoutExtension}.svelte`)} form="menu" color="black"><span class="i-system-uicons-versions align--4px text-xl" /> Add Variant</Button>
             {/if}
           {/if}
@@ -101,12 +99,12 @@
         <Button class="block mb-3" onclick={() => openSvx(`${pathWithoutExtension}.md`)} color="black"><span class="i-vscode-icons-file-type-markdown align--6px text-2xl" /> Add Docs File (md)</Button>
       {/if}
 
-      {#if compositions}
-        <Compositions {compositions} {pathWithoutExtension} />
+      {#if compositionModules}
+        <Compositions {compositionModules} {pathWithoutExtension} />
       {/if}
 
-      {#if variants}
-        <Variants {variants} {pathWithoutExtension} viewports={fileViewports || viewports} {languages} />
+      {#if variantsModule?.variants}
+        <Variants variants={variantsModule.variants} {pathWithoutExtension} viewports={variantsModule.viewports || kitbookViewports} {languages} />
       {/if}
 
       <EditInGithub path={data?.page?.path} {githubURL} />

diff --git a/packages/kitbook/src/lib/pages/mainPageLoad.ts b/packages/kitbook/src/lib/pages/mainPageLoad.ts
@@ -22,10 +22,10 @@ export async function mainPageLoad({ params, parent }) {
       loadedModules.variantsRaw = await page.loadVariants.loadRaw()
     }
     if (page.loadCompositions) {
-      loadedModules.compositions = {}
+      loadedModules.compositionsModules = {}
       loadedModules.compositionsRaw = {}
       for (const compositionName in page.loadCompositions) {
-        loadedModules.compositions[compositionName] = (await page.loadCompositions[compositionName].loadModule())?.default
+        loadedModules.compositionsModules[compositionName] = (await page.loadCompositions[compositionName].loadModule())
         loadedModules.compositionsRaw[compositionName] = await page.loadCompositions[compositionName].loadRaw()
       }
     }