0.1.83 • Published 3 years ago

@kruining/epiphany v0.1.83

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

Epiphany

introspection library for JS-frameworks, currently with sole support for Remix.

Install

The project to be inspected

npm i -D @kruining/epiphany

The project that is inspecting

npm i @kruining/epiphany

Usage

The project to be inspected

/app/root.tsx

import {
    LiveReload,
    ScrollRestoration,
    Outlet,
    Meta,
    Scripts,
    LinksFunction,
} from 'remix';
+import { Epiphany } from '@kruining/epiphany';

export default function App()
{
    return <html lang="en">
        <head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width,initial-scale=1" />
            <Meta />
            <Links />
        </head>
        <body>
            <Outlet />
            <ScrollRestoration />
            <Scripts />
            <LiveReload />
+            <Epiphany />
        </body>
    </html>;
}

The project that is inspecting

Theoretical

initialize needs a reference to a Window object which is running Epiphany. it communicates over postMessage, hence the need for the Window.

import { Bridge, initialize } from '@kruining/epiphany';

const frame: Window = iframe.contentWindow;
const bridge: Bridge = initialize(frame);

Practical

This is a example of how to could set up initialization for Epiphany. this is a stripped down version of my own setup for my CMS.

/app/feature/cms/inspector.context.ts

import { Bridge, initialize } from '@kruining/epiphany';
import {
    createContext, Dispatch, Key,
    PropsWithChildren, SetStateAction,
    useContext,
    useEffect,
    useMemo,
    useState,
} from 'react';

const bridgeContext = createContext<Bridge>(undefined);
const frameContext = createContext<any>(undefined);

export const useBridge = () => useContext(bridgeContext);
export const useSetContentWindow = () => useContext(frameContext);

let bridge: Bridge|undefined;
export function InspectorProvider({ children }: PropsWithChildren<{}>)
{
    const [ state, setState ] = useState<string>('');
    const [ frame, setFrame ] = useState<Window>();
    const [ highlights, setHighlights ] = useState<Highlight[]>([]);

    const providerValue = useMemo(() => bridge, [ state, setState ]);

    useEffect(() => {
        if(bridge === undefined && frame !== undefined)
        {
            bridge = initialize(frame!);

            setState('initialized');
        }
    }, [ frame ]);

    const setContentWindow = (window: Window) => {
        setFrame(window);
    };

    return <bridgeContext.Provider value={providerValue}>
        <frameContext.Provider value={setContentWindow}>
            {children}
        </frameContext.Provider>
    </bridgeContext.Provider>
}

API

getTree

This methods gets the whole DOM tree with mapped source locations

const tree = await bridge.getTree();

getNode

Grab a node by its id. this id can be acquired via getTree or getNodeFromPosition.

const id: string = 'some-uuid';
const node = await bridge.getNode(id);

getNodeFromPosition

Query the element that lies on (x,y) in the inspected project

const event: MouseMoveEvent;
const node = await bridge.getNodeFromPosition(event.x, event.y);
comlinksource-mapts-ast-to-literalts-patterntypescript
@infinitebrahmanuniverse/nolb-_kr@everything-registry/sub-chunk-528@zalastax/nolb-_kr
0.1.80

3 years ago

0.1.81

3 years ago

0.1.82

3 years ago

0.1.83

3 years ago

0.1.74

3 years ago

0.1.75

3 years ago

0.1.76

3 years ago

0.1.77

3 years ago

0.1.78

3 years ago

0.1.79

3 years ago

0.1.70

3 years ago

0.1.71

3 years ago

0.1.72

3 years ago

0.1.73

3 years ago

0.1.63

3 years ago

0.1.64

3 years ago

0.1.65

3 years ago

0.1.66

3 years ago

0.1.67

3 years ago

0.1.68

3 years ago

0.1.69

3 years ago

0.1.52

3 years ago

0.1.53

3 years ago

0.1.54

3 years ago

0.1.55

3 years ago

0.1.56

3 years ago

0.1.57

3 years ago

0.1.58

3 years ago

0.1.59

3 years ago

0.1.50

3 years ago

0.1.51

3 years ago

0.1.49

3 years ago

0.1.60

3 years ago

0.1.61

3 years ago

0.1.62

3 years ago

0.1.47

3 years ago

0.1.48

3 years ago

0.1.41

3 years ago

0.1.42

3 years ago

0.1.43

3 years ago

0.1.44

3 years ago

0.1.45

3 years ago

0.1.46

3 years ago

0.1.40

3 years ago

0.1.38

3 years ago

0.1.39

3 years ago

0.1.30

3 years ago

0.1.31

3 years ago

0.1.32

3 years ago

0.1.33

3 years ago

0.1.34

3 years ago

0.1.35

3 years ago

0.1.36

3 years ago

0.1.37

3 years ago

0.1.27

3 years ago

0.1.28

3 years ago

0.1.29

3 years ago

0.1.22

3 years ago

0.1.23

3 years ago

0.1.24

3 years ago

0.1.25

3 years ago

0.1.26

3 years ago

0.1.10

3 years ago

0.1.11

3 years ago

0.1.12

3 years ago

0.1.13

3 years ago

0.1.14

3 years ago

0.1.15

3 years ago

0.1.20

3 years ago

0.1.21

3 years ago

0.1.16

3 years ago

0.1.17

3 years ago

0.1.18

3 years ago

0.1.19

3 years ago

0.0.20

3 years ago

0.0.21

3 years ago

0.0.22

3 years ago

0.0.23

3 years ago

0.0.24

3 years ago

0.0.25

3 years ago

0.0.15

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.18

3 years ago

0.0.19

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.14

3 years ago

0.1.0

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.8

3 years ago

0.0.26

3 years ago

0.1.7

3 years ago

0.1.9

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago