@chore update

foolishchow · May 21, 2022 · 7c54e7a · 7c54e7a
1 parent 360a638
commit 7c54e7a
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 42 deletions.
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -0,0 +1,57 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "declaration": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "rootDir": "./",
+    "baseUrl": "./",
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@vform/element": [
+        "./src/index.ts"
+      ],
+      "@vform/element/*": [
+        "./src/*"
+      ],
+      "@examples/*": [
+        "./examples/*"
+      ]
+    }
+  },
+  "include": [
+    "src",
+    "docs",
+    "build",
+    "examples"
+    // "src/**/*.ts",
+    // "src/**/*.d.ts",
+    // "src/**/*.tsx",
+    // "src/**/*.vue",
+    // "docs/**/*.ts",
+    // "docs/**/*.d.ts",
+    // "docs/**/*.tsx",
+    // "docs/**/*.vue",
+    // "docs/**/*.ts",
+    // "build/**/*.d.ts",
+    // "build/**/*.tsx",
+    // "build/**/*.vue",
+  ],
+  "exclude": [
+    "docs/.vitepress/dist"
+  ]
+}
diff --git a/vitepress-live-demo/package.json b/vitepress-live-demo/package.json
@@ -1,12 +1,12 @@
 {
   "name": "vitepress-live-demo",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "view demo in vitepress",
   "keywords": ["vitepress","demo","live-demo","iframe"],
   "main": "lib/plugin.js",
   "exports": {
     ".": "./lib/plugin.js",
-    "./lib/theme": "./lib/theme.mjs",
+    "./lib/theme": "./lib/theme.js",
     "./lib/iframe": "./lib/iframe.js",
     "./lib/style.css": "./lib/style.css"
   },

diff --git a/vitepress-live-demo/scripts/bundle-assets.js b/vitepress-live-demo/scripts/bundle-assets.js
@@ -32,12 +32,12 @@ exports.bundleTheme = (mode, clean = false) => {
       },
       lib: {
         entry: path.resolve(entryDir, 'theme/index.ts'),
-        fileName: (formats) => `theme.mjs`, // 输出文件名
+        fileName: (formats) => `theme.js`, // 输出文件名
         formats: ['es'],
       },
       outDir
     },
-    plugins: [vue(), vueJsx()],
+    plugins: [KeepMetaPlugin, vue(), vueJsx()],
   })
 }
 
