feat: theme working

packages/demo/package.json → demo/package.json

@@ -1,11 +1,11 @@
 {
   "private": true,
+  "version": "0.0.0-beta.1",
   "scripts": {
     "dev": "vite-slides",
     "build": "vite-slides build"
   },
   "dependencies": {
     "vite-slides": "workspace:*"
-  },
-  "version": "0.0.0-beta.1"
+  }
 }

package.json

@@ -1,12 +1,10 @@
 {
-  "name": "vite-slides",
-  "version": "0.0.0-beta.1",
-  "files": [],
+  "private": true,
   "scripts": {
     "dev": "npm -C packages/demo run dev",
     "demo:build": "npm -C packages/demo run build",
     "build": "pnpm -r run build",
-    "release": "npx bumpp package.json packages/*/package.json --commit --tag --push && pnpm -r publish"
+    "release": "npx bumpp packages/*/package.json --commit --tag --push && pnpm -r publish"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.6.2",

packages/theme-default/layouts/center.vue

@@ -1,13 +1,7 @@
 <template>
-  <div class="master center">
+  <div class="layout-master center">
     <div class="my-auto">
       <slot />
     </div>
   </div>
 </template>
-
-<style lang="postcss">
-.master.center {
-  @apply h-full grid place-content-center;
-}
-</style>

packages/theme-default/layouts/cover.vue

@@ -1,21 +1,7 @@
 <template>
-  <div class="master cover">
+  <div class="layout-master cover">
     <div class="my-auto">
       <slot />
     </div>
   </div>
 </template>
-
-<style lang="postcss">
-.master.cover {
-  @apply h-full flex;
-
-  h1 {
-    @apply text-6xl leading-20;
-  }
-
-  h1 ~ p {
-    @apply opacity-40 mb-10 text-2xl;
-  }
-}
-</style>

packages/theme-default/styles/index.ts

@@ -1,6 +1,3 @@
-import 'virtual:windi-base.css'
-import 'virtual:windi-components.css'
 import './main.css'
+import './layout.css'
 import './code.css'
-import 'virtual:windi-utilities.css'
-import 'virtual:windi-devtools'

packages/theme-default/layouts/default.vue → packages/theme-default/styles/layout.css

@@ -1,11 +1,4 @@
-<template>
-  <main class="master default">
-    <slot />
-  </main>
-</template>
-
-<style lang="postcss">
-.master {
+.layout-master {
   @apply px-14 py-10 text-[1.1rem];
 
   h1, h2, h3, h4, p, div {
@@ -84,4 +77,19 @@
     @apply font-600;
   }
 }
-</style>
+
+.layout-master.cover {
+  @apply h-full flex;
+
+  h1 {
+    @apply text-6xl leading-20;
+  }
+
+  h1 ~ p {
+    @apply opacity-40 mb-10 text-2xl;
+  }
+}
+
+.layout-master.center {
+  @apply h-full grid place-content-center;
+}

packages/vite-slides/client/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <main class="layout-master default">
+    <slot />
+  </main>
+</template>

packages/theme-default/layouts/end.vue → packages/vite-slides/client/layouts/end.vue

@@ -1,11 +1,11 @@
 <template>
-  <main class="master end">
+  <main class="layout-master end">
     END
   </main>
 </template>
 
 <style lang="postcss">
-.master.end {
+.layout-master.end {
   @apply text-white text-opacity-85 text-xl tracking-widest bg-black h-full text-center grid place-content-center select-none;
 }
 </style>

packages/vite-slides/client/main.ts

@@ -1,7 +1,11 @@
 import { ViteSSG } from 'vite-ssg'
 import { getRoutes } from './routes'
 import App from './App.vue'
+import 'virtual:windi-base.css'
+import 'virtual:windi-components.css'
 /* __imports__ */
+import 'virtual:windi-utilities.css'
+import 'virtual:windi-devtools'
 
 const routes = getRoutes(/* __layouts__ */)
 

packages/vite-slides/node/plugins/entry.ts

@@ -0,0 +1,68 @@
+import { existsSync } from 'fs'
+import { join, resolve, basename } from 'path'
+import { Plugin } from 'vite'
+import fg from 'fast-glob'
+import { getPackageRoot, getThemeRoot } from '../env'
+
+export function createEntryPlugin(): Plugin {
+  const packageRoot = getPackageRoot()
+  const themeRoot = getThemeRoot()
+  const mainEntry = resolve(packageRoot, 'client/main.ts')
+  const userRoot = process.cwd()
+
+  return {
+    name: 'vite-slides:entry',
+    enforce: 'pre',
+    async transform(code, id) {
+      if (id === mainEntry) {
+        const imports: string[] = []
+        const layouts: Record<string, string> = {}
+
+        async function scanStyle(root: string) {
+          const styles = [
+            join(root, 'styles/index.ts'),
+            join(root, 'styles/index.js'),
+            join(root, 'styles/index.css'),
+            join(root, 'styles.css'),
+            join(root, 'style.css'),
+          ]
+
+          for (const style of styles) {
+            if (existsSync(style)) {
+              imports.push(`import "/@fs${style}"`)
+              return
+            }
+          }
+        }
+
+        async function scanLayouts(root: string) {
+          const layoutPaths = await fg('layouts/*.{vue,ts}', {
+            cwd: root,
+            absolute: true,
+          })
+
+          for (const layoutPath of layoutPaths) {
+            const layout = basename(layoutPath).replace(/\.\w+$/, '')
+            if (layouts[layout])
+              continue
+            imports.push(`import __layout_${layout} from "/@fs${layoutPath}"`)
+            layouts[layout] = `__layout_${layout}`
+          }
+        }
+
+        await scanStyle(themeRoot)
+        await scanStyle(userRoot)
+
+        await scanLayouts(join(packageRoot, 'client'))
+        await scanLayouts(themeRoot)
+        await scanLayouts(userRoot)
+
+        code = code.replace('/* __imports__ */', imports.join('\n'))
+        code = code.replace('/* __layouts__ */', `{${Object.entries(layouts).map(([k, v]) => `"${k}": ${v}`).join(',\n')}}`)
+        return code
+      }
+
+      return null
+    },
+  }
+}

packages/vite-slides/node/plugins/preset.ts

@@ -1,12 +1,9 @@
 
-import { existsSync } from 'fs'
-import { join, resolve, basename } from 'path'
 import { mergeConfig, Plugin } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 import ViteComponents from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
-import fg from 'fast-glob'
 import WindiCSS from 'vite-plugin-windicss'
 import Prism from 'markdown-it-prism'
 import base64 from 'js-base64'
@@ -15,6 +12,7 @@ import { getDefultWindiConfig } from '../windicss'
 import { getIndexHtml } from '../common'
 import { createSlidesLoader } from './slides'
 import { createMonacoLoader } from './monaco'
+import { createEntryPlugin } from './entry'
 
 export type ArgumentsType<T> = T extends ((...args: infer A) => void) ? A : never
 
@@ -36,11 +34,10 @@ export function ViteSlides(options: ViteSlidesOptions = {}): Plugin[] {
   } = options
 
   const packageRoot = getPackageRoot()
-  const mainEntry = resolve(packageRoot, 'client/main.ts')
 
   return [
     {
-      name: 'vite-slides:entry',
+      name: 'vite-slides:config',
       config(config) {
         return mergeConfig(config, {
           optimizeDeps: {
@@ -91,39 +88,6 @@ export function ViteSlides(options: ViteSlidesOptions = {}): Plugin[] {
 
     },
 
-    {
-      name: 'vite-slides:transform',
-      enforce: 'pre',
-      async transform(code, id) {
-        if (id === mainEntry) {
-          const themeRoot = getThemeRoot()
-          const styleIndex = join(themeRoot, 'styles/index.ts')
-          const imports: string[] = []
-          const layouts: Record<string, string> = {}
-
-          if (existsSync(styleIndex))
-            imports.push(`import "/@fs${styleIndex}"`)
-
-          const layoutPaths = await fg('layouts/*.{vue,ts}', {
-            cwd: themeRoot,
-            absolute: true,
-          })
-
-          for (const layoutPath of layoutPaths) {
-            const layout = basename(layoutPath).replace(/\.\w+$/, '')
-            imports.push(`import __layout_${layout} from "/@fs${layoutPath}"`)
-            layouts[layout] = `__layout_${layout}`
-          }
-
-          code = code.replace('/* __imports__ */', imports.join('\n'))
-          code = code.replace('/* __layouts__ */', `{${Object.entries(layouts).map(([k, v]) => `"${k}": ${v}`).join(',\n')}}`)
-          return code
-        }
-
-        return null
-      },
-    },
-
     Vue({
       include: [/\.vue$/, /\.md$/],
       ...vueOptions,
@@ -173,6 +137,7 @@ export function ViteSlides(options: ViteSlidesOptions = {}): Plugin[] {
         `${packageRoot}/client/components`,
         `${getThemeRoot()}/components`,
         'src/components',
+        'components',
       ],
 
       customLoaderMatcher: id => id.endsWith('.md'),
@@ -195,6 +160,7 @@ export function ViteSlides(options: ViteSlidesOptions = {}): Plugin[] {
       ...windicssOptions,
     }),
 
+    createEntryPlugin(),
     createSlidesLoader(),
     createMonacoLoader(),
   ]

packages/vite-slides/node/windicss.ts

@@ -10,7 +10,7 @@ export function getDefultWindiConfig() {
       include: [
         resolve(getPackageRoot(), 'client/**/*.{vue,ts}'),
         resolve(getThemeRoot(), '**/*.{vue,ts}'),
-        'src/**/*.{vue,ts}',
+        '**/*.{vue,ts}',
         'slides.md',
       ],
     },

packages/vite-slides/package.json

@@ -2,13 +2,8 @@
   "name": "vite-slides",
   "description": "Opinionated markdown slides maker, powered by Vite and Windi CSS",
   "version": "0.0.0-beta.1",
-  "files": [
-    "bin",
-    "client",
-    "dist"
-  ],
   "scripts": {
-    "build": "tsup node/index.ts node/cli.ts --dts --format cjs,esm",
+    "build": "rimraf dist && tsup node/index.ts node/cli.ts --dts --format cjs,esm",
     "dev": "nr build --watch",
     "start": "esno node/cli.ts",
     "prepublishOnly": "npm run build"
@@ -25,6 +20,11 @@
   "bin": {
     "vite-slides": "./bin/vite-slides.js"
   },
+  "files": [
+    "bin",
+    "client",
+    "dist"
+  ],
   "dependencies": {
     "@iconify/json": "^1.1.330",
     "@vite-slides/theme-default": "workspace:*",
@@ -63,6 +63,7 @@
     "eslint": "^7.24.0",
     "esno": "^0.5.0",
     "pnpm": "^6.1.0",
+    "rimraf": "^3.0.2",
     "tsup": "^4.8.21",
     "typescript": "^4.2.4",
     "vite-ssg": "^0.9.2"

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 packages:
   - packages/*
+  - demo