Skip to content

Commit 988f9b5

Browse files
author
Franck Freiburger
committed
chore(docs): v0.9.0 API docs & examples
1 parent 70777c8 commit 988f9b5

File tree

2 files changed

+74
-71
lines changed

2 files changed

+74
-71
lines changed

docs/api/README.md

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949

5050
Ƭ **AbstractPath**: { toString: () => string }
5151

52-
*Defined in [types.ts:32](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L32)*
52+
*Defined in [types.ts:32](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L32)*
5353

5454
An abstract way to specify a path. It could be a simple string or a object like an URL. An AbstractPath must always be convertible to a string.
5555

@@ -65,7 +65,7 @@ ___
6565

6666
Ƭ **Cache**: { get: (key: string) => Promise<string\> ; set: (key: string, value: string) => Promise<void\> }
6767

68-
*Defined in [types.ts:20](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L20)*
68+
*Defined in [types.ts:20](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L20)*
6969

7070
#### Type declaration:
7171

@@ -80,15 +80,15 @@ ___
8080

8181
Ƭ **ContentData**: string \| ArrayBuffer
8282

83-
*Defined in [types.ts:71](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L71)*
83+
*Defined in [types.ts:71](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L71)*
8484

8585
___
8686

8787
### CustomBlock
8888

8989
Ƭ **CustomBlock**: { attrs: Record<string, string \| true\> ; content: string ; type: string }
9090

91-
*Defined in [types.ts:109](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L109)*
91+
*Defined in [types.ts:109](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L109)*
9292

9393
A custom block
9494

@@ -106,7 +106,7 @@ ___
106106

