wip(docs): enhance examples

Author: FranckFreiburger

docs/examples.md

@@ -6,12 +6,12 @@
   * [Using another template language (pug)](#using-another-template-language-pug)
   * [Using another style language (stylus)](#using-another-style-language-stylus)
   * [SFC style CSS variable injection (new edition)](#sfc-style-css-variable-injection-new-edition)
-  * [Minimalist example (just for the fun)](#minimalist-example-just-for-the-fun)
+  * [Minimalist Hello World example](#minimalist-hello-world-example)
   * [Use `options.loadModule` hook](#use-optionsloadmodule-hook)
-  * [Dynamic component (`:is` Special Attribute)](#dynamic-component-is-special-attribute)
+  * [Dynamic component (using `:is` Special Attribute)](#dynamic-component-using-is-special-attribute)
   * [Nested components](#nested-components)
-  * [Example using SFC Custom Blocks for i18n](#example-using-sfc-custom-blocks-for-i18n)
-  * [Example using getResource() and process the files like webpack does](#example-using-getresource-and-process-the-files-like-webpack-does)
+  * [Use SFC Custom Blocks for i18n](#use-sfc-custom-blocks-for-i18n)
+  * [Use Options.getResource() and (nearly) process the files like webpack does](#use-optionsgetresource-and-nearly-process-the-files-like-webpack-does)
 <!--/toc-->
 
 # Examples
@@ -433,7 +433,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.6.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+vueContent+%3D+%60%0A++++++%3Ctemplate%3E+Hello+World+!%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++++++getFile%3A+()+%3D%3E+vueContent%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('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.6.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)
 
@@ -834,7 +834,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.6.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%0A%09%2F*+%3C!--+*%2F%0A%09const+config+%3D+%7B%0A%09%09files%3A+%7B%0A%09%09%09'%2Fmain.vue'%3A+%60%0A%09%09%09%09%3Ctemplate%3E%0A%09%09%09%09%09%3Cpre%3E%3Cb%3E'url!.%2Fcircle.svg'+-%3E+%3C%2Fb%3E%7B%7B+require('url!.%2Fcircle.svg')+%7D%7D%3C%2Fpre%3E%0A%09%09%09%09%09%3Cimg+width%3D%2250%22+height%3D%2250%22+src%3D%22~url!.%2Fcircle.svg%22+%2F%3E%0A%09%09%09%09%09%3Cpre%3E%3Cb%3E'file!.%2Fcircle.svg'+-%3E+%3C%2Fb%3E%7B%7B+require('file!.%2Fcircle.svg')+%7D%7D%3C%2Fpre%3E%0A%09%09%09%09%09%3Cimg+width%3D%2250%22+height%3D%2250%22+src%3D%22~file!.%2Fcircle.svg%22+%2F%3E%0A%09%09%09%09%3C%2Ftemplate%3E%0A%09%09%09%60%2C%0A%09%09%09'%2Fcircle.svg'%3A+%60%0A%09%09%09%09%3Csvg+viewBox%3D%220+0+100+100%22+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%09%09%3Ccircle+cx%3D%2250%22+cy%3D%2250%22+r%3D%2250%22+%2F%3E%0A%09%09%09%09%3C%2Fsvg%3E%0A%09%09%09%60%2C%0A%09%09%7D%0A%09%7D%3B%0A%09%2F*+--%3E+*%2F%0A%0A%09const+options+%3D+%7B%0A%09%09moduleCache%3A+%7B%0A%09%09%09vue%3A+Vue%2C%0A%09%09%09'file!'(content%2C+path%2C+extname%2C+options)+%7B%0A%0A%09%09%09%09return+String(new+URL(path%2C+window.location))%3B%0A%09%09%09%7D%2C%0A%09%09%09'url!'(content%2C+path%2C+extname%2C+options)+%7B%0A%0A%09%09%09%09if+(+extname+%3D%3D%3D+'.svg'+)%0A%09%09%09%09%09return+%60data%3Aimage%2Fsvg%2Bxml%3Bbase64%2C%24%7B+btoa(content)+%7D%60%3B%0A%0A%09%09%09%09throw+new+Error(%60%24%7B+extname+%7D+not+handled+by+url!%60)%3B%0A%09%09%09%7D%2C%0A%09%09%7D%2C%0A%09%09handleModule(extname%2C+source%2C+path%2C+options)+%7B%0A%0A%09%09%09switch+(extname)+%7B%0A%09%09%09%09case+'.svg'%3A+return+source%3B%0A%09%09%09%7D%0A%09%09%7D%2C%0A%09%09getFile(url%2C+options)+%7B%0A%0A%09%09%09return+config.files%5Burl%5D+%7C%7C+(()+%3D%3E+%7B+throw+new+Error('404+'+%2B+url)+%7D)()%3B%0A%09%09%7D%2C%0A%09%09getResource(%7B+refPath%2C+relPath+%7D%2C+options)+%7B%0A%0A%09%09%09const+%7B+moduleCache%2C+pathHandlers%3A+%7B+resolve+%7D%2C+getFile+%7D+%3D+options%3B%0A%0A%09%09%09const+%5B+resourceRelPath%2C+...loaders+%5D+%3D+relPath.match(%2F(%5B%5E!%5D%2B!)%7C%5B%5E!%5D%2B%24%2Fg).reverse()%3B%0A%0A%09%09%09%2F%2F+process+a+content+through+the+loaders%0A%09%09%09const+processContentThroughLoaders+%3D+(content%2C+path%2C+extname%2C+options)+%3D%3E+%7B%0A%09%09%09%09%0A%09%09%09%09return+loaders.reduce((content%2C+loader)+%3D%3E+%7B%0A%0A%09%09%09%09%09return+moduleCache%5Bloader%5D(content%2C+path%2C+extname)%3B%0A%09%09%09%09%7D%2C+content)%3B%0A%09%09%09%7D%0A%0A%09%09%09%2F%2F+get+the+actual+path+of+the+file%0A%09%09%09const+path+%3D+resolve(%7B+refPath%2C+relPath%3A+resourceRelPath+%7D)%3B%0A%0A%09%09%09%2F%2F+the+resource+id+must+be+unique+in+its+path+context%0A%09%09%09const+id+%3D+loaders.join('')+%2B+path%3B%0A%0A%09%09%09return+%7B%0A%09%09%09%09id%2C%0A%09%09%09%09path%2C%0A%09%09%09%09async+getContent()+%7B%0A%0A%09%09%09%09%09const+%7B+content%2C+extname+%7D+%3D+await+getFile(path)%3B%0A%0A%09%09%09%09%09return+%7B%0A%09%09%09%09%09%09content%3A+processContentThroughLoaders(content%2C+path%2C+extname)%2C%0A%09%09%09%09%09%09extname%2C%0A%09%09%09%09%09%7D%3B%0A%09%09%09%09%7D%0A%09%09%09%7D%3B%0A%09%09%7D%2C%0A%09%09addStyle(textContent)+%7B%0A%0A%09%09%09const+style+%3D+Object.assign(document.createElement('style')%2C+%7B+textContent+%7D)%3B%0A%09%09%09const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A%09%09%09document.head.insertBefore(style%2C+ref)%3B%0A%09%09%7D%2C%0A%09%7D%0A%0A%09const+app+%3D+Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('%2Fmain.vue'%2C+options)))%3B%0A%09app.mount(document.body)%3B%0A%09console.log(options.moduleCache)%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.6.0%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%0A%09%2F*+%3C!--+*%2F%0A%09const+config+%3D+%7B%0A%09%09files%3A+%7B%0A%09%09%09'%2Fmain.vue'%3A+%60%0A%09%09%09%09%3Ctemplate%3E%0A%09%09%09%09%09%3Cpre%3E%3Cb%3E'url!.%2Fcircle.svg'+-%3E+%3C%2Fb%3E%7B%7B+require('url!.%2Fcircle.svg')+%7D%7D%3C%2Fpre%3E%0A%09%09%09%09%09%3Cimg+width%3D%2250%22+height%3D%2250%22+src%3D%22~url!.%2Fcircle.svg%22+%2F%3E%0A%09%09%09%09%09%3Cpre%3E%3Cb%3E'file!.%2Fcircle.svg'+-%3E+%3C%2Fb%3E%7B%7B+require('file!.%2Fcircle.svg')+%7D%7D%3C%2Fpre%3E%0A%09%09%09%09%09%3Cimg+width%3D%2250%22+height%3D%2250%22+src%3D%22~file!.%2Fcircle.svg%22+%2F%3E%0A%09%09%09%09%3C%2Ftemplate%3E%0A%09%09%09%60%2C%0A%09%09%09'%2Fcircle.svg'%3A+%60%0A%09%09%09%09%3Csvg+viewBox%3D%220+0+100+100%22+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%09%09%3Ccircle+cx%3D%2250%22+cy%3D%2250%22+r%3D%2250%22+%2F%3E%0A%09%09%09%09%3C%2Fsvg%3E%0A%09%09%09%60%2C%0A%09%09%7D%0A%09%7D%3B%0A%09%2F*+--%3E+*%2F%0A%0A%09const+options+%3D+%7B%0A%09%09moduleCache%3A+%7B%0A%09%09%09'vue'%3A+Vue%2C%0A%09%09%09'file!'(content%2C+path%2C+extname%2C+options)+%7B%0A%0A%09%09%09%09return+String(new+URL(path%2C+window.location))%3B%0A%09%09%09%7D%2C%0A%09%09%09'url!'(content%2C+path%2C+extname%2C+options)+%7B%0A%0A%09%09%09%09if+(+extname+%3D%3D%3D+'.svg'+)%0A%09%09%09%09%09return+%60data%3Aimage%2Fsvg%2Bxml%3Bbase64%2C%24%7B+btoa(content)+%7D%60%3B%0A%0A%09%09%09%09throw+new+Error(%60%24%7B+extname+%7D+not+handled+by+url!%60)%3B%0A%09%09%09%7D%2C%0A%09%09%7D%2C%0A%09%09handleModule(extname%2C+source%2C+path%2C+options)+%7B%0A%0A%09%09%09switch+(extname)+%7B%0A%09%09%09%09case+'.svg'%3A+return+source%3B%0A++++++++default%3A+return+undefined%3B+%2F%2F+let+vue3-sfc-loader+handle+this%0A%09%09%09%7D%0A%09%09%7D%2C%0A%09%09getFile(url%2C+options)+%7B%0A%0A%09%09%09return+config.files%5Burl%5D+%7C%7C+(()+%3D%3E+%7B+throw+new+Error('404+'+%2B+url)+%7D)()%3B%0A%09%09%7D%2C%0A%09%09getResource(%7B+refPath%2C+relPath+%7D%2C+options)+%7B%0A%0A%09%09%09const+%7B+moduleCache%2C+pathHandlers%3A+%7B+resolve+%7D%2C+getFile+%7D+%3D+options%3B%0A%0A%09%09%09const+%5B+resourceRelPath%2C+...loaders+%5D+%3D+relPath.match(%2F(%5B%5E!%5D%2B!)%7C%5B%5E!%5D%2B%24%2Fg).reverse()%3B%0A%0A%09%09%09%2F%2F+process+a+content+through+the+loaders%0A%09%09%09const+processContentThroughLoaders+%3D+(content%2C+path%2C+extname%2C+options)+%3D%3E+%7B%0A%09%09%09%09%0A%09%09%09%09return+loaders.reduce((content%2C+loader)+%3D%3E+%7B%0A%0A%09%09%09%09%09return+moduleCache%5Bloader%5D(content%2C+path%2C+extname)%3B%0A%09%09%09%09%7D%2C+content)%3B%0A%09%09%09%7D%0A%0A%09%09%09%2F%2F+get+the+actual+path+of+the+file%0A%09%09%09const+path+%3D+resolve(%7B+refPath%2C+relPath%3A+resourceRelPath+%7D)%3B%0A%0A%09%09%09%2F%2F+the+resource+id+must+be+unique+in+its+path+context%0A%09%09%09const+id+%3D+loaders.join('')+%2B+path%3B%0A%0A%09%09%09return+%7B%0A%09%09%09%09id%2C%0A%09%09%09%09path%2C%0A%09%09%09%09async+getContent()+%7B%0A%0A%09%09%09%09%09const+%7B+content%2C+extname+%7D+%3D+await+getFile(path)%3B%0A%0A%09%09%09%09%09return+%7B%0A%09%09%09%09%09%09content%3A+processContentThroughLoaders(content%2C+path%2C+extname)%2C%0A%09%09%09%09%09%09extname%2C%0A%09%09%09%09%09%7D%3B%0A%09%09%09%09%7D%0A%09%09%09%7D%3B%0A%09%09%7D%2C%0A%09%09addStyle()+%7B+%2F*+unused+here+*%2F+%7D%2C%0A%09%7D%0A%0A%09Vue.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:getResource_loaders-->
 
 [:top:](#readme)