From 85b249c70c0c9a9cc29cf729c8ab986d965d3419 Mon Sep 17 00:00:00 2001 From: jacob-8 Date: Wed, 3 Jan 2024 16:17:10 +0800 Subject: [PATCH] fix: IntersectionObserverShared once now works --- package.json | 2 +- pnpm-lock.yaml | 26 +++++------ .../IntersectionObserver.composition | 18 ++++++++ src/lib/functions/IntersectionObserver.md | 34 -------------- .../IntersectionObserverShared.composition | 22 +++++++++ .../functions/IntersectionObserverShared.md | 3 ++ .../IntersectionObserverShared.svelte | 35 ++++++++------- src/lib/ui/MultiSelect.svelte | 1 - src/lib/ui/SimpleButton.svelte | 45 +++++++++++++++++++ src/lib/ui/Toasts.svelte | 4 +- src/routes/+layout.js | 32 +++++++++++-- src/routes/[...file]/+page.svelte | 2 +- src/routes/[...file]/_page.md | 1 - src/routes/sandbox/[...file]/_page.md | 3 -- 14 files changed, 154 insertions(+), 74 deletions(-) create mode 100644 src/lib/functions/IntersectionObserver.composition create mode 100644 src/lib/functions/IntersectionObserverShared.composition create mode 100644 src/lib/functions/IntersectionObserverShared.md create mode 100644 src/lib/ui/SimpleButton.svelte delete mode 100644 src/routes/[...file]/_page.md delete mode 100644 src/routes/sandbox/[...file]/_page.md diff --git a/package.json b/package.json index d2daad2..2b040e0 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "@types/youtube": "^0.0.47", "@unocss/svelte-scoped": "^0.55.7", "bumpp": "^9.2.0", - "kitbook": "1.0.0-beta.4", + "kitbook": "1.0.0-beta.11", "publint": "^0.2.2", "svelte": "^4.2.0", "svelte-check": "^3.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 10aa1f4..d8f26f4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,8 +38,8 @@ devDependencies: specifier: ^9.2.0 version: 9.2.0 kitbook: - specifier: 1.0.0-beta.4 - version: 1.0.0-beta.4(@sveltejs/kit@1.24.1)(svelte@4.2.0)(typescript@5.2.2) + specifier: 1.0.0-beta.11 + version: 1.0.0-beta.11(@sveltejs/kit@1.24.1)(svelte@4.2.0)(typescript@5.2.2) publint: specifier: ^0.2.2 version: 0.2.2 @@ -432,8 +432,8 @@ packages: type-detect: 4.0.8 dev: true - /@kitbook/mdsvex-shiki-twoslash@1.0.0-beta.4(svelte@4.2.0)(typescript@5.2.2): - resolution: {integrity: sha512-OBYwOq0sx9SgKJ8Z8JrZBg7krLBQgS8ezrl/uV86K98lw8rh4P0ZT8t3ILXLwgu/8344ZQhy/lZTcUJX4h9liw==} + /@kitbook/mdsvex-shiki-twoslash@1.0.0-beta.11(svelte@4.2.0)(typescript@5.2.2): + resolution: {integrity: sha512-InXkPzJ3j8nLNC2cQDyNV/Irxo+n4ovQIXkzjCKVdYm2coTnSYn++yr3BWWfjb9c1oqUPaKEKEtQPTGz6HfQ7w==} dependencies: fenceparser: 2.2.0 mdsvex: 0.11.0(svelte@4.2.0) @@ -445,8 +445,8 @@ packages: - typescript dev: true - /@kitbook/rehype-display-link-titles@1.0.0-beta.4: - resolution: {integrity: sha512-sGVurDfjbElJsMLYBlrWmXWJkOjmIGYDrpDhn8tEcGUlhqNtYp2afTyaBOX26IxWcGvIwPkx8WkUO1Gr//gVVQ==} + /@kitbook/rehype-display-link-titles@1.0.0-beta.11: + resolution: {integrity: sha512-wZU3OtZhUbGPlfevtkp4AXVz56IcW7H29cylIc26+/22kLOvUZ/WD6i8SIYFYUhb+wOerjP4rQEEFzO9DQKbiQ==} dependencies: github-slugger: 2.0.0 unist-util-visit: 4.1.2 @@ -1922,14 +1922,14 @@ packages: resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==} dev: true - /kitbook@1.0.0-beta.4(@sveltejs/kit@1.24.1)(svelte@4.2.0)(typescript@5.2.2): - resolution: {integrity: sha512-xl1s2rnu2gqMIbF0W30eG+jaclXavgt2gdinQKCIUue7HjI2pyGOKoR/8IVEPh6Rzk9BHlyd3NLe/WnrVSTkKw==} + /kitbook@1.0.0-beta.11(@sveltejs/kit@1.24.1)(svelte@4.2.0)(typescript@5.2.2): + resolution: {integrity: sha512-5ORQqMrqDhWjLijWb5tPyDJGqvszWsWQ29TfyYXOjBrckCelxRbmtgYiVUKjYCygEaV/q4q8SuV4brg/8VkCJQ==} peerDependencies: '@sveltejs/kit': ^1.13.0 svelte: ^3.55.0 || ^4.0.0 dependencies: - '@kitbook/mdsvex-shiki-twoslash': 1.0.0-beta.4(svelte@4.2.0)(typescript@5.2.2) - '@kitbook/rehype-display-link-titles': 1.0.0-beta.4 + '@kitbook/mdsvex-shiki-twoslash': 1.0.0-beta.11(svelte@4.2.0)(typescript@5.2.2) + '@kitbook/rehype-display-link-titles': 1.0.0-beta.11 '@sveltejs/kit': 1.24.1(svelte@4.2.0)(vite@4.4.9) magicast: 0.3.0 mdsvex: 0.11.0(svelte@4.2.0) @@ -1943,7 +1943,7 @@ packages: remark-rehype: 10.1.0 remark-toc: 8.0.1 svelte: 4.2.0 - svelte-pieces: 2.0.0-next.1(svelte@4.2.0) + svelte-pieces: 2.0.0-next.4(svelte@4.2.0) svelte2tsx: 0.6.23(svelte@4.2.0)(typescript@5.2.2) unified: 10.1.2 unist-util-visit: 4.1.2 @@ -3151,8 +3151,8 @@ packages: svelte: 4.2.0 dev: true - /svelte-pieces@2.0.0-next.1(svelte@4.2.0): - resolution: {integrity: sha512-UFmaeu1l2uIdWrLAdVTiS17rOCpfDabxx3eNSZrz8t0juS8t9e0zW/2XlUb+qaQopRoWX6LnPh6S9EB+cW94VQ==} + /svelte-pieces@2.0.0-next.4(svelte@4.2.0): + resolution: {integrity: sha512-D2/hPqrLI1pgnHz+QfMU9uAip+0fzkTYVZTasToJ3xL9NyM95kMQ79EiFXbguCuNPs8x5HQ4m4VsvbNzrAkkHA==} peerDependencies: svelte: ^3.55.0 || ^4.0.0 dependencies: diff --git a/src/lib/functions/IntersectionObserver.composition b/src/lib/functions/IntersectionObserver.composition new file mode 100644 index 0000000..7811b65 --- /dev/null +++ b/src/lib/functions/IntersectionObserver.composition @@ -0,0 +1,18 @@ + + + + + +
+ {intersecting} +
+ diff --git a/src/lib/functions/IntersectionObserver.md b/src/lib/functions/IntersectionObserver.md index e5caf37..ddddae4 100644 --- a/src/lib/functions/IntersectionObserver.md +++ b/src/lib/functions/IntersectionObserver.md @@ -1,35 +1 @@ - - -# Intersection Observer - Observes the first child element placed inside. - - - -
- {intersecting} -
- - - -Can be used to watch many items, efficiently. Note that the first element to init's `top`, `right`, `bottom`, `left` and `threshold` values will be used. We use -150 on the bottom here so you can see the observer working without needing dev tools. - - - {#each Array(3) as _} - -
- {intersecting} -
- - {/each} - - - diff --git a/src/lib/functions/IntersectionObserverShared.composition b/src/lib/functions/IntersectionObserverShared.composition new file mode 100644 index 0000000..c49270f --- /dev/null +++ b/src/lib/functions/IntersectionObserverShared.composition @@ -0,0 +1,22 @@ + + + + +{#each Array(10) as _} + +
+ {intersecting} +
+ +{/each} + + diff --git a/src/lib/functions/IntersectionObserverShared.md b/src/lib/functions/IntersectionObserverShared.md new file mode 100644 index 0000000..1083415 --- /dev/null +++ b/src/lib/functions/IntersectionObserverShared.md @@ -0,0 +1,3 @@ +Can be used to watch many items, efficiently. Note that the first element to init's `top`, `right`, `bottom`, `left` and `threshold` values will be used. We use -150 on the bottom and top here so you can see the observer working without needing dev tools. + +In this demo we are using `once` to unobserve once an element comes into view. \ No newline at end of file diff --git a/src/lib/functions/IntersectionObserverShared.svelte b/src/lib/functions/IntersectionObserverShared.svelte index 1d2d279..235cd39 100644 --- a/src/lib/functions/IntersectionObserverShared.svelte +++ b/src/lib/functions/IntersectionObserverShared.svelte @@ -16,7 +16,7 @@ + + diff --git a/src/lib/ui/Toasts.svelte b/src/lib/ui/Toasts.svelte index ce09b5f..398bf1b 100644 --- a/src/lib/ui/Toasts.svelte +++ b/src/lib/ui/Toasts.svelte @@ -45,12 +45,12 @@ diff --git a/src/routes/+layout.js b/src/routes/+layout.js index 9c89d4f..55cb9dc 100644 --- a/src/routes/+layout.js +++ b/src/routes/+layout.js @@ -1,4 +1,30 @@ // @ts-ignore - virtual import -import { pages, settings } from 'virtual:kitbook'; -import { layoutLoad } from 'kitbook'; -export const load = layoutLoad({ pages, settings }); +import { settings } from 'virtual:kitbook'; +import { groupColocatedModulesIntoPages, layoutLoad, pagesStore } from 'kitbook'; +/** + * Vite glob patterns used for building your Kitbook. See https://vitejs.dev/guide/features.html#multiple-patterns. + * Restrict these paths to be able to incrementally adopt Kitbook into your project. + * Alternate extensions are not yet supported. + * Kitbook changes in the future will cause this file to be regenerated. Your glob patterns will be preserved as long as you only edit the patterns inside the array brackets and nothing else. + */ +const components = import.meta.glob(['/src/**/*.svelte']); +const componentsRaw = import.meta.glob(['/src/**/*.svelte'], { as: 'raw' }); +const variants = import.meta.glob(['/src/**/*.variants.ts']); +const variantsRaw = import.meta.glob(['/src/**/*.variants.ts'], { as: 'raw' }); +const compositions = import.meta.glob(['/src/**/*.composition']); +const compositionsRaw = import.meta.glob(['/src/**/*.composition'], { as: 'raw' }); +const markdown = import.meta.glob(['/src/**/*.md', '/README.md']); +const markdownRaw = import.meta.glob(['/src/**/*.md', '/README.md'], { as: 'raw' }); +export const _pages = groupColocatedModulesIntoPages({ components, componentsRaw, variants, variantsRaw, compositions, compositionsRaw, markdown, markdownRaw }); +let firstLoad = true; +if (firstLoad) { + pagesStore.set(_pages); + firstLoad = false; +} +if (import.meta.hot) { + import.meta.hot.accept((module) => { + if (module?._pages) + pagesStore.set(module._pages); + }); +} +export const load = layoutLoad({ pages: _pages, settings }); diff --git a/src/routes/[...file]/+page.svelte b/src/routes/[...file]/+page.svelte index 3774fc1..6a025ee 100644 --- a/src/routes/[...file]/+page.svelte +++ b/src/routes/[...file]/+page.svelte @@ -4,4 +4,4 @@ export let data; - + diff --git a/src/routes/[...file]/_page.md b/src/routes/[...file]/_page.md deleted file mode 100644 index 9d57232..0000000 --- a/src/routes/[...file]/_page.md +++ /dev/null @@ -1 +0,0 @@ -This is the page where all routes go through. Corresponding stories and component modules are displayed. Variants are iterated through. diff --git a/src/routes/sandbox/[...file]/_page.md b/src/routes/sandbox/[...file]/_page.md deleted file mode 100644 index 8fd84f3..0000000 --- a/src/routes/sandbox/[...file]/_page.md +++ /dev/null @@ -1,3 +0,0 @@ -# Sandbox - -This is a page which does not inherit the (main) group layout so it can display components and stories in isolation when loaded via an iframe.