Relative load of child-component has URL issues

[paul-hammant]

See https://paulhammant.com/1970/01/01/vue-sfc2/.

Embedded in that page, //raw.githubusercontent.com/paul-hammant/VueSfcDemo/master/comps/calc/Calculator.vue loads just fine.

That SFC component attempts to load ./Display.vue, but that barfs because vue3-sfc-loader is looking at https://paulhammant.com/raw.githubusercontent.com/paul-hammant/VueSfcDemo/master/comps/calc/Display.vue rather than adjacent to Calculator.vue.

[FranckFreiburger]

Maybe https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/src/index.ts#L465-L471 does not work properly.

[paul-hammant]

Could be tricky to solve. Intellectually we know Calc.vue is loading Display.vue but the underlying framework has no idea about the context switch. Maybe an explicitly component path has to be passed it.

On Mon, Feb 15, 2021 at 7:17 PM Franck Freiburger notifications@github.com wrote:

Maybe https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/src/index.ts#L465-L471 does not work properly.

— You are receiving this because you authored the thread.

Reply to this email directly, view it on GitHub https://github.com/FranckFreiburger/vue3-sfc-loader/issues/19#issuecomment-779407396, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAUCBTAGB66FPI7B5CFAJ3S7FXMRANCNFSM4XUWWKXA .

[FranckFreiburger]

resolvePath("//raw.githubusercontent.com/paul-hammant/VueSfcDemo/master/comps/calc/Calculator.vue", "./Display.vue") returns "/raw.githubusercontent.com/paul-hammant/VueSfcDemo/master/comps/calc/Display.vue" but should return "//raw.githubusercontent.com/paul-hammant/VueSfcDemo/master/comps/calc/Display.vue"

I should not use node.js path module : eg. require('path').posix.normalize('//foo.com') -> '/foo.com'

this should be doable

[paul-hammant]

this should be doable

Good news.

For fun, and attempt to use fully qualified paths has a very similar error - https://paulhammant.com/1970/01/01/vue-sfc3/ - a single '/' dropped on the child component URL resolution.

[FranckFreiburger]

Hi,

I don't want vue3-sfc-loader to handle remote URLs by default (mainly because some situations may be ambiguous, eg. //foo.bar could be understood as a fs path or as an URL) However, I will add a new pathHandlers options that will defaults to :

import { posix as Path } from 'path'
...
const defaultPathHandlers : PathHandlers = {
    extname(path) {

        return Path.extname(path);
    },
    resolve(current, dep) {

        if ( dep[0] !== '.' )
            return dep;

        return Path.normalize(Path.join(Path.dirname(current), dep));
    }
}

Then it's up to you to customize according to your needs.

[paul-hammant]

Cool, thanks

[FranckFreiburger]

fixed in v0.3.0

[paul-hammant]

Yeah, I'm lost as to how to use this new feature. I've been trying permutations of:

but getting nowhere

[FranckFreiburger]

Here is the default implementation of pathHandlers (when not provided in the options argument) : https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4a9e5666efbbb7ca7eaf508269b7d75c36104d0e/src/index.ts#L763-L775

You have to create your own version of pathHandlers and provide it in the options object.

eg.

import { posix as Path } from 'path'

const myPathHandlersThatSupportsURLs = {
    extname(filepath) {

        return Path.extname(new URL(filepath, window.location).pathname);
    },
    resolve(absoluteFilepath, dependencyPath) {

        return String(new URL(dependencyPath, absoluteFilepath));
    }
}

:warning: the code above has not been properly tested !

[FranckFreiburger]

I'm closing this as answered. Discussion can continue if needed.

[FranckFreiburger]

Did you manage to use the above code ?

[FranckFreiburger]

see also https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/docs/examples.md#use-remote-components

[paul-hammant]

I tried and couldn't get it working. Then put it on my todo list, then never circled back. sorry Frank - this is important so I'll have another go on Sunday when Ihave free time. Thanks for doing the work.

[paul-hammant]

Oh this looks exciting - https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/docs/examples.md .... examples source and links to standalone proofs in JsBin - great work, Franck!

[paul-hammant]

I circled back and incorporated the suggested functions: https://paulhammant.com/2021/02/16/buildless-sfc-vuejs-applications/ - all working now. I might also take advantage of the hot interception of library loading (velocity in my case)

Great work Franck.

• Paul