@videinfra/static-website-builder 1.15.1 → 1.15.3

package/init/test/.env

@@ -1,2 +1,5 @@
 HOST=https://test-global.tld
 FOO=foo-global
+TYPE_BOOL_TRUE=true
+TYPE_BOOL_FALSE=false
+TYPE_NUMBER=123.456

package/init/test/config/config.js

@@ -38,6 +38,9 @@ exports.env = {
         'HOST': 'host',
         'FOO': 'foo',
         'BAR': 'bar',
+        'TYPE_BOOL_TRUE': 'typeBoolTrue',
+        'TYPE_BOOL_FALSE': 'typeBoolFalse',
+        'TYPE_NUMBER': 'typeNumber',
     },
 };
 

package/init/test/src/html/data/global.js

@@ -6,4 +6,5 @@
  */
 module.exports = {
     'world': 'World',
+    'hostFromGlobalJS': process.env.host,
 };

package/init/test/src/html/env.twig

@@ -3,4 +3,19 @@
 
 {% block body %}
     <p>HOST: {{ host }}</p>
+    <p>HOST FROM GLOBAL JS: {{ hostFromGlobalJS }}</p>
+
+    {% if typeBoolTrue %}
+        <p>TYPE_BOOL_TRUE: pass</p>
+    {% else %}
+        <p>TYPE_BOOL_TRUE: fail</p>
+    {% endif %}
+
+    {% if typeBoolFalse %}
+        <p>TYPE_BOOL_FALSE: fail</p>
+    {% else %}
+        <p>TYPE_BOOL_FALSE: pass</p>
+    {% endif %}
+
+    <p>TYPE_NUMBER: {{ typeNumber }}</p>
 {% endblock %}

package/init/test/src/javascripts/main.js

@@ -3,3 +3,6 @@ console.log('Hello from main page!');
 console.log('env.host ==', process.env.host);
 console.log('env.foo ==', process.env.foo);
 console.log('env.bar ==', process.env.bar);
+console.log('env.typeBoolTrue ==', process.env.typeBoolTrue);
+console.log('env.typeBoolFalse ==', process.env.typeBoolFalse);
+console.log('env.typeNumber ==', process.env.typeNumber);

package/init/test/src/stylesheets/env-test.scss

