Skip to content

Commit 03ad44b

Browse files
FranckFreiburgerFranckFreiburger
committed
wip(docs): fix issue with %25 character on JSBin
1 parent edd871a commit 03ad44b

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

‎docs/examples.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1057,7 +1057,7 @@ In the following example we use a trick to preserve reactivity through the `Vue.
10571057
</html>
10581058
```
10591059
<!--example:target:load_svg_watch-->
1060-
[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.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++++++'%2Fcircle0.svg'%3A+%60%3Csvg+viewBox%3D%220+0+100+100%22+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle+cx%3D%2250%22+cy%3D%2250%22+r%3D%2250%22+%2F%3E%3C%2Fsvg%3E%60%2C%0A++++++'%2Fcircle1.svg'%3A+%60%3Csvg+viewBox%3D%220+0+100+100%22+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle+cx%3D%2250%22+cy%3D%2250%22+r%3D%2240%22+%2F%3E%3C%2Fsvg%3E%60%2C%0A++++++'%2Fmain.vue'%3A+%60%0A++++++++%3Ctemplate%3E%0A++++++++++%3Cmycomponent%0A++++++++++++%3Aname%3D%22'circle'+%2B+index+%25+2%22%0A++++++++++%2F%3E%0A++++++++%3C%2Ftemplate%3E%0A++++++++%3Cscript%3E%0A++++++++++import+mycomponent+from+'.%2FmyComponent.vue'%0A++++++++++import+%7B+ref+%7D+from+'vue'%0A%0A++++++++++export+default+%7B%0A++++++++++++components%3A+%7B%0A++++++++++++++mycomponent%0A++++++++++++%7D%2C%0A++++++++++++setup()+%7B%0A++++++++++++++%0A++++++++++++++const+index+%3D+ref(0)%3B%0A++++++++++++++setInterval(()+%3D%3E+index.value%2B%2B%2C+1000)%3B%0A++++++++++++++return+%7B%0A++++++++++++++++index%2C%0A++++++++++++++%7D%0A++++++++++++%7D%2C%0A++++++++++%7D%0A++++++++%3C%2Fscript%3E%0A++++++%60%2C%0A++++++'%2FmyComponent.vue'%3A+%60%0A++++++++%3Ctemplate%3E%0A++++++++++%3Cspan+v-html%3D%22svg%22+%2F%3E%0A++++++++%3C%2Ftemplate%3E%0A++++++++%3Cscript%3E%0A%0A++++++++++import+%7B+ref%2C+watch+%7D+from+'vue'%0A%0A++++++++++function+asyncToRef(callback)+%7B%0A%0A++++++++++++const+val+%3D+ref()%3B%0A++++++++++++watch(()+%3D%3E+callback()%2C+promise+%3D%3E+promise.then(value+%3D%3E+val.value+%3D+value)%2C+%7B+immediate%3A+true+%7D)%3B++%2F%2F+TBD+handle+catch()...%0A++++++++++++return+val%3B%0A++++++++++%7D%0A%0A++++++++++export+default+%7B%0A++++++++++++props%3A+%7B%0A++++++++++++++name%3A+String%0A++++++++++++%7D%2C%0A++++++++++++setup(props)+%7B%0A++++++++++++++return+%7B%0A++++++++++++++++svg%3A+asyncToRef(()+%3D%3E+import('.%2F'+%2B+props.name+%2B+'.svg'))%2C%0A++++++++++++++%7D%0A++++++++++++%7D%0A++++++++++%7D%0A%0A++++++++%3C%2Fscript%3E%0A++++++%60%0A++++%7D%0A++%7D%3B%0A++%2F*+--%3E+*%2F%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(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++++handleModule%3A+async+function+(type%2C+getContentData%2C+path%2C+options)+%7B+%0A++++++switch+(type)+%7B+%0A++++++++case+'.svg'%3A%0A++++++++++return+getContentData(false)%3B%0A++++++%7D+%0A++++%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%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:load_svg_watch-->
1060+
[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.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++++++'%2Fcircle0.svg'%3A+%60%3Csvg+viewBox%3D%220+0+100+100%22+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle+cx%3D%2250%22+cy%3D%2250%22+r%3D%2250%22+%2F%3E%3C%2Fsvg%3E%60%2C%0A++++++'%2Fcircle1.svg'%3A+%60%3Csvg+viewBox%3D%220+0+100+100%22+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle+cx%3D%2250%22+cy%3D%2250%22+r%3D%2240%22+%2F%3E%3C%2Fsvg%3E%60%2C%0A++++++'%2Fmain.vue'%3A+%60%0A++++++++%3Ctemplate%3E%0A++++++++++%3Cmycomponent%0A++++++++++++%3Aname%3D%22'circle'+%2B+index+%2525+2%22%0A++++++++++%2F%3E%0A++++++++%3C%2Ftemplate%3E%0A++++++++%3Cscript%3E%0A++++++++++import+mycomponent+from+'.%2FmyComponent.vue'%0A++++++++++import+%7B+ref+%7D+from+'vue'%0A%0A++++++++++export+default+%7B%0A++++++++++++components%3A+%7B%0A++++++++++++++mycomponent%0A++++++++++++%7D%2C%0A++++++++++++setup()+%7B%0A++++++++++++++%0A++++++++++++++const+index+%3D+ref(0)%3B%0A++++++++++++++setInterval(()+%3D%3E+index.value%2B%2B%2C+1000)%3B%0A++++++++++++++return+%7B%0A++++++++++++++++index%2C%0A++++++++++++++%7D%0A++++++++++++%7D%2C%0A++++++++++%7D%0A++++++++%3C%2Fscript%3E%0A++++++%60%2C%0A++++++'%2FmyComponent.vue'%3A+%60%0A++++++++%3Ctemplate%3E%0A++++++++++%3Cspan+v-html%3D%22svg%22+%2F%3E%0A++++++++%3C%2Ftemplate%3E%0A++++++++%3Cscript%3E%0A%0A++++++++++import+%7B+ref%2C+watch+%7D+from+'vue'%0A%0A++++++++++function+asyncToRef(callback)+%7B%0A%0A++++++++++++const+val+%3D+ref()%3B%0A++++++++++++watch(()+%3D%3E+callback()%2C+promise+%3D%3E+promise.then(value+%3D%3E+val.value+%3D+value)%2C+%7B+immediate%3A+true+%7D)%3B++%2F%2F+TBD+handle+catch()...%0A++++++++++++return+val%3B%0A++++++++++%7D%0A%0A++++++++++export+default+%7B%0A++++++++++++props%3A+%7B%0A++++++++++++++name%3A+String%0A++++++++++++%7D%2C%0A++++++++++++setup(props)+%7B%0A++++++++++++++return+%7B%0A++++++++++++++++svg%3A+asyncToRef(()+%3D%3E+import('.%2F'+%2B+props.name+%2B+'.svg'))%2C%0A++++++++++++++%7D%0A++++++++++++%7D%0A++++++++++%7D%0A%0A++++++++%3C%2Fscript%3E%0A++++++%60%0A++++%7D%0A++%7D%3B%0A++%2F*+--%3E+*%2F%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(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++++handleModule%3A+async+function+(type%2C+getContentData%2C+path%2C+options)+%7B+%0A++++++switch+(type)+%7B+%0A++++++++case+'.svg'%3A%0A++++++++++return+getContentData(false)%3B%0A++++++%7D+%0A++++%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%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:load_svg_watch-->
10611061

10621062
[:top:](#readme)
10631063

@@ -1291,7 +1291,7 @@ for ( const example of examplesList ) {
12911291
12921292
const [, exampleId ] = example.match(/\w+:\w+:(.*)/);
12931293
const [, source ] = result.match(new RegExp(`\<\!--example:source:${ exampleId }--\>[^]*?${ codeTags[0] }\r?\n([^]*?)${ codeTags[1] }`));
1294-
const encodedSource = encodeURIComponent(source).replace(/%20/g, '+').replace(/%0D/g, '');
1294+
const encodedSource = encodeURIComponent(source).replace(/%20/g, '+').replace(/%0D/g, '').replace(/%25/g, '%2525');
12951295
const link = `http://jsbin.com/?html,output&html=${ encodedSource }`;
12961296
result = replaceBlock(result, `example:target:${ exampleId }`, `[open in JSBin ▶](${ link })`);
12971297
}

0 commit comments

Comments
 (0)