tralves
commented
6 years ago The main problem we are trying to solve is allowing the developer to share code between native app and web (html5) app.
About NativeScript Nativescript uses its own components so the nativescript template will be very different from the "normal" html template. e.g.
<template>
<stack-layout ref="initialContainer" class="initial-container" :visibility="visible?'visible':'collapse'">
<label text="GROCERIES" class="initial-label"></label>
<stack-layout @tap="login()" class="initial-button">
<label text="Login" class="initial-button-label"></label>
</stack-layout>
</stack-layout>
</template>Since the template is different from a web template, there will be some differences in the <script> and <style> parts of the .vue SFC too, but it is possible to share some "css" and "js" code.
Where we want to go We want to allow the developer to write SFC with a structure like this:
<template native>
<StackLayout></StackLayout>
</template>
<template web>
<div></div>
</template>
<style native>
StackLayout { background: red; }
</style>
<style web>
div { background: red; }
</style>
<script>
export default {
methods: {} // the core code
}
</script>
<script native>
export default {
methods: {} // methods that interact with the UI.
}
</script>
<script web>
export default {
methods: {} // methods that interact with the UI.
}
</script>With .vue files like this, webpack would produce 2 bundles: 1) the nativescript bundle and 2) the html5 bundle.
- The nativescript bundle would use the blocks
<template native>,<style native>, and<script native>mixed-in<script>. - The web bundle would use the blocks
<template web>,<style web>, and<script web>mixed-in<script>.
We understand this is similar to vue-loader's custom-blocks, but not quite. This project (ns-vue-loader) is a customisation of the vue-loader. I think we will need it to implement these features.
Since we decided that we will support code sharing by using
<template native>and<template web> syntax in our SFC, I need to be able to tell the vue loader to only usetemplates for NativeScript. I think we ought to modify the loader.js file to check not just fortemplate, buttemplate native. This would be the first step towards a split of code; otherwise, when I use a <div> in a` template, tns gets mad.Is this file the right one to edit? Thanks!