Inlining single file components - angularjs

Question

I'm considering vue.js as a migration target for an AngularJS (1.x) webapp.
This app loads a lot of "widgets" in its main page
<script optimize-inline src="data/widgets/solargraph/solargraph.js"></script>
<script optimize-inline src="data/widgets/sensorgraph/sensorgraph.js"></script>
<script optimize-inline src="data/widgets/astralgraph/astralgraph.js"></script>
Each one of these widgets is a custom directive which defines a custom tag.
For example data/widgets/astralgraph/ contains the following files
data/widgets/astralgraph/astralgraph.css
data/widgets/astralgraph/astralgraph.html
data/widgets/astralgraph/astralgraph.js
and is instanced as <astralgraph class="stickies-container"></astralgraph> in the main page.
.css is pulled in by the .html file via the following line
<link optimize-inline
rel="stylesheet"
type="text/css"
href="data/widgets/astralgraph/astralgraph.css?reload_times={## when ##}">
and the .html file is pulled in via templateUrl: 'data/widgets/astralgraph/astralgraph.html' in the .js file.
This normally causes the browser to pull in each .js file, which then pull in the .html files and so on.
Now comes the important part.
There are these optimize-inline markers.
These are not used by JavaScript, but are used by the Python server to inline the widgets into the main page. This way only one file is returned and no widget files (no .js, no .html and no .css) need to be loaded by the browser, since they are all in the (now big) main page.
First the content of the .js files is loaded by the server, inserted into the main page into a <script>-tag, but before writing that <script>-tag the templateUrl line is parsed, the content of the .html file written into a <script type="text/ng-template">-tag, like <script type="text/ng-template" id="data/widgets/astralgraph/astralgraph.html">...HTML IS HERE...</script>
This is the way the webapp works, it may have its drawbacks vs using webpack or the like, but it has its benefits which I appreciate a lot.
Now I've been checking out the feasibility of moving over to vue.js, and using single file components (astralgraph.vue) together with httpVueLoader solves the issue of being able to create widgets and load them without requiring a build system like webpack.
Now I'm still missing the ability to inline these .vue files into one big main page. How can I archive this without resorting to webpack, but by using the with open('widgets/astralgraph.vue') as file: ... in the Python server? By this I don't mean how do I implement this in Python, but rather how do I have to structure the resulting page so that it is a valid vue.js app.
Like in AngularJS I have the transformation from
/main.html
<script src="widget/example1.js"/>
<script src="widget/example2.js"/>
/widget/example1.js
/widget/example1.html
/widget/example1.css
/widget/example2.js
/widget/example2.html
/widget/example2.css
to
/main.html
<!-- example1 -->
<style>content of example1.css</style>
<script type="text/ng-template" id="example1.html">content of example1.html</script>
<script>content of example1.js</script>
<!-- example2 -->
<style>content of example2.css</style>
<script type="text/ng-template" id="example2.html">content of example2.html</script>
<script>content of example2.js</script>
In vue.js it would be from
/main.html
components: {
'example1': httpVueLoader('widget/example1.vue'), // optimize-inline
'example2': httpVueLoader('widget/example1.vue') // optimize-inline
},
/widget/example1.vue
/widget/example2.vue
to
// this I don't know
As for the httpVueLoader('widget/...') lines, I would regex them out and adapt it accordingly. It also wouldn't be an issue to load the .vue file into an XML-parser like BeautifulSoup to modify the .vue file contents as necessary before writing it into the main page. They could have an // optimize-inline comment in order to tell the server which components should get inlined and which not. In essence it would be a very rudimentary bundler which bundles the files on each page fetch.
For those who wonder what this astralgraph widget looks like:

Answer 1

This is possible, but you'll lose the ability to use scoped css.
The normal, non-optimized setup will look like this:
app.html:
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="my-app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>
my-component.vue:
<template>
<div class="hello">src: Hello {{who}}</div>
</template>
<style>
.hello {
background-color: #ffe;
}
</style>
<script>
module.exports = {
data: function() {
return {
who: 'world'
}
}
}
</script>
The optimize-inline'd file will then need to look like this:
app.html
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!--============== my-component begin ==============-->
<template id="my-component-template">
<div class="hello">src: Hello {{who}}</div>
</template>
<style>
.hello {
background-color: #ffe;
}
</style>
<script type="text/javascript">
Vue.component('my-component', {
template: '#my-component-template',
data: function() {
return {
who: 'world'
}
}
});
</script>
<!--============== my-component end ==============-->
<div id="my-app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
//'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>
So basically the server needs to modify the content of the .vue file in the following way:
rename the <template> to <template id='my-component-template'>
replace module.exports = { with Vue.component('my-component',
{ template: '#my-component-template', and add a closing ); to the last line of the script.
Then insert this modified content into the app.html file and comment out the 'my-component': httpVueLoader('my-component.vue') line, optionally also removing the <script src="https://unpkg.com/http-vue-loader"></script> line.