Skip to content

Latest commit

 

History

History
752 lines (457 loc) · 19.5 KB

README.md

File metadata and controls

752 lines (457 loc) · 19.5 KB

vue3-sfc-loader

vue3-sfc-loader

Table of contents

Type Aliases

Variables

Functions

Type Aliases

AbstractPath

Ƭ 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.

Type declaration

Name Type
toString () => string

toString: () => string

-


Defined in

types.ts:32


Cache

Ƭ Cache: Object

Type declaration

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>

-


Defined in

types.ts:20


ContentData

Ƭ ContentData: string | ArrayBuffer

Defined in

types.ts:71


CustomBlock

Ƭ CustomBlock: Object

A custom block

Type declaration

Name Type
attrs Record<string, string | true>
content string
type string

attrs: Record<string, string | true>

-


content: string

-


type: string

-


Defined in

types.ts:109


CustomBlockCallback

Ƭ CustomBlockCallback: (component: ModuleExport) => void

CustomBlockCallback function type

Type declaration

▸ (component): void

Parameters
Name Type
component ModuleExport
Returns

void

Defined in

types.ts:103


File

Ƭ File: Object

Represents a file content and the extension name.

Type declaration

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' )


Defined in

types.ts:77


LangProcessor

Ƭ LangProcessor: (source: string, preprocessOptions?: any) => Promise<string> | string

Type declaration

▸ (source, preprocessOptions?): Promise<string> | string

Parameters
Name Type
source string
preprocessOptions? any
Returns

Promise<string> | string

Defined in

types.ts:446


Module

Ƭ Module: Object

This just represents a loaded js module

Type declaration

Name Type
exports ModuleExport

exports: ModuleExport

-


Defined in

types.ts:128


ModuleCacheId

Ƭ ModuleCacheId: string

Defined in

types.ts:26


ModuleExport

Ƭ ModuleExport: {} | null

This just represents a loaded js module exports

Defined in

types.ts:123


ModuleHandler

Ƭ 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 declaration

▸ (type, getContentData, path, options): Promise<ModuleExport | null>

Parameters
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 ... ...
Returns

Promise<ModuleExport | null>

Defined in

types.ts:68


Options

Ƭ Options: Object

Type declaration

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>


Defined in

types.ts:139


PathContext

Ƭ 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.

Type declaration

Name Type
refPath AbstractPath | undefined
relPath AbstractPath

refPath: AbstractPath | undefined

reference path


relPath: AbstractPath

relative to

Ref Path


Defined in

types.ts:41


PathResolve

Ƭ PathResolve: (pathCx: PathContext, options: Options) => AbstractPath

relative to absolute module path resolution

Type declaration

▸ (pathCx, options): AbstractPath

Parameters
Name Type
pathCx PathContext
options Options
Returns

AbstractPath

Defined in

types.ts:50


Resource

Ƭ Resource: Object

Represents a resource.

Type declaration

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


Defined in

types.ts:88

Variables

version

Const version: string

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

Defined in

index.ts:26


vueVersion

Const vueVersion: string

the version of Vue that is expected by the library

Defined in

index.ts:32

Functions

buildTemplateProcessor

buildTemplateProcessor(processor): Object

Convert a function to template processor interface (consolidate)

Parameters

Name Type
processor LangProcessor

Returns

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

-


Defined in

index.ts:213


loadModule

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.

Parameters

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

Returns

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));

Defined in

index.ts:171