README.md

vue3-sfc-loader

Globals

vue3-sfc-loader

Index

Type aliases

• AbstractPath
• Cache
• ContentData
• CustomBlock
• CustomBlockCallback
• File
• LangProcessor
• Module
• ModuleCacheId
• ModuleExport
• ModuleHandler
• Options
• PathContext
• PathResolve
• Resource

Variables

• version
• vueVersion

Functions

• buildTemplateProcessor
• createSFCModule
• defaultGetResource
• defaultPathResolve
• handleModuleInternal
• loadModule
• loadModuleInternal

Object literals

• targetBrowserBabelPlugins

Type aliases

AbstractPath

Ƭ AbstractPath: { toString: () => string }

Defined in types.ts:32

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

---

Cache

Ƭ Cache: { get: (key: string) => Promise<string | undefined> ; set: (key: string, value: string) => Promise<void> }

Defined in types.ts:20

Type declaration:

Name	Type
get	(key: string) => Promise<string | undefined>
set	(key: string, value: string) => Promise<void>

---

ContentData

Ƭ ContentData: string | ArrayBuffer

Defined in types.ts:71

---

CustomBlock

Ƭ CustomBlock: { attrs: Record<string, string | true> ; content: string ; type: string }

Defined in types.ts:109

A custom block

Type declaration:

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

---

CustomBlockCallback

Ƭ CustomBlockCallback: (component: ModuleExport) => void

Defined in types.ts:103

CustomBlockCallback function type

---

File

Ƭ File: { getContentData: (asBinary: Boolean) => Promise<ContentData> ; type: string }

Defined in types.ts:77

Represents a file content and the extension name.

Type declaration:

Name	Type	Description
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

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

Defined in types.ts:439

---

Module

Ƭ Module: { exports: ModuleExport }

Defined in types.ts:128

This just represents a loaded js module

Type declaration:

Name	Type
exports	ModuleExport

---

ModuleCacheId

Ƭ ModuleCacheId: string

Defined in types.ts:26

---

ModuleExport

Ƭ ModuleExport: {} | null

Defined in types.ts:123

This just represents a loaded js module exports

---

ModuleHandler

Ƭ ModuleHandler: (type: string, getContentData: File["getContentData"], path: AbstractPath, options: Options) => Promise<ModuleExport | null>

Defined in types.ts:68

Used by the library when it needs to handle a does not know how to handle a given file type (eg. .json files).

param The type of the file. It can be anything, but must be '.vue', '.js' or '.mjs' for vue, js and esm files.

param The method to get the content data of a file (text or binary). see [[ File['getContentData'] ]]

param The path of the file

param The options

example:

	...
	...

---

Options

Ƭ Options: { additionalBabelParserPlugins?: babel_ParserPlugin[] ; additionalBabelPlugins?: Record<string, any> ; compiledCache?: Cache ; delimiters?: [string, string] ; devMode?: boolean ; handleModule?: ModuleHandler ; isCustomElement: (tag: string) => boolean | undefined ; moduleCache: Record<ModuleCacheId, LoadingType<ModuleExport> | ModuleExport> ; pathResolve: PathResolve ; whitespace?: "preserve" | "condense" ; addStyle: (style: string, scopeId: string | undefined) => void ; createCJSModule: (refPath: AbstractPath, source: string, options: Options) => Module ; customBlockHandler?: (block: CustomBlock, filename: AbstractPath, options: Options) => Promise<CustomBlockCallback | undefined> ; getFile: (path: AbstractPath) => Promise<File | ContentData> ; getResource: (pathCx: PathContext, options: Options) => Resource ; loadModule?: (path: AbstractPath, options: Options) => Promise<ModuleExport | undefined> ; log?: (type: string, ...data: any[]) => void ; processStyles: (srcRaw: string, lang: string | undefined, filename: AbstractPath, options: Options) => Promise<string> }

Defined in types.ts:139

Type declaration:

Name	Type	Description
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 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); }, }, ...
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,
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: javascript ... 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 | undefined) => void	-
createCJSModule	(refPath: AbstractPath, source: string, options: Options) => Module	-
customBlockHandler?	(block: CustomBlock, filename: AbstractPath, options: Options) => Promise<CustomBlockCallback | undefined>	-
getFile	(path: AbstractPath) => Promise<File | ContentData>	-
getResource	(pathCx: PathContext, options: Options) => Resource	-
loadModule?	(path: AbstractPath, options: Options) => Promise<ModuleExport | undefined>	-
log?	(type: string, ...data: any[]) => void	-
processStyles	(srcRaw: string, lang: string | undefined, filename: AbstractPath, options: Options) => Promise<string>	-

---

PathContext

Ƭ PathContext: { refPath: AbstractPath | undefined ; relPath: AbstractPath }

Defined in types.ts:41

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	Description
refPath	AbstractPath | undefined	reference path
relPath	AbstractPath	relative to @refPath

---

PathResolve

Ƭ PathResolve: (pathCx: PathContext) => AbstractPath

Defined in types.ts:50

relative to absolute module path resolution

---

Resource

Ƭ Resource: { getContent: () => Promise<File> ; id: ModuleCacheId ; path: AbstractPath }

Defined in types.ts:88

Represents a resource.

Type declaration:

Name	Type	Description
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

Variables

version

• Const version: string = process.env.VERSION as string

Defined in tools.ts:49

Defined in index.ts:26

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

---

vueVersion

• Const vueVersion: string = process.env.VUE_VERSION as string

Defined in index.ts:32

the version of Vue that is expected by the library

Functions

buildTemplateProcessor

▸ buildTemplateProcessor(processor: LangProcessor): object

Defined in index.ts:194

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

---

createSFCModule

▸ createSFCModule(source: string, filename: AbstractPath, options: Options): Promise<ModuleExport>

Defined in createSFCModule.ts:3

Parameters:

Name	Type
source	string
filename	AbstractPath
options	Options

Returns: Promise<ModuleExport>

---

defaultGetResource

▸ defaultGetResource(pathCx: PathContext, options: Options): Resource

Defined in index.ts:74

Default getResource implementation by default, getContent() use the file extension as file type.

Parameters:

Name	Type
pathCx	PathContext
options	Options

Returns: Resource

---

defaultPathResolve

▸ ConstdefaultPathResolve(__namedParameters: { refPath: AbstractPath ; relPath: AbstractPath }): string | AbstractPath

Defined in index.ts:51

Default resolve implementation resolve() should handle 3 situations :

• resolve a relative path ( eg. import './details.vue' )
• resolve an absolute path ( eg. import '/components/card.vue' )
• resolve a module name ( eg. import { format } from 'date-fns' )

Parameters:

Name	Type
__namedParameters	{ refPath: AbstractPath ; relPath: AbstractPath }

Returns: string | AbstractPath

---

handleModuleInternal

▸ handleModuleInternal(type: string, getContentData: File["getContentData"], path: AbstractPath, options: Options): Promise<ModuleExport | undefined>

Defined in tools.ts:399

Default implementation of handleModule

Parameters:

Name	Type
type	string
getContentData	File["getContentData"]
path	AbstractPath
options	Options

Returns: Promise<ModuleExport | undefined>

---

loadModule

▸ loadModule(path: AbstractPath, options?: Options): Promise<ModuleExport>

Defined in index.ts:155

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	Default value	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	throwNotDefined('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));

---

loadModuleInternal

▸ loadModuleInternal(pathCx: PathContext, options: Options): Promise<ModuleExport>

Defined in tools.ts:276

Parameters:

Name	Type
pathCx	PathContext
options	Options

Returns: Promise<ModuleExport>

Object literals

targetBrowserBabelPlugins

▪ Const targetBrowserBabelPlugins: object

Defined in tools.ts:211

Properties: