Skip to content

Commit 0e57e5c

Browse files
chore(docs): v0.8.0 API docs & examples
1 parent 04817e0 commit 0e57e5c

File tree

2 files changed

+71
-61
lines changed

2 files changed

+71
-61
lines changed

docs/api/README.md

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
* [AbstractPath](README.md#abstractpath)
1212
* [Cache](README.md#cache)
13+
* [ContentData](README.md#contentdata)
1314
* [CustomBlock](README.md#customblock)
1415
* [CustomBlockCallback](README.md#customblockcallback)
1516
* [File](README.md#file)
@@ -44,7 +45,7 @@
4445

4546
Ƭ **AbstractPath**: { toString: () => string }
4647

47-
*Defined in [types.ts:24](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L24)*
48+
*Defined in [types.ts:29](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L29)*
4849

4950
#### Type declaration:
5051

@@ -58,7 +59,7 @@ ___
5859

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

61-
*Defined in [types.ts:15](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L15)*
62+
*Defined in [types.ts:20](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L20)*
6263

6364
#### Type declaration:
6465

@@ -69,11 +70,19 @@ Name | Type |
6970

7071
___
7172

73+
### ContentData
74+
75+
Ƭ **ContentData**: string \| ArrayBuffer
76+
77+
*Defined in [types.ts:71](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L71)*
78+
79+
___
80+
7281
### CustomBlock
7382

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

76-
*Defined in [types.ts:101](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L101)*
85+
*Defined in [types.ts:109](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L109)*
7786

7887
A custom block
7988

@@ -91,25 +100,25 @@ ___
91100

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

94-
*Defined in [types.ts:95](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L95)*
103+
*Defined in [types.ts:103](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L103)*
95104

96105
CustomBlockCallback function type
97106

98107
___
99108

100109
### File
101110

102-
Ƭ **File**: { content: string \| ArrayBuffer ; type: string }
111+
Ƭ **File**: { getContentData: (asBinary: Boolean) => Promise<[ContentData](README.md#contentdata)\> ; type: string }
103112

104-
*Defined in [types.ts:69](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L69)*
113+
*Defined in [types.ts:77](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L77)*
105114

106115
Represents a file content and the extension name.
107116

108117
#### Type declaration:
109118

110119
Name | Type | Description |
111120
------ | ------ | ------ |
112-
`content` | string \| ArrayBuffer | The content data |
121+
`getContentData` | (asBinary: Boolean) => Promise<[ContentData](README.md#contentdata)\> | The content data accessor (request data as text of binary) |
113122
`type` | string | The content type (file extension name, eg. '.svg' ) |
114123

115124
___
@@ -118,15 +127,15 @@ ___
118127

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

121-
*Defined in [types.ts:374](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L374)*
130+
*Defined in [types.ts:399](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L399)*
122131

123132
___
124133

125134
### Module
126135

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

129-
*Defined in [types.ts:121](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L121)*
138+
*Defined in [types.ts:129](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L129)*
130139

131140
This just represents a loaded js module
132141

@@ -142,25 +151,25 @@ ___
142151

143152
Ƭ **ModuleCacheId**: string
144153

145-
*Defined in [types.ts:21](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L21)*
154+
*Defined in [types.ts:26](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L26)*
146155

147156
___
148157

149158
### ModuleExport
150159

151160
Ƭ **ModuleExport**: {}
152161

153-
*Defined in [types.ts:115](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L115)*
162+
*Defined in [types.ts:123](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L123)*
154163

155164
This just represents a loaded js module exports
156165

157166
___
158167

159168
### ModuleHandler
160169

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

163-
*Defined in [types.ts:63](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L63)*
172+
*Defined in [types.ts:68](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L68)*
164173

165174
Used by the library when it does not know how to handle a given file type (eg. `.json` files).
166175
see [[moduleHandlers]]
@@ -185,23 +194,24 @@ ___
185194

186195
### Options
187196

188-
Ƭ **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 }
197+
Ƭ **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 }
189198

190-
*Defined in [types.ts:132](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L132)*
199+
*Defined in [types.ts:140](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L140)*
191200

192201
#### Type declaration:
193202

194203
Name | Type | Description |
195204
------ | ------ | ------ |
205+
`additionalBabelParserPlugins?` | babel\_ParserPlugin[] | Additional babel parser plugins. [TBD] ```javascript ... ... ``` |
196206
`additionalBabelPlugins?` | Record<string, any\> | Additional babel plugins. [TBD] ```javascript ... ... ``` |
197207
`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); }, }, ... ``` |
198208
`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> ... ``` |
199209
`handleModule?` | [ModuleHandler](README.md#modulehandler) | Handle additional module types (eg. '.svg', '.json' ). see [ModuleHandler](README.md#modulehandler) |
200-
`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, }), ... ``` |
210+
`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, }), ... ``` |
201211
`pathResolve` | [PathResolve](README.md#pathresolve) | Abstact path handling |
202212
`addStyle` | (style: string, scopeId: string \| undefined) => void | - |
203213
`customBlockHandler?` | (block: [CustomBlock](README.md#customblock), filename: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[CustomBlockCallback](README.md#customblockcallback) \| undefined\> | - |
204-
`getFile` | (path: [AbstractPath](README.md#abstractpath)) => Promise<[File](README.md#file)\> | - |
214+
`getFile` | (path: [AbstractPath](README.md#abstractpath)) => Promise<[File](README.md#file) \| [ContentData](README.md#contentdata)\> | - |
205215
`getResource` | (pathCx: [PathContext](README.md#pathcontext), options: [Options](README.md#options)) => [Resource](README.md#resource) | - |
206216
`loadModule?` | (path: [AbstractPath](README.md#abstractpath), options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport) \| undefined\> | - |
207217
`log?` | (type: string, ...data: any[]) => void | - |
@@ -212,7 +222,7 @@ ___
212222

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

215-
*Defined in [types.ts:33](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L33)*
225+
*Defined in [types.ts:38](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L38)*
216226

217227
A PathContext represents a path (relPath) relative to an abolute path (refPath)
218228
Note that relPath is not necessary relative, but it is, relPath is relative to refPath.
@@ -230,7 +240,7 @@ ___
230240

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

233-
*Defined in [types.ts:42](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L42)*
243+
*Defined in [types.ts:47](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L47)*
234244

235245
relative to absolute module path resolution
236246

@@ -240,7 +250,7 @@ ___
240250

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

243-
*Defined in [types.ts:80](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/types.ts#L80)*
253+
*Defined in [types.ts:88](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/types.ts#L88)*
244254

245255
Represents a resource.
246256

@@ -258,9 +268,9 @@ Name | Type | Description |
258268

259269
`Const` **version**: string = process.env.VERSION
260270

261-
*Defined in [tools.ts:53](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/tools.ts#L53)*
271+
*Defined in [tools.ts:53](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/tools.ts#L53)*
262272

263-
*Defined in [index.ts:24](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/index.ts#L24)*
273+
*Defined in [index.ts:26](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/index.ts#L26)*
264274

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

@@ -270,15 +280,15 @@ ___
270280

271281
`Const` **vueVersion**: string
272282

273-
*Defined in [createSFCModule.ts:4](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/createSFCModule.ts#L4)*
283+
*Defined in [createSFCModule.ts:4](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/createSFCModule.ts#L4)*
274284

275285
## Functions
276286

277287
### buildTemplateProcessor
278288

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

281-
*Defined in [index.ts:157](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/index.ts#L157)*
291+
*Defined in [index.ts:179](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/index.ts#L179)*
282292

283293
Convert a function to template processor interface (consolidate)
284294

@@ -300,7 +310,7 @@ ___
300310

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

303-
*Defined in [createSFCModule.ts:3](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/createSFCModule.ts#L3)*
313+
*Defined in [createSFCModule.ts:3](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/createSFCModule.ts#L3)*
304314

305315
#### Parameters:
306316

@@ -318,7 +328,7 @@ ___
318328

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

321-
*Defined in [index.ts:73](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/index.ts#L73)*
331+
*Defined in [index.ts:76](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/index.ts#L76)*
322332

323333
Default getResource implementation
324334
by default, getContent() use the file extension as file type.
@@ -336,9 +346,9 @@ ___
336346

337347
### defaultHandleModule
338348

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

341-
*Defined in [tools.ts:377](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/tools.ts#L377)*
351+
*Defined in [tools.ts:372](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/tools.ts#L372)*
342352

343353
Default implementation of handleModule
344354

@@ -347,7 +357,7 @@ Default implementation of handleModule
347357
Name | Type |
348358
------ | ------ |
349359
`type` | string |
350-
`source` | string |
360+
`getContentData` | File[\"getContentData\"] |
351361
`path` | [AbstractPath](README.md#abstractpath) |
352362
`options` | [Options](README.md#options) |
353363

@@ -359,7 +369,7 @@ ___
359369

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

362-
*Defined in [index.ts:50](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/index.ts#L50)*
372+
*Defined in [index.ts:53](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/index.ts#L53)*
363373

364374
Default resolve implementation
365375
resolve() should handle 3 situations :
@@ -381,7 +391,7 @@ ___
381391

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

384-
*Defined in [index.ts:130](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/index.ts#L130)*
394+
*Defined in [index.ts:152](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/index.ts#L152)*
385395

386396
This is the main function.
387397
This function is intended to be used only to load the entry point of your application.
@@ -435,7 +445,7 @@ ___
435445

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

438-
*Defined in [tools.ts:262](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/23ba651/src/tools.ts#L262)*
448+
*Defined in [tools.ts:260](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/04817e0/src/tools.ts#L260)*
439449

440450
#### Parameters:
441451

0 commit comments

Comments
 (0)