feat: prod build tree shaking

slidevjs · Apr 27, 2021 · 6a0b445 · 6a0b445
1 parent 9740373
commit 6a0b445
Show file tree

Hide file tree

Showing 35 changed files with 296 additions and 217 deletions.
diff --git a/demo/setup/monaco.ts b/demo/setup/monaco.ts
@@ -0,0 +1,12 @@
+import * as monaco from 'monaco-editor'
+
+export default function setupMonaco() {
+  monaco.languages.typescript.typescriptDefaults.addExtraLib(
+    `
+    import { InjectionKey } from 'vue'
+    export interface UserInfo { id: number; name: string }
+    export const injectKeyUser: InjectionKey<UserInfo> = Symbol()
+    `,
+    'file:///root/context.ts',
+  )
+}
diff --git a/demo/slides.md b/demo/slides.md
@@ -873,20 +873,6 @@ export default {
 </v-clicks>
 </div>
 
-<script setup>
-import * as monaco from 'monaco-editor'
-
-monaco.languages.typescript.typescriptDefaults.addExtraLib(
-`
-import { InjectionKey } from 'vue'
-export interface UserInfo { id: number; name: string }
-export const injectKeyUser: InjectionKey<UserInfo> = Symbol()
-`,
-  'file:///root/context.ts'
-);
-</script>
-
-
 ---
 
 # Shared State <MarkerPattern />

diff --git a/docs/.vitepress/theme/shim.d.ts b/docs/.vitepress/theme/shim.d.ts
diff --git a/docs/custom/config-vite.md b/docs/custom/config-vite.md
@@ -1 +1,16 @@
-# WIP
+# Configure Vite
+
+Slidev is powered by [Vite](http://vitejs.dev/) under the hood, where you can leverage Vite's great plugin system to customize your slides even further.
+
+The `vite.config.ts` will be respected if you have one.
+
+Slidev has the following plugins preconfigured:
+
+- [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue)
+- [vite-plugin-md](https://github.com/antfu/vite-plugin-md)
+- [vite-plugin-components](https://github.com/antfu/vite-plugin-components)
+- [vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss)
+- [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons)
+- [vite-plugin-remote-assets](https://github.com/antfu/vite-plugin-remote-assets)
+
+Learn mode about the [pre-configurations here](https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/plugins/preset.ts).
diff --git a/packages/client/env.ts b/packages/client/env.ts
@@ -0,0 +1,5 @@
+import { SlidevConfig } from '@slidev/types'
+// @ts-ignore
+import _configs from '/@slidev/configs'
+
+export const configs = _configs as SlidevConfig
diff --git a/packages/client/internals/Controls.vue b/packages/client/internals/Controls.vue
@@ -7,6 +7,8 @@ import RecordingDialog from './RecordingDialog.vue'
 
 <template>
   <SlidesOverview v-model="showOverview" />
-  <WebCamera />
-  <RecordingDialog v-model="showRecordingDialog"/>
+  <template v-if="__DEV__">
+    <WebCamera/>
+    <RecordingDialog v-model="showRecordingDialog" />
+  </template>
 </template>
diff --git a/packages/client/internals/Editor.vue b/packages/client/internals/Editor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useEventListener, useFetch } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 import { computed, watch, ref, onMounted, onUnmounted } from 'vue'
 import { activeElement, showEditor } from '../state'
 import { useCodeMirror } from '../setup/codemirror'

diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { onClickOutside, useFullscreen } from '@vueuse/core'
-import { computed, defineProps, ref } from 'vue'
+import { useFullscreen } from '@vueuse/core'
+import { computed, defineProps } from 'vue'
 import { isDark, toggleDark } from '../logic/dark'
-import { recorder } from '../logic/recording'
 import { hasNext, hasPrev, prev, next, isPresenter, currentPage } from '../logic/nav'
-import { showOverview, showEditor, currentCamera, showRecordingDialog } from '../state'
-import DevicesList from './DevicesList.vue'
+import { showOverview, showEditor } from '../state'
+import RecordingControls from './RecordingControls.vue'
 
 defineProps({
   mode: {
@@ -15,32 +14,8 @@ defineProps({
 
 const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(document.body)
 
-const {
-  recording,
-  showAvatar,
-  streamCamera,
-  stopRecording,
-  toggleAvatar,
-} = recorder
-
-const devicesList = ref()
-const showDevicesList = ref(false)
-
-onClickOutside(devicesList, () => {
-  showDevicesList.value = false
-})
-
 const presenterLink = computed(() => `${location.origin}/presenter/${currentPage.value}`)
 const nonPresenterLink = computed(() => `${location.origin}/${currentPage.value}`)
-
-const dev = import.meta.env.DEV
-
-function toggleRecording() {
-  if (recording.value)
-    stopRecording()
-  else
-    showRecordingDialog.value = true
-}
 </script>
 
 <template>
@@ -57,93 +32,33 @@ function toggleRecording() {
       <carbon:arrow-left />
     </button>
 
-    <button
-      class="icon-btn"
-      :class="{ disabled: !hasNext }"
-      title="Next"
-      @click="next"
-    >
+    <button class="icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
       <carbon:arrow-right />
     </button>
 
-    <button
-      class="icon-btn"
-      title="Slides overview"
-      @click="showOverview = !showOverview"
-    >
+    <button class="icon-btn" title="Slides overview" @click="showOverview = !showOverview">
       <carbon:apps />
     </button>
 
-    <button
-      class="icon-btn"
-      title="Toggle dark mode"
-      @click="toggleDark"
-    >
+    <button class="icon-btn" title="Toggle dark mode" @click="toggleDark">
       <carbon-moon v-if="isDark" />
       <carbon-sun v-else />
     </button>
 
-    <button
-      v-if="dev && !isPresenter"
-      class="icon-btn"
-      @click="showEditor = !showEditor"
-    >
-      <carbon:edit />
-    </button>
-
-    <a
-      v-if="dev && !isPresenter"
-      :href="presenterLink"
-      class="icon-btn"
-      title="Presenter Mode"
-    >
-      <carbon:user-speaker />
-    </a>
+    <template v-if="__DEV__">
+      <button v-if="!isPresenter" class="icon-btn" @click="showEditor = !showEditor">
+        <carbon:edit />
+      </button>
 
-    <a
-      v-if="isPresenter"
-      :href="nonPresenterLink"
-      class="icon-btn"
-      title="Play Mode"
-    >
-      <carbon:presentation-file />
-    </a>
+      <a v-if="!isPresenter" :href="presenterLink" class="icon-btn" title="Presenter Mode">
+        <carbon:user-speaker />
+      </a>
 
-    <button
-      v-if="currentCamera !== 'none' && !isPresenter"
-      class="icon-btn"
-      :class="{'text-green-500': Boolean(showAvatar && streamCamera)}"
-      title="Show camera view"
-      @click="toggleAvatar"
-    >
-      <carbon:user-avatar />
-    </button>
+      <a v-if="isPresenter" :href="nonPresenterLink" class="icon-btn" title="Play Mode">
+        <carbon:presentation-file />
+      </a>
 
-    <div
-      v-if="!isPresenter"
-      ref="devicesList"
-      class="flex relative"
-    >
-      <button
-        class="icon-btn"
-        :class="{'text-red-500': recording}"
-        title="Recording"
-        @click="toggleRecording"
-      >
-        <carbon:stop-outline v-if="recording" />
-        <carbon:video v-else />
-      </button>
-      <button
-        class="icon-btn !text-sm !px-0"
-        :class="{disabled:recording}"
-        @click="showDevicesList = !showDevicesList"
-      >
-        <carbon:chevron-up class="opacity-50" />
-      </button>
-      <DevicesList
-        v-if="showDevicesList && !recording"
-        class="bg-main rounded shadow bottom-10 left-0 z-20 absolute"
-      />
-    </div>
+      <RecordingControls v-if="!isPresenter" />
+    </template>
   </nav>
 </template>
diff --git a/packages/client/internals/NoteEditor.vue b/packages/client/internals/NoteEditor.vue
@@ -71,7 +71,7 @@ onClickOutside(input, () => {
     @focus="editing = true"
     ref="input"
     v-model="note"
-    class="prose resize-none overflow-auto outline-none"
+    class="prose resize-none overflow-auto outline-none bg-transparent"
     :class="props.class"
     :placeholder="placeholder"
   />

diff --git a/packages/client/internals/Play.vue b/packages/client/internals/Play.vue
@@ -32,7 +32,10 @@ function onClick(e: MouseEvent) {
         <NavControls />
       </template>
     </SlideContainer>
-    <Editor v-if="showEditor" />
+
+    <template v-if="__DEV__">
+      <Editor v-if="showEditor" />
+    </template>
   </div>
   <Controls />
 </template>
diff --git a/packages/client/internals/Presenter.vue b/packages/client/internals/Presenter.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
 import { ref, computed } from 'vue'
-import { total, currentPage, currentRoute, nextRoute, tab, tabElements, currentSlideId } from '../logic/nav'
+import { total, currentPage, currentRoute, nextRoute, tab, tabElements } from '../logic/nav'
 import { showOverview } from '../state'
+import { configs } from '../env'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
 import SlidesOverview from './SlidesOverview.vue'
 import NoteEditor from './NoteEditor.vue'
-// @ts-expect-error
-import configs from '/@slidev/configs'
 
 useHead({
   title: configs.title ? `Presenter - ${configs.title} - Slidev` : 'Presenter - Slidev',
@@ -36,7 +35,9 @@ const nextSlide = computed(() => {
     <div class="grid-section top flex">
       <img src="../assets/logo-title-horizontal.png" class="h-14 ml-2 py-2 my-auto" />
       <div class="flex-auto" />
-      <div class="px-4 my-auto">{{ currentPage + 1 }} / {{ total }}</div>
+      <div class="px-4 my-auto">
+        {{ currentPage + 1 }} / {{ total }}
+      </div>
     </div>
     <div class="grid-section main flex flex-col p-4">
       <SlideContainer
@@ -59,7 +60,7 @@ const nextSlide = computed(() => {
       />
     </div>
     <div class="grid-section note">
-     <NoteEditor class="w-full h-full p-4 overflow-auto"/>
+      <NoteEditor class="w-full h-full p-4 overflow-auto" />
     </div>
     <div class="grid-section bottom">
       <NavControls mode="persist" />

diff --git a/packages/client/internals/RecordingControls.vue b/packages/client/internals/RecordingControls.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { ref } from 'vue'
+import { recorder } from '../logic/recording'
+import { currentCamera, showRecordingDialog } from '../state'
+import DevicesList from './DevicesList.vue'
+
+const devicesList = ref()
+const showDevicesList = ref(false)
+
+onClickOutside(devicesList, () => {
+  showDevicesList.value = false
+})
+
+const {
+  recording,
+  showAvatar,
+  streamCamera,
+  stopRecording,
+  toggleAvatar,
+} = recorder
+
+function toggleRecording() {
+  if (recording.value)
+    stopRecording()
+  else
+    showRecordingDialog.value = true
+}
+</script>
+
+<template>
+  <button
+    v-if="currentCamera !== 'none'"
+    class="icon-btn"
+    :class="{'text-green-500': Boolean(showAvatar && streamCamera)}"
+    title="Show camera view"
+    @click="toggleAvatar"
+  >
+    <carbon:user-avatar />
+  </button>
+
+  <div
+    ref="devicesList"
+    class="flex relative"
+  >
+    <button
+      class="icon-btn"
+      :class="{'text-red-500': recording}"
+      title="Recording"
+      @click="toggleRecording"
+    >
+      <carbon:stop-outline v-if="recording" />
+      <carbon:video v-else />
+    </button>
+    <button
+      class="icon-btn !text-sm !px-0"
+      :class="{disabled:recording}"
+      @click="showDevicesList = !showDevicesList"
+    >
+      <carbon:chevron-up class="opacity-50" />
+    </button>
+    <DevicesList
+      v-if="showDevicesList && !recording"
+      class="bg-main rounded shadow bottom-10 left-0 z-20 absolute"
+    />
+  </div>
+</template>
diff --git a/packages/client/internals/RecordingDialog.vue b/packages/client/internals/RecordingDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { defineEmit, defineProps, nextTick, ref } from 'vue'
+import { defineEmit, defineProps, nextTick } from 'vue'
 import { recorder, recordingName, recordCamera, getFilename } from '../logic/recording'
 import Modal from './Modal.vue'
 import DevicesList from './DevicesList.vue'

diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useElementSize, useVModel } from '@vueuse/core'
-import { computed, defineProps, ref, watchEffect, inject, provide, defineEmit } from 'vue'
+import { computed, defineProps, ref, watchEffect, provide, defineEmit } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import { slideAspect, slideWidth, slideHeight } from '../constants'
 import { injectionTab, injectionTabDisabled, injectionTabElements } from '../modules/directives'

diff --git a/packages/client/internals/SlidesOverview.vue b/packages/client/internals/SlidesOverview.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { computed, defineEmit, defineProps, provide, ref } from 'vue'
+import { computed, defineEmit, defineProps } from 'vue'
 import { breakpoints, windowSize } from '../state'
 import { go as goSlide, rawRoutes } from '../logic/nav'
 import SlideContainer from './SlideContainer.vue'