Globals / Options
- Options
• Optional additionalBabelPlugins: any[]
Defined in index.ts:146
Additional babel plugins. [TBD]
```javascript
...
...
```
• Optional additionalModuleHandlers: Record<string, ModuleHandler>
Defined in index.ts:153
Additional module type handlers. see ModuleHandler
• Optional compiledCache: Cache
Defined in index.ts:193
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:95
Initial cache that will contain resolved dependencies. All new modules go here.
vue must initially be contained in this object.
example:
...
moduleCache: {
vue: Vue,
},
...▸ addStyle(style: string, scopeId: string): void
Defined in index.ts:135
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:113
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:
...
getFile(url) {
return fetch(url).then(response => response.ok ? response.text() : Promise.reject(response));
},
...▸ OptionalloadModule(path: string, options: Options): Promise<Module | undefined>
Defined in index.ts:230
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
...
loadModule(path, options) {
if ( path === 'vue' )
return Vue;
},
...▸ Optionallog(type: string, ...data: any[]): void
Defined in index.ts:211
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);
},
...