12
12
* [ CustomBlock] ( README.md#customblock )
13
13
* [ CustomBlockCallback] ( README.md#customblockcallback )
14
14
* [ File] ( README.md#file )
15
+ * [ LangProcessor] ( README.md#langprocessor )
15
16
* [ Module] ( README.md#module )
16
17
* [ ModuleExport] ( README.md#moduleexport )
17
18
* [ ModuleHandler] ( README.md#modulehandler )
27
28
28
29
### Functions
29
30
31
+ * [ buildTemplateProcessor] ( README.md#buildtemplateprocessor )
30
32
* [ createSFCModule] ( README.md#createsfcmodule )
31
33
* [ defaultGetResource] ( README.md#defaultgetresource )
34
+ * [ defaultHandleModule] ( README.md#defaulthandlemodule )
32
35
* [ loadModule] ( README.md#loadmodule )
33
36
* [ loadModuleInternal] ( README.md#loadmoduleinternal )
34
37
42
45
43
46
Ƭ ** Cache** : { get: (key: string) => Promise<string\> ; set: (key: string, value: string) => Promise<void\> }
44
47
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 ) *
46
49
47
50
#### Type declaration:
48
51
57
60
58
61
Ƭ ** CustomBlock** : { attrs: Record<string, string \| true\> ; content: string ; type: string }
59
62
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 ) *
61
64
62
65
A custom block
63
66
75
78
76
79
Ƭ ** CustomBlockCallback** : (component: [ ModuleExport] ( README.md#moduleexport ) ) => void
77
80
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 ) *
79
82
80
83
CustomBlockCallback function type
81
84
85
88
86
89
Ƭ ** File** : { content: string \| ArrayBuffer ; extname: string }
87
90
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 ) *
89
92
90
93
Represents a file content and the extension name.
91
94
@@ -98,11 +101,19 @@ Name | Type | Description |
98
101
99
102
___
100
103
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
+
101
112
### Module
102
113
103
114
Ƭ ** Module** : { exports: [ ModuleExport] ( README.md#moduleexport ) }
104
115
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 ) *
106
117
107
118
This just represents a loaded js module
108
119
@@ -118,20 +129,20 @@ ___
118
129
119
130
Ƭ ** ModuleExport** : {}
120
131
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 ) *
122
133
123
134
This just represents a loaded js module exports
124
135
125
136
___
126
137
127
138
### ModuleHandler
128
139
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 \>
130
141
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 ) *
132
143
133
144
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]]
135
146
136
147
** ` param ` ** The content of the file
137
148
153
164
154
165
### Options
155
166
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 }
157
168
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 ) *
159
170
160
171
#### Type declaration:
161
172
@@ -164,8 +175,8 @@ Name | Type | Description |
164
175
` additionalBabelPlugins? ` | any[ ] | Additional babel plugins. [ TBD] ``` javascript ... ... ``` |
165
176
`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); }, }, ... ``` |
166
177
` 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 ) |
167
179
` 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 ) |
169
180
` pathHandlers ` | [ PathHandlers] ( README.md#pathhandlers ) | Abstact path handling |
170
181
` addStyle ` | (style: string, scopeId: string \| undefined) => void | - |
171
182
` customBlockHandler? ` | (block: [ CustomBlock] ( README.md#customblock ) , filename: string, options: [ Options] ( README.md#options ) ) => Promise<[ CustomBlockCallback] ( README.md#customblockcallback ) \| undefined\> | - |
180
191
181
192
Ƭ ** PathContext** : { refPath: string ; relPath: string }
182
193
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 ) *
184
195
185
196
A PathContext represents a path (relPath) relative to an abolute path (refPath)
186
197
Note that relPath is not necessary relative, but it is, relPath is relative to refPath.
198
209
199
210
Ƭ ** PathHandlers** : { extname: (filepath: string) => string ; resolve: (pathCx: [ PathContext] ( README.md#pathcontext ) ) => string }
200
211
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 ) *
202
213
203
214
#### Type declaration:
204
215
213
224
214
225
Ƭ ** Resource** : { getContent: () => Promise<[ File] ( README.md#file ) \> ; id: string ; path: string }
215
226
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 ) *
217
228
218
229
Represents a resource.
219
230
@@ -231,9 +242,9 @@ Name | Type | Description |
231
242
232
243
• ` Const ` ** version** : string = process.env.VERSION
233
244
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 ) *
235
246
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 ) *
237
248
238
249
the version of the library (process.env.VERSION is set by webpack, at compile-time)
239
250
@@ -243,15 +254,37 @@ ___
243
254
244
255
• ` Const ` ** vueVersion** : string
245
256
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 ) *
247
258
248
259
## Functions
249
260
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
+
250
283
### createSFCModule
251
284
252
285
▸ ** createSFCModule** (` source ` : string, ` filename ` : string, ` options ` : [ Options] ( README.md#options ) ): Promise<[ ModuleExport] ( README.md#moduleexport ) \>
253
286
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 ) *
255
288
256
289
#### Parameters:
257
290
269
302
270
303
▸ ** defaultGetResource** (` pathCx ` : [ PathContext] ( README.md#pathcontext ) , ` options ` : [ Options] ( README.md#options ) ): [ Resource] ( README.md#resource )
271
304
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 ) *
273
306
274
307
#### Parameters:
275
308
@@ -282,11 +315,32 @@ Name | Type |
282
315
283
316
___
284
317
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
+
285
339
### loadModule
286
340
287
341
▸ ** loadModule** (` path ` : string, ` options_? ` : [ Options] ( README.md#options ) ): Promise<[ ModuleExport] ( README.md#moduleexport ) \>
288
342
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 ) *
290
344
291
345
This is the main function.
292
346
This function is intended to be used only to load the entry point of your application.
340
394
341
395
▸ ** loadModuleInternal** (` pathCx ` : [ PathContext] ( README.md#pathcontext ) , ` options ` : [ Options] ( README.md#options ) ): Promise<[ ModuleExport] ( README.md#moduleexport ) \>
342
396
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 ) *
344
398
345
399
#### Parameters:
346
400
@@ -357,7 +411,7 @@ Name | Type |
357
411
358
412
▪ ` Const ` ** defaultPathHandlers** : object
359
413
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 ) *
361
415
362
416
Default implementation of PathHandlers
363
417
0 commit comments