0.2.0 • Published 2 years ago
@aki77/vite-plugin-preview v0.2.0
vite-plugin-preview
Installation
yarn add -D @aki77/vite-plugin-preview
// vite.config.ts
import { PreviewPlugin } from '@aki77/vite-plugin-preview'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [PreviewPlugin(/*options*/)],
})
Usage
yarn vite --open /__preview
Options Examples
Chakra UI + Next.js
// vite.config.ts
import path from 'path'
import { PreviewPlugin } from '@aki77/vite-plugin-preview'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
resolve: {
alias: [
{
find: '@/',
replacement: `${path.resolve(__dirname, 'src')}/`,
},
],
},
define: {
'process.env': {},
},
plugins: [
react(),
PreviewPlugin({
pattern: './src/**/*.preview.tsx',
wrapper: path.resolve(__dirname, '__preview__/Wrapper.tsx'),
framework: 'react',
}),
],
})
// __preview__/Wrapper.tsx
import { Center, ChakraProvider } from '@chakra-ui/react'
import React, { ReactNode, VFC } from 'react'
import { chakraTheme } from '../src/chakraTheme'
type WrapperProps = {
children: ReactNode
}
const Wrapper: VFC<WrapperProps> = ({ children }) => {
return (
<ChakraProvider theme={chakraTheme}>
<Center p="4">
{children}
</Center>
</ChakraProvider>
)
}
export default Wrapper
Vue3
//vite.config.ts
import path from 'path'
import { PreviewPlugin } from '@aki77/vite-plugin-preview'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
resolve: {
alias: [
{
find: '@/',
replacement: `${path.resolve(__dirname, 'src')}/`,
},
],
},
plugins: [
PreviewPlugin({
pattern: './src/**/*.preview.vue',
head: '@/previews/head',
wrapper: '@/previews/Wrapper.vue',
framework: 'vue',
}),
vue(),
],
})
// src/previews/head.ts
import '@/stylesheets/main.scss'
// src/previews/Wrapper.vue
<template>
<div class="p-4">
<slot></slot>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({})
</script>
Vue2
//vite.config.ts
import path from 'path'
import { PreviewPlugin } from '@aki77/vite-plugin-preview'
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
resolve: {
alias: [
{
find: '@/',
replacement: `${path.resolve(__dirname, 'src')}/`,
},
],
},
plugins: [
PreviewPlugin({
pattern: './src/**/*.preview.vue',
head: '@/previews/head',
wrapper: '@/previews/Wrapper.vue',
framework: 'vue2',
}),
createVuePlugin(),
],
})
// src/previews/head.ts
import VueCompositionApi from '@vue/composition-api'
import Vue from 'vue'
import '@/stylesheets/main.scss'
Vue.use(VueCompositionApi)
// src/previews/Wrapper.vue
<template>
<div class="p-4">
<slot></slot>
</div>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
export default defineComponent({})
</script>