svelte-preprocess - npm Package Compare versions

Comparing version 3.6.0 to 3.7.0

CHANGELOG.md

@@ -0,1 +1,15 @@
+# [3.7.0](https://github.com/kaisermann/svelte-preprocess/compare/v3.6.0...v3.7.0) (2020-03-29)
+
+
+### Bug Fixes
+
+* avoid reporting 'Cannot find name '{0}'. Did you mean '{1}'?' for reactive variables ([#126](https://github.com/kaisermann/svelte-preprocess/issues/126)) ([a267885](https://github.com/kaisermann/svelte-preprocess/commit/a267885e48a20c913368feafda153fa2389609e1))
+
+
+### Features
+
+* 🎸 add `replace` transformer ([06981f4](https://github.com/kaisermann/svelte-preprocess/commit/06981f410d0427bc75119cebebcb4b35c4b9a7dc))
+
+
+
 # [3.6.0](https://github.com/kaisermann/svelte-preprocess/compare/v3.4.0...v3.6.0) (2020-03-26)
@@ -6,3 +20,2 @@
 
-* 🎸 add babel transformer ([1776917](https://github.com/kaisermann/svelte-preprocess/commit/1776917717a5308b4a631e7a89fa56cf509d365b)), closes [#108](https://github.com/kaisermann/svelte-preprocess/issues/108)
 * add an option to render scss synchronously via renderSync ([#123](https://github.com/kaisermann/svelte-preprocess/issues/123)) ([1c9285d](https://github.com/kaisermann/svelte-preprocess/commit/1c9285d508ec2fd0bea9b9f77a0940c6b3e00b89))
@@ -9,0 +22,0 @@

dist/autoProcess.d.ts

@@ -12,2 +12,3 @@ import { PreprocessorGroup, TransformerOptions, Options } from './types';
     globalStyle?: TransformerOptions<Options.Typescript>;
+    replace?: Options.Replace;
     [languageName: string]: TransformerOptions<any>;
@@ -14,0 +15,0 @@ }

dist/autoProcess.js

@@ -1,1 +0,1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0});const strip_indent_1=__importDefault(require("strip-indent")),package_json_1=require("svelte/package.json"),utils_1=require("./utils"),SVELTE_MAJOR_VERSION=+package_json_1.version[0],ALIAS_OPTION_OVERRIDES={sass:{indentedSyntax:!0}};function autoPreprocess({onBefore:a,aliases:b,markupTagName:d="template",preserve:e=[],...c}={}){d=d.toLocaleLowerCase();const f={},g=c.transformers||c,h=new RegExp(`<${d}([\\s\\S]*?)(?:>([\\s\\S]*)<\\/${d}>|/>)`);b&&b.length&&utils_1.addLanguageAlias(b);const i=(a,b)=>{if(utils_1.isFn(g[b]))return g[b];if(utils_1.isFn(g[a]))return g[a];if(null!=f[b])return f[b];const c={};return"object"==typeof g[a]&&Object.assign(c,g[a]),a!==b&&(Object.assign(c,ALIAS_OPTION_OVERRIDES[b]||null),"object"==typeof g[b]&&Object.assign(c,g[b])),f[b]=c},j=a=>async b=>{const{content:c,filename:d,lang:f,alias:h,dependencies:j}=await utils_1.parseFile(b,a);if(!(e.includes(f)||e.includes(h))){if(f===a)return{code:c,dependencies:j};(!1===g[f]||!1===g[h])&&utils_1.throwUnsupportedError(h,d);const b=await utils_1.runTransformer(f,i(f,h),{content:strip_indent_1.default(c),filename:d});return{...b,dependencies:utils_1.concat(j,b.dependencies)}}},k=j("javascript"),l=j("css"),m=j("html");return{async markup({content:b,filename:c}){utils_1.isFn(a)&&(3<=SVELTE_MAJOR_VERSION&&console.warn("[svelte-preprocess] For svelte >= v3, instead of onBefore(), prefer to prepend a preprocess object to your array of preprocessors"),b=await a({content:b,filename:c}));const d=b.match(h);if(!d)return{code:b};const[e,f,g]=d,i=f.split(/\s+/).filter(Boolean).reduce((a,b)=>{const[c,d]=b.split("=");return a[c]=!d||d.replace(/['"]/g,""),a},{});let{code:j,map:k,dependencies:l}=await m({content:g,attributes:i,filename:c});return j=b.slice(0,d.index)+j+b.slice(d.index+e.length),{code:j,map:k,dependencies:l}},async script({content:a,attributes:b,filename:c}){const d=await k({content:a,attributes:b,filename:c});if(null==d)return;let{code:e,map:f,dependencies:h,diagnostics:i}=d;if(g.babel){const a=await utils_1.runTransformer("babel",g.babel,{content:e,map:f,filename:c});e=a.code,f=a.map,h=utils_1.concat(h,a.dependencies),i=utils_1.concat(i,a.diagnostics)}return{code:e,map:f,dependencies:h,diagnostics:i}},async style({content:a,attributes:b,filename:c}){const d=await l({content:a,attributes:b,filename:c});if(null==d)return;let{code:e,map:f,dependencies:h}=d;if(g.postcss){const a=await utils_1.runTransformer("postcss",g.postcss,{content:e,map:f,filename:c});e=a.code,f=a.map,h=utils_1.concat(h,a.dependencies)}if(b.global){const a=await utils_1.runTransformer("globalStyle",null,{content:e,map:f,filename:c});e=a.code,f=a.map}return{code:e,map:f,dependencies:h}}}}exports.autoPreprocess=autoPreprocess;
+"use strict";var __importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0});const strip_indent_1=__importDefault(require("strip-indent")),package_json_1=require("svelte/package.json"),utils_1=require("./utils"),SVELTE_MAJOR_VERSION=+package_json_1.version[0],ALIAS_OPTION_OVERRIDES={sass:{indentedSyntax:!0}};function autoPreprocess({onBefore:a,aliases:b,markupTagName:d="template",preserve:e=[],...c}={}){d=d.toLocaleLowerCase();const f={},g=c.transformers||c,h=new RegExp(`<${d}([\\s\\S]*?)(?:>([\\s\\S]*)<\\/${d}>|/>)`);b&&b.length&&utils_1.addLanguageAlias(b);const i=(a,b)=>{if(utils_1.isFn(g[b]))return g[b];if(utils_1.isFn(g[a]))return g[a];if(null!=f[b])return f[b];const c={};return"object"==typeof g[a]&&Object.assign(c,g[a]),a!==b&&(Object.assign(c,ALIAS_OPTION_OVERRIDES[b]||null),"object"==typeof g[b]&&Object.assign(c,g[b])),f[b]=c},j=a=>async b=>{const{content:c,filename:d,lang:f,alias:h,dependencies:j}=await utils_1.parseFile(b,a);if(!(e.includes(f)||e.includes(h))){if(f===a)return{code:c,dependencies:j};(!1===g[f]||!1===g[h])&&utils_1.throwUnsupportedError(h,d);const b=await utils_1.runTransformer(f,i(f,h),{content:strip_indent_1.default(c),filename:d});return{...b,dependencies:utils_1.concat(j,b.dependencies)}}},k=j("javascript"),l=j("css"),m=j("html");return{async markup({content:b,filename:c}){if(utils_1.isFn(a)&&(3<=SVELTE_MAJOR_VERSION&&console.warn("[svelte-preprocess] For svelte >= v3, instead of onBefore(), prefer to prepend a preprocess object to your array of preprocessors"),b=await a({content:b,filename:c})),g.replace){const a=await utils_1.runTransformer("replace",g.replace,{content:b,filename:c});b=a.code}const d=b.match(h);if(!d)return{code:b};const[e,f,i]=d,j=f.split(/\s+/).filter(Boolean).reduce((a,b)=>{const[c,d]=b.split("=");return a[c]=!d||d.replace(/['"]/g,""),a},{});let{code:k,map:l,dependencies:n}=await m({content:i,attributes:j,filename:c});return k=b.slice(0,d.index)+k+b.slice(d.index+e.length),{code:k,map:l,dependencies:n}},async script({content:a,attributes:b,filename:c}){const d=await k({content:a,attributes:b,filename:c});if(null==d)return;let{code:e,map:f,dependencies:h,diagnostics:i}=d;if(g.babel){const a=await utils_1.runTransformer("babel",g.babel,{content:e,map:f,filename:c});e=a.code,f=a.map,h=utils_1.concat(h,a.dependencies),i=utils_1.concat(i,a.diagnostics)}return{code:e,map:f,dependencies:h,diagnostics:i}},async style({content:a,attributes:b,filename:c}){const d=await l({content:a,attributes:b,filename:c});if(null==d)return;let{code:e,map:f,dependencies:h}=d;if(g.postcss){const a=await utils_1.runTransformer("postcss",g.postcss,{content:e,map:f,filename:c});e=a.code,f=a.map,h=utils_1.concat(h,a.dependencies)}if(b.global){const a=await utils_1.runTransformer("globalStyle",null,{content:e,map:f,filename:c});e=a.code,f=a.map}return{code:e,map:f,dependencies:h}}}}exports.autoPreprocess=autoPreprocess;

dist/index.d.ts

@@ -13,1 +13,2 @@ import { autoPreprocess } from './autoProcess';
 export { default as babel } from './processors/babel';
+export { default as replace } from './processors/replace';

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const autoProcess_1=require("./autoProcess");exports.default=exports=module.exports=autoProcess_1.autoPreprocess;var pug_1=require("./processors/pug");exports.pug=pug_1.default;var coffeescript_1=require("./processors/coffeescript");exports.coffeescript=coffeescript_1.default;var typescript_1=require("./processors/typescript");exports.typescript=typescript_1.default;var less_1=require("./processors/less");exports.less=less_1.default;var scss_1=require("./processors/scss");exports.scss=scss_1.default,exports.sass=scss_1.default;var stylus_1=require("./processors/stylus");exports.stylus=stylus_1.default;var postcss_1=require("./processors/postcss");exports.postcss=postcss_1.default;var globalStyle_1=require("./processors/globalStyle");exports.globalStyle=globalStyle_1.default;var babel_1=require("./processors/babel");exports.babel=babel_1.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const autoProcess_1=require("./autoProcess");exports.default=exports=module.exports=autoProcess_1.autoPreprocess;var pug_1=require("./processors/pug");exports.pug=pug_1.default;var coffeescript_1=require("./processors/coffeescript");exports.coffeescript=coffeescript_1.default;var typescript_1=require("./processors/typescript");exports.typescript=typescript_1.default;var less_1=require("./processors/less");exports.less=less_1.default;var scss_1=require("./processors/scss");exports.scss=scss_1.default,exports.sass=scss_1.default;var stylus_1=require("./processors/stylus");exports.stylus=stylus_1.default;var postcss_1=require("./processors/postcss");exports.postcss=postcss_1.default;var globalStyle_1=require("./processors/globalStyle");exports.globalStyle=globalStyle_1.default;var babel_1=require("./processors/babel");exports.babel=babel_1.default;var replace_1=require("./processors/replace");exports.replace=replace_1.default;

dist/transformers/typescript.js

@@ -1,1 +0,1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0});const fs_1=require("fs"),path_1=require("path"),typescript_1=__importDefault(require("typescript"));function createFormatDiagnosticsHost(a){return{getCanonicalFileName:a=>a,getCurrentDirectory:()=>a,getNewLine:()=>typescript_1.default.sys.newLine}}function formatDiagnostics(a,b){return Array.isArray(a)?typescript_1.default.formatDiagnosticsWithColorAndContext(a,createFormatDiagnosticsHost(b)):typescript_1.default.formatDiagnostic(a,createFormatDiagnosticsHost(b))}function getFilenameExtension(a){a=path_1.basename(a);const b=a.lastIndexOf(".");return 0>=b?"":a.substr(b+1)}function isSvelteFile(a){const b=getFilenameExtension(a);return"svelte"===b||"html"===b}const IMPORTEE_PATTERN=/['"](.*?)['"]/;function isValidSvelteImportDiagnostic(a,b){if(2307!==b.code)return!0;const c=b.messageText.match(IMPORTEE_PATTERN);if(!c)return!0;let[,d]=c;return!("."!==d[0])&&(!isSvelteFile(d)||(d=path_1.resolve(path_1.dirname(a),d),!1===fs_1.existsSync(d)))}const importTransformer=a=>{const b=c=>typescript_1.default.isImportDeclaration(c)?typescript_1.default.createImportDeclaration(c.decorators,c.modifiers,c.importClause,c.moduleSpecifier):typescript_1.default.visitEachChild(c,a=>b(a),a);return a=>typescript_1.default.visitNode(a,b)},TS_TRANSFORMERS={before:[importTransformer]};function compileFileFromMemory(a,{filename:b,content:c}){let d,e=c;const f=typescript_1.default.createCompilerHost(a,!0),g=typescript_1.default.sys.resolvePath(b),h=a=>typescript_1.default.sys.resolvePath(a)===g,i={fileExists:a=>h(a)||f.fileExists(a),getCanonicalFileName:a=>h(a)?typescript_1.default.sys.useCaseSensitiveFileNames?a:a.toLowerCase():f.getCanonicalFileName(a),getSourceFile:(a,b,c,d)=>h(a)?typescript_1.default.createSourceFile(g,e,b):f.getSourceFile(a,b,c,d),readFile:a=>h(a)?c:f.readFile(a),writeFile:(a,b)=>{a.endsWith(".map")?d=b:e=b},directoryExists:f.directoryExists&&f.directoryExists.bind(f),getCurrentDirectory:f.getCurrentDirectory.bind(f),getDirectories:f.getDirectories.bind(f),getNewLine:f.getNewLine.bind(f),getDefaultLibFileName:f.getDefaultLibFileName.bind(f),resolveModuleNames:f.resolveModuleNames&&f.resolveModuleNames.bind(f),useCaseSensitiveFileNames:f.useCaseSensitiveFileNames.bind(f)},j=typescript_1.default.createProgram([g],a,i),k=j.emit(void 0,void 0,void 0,void 0,TS_TRANSFORMERS),l=[...k.diagnostics,...typescript_1.default.getPreEmitDiagnostics(j)].filter(a=>isValidSvelteImportDiagnostic(b,a));return{code:e,map:d,diagnostics:l}}const transformer=({content:a,filename:b,options:c})=>{const d={moduleResolution:"node",target:"es6"};let e=process.cwd();if(!1!==c.tsconfigFile||c.tsconfigDirectory){const a=c.tsconfigDirectory||path_1.dirname(b),f=c.tsconfigFile||typescript_1.default.findConfigFile(a,typescript_1.default.sys.fileExists);if("string"==typeof f){e=path_1.dirname(f);const{error:a,config:b}=typescript_1.default.readConfigFile(f,typescript_1.default.sys.readFile);if(a)throw new Error(formatDiagnostics(a,e));Object.assign(d,b.compilerOptions)}}Object.assign(d,c.compilerOptions);const{errors:f,options:g}=typescript_1.default.convertCompilerOptionsFromJson(d,e);if(f.length)throw new Error(formatDiagnostics(f,e));const h={...g,allowNonTsExtensions:!0};if(h.target===typescript_1.default.ScriptTarget.ES3||h.target===typescript_1.default.ScriptTarget.ES5)throw new Error(`Svelte only supports es6+ syntax. Set your 'compilerOptions.target' to 'es6' or higher.`);let i,j,k;if(c.transpileOnly||h.transpileOnly?({outputText:i,sourceMapText:j,diagnostics:k}=typescript_1.default.transpileModule(a,{fileName:b,compilerOptions:h,reportDiagnostics:!1!==c.reportDiagnostics,transformers:TS_TRANSFORMERS})):({code:i,map:j,diagnostics:k}=compileFileFromMemory(h,{filename:b,content:a})),0<k.length){const a=formatDiagnostics(k,e);console.log(a)}return{code:i,map:j,diagnostics:k,dependencies:[]}};exports.default=transformer;
+"use strict";var __importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0});const fs_1=require("fs"),path_1=require("path"),typescript_1=__importDefault(require("typescript"));function createFormatDiagnosticsHost(a){return{getCanonicalFileName:a=>a,getCurrentDirectory:()=>a,getNewLine:()=>typescript_1.default.sys.newLine}}function formatDiagnostics(a,b){return Array.isArray(a)?typescript_1.default.formatDiagnosticsWithColorAndContext(a,createFormatDiagnosticsHost(b)):typescript_1.default.formatDiagnostic(a,createFormatDiagnosticsHost(b))}function getFilenameExtension(a){a=path_1.basename(a);const b=a.lastIndexOf(".");return 0>=b?"":a.substr(b+1)}function isSvelteFile(a){const b=getFilenameExtension(a);return"svelte"===b||"html"===b}const IMPORTEE_PATTERN=/['"](.*?)['"]/;function isValidSvelteImportDiagnostic(a,b){if(2307!==b.code)return!0;const c=b.messageText.match(IMPORTEE_PATTERN);if(!c)return!0;let[,d]=c;return!("."!==d[0])&&(!isSvelteFile(d)||(d=path_1.resolve(path_1.dirname(a),d),!1===fs_1.existsSync(d)))}const importTransformer=a=>{const b=c=>typescript_1.default.isImportDeclaration(c)?typescript_1.default.createImportDeclaration(c.decorators,c.modifiers,c.importClause,c.moduleSpecifier):typescript_1.default.visitEachChild(c,a=>b(a),a);return a=>typescript_1.default.visitNode(a,b)},TS_TRANSFORMERS={before:[importTransformer]},TS2552_REGEX=/Cannot find name '\$([a-zA-Z0-9_]+)'. Did you mean '([a-zA-Z0-9_]+)'\?/i;function isValidSvelteReactiveValueDiagnostic(a,b){if(2552!==b.code)return!0;if(!isSvelteFile(a))return!0;if(!b.messageText.includes("$"))return!0;const[,c,d]=b.messageText.match(TS2552_REGEX)||[];return!(c&&d&&c===d)}function compileFileFromMemory(a,{filename:b,content:c}){let d,e=c;const f=typescript_1.default.createCompilerHost(a,!0),g=typescript_1.default.sys.resolvePath(b),h=a=>typescript_1.default.sys.resolvePath(a)===g,i={fileExists:a=>h(a)||f.fileExists(a),getCanonicalFileName:a=>h(a)?typescript_1.default.sys.useCaseSensitiveFileNames?a:a.toLowerCase():f.getCanonicalFileName(a),getSourceFile:(a,b,c,d)=>h(a)?typescript_1.default.createSourceFile(g,e,b):f.getSourceFile(a,b,c,d),readFile:a=>h(a)?c:f.readFile(a),writeFile:(a,b)=>{a.endsWith(".map")?d=b:e=b},directoryExists:f.directoryExists&&f.directoryExists.bind(f),getCurrentDirectory:f.getCurrentDirectory.bind(f),getDirectories:f.getDirectories.bind(f),getNewLine:f.getNewLine.bind(f),getDefaultLibFileName:f.getDefaultLibFileName.bind(f),resolveModuleNames:f.resolveModuleNames&&f.resolveModuleNames.bind(f),useCaseSensitiveFileNames:f.useCaseSensitiveFileNames.bind(f)},j=typescript_1.default.createProgram([g],a,i),k=j.emit(void 0,void 0,void 0,void 0,TS_TRANSFORMERS),l=[...k.diagnostics,...typescript_1.default.getPreEmitDiagnostics(j)].filter(a=>isValidSvelteImportDiagnostic(b,a)&&isValidSvelteReactiveValueDiagnostic(b,a));return{code:e,map:d,diagnostics:l}}const transformer=({content:a,filename:b,options:c})=>{const d={moduleResolution:"node",target:"es6"};let e=process.cwd();if(!1!==c.tsconfigFile||c.tsconfigDirectory){const a=c.tsconfigDirectory||path_1.dirname(b),f=c.tsconfigFile||typescript_1.default.findConfigFile(a,typescript_1.default.sys.fileExists);if("string"==typeof f){e=path_1.dirname(f);const{error:a,config:b}=typescript_1.default.readConfigFile(f,typescript_1.default.sys.readFile);if(a)throw new Error(formatDiagnostics(a,e));Object.assign(d,b.compilerOptions)}}Object.assign(d,c.compilerOptions);const{errors:f,options:g}=typescript_1.default.convertCompilerOptionsFromJson(d,e);if(f.length)throw new Error(formatDiagnostics(f,e));const h={...g,allowNonTsExtensions:!0};if(h.target===typescript_1.default.ScriptTarget.ES3||h.target===typescript_1.default.ScriptTarget.ES5)throw new Error(`Svelte only supports es6+ syntax. Set your 'compilerOptions.target' to 'es6' or higher.`);let i,j,k;if(c.transpileOnly||h.transpileOnly?({outputText:i,sourceMapText:j,diagnostics:k}=typescript_1.default.transpileModule(a,{fileName:b,compilerOptions:h,reportDiagnostics:!1!==c.reportDiagnostics,transformers:TS_TRANSFORMERS})):({code:i,map:j,diagnostics:k}=compileFileFromMemory(h,{filename:b,content:a})),0<k.length){const a=formatDiagnostics(k,e);console.log(a)}return{code:i,map:j,diagnostics:k,dependencies:[]}};exports.default=transformer;

dist/types/index.d.ts

@@ -1,5 +0,5 @@
-import { Processed, Preprocessor } from 'svelte/types/compiler/preprocess';
+import { Processed as SvelteProcessed, Preprocessor } from 'svelte/types/compiler/preprocess';
 import * as Options from './options';
 export { Options };
-export { Processed, PreprocessorGroup, Preprocessor, } from 'svelte/types/compiler/preprocess';
+export { Processed as SvelteProcessed, PreprocessorGroup, Preprocessor, } from 'svelte/types/compiler/preprocess';
 export declare type PreprocessorArgs = Preprocessor extends (options: infer T) => any ? T : never;
@@ -13,6 +13,6 @@ export interface TransformerArgs<T> {
 }
-export declare type ProcessedScript = Processed & {
-    diagnostics?: unknown[];
+export declare type Processed = SvelteProcessed & {
+    diagnostics?: any[];
 };
 export declare type Transformer<T> = (args: TransformerArgs<T>) => Processed | Promise<Processed>;
 export declare type TransformerOptions<T> = boolean | Record<string, any> | Transformer<T>;

dist/types/options.d.ts

@@ -6,2 +6,3 @@ import postcss from 'postcss';
 import { TransformOptions as BabelOptions } from '@babel/core';
+export declare type Replace = Array<[RegExp, (substring: string, ...args: any[]) => string | string]>;
 export interface Coffeescript {
@@ -8,0 +9,0 @@ inlineMap?: boolean;

dist/utils.d.ts

@@ -26,3 +26,3 @@ import { TransformerArgs, TransformerOptions } from './types';
 };
-export declare const runTransformer: (name: string, options: TransformerOptions<any>, { content, map, filename }: TransformerArgs<any>) => Promise<any>;
+export declare const runTransformer: (name: string, options: TransformerOptions<any>, { content, map, filename }: TransformerArgs<any>) => Promise<import("./types").Processed | Promise<import("./types").Processed>>;
 export declare const importAny: (...modules: string[]) => Promise<any>;

package.json

 {
   "name": "svelte-preprocess",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -15,2 +15,3 @@ # Svelte Preprocess
   - [Modern Javascript syntax](#modern-javascript-syntax)
+  - [Replace values](#replace-values)
 - [Usage](#usage)
@@ -171,2 +172,40 @@ - [With `rollup-plugin-svelte`](#with-rollup-plugin-svelte)
 
+### Replace values
+
+Replace a set of string patterns in your components markup by passing an array of `[RegExp, ReplaceFn | string]`, the same arguments received by the `String.prototype.replace` method.
+
+In example, to add `process.env.{prop}` value resolution and a custom `@if/@endif` if-block shorthand, one could do:
+
+```js
+sveltePreprocess({
+  replace: [
+    [
+      /process\.env\.(\w+)/g,
+      (_:, prop) => JSON.stringify(process.env[prop]),
+    ],
+    [/@if\s*\((.*?)\)$/gim, '{#if $1}'],
+    [/@endif$/gim, '{/if}'],
+  ],
+});
+```
+
+Which allows to write your component like:
+
+```html
+@if(process.env.NODE_ENV !== 'development')
+<h1>Production environment!</h1>
+@endif
+```
+
+And the result, for a `NODE_ENV = 'production'` would be:
+
+```svelte
+{#if "production" !== 'development'}
+  <h1>Production environment!</h1>
+{/if}
+```
+
+_Note<sup>1</sup>: the `replace` transformer is executed before any other transformer._
+_Note<sup>2</sup>: it is **NOT** recommended to modify Svelte's syntax for a number of reasons._
+
 ## Usage
@@ -323,2 +362,3 @@
 - `coffeescript` or `coffee`
+- `typescript`
 - `less`
@@ -328,3 +368,5 @@ - `scss` or `sass`
 - `postcss`
+- `babel`
 - `globalStyle` - transform `<style global>` into global styles.
+- `replace` - replace string patterns in your markup.
 
@@ -403,3 +445,3 @@ ```js
   scss: {
-    renderSync: true
+    renderSync: true,
   },
@@ -460,2 +502,24 @@
   },
+
+  /** Replace string patterns in your markup */
+  replace: [
+    // Replace `process.env.{prop}` with the actual stringified value.
+    [
+      /process\.env\.(\w+)/g,
+      (_: string, match: string) => JSON.stringify(process.env[match]),
+    ],
+    // Example of "supporting" a blade-like syntax:
+    [/@if\s*\((.*?)\)$/gim, '{#if $1}'],
+    [/@elseif\s*\((.*?)\)$/gim, '{:else if $1}'],
+    [/@else$/gim, '{:else}'],
+    [/@endif$/gim, '{/if}'],
+    [/@each\s*\((.*?)\)$/gim, '{#each $1}'],
+    [/@endeach$/gim, '{/each}'],
+    [/@await\s*\((.*?)\)$/gim, '{#await $1}'],
+    [/@then\s*(?:\((.*?)\))?$/gim, '{:then $1}'],
+    [/@catch\s*(?:\((.*?)\))?$$/gim, '{:catch $1}'],
+    [/@endawait$/gim, '{/await}'],
+    [/@debug\s*\((.*?)\)$/gim, '{@debug $1}'],
+    [/@html\s*\((.*?)\)$/gim, '{@html $1}'],
+  ];
 };
@@ -462,0 +526,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66461

increased by6.49%

Number of package files

53

increased by8.16%

Lines of code

240

increased by3.9%

Number of lines in readme file

596

increased by12.03%

Worsened metrics

Number of low quality alerts

23

increased by4.55%

No dependency changes