From 0e57e5c5a8d7e94733ba64fd3d4f2c8b94435768 Mon Sep 17 00:00:00 2001
From: Franck Freiburger <franck.freiburger@gmail.com>
Date: Mon, 31 May 2021 12:34:03 +0200
Subject: [PATCH] chore(docs): v0.8.0 API docs & examples

---
 docs/api/README.md | 74 ++++++++++++++++++++++++++--------------------
 docs/examples.md   | 58 ++++++++++++++++++------------------
 2 files changed, 71 insertions(+), 61 deletions(-)

diff --git a/docs/api/README.md b/docs/api/README.md
index 6e48120..1ee1096 100644
--- a/docs/api/README.md
+++ b/docs/api/README.md
@@ -10,6 +10,7 @@
 
 * [AbstractPath](README.md#abstractpath)
 * [Cache](README.md#cache)
+* [ContentData](README.md#contentdata)
 * [CustomBlock](README.md#customblock)
 * [CustomBlockCallback](README.md#customblockcallback)
 * [File](README.md#file)
@@ -44,7 +45,7 @@
 
 Ƭ  **AbstractPath**: { toString: () => string  }
 
-*Defined in [types.ts:24](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L24)*
+*Defined in [types.ts:29](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L29)*
 
 #### Type declaration:
 
@@ -58,7 +59,7 @@ ___
 
 Ƭ  **Cache**: { get: (key: string) => Promise<string\> ; set: (key: string, value: string) => Promise<void\>  }
 
-*Defined in [types.ts:15](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L15)*
+*Defined in [types.ts:20](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L20)*
 
 #### Type declaration:
 
@@ -69,11 +70,19 @@ Name | Type |
 
 ___
 
+### ContentData
+
+Ƭ  **ContentData**: string \| ArrayBuffer
+
+*Defined in [types.ts:71](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L71)*
+
+___
+
 ### CustomBlock
 
 Ƭ  **CustomBlock**: { attrs: Record<string, string \| true\> ; content: string ; type: string  }
 
-*Defined in [types.ts:101](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L101)*
+*Defined in [types.ts:109](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L109)*
 
 A custom block
 
@@ -91,7 +100,7 @@ ___
 
 Ƭ  **CustomBlockCallback**: (component: [ModuleExport](README.md#moduleexport)) => void
 
-*Defined in [types.ts:95](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L95)*
+*Defined in [types.ts:103](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L103)*
 
 CustomBlockCallback function type
 
@@ -99,9 +108,9 @@ ___
 
 ### File
 
-Ƭ  **File**: { content: string \| ArrayBuffer ; type: string  }
+Ƭ  **File**: { getContentData: (asBinary: Boolean) => Promise<[ContentData](README.md#contentdata)\> ; type: string  }
 
-*Defined in [types.ts:69](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L69)*
+*Defined in [types.ts:77](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L77)*
 
 Represents a file content and the extension name.
 
@@ -109,7 +118,7 @@ Represents a file content and the extension name.
 
 Name | Type | Description |
 ------ | ------ | ------ |
-`content` | string \| ArrayBuffer | The content data |
+`getContentData` | (asBinary: Boolean) => Promise<[ContentData](README.md#contentdata)\> | The content data accessor (request data as text of binary) |
 `type` | string | The content type (file extension name, eg. '.svg' ) |
 
 ___
@@ -118,7 +127,7 @@ ___
 
 Ƭ  **LangProcessor**: (source: string, preprocessOptions?: any) => Promise<string\> \| string
 
-*Defined in [types.ts:374](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L374)*
+*Defined in [types.ts:399](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L399)*
 
 ___
 
@@ -126,7 +135,7 @@ ___
 
 Ƭ  **Module**: { exports: [ModuleExport](README.md#moduleexport)  }
 
-*Defined in [types.ts:121](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L121)*
+*Defined in [types.ts:129](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L129)*
 
 This just represents a loaded js module
 
@@ -142,7 +151,7 @@ ___
 
 Ƭ  **ModuleCacheId**: string
 
-*Defined in [types.ts:21](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L21)*
+*Defined in [types.ts:26](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L26)*
 
 ___
 
@@ -150,7 +159,7 @@ ___
 
 Ƭ  **ModuleExport**: {}
 
-*Defined in [types.ts:115](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L115)*
+*Defined in [types.ts:123](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L123)*
 
 This just represents a loaded js module exports
 
@@ -158,9 +167,9 @@ ___
 
 ### ModuleHandler
 
-Ƭ  **ModuleHandler**: (type: string, source: string, path: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport) \| null\>
+Ƭ  **ModuleHandler**: (type: string, getContentData: File[\"getContentData\"], path: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport) \| null\>
 
-*Defined in [types.ts:63](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L63)*
+*Defined in [types.ts:68](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L68)*
 
 Used by the library when it does not know how to handle a given file type (eg. `.json` files).
 see [[moduleHandlers]]
@@ -185,23 +194,24 @@ ___
 
 ### Options
 
-Ƭ  **Options**: { additionalBabelPlugins?: Record<string, any\> ; compiledCache?: [Cache](README.md#cache) ; delimiters?: [string, string] ; handleModule?: [ModuleHandler](README.md#modulehandler) ; moduleCache?: Record<[ModuleCacheId](README.md#modulecacheid), LoadingType<[ModuleExport](README.md#moduleexport)\> \| [ModuleExport](README.md#moduleexport)\> ; pathResolve: [PathResolve](README.md#pathresolve) ; addStyle: (style: string, scopeId: string \| undefined) => void ; customBlockHandler?: (block: [CustomBlock](README.md#customblock), filename: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[CustomBlockCallback](README.md#customblockcallback) \| undefined\> ; getFile: (path: [AbstractPath](README.md#abstractpath)) => Promise<[File](README.md#file)\> ; getResource: (pathCx: [PathContext](README.md#pathcontext), options: [Options](README.md#options)) => [Resource](README.md#resource) ; loadModule?: (path: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport) \| undefined\> ; log?: (type: string, ...data: any[]) => void  }
+Ƭ  **Options**: { additionalBabelParserPlugins?: babel\_ParserPlugin[] ; additionalBabelPlugins?: Record<string, any\> ; compiledCache?: [Cache](README.md#cache) ; delimiters?: [string, string] ; handleModule?: [ModuleHandler](README.md#modulehandler) ; moduleCache: Record<[ModuleCacheId](README.md#modulecacheid), LoadingType<[ModuleExport](README.md#moduleexport)\> \| [ModuleExport](README.md#moduleexport)\> ; pathResolve: [PathResolve](README.md#pathresolve) ; addStyle: (style: string, scopeId: string \| undefined) => void ; customBlockHandler?: (block: [CustomBlock](README.md#customblock), filename: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[CustomBlockCallback](README.md#customblockcallback) \| undefined\> ; getFile: (path: [AbstractPath](README.md#abstractpath)) => Promise<[File](README.md#file) \| [ContentData](README.md#contentdata)\> ; getResource: (pathCx: [PathContext](README.md#pathcontext), options: [Options](README.md#options)) => [Resource](README.md#resource) ; loadModule?: (path: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport) \| undefined\> ; log?: (type: string, ...data: any[]) => void  }
 
-*Defined in [types.ts:132](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L132)*
+*Defined in [types.ts:140](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L140)*
 
 #### Type declaration:
 
 Name | Type | Description |
 ------ | ------ | ------ |
+`additionalBabelParserPlugins?` | babel\_ParserPlugin[] | Additional babel parser plugins. [TBD]   ```javascript   ...   ...  ```  |
 `additionalBabelPlugins?` | Record<string, any\> | Additional babel plugins. [TBD]   ```javascript   ...   ...  ```  |
 `compiledCache?` | [Cache](README.md#cache) | [get](README.md#get)() and [set](README.md#set)() functions of this object are called when the lib needs to save or load already compiled code. get and set functions must return a `Promise` (or can be `async`). Since compilation consume a lot of CPU, is is always a good idea to provide this object.  **example:**  In the following example, we cache the compiled code in the browser's local storage. Note that local storage is a limited place (usually 5MB). Here we handle space limitation in a very basic way. Maybe (not tested), the following libraries may help you to gain more space [pako](https://github.com/nodeca/pako), [lz-string](https://github.com/pieroxy/lz-string/) ```javascript  ...  compiledCache: {   set(key, str) {     // naive storage space management    for (;;) {      try {       // doc: https://developer.mozilla.org/en-US/docs/Web/API/Storage      window.localStorage.setItem(key, str);      break;     } catch(ex) {      // here we handle DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'XXX' exceeded the quota       window.localStorage.removeItem(window.localStorage.key(0));     }    }   },   get(key) {     return window.localStorage.getItem(key);   },  },  ... ```  |
 `delimiters?` | [string, string] | Sets the delimiters used for text interpolation within the template. Typically this is used to avoid conflicting with server-side frameworks that also use mustache syntax.   ```javascript   ...   <script>     // <!--    const vueContent = `     <template> Hello [[[[ who ]]]] !</template>     <script>     export default {      data() {       return {        who: 'world'       }      }     }     </script>    `;    // -->     const options = {     moduleCache: { vue: Vue },     getFile: () => vueContent,     addStyle: () => {},     delimiters: ['[[[[', ']]]]'],    }     const app = Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('file.vue', options)));    app.mount(document.body);    </script>   ...  ```  |
 `handleModule?` | [ModuleHandler](README.md#modulehandler) | Handle additional module types (eg. '.svg', '.json' ). see [ModuleHandler](README.md#modulehandler) |
-`moduleCache?` | Record<[ModuleCacheId](README.md#modulecacheid), LoadingType<[ModuleExport](README.md#moduleexport)\> \| [ModuleExport](README.md#moduleexport)\> | Initial cache that will contain resolved dependencies. All new modules go here. `vue` must initially be contained in this object. [moduleCache](README.md#modulecache) is mandatory for the lib. If you do not provide it, the library will create one. It is recommended to provide a prototype-less object (`Object.create(null)`) to avoid potential conflict with `Object` properties (constructor, __proto__, hasOwnProperty, ...). ​ * See also [[options.loadModule]].  **example:** ```javascript  ...  moduleCache: Object.assign(Object.create(null), {   vue: Vue,  }),  ... ```   |
+`moduleCache` | Record<[ModuleCacheId](README.md#modulecacheid), LoadingType<[ModuleExport](README.md#moduleexport)\> \| [ModuleExport](README.md#moduleexport)\> | Initial cache that will contain resolved dependencies. All new modules go here. `vue` must initially be contained in this object. [moduleCache](README.md#modulecache) is mandatory and should be shared between options objects used for you application (note that you can also pass the same options object through multiple loadModule calls) It is recommended to provide a prototype-less object (`Object.create(null)`) to avoid potential conflict with `Object` properties (constructor, __proto__, hasOwnProperty, ...). ​ * See also [[options.loadModule]].  **example:** ```javascript  ...  moduleCache: Object.assign(Object.create(null), {   vue: Vue,  }),  ... ```   |
 `pathResolve` | [PathResolve](README.md#pathresolve) | Abstact path handling |
 `addStyle` | (style: string, scopeId: string \| undefined) => void | - |
 `customBlockHandler?` | (block: [CustomBlock](README.md#customblock), filename: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[CustomBlockCallback](README.md#customblockcallback) \| undefined\> | - |
-`getFile` | (path: [AbstractPath](README.md#abstractpath)) => Promise<[File](README.md#file)\> | - |
+`getFile` | (path: [AbstractPath](README.md#abstractpath)) => Promise<[File](README.md#file) \| [ContentData](README.md#contentdata)\> | - |
 `getResource` | (pathCx: [PathContext](README.md#pathcontext), options: [Options](README.md#options)) => [Resource](README.md#resource) | - |
 `loadModule?` | (path: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport) \| undefined\> | - |
 `log?` | (type: string, ...data: any[]) => void | - |
@@ -212,7 +222,7 @@ ___
 
 Ƭ  **PathContext**: { refPath: [AbstractPath](README.md#abstractpath) ; relPath: [AbstractPath](README.md#abstractpath)  }
 
-*Defined in [types.ts:33](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L33)*
+*Defined in [types.ts:38](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L38)*
 
 A PathContext represents a path (relPath) relative to an abolute path (refPath)
 Note that relPath is not necessary relative, but it is, relPath is relative to refPath.
@@ -230,7 +240,7 @@ ___
 
 Ƭ  **PathResolve**: (pathCx: [PathContext](README.md#pathcontext)) => [AbstractPath](README.md#abstractpath)
 
-*Defined in [types.ts:42](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L42)*
+*Defined in [types.ts:47](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L47)*
 
 relative to absolute module path resolution
 
@@ -240,7 +250,7 @@ ___
 
 Ƭ  **Resource**: { getContent: () => Promise<[File](README.md#file)\> ; id: [ModuleCacheId](README.md#modulecacheid) ; path: [AbstractPath](README.md#abstractpath)  }
 
-*Defined in [types.ts:80](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L80)*
+*Defined in [types.ts:88](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L88)*
 
 Represents a resource.
 
@@ -258,9 +268,9 @@ Name | Type | Description |
 
 • `Const` **version**: string = process.env.VERSION
 
-*Defined in [tools.ts:53](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/tools.ts#L53)*
+*Defined in [tools.ts:53](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/tools.ts#L53)*
 
-*Defined in [index.ts:24](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/index.ts#L24)*
+*Defined in [index.ts:26](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/index.ts#L26)*
 
 the version of the library (process.env.VERSION is set by webpack, at compile-time)
 
@@ -270,7 +280,7 @@ ___
 
 • `Const` **vueVersion**: string
 
-*Defined in [createSFCModule.ts:4](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/createSFCModule.ts#L4)*
+*Defined in [createSFCModule.ts:4](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/createSFCModule.ts#L4)*
 
 ## Functions
 
@@ -278,7 +288,7 @@ ___
 
 ▸ **buildTemplateProcessor**(`processor`: [LangProcessor](README.md#langprocessor)): object
 
-*Defined in [index.ts:157](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/index.ts#L157)*
+*Defined in [index.ts:179](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/index.ts#L179)*
 
 Convert a function to template processor interface (consolidate)
 
@@ -300,7 +310,7 @@ ___
 
 ▸ **createSFCModule**(`source`: string, `filename`: [AbstractPath](README.md#abstractpath), `options`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport)\>
 
-*Defined in [createSFCModule.ts:3](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/createSFCModule.ts#L3)*
+*Defined in [createSFCModule.ts:3](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/createSFCModule.ts#L3)*
 
 #### Parameters:
 
@@ -318,7 +328,7 @@ ___
 
 ▸ **defaultGetResource**(`pathCx`: [PathContext](README.md#pathcontext), `options`: [Options](README.md#options)): [Resource](README.md#resource)
 
-*Defined in [index.ts:73](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/index.ts#L73)*
+*Defined in [index.ts:76](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/index.ts#L76)*
 
 Default getResource implementation
 by default, getContent() use the file extension as file type.
@@ -336,9 +346,9 @@ ___
 
 ### defaultHandleModule
 
-▸ **defaultHandleModule**(`type`: string, `source`: string, `path`: [AbstractPath](README.md#abstractpath), `options`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport) \| null\>
+▸ **defaultHandleModule**(`type`: string, `getContentData`: File[\"getContentData\"], `path`: [AbstractPath](README.md#abstractpath), `options`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport) \| null\>
 
-*Defined in [tools.ts:377](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/tools.ts#L377)*
+*Defined in [tools.ts:372](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/tools.ts#L372)*
 
 Default implementation of handleModule
 
@@ -347,7 +357,7 @@ Default implementation of handleModule
 Name | Type |
 ------ | ------ |
 `type` | string |
-`source` | string |
+`getContentData` | File[\"getContentData\"] |
 `path` | [AbstractPath](README.md#abstractpath) |
 `options` | [Options](README.md#options) |
 
@@ -359,7 +369,7 @@ ___
 
 ▸ `Const`**defaultPathResolve**(`__namedParameters`: { refPath: [AbstractPath](README.md#abstractpath) ; relPath: [AbstractPath](README.md#abstractpath)  }): string \| [AbstractPath](README.md#abstractpath)
 
-*Defined in [index.ts:50](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/index.ts#L50)*
+*Defined in [index.ts:53](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/index.ts#L53)*
 
 Default resolve implementation
 resolve() should handle 3 situations :
@@ -381,7 +391,7 @@ ___
 
 ▸ **loadModule**(`path`: [AbstractPath](README.md#abstractpath), `options?`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport)\>
 
-*Defined in [index.ts:130](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/index.ts#L130)*
+*Defined in [index.ts:152](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/index.ts#L152)*
 
 This is the main function.
 This function is intended to be used only to load the entry point of your application.
@@ -435,7 +445,7 @@ ___
 
 ▸ **loadModuleInternal**(`pathCx`: [PathContext](README.md#pathcontext), `options`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport)\>
 
-*Defined in [tools.ts:262](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/tools.ts#L262)*
+*Defined in [tools.ts:260](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/tools.ts#L260)*
 
 #### Parameters:
 
diff --git a/docs/examples.md b/docs/examples.md
index fd8b9be..5dc74c3 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -18,7 +18,7 @@
 
 # Examples
 
-:warning: **beware**, the following examples are sticky to version *<!--version-->0.7.3<!--/version-->*. For your use, prefer the [latest version](../README.md#dist)
+:warning: **beware**, the following examples are sticky to version *<!--version-->0.8.0<!--/version-->*. For your use, prefer the [latest version](../README.md#dist)
 
 **Try the examples locally**  
 Since most browsers do not allow you to access local filesystem, you can start a small [express](https://expressjs.com/) server to run these examples.  
@@ -61,7 +61,7 @@ In the following examples, for convenience, we just returns static content as fi
 <body>
   <div id="app"></div>
   <script src="https://unpkg.com/vue"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue2-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue2-sfc-loader.js"></script>
   <script>
 
     /* <!-- */
@@ -96,7 +96,7 @@ In the following examples, for convenience, we just returns static content as fi
 </html>
 ```
 <!--example:target:vue2_basic_example-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue2-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+mainComponent+%3D+%60%0A++++++%3Ctemplate%3E%0A++++++++%3Cspan%3EHello+from+Vue+%7B%7B+require('myData').vueVersion+%7D%7D+!%3C%2Fspan%3E%0A++++++%3C%2Ftemplate%3E%0A++++%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+%7B+loadModule%2C+vueVersion+%7D+%3D+window%5B'vue2-sfc-loader'%5D%3B%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++++myData%3A+%7B%0A++++++++++vueVersion%2C%0A++++++++%7D%0A++++++%7D%2C%0A++++++getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2Fmain.vue'+)%0A++++++++++return+Promise.resolve(mainComponent)%3B%0A++++++%7D%2C%0A++++++addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A++++%7D%0A%0A++++loadModule('%2Fmain.vue'%2C+options)%0A++++.then(component+%3D%3E+new+Vue(component).%24mount('%23app'))%3B%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue2-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+mainComponent+%3D+%60%0A++++++%3Ctemplate%3E%0A++++++++%3Cspan%3EHello+from+Vue+%7B%7B+require('myData').vueVersion+%7D%7D+!%3C%2Fspan%3E%0A++++++%3C%2Ftemplate%3E%0A++++%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+%7B+loadModule%2C+vueVersion+%7D+%3D+window%5B'vue2-sfc-loader'%5D%3B%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++++myData%3A+%7B%0A++++++++++vueVersion%2C%0A++++++++%7D%0A++++++%7D%2C%0A++++++getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2Fmain.vue'+)%0A++++++++++return+Promise.resolve(mainComponent)%3B%0A++++++%7D%2C%0A++++++addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A++++%7D%0A%0A++++loadModule('%2Fmain.vue'%2C+options)%0A++++.then(component+%3D%3E+new+Vue(component).%24mount('%23app'))%3B%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
 <!--/example:target:vue2_basic_example-->
 [:top:](#readme)
 
@@ -111,7 +111,7 @@ In the following examples, for convenience, we just returns static content as fi
   <script type="module">
 
     import * as Vue from 'https://unpkg.com/vue@3/dist/vue.runtime.esm-browser.prod.js'
-    import { loadModule } from 'https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.esm.js'
+    import { loadModule } from 'https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.esm.js'
 
     const options = {
       moduleCache: { vue: Vue },
@@ -125,7 +125,7 @@ In the following examples, for convenience, we just returns static content as fi
 </html>
 ```
 <!--example:target:esm_version_example-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+type%3D%22module%22%3E%0A%0A++++import+*+as+Vue+from+'https%3A%2F%2Funpkg.com%2Fvue%403%2Fdist%2Fvue.runtime.esm-browser.prod.js'%0A++++import+%7B+loadModule+%7D+from+'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.esm.js'%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+()+%3D%3E+%60%3Ctemplate%3Evue3-sfc-loader+esm+version%3C%2Ftemplate%3E%60%2C%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++%7D%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('file.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+type%3D%22module%22%3E%0A%0A++++import+*+as+Vue+from+'https%3A%2F%2Funpkg.com%2Fvue%403%2Fdist%2Fvue.runtime.esm-browser.prod.js'%0A++++import+%7B+loadModule+%7D+from+'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.esm.js'%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+()+%3D%3E+%60%3Ctemplate%3Evue3-sfc-loader+esm+version%3C%2Ftemplate%3E%60%2C%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++%7D%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('file.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
 <!--/example:target:esm_version_example-->
 [:top:](#readme)
 
@@ -139,7 +139,7 @@ In the following examples, for convenience, we just returns static content as fi
 <body>
   <div id="app"></div>
   <script src="https://unpkg.com/vue@next"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
   <script>
 
     const componentSource = /* <!-- */`
@@ -242,7 +242,7 @@ In the following examples, for convenience, we just returns static content as fi
 </html>
 ```
 <!--example:target:complete_api-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++const+componentSource+%3D+%2F*+%3C!--+*%2F%60%0A++++++%3Ctemplate%3E%0A++++++++%3Cspan+class%3D%22example%22%3E%7B%7B+msg+%7D%7D%3C%2Fspan%3E%0A++++++%3C%2Ftemplate%3E%0A++++++%3Cscript%3E%0A++++++++export+default+%7B%0A++++++++++data+()+%7B%0A++++++++++++return+%7B%0A++++++++++++++msg%3A+'world!'%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++%7D%0A++++++%3C%2Fscript%3E%0A%0A++++++%3Cstyle+scoped%3E%0A++++++++.example+%7B%0A++++++++++color%3A+red%3B%0A++++++++%7D%0A++++++%3C%2Fstyle%3E%0A++++%60%2F*+--%3E+*%2F%3B%0A%0A++++const+options+%3D+%7B%0A%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++%7D%2C%0A%0A++++++async+getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2FmyComponent.vue'+)%0A++++++++++return+Promise.resolve(componentSource)%3B%0A%0A++++++++const+res+%3D+await+fetch(url)%3B%0A++++++++if+(+!res.ok+)%0A++++++++++throw+Object.assign(new+Error(url%2B'+'%2Bres.statusText)%2C+%7B+res+%7D)%3B%0A++++++++return+await+res.text()%3B%0A++++++%7D%2C%0A%0A++++++addStyle(textContent)+%7B%0A%0A++++++++const+style+%3D+Object.assign(document.createElement('style')%2C+%7B+textContent+%7D)%3B%0A++++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++++document.head.insertBefore(style%2C+ref)%3B%0A++++++%7D%2C%0A%0A++++++log(type%2C+...args)+%7B%0A%0A++++++++console%5Btype%5D(...args)%3B%0A++++++%7D%2C%0A%0A++++++compiledCache%3A+%7B%0A++++++++set(key%2C+str)+%7B%0A%0A++++++++++%2F%2F+naive+storage+space+management%0A++++++++++for+(%3B%3B)+%7B%0A%0A++++++++++++try+%7B%0A%0A++++++++++++++%2F%2F+doc%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FStorage%0A++++++++++++++window.localStorage.setItem(key%2C+str)%3B%0A++++++++++++++break%3B%0A++++++++++++%7D+catch(ex)+%7B%0A%0A++++++++++++++%2F%2F+handle%3A+Uncaught+DOMException%3A+Failed+to+execute+'setItem'+on+'Storage'%3A+Setting+the+value+of+'XXX'+exceeded+the+quota%0A%0A++++++++++++++window.localStorage.removeItem(window.localStorage.key(0))%3B%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++%7D%2C%0A++++++++get(key)+%7B%0A%0A++++++++++return+window.localStorage.getItem(key)%3B%0A++++++++%7D%2C%0A++++++%7D%2C%0A%0A++++++handleModule(type%2C+source%2C+path%2C+options)+%7B%0A++++++++%0A++++++++if+(+type+%3D%3D%3D+'.json'+)%0A++++++++++return+JSON.parse(source)%3B%0A++++++%7D%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B'vue3-sfc-loader'%5D%3B%0A++++const+myComponent+%3D+loadModule('%2FmyComponent.vue'%2C+options)%3B%0A%0A++++const+app+%3D+Vue.createApp(%7B%0A++++++components%3A+%7B%0A++++++++'my-component'%3A+Vue.defineAsyncComponent(+()+%3D%3E+myComponent+)%2C%0A++++++%7D%2C%0A++++++template%3A+'Hello+%3Cmy-component%3E%3C%2Fmy-component%3E'%0A++++%7D)%3B%0A%0A++++app.mount('%23app')%3B%0A%0A++%3C%2Fscript%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++const+componentSource+%3D+%2F*+%3C!--+*%2F%60%0A++++++%3Ctemplate%3E%0A++++++++%3Cspan+class%3D%22example%22%3E%7B%7B+msg+%7D%7D%3C%2Fspan%3E%0A++++++%3C%2Ftemplate%3E%0A++++++%3Cscript%3E%0A++++++++export+default+%7B%0A++++++++++data+()+%7B%0A++++++++++++return+%7B%0A++++++++++++++msg%3A+'world!'%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++%7D%0A++++++%3C%2Fscript%3E%0A%0A++++++%3Cstyle+scoped%3E%0A++++++++.example+%7B%0A++++++++++color%3A+red%3B%0A++++++++%7D%0A++++++%3C%2Fstyle%3E%0A++++%60%2F*+--%3E+*%2F%3B%0A%0A++++const+options+%3D+%7B%0A%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++%7D%2C%0A%0A++++++async+getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2FmyComponent.vue'+)%0A++++++++++return+Promise.resolve(componentSource)%3B%0A%0A++++++++const+res+%3D+await+fetch(url)%3B%0A++++++++if+(+!res.ok+)%0A++++++++++throw+Object.assign(new+Error(url%2B'+'%2Bres.statusText)%2C+%7B+res+%7D)%3B%0A++++++++return+await+res.text()%3B%0A++++++%7D%2C%0A%0A++++++addStyle(textContent)+%7B%0A%0A++++++++const+style+%3D+Object.assign(document.createElement('style')%2C+%7B+textContent+%7D)%3B%0A++++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++++document.head.insertBefore(style%2C+ref)%3B%0A++++++%7D%2C%0A%0A++++++log(type%2C+...args)+%7B%0A%0A++++++++console%5Btype%5D(...args)%3B%0A++++++%7D%2C%0A%0A++++++compiledCache%3A+%7B%0A++++++++set(key%2C+str)+%7B%0A%0A++++++++++%2F%2F+naive+storage+space+management%0A++++++++++for+(%3B%3B)+%7B%0A%0A++++++++++++try+%7B%0A%0A++++++++++++++%2F%2F+doc%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FStorage%0A++++++++++++++window.localStorage.setItem(key%2C+str)%3B%0A++++++++++++++break%3B%0A++++++++++++%7D+catch(ex)+%7B%0A%0A++++++++++++++%2F%2F+handle%3A+Uncaught+DOMException%3A+Failed+to+execute+'setItem'+on+'Storage'%3A+Setting+the+value+of+'XXX'+exceeded+the+quota%0A%0A++++++++++++++window.localStorage.removeItem(window.localStorage.key(0))%3B%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++%7D%2C%0A++++++++get(key)+%7B%0A%0A++++++++++return+window.localStorage.getItem(key)%3B%0A++++++++%7D%2C%0A++++++%7D%2C%0A%0A++++++handleModule(type%2C+source%2C+path%2C+options)+%7B%0A++++++++%0A++++++++if+(+type+%3D%3D%3D+'.json'+)%0A++++++++++return+JSON.parse(source)%3B%0A++++++%7D%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B'vue3-sfc-loader'%5D%3B%0A++++const+myComponent+%3D+loadModule('%2FmyComponent.vue'%2C+options)%3B%0A%0A++++const+app+%3D+Vue.createApp(%7B%0A++++++components%3A+%7B%0A++++++++'my-component'%3A+Vue.defineAsyncComponent(+()+%3D%3E+myComponent+)%2C%0A++++++%7D%2C%0A++++++template%3A+'Hello+%3Cmy-component%3E%3C%2Fmy-component%3E'%0A++++%7D)%3B%0A%0A++++app.mount('%23app')%3B%0A%0A++%3C%2Fscript%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
 <!--/example:target:complete_api-->
 [:top:](#readme)
 
@@ -255,7 +255,7 @@ In the following examples, for convenience, we just returns static content as fi
 <html>
 <body>
   <script src="https://unpkg.com/vue@next"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
   <script>
 
     /* <!-- */
@@ -286,7 +286,7 @@ In the following examples, for convenience, we just returns static content as fi
 </html>
 ```
 <!--example:target:cpn_string-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+sfcContent+%3D+%60%0A++++++%3Ctemplate%3E%0A++++++++Hello+World+!%0A++++++%3C%2Ftemplate%3E%0A++++%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++%7D%2C%0A++++++getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2FmyComponent.vue'+)%0A++++++++++return+Promise.resolve(sfcContent)%3B%0A++++++%7D%2C%0A++++++addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B'vue3-sfc-loader'%5D%3B%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('%2FmyComponent.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+sfcContent+%3D+%60%0A++++++%3Ctemplate%3E%0A++++++++Hello+World+!%0A++++++%3C%2Ftemplate%3E%0A++++%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++%7D%2C%0A++++++getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2FmyComponent.vue'+)%0A++++++++++return+Promise.resolve(sfcContent)%3B%0A++++++%7D%2C%0A++++++addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B'vue3-sfc-loader'%5D%3B%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('%2FmyComponent.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
 <!--/example:target:cpn_string-->
 [:top:](#readme)
 
@@ -301,7 +301,7 @@ In the following examples, for convenience, we just returns static content as fi
   <div id="app"></div>
   <script src="https://unpkg.com/vue@next"></script>
   <script src="https://pugjs.org/js/pug.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
   <script>
 
     /* <!-- */
@@ -339,7 +339,7 @@ ul
 
 ```
 <!--example:target:tpl_pug-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fpugjs.org%2Fjs%2Fpug.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+sfcContent+%3D+%60%0A%3Ctemplate+lang%3D%22pug%22%3E%0Aul%0A++each+val+in+%5B'p'%2C+'u'%2C+'g'%5D%0A++++li%3D+val%0A%3C%2Ftemplate%3E%0A%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++++pug%3A+require('pug')%2C%0A++++++%7D%2C%0A%0A++++++getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2FmyPugComponent.vue'+)%0A++++++++++return+Promise.resolve(sfcContent)%3B%0A++++++%7D%2C%0A%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B%22vue3-sfc-loader%22%5D%3B%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('%2FmyPugComponent.vue'%2C+options))).mount('%23app')%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A%0A)
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fpugjs.org%2Fjs%2Fpug.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+sfcContent+%3D+%60%0A%3Ctemplate+lang%3D%22pug%22%3E%0Aul%0A++each+val+in+%5B'p'%2C+'u'%2C+'g'%5D%0A++++li%3D+val%0A%3C%2Ftemplate%3E%0A%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++++pug%3A+require('pug')%2C%0A++++++%7D%2C%0A%0A++++++getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2FmyPugComponent.vue'+)%0A++++++++++return+Promise.resolve(sfcContent)%3B%0A++++++%7D%2C%0A%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B%22vue3-sfc-loader%22%5D%3B%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('%2FmyPugComponent.vue'%2C+options))).mount('%23app')%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A%0A)
 <!--/example:target:tpl_pug-->
 [:top:](#readme)
 
@@ -353,7 +353,7 @@ ul
 <body>
   <div id="app"></div>
   <script src="https://unpkg.com/vue@next"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
   <script src="//stylus-lang.com/try/stylus.min.js"></script>
   <script>
 
@@ -392,7 +392,7 @@ ul
 
 ```
 <!--example:target:style_stylus-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22%2F%2Fstylus-lang.com%2Ftry%2Fstylus.min.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+vueContent+%3D+%60%0A++++++%3Ctemplate%3E%0A++++++++Hello+%3Cb%3EWorld%3C%2Fb%3E+!%0A++++++%3C%2Ftemplate%3E%0A++++++%3Cstyle+lang%3D%22stylus%22%3E%0A+b%0A++color+red%0A++++++%3C%2Fstyle%3E%0A++++%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++++%2F%2F+note%3A+deps()+does+not+work+in+this+bundle+of+stylus+(see+https%3A%2F%2Fstylus-lang.com%2Fdocs%2Fjs.html%23deps)%0A++++++++stylus%3A+source+%3D%3E+Object.assign(stylus(source)%2C+%7B+deps%3A+()+%3D%3E+%5B%5D+%7D)%2C%0A++++++%7D%2C%0A++++++getFile%3A+()+%3D%3E+vueContent%2C%0A++++++addStyle(styleStr)+%7B%0A++++++++const+style+%3D+document.createElement('style')%3B%0A++++++++style.textContent+%3D+styleStr%3B%0A++++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++++document.head.insertBefore(style%2C+ref)%3B%0A++++++%7D%2C%0A++++%7D%0A%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('file.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A%0A)
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22%2F%2Fstylus-lang.com%2Ftry%2Fstylus.min.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+vueContent+%3D+%60%0A++++++%3Ctemplate%3E%0A++++++++Hello+%3Cb%3EWorld%3C%2Fb%3E+!%0A++++++%3C%2Ftemplate%3E%0A++++++%3Cstyle+lang%3D%22stylus%22%3E%0A+b%0A++color+red%0A++++++%3C%2Fstyle%3E%0A++++%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++++%2F%2F+note%3A+deps()+does+not+work+in+this+bundle+of+stylus+(see+https%3A%2F%2Fstylus-lang.com%2Fdocs%2Fjs.html%23deps)%0A++++++++stylus%3A+source+%3D%3E+Object.assign(stylus(source)%2C+%7B+deps%3A+()+%3D%3E+%5B%5D+%7D)%2C%0A++++++%7D%2C%0A++++++getFile%3A+()+%3D%3E+vueContent%2C%0A++++++addStyle(styleStr)+%7B%0A++++++++const+style+%3D+document.createElement('style')%3B%0A++++++++style.textContent+%3D+styleStr%3B%0A++++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++++document.head.insertBefore(style%2C+ref)%3B%0A++++++%7D%2C%0A++++%7D%0A%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('file.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A%0A)
 <!--/example:target:style_stylus-->
 [:top:](#readme)
 
@@ -408,7 +408,7 @@ _see at [vuejs/rfcs](https://github.com/vuejs/rfcs/pull/231)_
 <body>
   <div id="app"></div>
   <script src="https://unpkg.com/vue@next"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
   <script>
     /* <!-- */
     const sfcContent = `
@@ -457,7 +457,7 @@ _see at [vuejs/rfcs](https://github.com/vuejs/rfcs/pull/231)_
 </html>
 ```
 <!--example:target:rfc_231-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A++++%2F*+%3C!--+*%2F%0A++++const+sfcContent+%3D+%60%0A++++++%3Ctemplate%3E%0A++++++++Hello+%3Cspan+class%3D%22example%22%3E%7B%7B+msg+%7D%7D%3C%2Fspan%3E%0A++++++%3C%2Ftemplate%3E%0A++++++%3Cscript%3E%0A++++++++export+default+%7B%0A++++++++++data+()+%7B%0A++++++++++++return+%7B%0A++++++++++++++msg%3A+'world!'%2C%0A++++++++++++++color%3A+'blue'%2C%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++%7D%0A++++++%3C%2Fscript%3E%0A++++++%3Cstyle+scoped%3E%0A++++++++.example+%7B%0A++++++++++color%3A+v-bind('color')%0A++++++++%7D%0A++++++%3C%2Fstyle%3E%0A++++%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++%7D%2C%0A++++++getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2FmyComponent.vue'+)%0A++++++++++return+Promise.resolve(sfcContent)%3B%0A++++++%7D%2C%0A++++++addStyle(textContent)+%7B%0A%0A++++++++const+style+%3D+Object.assign(document.createElement('style')%2C+%7B+textContent+%7D)%3B%0A++++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++++document.head.insertBefore(style%2C+ref)%3B%0A++++++%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B%22vue3-sfc-loader%22%5D%3B%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('%2FmyComponent.vue'%2C+options))).mount('%23app')%3B%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A++++%2F*+%3C!--+*%2F%0A++++const+sfcContent+%3D+%60%0A++++++%3Ctemplate%3E%0A++++++++Hello+%3Cspan+class%3D%22example%22%3E%7B%7B+msg+%7D%7D%3C%2Fspan%3E%0A++++++%3C%2Ftemplate%3E%0A++++++%3Cscript%3E%0A++++++++export+default+%7B%0A++++++++++data+()+%7B%0A++++++++++++return+%7B%0A++++++++++++++msg%3A+'world!'%2C%0A++++++++++++++color%3A+'blue'%2C%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++%7D%0A++++++%3C%2Fscript%3E%0A++++++%3Cstyle+scoped%3E%0A++++++++.example+%7B%0A++++++++++color%3A+v-bind('color')%0A++++++++%7D%0A++++++%3C%2Fstyle%3E%0A++++%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++%7D%2C%0A++++++getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2FmyComponent.vue'+)%0A++++++++++return+Promise.resolve(sfcContent)%3B%0A++++++%7D%2C%0A++++++addStyle(textContent)+%7B%0A%0A++++++++const+style+%3D+Object.assign(document.createElement('style')%2C+%7B+textContent+%7D)%3B%0A++++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++++document.head.insertBefore(style%2C+ref)%3B%0A++++++%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B%22vue3-sfc-loader%22%5D%3B%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('%2FmyComponent.vue'%2C+options))).mount('%23app')%3B%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
 <!--/example:target:rfc_231-->
 [:top:](#readme)
 
@@ -470,7 +470,7 @@ _see at [vuejs/rfcs](https://github.com/vuejs/rfcs/pull/231)_
 <html>
 <body>
   <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.prod.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
   <script>
 
     const options = {
@@ -485,7 +485,7 @@ _see at [vuejs/rfcs](https://github.com/vuejs/rfcs/pull/231)_
 </html>
 ```
 <!--example:target:minimalist_example-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%2Fdist%2Fvue.runtime.global.prod.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+()+%3D%3E+%60%3Ctemplate%3EHello+World+!%3C%2Ftemplate%3E%60%2C%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++%7D%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('file.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%2Fdist%2Fvue.runtime.global.prod.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+()+%3D%3E+%60%3Ctemplate%3EHello+World+!%3C%2Ftemplate%3E%60%2C%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++%7D%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('file.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
 <!--/example:target:minimalist_example-->
 [:top:](#readme)
 
@@ -499,7 +499,7 @@ _see at [vuejs/rfcs](https://github.com/vuejs/rfcs/pull/231)_
 <html>
 <body>
   <script src="https://unpkg.com/vue@next"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
   <script>
 
     /* <!-- */
@@ -533,7 +533,7 @@ _see at [vuejs/rfcs](https://github.com/vuejs/rfcs/pull/231)_
 </html>
 ```
 <!--example:target:options_loadModule-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+sfcContent+%3D+%60%0A++++++%3Ctemplate%3E%0A++++++++Hello+World+!%0A++++++%3C%2Ftemplate%3E%0A++++%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++async+loadModule(path)+%7B%0A%0A++++++++%2F%2F+(TBD)%0A%0A++++++%7D%2C%0A++++++getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2FmyComponent.vue'+)%0A++++++++++return+Promise.resolve(sfcContent)%3B%0A++++++%7D%2C%0A++++++addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B'vue3-sfc-loader'%5D%3B%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('%2FmyComponent.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+sfcContent+%3D+%60%0A++++++%3Ctemplate%3E%0A++++++++Hello+World+!%0A++++++%3C%2Ftemplate%3E%0A++++%60%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++async+loadModule(path)+%7B%0A%0A++++++++%2F%2F+(TBD)%0A%0A++++++%7D%2C%0A++++++getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'%2FmyComponent.vue'+)%0A++++++++++return+Promise.resolve(sfcContent)%3B%0A++++++%7D%2C%0A++++++addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B'vue3-sfc-loader'%5D%3B%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('%2FmyComponent.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
 <!--/example:target:options_loadModule-->
 [:top:](#readme)
 
@@ -550,7 +550,7 @@ In the following example we use a trick to preserve reactivity through the `Vue.
 <body>
   <div id="app"></div>
   <script src="https://unpkg.com/vue@next"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
   <script>
 
     const options = {
@@ -611,7 +611,7 @@ In the following example we use a trick to preserve reactivity through the `Vue.
 </html>
 ```
 <!--example:target:dynamic_component-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++const+options+%3D+%7B%0A%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++%7D%2C%0A%0A++++++getFile(url)+%7B%0A%0A++++++++return+(%7B%0A++++++++++'%2Fa.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++%3Ci%3E+a+%3C%2Fi%3E%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++%60%2C%0A++++++++++'%2Fb.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++%3Cb%3E+b+%3C%2Fb%3E%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++%60%2C%0A++++++++%7D)%5Burl%5D+%7C%7C+Promise.reject(+new+Error(res.statusText)+)%3B%0A++++++%7D%2C%0A%0A++++++addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B%22vue3-sfc-loader%22%5D%3B%0A%0A++++const+app+%3D+Vue.createApp(%7B%0A++++++template%3A+%60%0A++++++++%3Cbutton%0A++++++++++%40click%3D%22currentComponent+%3D+currentComponent+%3D%3D%3D+'a'+%3F+'b'+%3A+'a'%22%0A++++++++%3Etoggle%3C%2Fbutton%3E%0A++++++++dynamic+component%3A+%3Ccomponent+%3Ais%3D%22comp%22%3E%3C%2Fcomponent%3E%0A++++++%60%2C%0A++++++computed%3A+%7B%0A++++++++comp()+%7B%0A%0A++++++++++const+currentComponent+%3D+this.currentComponent%3B+%2F%2F+the+trick+is+here%0A++++++++++return+Vue.defineAsyncComponent(+()+%3D%3E+loadModule(%60%2F%24%7B+currentComponent+%7D.vue%60%2C+options)+)%3B%0A%0A++++++++++%2F%2F+or%2C+equivalently%2C+use+Function.prototype.bind+function+like+this%3A%0A++++++++++%2F%2F+return+Vue.defineAsyncComponent(+(url+%3D%3E+loadModule(url%2C+options)).bind(null%2C+%60%2F%24%7B+this.currentComponent+%7D.vue%60)+)%3B%0A++++++++%7D%0A++++++%7D%2C%0A++++++data()+%7B%0A++++++++return+%7B%0A++++++++++currentComponent%3A+'a'%2C%0A++++++++%7D%0A++++++%7D%0A++++%7D)%3B%0A%0A++++app.mount('%23app')%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++const+options+%3D+%7B%0A%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++%7D%2C%0A%0A++++++getFile(url)+%7B%0A%0A++++++++return+(%7B%0A++++++++++'%2Fa.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++%3Ci%3E+a+%3C%2Fi%3E%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++%60%2C%0A++++++++++'%2Fb.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++%3Cb%3E+b+%3C%2Fb%3E%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++%60%2C%0A++++++++%7D)%5Burl%5D+%7C%7C+Promise.reject(+new+Error(res.statusText)+)%3B%0A++++++%7D%2C%0A%0A++++++addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B%22vue3-sfc-loader%22%5D%3B%0A%0A++++const+app+%3D+Vue.createApp(%7B%0A++++++template%3A+%60%0A++++++++%3Cbutton%0A++++++++++%40click%3D%22currentComponent+%3D+currentComponent+%3D%3D%3D+'a'+%3F+'b'+%3A+'a'%22%0A++++++++%3Etoggle%3C%2Fbutton%3E%0A++++++++dynamic+component%3A+%3Ccomponent+%3Ais%3D%22comp%22%3E%3C%2Fcomponent%3E%0A++++++%60%2C%0A++++++computed%3A+%7B%0A++++++++comp()+%7B%0A%0A++++++++++const+currentComponent+%3D+this.currentComponent%3B+%2F%2F+the+trick+is+here%0A++++++++++return+Vue.defineAsyncComponent(+()+%3D%3E+loadModule(%60%2F%24%7B+currentComponent+%7D.vue%60%2C+options)+)%3B%0A%0A++++++++++%2F%2F+or%2C+equivalently%2C+use+Function.prototype.bind+function+like+this%3A%0A++++++++++%2F%2F+return+Vue.defineAsyncComponent(+(url+%3D%3E+loadModule(url%2C+options)).bind(null%2C+%60%2F%24%7B+this.currentComponent+%7D.vue%60)+)%3B%0A++++++++%7D%0A++++++%7D%2C%0A++++++data()+%7B%0A++++++++return+%7B%0A++++++++++currentComponent%3A+'a'%2C%0A++++++++%7D%0A++++++%7D%0A++++%7D)%3B%0A%0A++++app.mount('%23app')%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)
 <!--/example:target:dynamic_component-->
 [:top:](#readme)
 
@@ -626,7 +626,7 @@ In the following example we use a trick to preserve reactivity through the `Vue.
 <html>
 <body>
   <script src="https://unpkg.com/vue@next"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
   <script>
 
     /* <!-- */
@@ -710,7 +710,7 @@ In the following example we use a trick to preserve reactivity through the `Vue.
 </html>
 ```
 <!--example:target:nested_components-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+config+%3D+%7B%0A++++++files%3A+%7B%0A++++++++'%2Fmain.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++++%3Cfoo%2F%3E%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++++%3Cscript%3E%0A++++++++++++++++import+foo+from+'.%2Ffoo.vue'%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++++++foo%2C%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++created()+%7B%0A++++++++++++++++++++++++console.log('main+created')%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++mounted()+%7B%0A++++++++++++++++++++++++console.log('main+mounted')%0A++++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++%3C%2Fscript%3E%0A++++++++%60%2C%0A%0A++++++++'%2Ffoo.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++++%3Cbar%2F%3E%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++++%3Cscript%3E%0A++++++++++++++++import+bar+from+'.%2Fbar.vue'%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++++++bar%2C%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++created()+%7B%0A++++++++++++++++++++++++console.log('foo+created')%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++mounted()+%7B%0A++++++++++++++++++++++++console.log('foo+mounted')%0A++++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++%3C%2Fscript%3E%0A++++++++%60%2C%0A%0A++++++++'%2Fbar.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++++end%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++++%3Cscript%3E%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++created()+%7B%0A++++++++++++++++++++++++console.log('bar+created')%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++mounted()+%7B%0A++++++++++++++++++++++++console.log('bar+mounted')%0A++++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++%3C%2Fscript%3E%0A++++++++%60%0A++++++%7D%0A++++%7D%3B%0A++++%2F*+--%3E+*%2F%0A%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+url+%3D%3E+config.files%5Burl%5D%2C%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++%7D%0A%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('%2Fmain.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:nested_components-->
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+config+%3D+%7B%0A++++++files%3A+%7B%0A++++++++'%2Fmain.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++++%3Cfoo%2F%3E%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++++%3Cscript%3E%0A++++++++++++++++import+foo+from+'.%2Ffoo.vue'%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++++++foo%2C%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++created()+%7B%0A++++++++++++++++++++++++console.log('main+created')%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++mounted()+%7B%0A++++++++++++++++++++++++console.log('main+mounted')%0A++++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++%3C%2Fscript%3E%0A++++++++%60%2C%0A%0A++++++++'%2Ffoo.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++++%3Cbar%2F%3E%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++++%3Cscript%3E%0A++++++++++++++++import+bar+from+'.%2Fbar.vue'%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++++++bar%2C%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++created()+%7B%0A++++++++++++++++++++++++console.log('foo+created')%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++mounted()+%7B%0A++++++++++++++++++++++++console.log('foo+mounted')%0A++++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++%3C%2Fscript%3E%0A++++++++%60%2C%0A%0A++++++++'%2Fbar.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++++end%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++++%3Cscript%3E%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++created()+%7B%0A++++++++++++++++++++++++console.log('bar+created')%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++mounted()+%7B%0A++++++++++++++++++++++++console.log('bar+mounted')%0A++++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++%3C%2Fscript%3E%0A++++++++%60%0A++++++%7D%0A++++%7D%3B%0A++++%2F*+--%3E+*%2F%0A%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+url+%3D%3E+config.files%5Burl%5D%2C%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++%7D%0A%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('%2Fmain.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:nested_components-->
 
 [:top:](#readme)
 
@@ -726,7 +726,7 @@ In the following example we use a trick to preserve reactivity through the `Vue.
 <body>
   <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.prod.js"></script>
   <script src="https://unpkg.com/vue-i18n@next"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
   <script>
 
     /* <!-- */
@@ -779,7 +779,7 @@ In the following example we use a trick to preserve reactivity through the `Vue.
 </html>
 ```
 <!--example:target:custom_block_i18n-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%2Fdist%2Fvue.runtime.global.prod.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue-i18n%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+config+%3D+%7B%0A++++++files%3A+%7B%0A++++++++'%2Fcomponent.vue'%3A+%60%0A++++++++++%3Ctemplate%3E%0A++++++++++++%7B%7B+%24t('hello')+%7D%7D%0A++++++++++%3C%2Ftemplate%3E%0A++++++++++%3Ci18n%3E%0A++++++++++%7B%0A++++++++++++%22en%22%3A+%7B%0A++++++++++++++%22hello%22%3A+%22hello+world!%22%0A++++++++++++%7D%2C%0A++++++++++++%22ja%22%3A+%7B%0A++++++++++++++%22hello%22%3A+%22%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E3%80%81%E4%B8%96%E7%95%8C%EF%BC%81%22%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++++%3C%2Fi18n%3E%0A+++++++%60%0A++++++%7D%0A++++%7D%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+i18n+%3D+VueI18n.createI18n()%3B%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+url+%3D%3E+config.files%5Burl%5D%2C%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++++customBlockHandler(block%2C+filename%2C+options)+%7B%0A%0A++++++++if+(+block.type+!%3D%3D+'i18n'+)%0A++++++++++return%0A%0A++++++++const+messages+%3D+JSON.parse(block.content)%3B%0A++++++++for+(+let+locale+in+messages+)%0A++++++++++i18n.global.mergeLocaleMessage(locale%2C+messages%5Blocale%5D)%3B%0A++++++%7D%0A++++%7D%0A%0A++++const+app+%3D+Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('%2Fcomponent.vue'%2C+options)))%3B%0A%0A++++app.use(i18n)%3B%0A%0A++++app.mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:custom_block_i18n-->
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%2Fdist%2Fvue.runtime.global.prod.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue-i18n%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+config+%3D+%7B%0A++++++files%3A+%7B%0A++++++++'%2Fcomponent.vue'%3A+%60%0A++++++++++%3Ctemplate%3E%0A++++++++++++%7B%7B+%24t('hello')+%7D%7D%0A++++++++++%3C%2Ftemplate%3E%0A++++++++++%3Ci18n%3E%0A++++++++++%7B%0A++++++++++++%22en%22%3A+%7B%0A++++++++++++++%22hello%22%3A+%22hello+world!%22%0A++++++++++++%7D%2C%0A++++++++++++%22ja%22%3A+%7B%0A++++++++++++++%22hello%22%3A+%22%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E3%80%81%E4%B8%96%E7%95%8C%EF%BC%81%22%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++++%3C%2Fi18n%3E%0A+++++++%60%0A++++++%7D%0A++++%7D%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+i18n+%3D+VueI18n.createI18n()%3B%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+url+%3D%3E+config.files%5Burl%5D%2C%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++++customBlockHandler(block%2C+filename%2C+options)+%7B%0A%0A++++++++if+(+block.type+!%3D%3D+'i18n'+)%0A++++++++++return%0A%0A++++++++const+messages+%3D+JSON.parse(block.content)%3B%0A++++++++for+(+let+locale+in+messages+)%0A++++++++++i18n.global.mergeLocaleMessage(locale%2C+messages%5Blocale%5D)%3B%0A++++++%7D%0A++++%7D%0A%0A++++const+app+%3D+Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('%2Fcomponent.vue'%2C+options)))%3B%0A%0A++++app.use(i18n)%3B%0A%0A++++app.mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:custom_block_i18n-->
 
 [:top:](#readme)
 
@@ -792,7 +792,7 @@ In the following example we use a trick to preserve reactivity through the `Vue.
 <html>
 <body>
 <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.prod.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue3-sfc-loader.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue3-sfc-loader.js"></script>
 <script>
 
   const config = {
@@ -892,7 +892,7 @@ In the following example we use a trick to preserve reactivity through the `Vue.
 </html>
 ```
 <!--example:target:getResource_loaders-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%2Fdist%2Fvue.runtime.global.prod.js%22%3E%3C%2Fscript%3E%0A%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%0A++const+config+%3D+%7B%0A++++files%3A+%7B%0A++++++'%2Fmain.vue'%3A+%7B%0A++++++++content%3A+%2F*+%3C!--+*%2F%60%0A++++++++++%3Ctemplate%3E%0A++++++++++++%3Cpre%3E%3Cb%3E'url!.%2Fcircle.svg'+-%3E+%3C%2Fb%3E%7B%7B+require('url!.%2Fcircle.svg')+%7D%7D%3C%2Fpre%3E%0A++++++++++++%3Cimg+width%3D%2250%22+height%3D%2250%22+src%3D%22~url!.%2Fcircle.svg%22+%2F%3E%0A++++++++++++%3Cpre%3E%3Cb%3E'file!.%2Fcircle.svg'+-%3E+%3C%2Fb%3E%7B%7B+require('file!.%2Fcircle.svg')+%7D%7D%3C%2Fpre%3E%0A++++++++++++%3Cimg+width%3D%2250%22+height%3D%2250%22+src%3D%22~file!.%2Fcircle.svg%22+%2F%3E%0A++++++++++%3C%2Ftemplate%3E%0A++++++++%60%2F*+--%3E+*%2F%2C%0A++++++++type%3A+'.vue'%2C%0A++++++%7D%2C%0A++++++'%2Fcircle.svg'%3A+%7B%0A++++++++content%3A+%2F*+%3C!--+*%2F%60%0A++++++++++%3Csvg+viewBox%3D%220+0+100+100%22+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A++++++++++++%3Ccircle+cx%3D%2250%22+cy%3D%2250%22+r%3D%2250%22+%2F%3E%0A++++++++++%3C%2Fsvg%3E%0A++++++++%60%2F*+--%3E+*%2F%2C%0A++++++++type%3A+'.svg'%2C%0A++++++%7D%0A++++%7D%0A++%7D%3B%0A++%0A++const+options+%3D+%7B%0A++++moduleCache%3A+%7B%0A++++++'vue'%3A+Vue%2C%0A++++++'file!'(content%2C+path%2C+type%2C+options)+%7B%0A%0A++++++++return+String(new+URL(path%2C+window.location))%3B%0A++++++%7D%2C%0A++++++'url!'(content%2C+path%2C+type%2C+options)+%7B%0A%0A++++++++if+(+type+%3D%3D%3D+'.svg'+)%0A++++++++++return+%60data%3Aimage%2Fsvg%2Bxml%3Bbase64%2C%24%7B+btoa(content)+%7D%60%3B%0A%0A++++++++throw+new+Error(%60%24%7B+type+%7D+not+handled+by+url!%60)%3B%0A++++++%7D%2C%0A++++%7D%2C%0A++++handleModule(type%2C+source%2C+path%2C+options)+%7B%0A%0A++++++switch+(type)+%7B%0A++++++++case+'.svg'%3A+return+source%3B%0A++++++++default%3A+return+undefined%3B+%2F%2F+let+vue3-sfc-loader+handle+this%0A++++++%7D%0A++++%7D%2C%0A++++getFile(url%2C+options)+%7B%0A%0A++++++return+config.files%5Burl%5D+%7C%7C+(()+%3D%3E+%7B+throw+new+Error('404+'+%2B+url)+%7D)()%3B%0A++++%7D%2C%0A++++getResource(%7B+refPath%2C+relPath+%7D%2C+options)+%7B%0A%0A++++++const+%7B+moduleCache%2C+pathResolve%2C+getFile+%7D+%3D+options%3B%0A%0A++++++%2F%2F+split+relPath+into+loaders%5B%5D+and+file+path+(eg.+'foo!bar!file.ext'+%3D%3E+%5B'file.ext'%2C+'bar!'%2C+'foo!'%5D)%0A++++++const+%5B+resourceRelPath%2C+...loaders+%5D+%3D+relPath.match(%2F(%5B%5E!%5D%2B!)%7C%5B%5E!%5D%2B%24%2Fg).reverse()%3B%0A%0A++++++%2F%2F+helper+function%3A+process+a+content+through+the+loaders%0A++++++const+processContentThroughLoaders+%3D+(content%2C+path%2C+type%2C+options)+%3D%3E+%7B%0A++++++++%0A++++++++return+loaders.reduce((content%2C+loader)+%3D%3E+%7B%0A%0A++++++++++return+moduleCache%5Bloader%5D(content%2C+path%2C+type%2C+options)%3B%0A++++++++%7D%2C+content)%3B%0A++++++%7D%0A%0A++++++%2F%2F+get+the+actual+path+of+the+file%0A++++++const+path+%3D+pathResolve(%7B+refPath%2C+relPath%3A+resourceRelPath+%7D)%3B%0A%0A++++++%2F%2F+the+resource+id+must+be+unique+in+its+path+context%0A++++++const+id+%3D+loaders.join('')+%2B+path%3B%0A%0A++++++return+%7B%0A++++++++id%2C%0A++++++++path%2C%0A++++++++async+getContent()+%7B%0A%0A++++++++++const+%7B+content%2C+type+%7D+%3D+await+getFile(path)%3B%0A%0A++++++++++return+%7B%0A++++++++++++content%3A+processContentThroughLoaders(content%2C+path%2C+type%2C+options)%2C%0A++++++++++++type%2C%0A++++++++++%7D%3B%0A++++++++%7D%0A++++++%7D%3B%0A++++%7D%2C%0A++++addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A++%7D%0A%0A++const+%7B+loadModule+%7D+%3D+window%5B'vue3-sfc-loader'%5D%3B%0A++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('%2Fmain.vue'%2C+options))).mount(document.body)%3B%0A%0A%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:getResource_loaders-->
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%2Fdist%2Fvue.runtime.global.prod.js%22%3E%3C%2Fscript%3E%0A%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%0A++const+config+%3D+%7B%0A++++files%3A+%7B%0A++++++'%2Fmain.vue'%3A+%7B%0A++++++++content%3A+%2F*+%3C!--+*%2F%60%0A++++++++++%3Ctemplate%3E%0A++++++++++++%3Cpre%3E%3Cb%3E'url!.%2Fcircle.svg'+-%3E+%3C%2Fb%3E%7B%7B+require('url!.%2Fcircle.svg')+%7D%7D%3C%2Fpre%3E%0A++++++++++++%3Cimg+width%3D%2250%22+height%3D%2250%22+src%3D%22~url!.%2Fcircle.svg%22+%2F%3E%0A++++++++++++%3Cpre%3E%3Cb%3E'file!.%2Fcircle.svg'+-%3E+%3C%2Fb%3E%7B%7B+require('file!.%2Fcircle.svg')+%7D%7D%3C%2Fpre%3E%0A++++++++++++%3Cimg+width%3D%2250%22+height%3D%2250%22+src%3D%22~file!.%2Fcircle.svg%22+%2F%3E%0A++++++++++%3C%2Ftemplate%3E%0A++++++++%60%2F*+--%3E+*%2F%2C%0A++++++++type%3A+'.vue'%2C%0A++++++%7D%2C%0A++++++'%2Fcircle.svg'%3A+%7B%0A++++++++content%3A+%2F*+%3C!--+*%2F%60%0A++++++++++%3Csvg+viewBox%3D%220+0+100+100%22+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A++++++++++++%3Ccircle+cx%3D%2250%22+cy%3D%2250%22+r%3D%2250%22+%2F%3E%0A++++++++++%3C%2Fsvg%3E%0A++++++++%60%2F*+--%3E+*%2F%2C%0A++++++++type%3A+'.svg'%2C%0A++++++%7D%0A++++%7D%0A++%7D%3B%0A++%0A++const+options+%3D+%7B%0A++++moduleCache%3A+%7B%0A++++++'vue'%3A+Vue%2C%0A++++++'file!'(content%2C+path%2C+type%2C+options)+%7B%0A%0A++++++++return+String(new+URL(path%2C+window.location))%3B%0A++++++%7D%2C%0A++++++'url!'(content%2C+path%2C+type%2C+options)+%7B%0A%0A++++++++if+(+type+%3D%3D%3D+'.svg'+)%0A++++++++++return+%60data%3Aimage%2Fsvg%2Bxml%3Bbase64%2C%24%7B+btoa(content)+%7D%60%3B%0A%0A++++++++throw+new+Error(%60%24%7B+type+%7D+not+handled+by+url!%60)%3B%0A++++++%7D%2C%0A++++%7D%2C%0A++++handleModule(type%2C+source%2C+path%2C+options)+%7B%0A%0A++++++switch+(type)+%7B%0A++++++++case+'.svg'%3A+return+source%3B%0A++++++++default%3A+return+undefined%3B+%2F%2F+let+vue3-sfc-loader+handle+this%0A++++++%7D%0A++++%7D%2C%0A++++getFile(url%2C+options)+%7B%0A%0A++++++return+config.files%5Burl%5D+%7C%7C+(()+%3D%3E+%7B+throw+new+Error('404+'+%2B+url)+%7D)()%3B%0A++++%7D%2C%0A++++getResource(%7B+refPath%2C+relPath+%7D%2C+options)+%7B%0A%0A++++++const+%7B+moduleCache%2C+pathResolve%2C+getFile+%7D+%3D+options%3B%0A%0A++++++%2F%2F+split+relPath+into+loaders%5B%5D+and+file+path+(eg.+'foo!bar!file.ext'+%3D%3E+%5B'file.ext'%2C+'bar!'%2C+'foo!'%5D)%0A++++++const+%5B+resourceRelPath%2C+...loaders+%5D+%3D+relPath.match(%2F(%5B%5E!%5D%2B!)%7C%5B%5E!%5D%2B%24%2Fg).reverse()%3B%0A%0A++++++%2F%2F+helper+function%3A+process+a+content+through+the+loaders%0A++++++const+processContentThroughLoaders+%3D+(content%2C+path%2C+type%2C+options)+%3D%3E+%7B%0A++++++++%0A++++++++return+loaders.reduce((content%2C+loader)+%3D%3E+%7B%0A%0A++++++++++return+moduleCache%5Bloader%5D(content%2C+path%2C+type%2C+options)%3B%0A++++++++%7D%2C+content)%3B%0A++++++%7D%0A%0A++++++%2F%2F+get+the+actual+path+of+the+file%0A++++++const+path+%3D+pathResolve(%7B+refPath%2C+relPath%3A+resourceRelPath+%7D)%3B%0A%0A++++++%2F%2F+the+resource+id+must+be+unique+in+its+path+context%0A++++++const+id+%3D+loaders.join('')+%2B+path%3B%0A%0A++++++return+%7B%0A++++++++id%2C%0A++++++++path%2C%0A++++++++async+getContent()+%7B%0A%0A++++++++++const+%7B+content%2C+type+%7D+%3D+await+getFile(path)%3B%0A%0A++++++++++return+%7B%0A++++++++++++content%3A+processContentThroughLoaders(content%2C+path%2C+type%2C+options)%2C%0A++++++++++++type%2C%0A++++++++++%7D%3B%0A++++++++%7D%0A++++++%7D%3B%0A++++%7D%2C%0A++++addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A++%7D%0A%0A++const+%7B+loadModule+%7D+%3D+window%5B'vue3-sfc-loader'%5D%3B%0A++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+loadModule('%2Fmain.vue'%2C+options))).mount(document.body)%3B%0A%0A%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:getResource_loaders-->
 
 [:top:](#readme)
 
@@ -909,7 +909,7 @@ This example use Vue2 because **vue-calendar-picker** is written for Vue2.
 <body>
   <div id="app"></div>
   <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.7.3/dist/vue2-sfc-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.0/dist/vue2-sfc-loader.js"></script>
   <script>
     
     const options = {
@@ -993,7 +993,7 @@ This example use Vue2 because **vue-calendar-picker** is written for Vue2.
 </html>
 ```
 <!--example:target:remote_vue_components-->
-[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%402%2Fdist%2Fvue.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.7.3%2Fdist%2Fvue2-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A++++%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++++'date-fns%2Flocale%2Fen%2Findex.js'%3A+%7B%7D%2C+%2F%2F+handle+require('date-fns%2Flocale%2F'+%2B+this.locale.toLowerCase()+%2B+'%2Findex.js')%3B%0A++++++%7D%2C%0A++++++pathResolve(%7B+refPath%2C+relPath+%7D)+%7B%0A%0A++++++++if+(+relPath+%3D%3D%3D+'date-fns'+)%0A++++++++++return+'https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fdate-fns%2F1.30.1%2Fdate_fns.min.js'%3B%0A%0A++++++++if+(+relPath+%3D%3D%3D+'.'+)+%2F%2F+self%0A++++++++++return+refPath%3B%0A++++++++%0A++++++++%2F%2F+relPath+is+a+module+name+%3F%0A++++++++if+(+relPath%5B0%5D+!%3D%3D+'.'+%26%26+relPath%5B0%5D+!%3D%3D+'%2F'+)%0A++++++++++return+relPath%3B%0A%0A++++++++return+String(new+URL(relPath%2C+refPath+%3D%3D%3D+undefined+%3F+window.location+%3A+refPath))%3B%0A++++++%7D%2C%0A++++++getFile%3A+async+(url)+%3D%3E+%7B%0A%0A++++++++if+(+new+URL(url).pathname+%3D%3D%3D+'%2Fmain.vue'+)+%7B%0A%0A++++++++++return+%7B%0A++++++++++++content%3A+%2F*%3C!--*%2F%60%0A++++++++++++++%3Ctemplate%3E%0A++++++++++++++++%3Cdiv%3E%0A++++++++++++++++++%3Ccalendar-range+locale%3D%22EN%22+%3Aselection%3D%22selection%22+%3Aevents%3D%22calendarEvents%22%2F%3E%0A++++++++++++++++++%3Cbutton+%40click%3D%22add%22%3Eadd%3C%2Fbutton%3E%0A++++++++++++++++%3C%2Fdiv%3E%0A++++++++++++++%3C%2Ftemplate%3E%0A++++++++++++++%3Cscript%3E%0A++++++++++++++++import+calendarRange+from+'https%3A%2F%2Fraw.githubusercontent.com%2FFranckFreiburger%2Fvue-calendar-picker%2Fv1.2.1%2Fsrc%2FcalendarRange.vue'%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++calendarRange%2C%0A++++++++++++++++++%7D%2C%0A++++++++++++++++++data%3A+%7B%0A++++++++++++++++++++selection%3A+%7B+start%3A+Date.now()%2C+end%3A+Date.now()+%7D%2C%0A++++++++++++++++++++calendarEvents%3A+%5B%5D%0A++++++++++++++++++%7D%2C%0A++++++++++++++++++methods%3A+%7B%0A++++++++++++++++++++add%3A+function()+%7B%0A++++++++++++++++++++++this.calendarEvents.push(%7B%0A++++++++++++++++++++++++color%3A+'%23'%2BMath.floor(Math.random()*16777215).toString(16)%2C%0A++++++++++++++++++++++++start%3A+this.selection.start%2C%0A++++++++++++++++++++++++end%3A+this.selection.end%0A++++++++++++++++++++++%7D)%3B%0A++++++++++++++++++++%7D%0A++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++++%3C%2Fscript%3E%0A++++++++++++%60%2F*+--%3E+*%2F%2C%0A++++++++++++type%3A+'.vue'%2C%0A++++++++++%7D%0A++++++++%7D%0A%0A++++++++return+fetch(url).then(res+%3D%3E+res.text())%3B%0A++++++%7D%2C%0A++++++addStyle(textContent)+%7B%0A%0A++++++++const+style+%3D+Object.assign(document.createElement('style')%2C+%7B+textContent+%7D)%3B%0A++++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++++document.head.insertBefore(style%2C+ref)%3B%0A++++++%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B'vue2-sfc-loader'%5D%3B%0A%0A++++loadModule('%2Fmain.vue'%2C+options)%0A++++.then(component+%3D%3E+new+Vue(component).%24mount('%23app'))%0A%0A++%3C%2Fscript%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:remote_vue_components-->
+[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%402%2Fdist%2Fvue.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.0%2Fdist%2Fvue2-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A++++%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++++'date-fns%2Flocale%2Fen%2Findex.js'%3A+%7B%7D%2C+%2F%2F+handle+require('date-fns%2Flocale%2F'+%2B+this.locale.toLowerCase()+%2B+'%2Findex.js')%3B%0A++++++%7D%2C%0A++++++pathResolve(%7B+refPath%2C+relPath+%7D)+%7B%0A%0A++++++++if+(+relPath+%3D%3D%3D+'date-fns'+)%0A++++++++++return+'https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fdate-fns%2F1.30.1%2Fdate_fns.min.js'%3B%0A%0A++++++++if+(+relPath+%3D%3D%3D+'.'+)+%2F%2F+self%0A++++++++++return+refPath%3B%0A++++++++%0A++++++++%2F%2F+relPath+is+a+module+name+%3F%0A++++++++if+(+relPath%5B0%5D+!%3D%3D+'.'+%26%26+relPath%5B0%5D+!%3D%3D+'%2F'+)%0A++++++++++return+relPath%3B%0A%0A++++++++return+String(new+URL(relPath%2C+refPath+%3D%3D%3D+undefined+%3F+window.location+%3A+refPath))%3B%0A++++++%7D%2C%0A++++++getFile%3A+async+(url)+%3D%3E+%7B%0A%0A++++++++%2F%2F+note%3A+here%2C+for+convinience%2C+we+just+returns+a+content+from+a+%0A%0A++++++++if+(+new+URL(url).pathname+%3D%3D%3D+'%2Fmain.vue'+)+%7B%0A%0A++++++++++return+%7B%0A++++++++++++content%3A+%2F*%3C!--*%2F%60%0A++++++++++++++%3Ctemplate%3E%0A++++++++++++++++%3Cdiv%3E%0A++++++++++++++++++%3Ccalendar-range+locale%3D%22EN%22+%3Aselection%3D%22selection%22+%3Aevents%3D%22calendarEvents%22%2F%3E%0A++++++++++++++++++%3Cbutton+%40click%3D%22add%22%3Eadd%3C%2Fbutton%3E%0A++++++++++++++++%3C%2Fdiv%3E%0A++++++++++++++%3C%2Ftemplate%3E%0A++++++++++++++%3Cscript%3E%0A++++++++++++++++import+calendarRange+from+'https%3A%2F%2Fraw.githubusercontent.com%2FFranckFreiburger%2Fvue-calendar-picker%2Fv1.2.1%2Fsrc%2FcalendarRange.vue'%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++calendarRange%2C%0A++++++++++++++++++%7D%2C%0A++++++++++++++++++data%3A+%7B%0A++++++++++++++++++++selection%3A+%7B+start%3A+Date.now()%2C+end%3A+Date.now()+%7D%2C%0A++++++++++++++++++++calendarEvents%3A+%5B%5D%0A++++++++++++++++++%7D%2C%0A++++++++++++++++++methods%3A+%7B%0A++++++++++++++++++++add%3A+function()+%7B%0A++++++++++++++++++++++this.calendarEvents.push(%7B%0A++++++++++++++++++++++++color%3A+'%23'%2BMath.floor(Math.random()*16777215).toString(16)%2C%0A++++++++++++++++++++++++start%3A+this.selection.start%2C%0A++++++++++++++++++++++++end%3A+this.selection.end%0A++++++++++++++++++++++%7D)%3B%0A++++++++++++++++++++%7D%0A++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++++%3C%2Fscript%3E%0A++++++++++++%60%2F*+--%3E+*%2F%2C%0A++++++++++++type%3A+'.vue'%2C%0A++++++++++%7D%0A++++++++%7D%0A%0A++++++++return+fetch(url).then(res+%3D%3E+res.text())%3B%0A++++++%7D%2C%0A++++++addStyle(textContent)+%7B%0A%0A++++++++const+style+%3D+Object.assign(document.createElement('style')%2C+%7B+textContent+%7D)%3B%0A++++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++++document.head.insertBefore(style%2C+ref)%3B%0A++++++%7D%2C%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B'vue2-sfc-loader'%5D%3B%0A%0A++++loadModule('%2Fmain.vue'%2C+options)%0A++++.then(component+%3D%3E+new+Vue(component).%24mount('%23app'))%0A%0A++%3C%2Fscript%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:remote_vue_components-->
 
 [:top:](#readme)