0.1.83 • Published 1 year ago

@kruining/epiphany v0.1.83

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year 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

1 year ago

0.1.81

1 year ago

0.1.82

1 year ago

0.1.83

1 year ago

0.1.74

1 year ago

0.1.75

1 year ago

0.1.76

1 year ago

0.1.77

1 year ago

0.1.78

1 year ago

0.1.79

1 year ago

0.1.70

1 year ago

0.1.71

1 year ago

0.1.72

1 year ago

0.1.73

1 year ago

0.1.63

2 years ago

0.1.64

2 years ago

0.1.65

1 year ago

0.1.66

1 year ago

0.1.67

1 year ago

0.1.68

1 year ago

0.1.69

1 year ago

0.1.52

2 years ago

0.1.53

2 years ago

0.1.54

2 years ago

0.1.55

2 years ago

0.1.56

2 years ago

0.1.57

2 years ago

0.1.58

2 years ago

0.1.59

2 years ago

0.1.50

2 years ago

0.1.51

2 years ago

0.1.49

2 years ago

0.1.60

2 years ago

0.1.61

2 years ago

0.1.62

2 years ago

0.1.47

2 years ago

0.1.48

2 years ago

0.1.41

2 years ago

0.1.42

2 years ago

0.1.43

2 years ago

0.1.44

2 years ago

0.1.45

2 years ago

0.1.46

2 years ago

0.1.40

2 years ago

0.1.38

2 years ago

0.1.39

2 years ago

0.1.30

2 years ago

0.1.31

2 years ago

0.1.32

2 years ago

0.1.33

2 years ago

0.1.34

2 years ago

0.1.35

2 years ago

0.1.36

2 years ago

0.1.37

2 years ago

0.1.27

2 years ago

0.1.28

2 years ago

0.1.29

2 years ago

0.1.22

2 years ago

0.1.23

2 years ago

0.1.24

2 years ago

0.1.25

2 years ago

0.1.26

2 years ago

0.1.10

2 years ago

0.1.11

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.1.20

2 years ago

0.1.21

2 years ago

0.1.16

2 years ago

0.1.17

2 years ago

0.1.18

2 years ago

0.1.19

2 years ago

0.0.20

2 years ago

0.0.21

2 years ago

0.0.22

2 years ago

0.0.23

2 years ago

0.0.24

2 years ago

0.0.25

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.17

2 years ago

0.0.18

2 years ago

0.0.19

2 years ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.1.0

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.8

2 years ago

0.0.26

2 years ago

0.1.7

2 years ago

0.1.9

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago