vue3-sfc-loader
Advanced tools
Comparing version 0.2.16 to 0.2.17
@@ -20,6 +20,6 @@ const fs = require('fs'); | ||
const fctList = scriptList | ||
.map(code => (ctx, global) => (function(global) { return eval(code) }).call(ctx, global) ); | ||
.map(code => ctx => (function(ctx) { return eval(code) }).call(null, ctx) ); | ||
for ( const fct of fctList ) | ||
result = fct(result, global); | ||
result = fct({ wholeContent: result, global }); | ||
@@ -51,3 +51,3 @@ result = result.replace(regexp, function(all, p1) { | ||
| const versionObj = require('semver').parse(require(process.cwd() + '/package.json').version); | ||
| this.replace(/(\/vue3-sfc-loader@)(.*?)(\/)/g, `$1^${ versionObj.major }.${ versionObj.minor }$3`); | ||
| ctx.wholeContent.replace(/(\/vue3-sfc-loader@)(.*?)(\/)/g, `$1^${ versionObj.major }.${ versionObj.minor }$3`); | ||
| | ||
@@ -54,0 +54,0 @@ | --> |
@@ -25,10 +25,10 @@ const Path = require('path'); | ||
targetsBrowsers = 'defaults', | ||
noPresetEnv = false, | ||
noCompress = false, | ||
noPresetEnv = !isProd, | ||
noCompress = !isProd, | ||
} = env; | ||
console.log('env', env); | ||
const genSourcemap = false; | ||
console.log('config', { targetsBrowsers, noPresetEnv, noCompress, genSourcemap }); | ||
return { | ||
@@ -49,3 +49,3 @@ entry: [ | ||
// doc: https://webpack.js.org/configuration/output/#outputenvironment | ||
...isProd ? { | ||
...!noPresetEnv ? { | ||
arrowFunction: caniuse.isSupported('arrow-functions', targetsBrowsers), | ||
@@ -99,3 +99,3 @@ const: caniuse.isSupported('const', targetsBrowsers), | ||
// minimize | ||
...(isProd && !noCompress) ? [ | ||
...!noCompress ? [ | ||
new TerserPlugin({ | ||
@@ -109,4 +109,6 @@ extractComments: false, | ||
drop_console: true, | ||
arrows: caniuse.isSupported('arrow-functions', targetsBrowsers), | ||
ecma: caniuse.isSupported('es6', targetsBrowsers) ? '2015' : '5', // note ECMAScript 2015 is the sixth edition of the ECMAScript Language Specification standard | ||
...!noPresetEnv ? { | ||
arrows: caniuse.isSupported('arrow-functions', targetsBrowsers), | ||
ecma: caniuse.isSupported('es6', targetsBrowsers) ? '2015' : '5', // note ECMAScript 2015 is the sixth edition of the ECMAScript Language Specification standard | ||
} : {}, | ||
}, | ||
@@ -113,0 +115,0 @@ }, |
### [0.2.17](https://github.com/FranckFreiburger/vue3-sfc-loader/compare/v0.2.16...v0.2.17) (2020-12-08) | ||
### Features | ||
* **core:** enhance moduleCache management ([4ab1dbd](https://github.com/FranckFreiburger/vue3-sfc-loader/commit/4ab1dbda918276a0d7f7d2784537d5cc5f6e360f)) | ||
### Bug Fixes | ||
* **core:** call addStyle() with scopeId only if style is scoped ([cd10f83](https://github.com/FranckFreiburger/vue3-sfc-loader/commit/cd10f8344a0dcd3ba6a44733c5feb3e45bc3671b)) | ||
* **core:** fix import() path resolution ([33af5e9](https://github.com/FranckFreiburger/vue3-sfc-loader/commit/33af5e96a68ce077a1de80222a042b48247323c4)) | ||
* **core:** fix module cache handling ([80907a4](https://github.com/FranckFreiburger/vue3-sfc-loader/commit/80907a40d68759db35d9af3696828c47444e4dc6)) | ||
### [0.2.16](https://github.com/FranckFreiburger/vue3-sfc-loader/compare/v0.2.15...v0.2.16) (2020-12-07) | ||
@@ -3,0 +17,0 @@ |
@@ -27,3 +27,3 @@ interface Cache { | ||
*/ | ||
moduleCache: Record<string, Module>; | ||
moduleCache?: Record<string, Module>; | ||
/** | ||
@@ -87,3 +87,3 @@ * Called by the library when it needs a file. | ||
* Here we handle space limitation in a very basic way. | ||
* Maybe (not tested), the following lib may help you to gain more space [pako](https://github.com/nodeca/pako) | ||
* Maybe (not tested), the following libraries may help you to gain more space [pako](https://github.com/nodeca/pako), [lz-string](https://github.com/pieroxy/lz-string/) | ||
* ```javascript | ||
@@ -102,3 +102,4 @@ * ... | ||
* break; | ||
* } catch(ex) { // handle: Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'XXX' exceeded the quota | ||
* } catch(ex) { | ||
* // here we handle DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'XXX' exceeded the quota | ||
* | ||
@@ -134,2 +135,19 @@ * window.localStorage.removeItem(window.localStorage.key(0)); | ||
log?(type: string, ...data: any[]): void; | ||
/** | ||
* Called when the lib requires a module. Do return `undefined` to let the library handle this. | ||
* @param path The path of the module. | ||
* @param options The options object. | ||
* @returns A Promise of the module or undefined | ||
* | ||
* ```javascript | ||
* ... | ||
* loadModule(path, options) { | ||
* | ||
* if ( path === 'vue' ) | ||
* return Vue; | ||
* }, | ||
* ... | ||
* ``` | ||
*/ | ||
loadModule?(path: string, options: Options): Promise<Module> | undefined; | ||
} | ||
@@ -173,2 +191,3 @@ /** | ||
* **example using `Vue.defineAsyncComponent`:** | ||
* | ||
* ```javascript | ||
@@ -185,14 +204,18 @@ * | ||
* | ||
* **example using await:** | ||
* _the following code requires to be placed in an async function_ | ||
* **example using `await`:** | ||
* | ||
* ```javascript | ||
* ;(async () => { | ||
* | ||
* const app = Vue.createApp({ | ||
* components: { | ||
* 'my-component': await loadModule('./myComponent.vue', options) | ||
* }, | ||
* template: '<my-component></my-component>' | ||
* }); | ||
* const app = Vue.createApp({ | ||
* components: { | ||
* 'my-component': await loadModule('./myComponent.vue', options) | ||
* }, | ||
* template: '<my-component></my-component>' | ||
* }); | ||
* | ||
* })() | ||
* .catch(ex => console.error(ex)); | ||
* | ||
* ``` | ||
@@ -199,0 +222,0 @@ * |
@@ -18,3 +18,3 @@ { | ||
"license": "MIT", | ||
"version": "0.2.16", | ||
"version": "0.2.17", | ||
"browserslist": "> 1%, last 2 versions, Firefox ESR, not dead, not ie 11", | ||
@@ -21,0 +21,0 @@ "main": "dist/vue3-sfc-loader.js", |
@@ -11,5 +11,6 @@ # vue3-sfc-loader | ||
* Focuses on component compilation. Network, styles injection and cache are up to you (see [example below](#example)) | ||
* You can [build your own version](#build-your-own-version) and easily customize browser support | ||
* Properly reports template, styles or script errors through the [log callback](docs/api/interfaces/options.md#log) | ||
* Embedded ES6 modules support (including `import()`) | ||
* Support custom CSS, HTML and Script language, see [pug example](docs/examples.md#using-another-template-language-pug) | ||
* Properly reports template, style or script errors through the [log callback](docs/api/interfaces/options.md#log) | ||
* You can [build your own version](#build-your-own-version) and easily customize browsers you need to support | ||
@@ -103,3 +104,3 @@ | ||
`vue3-sfc-loader.js` = `Webpack`( `@vue/compiler-sfc` + `@babel` ) | ||
[`vue3-sfc-loader.js`](https://unpkg.com/vue3-sfc-loader@0.2.16/dist/report.html) = `Webpack`( `@vue/compiler-sfc` + `@babel` ) | ||
@@ -106,0 +107,0 @@ |
@@ -95,3 +95,3 @@ import { posix as Path } from 'path' | ||
*/ | ||
moduleCache: Record<string, Module>, | ||
moduleCache?: Record<string, Module>, | ||
@@ -165,3 +165,3 @@ | ||
* Here we handle space limitation in a very basic way. | ||
* Maybe (not tested), the following lib may help you to gain more space [pako](https://github.com/nodeca/pako) | ||
* Maybe (not tested), the following libraries may help you to gain more space [pako](https://github.com/nodeca/pako), [lz-string](https://github.com/pieroxy/lz-string/) | ||
* ```javascript | ||
@@ -180,3 +180,4 @@ * ... | ||
* break; | ||
* } catch(ex) { // handle: Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'XXX' exceeded the quota | ||
* } catch(ex) { | ||
* // here we handle DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'XXX' exceeded the quota | ||
* | ||
@@ -207,3 +208,3 @@ * window.localStorage.removeItem(window.localStorage.key(0)); | ||
* log(type, ...args) { | ||
* | ||
* | ||
* console.log(type, ...args); | ||
@@ -215,2 +216,22 @@ * }, | ||
log?(type : string, ...data : any[]) : void, | ||
/** | ||
* Called when the lib requires a module. Do return `undefined` to let the library handle this. | ||
* @param path The path of the module. | ||
* @param options The options object. | ||
* @returns A Promise of the module or undefined | ||
* | ||
* ```javascript | ||
* ... | ||
* loadModule(path, options) { | ||
* | ||
* if ( path === 'vue' ) | ||
* return Vue; | ||
* }, | ||
* ... | ||
* ``` | ||
*/ | ||
loadModule?(path : string, options : Options) : Promise<Module> | undefined, | ||
} | ||
@@ -415,12 +436,4 @@ | ||
const { moduleCache } = options; | ||
for ( const dep of deps ) { | ||
const path = resolvePath(filename, dep); | ||
if ( path in moduleCache ) | ||
continue; | ||
moduleCache[path] = await loadModule(path, options); | ||
} | ||
for ( const dep of deps ) | ||
await loadModule(resolvePath(filename, dep), options); | ||
} | ||
@@ -443,3 +456,3 @@ | ||
throw new Error(`${ absPath } not found`); | ||
throw new Error(`${ absPath } not found in moduleCache`); | ||
} | ||
@@ -449,7 +462,3 @@ | ||
const absPath = resolvePath(filename, path); | ||
if ( absPath in moduleCache ) | ||
return moduleCache[absPath]; | ||
return moduleCache[path] = await loadModule(path, options); | ||
return await loadModule(resolvePath(filename, path), options); | ||
} | ||
@@ -515,3 +524,3 @@ | ||
const { moduleCache, compiledCache } = options; | ||
const { compiledCache } = options; | ||
@@ -689,3 +698,3 @@ const [ depsList, transformedSource ] = await withCache(compiledCache, [ version, source, filename ], async () => { | ||
addStyle(style, scopeId); | ||
addStyle(style, descStyle.scoped ? scopeId : undefined); | ||
} | ||
@@ -713,3 +722,4 @@ | ||
* | ||
* **example using `Vue.defineAsyncComponent`:** | ||
* **example using `Vue.defineAsyncComponent`:** | ||
* | ||
* ```javascript | ||
@@ -726,14 +736,18 @@ * | ||
* | ||
* **example using await:** | ||
* _the following code requires to be placed in an async function_ | ||
* **example using `await`:** | ||
* | ||
* ```javascript | ||
* ;(async () => { | ||
* | ||
* const app = Vue.createApp({ | ||
* components: { | ||
* 'my-component': await loadModule('./myComponent.vue', options) | ||
* }, | ||
* template: '<my-component></my-component>' | ||
* }); | ||
* const app = Vue.createApp({ | ||
* components: { | ||
* 'my-component': await loadModule('./myComponent.vue', options) | ||
* }, | ||
* template: '<my-component></my-component>' | ||
* }); | ||
* | ||
* })() | ||
* .catch(ex => console.error(ex)); | ||
* | ||
* ``` | ||
@@ -745,8 +759,20 @@ * | ||
const { | ||
moduleCache = throwNotDefined('options.moduleCache'), | ||
moduleCache = (options.moduleCache = {}), | ||
getFile = throwNotDefined('options.getFile()'), | ||
addStyle = throwNotDefined('options.addStyle()'), | ||
additionalModuleHandlers = {} | ||
additionalModuleHandlers = {}, | ||
loadModule, | ||
} = options; | ||
if ( path in moduleCache ) | ||
return moduleCache[path]; | ||
if ( loadModule ) { | ||
const module = await loadModule(path, options); | ||
if ( module !== undefined ) | ||
return moduleCache[path] = module; | ||
} | ||
const moduleHandlers = { ...defaultModuleHandlers, ...additionalModuleHandlers }; | ||
@@ -764,3 +790,3 @@ | ||
return moduleHandlers[file.extname](file.content, path, options); | ||
return moduleCache[path] = moduleHandlers[file.extname](file.content, path, options); | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
7243
128
7336291
21