Globals / Options
- Options
• Optional additionalBabelPlugins: any[]
Defined in index.ts:153
Additional babel plugins. [TBD]
```javascript
...
...
```
• Optional additionalModuleHandlers: Record<string, ModuleHandler>
Defined in index.ts:160
Additional module type handlers. see ModuleHandler
• Optional compiledCache: Cache
Defined in index.ts:200
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);
},
},
...• Optional moduleCache: Record<string, Module>
Defined in index.ts:99
Initial cache that will contain resolved dependencies. All new modules go here.
vue must initially be contained in this object.
moduleCache is mandatory for the lib but optional for you. If you do not provide it, the lib will automatically add it to the [[options]] object.
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:
...
moduleCache: Object.assign(Object.create(null), {
vue: Vue,
}),
...▸ addStyle(style: string, scopeId: string): void
Defined in index.ts:142
Called by the library when CSS style must be added in the HTML document.
| Name | Type | Description |
|---|---|---|
style |
string | The CSS style chunk |
scopeId |
string | The scope ID of the CSS style chunk |
Returns: void
example:
...
addStyle(styleStr) {
const style = document.createElement('style');
style.textContent = styleStr;
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
...▸ getFile(path: string): Promise<File>
Defined in index.ts:120
Called by the library when it needs a file.
| Name | Type | Description |
|---|---|---|
path |
string | The path of the file |
Returns: Promise<File>
a Promise of the file content (UTF-8)
example:
...
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(url+' '+res.statusText), { res });
return await res.text();
},
...▸ OptionalloadModule(path: string, options: Options): Promise<Module | undefined>
Defined in index.ts:239
Called when the lib requires a module. Do return undefined to let the library handle this.
| Name | Type | Description |
|---|---|---|
path |
string | The path of the module. |
options |
Options | The options object. |
Returns: Promise<Module | undefined>
A Promise of the module or undefined
moduleCache and Options.loadModule are strongly related, in the sense that the result of [[options.loadModule]] is stored in moduleCache. However, [[options.loadModule]] is asynchronous and may help you to handle modules or components that are conditionally required (optional features, current languages, plugins, ...).
...
loadModule(path, options) {
if ( path === 'vue' )
return Vue;
},
...▸ Optionallog(type: string, ...data: any[]): void
Defined in index.ts:218
Called by the library when there is somthing to log (eg. scripts compilation errors, template compilation errors, template compilation tips, style compilation errors, ...)
| Name | Type | Description |
|---|---|---|
type |
string | the type of the notification, it respects console property names (error, warn, info). |
...data |
any[] | - |
Returns: void
...
log(type, ...args) {
console.log(type, ...args);
},
...