Skip to content

Commit f3dddfc

Browse files
chore(docs): v0.6.0 API docs & examples
1 parent be82822 commit f3dddfc

File tree

2 files changed

+100
-46
lines changed

2 files changed

+100
-46
lines changed

docs/api/README.md

Lines changed: 77 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
* [CustomBlock](README.md#customblock)
1313
* [CustomBlockCallback](README.md#customblockcallback)
1414
* [File](README.md#file)
15+
* [LangProcessor](README.md#langprocessor)
1516
* [Module](README.md#module)
1617
* [ModuleExport](README.md#moduleexport)
1718
* [ModuleHandler](README.md#modulehandler)
@@ -27,8 +28,10 @@
2728

2829
### Functions
2930

31+
* [buildTemplateProcessor](README.md#buildtemplateprocessor)
3032
* [createSFCModule](README.md#createsfcmodule)
3133
* [defaultGetResource](README.md#defaultgetresource)
34+
* [defaultHandleModule](README.md#defaulthandlemodule)
3235
* [loadModule](README.md#loadmodule)
3336
* [loadModuleInternal](README.md#loadmoduleinternal)
3437

@@ -42,7 +45,7 @@
4245

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

45-
*Defined in [types.ts:15](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L15)*
48+
*Defined in [types.ts:15](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L15)*
4649

4750
#### Type declaration:
4851

@@ -57,7 +60,7 @@ ___
5760

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

60-
*Defined in [types.ts:95](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L95)*
63+
*Defined in [types.ts:95](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L95)*
6164

6265
A custom block
6366

@@ -75,7 +78,7 @@ ___
7578

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

78-
*Defined in [types.ts:89](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L89)*
81+
*Defined in [types.ts:89](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L89)*
7982

8083
CustomBlockCallback function type
8184

@@ -85,7 +88,7 @@ ___
8588

8689
Ƭ **File**: { content: string \| ArrayBuffer ; extname: string }
8790

88-
*Defined in [types.ts:66](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L66)*
91+
*Defined in [types.ts:66](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L66)*
8992

9093
Represents a file content and the extension name.
9194

@@ -98,11 +101,19 @@ Name | Type | Description |
98101

99102
___
100103

104+
### LangProcessor
105+
106+
Ƭ **LangProcessor**: (source: string, preprocessOptions?: any) => Promise<string\> \| string
107+
108+
*Defined in [types.ts:368](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L368)*
109+
110+
___
111+
101112
### Module
102113

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

105-
*Defined in [types.ts:115](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L115)*
116+
*Defined in [types.ts:115](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L115)*
106117

107118
This just represents a loaded js module
108119

@@ -118,20 +129,20 @@ ___
118129

119130
Ƭ **ModuleExport**: {}
120131

121-
*Defined in [types.ts:109](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L109)*
132+
*Defined in [types.ts:109](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L109)*
122133

123134
This just represents a loaded js module exports
124135

125136
___
126137

127138
### ModuleHandler
128139

129-
Ƭ **ModuleHandler**: (source: string, path: string, options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport)\>
140+
Ƭ **ModuleHandler**: (extname: string, source: string, path: string, options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport) \| null\>
130141

131-
*Defined in [types.ts:60](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L60)*
142+
*Defined in [types.ts:60](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L60)*
132143

133144
Used by the library when it does not know how to handle a given file type (eg. `.json` files).
134-
see [moduleHandlers](README.md#modulehandlers)
145+
see [[moduleHandlers]]
135146

136147
**`param`** The content of the file
137148

@@ -153,9 +164,9 @@ ___
153164

154165
### Options
155166

156-
Ƭ **Options**: { additionalBabelPlugins?: any[] ; compiledCache?: [Cache](README.md#cache) ; delimiters?: [string, string] ; moduleCache?: Record<string, LoadingType<[ModuleExport](README.md#moduleexport)\> \| [ModuleExport](README.md#moduleexport)\> ; moduleHandlers?: Record<string, [ModuleHandler](README.md#modulehandler)\> ; pathHandlers: [PathHandlers](README.md#pathhandlers) ; addStyle: (style: string, scopeId: string \| undefined) => void ; customBlockHandler?: (block: [CustomBlock](README.md#customblock), filename: string, options: [Options](README.md#options)) => Promise<[CustomBlockCallback](README.md#customblockcallback) \| undefined\> ; getFile: (path: string) => Promise<[File](README.md#file)\> ; getResource: (pathCx: [PathContext](README.md#pathcontext), options: [Options](README.md#options)) => [Resource](README.md#resource) ; loadModule?: (path: string, options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport) \| undefined\> ; log?: (type: string, ...data: any[]) => void }
167+
Ƭ **Options**: { additionalBabelPlugins?: any[] ; compiledCache?: [Cache](README.md#cache) ; delimiters?: [string, string] ; handleModule?: [ModuleHandler](README.md#modulehandler) ; moduleCache?: Record<string, LoadingType<[ModuleExport](README.md#moduleexport)\> \| [ModuleExport](README.md#moduleexport)\> ; pathHandlers: [PathHandlers](README.md#pathhandlers) ; addStyle: (style: string, scopeId: string \| undefined) => void ; customBlockHandler?: (block: [CustomBlock](README.md#customblock), filename: string, options: [Options](README.md#options)) => Promise<[CustomBlockCallback](README.md#customblockcallback) \| undefined\> ; getFile: (path: string) => Promise<[File](README.md#file)\> ; getResource: (pathCx: [PathContext](README.md#pathcontext), options: [Options](README.md#options)) => [Resource](README.md#resource) ; loadModule?: (path: string, options: [Options](README.md#options)) => Promise<[ModuleExport](README.md#moduleexport) \| undefined\> ; log?: (type: string, ...data: any[]) => void }
157168

158-
*Defined in [types.ts:126](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L126)*
169+
*Defined in [types.ts:126](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L126)*
159170

160171
#### Type declaration:
161172

@@ -164,8 +175,8 @@ Name | Type | Description |
164175
`additionalBabelPlugins?` | any[] | Additional babel plugins. [TBD] ```javascript ... ... ``` |
165176
`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); }, }, ... ``` |
166177
`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> ... ``` |
178+
`handleModule?` | [ModuleHandler](README.md#modulehandler) | Handle additional module types (eg. '.svg', '.json' ). see [ModuleHandler](README.md#modulehandler) |
167179
`moduleCache?` | Record<string, 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, }), ... ``` |
168-
`moduleHandlers?` | Record<string, [ModuleHandler](README.md#modulehandler)\> | Additional module type handlers. see [ModuleHandler](README.md#modulehandler) |
169180
`pathHandlers` | [PathHandlers](README.md#pathhandlers) | Abstact path handling |
170181
`addStyle` | (style: string, scopeId: string \| undefined) => void | - |
171182
`customBlockHandler?` | (block: [CustomBlock](README.md#customblock), filename: string, options: [Options](README.md#options)) => Promise<[CustomBlockCallback](README.md#customblockcallback) \| undefined\> | - |
@@ -180,7 +191,7 @@ ___
180191

181192
Ƭ **PathContext**: { refPath: string ; relPath: string }
182193

183-
*Defined in [types.ts:25](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L25)*
194+
*Defined in [types.ts:25](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L25)*
184195

185196
A PathContext represents a path (relPath) relative to an abolute path (refPath)
186197
Note that relPath is not necessary relative, but it is, relPath is relative to refPath.
@@ -198,7 +209,7 @@ ___
198209

199210
Ƭ **PathHandlers**: { extname: (filepath: string) => string ; resolve: (pathCx: [PathContext](README.md#pathcontext)) => string }
200211

201-
*Defined in [types.ts:33](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L33)*
212+
*Defined in [types.ts:33](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L33)*
202213

203214
#### Type declaration:
204215

@@ -213,7 +224,7 @@ ___
213224

214225
Ƭ **Resource**: { getContent: () => Promise<[File](README.md#file)\> ; id: string ; path: string }
215226

216-
*Defined in [types.ts:77](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/types.ts#L77)*
227+
*Defined in [types.ts:77](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/types.ts#L77)*
217228

218229
Represents a resource.
219230

@@ -231,9 +242,9 @@ Name | Type | Description |
231242

232243
`Const` **version**: string = process.env.VERSION
233244

234-
*Defined in [tools.ts:42](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/tools.ts#L42)*
245+
*Defined in [tools.ts:45](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/tools.ts#L45)*
235246

236-
*Defined in [index.ts:11](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/index.ts#L11)*
247+
*Defined in [index.ts:22](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/index.ts#L22)*
237248

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

@@ -243,15 +254,37 @@ ___
243254

244255
`Const` **vueVersion**: string
245256

246-
*Defined in [createSFCModule.ts:4](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/createSFCModule.ts#L4)*
257+
*Defined in [createSFCModule.ts:4](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/createSFCModule.ts#L4)*
247258

248259
## Functions
249260

261+
### buildTemplateProcessor
262+
263+
**buildTemplateProcessor**(`processor`: [LangProcessor](README.md#langprocessor)): object
264+
265+
*Defined in [index.ts:144](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/index.ts#L144)*
266+
267+
Convert a function to template processor interface (consolidate)
268+
269+
#### Parameters:
270+
271+
Name | Type |
272+
------ | ------ |
273+
`processor` | [LangProcessor](README.md#langprocessor) |
274+
275+
**Returns:** object
276+
277+
Name | Type |
278+
------ | ------ |
279+
`render` | (source: string, preprocessOptions: string, cb: (\_err: any, \_res: any) => void) => void |
280+
281+
___
282+
250283
### createSFCModule
251284

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

254-
*Defined in [createSFCModule.ts:3](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/createSFCModule.ts#L3)*
287+
*Defined in [createSFCModule.ts:3](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/createSFCModule.ts#L3)*
255288

256289
#### Parameters:
257290

@@ -269,7 +302,7 @@ ___
269302

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

272-
*Defined in [index.ts:58](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/index.ts#L58)*
305+
*Defined in [index.ts:59](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/index.ts#L59)*
273306

274307
#### Parameters:
275308

@@ -282,11 +315,32 @@ Name | Type |
282315

283316
___
284317

318+
### defaultHandleModule
319+
320+
**defaultHandleModule**(`extname`: string, `source`: string, `path`: string, `options`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport) \| null\>
321+
322+
*Defined in [tools.ts:360](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/tools.ts#L360)*
323+
324+
Default implementation of handleModule
325+
326+
#### Parameters:
327+
328+
Name | Type |
329+
------ | ------ |
330+
`extname` | string |
331+
`source` | string |
332+
`path` | string |
333+
`options` | [Options](README.md#options) |
334+
335+
**Returns:** Promise<[ModuleExport](README.md#moduleexport) \| null\>
336+
337+
___
338+
285339
### loadModule
286340

287341
**loadModule**(`path`: string, `options_?`: [Options](README.md#options)): Promise<[ModuleExport](README.md#moduleexport)\>
288342

289-
*Defined in [index.ts:111](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/index.ts#L111)*
343+
*Defined in [index.ts:112](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/index.ts#L112)*
290344

291345
This is the main function.
292346
This function is intended to be used only to load the entry point of your application.
@@ -340,7 +394,7 @@ ___
340394

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

343-
*Defined in [tools.ts:242](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/tools.ts#L242)*
397+
*Defined in [tools.ts:245](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/tools.ts#L245)*
344398

345399
#### Parameters:
346400

@@ -357,7 +411,7 @@ Name | Type |
357411

358412
`Const` **defaultPathHandlers**: object
359413

360-
*Defined in [index.ts:43](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/893f1d4/src/index.ts#L43)*
414+
*Defined in [index.ts:44](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/be82822/src/index.ts#L44)*
361415

362416
Default implementation of PathHandlers
363417

0 commit comments

Comments
 (0)