slidev icon indicating copy to clipboard operation
slidev copied to clipboard

Can't use vue script in markdown anymore

Open tonai opened this issue 3 years ago • 0 comments

Describe the bug Can't define script tags in markdown

To Reproduce Steps to reproduce the behavior:

  1. Start server for demo/starter
  2. Go on slide 7
  3. Animation is broken because the browser complains about the final variable not being defined, but the variable is define in a vue script tag inside the markdown

Desktop (please complete the following information):

  • OS: Ubuntu 20.04
  • Browser: Chrome 101
  • Slidev version: 0.31.2

It seems to be related with the vite-plugin-md plugin. I checked the code of the 7th slide.

Before being processed by the plugin:

# Animations

Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).

```html
<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>
```

<div class="w-60 relative mt-6">
  <div class="relative w-40 h-40">
    <img
      v-motion
      :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
      :enter="final"
      class="absolute top-0 left-0 right-0 bottom-0"
      src="https://sli.dev/logo-square.png"
    />
    <img
      v-motion
      :initial="{ y: 500, x: -100, scale: 2 }"
      :enter="final"
      class="absolute top-0 left-0 right-0 bottom-0"
      src="https://sli.dev/logo-circle.png"
    />
    <img
      v-motion
      :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
      :enter="final"
      class="absolute top-0 left-0 right-0 bottom-0"
      src="https://sli.dev/logo-triangle.png"
    />
  </div>

  <div
    class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
    v-motion
    :initial="{ x: -80, opacity: 0}"
    :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
    Slidev
  </div>
</div>

<!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->
<script setup lang="ts">
const final = {
  x: 0,
  y: 0,
  rotate: 0,
  scale: 1,
  transition: {
    type: 'spring',
    damping: 10,
    stiffness: 20,
    mass: 2
  }
}
</script>

<div
  v-motion
  :initial="{ x:35, y: 40, opacity: 0}"
  :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">

[Learn More](https://sli.dev/guide/animations.html#motion)

</div>

The <script setup lang="ts"> is still there

And after the being processed:

<template>
  <div><h1>Animations</h1>
<p>Animations are powered by <a href="https://motion.vueuse.org/" target="_blank" rel="noopener">@vueuse/motion</a>.</p>
<pre class="shiki-container"><pre class="slidev-code shiki shiki-dark" style="background-color: #121212"><code v-pre><span class="line"><span style="color: #858585">&lt;</span><span style="color: #429988">div</span></span>
<span class="line"><span style="color: #DBD7CA">  </span><span style="color: #E0A569">v-motion</span></span>
<span class="line"><span style="color: #DBD7CA">  </span><span style="color: #E0A569">:initial</span><span style="color: #858585">=</span><span style="color: #C98A7D">&quot;{ x: -80 }&quot;</span></span>
<span class="line"><span style="color: #DBD7CA">  </span><span style="color: #E0A569">:enter</span><span style="color: #858585">=</span><span style="color: #C98A7D">&quot;{ x: 0 }&quot;</span><span style="color: #858585">&gt;</span></span>
<span class="line"><span style="color: #DBD7CA">  Slidev</span></span>
<span class="line"><span style="color: #858585">&lt;/</span><span style="color: #429988">div</span><span style="color: #858585">&gt;</span></span></code></pre><pre class="slidev-code shiki shiki-light" style="background-color: #ffffff"><code v-pre><span class="line"><span style="color: #8E8F8B">&lt;</span><span style="color: #2F8A89">div</span></span>
<span class="line"><span style="color: #393A34">  </span><span style="color: #B58451">v-motion</span></span>
<span class="line"><span style="color: #393A34">  </span><span style="color: #B58451">:initial</span><span style="color: #8E8F8B">=</span><span style="color: #B56959">&quot;{ x: -80 }&quot;</span></span>
<span class="line"><span style="color: #393A34">  </span><span style="color: #B58451">:enter</span><span style="color: #8E8F8B">=</span><span style="color: #B56959">&quot;{ x: 0 }&quot;</span><span style="color: #8E8F8B">&gt;</span></span>
<span class="line"><span style="color: #393A34">  Slidev</span></span>
<span class="line"><span style="color: #8E8F8B">&lt;/</span><span style="color: #2F8A89">div</span><span style="color: #8E8F8B">&gt;</span></span></code></pre></pre>
<div class="w-60 relative mt-6">
  <div class="relative w-40 h-40">
    <img
      v-motion
      :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
      :enter="final"
      class="absolute top-0 left-0 right-0 bottom-0"
      src="https://sli.dev/logo-square.png"
    />
    <img
      v-motion
      :initial="{ y: 500, x: -100, scale: 2 }"
      :enter="final"
      class="absolute top-0 left-0 right-0 bottom-0"
      src="https://sli.dev/logo-circle.png"
    />
    <img
      v-motion
      :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
      :enter="final"
      class="absolute top-0 left-0 right-0 bottom-0"
      src="https://sli.dev/logo-triangle.png"
    />
  </div>
  <div
    class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
    v-motion
    :initial="{ x: -80, opacity: 0}"
    :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
    Slidev
  </div>
</div>
<!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->

<div
  v-motion
  :initial="{ x:35, y: 40, opacity: 0}"
  :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">
<p><a href="https://sli.dev/guide/animations.html#motion" target="_blank" rel="noopener">Learn More</a></p>
</div></div>
</template>

<script setup>
  
 const excerpt = undefined
</script>
    
<script>
  
</script>

The <script setup lang="ts"> is not there anymore, and other <script> tags are added

tonai avatar May 11 '22 13:05 tonai