Use vue-facing-decorator in a browser only, with no build step

[johandanforth]

I'm looking at using Vue 3 and vue-facing-decorator in an environment that doesn't have Internet access, and without a build-step. I'm using referencing "vue" through the help of an importmap like this:

<script type="importmap">
	{
	  "imports": {
		"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
	  }
	}
</script>

<div id="app">
	<div>{{ message }}</div>
</div>

<script type="module">
	import { createApp } from 'vue'

	createApp({
		data() {
			return {
				message: 'Hello Vue!'
			}
		}
	}).mount('#app')
</script>

Is it possible to reference vue-facing-decorator in the same way, through importmap and browser-only? The package contains many different files, I'm not sure where to start :D

Thanks for any help!

[ruojianll]

v-f-d in npm is a esm build. You could try import it's index.js file in importmap script. If that not works, I could build a single esm file version for you.

[johandanforth]

I've tried various ways of importing like you suggest, but there are too many reference to packages in an npm style, that it's impossible. I've tried with both importmaps and path alias.

I would really appreciate it if you could build a "browser version"!

I'm developing in an environment with no internet or npm access, so it's a bit of a hassle 🤪

[ruojianll]

I released v2.1.14, that contains a esm bulid in dist/esm/xxx. The code works:

    <script type="importmap">
        {
            "imports":{
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
                "vfd":"https://unpkg.com/vue-facing-decorator@2.1.14/dist/esm/index.js"
            }
        }
    </script>
    <script type="module">
        import * as VFD from 'vfd'
        console.log('v-f-d',VFD)
    </script>

[johandanforth]

Alright I got things running now! I must say I like the style of v-f-d! Next thing is to get it working without referencing unpkg, and I'm not sure how that is going to work with the automatic redirection of xxx to xxx.js that unpkg does and that the internals in your code links to the base classes without the .js extension. I may have to create paths and aliases for all references in tsconfig.json, or what do you think?

If anyone else has the same problems I had, here's my test code:

cshtml/html

<div id="app">
	<div class="row">
		<div class="col-6">
			<h1>My app</h1>
			<b>Count:</b> <span>{{ count }}</span><br />
			<button class="btn btn-primary" v-on:click="increment">increment</button>
			<fieldset>
				<legend>Messages:</legend>
				<pre>{{messages}}</pre>
			</fieldset>
		</div>
		<div class="col-6">
			<h3>My Component</h3>
			<my-component data-name="some name" v-on:name-changed="nameChanged" />
		</div>
	</div>

</div>

<!-- include the component template MyComponent.cshtml -->
<partial name="MyComponent" />

<script type="importmap">
	{
		"imports":{
			"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser",
			"vue-facing-decorator":"https://unpkg.com/vue-facing-decorator@2.1.14/dist/esm/index",
			"MyApp":"./ts/MyApp.js"
		}
	}
</script>
<script type="module">
	import MyApp from 'MyApp'
	import { createApp } from 'vue'

	var app = createApp(MyApp);
	app.mount("#app");

</script>

MyApp.ts

import MyComponent from './MyComponent.js'

export default {
    data() {
        return {
            count: 0,
            messages: "mounted",
        }
    },
    mounted() {
        this.addMessage("MyApp mounted");
    },
    components: {
        MyComponent
    },
    methods: {
        increment() {
            this.count++;
            this.addMessage(`Count increased to ${this.count}`);
        },
        addMessage(message) {
            this.messages += `${message}\n`;
        },
        nameChanged(name) {
            this.addMessage(`Child component changed name to ${name}`);
        }
    }
}

MyComponent.cshtml (my vue component template)

<template id="my-component">
	<div class="input-group">
		<div class="form-floating">
			<input v-model="name" class="form-control" placeholder="*" />
			<label>Change name to</label>
		</div>
		<button class="btn btn-primary" v-on:click="changeName">OK</button>
	</div>
</template>

MyComponent.ts

import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'

@Component({
    template: "#my-component"
})
export default class MyComponent extends Vue {

    @Prop
    dataName?: String;

    name = "name";

    mounted() {
        console.log("my-component mounted");
    }

    changeName() {
        this.nameChanged();
    }

    @Emit
    nameChanged() {
        return this.name;
    }

}

[ruojianll]

I suggest that remove .js in your code and do redirect like unpkg on your http server. That's compatible with ts style code and esm in broswer.

[johandanforth]

Yeah, I think I'll have to look at doing local redirects to the .js files in my server. Will have to look into that and get back. I wish there was another way of doing it though!

[johandanforth]

Yep, that worked perfectly well! I'm hosting my application in a dotnet core web application, so I put the libraries in a /lib/ folder and added a custom redirect in startup like this:

app.Use(async (context, next) =>
{
	var url = context.Request.Path.Value;

	// Rewrite to .js if it's a lib request without .js extension
	if (url != null 
	    && url.ToLowerInvariant().StartsWith("/lib/") 
	    && !url.ToLowerInvariant().EndsWith(".js"))
	{
		context.Response.Redirect(url + ".js");
		return;  
	}

	await next();
});

And my importmapping looks like this now:

<script type="importmap">
	{
		"imports":{
			"vue": "/lib/vue/dist/vue.esm-browser",
			"vue-facing-decorator":"/lib/vue-facing-decorator/dist/esm/index",
			"MyApp":"./ts/MyApp.js"
		}
	}
</script>

I still have to install vue and v-f-d as node modules for tsc to work properly. I should be able to get rid of that as well and point at the libraries in the /lib/ folder. Perhaps I can do that within tsconfig.json with path settings?

[ruojianll]

In my opinion, you must install v-f-d for tsc, the one wouldn't be compiled into output files, it just provides .d.ts files for type information.