mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-07 21:52:29 +03:00
add cache to puppeteer jest tests
This commit is contained in:
Rene
+1
-1
@@ -1,5 +1,5 @@
|
||||
node_modules
|
||||
coverage
|
||||
dist
|
||||
build
|
||||
__build__
|
||||
types
|
||||
+1
-1
@@ -69,7 +69,7 @@ module.exports = {
|
||||
'no-void': 'off',
|
||||
'no-empty-function': 'off',
|
||||
'no-new-func': 'off',
|
||||
'import/no-unresolved': ['error', { ignore: ['./build/build.html$'] }],
|
||||
'import/no-unresolved': ['error', { ignore: ['./__build__/build.html$'] }],
|
||||
},
|
||||
globals: {
|
||||
page: true,
|
||||
|
||||
+128
-79
@@ -1,5 +1,6 @@
|
||||
const PuppeteerEnvironment = require('jest-environment-puppeteer');
|
||||
const fs = require('fs');
|
||||
const crypto = require('crypto');
|
||||
const path = require('path');
|
||||
const del = require('del');
|
||||
const rollup = require('rollup');
|
||||
@@ -12,26 +13,10 @@ const rollupInputHtmlFile = 'index.html';
|
||||
const rollupInputFile = 'index';
|
||||
const rollupOutputHtmlFile = 'build.html';
|
||||
const rollupOutputFile = 'build';
|
||||
const rollupOutputDir = 'build';
|
||||
const rollupOutputDir = '__build__';
|
||||
const rollupNodeEnv = 'build';
|
||||
|
||||
const getRollupInfos = (testPath) => {
|
||||
const projectRootPath = path.resolve(__dirname, resolve.projectRoot);
|
||||
const testDir = path.dirname(testPath);
|
||||
const input = path.resolve(testDir, rollupInputFile);
|
||||
const dist = path.resolve(testDir, rollupOutputDir);
|
||||
const file = rollupOutputFile;
|
||||
const testName = path.basename(testDir);
|
||||
|
||||
return {
|
||||
projectRootPath,
|
||||
testDir,
|
||||
testName,
|
||||
input,
|
||||
dist,
|
||||
file,
|
||||
};
|
||||
};
|
||||
const cacheFilePrefix = 'jest-puppeteer-overlayscrollbars-cache-';
|
||||
const encoding = 'utf8';
|
||||
|
||||
const makeHtmlAttributes = (attributes) => {
|
||||
if (!attributes) {
|
||||
@@ -69,76 +54,139 @@ const genHtmlTemplateFunc = (content) => ({ attributes, files, meta, publicPath,
|
||||
</html>`;
|
||||
};
|
||||
|
||||
const setupRollupTest = async (testPath) => {
|
||||
const { projectRootPath, input, dist, file, testName, testDir } = getRollupInfos(testPath);
|
||||
const testPathSplit = path.relative(projectRootPath, testPath).split(path.sep);
|
||||
|
||||
if (testPathSplit.length > 0) {
|
||||
const [project] = testPathSplit;
|
||||
const env = process.env.NODE_ENV;
|
||||
|
||||
try {
|
||||
process.env.NODE_ENV = rollupNodeEnv;
|
||||
const htmlFilePath = path.resolve(testDir, rollupInputHtmlFile);
|
||||
const htmlFileContent = fs.existsSync(htmlFilePath) ? fs.readFileSync(htmlFilePath, 'utf8') : null;
|
||||
let rollupConfigObj = rollupConfig(
|
||||
{ 'config-project': project },
|
||||
{
|
||||
overwrite: {
|
||||
input,
|
||||
dist,
|
||||
file,
|
||||
types: null,
|
||||
minVersions: false,
|
||||
esmBuild: false,
|
||||
sourcemap: false,
|
||||
pipeline: [
|
||||
rollupPluginStyles(),
|
||||
...rollupConfig.defaults.pipeline,
|
||||
rollupPluginHtml({
|
||||
title: `Jest-Puppeteer: ${testName}`,
|
||||
fileName: rollupOutputHtmlFile,
|
||||
template: genHtmlTemplateFunc(htmlFileContent),
|
||||
meta: [{ charset: 'utf-8' }, { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }],
|
||||
}),
|
||||
],
|
||||
},
|
||||
silent: true,
|
||||
fast: true,
|
||||
check: false,
|
||||
}
|
||||
);
|
||||
|
||||
if (!Array.isArray(rollupConfigObj)) {
|
||||
rollupConfigObj = [rollupConfigObj];
|
||||
const getAllFilesFrom = (dir, except) => {
|
||||
const result = [];
|
||||
fs.readdirSync(dir).forEach((dirOrFile) => {
|
||||
if (dirOrFile !== except) {
|
||||
const dirOrFileResolved = path.resolve(dir, dirOrFile);
|
||||
if (fs.statSync(dirOrFileResolved).isDirectory()) {
|
||||
result.push(...getAllFilesFrom(dirOrFileResolved));
|
||||
}
|
||||
result.push(dirOrFileResolved);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
for (let i = 0; i < rollupConfigObj.length; i++) {
|
||||
const inputConfig = rollupConfigObj[i];
|
||||
let { output } = inputConfig;
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
const bundle = await rollup.rollup(inputConfig);
|
||||
const createCacheObj = (testDir) => {
|
||||
const testFiles = getAllFilesFrom(testDir, rollupOutputDir);
|
||||
const obj = {};
|
||||
|
||||
if (!Array.isArray(output)) {
|
||||
output = [output];
|
||||
testFiles.forEach((dir) => {
|
||||
obj[dir] = crypto.createHash('md5').update(fs.readFileSync(dir, encoding), encoding).digest('hex');
|
||||
});
|
||||
|
||||
return obj;
|
||||
};
|
||||
|
||||
const filesChanged = (cacheDir, testDir) => {
|
||||
let result = true;
|
||||
const cacheObjString = JSON.stringify(createCacheObj(testDir));
|
||||
const getCacheFile = path.resolve(cacheDir, cacheFilePrefix + crypto.createHash('md5').update(testDir, encoding).digest('hex'));
|
||||
if (fs.existsSync(getCacheFile)) {
|
||||
result = cacheObjString !== fs.readFileSync(getCacheFile, encoding);
|
||||
}
|
||||
|
||||
if (result) {
|
||||
fs.writeFileSync(getCacheFile, cacheObjString);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const getRollupInfos = (testPath) => {
|
||||
const projectRootPath = path.resolve(__dirname, resolve.projectRoot);
|
||||
const testDir = path.dirname(testPath);
|
||||
const input = path.resolve(testDir, rollupInputFile);
|
||||
const dist = path.resolve(testDir, rollupOutputDir);
|
||||
const file = rollupOutputFile;
|
||||
const testName = path.basename(testDir);
|
||||
|
||||
return {
|
||||
projectRootPath,
|
||||
testDir,
|
||||
testName,
|
||||
input,
|
||||
dist,
|
||||
file,
|
||||
};
|
||||
};
|
||||
|
||||
const setupRollupTest = async (testPath, cache, cacheDir) => {
|
||||
const { projectRootPath, input, dist, file, testName, testDir } = getRollupInfos(testPath);
|
||||
|
||||
if (!cache || filesChanged(cacheDir, testDir)) {
|
||||
const testPathSplit = path.relative(projectRootPath, testPath).split(path.sep);
|
||||
if (testPathSplit.length > 0) {
|
||||
const [project] = testPathSplit;
|
||||
const env = process.env.NODE_ENV;
|
||||
|
||||
try {
|
||||
process.env.NODE_ENV = rollupNodeEnv;
|
||||
const htmlFilePath = path.resolve(testDir, rollupInputHtmlFile);
|
||||
const htmlFileContent = fs.existsSync(htmlFilePath) ? fs.readFileSync(htmlFilePath, 'utf8') : null;
|
||||
let rollupConfigObj = rollupConfig(
|
||||
{ 'config-project': project },
|
||||
{
|
||||
overwrite: {
|
||||
input,
|
||||
dist,
|
||||
file,
|
||||
types: null,
|
||||
minVersions: false,
|
||||
esmBuild: false,
|
||||
sourcemap: false,
|
||||
name: testName,
|
||||
pipeline: [
|
||||
rollupPluginStyles(),
|
||||
...rollupConfig.defaults.pipeline,
|
||||
rollupPluginHtml({
|
||||
title: `Jest-Puppeteer: ${testName}`,
|
||||
fileName: rollupOutputHtmlFile,
|
||||
template: genHtmlTemplateFunc(htmlFileContent),
|
||||
meta: [{ charset: 'utf-8' }, { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }],
|
||||
}),
|
||||
],
|
||||
},
|
||||
silent: true,
|
||||
fast: true,
|
||||
check: false,
|
||||
}
|
||||
);
|
||||
|
||||
if (!Array.isArray(rollupConfigObj)) {
|
||||
rollupConfigObj = [rollupConfigObj];
|
||||
}
|
||||
|
||||
for (let v = 0; v < output.length; v++) {
|
||||
const outputConfig = output[i];
|
||||
for (let i = 0; i < rollupConfigObj.length; i++) {
|
||||
const inputConfig = rollupConfigObj[i];
|
||||
let { output } = inputConfig;
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
await bundle.write(outputConfig);
|
||||
const bundle = await rollup.rollup(inputConfig);
|
||||
|
||||
if (!Array.isArray(output)) {
|
||||
output = [output];
|
||||
}
|
||||
|
||||
for (let v = 0; v < output.length; v++) {
|
||||
const outputConfig = output[i];
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
await bundle.write(outputConfig);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
process.env.NODE_ENV = env;
|
||||
}
|
||||
process.env.NODE_ENV = env;
|
||||
}
|
||||
};
|
||||
|
||||
const cleanupRollupTest = (testPath) => {
|
||||
const { dist } = getRollupInfos(testPath);
|
||||
del(dist);
|
||||
const cleanupRollupTest = (testPath, cache) => {
|
||||
if (!cache) {
|
||||
const { dist } = getRollupInfos(testPath);
|
||||
del(dist);
|
||||
}
|
||||
};
|
||||
|
||||
class PuppeteerRollupEnvironment extends PuppeteerEnvironment {
|
||||
@@ -146,15 +194,16 @@ class PuppeteerRollupEnvironment extends PuppeteerEnvironment {
|
||||
super(config, context);
|
||||
|
||||
this.ctx = context;
|
||||
this.cfg = config;
|
||||
}
|
||||
|
||||
async setup() {
|
||||
await setupRollupTest(this.ctx.testPath);
|
||||
await setupRollupTest(this.ctx.testPath, this.cfg.cache, this.cfg.cacheDirectory);
|
||||
await super.setup();
|
||||
}
|
||||
|
||||
async teardown() {
|
||||
cleanupRollupTest(this.ctx.testPath);
|
||||
cleanupRollupTest(this.ctx.testPath, this.cfg.cache);
|
||||
await super.teardown();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Jest-Puppeteer: Environment</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="a"></div>
|
||||
<div id="b"></div>
|
||||
<div id="c"></div>
|
||||
<div id="d"></div>
|
||||
|
||||
<script src="build.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,559 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
||||
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
||||
(global = global || self, factory(global.Environment = {}));
|
||||
}(this, (function (exports) { 'use strict';
|
||||
|
||||
function _classPrivateFieldGet(receiver, privateMap) {
|
||||
var descriptor = privateMap.get(receiver);
|
||||
|
||||
if (!descriptor) {
|
||||
throw new TypeError("attempted to get private field on non-instance");
|
||||
}
|
||||
|
||||
if (descriptor.get) {
|
||||
return descriptor.get.call(receiver);
|
||||
}
|
||||
|
||||
return descriptor.value;
|
||||
}
|
||||
|
||||
var classPrivateFieldGet = _classPrivateFieldGet;
|
||||
|
||||
function _classPrivateFieldSet(receiver, privateMap, value) {
|
||||
var descriptor = privateMap.get(receiver);
|
||||
|
||||
if (!descriptor) {
|
||||
throw new TypeError("attempted to set private field on non-instance");
|
||||
}
|
||||
|
||||
if (descriptor.set) {
|
||||
descriptor.set.call(receiver, value);
|
||||
} else {
|
||||
if (!descriptor.writable) {
|
||||
throw new TypeError("attempted to set read only private field");
|
||||
}
|
||||
|
||||
descriptor.value = value;
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
var classPrivateFieldSet = _classPrivateFieldSet;
|
||||
|
||||
function isNumber(obj) {
|
||||
return typeof obj === 'number';
|
||||
}
|
||||
function isString(obj) {
|
||||
return typeof obj === 'string';
|
||||
}
|
||||
function isFunction(obj) {
|
||||
return typeof obj === 'function';
|
||||
}
|
||||
function isUndefined(obj) {
|
||||
return obj === undefined;
|
||||
}
|
||||
function isArray(obj) {
|
||||
return Array.isArray(obj);
|
||||
}
|
||||
function isArrayLike(obj) {
|
||||
var length = !!obj && obj.length;
|
||||
return isArray(obj) || !isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0;
|
||||
}
|
||||
|
||||
function each(source, callback) {
|
||||
if (isArrayLike(source)) {
|
||||
for (var i = 0; i < source.length; i++) {
|
||||
if (callback(source[i], i, source) === false) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (source) {
|
||||
each(Object.keys(source), function (key) {
|
||||
return callback(source[key], key, source);
|
||||
});
|
||||
}
|
||||
|
||||
return source;
|
||||
}
|
||||
var from = function from(arr) {
|
||||
if (Array.from) {
|
||||
return Array.from(arr);
|
||||
}
|
||||
|
||||
var result = [];
|
||||
each(arr, function (elm) {
|
||||
result.push(elm);
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
var hasOwnProperty = function hasOwnProperty(obj, prop) {
|
||||
return Object.prototype.hasOwnProperty.call(obj, prop);
|
||||
};
|
||||
var keys = function keys(obj) {
|
||||
return obj ? Object.keys(obj) : [];
|
||||
};
|
||||
|
||||
function getSetProp(topLeft, fallback, elm, value) {
|
||||
if (isUndefined(value)) {
|
||||
return elm ? elm[topLeft] : fallback;
|
||||
}
|
||||
|
||||
elm && (elm[topLeft] = value);
|
||||
}
|
||||
var removeAttr = function removeAttr(elm, attrName) {
|
||||
elm == null ? void 0 : elm.removeAttribute(attrName);
|
||||
};
|
||||
function scrollLeft(elm, value) {
|
||||
return getSetProp('scrollLeft', 0, elm, value);
|
||||
}
|
||||
|
||||
var rnothtmlwhite = /[^\x20\t\r\n\f]+/g;
|
||||
|
||||
var classListAction = function classListAction(elm, className, action) {
|
||||
var clazz;
|
||||
var i = 0;
|
||||
var result = false;
|
||||
|
||||
if (elm && isString(className)) {
|
||||
var classes = className.match(rnothtmlwhite) || [];
|
||||
result = classes.length > 0;
|
||||
|
||||
while (clazz = classes[i++]) {
|
||||
result = action(elm.classList, clazz) && result;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
var addClass = function addClass(elm, className) {
|
||||
classListAction(elm, className, function (classList, clazz) {
|
||||
return classList.add(clazz);
|
||||
});
|
||||
};
|
||||
|
||||
var contents = function contents(elm) {
|
||||
return elm ? from(elm.childNodes) : [];
|
||||
};
|
||||
var parent = function parent(elm) {
|
||||
return elm ? elm.parentElement : null;
|
||||
};
|
||||
|
||||
var before = function before(parentElm, preferredAnchor, insertedElms) {
|
||||
if (insertedElms) {
|
||||
var anchor = preferredAnchor;
|
||||
var fragment;
|
||||
|
||||
if (parentElm) {
|
||||
if (isArrayLike(insertedElms)) {
|
||||
fragment = document.createDocumentFragment();
|
||||
each(insertedElms, function (insertedElm) {
|
||||
if (insertedElm === anchor) {
|
||||
anchor = insertedElm.previousSibling;
|
||||
}
|
||||
|
||||
fragment.appendChild(insertedElm);
|
||||
});
|
||||
} else {
|
||||
fragment = insertedElms;
|
||||
}
|
||||
|
||||
if (preferredAnchor) {
|
||||
if (!anchor) {
|
||||
anchor = parentElm.firstChild;
|
||||
} else if (anchor !== preferredAnchor) {
|
||||
anchor = anchor.nextSibling;
|
||||
}
|
||||
}
|
||||
|
||||
parentElm.insertBefore(fragment, anchor);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var appendChildren = function appendChildren(node, children) {
|
||||
before(node, null, children);
|
||||
};
|
||||
var removeElements = function removeElements(nodes) {
|
||||
if (isArrayLike(nodes)) {
|
||||
each(from(nodes), function (e) {
|
||||
return removeElements(e);
|
||||
});
|
||||
} else if (nodes) {
|
||||
var parentElm = parent(nodes);
|
||||
|
||||
if (parentElm) {
|
||||
parentElm.removeChild(nodes);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var createDiv = function createDiv() {
|
||||
return document.createElement('div');
|
||||
};
|
||||
var createDOM = function createDOM(html) {
|
||||
var createdDiv = createDiv();
|
||||
createdDiv.innerHTML = html.trim();
|
||||
return each(contents(createdDiv), function (elm) {
|
||||
return removeElements(elm);
|
||||
});
|
||||
};
|
||||
|
||||
var zeroObj = {
|
||||
w: 0,
|
||||
h: 0
|
||||
};
|
||||
var windowSize = function windowSize() {
|
||||
return {
|
||||
w: window.innerWidth,
|
||||
h: window.innerHeight
|
||||
};
|
||||
};
|
||||
var offsetSize = function offsetSize(elm) {
|
||||
return elm ? {
|
||||
w: elm.offsetWidth,
|
||||
h: elm.offsetHeight
|
||||
} : zeroObj;
|
||||
};
|
||||
var clientSize = function clientSize(elm) {
|
||||
return elm ? {
|
||||
w: elm.clientWidth,
|
||||
h: elm.clientHeight
|
||||
} : zeroObj;
|
||||
};
|
||||
var getBoundingClientRect = function getBoundingClientRect(elm) {
|
||||
return elm.getBoundingClientRect();
|
||||
};
|
||||
|
||||
var cssNumber = {
|
||||
animationiterationcount: 1,
|
||||
columncount: 1,
|
||||
fillopacity: 1,
|
||||
flexgrow: 1,
|
||||
flexshrink: 1,
|
||||
fontweight: 1,
|
||||
lineheight: 1,
|
||||
opacity: 1,
|
||||
order: 1,
|
||||
orphans: 1,
|
||||
widows: 1,
|
||||
zindex: 1,
|
||||
zoom: 1
|
||||
};
|
||||
|
||||
var adaptCSSVal = function adaptCSSVal(prop, val) {
|
||||
return !cssNumber[prop.toLowerCase()] && isNumber(val) ? val + "px" : val;
|
||||
};
|
||||
|
||||
var getCSSVal = function getCSSVal(elm, computedStyle, prop) {
|
||||
return computedStyle != null ? computedStyle.getPropertyValue(prop) : elm.style[prop];
|
||||
};
|
||||
|
||||
var setCSSVal = function setCSSVal(elm, prop, val) {
|
||||
try {
|
||||
if (elm && elm.style[prop] !== undefined) {
|
||||
elm.style[prop] = adaptCSSVal(prop, val);
|
||||
}
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
function style(elm, styles) {
|
||||
var getSingleStyle = isString(styles);
|
||||
var getStyles = isArray(styles) || getSingleStyle;
|
||||
|
||||
if (getStyles) {
|
||||
var getStylesResult = getSingleStyle ? '' : {};
|
||||
|
||||
if (elm) {
|
||||
var computedStyle = window.getComputedStyle(elm, null);
|
||||
getStylesResult = getSingleStyle ? getCSSVal(elm, computedStyle, styles) : styles.reduce(function (result, key) {
|
||||
result[key] = getCSSVal(elm, computedStyle, key);
|
||||
return result;
|
||||
}, getStylesResult);
|
||||
}
|
||||
|
||||
return getStylesResult;
|
||||
}
|
||||
|
||||
each(keys(styles), function (key) {
|
||||
return setCSSVal(elm, key, styles[key]);
|
||||
});
|
||||
}
|
||||
|
||||
var zeroObj$1 = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
var absoluteCoordinates = function absoluteCoordinates(elm) {
|
||||
var rect = elm ? getBoundingClientRect(elm) : 0;
|
||||
return rect ? {
|
||||
x: rect.left + window.pageYOffset,
|
||||
y: rect.top + window.pageXOffset
|
||||
} : zeroObj$1;
|
||||
};
|
||||
|
||||
var firstLetterToUpper = function firstLetterToUpper(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
};
|
||||
var jsPrefixes = ['WebKit', 'Moz', 'O', 'MS', 'webkit', 'moz', 'o', 'ms'];
|
||||
var jsCache = {};
|
||||
var jsAPI = function jsAPI(name) {
|
||||
var result = jsCache[name] || window[name];
|
||||
|
||||
if (hasOwnProperty(jsCache, name)) {
|
||||
return result;
|
||||
}
|
||||
|
||||
each(jsPrefixes, function (prefix) {
|
||||
result = result || window[prefix + firstLetterToUpper(name)];
|
||||
return !result;
|
||||
});
|
||||
jsCache[name] = result;
|
||||
return result;
|
||||
};
|
||||
|
||||
var resizeObserver = jsAPI('ResizeObserver');
|
||||
|
||||
function createCommonjsModule(fn, basedir, module) {
|
||||
return module = {
|
||||
path: basedir,
|
||||
exports: {},
|
||||
require: function (path, base) {
|
||||
return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
|
||||
}
|
||||
}, fn(module, module.exports), module.exports;
|
||||
}
|
||||
|
||||
function commonjsRequire () {
|
||||
throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
|
||||
}
|
||||
|
||||
var _extends_1 = createCommonjsModule(function (module) {
|
||||
function _extends() {
|
||||
module.exports = _extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
return _extends.apply(this, arguments);
|
||||
}
|
||||
|
||||
module.exports = _extends;
|
||||
});
|
||||
|
||||
var templateTypePrefixSuffix = ['__TPL_', '_TYPE__'];
|
||||
var optionsTemplateTypes = ['boolean', 'number', 'string', 'array', 'object', 'function', 'null'].reduce(function (result, item) {
|
||||
result[item] = templateTypePrefixSuffix[0] + item + templateTypePrefixSuffix[1];
|
||||
return result;
|
||||
}, {});
|
||||
|
||||
var abs = Math.abs,
|
||||
round = Math.round;
|
||||
|
||||
var nativeScrollbarSize = function nativeScrollbarSize(body, measureElm) {
|
||||
appendChildren(body, measureElm);
|
||||
var cSize = clientSize(measureElm);
|
||||
var oSize = offsetSize(measureElm);
|
||||
return {
|
||||
x: oSize.h - cSize.h,
|
||||
y: oSize.w - cSize.w
|
||||
};
|
||||
};
|
||||
|
||||
var nativeScrollbarStyling = function nativeScrollbarStyling(testElm) {
|
||||
var result = false;
|
||||
addClass(testElm, 'os-viewport-native-scrollbars-invisible');
|
||||
|
||||
try {
|
||||
result = style(testElm, 'scrollbar-width') === 'none' || window.getComputedStyle(testElm, '::-webkit-scrollbar').getPropertyValue('display') === 'none';
|
||||
} catch (ex) {}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
var rtlScrollBehavior = function rtlScrollBehavior(parentElm, childElm) {
|
||||
var strHidden = 'hidden';
|
||||
style(parentElm, {
|
||||
overflowX: strHidden,
|
||||
overflowY: strHidden
|
||||
});
|
||||
scrollLeft(parentElm, 0);
|
||||
var parentOffset = absoluteCoordinates(parentElm);
|
||||
var childOffset = absoluteCoordinates(childElm);
|
||||
scrollLeft(parentElm, -999);
|
||||
var childOffsetAfterScroll = absoluteCoordinates(childElm);
|
||||
return {
|
||||
i: parentOffset.x === childOffset.x,
|
||||
n: childOffset.x !== childOffsetAfterScroll.x
|
||||
};
|
||||
};
|
||||
|
||||
var passiveEvents = function passiveEvents() {
|
||||
var supportsPassive = false;
|
||||
|
||||
try {
|
||||
window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
|
||||
get: function get() {
|
||||
supportsPassive = true;
|
||||
}
|
||||
}));
|
||||
} catch (e) {}
|
||||
|
||||
return supportsPassive;
|
||||
};
|
||||
|
||||
var windowDPR = function windowDPR() {
|
||||
var dDPI = window.screen.deviceXDPI || 0;
|
||||
var sDPI = window.screen.logicalXDPI || 1;
|
||||
return window.devicePixelRatio || dDPI / sDPI;
|
||||
};
|
||||
|
||||
var diffBiggerThanOne = function diffBiggerThanOne(valOne, valTwo) {
|
||||
var absValOne = abs(valOne);
|
||||
var absValTwo = abs(valTwo);
|
||||
return !(absValOne === absValTwo || absValOne + 1 === absValTwo || absValOne - 1 === absValTwo);
|
||||
};
|
||||
|
||||
var _onChangedListener = new WeakMap();
|
||||
|
||||
var Environment = /*#__PURE__*/function () {
|
||||
function Environment() {
|
||||
_onChangedListener.set(this, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
|
||||
classPrivateFieldSet(this, _onChangedListener, new Set());
|
||||
|
||||
var _self = this;
|
||||
|
||||
var _document = document,
|
||||
body = _document.body;
|
||||
var envDOM = createDOM('<div id="os-dummy-scrollbar-size"><div></div></div>');
|
||||
var envElm = envDOM[0];
|
||||
var envChildElm = envElm.firstChild;
|
||||
var nScrollBarSize = nativeScrollbarSize(body, envElm);
|
||||
var nativeScrollbarIsOverlaid = {
|
||||
x: nScrollBarSize.x === 0,
|
||||
y: nScrollBarSize.y === 0
|
||||
};
|
||||
_self.autoUpdateLoop = false;
|
||||
_self.nativeScrollbarSize = nScrollBarSize;
|
||||
_self.nativeScrollbarIsOverlaid = nativeScrollbarIsOverlaid;
|
||||
_self.nativeScrollbarStyling = nativeScrollbarStyling(envElm);
|
||||
_self.rtlScrollBehavior = rtlScrollBehavior(envElm, envChildElm);
|
||||
_self.supportPassiveEvents = passiveEvents();
|
||||
_self.supportResizeObserver = !!jsAPI('ResizeObserver');
|
||||
removeAttr(envElm, 'style');
|
||||
removeElements(envElm);
|
||||
|
||||
if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
|
||||
var size = windowSize();
|
||||
var dpr = windowDPR();
|
||||
|
||||
var onChangedListener = classPrivateFieldGet(this, _onChangedListener);
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
if (onChangedListener.size) {
|
||||
var sizeNew = windowSize();
|
||||
var deltaSize = {
|
||||
w: sizeNew.w - size.w,
|
||||
h: sizeNew.h - size.h
|
||||
};
|
||||
if (deltaSize.w === 0 && deltaSize.h === 0) return;
|
||||
var deltaAbsSize = {
|
||||
w: abs(deltaSize.w),
|
||||
h: abs(deltaSize.h)
|
||||
};
|
||||
var deltaAbsRatio = {
|
||||
w: abs(round(sizeNew.w / (size.w / 100.0))),
|
||||
h: abs(round(sizeNew.h / (size.h / 100.0)))
|
||||
};
|
||||
var dprNew = windowDPR();
|
||||
var deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;
|
||||
var difference = !diffBiggerThanOne(deltaAbsRatio.w, deltaAbsRatio.h);
|
||||
var dprChanged = dprNew !== dpr && dpr > 0;
|
||||
var isZoom = deltaIsBigger && difference && dprChanged;
|
||||
var oldScrollbarSize = _self.nativeScrollbarSize;
|
||||
var newScrollbarSize;
|
||||
|
||||
if (isZoom) {
|
||||
newScrollbarSize = _self.nativeScrollbarSize = nativeScrollbarSize(body, envElm);
|
||||
removeElements(envElm);
|
||||
|
||||
if (oldScrollbarSize.x !== newScrollbarSize.x || oldScrollbarSize.y !== newScrollbarSize.y) {
|
||||
onChangedListener.forEach(function (listener) {
|
||||
return listener && listener(_self);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
size = sizeNew;
|
||||
dpr = dprNew;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var _proto = Environment.prototype;
|
||||
|
||||
_proto.addListener = function addListener(listener) {
|
||||
classPrivateFieldGet(this, _onChangedListener).add(listener);
|
||||
};
|
||||
|
||||
_proto.removeListener = function removeListener(listener) {
|
||||
classPrivateFieldGet(this, _onChangedListener).delete(listener);
|
||||
};
|
||||
|
||||
return Environment;
|
||||
}();
|
||||
|
||||
var e = [],
|
||||
t = [];
|
||||
function injector_bd874a3c (n, r) {
|
||||
if (n && "undefined" != typeof document) {
|
||||
var a,
|
||||
s = !0 === r.prepend ? "prepend" : "append",
|
||||
d = !0 === r.singleTag,
|
||||
i = "string" == typeof r.container ? document.querySelector(r.container) : document.getElementsByTagName("head")[0];
|
||||
|
||||
if (d) {
|
||||
var u = e.indexOf(i);
|
||||
-1 === u && (u = e.push(i) - 1, t[u] = {}), a = t[u] && t[u][s] ? t[u][s] : t[u][s] = c();
|
||||
} else a = c();
|
||||
|
||||
65279 === n.charCodeAt(0) && (n = n.substring(1)), a.styleSheet ? a.styleSheet.cssText += n : a.appendChild(document.createTextNode(n));
|
||||
}
|
||||
|
||||
function c() {
|
||||
var e = document.createElement("style");
|
||||
if (e.setAttribute("type", "text/css"), r.attributes) for (var t = Object.keys(r.attributes), n = 0; n < t.length; n++) {
|
||||
e.setAttribute(t[n], r.attributes[t[n]]);
|
||||
}
|
||||
var a = "prepend" === s ? "afterbegin" : "beforeend";
|
||||
return i.insertAdjacentElement(a, e), e;
|
||||
}
|
||||
}
|
||||
|
||||
const css = "body {\n background: red; }\n";
|
||||
injector_bd874a3c(css,{});
|
||||
|
||||
const css$1 = "body {\r\n background: blue;\r\n}\r\n";
|
||||
injector_bd874a3c(css$1,{});
|
||||
|
||||
exports.Environment = Environment;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
})));
|
||||
@@ -1,4 +1,4 @@
|
||||
import html from './build/build.html';
|
||||
import html from './__build__/build.html';
|
||||
|
||||
describe('Environment', () => {
|
||||
beforeAll(async () => {
|
||||
|
||||
@@ -2,5 +2,4 @@ import { Environment } from 'environment';
|
||||
import 'some.scss';
|
||||
import 'some.css';
|
||||
|
||||
// eslint-disable-next-line
|
||||
console.log(new Environment());
|
||||
export { Environment };
|
||||
|
||||
Reference in New Issue
Block a user