@@ -1,3 +1,27 @@
 .env-test:before {
-    content: $env-host;
+    content: map-get($env, host);
+}
+
+:root {
+    #{ --env-test-type-number }: map-get($env, type-number);
+}
+
+@if map-get($env, type-bool-true) {
+    :root {
+        --env-test-bool-true: true;
+    }
+} @else {
+    :root {
+        --env-test-bool-true: false;
+    }
+}
+
+@if map-get($env, type-bool-false) {
+    :root {
+        --env-test-bool-false: true;
+    }
+} @else {
+    :root {
+        --env-test-bool-false: false;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videinfra/static-website-builder",
-  "version": "1.15.1",
+  "version": "1.15.3",
   "description": "Customizable static site project builder",
   "license": "MIT",
   "engines": {

package/tasks/data/get-data.js

@@ -16,6 +16,11 @@ function getData () {
     const loaders = getConfig.getTaskConfig('data', 'loaders');
     const ignore = getConfig.getTaskConfig('data', 'ignore');
     const group = getConfig.getTaskConfig('data', 'groupByFileName');
+    const envData = getEnvData();
+
+    // Merge into process.env before loading data because these may be used
+    // in data
+    merge(process.env, envData.env);
 
     const data = reduce(folders, (data, folder) => {
         getFileNamesSync(folder).forEach(fileName => {
@@ -62,7 +67,7 @@ function getData () {
     }, {});
 
     // Merge with env variables
-    return merge(data, getEnvData().twig);
+    return merge(data, envData.twig);
 }
 
 

package/tasks/env/get-env.js

@@ -3,7 +3,7 @@ const dotenv = require('dotenv');
 const getConfig = require('../../lib/get-config');
 
 function escapeJSVariable (value) {
-    if (value === true || value === false || !isNaN(value)) {
+    if (value === 'true' || value === 'false' || value === true || value === false || !isNaN(value)) {
         return value;
     } else {
         // Convert to string
@@ -11,15 +11,27 @@ function escapeJSVariable (value) {
     }
 }
 
+function normalizeTwigVariable (value) {
+    if (value === 'true') {
+        return true;
+    } else if (value === 'false') {
+        return false;
+    } else if (value !== '' && !isNaN(value)) {
+        return parseFloat(value);
+    } else {
+        return value;
+    }
+}
+
 function getEnvData () {
     const envVariables = {};
     const twigVariables = {};
-    const scssVariables = {};
+    const scssVariables = { env: {} };
     const jsVariables = {};
+    const envOutVariables = {};
 
     const envFiles = paths.getPathConfig().env.map((path) => paths.getProjectPath(path));
 
-
     dotenv.config({
         // dotenv file order is reversed, values in first file overwrite all other
         // file values
@@ -35,9 +47,10 @@ function getEnvData () {
             const value = envVariables[key];
             const camelCase = map[key];
             const kebabCase = map[key].replace(/([a-z])([A-Z])/g, '$1-$2').replace(/_([a-z])/ig, '-$1').toLowerCase();
-            twigVariables[camelCase] = value;
+            twigVariables[camelCase] = normalizeTwigVariable(value);
+            envOutVariables[camelCase] = value;
             jsVariables[`process.env.${ camelCase }`] = escapeJSVariable(value);
-            scssVariables[`env-${ kebabCase }`] = value;
+            scssVariables.env[kebabCase] = value;
         }
     });
 
@@ -45,6 +58,7 @@ function getEnvData () {
         twig: twigVariables,
         sass: scssVariables,
         js: jsVariables,
+        env: envOutVariables,
     }
 }
 

package/tests/build/build.test.js

@@ -99,16 +99,31 @@ test('.env and .env.local files loaded', () => {
             expect(js.indexOf('console.log("env.host ==","https://test-local.tld")')).not.toBe(-1);
             expect(js.indexOf('console.log("env.foo ==","foo-global")')).not.toBe(-1);
             expect(js.indexOf('console.log("env.bar ==","bar-local")')).not.toBe(-1);
+            expect(js.indexOf('console.log("env.typeBoolTrue ==",!0)')).not.toBe(-1);
+            expect(js.indexOf('console.log("env.typeBoolFalse ==",!1)')).not.toBe(-1);
+            expect(js.indexOf('console.log("env.typeNumber ==",123.456)')).not.toBe(-1);
         }),
         fsPromises.readFile(path.resolve(publicPath, 'env.html'), {'encoding': 'utf8'}).then((html) => {
             expect(html.indexOf('<p>HOST: https://test-local.tld</p>')).not.toBe(-1);
+            expect(html.indexOf('<p>TYPE_BOOL_TRUE: pass</p>')).not.toBe(-1);
+            expect(html.indexOf('<p>TYPE_BOOL_FALSE: pass</p>')).not.toBe(-1);
+            expect(html.indexOf('<p>TYPE_NUMBER: 123.456</p>')).not.toBe(-1);
         }),
         fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/env-test.css'), {'encoding': 'utf8'}).then((css) => {
             expect(css.indexOf('.env-test:before{content:"https://test-local.tld"}')).not.toBe(-1);
+            expect(css.indexOf('--env-test-bool-true:true')).not.toBe(-1);
+            expect(css.indexOf('--env-test-bool-false:false')).not.toBe(-1);
+            expect(css.indexOf('--env-test-type-number:123.456')).not.toBe(-1);
         }),
     ]);
 });
 
+test('process.env available in html/data', () => {
+    return fsPromises.readFile(path.resolve(publicPath, 'env.html'), {'encoding': 'utf8'}).then((html) => {
+        expect(html.indexOf('<p>HOST FROM GLOBAL JS: https://test-local.tld</p>')).not.toBe(-1);
+    });
+});
+
 test('icons generated', () => {
     return fsPromises.readFile(path.resolve(publicPath, 'assets/images/icons.svg'), {'encoding': 'utf8'}).then((svg) => {
         expect(svg.indexOf('<symbol id="example-arrow">')).not.toBe(-1);

package/tests/sass-stringify.test.js

@@ -0,0 +1,24 @@
+const sassStingify = require('../vendor/gulp-sass/sass-stringify');
+
+test('SASS stringify boolean', () => {
+    expect(sassStingify(true)).toEqual('true');
+    expect(sassStingify(false)).toEqual('false');
+});
+
+test('SASS stringify number', () => {
+    expect(sassStingify(0)).toEqual('0');
+    expect(sassStingify(-123)).toEqual('-123');
+    expect(sassStingify(123.456)).toEqual('123.456');
+});
+
+test('SASS stringify falsy', () => {
+    expect(sassStingify(null)).toEqual('false');
+    expect(sassStingify(undefined)).toEqual('false');
+});
+
+test('SASS stringify object', () => {
+    const obj1 = {env: {key1: 'value1', key2: null, key3: undefined, arr: ['a', 123, true] }};
+    const out1 = "$env: (key1: 'value1', key2: false, key3: false, arr: ('a',123,true));";
+
+    expect(sassStingify(obj1)).toEqual(out1);
+});

package/vendor/gulp-sass/index.js

@@ -9,6 +9,7 @@ const replaceExtension = require('replace-ext');
 const stripAnsi = require('strip-ansi');
 const clonedeep = require('lodash.clonedeep');
 const applySourceMap = require('vinyl-sourcemaps-apply');
+const sassStingify = require('./sass-stringify')
 
 const PLUGIN_NAME = 'gulp-sass';
 
@@ -129,19 +130,7 @@ const gulpSass = (options, sync) => {
 
     // Stringiyfy variables
     if (options.data) {
-        const scssVariables = [];
-
-        if (typeof options.data === 'string') {
-            // Assume it's valid SCSS
-            scssVariables.push(options.data);
-        } else {
-            for (let key in options.data) {
-                const value = escapeSCSSVariable(options.data[key]);
-                scssVariables.push(`$${key}: ${value};`);
-            }
-        }
-
-        opts.data = scssVariables.join('') + opts.data;
+        opts.data = sassStingify(options.data) + opts.data;
     }
 
     // We set the file path here so that libsass can correctly resolve import paths

package/vendor/gulp-sass/sass-stringify.js

@@ -0,0 +1,32 @@
+module.exports = function sassStingify (data, isDeep = false) {
+    if (data === null || data === undefined) {
+        return 'false';
+    } else if (data !== '' && (data === 'true' || data === 'false' || data === true || data === false || !isNaN(data))) {
+        // Convert to simple value
+        return String(data);
+    } else if (Array.isArray(data)) {
+        const out = data.map((item) => sassStingify(item, true));
+        return `(${ out })`;
+    } else if (data && typeof data === 'object') {
+        const out = [];
+        for (let key in data) {
+            out.push(`${key}: ${sassStingify(data[key], true)}`);
+        }
+
+        if (out.length) {
+            if (isDeep) {
+                return `(${ out.join(', ') })`;
+            } else {
+                return `$${ out.join(';$') };`;
+            }
+        } else {
+            return '';
+        }
+    } else {
+        // Convert to string
+        return "'" + data.toString()
+            .replace(/\\/g, '\\\\')
+            .replace(/'/g, '\\\'')
+            .replace(/\n/g, '\\n') + "'";
+    }
+};