107107
Ƭ **CustomBlockCallback**: (component: [ModuleExport](README.md#moduleexport)) => void
108108

109-
*Defined in [types.ts:103](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L103)*
109+
*Defined in [types.ts:103](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L103)*
110110

111111
CustomBlockCallback function type
112112

@@ -116,7 +116,7 @@ ___
116116

117117
Ƭ **File**: { getContentData: (asBinary: Boolean) => Promise<[ContentData](README.md#contentdata)\> ; type: string }
118118

119-
*Defined in [types.ts:77](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L77)*
119+
*Defined in [types.ts:77](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L77)*
120120

121121
Represents a file content and the extension name.
122122

@@ -133,15 +133,15 @@ ___
133133

134134
Ƭ **LangProcessor**: (source: string, preprocessOptions?: any) => Promise<string\> \| string
135135

136-
*Defined in [types.ts:399](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L399)*
136+
*Defined in [types.ts:422](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L422)*
137137

138138
___
139139

140140
### Module
141141

142142
Ƭ **Module**: { exports: [ModuleExport](README.md#moduleexport) }
143143

144-
*Defined in [types.ts:129](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L129)*
144+
*Defined in [types.ts:128](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L128)*
145145

146146
This just represents a loaded js module
147147

@@ -157,15 +157,15 @@ ___
157157

158158
Ƭ **ModuleCacheId**: string
159159

160-
*Defined in [types.ts:26](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L26)*
160+
*Defined in [types.ts:26](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L26)*
161161

162162
___
163163

164164
### ModuleExport
165165

166-
Ƭ **ModuleExport**: {}
166+
Ƭ **ModuleExport**: {} \| null
167167

168-
*Defined in [types.ts:123](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L123)*
168+
*Defined in [types.ts:123](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L123)*
169169

170170
This just represents a loaded js module exports
171171

@@ -175,7 +175,7 @@ ___
175175

176176
Ƭ **ModuleHandler**: (type: string, getContentData: File[\"getContentData\"], path: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport) \| null\>
177177

178-
*Defined in [types.ts:68](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L68)*
178+
*Defined in [types.ts:68](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L68)*
179179

180180
Used by the library when it needs to handle a does not know how to handle a given file type (eg. `.json` files).
181181

@@ -198,9 +198,9 @@ ___
198198

199199
### Options
200200

201-
Ƭ **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 }
201+
Ƭ **Options**: { additionalBabelParserPlugins?: babel\_ParserPlugin[] ; additionalBabelPlugins?: Record<string, any\> ; compiledCache?: [Cache](README.md#cache) ; delimiters?: [string, string] ; devMode?: boolean ; handleModule?: [ModuleHandler](README.md#modulehandler) ; isCustomElement: (tag: string) => boolean \| undefined ; moduleCache: Record<[ModuleCacheId](README.md#modulecacheid), LoadingType<[ModuleExport](README.md#moduleexport)\> \| [ModuleExport](README.md#moduleexport)\> ; pathResolve: [PathResolve](README.md#pathresolve) ; whitespace?: \"preserve\" \| \"condense\" ; 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 }
202202

203-
*Defined in [types.ts:140](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L140)*
203+
*Defined in [types.ts:139](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L139)*
204204

205205
#### Type declaration:
206206

@@ -210,9 +210,12 @@ Name | Type | Description |
210210
`additionalBabelPlugins?` | Record<string, any\> | Additional babel plugins. [TBD] ```javascript ... ... ``` |
211211
`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); }, }, ... ``` |
212212
`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> ... ``` |
213+
`devMode?` | boolean | Set development mode prevent minification, allow debugger statement, |
213214
`handleModule?` | [ModuleHandler](README.md#modulehandler) | Handle additional module types (eg. '.svg', '.json' ). see [ModuleHandler](README.md#modulehandler) |
215+
`isCustomElement` | (tag: string) => boolean \| undefined | Specifies a check method to recognize native custom elements. see. https://vuejs.org/api/application.html#app-config-compileroptions-iscustomelement note: this option has no effect on vue2 |
214216
`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, }), ... ``` |
215217
`pathResolve` | [PathResolve](README.md#pathresolve) | Abstact path handling |
218+
`whitespace?` | \"preserve\" \| \"condense\" | Whitespace handling strategy see https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options |
216219
`addStyle` | (style: string, scopeId: string \| undefined) => void | - |
217220
`customBlockHandler?` | (block: [CustomBlock](README.md#customblock), filename: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[CustomBlockCallback](README.md#customblockcallback) \| undefined\> | - |
218221
`getFile` | (path: [AbstractPath](README.md#abstractpath)) => Promise<[File](README.md#file) \| [ContentData](README.md#contentdata)\> | - |
@@ -226,10 +229,10 @@ ___
226229

227230
Ƭ **PathContext**: { refPath: [AbstractPath](README.md#abstractpath) ; relPath: [AbstractPath](README.md#abstractpath) }
228231

229-
*Defined in [types.ts:41](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L41)*
232+
*Defined in [types.ts:41](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L41)*
230233

231234
A PathContext represents a path (relPath) relative to an abolute path (refPath)
232-
Note that relPath is not necessary relative, but it is, relPath is relative to refPath.
235+
Note that relPath is not necessary relative, but when it is, relPath is relative to refPath.
233236

234237
#### Type declaration:
235238

@@ -244,7 +247,7 @@ ___
244247

245248
Ƭ **PathResolve**: (pathCx: [PathContext](README.md#pathcontext)) => [AbstractPath](README.md#abstractpath)
246249

247-
*Defined in [types.ts:50](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L50)*
250+
*Defined in [types.ts:50](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L50)*
248251

249252
relative to absolute module path resolution
250253

@@ -254,7 +257,7 @@ ___
254257

255258
Ƭ **Resource**: { getContent: () => Promise<[File](README.md#file)\> ; id: [ModuleCacheId](README.md#modulecacheid) ; path: [AbstractPath](README.md#abstractpath) }
256259

257-
*Defined in [types.ts:88](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/types.ts#L88)*
260+
*Defined in [types.ts:88](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/types.ts#L88)*
258261

259262
Represents a resource.
260263

@@ -270,11 +273,11 @@ Name | Type | Description |
270273

271274
### version
272275

273-
`Const` **version**: string = process.env.VERSION
276+
`Const` **version**: string = process.env.VERSION as string
274277

275-
*Defined in [tools.ts:47](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/tools.ts#L47)*
278+
*Defined in [tools.ts:49](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/tools.ts#L49)*
276279

277-
*Defined in [index.ts:26](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/index.ts#L26)*
280+
*Defined in [index.ts:26](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/index.ts#L26)*
278281

279282
the version of the library (process.env.VERSION is set by webpack, at compile-time)
280283

@@ -284,15 +287,15 @@ ___
284287

285288
`Const` **vueVersion**: string
286289

287-
*Defined in [createSFCModule.ts:4](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/createSFCModule.ts#L4)*
290+
*Defined in [createSFCModule.ts:4](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/createSFCModule.ts#L4)*
288291

289292
## Functions
290293

291294
### buildTemplateProcessor
292295

293296
**buildTemplateProcessor**(`processor`: [LangProcessor](README.md#langprocessor)): object
294297

295-
*Defined in [index.ts:179](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/index.ts#L179)*
298+
*Defined in [index.ts:184](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/index.ts#L184)*
296299

297300
Convert a function to template processor interface (consolidate)
298301

@@ -314,7 +317,7 @@ ___
314317

315318
**createSFCModule**(`source`: string, `filename`: [AbstractPath](README.md#abstractpath), `options`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport)\>
316319

317-
*Defined in [createSFCModule.ts:3](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/createSFCModule.ts#L3)*
320+
*Defined in [createSFCModule.ts:3](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/createSFCModule.ts#L3)*
318321

319322
#### Parameters:
320323

@@ -332,7 +335,7 @@ ___
332335

333336
**defaultGetResource**(`pathCx`: [PathContext](README.md#pathcontext), `options`: [Options](README.md#options)): [Resource](README.md#resource)
334337

335-
*Defined in [index.ts:76](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/index.ts#L76)*
338+
*Defined in [index.ts:76](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/index.ts#L76)*
336339

337340
Default getResource implementation
338341
by default, getContent() use the file extension as file type.
@@ -350,9 +353,9 @@ ___
350353

351354
### defaultHandleModule
352355

353-
**defaultHandleModule**(`type`: string, `getContentData`: File[\"getContentData\"], `path`: [AbstractPath](README.md#abstractpath), `options`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport) \| null\>
356+
**defaultHandleModule**(`type`: string, `getContentData`: File[\"getContentData\"], `path`: [AbstractPath](README.md#abstractpath), `options`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport) \| undefined\>
354357

355-
*Defined in [tools.ts:370](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/tools.ts#L370)*
358+
*Defined in [tools.ts:388](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/tools.ts#L388)*
356359

357360
Default implementation of handleModule
358361

@@ -365,15 +368,15 @@ Name | Type |
365368
`path` | [AbstractPath](README.md#abstractpath) |
366369
`options` | [Options](README.md#options) |
367370

368-
**Returns:** Promise<[ModuleExport](README.md#moduleexport) \| null\>
371+
**Returns:** Promise<[ModuleExport](README.md#moduleexport) \| undefined\>
369372

370373
___
371374

372375
### defaultPathResolve
373376

374377
`Const`**defaultPathResolve**(`__namedParameters`: { refPath: [AbstractPath](README.md#abstractpath) ; relPath: [AbstractPath](README.md#abstractpath) }): string \| [AbstractPath](README.md#abstractpath)
375378

376-
*Defined in [index.ts:53](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/index.ts#L53)*
379+
*Defined in [index.ts:53](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/index.ts#L53)*
377380

378381
Default resolve implementation
379382
resolve() should handle 3 situations :
@@ -395,11 +398,11 @@ ___
395398

396399
**loadModule**(`path`: [AbstractPath](README.md#abstractpath), `options?`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport)\>
397400

398-
*Defined in [index.ts:152](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/index.ts#L152)*
401+
*Defined in [index.ts:157](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/index.ts#L157)*
399402

400403
This is the main function.
401404
This function is intended to be used only to load the entry point of your application.
402-
If for some reason you need to use it in your components, be sure to share at least the options.`compiledCache` object between all calls.
405+
If for some reason you need to use it in your components, be sure to share at least the options.`moduleCache` object between all calls.
403406

404407
#### Parameters:
405408

@@ -449,7 +452,7 @@ ___
449452

450453
**loadModuleInternal**(`pathCx`: [PathContext](README.md#pathcontext), `options`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport)\>
451454

452-
*Defined in [tools.ts:258](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/tools.ts#L258)*
455+
*Defined in [tools.ts:276](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/tools.ts#L276)*
453456

454457
#### Parameters:
455458

@@ -466,6 +469,6 @@ Name | Type |
466469

467470
`Const` **targetBrowserBabelPlugins**: object
468471

469-
*Defined in [tools.ts:205](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/4211825/src/tools.ts#L205)*
472+
*Defined in [tools.ts:211](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/70777c8/src/tools.ts#L211)*
470473

471474
#### Properties:

0 commit comments

Comments
 (0)