feat: ability to be controlled via messages

Author: antfu

packages/client/internals/Play.vue

@@ -36,7 +36,8 @@ if (__DEV__)
 <template>
   <div id="page-root" ref="root" class="grid grid-cols-[1fr,max-content]">
     <SlideContainer
-      class="w-full h-full bg-black"
+      class="w-full h-full"
+      :style="{ background: 'var(--slidev-slide-container-background, black)'}"
       :width="isPrintMode ? windowSize.width.value : undefined"
       :scale="slideScale"
       @click="onClick"

packages/client/modules/context.ts

@@ -19,9 +19,28 @@ export default function createSlidevContext() {
           // @ts-expect-error
           navObj[key] = nav[key]
       }
-      app.config.globalProperties.$slidev = reactive({
+      const context = reactive({
         nav: navObj,
       })
+      app.config.globalProperties.$slidev = context
+
+      // allows controls from postMessages
+      if (__DEV__) {
+        // @ts-expect-error
+        window.__slidev__ = context
+        window.addEventListener('message', ({ data }) => {
+          if (data && data.target === 'slidev') {
+            if (data.type === 'navigate') {
+              context.nav.go(+data.no, +data.clicks || 0)
+            }
+            else if (data.type === 'css-vars') {
+              const root = document.documentElement
+              for (const [key, value] of Object.entries(data.vars || {}))
+                root.style.setProperty(key, value as any)
+            }
+          }
+        })
+      }
     },
   }
 }

packages/client/styles/code.css

@@ -6,16 +6,6 @@ html:not(.dark) .shiki-dark {
   display: none;
 }
 
-:root {
-  --slidev-code-background: rgba(125,125,125,0.03);
-  --slidev-code-font-family: theme('fontFamily.mono');
-  --slidev-code-padding: 8px;
-  --slidev-code-font-size: 12px;
-  --slidev-code-line-height: 18px;
-  --slidev-code-radius: 4px;
-  --slidev-code-margin: 4px 0;
-}
-
 .slidev-code {
   font-family: var(--slidev-code-font-family) !important;
   padding: var(--slidev-code-padding) !important;

packages/client/styles/index.css

@@ -11,7 +11,7 @@ body,
 }
 
 html {
-  background: black;
+  background: transparent;
 }
 
 .icon-btn {

packages/client/styles/vars.css

@@ -0,0 +1,10 @@
+:root {
+  --slidev-code-background: rgba(125,125,125,0.03);
+  --slidev-code-font-family: theme('fontFamily.mono');
+  --slidev-code-padding: 8px;
+  --slidev-code-font-size: 12px;
+  --slidev-code-line-height: 18px;
+  --slidev-code-radius: 4px;
+  --slidev-code-margin: 4px 0;
+  --slidev-slide-container-background: black;
+}

packages/slidev/node/plugins/loaders.ts

@@ -304,6 +304,7 @@ export function createSlidesLoader(
 
   async function generateUserStyles() {
     const imports: string[] = [
+      `import "${toAtFS(join(clientRoot, 'styles/vars.css'))}"`,
       `import "${toAtFS(join(clientRoot, 'styles/index.css'))}"`,
       `import "${toAtFS(join(clientRoot, 'styles/code.css'))}"`,
     ]