rn-pixel-perfect/dist/index.js

A simple tool for pixel-perfect layouts, allowing you to compare design screens with your app's implementation.

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (g && (g = 0, op[0] && (_ = 0)), _) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
import { Image, Dimensions, ScrollView } from 'react-native';
import Constants from 'expo-constants';
export var validateMessage = function (data) {
    try {
        var parsed = JSON.parse(String(data));
        if ('type' in parsed && typeof parsed.type === 'string')
            return parsed;
        return null;
    }
    catch (_a) {
        return null;
    }
};
var getHost = function (userHost) {
    var _a;
    if (userHost)
        return userHost;
    if (!((_a = Constants.expoConfig) === null || _a === void 0 ? void 0 : _a.hostUri))
        return 'localhost';
    var host = Constants.expoConfig.hostUri.split(':')[0];
    return host;
};
var ImgStyle = {
    width: '100%',
};
export var Overlay = function (_a) {
    var host = _a.host, port = _a.port;
    var _b = useState(null), img = _b[0], setImg = _b[1];
    var _c = useState(0.6), opacity = _c[0], setOpacity = _c[1];
    var _d = useState(false), hidden = _d[0], setHidden = _d[1];
    var _e = useState(false), scroll = _e[0], setScroll = _e[1];
    var scrollRef = useRef(null);
    var onSetImage = useCallback(function (msg) { return __awaiter(void 0, void 0, void 0, function () {
        var _a, width, height, screenWidth;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0: return [4 /*yield*/, Image.getSize(msg.image)];
                case 1:
                    _a = _b.sent(), width = _a.width, height = _a.height;
                    screenWidth = Dimensions.get('screen').width;
                    setImg({
                        src: msg.image,
                        height: height / (width / screenWidth),
                    });
                    return [2 /*return*/];
            }
        });
    }); }, []);
    useEffect(function () {
        var ws = new WebSocket("ws://".concat(getHost(host), ":").concat(port !== null && port !== void 0 ? port : 3210));
        ws.onopen = function () {
            var _a;
            ws.send(JSON.stringify({
                type: 'register',
                name: (_a = Constants.deviceName) !== null && _a !== void 0 ? _a : 'Unknown',
            }));
        };
        ws.onmessage = function (e) {
            var msg = validateMessage(e.data);
            switch (msg === null || msg === void 0 ? void 0 : msg.type) {
                case 'setImage': {
                    return onSetImage(msg);
                }
                case 'changeOpacity':
                    return setOpacity(function (value) {
                        return Math.min(Math.max(value + msg.value, 0), 1);
                    });
                case 'setHidden':
                    return setHidden(msg.value);
                case 'setScroll':
                    return setScroll(msg.value);
                case undefined: {
                    throw new Error('Not implemented yet: undefined case');
                }
            }
        };
        ws.onerror = function (e) {
            console.error('rn-pixel-perfect', e);
        };
        ws.onclose = function () {
            setImg(null);
        };
        return function () {
            ws.close();
        };
    }, [port, host, onSetImage]);
    var style = useMemo(function () {
        return ({
            position: 'absolute',
            top: 0,
            width: '100%',
            height: '100%',
            opacity: opacity,
            pointerEvents: scroll ? undefined : 'none',
        });
    }, [opacity, scroll]);
    if (!img || hidden)
        return null;
    return (_jsx(ScrollView, { ref: scrollRef, style: style, children: _jsx(Image, { style: [ImgStyle, { height: img.height }], source: { uri: img.src } }) }));
};