Support template and style compiler plugins.

README.md

@@ -1,5 +1,64 @@
-# Meteor + Vue 3
+# Meteor Vue3 compiler
 
-## Packages
+_Forked from [Meteor-vue3](https://github.com/meteor-vue/meteor-vue3) to support compilers._
 
-[vuejs:vue3](./packages/vue3)
+This Meteor Vue3 compiler is supported by [Altruistiq](https://altruistiq.com) and supports compiler plugins for templates and styling. Currently there are 2 compilere plugins available:
+
+- [seamink:vue3-sass](https://github.com/Altruistiq/vue3-sass)
+- [akryum:vue-pug](https://github.com/meteor-vue/vue-meteor/tree/master/packages/vue-pug)
+
+but it is rather easy to build additional compilers.
+
+## Install
+```sh
+meteor add seamink:meteor-vue3
+```
+
+## Usage
+Adding compilers you can now do
+```html
+<template lang="pug">
+  div
+    h1 Hello World!
+</template>
+```
+
+and
+
+```scss
+<style lang="scss" scoped>
+.nice {
+  .nested {
+    sass {
+      color: green;
+    }
+  }
+}
+</style>
+```
+
+and it will run and compile your Vue templates just fine.</br>
+For more details see the documentation for the compilers.
+
+## Creating compiler plugins
+The compiler accepts any meteor build plugin that registers itself globally at
+
+```js
+global.vue = global.vue || {}
+global.vue.lang = global.vue.lang || {}
+```
+
+Example
+```js
+global.vue.lang.pug = (input) => {
+  // compile pug plugin function
+  // must return html string
+}
+
+global.vue.lang.scss = (input) => {
+  // compile sass plugin function
+  // must return css string
+}
+```
+
+It currently supports compilers for css and html. That means that the output of your compiler either needs to return css or html.

packages/vue3/.versions

@@ -1,20 +1,20 @@
 [email protected]
 [email protected]
 [email protected]
-[email protected].1
-ecmascript@0.15.3
-ecmascript-runtime@0.7.0
-ecmascript-runtime-client@0.11.1
-ecmascript-runtime-server@0.10.1
+[email protected].2
+ecmascript@0.16.0
+ecmascript-runtime@0.8.0
+ecmascript-runtime-client@0.12.1
+ecmascript-runtime-server@0.11.0
 [email protected]
 [email protected]
-meteor@1.9.3
-[email protected].5
-modules@0.16.0
+meteor@1.10.0
+[email protected].7
+modules@0.17.0
 [email protected]
 [email protected]
 [email protected]
-[email protected]
+[email protected]
+seamink:[email protected]
 tmeasday:[email protected]
-[email protected]
-vuejs:[email protected]
+[email protected]

packages/vue3/package.js

@@ -1,8 +1,8 @@
 Package.describe({
-  name: 'vuejs:vue3',
-  version: '0.0.1',
-  summary: 'Vue 3 components',
-  git: 'https://github.com/meteor-vue/meteor-vue3',
+  name: 'seamink:vue3',
+  version: '0.0.3',
+  summary: 'Meteor Vue 3 compiler supporting compile plugins',
+  git: 'https://github.com/Altruistiq/meteor-vue3',
   documentation: 'README.md',
 })
 

packages/vue3/src/build/compiler.js

@@ -20,6 +20,24 @@ export class VueCompiler extends MultiFileCachingCompiler {
     ]
   }
 
+  normalizeTemplate(template) {
+    // In order to prevent Prettier from reporting error,
+    // one more temporary variable had to be used to reconstruct follow code:
+    // const indent = template.match(/^\n?(\s+)/)?.[1]
+    const temp = template.match(/^\n?(\s+)/)
+    const indent = temp && temp[1]
+
+    if (indent) {
+      return template
+        .split('\n')
+        .map(str => str.replace(indent, ''))
+        .join('\n')
+    }
+
+    return template
+  }
+
+
   async compileOneFile (inputFile) {
     const contents = inputFile.getContentsAsString()
     const filename = inputFile.getPathInPackage()
@@ -54,10 +72,34 @@ export class VueCompiler extends MultiFileCachingCompiler {
     }
 
     if (descriptor.template) {
+      let template 
+
+      const lang = descriptor.template.attrs.lang
+
+      // if a template language is set (for example pug) 
+      // check if there's a compiler and compile the template
+      if(lang) {
+        const templateCompiler = global.vue.lang[lang]
+
+        if (templateCompiler) {
+          const result = templateCompiler({
+            source: this.normalizeTemplate(descriptor.template.content),
+            inputFile: this.inputFile,
+            basePath: descriptor.template.map.file,
+          })
+
+          template = result.template
+        } else {
+          throw new Error(`Compiler missing for ${lang}`)
+        }
+      } else {
+        template = descriptor.template.content
+      }
+
       const templateResult = compileTemplate({
         id: scopeId,
         filename,
-        source: descriptor.template.content,
+        source: template,
         scoped: hasScoped,
         isProd,
         inMap: descriptor.template.map,
@@ -121,6 +163,23 @@ export class VueCompiler extends MultiFileCachingCompiler {
     }
 
     for (const style of descriptor.styles) {
+
+      // compile sass, scss, etc first to css      
+      if (style.lang) {
+        const styleCompiler = global.vue.lang[style.lang]
+
+        if (styleCompiler) {   
+          // expect this compiler to return css    
+          style.content = styleCompiler({
+            data: style.content,
+            filename,
+          })
+        } else {
+          throw new Error(`Compiler missing for ${style.lang}`)
+        }
+      }
+
+      // compile css styles so scope etc is applied
       const styleResult = await compileStyleAsync({
         id: scopeId,
         filename,