├── .gitignore
├── README.md
├── index.ts
├── package-lock.json
├── package.json
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # element-to-source
 2 | -------------------
 3 | 
 4 | Providing utility to map a DOM element to source information, using debug metadata provided by (some) frameworks.
 5 | 
 6 | API:
 7 | 
 8 | ````javascript
 9 |     import { resolve } from 'element-to-source';
10 |     var domElement = document.getElementById('#main');
11 | 
12 |     var sourceMetadata = resolve(domElement);
13 |     // {
14 |     //     charNumber: 0,
15 |     //     columnNumber: 0,
16 |     //     fileName: 'component.tsx',
17 |     //     lineNumber: 0
18 |     // }
19 | ````
20 | 
21 | ## Supported frameworks
22 | 
23 | - Svelte.js via https://github.com/sveltejs/svelte/issues/1499 (when in Dev Mode)
24 | - React / Create React App via https://medium.com/@sitambas/get-global-element-state-a408a744e99d 
25 | 
26 | ## Unsupported
27 | 
28 | I would love to get help finding ways to enable any of these.
29 | 
30 | - Angular
31 | - Vue.js
32 | - React + Parcel bundler
33 | - Next.js?
34 | - Web Components
35 | - Ionic?
36 | 


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | let getReactDebugSource = function (element: any) {
 3 |     for (var key in element) {
 4 |         if (key.startsWith('__reactInternalInstance$')) {
 5 |             return element[key]._debugSource;
 6 |         }
 7 |     }
 8 |     return null;
 9 | }
10 | 
11 | export function resolve(element: any): ElementSource {
12 | 
13 |     var result = {
14 |         charNumber: 0,
15 |         columnNumber: 0,
16 |         fileName: '',
17 |         lineNumber: ''
18 |     }
19 | 
20 |     // SvelteJS
21 |     if (element.__svelte_meta) {
22 |         var loc = element.__svelte_meta.loc;
23 |         if (loc) {
24 |             result.fileName = loc.file;
25 |             result.lineNumber = loc.line;
26 |             result.columnNumber = loc.column;
27 |             result.charNumber = loc.char;
28 |         }
29 |     }
30 | 
31 |     // ReactJS
32 |     var reactDebugSource = getReactDebugSource(element);
33 |     if (reactDebugSource) {
34 |         result.fileName = reactDebugSource.fileName;
35 |         result.lineNumber = reactDebugSource.lineNumber;
36 |     }
37 | 
38 |     return result;
39 | }
40 | 
41 | interface ElementSource {
42 |     charNumber: number,
43 |     columnNumber: number,
44 |     fileName: string,
45 |     lineNumber: string
46 | }


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "element-to-source",
 3 |   "version": "1.0.0",
 4 |   "lockfileVersion": 1,
 5 |   "requires": true,
 6 |   "dependencies": {
 7 |     "typescript": {
 8 |       "version": "3.4.5",
 9 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.4.5.tgz",
10 |       "integrity": "sha512-YycBxUb49UUhdNMU5aJ7z5Ej2XGmaIBL0x34vZ82fn3hGvD+bgrMrVDpatgz2f7YxUMJxMkbWxJZeAvDxVe7Vw==",
11 |       "dev": true
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "element-to-source",
 3 |   "version": "1.0.1",
 4 |   "description": "Providing utility to map a DOM element to source information, using debug metadata provided by (some) frameworks.",
 5 |   "main": "dist/index.js",
 6 |   "types": "dist/index.d.ts",
 7 |   "scripts": {
 8 |     "prepublish": "npm run build",
 9 |     "build": "tsc",
10 |     "test": "echo \"Error: no test specified\" && exit 1"
11 |   },
12 |   "author": "Kenneth Auchenbeg <kenneth@auchenberg.dk>",
13 |   "license": "MIT",
14 |   "devDependencies": {
15 |     "typescript": "^3.4.5"
16 |   }
17 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "./dist",
 4 |     "declaration": true,
 5 |     "target": "es2018",
 6 |     "module": "es2015",
 7 |     "strict": true,
 8 |     "esModuleInterop": true
 9 |   }
10 | }


--------------------------------------------------------------------------------