feat(core): add devMode option

as far as possible, preserves original code formatting
closes #123

Author: Franck Freiburger

src/createVue2SFCModule.ts

@@ -68,7 +68,7 @@ export async function createSFCModule(source : string, filename : AbstractPath,
 
 	const component = {};
 
-	const { delimiters, whitespace, moduleCache, compiledCache, getResource, addStyle, log, additionalBabelParserPlugins = [], additionalBabelPlugins = {}, customBlockHandler } = options;
+	const { delimiters, whitespace, moduleCache, compiledCache, getResource, addStyle, log, additionalBabelParserPlugins = [], additionalBabelPlugins = {}, customBlockHandler, devMode = false } = options;
 
 	const descriptor = sfc_parse({
 		source,
@@ -107,7 +107,7 @@ export async function createSFCModule(source : string, filename : AbstractPath,
 			comments: true
 		} as any,
 		isProduction: isProd,
-		prettify: false
+		prettify: devMode,
 	} : null;
 
 	// Vue2 doesn't support preprocessCustomRequire, so we have to preprocess manually
@@ -136,7 +136,7 @@ export async function createSFCModule(source : string, filename : AbstractPath,
 
 		const [ depsList, transformedScriptSource ] = await withCache(compiledCache, [ componentHash, src, additionalBabelParserPlugins, Object.keys(additionalBabelPlugins) ], async ({ preventCache }) => {
 
-			return await transformJSCode(src, true, strFilename, [ ...additionalBabelParserPlugins, 'jsx' ], { ...additionalBabelPlugins, jsx, babelSugarInjectH }, log);
+			return await transformJSCode(src, true, strFilename, [ ...additionalBabelParserPlugins, 'jsx' ], { ...additionalBabelPlugins, jsx, babelSugarInjectH }, log, devMode);
 		});
 
 		await loadDeps(filename, depsList, options);
@@ -180,7 +180,7 @@ export async function createSFCModule(source : string, filename : AbstractPath,
 				log?.('info', 'SFC template', formatErrorStartEnd(err.msg, strFilename, source, err.start, err.end ));
 			}
 
-			return await transformJSCode(template.code, true, filename, additionalBabelParserPlugins, additionalBabelPlugins, log);
+			return await transformJSCode(template.code, true, filename, additionalBabelParserPlugins, additionalBabelPlugins, log, devMode);
 		});
 
 		await loadDeps(filename, templateDepsList, options);

src/createVue3SFCModule.ts

@@ -68,7 +68,7 @@ export async function createSFCModule(source : string, filename : AbstractPath,
 
 	const component : { [key: string]: any } = {};
 
-	const { delimiters, whitespace, moduleCache, compiledCache, getResource, addStyle, log, additionalBabelParserPlugins = [], additionalBabelPlugins = {}, customBlockHandler } = options;
+	const { delimiters, whitespace, moduleCache, compiledCache, getResource, addStyle, log, additionalBabelParserPlugins = [], additionalBabelPlugins = {}, customBlockHandler, devMode = false } = options;
 
 	// vue-loader next: https://github.com/vuejs/vue-loader/blob/next/src/index.ts#L91
 	const { descriptor, errors } = sfc_parse(source, {
@@ -145,7 +145,7 @@ export async function createSFCModule(source : string, filename : AbstractPath,
 			if ( compileTemplateOptions !== null )
 				compileTemplateOptions.compilerOptions.bindingMetadata = scriptBlock.bindings;
 
-			return await transformJSCode(scriptBlock.content, true, strFilename, [ ...additionalBabelParserPlugins, 'jsx' ], { ...additionalBabelPlugins,  jsx }, log);
+			return await transformJSCode(scriptBlock.content, true, strFilename, [ ...additionalBabelParserPlugins, 'jsx' ], { ...additionalBabelPlugins,  jsx }, log, devMode);
 
 		});
 
@@ -180,7 +180,7 @@ export async function createSFCModule(source : string, filename : AbstractPath,
 			for ( const err of template.tips )
 				log?.('info', 'SFC template', err);
 
-			return await transformJSCode(template.code, true, descriptor.filename, additionalBabelParserPlugins, additionalBabelPlugins, log);
+			return await transformJSCode(template.code, true, descriptor.filename, additionalBabelParserPlugins, additionalBabelPlugins, log, devMode);
 		});
 
 		await loadDeps(filename, templateDepsList, options);

src/tools.ts

@@ -212,7 +212,7 @@ const targetBrowserBabelPlugins = { ...(typeof ___targetBrowserBabelPlugins !==
 /**
  * @internal
  */
-export async function transformJSCode(source : string, moduleSourceType : boolean, filename : AbstractPath, additionalBabelParserPlugins : Options['additionalBabelParserPlugins'], additionalBabelPlugins : Options['additionalBabelPlugins'], log : Options['log']) : Promise<[string[], string]> {
+export async function transformJSCode(source : string, moduleSourceType : boolean, filename : AbstractPath, additionalBabelParserPlugins : Options['additionalBabelParserPlugins'], additionalBabelPlugins : Options['additionalBabelPlugins'], log : Options['log'], devMode : boolean = false) : Promise<[string[], string]> {
 
 	let ast: t.File;
 	try {
@@ -247,8 +247,13 @@ export async function transformJSCode(source : string, moduleSourceType : boolea
 		babelrc: false,
 		configFile: false,
 		highlightCode: false,
-		compact: true, // doc: All optional newlines and whitespace will be omitted when generating code in compact mode.
-		comments: false,
+		compact: !devMode, // doc: All optional newlines and whitespace will be omitted when generating code in compact mode.
+		comments: devMode,
+		retainLines: devMode,
+		//envName: devMode ? 'development' : 'production', see 'process.env.BABEL_ENV': JSON.stringify(mode),
+
+		//minified,
+		sourceType: moduleSourceType ? 'module' : 'script',
 	});
 
 	if ( transformedScript === null || transformedScript.code == null ) { // == null or undefined
@@ -357,7 +362,7 @@ export async function createJSModule(source : string, moduleSourceType : boolean
 
 	const [ depsList, transformedSource ] = await withCache(compiledCache, [ version, source, filename ], async () => {
 
-		return await transformJSCode(source, moduleSourceType, filename, additionalBabelParserPlugins, additionalBabelPlugins, log);
+		return await transformJSCode(source, moduleSourceType, filename, additionalBabelParserPlugins, additionalBabelPlugins, log, options.devMode);
 	});
 
 	await loadDeps(filename, depsList, options);

src/types.ts

@@ -399,7 +399,14 @@ export type Options = {
  * ```
  */
  	customBlockHandler?(block : CustomBlock, filename : AbstractPath, options : Options) : Promise<CustomBlockCallback | undefined>,
-
+	
+	  
+/**
+ * Set development mode
+ * prevent minification, allow debugger statement, 
+ */
+	devMode?: boolean,
+	  
 }