Loader working without styles

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/.DS_Store

Hello.vue

@@ -0,0 +1,30 @@
+<template>
+  <p class="hello-vue">{{message}}</p>
+</template>
+
+<script>
+export default {
+  name: 'hello',
+  data () {
+    return {
+      message: 'Hello, Vue!'
+    }
+  },
+  methods: {
+    log (value) {
+      console.log(value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  padding-top: 100px;
+  padding-bottom: 100px;
+}
+
+p.hello-vue {
+  color: lightseagreen;
+}
+</style>

README.md

@@ -0,0 +1,73 @@
+[![Build Status](https://travis-ci.org/stealjs/steal-svg.svg?branch=master)](https://travis-ci.org/stealjs/steal-svg)
+[![npm version](https://badge.fury.io/js/steal-svg.svg)](https://badge.fury.io/js/steal-coffee)
+
+# StealJS plugin for SVG.
+
+Steal ([StealJS](http://stealjs.com/)) is a module loader with sane defaults. Say goodbye to debugging complicated configuration steps. It supports various module formats out of the box (ES6, CommonJS, AMD), and you can even use **a combination of multiple formats!** Steal will figure it out for you.
+
+With the _steal-svg_ plugin, Steal can bundle SVG files with your application.
+
+## Install
+
+```cmd
+npm install steal-svg --save
+```
+
+You'll want to also update your `steal` config:
+
+```json
+{
+  "steal": {
+    "plugins": [
+      "steal-svg"
+    ]
+  }
+}
+```
+
+## Use
+
+After you've installed the plugin, when you import an SVG file `steal-svg` will remove any XML-related namespaces and attributes from the svg content.  This allows you to directly use the file in templating libraries.  The original svg file remains in its original form, so it can be used in `<img src="my.svg">` tags, still.
+
+### Can-Stache Inline SVG example:
+
+Stache is capable of inlining SVG without the need for a separate helper.  You can use any imported SVG content directly in the template using the [{{{EXPRESSION}}}](http://canjs.com/doc/can-stache.tags.unescaped.html) tag.
+
+```handlebars
+<can-import from="img/my-svg.svg" {^@value}="logoSvg"/>
+
+<div class="logo">
+  {{{logoSvg}}}
+</div>
+```
+
+### React Inline SVG example:
+In your HTML page, create a `root` element and use a script tag to bring in StealJS:
+
+```html
+<!--index.html-->
+<section root="true"></section>
+<script src="/node_modules/steal/steal.js" data-main="app.js"></script>
+```
+
+And here's an example app.js file that creates a button with an inline SVG file:
+
+```js
+// app.js:
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SVGInline from 'react-svg-inline';
+import logo from './logo.svg';
+
+// Render the DOM
+ReactDOM.render(
+  <button>
+    <SVGInline svg={logo} />
+  </button>
+  document.querySelector('[root=true]')
+);
+```
+
+## License
+
+MIT

index.html

@@ -0,0 +1,3 @@
+<script src="node_modules/steal/steal.js" main="test"> </script>
+
+<div id="app"></div>

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "steal-vue",
+  "version": "0.0.5",
+  "description": "An SVG loader for StealJS",
+  "main": "steal-vue.js",
+  "repository": "https://github.com/stealjs/steal-svg",
+  "author": "Marshall Thompson - [email protected]",
+  "license": "MIT",
+  "dependencies": {
+    "vue-template-compiler": "^2.2.5"
+  },
+  "steal": {
+    "ext": {
+      "vue": "steal-vue"
+    },
+    "plugins": [
+      "steal-vue"
+    ]
+  },
+  "devDependencies": {
+    "steal": "^1.3.2",
+    "vue": "^2.2.5"
+  }
+}

steal-vue.js

@@ -0,0 +1,14 @@
+const compiler = require('vue-template-compiler');
+
+exports.translate = function (load) {
+  let output = compiler.parseComponent(load.source);
+  let script = output.script && output.script.content;
+  let template = output.template && output.template.content;
+
+  // Inject the template into the script string.
+  let templateString = `template: \`${template}\`, `;
+  let match = script.match(/(name(.*):|data(.*){|methods(.*):|computed(.*):)/im);
+  script = script.substr(0, match.index) + templateString + script.substr(match.index);
+
+  load.source = script;
+};

test.js

@@ -0,0 +1,10 @@
+import Vue from 'vue/dist/vue';
+import AppHello from './Hello.vue';
+
+var app = new Vue({
+  el: '#app',
+  template: `<AppHello />`,
+  components: {
+    AppHello
+  }
+});