Single File Components and Tests

Author: mathertel

sfc/loader.js

@@ -96,15 +96,24 @@ class UComponent extends HTMLElement {
 
 
 window.loadComponent = (function() {
-  console.debug('LOADER', `loadComponent...`);
+  // plain script includes can read document.currentScript.src
+  // modules can use meta
+  const loaderURL = new URL(document.currentScript.src);
 
-  async function fetchSFC(tagName, folder = '') {
-    let def; 
+  console.debug('SFC', `loadComponent...`);
 
-    if (folder === undefined) folder = '';
-    if (folder.length > 0 && (!folder.endsWith('/'))) folder += '/';
-    const url = folder + tagName + '.vue';
-    console.debug('SFC', `registerComponent(${tagName}, ${url})`);
+  async function fetchSFC(tagName, folder = undefined) {
+    let def;
+
+    const sfcImpl = tagName + '.vue';
+    let baseUrl = loaderURL;
+
+    if (folder) {
+      baseUrl = new URL(folder, document.location.href);
+    }
+
+    const url = new URL(sfcImpl, baseUrl);
+    console.debug('SFC', `loading module ${tagName} from ${url.href}...`);
 
     // get DOM from sfc-file
     const dom = await fetch(url)

sfc/u-markdown.vue

@@ -23,15 +23,13 @@ the markdown-it.js is required to be loaded. Ir can be found in https://markdown
 
 Open Topics:
 
-The foldername /sfc/ is still hardcoded. It should be replaced by a variable / placeholder.
+The foldername /sfc/ is hardcoded. It should be replaced by a variable / placeholder.
 
 References: 
 * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
 * https://zerodevx.github.io/zero-md/
 * requestIdleCallback, SetTimeout VS RequestAnimationFrame
 
-
-
 -->
 
 

test/test-md.htm

@@ -60,7 +60,7 @@ <h2>MD</h2>
   <u-markdown src="./test-md1.md" style="  background-color: azure; "></u-markdown>
 
   <script>
-    loadComponent('u-markdown', '/sfc/').then(() => {
+    loadComponent('u-markdown').then(() => {
       console.log('Page', "all components loaded.");
     });