feat: allow to include shared styles (#41)

* feat: allow to include shared styles

* feat: watch the chages for shared styles

* refactor: change the injecting position of shared style

package.json

@@ -36,6 +36,17 @@
     "onCommand:extension.openVueDesigner"
   ],
   "contributes": {
+    "configuration": {
+      "type": "object",
+      "title": "Vue Designer configuration",
+      "properties": {
+        "vueDesigner.sharedStyles": {
+          "type": "array",
+          "default": [],
+          "description": "Path to css files which will be loaded globally in the preview"
+        }
+      }
+    },
     "commands": [
       {
         "command": "extension.openVueDesigner",

src/message/bus.ts

@@ -26,18 +26,25 @@ export function observeServerEvents(
   activeUri: string | undefined
 ): void {
   let lastActiveUri: string | undefined = activeUri
+  let sharedStyle: string = ''
 
   const vueFileToPayload = (vueFile: VueFile) => {
     return _vueFileToPayload(vueFile, assetResolver)
   }
 
   bus.on('initClient', () => {
     bus.emit('initProject', mapValues(vueFiles, vueFileToPayload))
+    bus.emit('initSharedStyle', sharedStyle)
     if (lastActiveUri) {
       bus.emit('changeDocument', lastActiveUri)
     }
   })
 
+  bus.on('loadSharedStyle', style => {
+    sharedStyle = style
+    bus.emit('initSharedStyle', style)
+  })
+
   bus.on('selectNode', payload => {
     const vueFile = vueFiles[payload.uri]
     if (!vueFile || !vueFile.template || payload.templatePath.length === 0) {

src/message/types.ts

@@ -3,6 +3,7 @@ import { VueFilePayload } from '../parser/vue-file'
 
 export interface Events {
   initClient: undefined
+  loadSharedStyle: string
   selectNode: {
     uri: string
     templatePath: number[]
@@ -44,6 +45,7 @@ export interface Events {
 
 export interface Commands {
   initProject: Record<string, VueFilePayload>
+  initSharedStyle: string
   changeDocument: string
   highlightEditor: {
     uri: string

src/payload.ts

@@ -1,7 +1,7 @@
 import { VueFilePayload } from './parser/vue-file'
 import { DeclarationForUpdate, DeclarationForAdd } from './parser/style/types'
 
-export type ServerPayload = InitProject | ChangeDocument
+export type ServerPayload = InitProject | InitSharedStyle | ChangeDocument
 export type ClientPayload =
   | SelectNode
   | AddNode
@@ -14,6 +14,11 @@ export interface InitProject {
   vueFiles: Record<string, VueFilePayload>
 }
 
+export interface InitSharedStyle {
+  type: 'InitSharedStyle'
+  style: string
+}
+
 export interface ChangeDocument {
   type: 'ChangeDocument'
   uri: string

src/server/main.ts

@@ -133,6 +133,10 @@ export function wsCommandEmiter(
       send({ type: 'InitProject', vueFiles: payload })
     })
 
+    observe('initSharedStyle', payload => {
+      send({ type: 'InitSharedStyle', style: payload })
+    })
+
     observe('changeDocument', payload => {
       send({ type: 'ChangeDocument', uri: payload })
     })

src/view/components/PageMain.vue

@@ -10,6 +10,7 @@
           :width="width"
           :height="height"
           :scale="scale"
+          :shared-style="sharedStyle"
           @select="select"
           @dragover="setDraggingPlace"
           @add="applyDraggingElement"
@@ -113,7 +114,8 @@ export default Vue.extend({
     ...projectMapper.mapState({
       uri: 'currentUri',
       selectedPath: 'selectedPath',
-      matchedRules: 'matchedRules'
+      matchedRules: 'matchedRules',
+      sharedStyle: 'sharedStyle'
     }),
 
     ...viewportMapper.mapState(['width', 'height', 'scale']),

src/view/components/Renderer.vue

@@ -6,6 +6,7 @@
         :width="width"
         :height="height"
         :scale="scale"
+        :shared-style="sharedStyle"
         @resize="$emit('resize', arguments[0])"
         @zoom="$emit('zoom', arguments[0])"
       >
@@ -71,6 +72,10 @@ export default Vue.extend({
     scale: {
       type: Number,
       required: true
+    },
+    sharedStyle: {
+      type: String,
+      required: true
     }
   },
 

src/view/components/Viewport.vue

@@ -8,6 +8,9 @@
     :style="viewportStyle"
     @resize="$emit('resize', arguments[0])"
   >
+    <!-- Hack for avoiding template compile error of style elements -->
+    <div is="style" :text-content.prop="sharedStyle" />
+
     <div class="viewport">
       <slot />
     </div>
@@ -43,6 +46,10 @@ export default Vue.extend({
     scale: {
       type: Number,
       required: true
+    },
+    sharedStyle: {
+      type: String,
+      required: true
     }
   },
 

src/view/store/modules/project/project-actions.ts

@@ -45,6 +45,9 @@ export class ProjectActions extends Actions<
           })
           this.matchSelectedNodeWithStyles()
           break
+        case 'InitSharedStyle':
+          this.mutations.setSharedStyle(data.style)
+          break
         case 'ChangeDocument':
           this.mutations.changeDocument(data.uri)
           break

src/view/store/modules/project/project-getters.ts

@@ -18,18 +18,18 @@ export class ProjectGetters extends Getters<ProjectState>() {
       const pathEls = doc.uri.split('/')
       const displayName = pathEls[pathEls.length - 1].replace(/\..*$/, '')
 
+      const styleCodes = doc.styles.reduce<string[]>((acc, style) => {
+        return acc.concat(genStyle(addScopeToStyle(style, doc.scopeId)))
+      }, [])
+
       return {
         uri: doc.uri,
         displayName,
         template: doc.template && addScopeToTemplate(doc.template, doc.scopeId),
         props: doc.props,
         data: doc.data,
         childComponents: doc.childComponents,
-        styleCode: doc.styles
-          .reduce<string[]>((acc, style) => {
-            return acc.concat(genStyle(addScopeToStyle(style, doc.scopeId)))
-          }, [])
-          .join('\n')
+        styleCode: styleCodes.join('\n')
       }
     })
   }

src/view/store/modules/project/project-mutations.ts

@@ -50,6 +50,10 @@ export class ProjectMutations extends Mutations<ProjectState>() {
     }
   }
 
+  setSharedStyle(style: string): void {
+    this.state.sharedStyle = style
+  }
+
   setDraggingUri(uri: string | undefined): void {
     this.state.draggingUri = uri
   }

src/view/store/modules/project/project-state.ts

@@ -5,6 +5,7 @@ import { DocumentScope } from './types'
 export class ProjectState {
   documents: Record<string, VueFilePayload> = {}
   documentScopes: Record<string, DocumentScope> = {}
+  sharedStyle = ''
   currentUri: string | undefined = undefined
   draggingUri: string | undefined = undefined
   selectedPath: number[] = []

src/vscode/watcher.ts

@@ -0,0 +1,78 @@
+import * as vscode from 'vscode'
+import * as path from 'path'
+
+export class Watcher extends vscode.Disposable {
+  private sharedStyleUris: vscode.Uri[]
+  private innerWatcher: vscode.FileSystemWatcher
+
+  constructor(rootPath: string) {
+    super(() => {
+      this.innerWatcher.dispose()
+    })
+
+    const config = vscode.workspace.getConfiguration('vueDesigner')
+
+    this.sharedStyleUris = (config.get<string[]>('sharedStyles') || []).map(
+      stylePath => {
+        return vscode.Uri.file(path.join(rootPath, stylePath))
+      }
+    )
+
+    const pattern = new vscode.RelativePattern(rootPath, '**/*.{vue,css}')
+    this.innerWatcher = vscode.workspace.createFileSystemWatcher(pattern)
+  }
+
+  onDidCreateComponent(
+    fn: (uri: vscode.Uri, doc: vscode.TextDocument) => void
+  ): void {
+    this.innerWatcher.onDidCreate(this.createVueListener(fn))
+  }
+
+  onDidChangeComponent(
+    fn: (uri: vscode.Uri, doc: vscode.TextDocument) => void
+  ): void {
+    this.innerWatcher.onDidChange(this.createVueListener(fn))
+  }
+
+  onDidDeleteComponent(fn: (uri: vscode.Uri) => void): void {
+    this.innerWatcher.onDidDelete(fn)
+  }
+
+  onDidChangeSharedStyle(fn: (style: string) => void): void {
+    const uris = this.sharedStyleUris.map(uri => uri.toString())
+
+    const interpolate = (uri: vscode.Uri): void => {
+      if (uris.indexOf(uri.toString()) < 0) {
+        return
+      }
+
+      Promise.all(
+        this.sharedStyleUris.map(uri => {
+          return vscode.workspace
+            .openTextDocument(uri)
+            .then(doc => doc.getText(), () => '')
+        })
+      ).then(styles => {
+        fn(styles.join('\n'))
+      })
+    }
+
+    const w = this.innerWatcher
+    w.onDidCreate(interpolate)
+    w.onDidChange(interpolate)
+    w.onDidDelete(interpolate)
+  }
+
+  private createVueListener(
+    fn: (uri: vscode.Uri, doc: vscode.TextDocument) => void
+  ): (uri: vscode.Uri) => void {
+    return uri => {
+      if (path.extname(uri.fsPath) !== '.vue') {
+        return
+      }
+      vscode.workspace.openTextDocument(uri).then(doc => {
+        fn(uri, doc)
+      })
+    }
+  }
+}

src/vue-designer.ts

@@ -1,4 +1,5 @@
 import * as vscode from 'vscode'
+import * as path from 'path'
 import { AddressInfo } from 'net'
 import { CommandEmitter, MessageBus, EventObserver } from 'meck'
 import {
@@ -11,6 +12,7 @@ import { VueFile } from './parser/vue-file'
 import { Commands, Events } from './message/types'
 import { observeServerEvents } from './message/bus'
 import { AssetResolver } from './asset-resolver'
+import { Watcher } from './vscode/watcher'
 
 function createHighlight(): vscode.TextEditorDecorationType {
   return vscode.window.createTextEditorDecorationType({
@@ -20,8 +22,10 @@ function createHighlight(): vscode.TextEditorDecorationType {
 
 function createVSCodeEventObserver(): EventObserver<Events> {
   const folders = vscode.workspace.workspaceFolders
-  const pattern = folders && new vscode.RelativePattern(folders[0], '**/*.vue')
-  const watcher = pattern && vscode.workspace.createFileSystemWatcher(pattern)
+  const watcher = folders && new Watcher(folders[0].uri.fsPath)
+
+  const config = vscode.workspace.getConfiguration('vueDesigner')
+  const sharedStylePaths = config.get<string[]>('sharedStyles') || []
 
   return new EventObserver(emit => {
     vscode.window.onDidChangeActiveTextEditor(editor => {
@@ -42,27 +46,27 @@ function createVSCodeEventObserver(): EventObserver<Events> {
     })
 
     if (watcher) {
-      watcher.onDidCreate(uri => {
-        vscode.workspace.openTextDocument(uri).then(document => {
-          emit('addDocument', {
-            uri: uri.toString(),
-            code: document.getText()
-          })
+      watcher.onDidCreateComponent((uri, doc) => {
+        emit('addDocument', {
+          uri: uri.toString(),
+          code: doc.getText()
         })
       })
 
-      watcher.onDidChange(uri => {
-        vscode.workspace.openTextDocument(uri).then(document => {
-          emit('changeDocument', {
-            uri: uri.toString(),
-            code: document.getText()
-          })
+      watcher.onDidChangeComponent((uri, doc) => {
+        emit('changeDocument', {
+          uri: uri.toString(),
+          code: doc.getText()
         })
       })
 
-      watcher.onDidDelete(uri => {
+      watcher.onDidDeleteComponent(uri => {
         emit('removeDocument', uri.toString())
       })
+
+      watcher.onDidChangeSharedStyle(style => {
+        emit('loadSharedStyle', style)
+      })
     }
 
     vscode.workspace.findFiles('**/*.vue', '**/node_modules/**').then(uris => {
@@ -75,6 +79,21 @@ function createVSCodeEventObserver(): EventObserver<Events> {
         })
       })
     })
+
+    if (folders) {
+      const rootPath = folders[0].uri.fsPath
+
+      Promise.all(
+        sharedStylePaths.map(stylePath => {
+          const fsStylePath = path.join(rootPath, stylePath)
+          return vscode.workspace
+            .openTextDocument(fsStylePath)
+            .then(doc => doc.getText(), () => '')
+        })
+      ).then(sharedStyles => {
+        emit('loadSharedStyle', sharedStyles.join('\n'))
+      })
+    }
   })
 }