vue3-sfc-loader
- AbstractPath
- Cache
- ContentData
- CustomBlock
- CustomBlockCallback
- File
- LangProcessor
- Module
- ModuleCacheId
- ModuleExport
- ModuleHandler
- Options
- PathContext
- PathResolve
- Resource
Ƭ AbstractPath: Object
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.
| Name | Type |
|---|---|
toString |
() => string |
toString: () => string
-
Ƭ Cache: Object
| Name | Type |
|---|---|
get |
(key: string) => Promise<string> |
set |
(key: string, value: string) => Promise<void> |
get: (key: string) => Promise<string>
-
set: (key: string, value: string) => Promise<void>
-
Ƭ ContentData: string | ArrayBuffer
Ƭ CustomBlock: Object
A custom block
| Name | Type |
|---|---|
attrs |
Record<string, string | true> |
content |
string |
type |
string |
attrs: Record<string, string | true>
-
content: string
-
type: string
-
Ƭ CustomBlockCallback: (component: ModuleExport) => void
CustomBlockCallback function type
▸ (component): void
| Name | Type |
|---|---|
component |
ModuleExport |
void
Ƭ File: Object
Represents a file content and the extension name.
| Name | Type |
|---|---|
getContentData |
(asBinary: Boolean) => Promise<ContentData> |
type |
string |
getContentData: (asBinary: Boolean) => Promise<ContentData>
The content data accessor (request data as text of binary)
type: string
The content type (file extension name, eg. '.svg' )
Ƭ LangProcessor: (source: string, preprocessOptions?: any) => Promise<string> | string
▸ (source, preprocessOptions?): Promise<string> | string
| Name | Type |
|---|---|
source |
string |
preprocessOptions? |
any |
Promise<string> | string
Ƭ Module: Object
This just represents a loaded js module
| Name | Type |
|---|---|
exports |
ModuleExport |
exports: ModuleExport
-
Ƭ ModuleCacheId: string
Ƭ ModuleExport: {} | null
This just represents a loaded js module exports
Ƭ ModuleHandler: (type: string, getContentData: File["getContentData"], path: AbstractPath, options: Options) => Promise<ModuleExport | null>
Used by the library when it needs to handle a does not know how to handle a given file type (eg. .json files).
▸ (type, getContentData, path, options): Promise<ModuleExport | null>
| Name | Type | Description |
|---|---|---|
type |
string |
The type of the file. It can be anything, but must be '.vue', '.js' or '.mjs' for vue, js and esm files. |
getContentData |
File["getContentData"] |
The method to get the content data of a file (text or binary). see [[ File['getContentData'] ]] |
path |
AbstractPath |
The path of the file |
options |
Options |
The options example: javascript ... ... |
Promise<ModuleExport | null>
Ƭ Options: Object
| Name | Type |
|---|---|
additionalBabelParserPlugins? |
babel_ParserPlugin[] |
additionalBabelPlugins? |
Record<string, any> |
compiledCache? |
Cache |
delimiters? |
[string, string] |
devMode? |
boolean |
getPathname |
(path: string) => string |
handleModule? |
ModuleHandler |
isCustomElement |
(tag: string) => boolean | undefined |
moduleCache |
Record<ModuleCacheId, LoadingType<ModuleExport> | ModuleExport> |
pathResolve |
PathResolve |
whitespace? |
"preserve" | "condense" |
addStyle |
(style: string, scopeId: string) => void |
createCJSModule |
(refPath: AbstractPath, source: string, options: Options) => Module |
customBlockHandler? |
(block: CustomBlock, filename: AbstractPath, options: Options) => Promise<CustomBlockCallback> |
getFile |
(path: AbstractPath) => Promise<File | ContentData> |
getResource |
(pathCx: PathContext, options: Options) => Resource |
loadModule? |
(path: AbstractPath, options: Options) => Promise<{}> |
log? |
(type: string, ...data: any[]) => void |
processStyles |
(srcRaw: string, lang: string, filename: AbstractPath, options: Options) => Promise<string> |
additionalBabelParserPlugins?: babel_ParserPlugin[]
Additional babel parser plugins. [TBD]
```javascript
...
...
```
additionalBabelPlugins?: Record<string, any>
Additional babel plugins. [TBD]
```javascript
...
...
```
compiledCache?: Cache
[get] and [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, lz-string
...
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) ?? undefined;
},
},
...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>
...
```
devMode?: boolean
Set development mode prevent minification, allow debugger statement,
getPathname: (path: string) => string
by default, remove the search string
in situation where you need to keep the path intact, use getPathname: path => path
handleModule?: ModuleHandler
Handle additional module types (eg. '.svg', '.json' ). see [[ModuleHandler]]
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
moduleCache: Record<ModuleCacheId, LoadingType<ModuleExport> | ModuleExport>
Initial cache that will contain resolved dependencies. All new modules go here.
vue must initially be contained in this object.
[[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, ...).
* The library take the ownership of [[moduleCache]] when [[loadModule]] is called.
See also [[options.loadModule]].
example:
...
moduleCache: Object.assign(Object.create(null), {
vue: Vue,
}),
...pathResolve: PathResolve
Abstact path handling (optional)
whitespace?: "preserve" | "condense"
Whitespace handling strategy see https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options
addStyle: (style: string, scopeId: string) => void
Called by the library when CSS style must be added in the HTML document.
createCJSModule: (refPath: AbstractPath, source: string, options: Options) => Module
creates a CommonJS module from JS source string. (optional)
customBlockHandler?: (block: CustomBlock, filename: AbstractPath, options: Options) => Promise<CustomBlockCallback>
Called for each custom block.
getFile: (path: AbstractPath) => Promise<File | ContentData>
Called by the library when it needs a file.
getResource: (pathCx: PathContext, options: Options) => Resource
Abstact resource handling (optional)
loadModule?: (path: AbstractPath, options: Options) => Promise<{}>
Called when the lib requires a module. Do return undefined to let the library handle this.
log?: (type: string, ...data: any[]) => void
Called by the library when there is somthing to log (eg. scripts compilation errors, template compilation errors, template compilation tips, style compilation errors, ...)
processStyles: (srcRaw: string, lang: string, filename: AbstractPath, options: Options) => Promise<string>
Ƭ PathContext: Object
A PathContext represents a path (relPath) relative to an abolute path (refPath) Note that relPath is not necessary relative, but when it is, relPath is relative to refPath.
| Name | Type |
|---|---|
refPath |
AbstractPath | undefined |
relPath |
AbstractPath |
refPath: AbstractPath | undefined
reference path
relPath: AbstractPath
relative to
Ref Path
Ƭ PathResolve: (pathCx: PathContext, options: Options) => AbstractPath
relative to absolute module path resolution
▸ (pathCx, options): AbstractPath
| Name | Type |
|---|---|
pathCx |
PathContext |
options |
Options |
Ƭ Resource: Object
Represents a resource.
| Name | Type |
|---|---|
getContent |
() => Promise<File> |
id |
ModuleCacheId |
path |
AbstractPath |
getContent: () => Promise<File>
asynchronously get the content of the resource. Once you got the content, you can asynchronously get the data through the getContentData(asBinary) method.
id: ModuleCacheId
'abstract' unique id of the resource. This id is used as the key of the [[Options.moduleCache]]
path: AbstractPath
file path of the resource
• Const version: string
the version of the library (process.env.VERSION is set by webpack, at compile-time)
• Const vueVersion: string
the version of Vue that is expected by the library
▸ buildTemplateProcessor(processor): Object
Convert a function to template processor interface (consolidate)
| Name | Type |
|---|---|
processor |
LangProcessor |
Object
| Name | Type |
|---|---|
render |
(source: string, preprocessOptions: string, cb: (_err: any, _res: any) => void) => void |
render: (source: string, preprocessOptions: string, cb: (_err: any, _res: any) => void) => void
-
▸ loadModule(path, options?): Promise<ModuleExport>
This is the main function.
This function is intended to be used only to load the entry point of your application.
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.
| Name | Type | Description |
|---|---|---|
path |
AbstractPath |
The path of the .vue file. If path is not a path (eg. an string ID), your [[getFile]] function must return a [[File]] object. |
options |
Options |
The options |
Promise<ModuleExport>
A Promise of the component
example using Vue.defineAsyncComponent:
const app = Vue.createApp({
components: {
'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) )
},
template: '<my-component></my-component>'
});example using await:
;(async () => {
const app = Vue.createApp({
components: {
'my-component': await loadModule('./myComponent.vue', options)
},
template: '<my-component></my-component>'
});
})()
.catch(ex => console.error(ex));