From 9b405ee8507fe30c6c99888b85f88ef85a18d223 Mon Sep 17 00:00:00 2001 From: _Kerman Date: Mon, 12 Feb 2024 22:44:41 +0800 Subject: [PATCH] chore: remove the word "flow" in names --- demo/starter/slides.md | 401 +----------------- packages/client/builtin/CodeBlockWrapper.vue | 10 +- packages/client/builtin/KaTexBlockWrapper.vue | 10 +- packages/client/builtin/SlidevVideo.vue | 2 +- packages/client/builtin/VClickGap.vue | 6 +- packages/client/builtin/VClicks.ts | 4 +- packages/client/logic/clicks.ts | 24 +- packages/client/modules/directives.ts | 14 +- packages/types/src/types.ts | 10 +- 9 files changed, 54 insertions(+), 427 deletions(-) diff --git a/demo/starter/slides.md b/demo/starter/slides.md index 12d46ced51..d0baf30489 100644 --- a/demo/starter/slides.md +++ b/demo/starter/slides.md @@ -48,392 +48,19 @@ transition: fade-out # What is Slidev? -Slidev is a slides maker and presenter designed for developers, consist of the following features - -- ๐Ÿ“ **Text-based** - focus on the content with Markdown, and then style them later -- ๐ŸŽจ **Themable** - theme can be shared and used with npm packages -- ๐Ÿง‘โ€๐Ÿ’ป **Developer Friendly** - code highlighting, live coding with autocompletion -- ๐Ÿคน **Interactive** - embedding Vue components to enhance your expressions -- ๐ŸŽฅ **Recording** - built-in recording and camera view -- ๐Ÿ“ค **Portable** - export into PDF, PNGs, or even a hostable SPA -- ๐Ÿ›  **Hackable** - anything possible on a webpage - -
-
- -Read more about [Why Slidev?](https://sli.dev/guide/why) - - - - - - - ---- -layout: default ---- - -# Table of contents - -```html - -``` - - - ---- -transition: slide-up -level: 2 ---- - -# Navigation - -Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/navigation.html) - -## Keyboard Shortcuts - -| | | -| --- | --- | -| right / space| next animation or slide | -| left / shiftspace | previous animation or slide | -| up | previous slide | -| down | next slide | - - - -

Here!

- ---- -layout: image-right -image: https://source.unsplash.com/collection/94734566/1920x1080 ---- - -# Code - -Use code snippets and get the highlighting directly, and even types hover![^1] - -```ts {all|5|7|7-8|10|all} twoslash -// TwoSlash enables TypeScript hover information -// and errors in markdown code blocks -// More at https://shiki.style/packages/twoslash - -import { computed, ref } from 'vue' - -const count = ref(0) -const doubled = computed(() => count.value * 2) - -doubled.value = 2 -``` - - - - -<<< @/snippets/external.ts#snippet - - -[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting) - - - - ---- - -# Components - -
-
- -You can use Vue components directly inside your slides. - -We have provided a few built-in components like `` and `` that you can use directly. And adding your custom components is also super easy. - -```html - -``` - - - - -Check out [the guides](https://sli.dev/builtin/components.html) for more. - -
-
- -```html - -``` - - - -
-
- - - ---- -class: px-20 ---- - -# Themes - -Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter: - -
- -```yaml ---- -theme: default ---- -``` - -```yaml ---- -theme: seriph ---- -``` - - - - - -
- -Read more about [How to use a theme](https://sli.dev/themes/use.html) and -check out the [Awesome Themes Gallery](https://sli.dev/themes/gallery.html). - ---- -preload: false ---- - -# Animations - -Animations are powered by [@vueuse/motion](https://motion.vueuse.org/). - -```html -
- Slidev -
-``` - -
-
- - - -
- -
- Slidev -
-
- - - - -
- -[Learn More](https://sli.dev/guide/animations.html#motion) - -
- ---- - -# LaTeX - -LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/). - -
- -Inline $\sqrt{3x-1}+(1+x)^2$ - -Block -$$ {1|3|all} -\begin{array}{c} - -\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & -= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ - -\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ - -\nabla \cdot \vec{\mathbf{B}} & = 0 - -\end{array} -$$ - -
- -[Learn more](https://sli.dev/guide/syntax#latex) - ---- - -# Diagrams - -You can create diagrams / graphs from textual descriptions, directly in your Markdown. - -
- -```mermaid {scale: 0.5, alt: 'A simple sequence diagram'} -sequenceDiagram - Alice->John: Hello John, how are you? - Note over Alice,John: A typical interaction -``` - -```mermaid {theme: 'neutral', scale: 0.8} -graph TD -B[Text] --> C{Decision} -C -->|One| D[Result 1] -C -->|Two| E[Result 2] +
Flow show >= 1
+
Flow show >= 2
+
Absolute show >= 4
+
Flow hide >= 3
+ +```js {1|2}{finally:'121211111'} +1 highlight < 4 || > 41111111 +2 highlight == 4 || > 4 +2 highlight == 4 || > 4 +2 highlight == 4 || > 4 +3 highlight > 4 ``` -```mermaid -mindmap - root((mindmap)) - Origins - Long history - ::icon(fa fa-book) - Popularisation - British popular psychology author Tony Buzan - Research - On effectivness
and features - On Automatic creation - Uses - Creative techniques - Strategic planning - Argument mapping - Tools - Pen and paper - Mermaid -``` - -```plantuml {scale: 0.7} -@startuml - -package "Some Group" { - HTTP - [First Component] - [Another Component] -} - -node "Other Groups" { - FTP - [Second Component] - [First Component] --> FTP -} - -cloud { - [Example 1] -} - -database "MySql" { - folder "This is my folder" { - [Folder 3] - } - frame "Foo" { - [Frame 4] - } -} - -[Another Component] --> [Example 1] -[Example 1] --> [Folder 3] -[Folder 3] --> [Frame 4] - -@enduml -``` - -
- -[Learn More](https://sli.dev/guide/syntax.html#diagrams) - ---- -src: ./pages/multiple-entries.md -hide: false ---- - ---- -layout: center -class: text-center ---- - -# Learn More - -[Documentations](https://sli.dev) ยท [GitHub](https://github.com/slidevjs/slidev) ยท [Showcases](https://sli.dev/showcases.html) +
Flow show >= 4
+
Absolute show >= 10
+
Flow show >= 6
diff --git a/packages/client/builtin/CodeBlockWrapper.vue b/packages/client/builtin/CodeBlockWrapper.vue index cde2281ef1..35d6e4ac50 100644 --- a/packages/client/builtin/CodeBlockWrapper.vue +++ b/packages/client/builtin/CodeBlockWrapper.vue @@ -56,18 +56,18 @@ onMounted(() => { const at = props.at const atNum = safeParseNumber(at) - const inFlow = typeof at === 'string' && '+-'.includes(at[0]) - const flowSize = inFlow + const isRelative = typeof at === 'string' && '+-'.includes(at[0]) + const relativeDelta = isRelative ? atNum + props.ranges.length - 2 : 0 - const start = inFlow - ? clicks.flowSum + atNum - 1 + const start = isRelative + ? clicks.currentOffset + atNum - 1 : atNum const end = start + props.ranges.length - 1 // register to the page click map const id = makeId() - clicks.register(id, { max: end, flowSize }) + clicks.register(id, { max: end, relativeDelta }) onUnmounted(() => clicks.unregister(id)) const index = computed(() => { diff --git a/packages/client/builtin/KaTexBlockWrapper.vue b/packages/client/builtin/KaTexBlockWrapper.vue index 9e6e8d4727..36e7222813 100644 --- a/packages/client/builtin/KaTexBlockWrapper.vue +++ b/packages/client/builtin/KaTexBlockWrapper.vue @@ -55,18 +55,18 @@ onMounted(() => { const at = props.at const atNum = safeParseNumber(at) - const inFlow = typeof at === 'string' && '+-'.includes(at[0]) - const flowSize = inFlow + const isRelative = typeof at === 'string' && '+-'.includes(at[0]) + const relativeDelta = isRelative ? atNum + props.ranges.length - 2 : 0 - const start = inFlow - ? clicks.flowSum + atNum - 1 + const start = isRelative + ? clicks.currentOffset + atNum - 1 : atNum const end = start + props.ranges.length - 1 // register to the page click map const id = makeId() - clicks.register(id, { max: end, flowSize }) + clicks.register(id, { max: end, relativeDelta }) onUnmounted(() => clicks.unregister(id)) const index = computed(() => { diff --git a/packages/client/builtin/SlidevVideo.vue b/packages/client/builtin/SlidevVideo.vue index a4724c5dcd..b32ab33160 100644 --- a/packages/client/builtin/SlidevVideo.vue +++ b/packages/client/builtin/SlidevVideo.vue @@ -26,7 +26,7 @@ const matchRoute = computed(() => { const matchClick = computed(() => { if (!video.value || currentContext?.value !== 'slide' || clicks?.disabled || clicks?.current === undefined) return false - return clicks.map.get(video.value)?.shows?.value ?? true + return clicks.map.get(video.value)?.isShown?.value ?? true }) const matchRouteAndClick = computed(() => matchRoute.value && matchClick.value) diff --git a/packages/client/builtin/VClickGap.vue b/packages/client/builtin/VClickGap.vue index df7c92fca8..5fd4246c36 100644 --- a/packages/client/builtin/VClickGap.vue +++ b/packages/client/builtin/VClickGap.vue @@ -19,11 +19,11 @@ onMounted(() => { if (!clicks || clicks.disabled) return - const flowSize = safeParseNumber(props.size) - const max = clicks.flowSum + flowSize - 1 + const relativeDelta = safeParseNumber(props.size) + const max = clicks.currentOffset + relativeDelta - 1 const id = makeId() - clicks.register(id, { max, flowSize }) + clicks.register(id, { max, relativeDelta }) onCleanup(() => clicks.unregister(id)) }) }) diff --git a/packages/client/builtin/VClicks.ts b/packages/client/builtin/VClicks.ts index c8119d3cee..231ac6d79b 100644 --- a/packages/client/builtin/VClicks.ts +++ b/packages/client/builtin/VClicks.ts @@ -38,7 +38,7 @@ export default defineComponent({ render() { const every = +this.every const at = normalizeAtProp(this.at) - const inFlow = typeof at === 'string' + const isRelative = typeof at === 'string' const click = resolveDirective('click')! @@ -104,7 +104,7 @@ export default defineComponent({ return applyDirective( vNode, - inFlow + isRelative ? delta >= 0 ? `+${delta}` : `${delta}` : thisShowIdx, ) diff --git a/packages/client/logic/clicks.ts b/packages/client/logic/clicks.ts index 8f2ad20fd7..208227d0ef 100644 --- a/packages/client/logic/clicks.ts +++ b/packages/client/logic/clicks.ts @@ -11,7 +11,7 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte return route.meta.__clicksContext const thisPath = +(route?.path ?? 99999) - const flow = new Map() + const relativeOffsets = new Map() const map = shallowReactive(new Map()) const context: ClicksContext = { @@ -27,20 +27,20 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte else return 0 }, - flow, + relativeOffsets, map, register(el, resolved) { - flow.set(el, resolved.flowSize) + relativeOffsets.set(el, resolved.relativeDelta) map.set(el, resolved) }, unregister(el) { - flow.delete(el) + relativeOffsets.delete(el) map.delete(el) }, - get flowSum() { + get currentOffset() { // eslint-disable-next-line no-unused-expressions routeForceRefresh.value - return sum(...flow.values()) + return sum(...relativeOffsets.values()) }, get total() { // eslint-disable-next-line no-unused-expressions @@ -56,7 +56,7 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte export function useFixedClicks(route: RouteRecordRaw | undefined, currentInit = 0): [Ref, ClicksContext] { const current = ref(currentInit) - const flow = new Map() + const relativeOffsets = new Map() const map = shallowReactive(new Map()) return [current, { @@ -68,20 +68,20 @@ export function useFixedClicks(route: RouteRecordRaw | undefined, currentInit = }, set current(_v) { }, - flow, + relativeOffsets, map, register(el, resolved) { - flow.set(el, resolved.flowSize) + relativeOffsets.set(el, resolved.relativeDelta) map.set(el, resolved) }, unregister(el) { - flow.delete(el) + relativeOffsets.delete(el) map.delete(el) }, - get flowSum() { + get currentOffset() { // eslint-disable-next-line no-unused-expressions routeForceRefresh.value - return sum(...flow.values()) + return sum(...relativeOffsets.values()) }, get total() { // eslint-disable-next-line no-unused-expressions diff --git a/packages/client/modules/directives.ts b/packages/client/modules/directives.ts index 11a8b184a2..ea5d46b74a 100644 --- a/packages/client/modules/directives.ts +++ b/packages/client/modules/directives.ts @@ -146,34 +146,34 @@ function resolveClick(el: Element, dir: DirectiveBinding, clickAfter = fals else if (value == null || value === true || value === 'true') value = '+1' - let flowSize: number + let relativeDelta: number let thisClick: number | [number, number] let maxClick: number if (typeof value === 'string' && '+-'.includes(value[0])) { // flow - flowSize = safeParseNumber(value) - thisClick = ctx.flowSum + flowSize + relativeDelta = safeParseNumber(value) + thisClick = ctx.currentOffset + relativeDelta maxClick = thisClick } else if (Array.isArray(value)) { // range (absolute) - flowSize = 0 + relativeDelta = 0 thisClick = value as [number, number] maxClick = value[1] } else { // since (absolute) - flowSize = 0 + relativeDelta = 0 thisClick = safeParseNumber(value) maxClick = thisClick } const resolved = { max: maxClick, - flowSize, + relativeDelta, isActive: computed(() => isActive(thisClick, ctx.current)), isCurrent: computed(() => isCurrent(thisClick, ctx.current)), - shows: computed(() => clickHide ? !isActive(thisClick, ctx.current) : isActive(thisClick, ctx.current)), + isShown: computed(() => clickHide ? !isActive(thisClick, ctx.current) : isActive(thisClick, ctx.current)), clickHide, CLASS_HIDE: fade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, } diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts index 39cede7737..d9f06337ff 100644 --- a/packages/types/src/types.ts +++ b/packages/types/src/types.ts @@ -78,14 +78,14 @@ export type LoadedSnippets = Record export type ClicksElement = Element | string -export type ClicksFlow = Map +export type ClicksRelativeEls = Map export interface ResolvedClicksInfo { max: number - flowSize: number + relativeDelta: number isCurrent?: ComputedRef isActive?: ComputedRef - shows?: ComputedRef + isShown?: ComputedRef } export type ClicksMap = Map @@ -93,10 +93,10 @@ export type ClicksMap = Map export interface ClicksContext { readonly disabled: boolean readonly current: number - readonly flow: ClicksFlow + readonly relativeOffsets: ClicksRelativeEls readonly map: ClicksMap register: (el: ClicksElement, resolved: ResolvedClicksInfo) => void unregister: (el: ClicksElement) => void - readonly flowSum: number + readonly currentOffset: number readonly total: number }