@@ -63,10 +63,6 @@ exports.bundlePlugin = (mode, clean = false) => {
 
 exports.bundleDemo = (mode, clean = false) => {
   return viteBuild({
-
-    esbuild: {
-
-    },
     build: {
       mode: "development",
       emptyOutDir: clean,

diff --git a/vitepress-live-demo/scripts/bundle.js b/vitepress-live-demo/scripts/bundle.js
@@ -40,7 +40,7 @@ async function bundle() {
     await bundleTheme('build')
     await bundleThemeType('build')
     await bundleDemo('build')
-    await bundleThemeType('build')
+    await bundleDemoType('build')
   }
 
 }

diff --git a/vitepress-live-demo/src/plugin/code-raw/resolveModule.ts b/vitepress-live-demo/src/plugin/code-raw/resolveModule.ts
@@ -2,7 +2,6 @@ import fs from 'fs'
 import path from 'path'
 import util from 'util'
 import { highlight } from './highlight'
-import type { Options } from '../vite/raw-code'
 import type { FileAttr } from '../markdown/render'
 const readFile = util.promisify(fs.readFile)
 const exist = util.promisify(fs.exists)
@@ -12,7 +11,7 @@ import type { LiveDemoPluginOptions } from '..'
 /**
  * 读取文件
  */
-export async function resolveModule(filePath: string, opt: Required<LiveDemoPluginOptions>): Promise<FileAttr | null> {
+export async function resolveModule(filePath: string, opt: LiveDemoPluginOptions): Promise<FileAttr | null> {
   const extisted = await exist(filePath);
   if (!extisted) return null
   const language = path.extname(filePath).replace(/\./, '')
@@ -30,8 +29,8 @@ export async function resolveModule(filePath: string, opt: Required<LiveDemoPlug
 }
 
 
-function wrapCode(highlighted: string, language: string, opt: Required<LiveDemoPluginOptions>) {
-  if (opt.lineNumber) {
+function wrapCode(highlighted: string, language: string, opt: LiveDemoPluginOptions) {
+  if (opt.lineNumber??true) {
     return lineNumber(highlighted, language)
   }
   return `<div class="language-${language}">${highlighted}</div>`

diff --git a/vitepress-live-demo/src/plugin/index.ts b/vitepress-live-demo/src/plugin/index.ts
@@ -39,39 +39,33 @@ export interface LiveDemoPluginOptions {
    *
    * @default false
    */
-  // preferIframe?: boolean
+  // alwaysIframe?: boolean
+  /**
+   * whether show open in new Tab
+   *
+   * @default false
+   */
+  // alwaysShowNewTabIcon?: boolean
 
   /**
    * options for scan demo
    *
    * `only used in build`
    *
    * [glob patterns](https://github.com/sindresorhus/globby#globbing-patterns).
-   * @default   {[`docs/**\/*.{vue,ts,tsx,js,jsx}`, `examples/**\/*.{vue,ts,tsx,js,jsx}`,'!.vitepress']}
+   * @default   {[`docs/**\/*.{vue,ts,tsx,js,jsx}`, `examples/**\/*.{vue,ts,tsx,js,jsx}`,'!.vitepress','!**\/*\/vite.config.{ts,js}']}
    */
   demos?: string[]
 }
 
 
-
 function VitePluginLiveDemo(option: LiveDemoPluginOptions = {}): PluginOption {
-  const defaultDemos = ['docs/**/*.{js,jsx,ts,tsx,vue}','examples/**/*.{js,jsx,ts,tsx,vue}','!.vitepress']
-  const defaultOption: Required<LiveDemoPluginOptions> = {
-    lineNumber: true,
-    // preferIframe: false,
-    demos: defaultDemos
-  }
-  const opt: Required<LiveDemoPluginOptions> = {
-    ...defaultOption,
-    ...option
-  }
-  if(!opt.demos || opt.demos.length == 0){
-    opt.demos = defaultDemos
-  }
+
+
   return [
-    RawCodePlugin(opt),
+    RawCodePlugin(option),
     DemoDevPlugin(),
-    DemoBuildPlugin(opt)
+    DemoBuildPlugin(option)
   ]
 }
 export { VitePluginLiveDemo, MarkdownItLiveDemo }
diff --git a/vitepress-live-demo/src/plugin/markdown/index.ts b/vitepress-live-demo/src/plugin/markdown/index.ts
@@ -4,7 +4,6 @@ import { compatDemo, parseDemoAttr } from './render';
 export const MarkdownItLiveDemo = (md: MarkdownIt) => {
   md.renderer.rules.html_inline = md.renderer.rules.html_block = (tokens, idx) => {
     const content = tokens[idx].content;
-
     if (/^<demo(?=(\s|>|$))/i.test(content.trim())) {
       const attrs = parseDemoAttr(content)
       if(!attrs.src){

diff --git a/vitepress-live-demo/src/plugin/vite/demo-build.ts b/vitepress-live-demo/src/plugin/vite/demo-build.ts
@@ -7,18 +7,20 @@ import type { LiveDemoPluginOptions } from '..'
 // @ts-ignore
 const globby: typeof import('globby') = require('globby')
 
+const defaultDemos = ['docs/**/*.{js,jsx,ts,tsx,vue}','examples/**/*.{js,jsx,ts,tsx,vue}','!.vitepress',"!**/*/vite.config.{js,ts}"]
 
-export function DemoBuildPlugin(option:Required<LiveDemoPluginOptions>) {
+export function DemoBuildPlugin(option:LiveDemoPluginOptions) {
   let config: ParsedViteConfig = {} as any
   const chunkMap: any = {}
   return {
     name: "vite:live-demo:demo-build",
     apply: 'build',
     enforce: 'pre',
     async config(config) {
+      if(config.build?.ssr) return
       const input = config?.build?.rollupOptions?.input || {}
-
-      const demos = await globby(option.demos)
+      const demosGlobby = option.demos ?? defaultDemos
+      const demos = await globby(demosGlobby)
       // console.info(demos)
       demos.forEach(demo => {
         // @ts-ignore

diff --git a/vitepress-live-demo/src/plugin/vite/raw-code.ts b/vitepress-live-demo/src/plugin/vite/raw-code.ts
@@ -6,7 +6,6 @@ import { getAbsolutePath } from '../code-raw/common'
 import type { LiveDemoPluginOptions } from '..'
 import * as path from 'path'
 
-
 function isSSR(option?: { ssr?: boolean }) {
   if (!option) return true
   if (option.ssr != undefined) return option.ssr
@@ -22,12 +21,19 @@ export interface Options {
 /**
  * an `Vite` plugin for server `live-demo` raw code
  */
-export function RawCodePlugin(options:Required<LiveDemoPluginOptions>) {
+export function RawCodePlugin(options: LiveDemoPluginOptions) {
   const files = new Set<string>()
   return {
     name: 'vite:live-demo:raw-code', // 必须的，将会在 warning 和 error 中显示
     enforce: 'post',
-    configResolved(_config){
+    config(config) {
+      // https://github.com/vuejs/vitepress/issues/476#issuecomment-1046189073
+      // @ts-ignore
+      const noExternal = config.ssr.noExternal || (config.ssr.noExternal = [])
+      noExternal.push('vitepress-live-demo')
+    },
+    configResolved(config) {
+      // config.env.Live_Demo_Alawys_Show_New_Tab = options.alwaysShowNewTabIcon ?? false
     },
     handleHotUpdate(ctx) {
       if (files.has(ctx.file)) {

diff --git a/vitepress-live-demo/src/theme/LiveDemoContainer.tsx b/vitepress-live-demo/src/theme/LiveDemoContainer.tsx
@@ -3,7 +3,6 @@ import useCopy from './useCopy';
 import { LiveDemoIcon } from './icons'
 import './live-demo.css'
 import { LiveDemoFile } from '../constant';
-
 /**
  * LiveDemoComponentProps definition
  */
@@ -32,6 +31,13 @@ export const LiveDemoComponenentProps = {
     type: Array as PropType<LiveDemoFile[]>,
     default: () => [],
   },
+  alwaysShowNewTab: {
+    type: Boolean,
+    default() {
+      return false
+      // return import.meta.env.Live_Demo_Alawys_Show_New_Tab as boolean
+    }
+  }
 }
 /**
  * component for `LiveDemo`
@@ -96,6 +102,12 @@ export const LiveDemoComponenent = defineComponent({
         props.iframe,
         <div class="browser-nav"></div>
       )
+      const newTabIcon = onlyWhen(
+        props.iframe || props.alwaysShowNewTab,
+        <ToolTip tip="在新标签页中打开">
+          <LiveDemoIcon name='newTab' onClick={openNewTab} />
+        </ToolTip>
+      )
       const iframeIcons = onlyWhen(
         props.iframe,
         <ToolTip tip="刷新">
@@ -141,9 +153,7 @@ export const LiveDemoComponenent = defineComponent({
 
           <div class="action-line">
             <div class="action-line__buttons">
-              <ToolTip tip="在新标签页中打开">
-                <LiveDemoIcon name='newTab' onClick={openNewTab} />
-              </ToolTip>
+              {newTabIcon}
               {iframeIcons}
             </div>
             {fileHeaders}