Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Unverified Commit 1ee03486 authored by Simon Chan's avatar Simon Chan
Browse files

chore: a version can crash chrome

parent 5c3048ee

.vscode/settings.json

+69 −68
Original line number Diff line number Diff line
@@ -20,6 +20,7 @@ 
        "keyof",

        "laggy",

        "localabstract",

        "Logcat",

        "lstat",

        "luma",

        "mitm",

apps/demo/package.json

+49 −49
Original line number Diff line number Diff line
@@ -44,6 +44,6 @@ 
        "eslint": "8.8.0",

        "eslint-config-next": "12.1.5",

        "source-map-loader": "^3.0.1",

        "typescript": "4.7.0-beta"

        "typescript": "4.7.1-rc"

    }

}

apps/demo/src/components/grid.tsx

+320 −320
Original line number Diff line number Diff line 
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';

import { ComponentType, CSSProperties, useLayoutEffect, useMemo, useState } from "react";

import { useCallbackRef, withDisplayName } from "../utils";

import { useStableCallback, withDisplayName } from "../utils";

import { ResizeObserver, Size } from './resize-observer';



const useClasses = makeStyles({
@@ -167,7 +167,7 @@ export const Grid = withDisplayName('Grid')(({ 
    const [bodyRef, setBodyRef] = useState<HTMLDivElement | null>(null);

    const [bodySize, setBodySize] = useState<Size>({ width: 0, height: 0 });



    const handleScroll = useCallbackRef(() => {

    const handleScroll = useStableCallback(() => {

        if (bodyRef) {

            setScrollLeft(bodyRef.scrollLeft);

            setScrollTop(bodyRef.scrollTop);

apps/demo/src/components/resize-observer.tsx

+49 −48
Original line number Diff line number Diff line 
import { makeStyles } from "@griffel/react";

import { useLayoutEffect, useState } from 'react';

import { useCallbackRef, withDisplayName } from '../utils';

import { useEffect, useLayoutEffect, useState } from 'react';

import { useStableCallback, withDisplayName } from '../utils';



export interface Size {

    width: number;
@@ -28,21 +28,22 @@ export const ResizeObserver = withDisplayName('ResizeObserver')(({ 
}: ResizeObserverProps): JSX.Element | null => {

    const classes = useClasses();



    const [iframeRef, setIframeRef] = useState<HTMLIFrameElement | null>(null);

    const [iframe, setIframe] = useState<HTMLIFrameElement | null>(null);



    const handleResize = useCallbackRef(() => {

        const { width, height } = iframeRef!.getBoundingClientRect();

    const handleResize = useStableCallback(() => {

        const { width, height } = iframe!.getBoundingClientRect();

        onResize({ width, height });

    });



    useLayoutEffect(() => {

        if (iframeRef) {

            iframeRef.contentWindow!.addEventListener('resize', handleResize);

    useEffect(() => {

        if (iframe) {

            void iframe.offsetLeft;

            iframe.contentWindow!.addEventListener('resize', handleResize);

            handleResize();

        }

    }, [iframeRef, handleResize]);

    }, [iframe, handleResize]);



    return (

        <iframe ref={setIframeRef} className={classes.observer} />

        <iframe ref={setIframe} className={classes.observer} />

    );

});

apps/demo/src/pages/_app.tsx

+173 −168
Original line number Diff line number Diff line
@@ -52,6 +52,11 @@ const ROUTES = [ 
        icon: Icons.Box,

        name: 'Install APK',

    },

    {

        url: '/logcat',

        icon: Icons.BookSearch,

        name: 'Logcat',

    },

    {

        url: '/power',

        icon: Icons.Power,