mirror of https://github.com/msgbyte/tailchat
chore: use source-ref
moonrailgun
3 years ago
parent
2371c90f07
commit
27fe626000
@ -1 +0,0 @@
|
|||||||
lib
|
|
||||||
@ -1 +0,0 @@
|
|||||||
## source-ref for webpack loader
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "rollup-plugin-source-ref",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "",
|
|
||||||
"main": "lib/index.js",
|
|
||||||
"files": [
|
|
||||||
"lib"
|
|
||||||
],
|
|
||||||
"scripts": {
|
|
||||||
"build": "tsc",
|
|
||||||
"prepare": "tsc"
|
|
||||||
},
|
|
||||||
"keywords": [
|
|
||||||
"sourcecode",
|
|
||||||
"pointer",
|
|
||||||
"webpack"
|
|
||||||
],
|
|
||||||
"author": "moonrailgun",
|
|
||||||
"license": "MIT",
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/babel__generator": "^7.6.4",
|
|
||||||
"@types/babel__traverse": "^7.17.1",
|
|
||||||
"@types/node": "^15.12.5",
|
|
||||||
"@types/webpack": "^5.28.0",
|
|
||||||
"rollup": "^2.75.0",
|
|
||||||
"ts-node": "^10.0.0",
|
|
||||||
"typescript": "^4.5.2",
|
|
||||||
"webpack": "^5.72.0",
|
|
||||||
"webpack-test-utils": "^1.1.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/generator": "^7.17.7",
|
|
||||||
"@babel/parser": "^7.17.7",
|
|
||||||
"@babel/traverse": "^7.17.3",
|
|
||||||
"@babel/types": "^7.17.10"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
import type { Plugin } from 'rollup';
|
|
||||||
import { parse } from '@babel/parser';
|
|
||||||
import traverse from '@babel/traverse';
|
|
||||||
import generate from '@babel/generator';
|
|
||||||
import {
|
|
||||||
isJSXIdentifier,
|
|
||||||
isJSXMemberExpression,
|
|
||||||
jsxAttribute,
|
|
||||||
jsxIdentifier,
|
|
||||||
stringLiteral,
|
|
||||||
} from '@babel/types';
|
|
||||||
|
|
||||||
const TRACE_ID = 'data-source';
|
|
||||||
|
|
||||||
export default function sourceRef(): Plugin {
|
|
||||||
return {
|
|
||||||
name: 'source-ref',
|
|
||||||
transform(code, id) {
|
|
||||||
const filepath = id;
|
|
||||||
|
|
||||||
const ast = parse(code, {
|
|
||||||
sourceType: 'module',
|
|
||||||
plugins: ['jsx', 'typescript'],
|
|
||||||
});
|
|
||||||
|
|
||||||
traverse(ast, {
|
|
||||||
JSXOpeningElement(path) {
|
|
||||||
const location = path.node.loc;
|
|
||||||
if (!location) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(location)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const name = path.node.name;
|
|
||||||
if (isJSXIdentifier(name) && name.name === 'Fragment') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
isJSXMemberExpression(name) &&
|
|
||||||
name.property.name === 'Fragment'
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const line = location.start.line;
|
|
||||||
const col = location.start.column;
|
|
||||||
|
|
||||||
const attrs = path.node.attributes;
|
|
||||||
for (let i = 0; i < attrs.length; i++) {
|
|
||||||
const attr = attrs[i];
|
|
||||||
if (attr.type === 'JSXAttribute' && attr.name.name === TRACE_ID) {
|
|
||||||
// existed
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const traceId = `${filepath}:${line}:${col}`;
|
|
||||||
|
|
||||||
attrs.push(
|
|
||||||
jsxAttribute(jsxIdentifier(TRACE_ID), stringLiteral(traceId))
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const res = generate(ast);
|
|
||||||
|
|
||||||
return { code: res.code, map: res.map };
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "lib",
|
|
||||||
"module": "commonjs",
|
|
||||||
"target": "ES5",
|
|
||||||
"lib": ["ESNext"],
|
|
||||||
"declaration": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"skipLibCheck": true
|
|
||||||
},
|
|
||||||
"include": ["src"]
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
lib
|
|
||||||
@ -1 +0,0 @@
|
|||||||
## source-ref for webpack loader
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "source-ref-loader",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "",
|
|
||||||
"main": "lib/index.js",
|
|
||||||
"files": [
|
|
||||||
"lib"
|
|
||||||
],
|
|
||||||
"scripts": {
|
|
||||||
"build": "tsc",
|
|
||||||
"prepare": "tsc",
|
|
||||||
"test": "ts-node ./test/index.ts"
|
|
||||||
},
|
|
||||||
"keywords": [
|
|
||||||
"sourcecode",
|
|
||||||
"pointer",
|
|
||||||
"webpack"
|
|
||||||
],
|
|
||||||
"author": "moonrailgun",
|
|
||||||
"license": "MIT",
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/babel__generator": "^7.6.4",
|
|
||||||
"@types/babel__traverse": "^7.17.1",
|
|
||||||
"@types/node": "^15.12.5",
|
|
||||||
"@types/webpack": "^5.28.0",
|
|
||||||
"ts-node": "^10.0.0",
|
|
||||||
"typescript": "^4.5.2",
|
|
||||||
"webpack": "^5.72.0",
|
|
||||||
"webpack-test-utils": "^1.1.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/generator": "^7.17.7",
|
|
||||||
"@babel/parser": "^7.17.7",
|
|
||||||
"@babel/traverse": "^7.17.3",
|
|
||||||
"@babel/types": "^7.17.10"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
import type { LoaderContext } from 'webpack';
|
|
||||||
import { parse } from '@babel/parser';
|
|
||||||
import traverse from '@babel/traverse';
|
|
||||||
import generate from '@babel/generator';
|
|
||||||
import {
|
|
||||||
isJSXIdentifier,
|
|
||||||
isJSXMemberExpression,
|
|
||||||
jsxAttribute,
|
|
||||||
jsxIdentifier,
|
|
||||||
stringLiteral,
|
|
||||||
} from '@babel/types';
|
|
||||||
|
|
||||||
const TRACE_ID = 'data-source';
|
|
||||||
|
|
||||||
async function loader(this: LoaderContext<any>, source: string): Promise<void> {
|
|
||||||
const done = this.async();
|
|
||||||
|
|
||||||
const { available } = this.getOptions();
|
|
||||||
if (!available) {
|
|
||||||
// skip if not
|
|
||||||
done(null, source);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ast = parse(source, {
|
|
||||||
sourceType: 'module',
|
|
||||||
plugins: ['jsx', 'typescript'],
|
|
||||||
});
|
|
||||||
const filepath = this.resourcePath;
|
|
||||||
if (filepath.includes('node_modules')) {
|
|
||||||
done(null, source);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
traverse(ast, {
|
|
||||||
JSXOpeningElement(path) {
|
|
||||||
const location = path.node.loc;
|
|
||||||
if (!location) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(location)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const name = path.node.name;
|
|
||||||
if (isJSXIdentifier(name) && name.name === 'Fragment') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (isJSXMemberExpression(name) && name.property.name === 'Fragment') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const line = location.start.line;
|
|
||||||
const col = location.start.column;
|
|
||||||
|
|
||||||
const attrs = path.node.attributes;
|
|
||||||
for (let i = 0; i < attrs.length; i++) {
|
|
||||||
const attr = attrs[i];
|
|
||||||
if (attr.type === 'JSXAttribute' && attr.name.name === TRACE_ID) {
|
|
||||||
// existed
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const traceId = `${filepath}:${line}:${col}`;
|
|
||||||
|
|
||||||
attrs.push(jsxAttribute(jsxIdentifier(TRACE_ID), stringLiteral(traceId)));
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const code = generate(ast).code;
|
|
||||||
|
|
||||||
done(null, code);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default loader;
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
export const tsx = {
|
|
||||||
'/src/index.js': `
|
|
||||||
import Foo, { HelloWorld } from './foo.tsx'
|
|
||||||
export default [
|
|
||||||
HelloWorld,
|
|
||||||
(new Foo()).render(),
|
|
||||||
];
|
|
||||||
`,
|
|
||||||
|
|
||||||
'/src/foo.tsx': `
|
|
||||||
export const HelloWorld = <><div>hello world</div></>;
|
|
||||||
export const HelloWorld2 = <React.Fragment><div>hello world</div></React.Fragment>;
|
|
||||||
export const HelloWorld3 = <Fragment><div>hello world</div></Fragment>;
|
|
||||||
export default class Foo {
|
|
||||||
render() {
|
|
||||||
return <div className="class-name">content</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
};
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import { build } from 'webpack-test-utils';
|
|
||||||
import * as fixtures from './fixtures';
|
|
||||||
import { configureLoader } from './utils';
|
|
||||||
|
|
||||||
async function test() {
|
|
||||||
const built = await build(fixtures.tsx, (config) => {
|
|
||||||
configureLoader(config);
|
|
||||||
|
|
||||||
console.log('configureLoader(config);', config.module.rules);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('usage:', built.stats.endTime - built.stats.startTime, 'ms');
|
|
||||||
console.log('errors:', built.stats.compilation.errors.length);
|
|
||||||
// console.log(built.stats.compilation.errors);
|
|
||||||
}
|
|
||||||
|
|
||||||
test();
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import type { Configuration } from 'webpack';
|
|
||||||
import type { DefaultWebpackConfig } from 'webpack-test-utils';
|
|
||||||
|
|
||||||
const loaderPath = require.resolve('../src/index.ts');
|
|
||||||
|
|
||||||
export function configureLoader(config: DefaultWebpackConfig & Configuration) {
|
|
||||||
config.resolveLoader.alias = {
|
|
||||||
'source-ref-loader': loaderPath,
|
|
||||||
};
|
|
||||||
|
|
||||||
config.module.rules.push({
|
|
||||||
test: /\.tsx$/,
|
|
||||||
loader: 'source-ref-loader',
|
|
||||||
options: {
|
|
||||||
available: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "lib",
|
|
||||||
"module": "commonjs",
|
|
||||||
|
|
||||||
"target": "ES2018",
|
|
||||||
"lib": ["ES2018"],
|
|
||||||
|
|
||||||
"declaration": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"skipLibCheck": true
|
|
||||||
},
|
|
||||||
"include": ["src"]
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
declare module 'source-ref-open-vscode' {}
|
|
||||||
@ -1,223 +0,0 @@
|
|||||||
(function (win, doc) {
|
|
||||||
const sourceMap = {};
|
|
||||||
const sourceMapReverse = {};
|
|
||||||
let cursor = 0;
|
|
||||||
let timer = null;
|
|
||||||
|
|
||||||
function openVscode(node) {
|
|
||||||
let path = null;
|
|
||||||
if (node.dataset.sid) {
|
|
||||||
path = sidToURI(node.dataset.sid);
|
|
||||||
}
|
|
||||||
if (node.dataset.source) {
|
|
||||||
path = 'vscode://file/' + node.dataset.source;
|
|
||||||
}
|
|
||||||
if (!path) {
|
|
||||||
return console.warn('Not found data-source');
|
|
||||||
}
|
|
||||||
win.location.href = path;
|
|
||||||
}
|
|
||||||
function sourceToId(node) {
|
|
||||||
if (!node.dataset.source) return;
|
|
||||||
const source = node.dataset.source;
|
|
||||||
const splits = source.split(':');
|
|
||||||
const column = splits.pop();
|
|
||||||
const row = splits.pop();
|
|
||||||
const file = splits.join(':');
|
|
||||||
|
|
||||||
if (!sourceMap[file]) {
|
|
||||||
cursor++;
|
|
||||||
sourceMap[file] = cursor;
|
|
||||||
sourceMapReverse[cursor] = file;
|
|
||||||
}
|
|
||||||
const id = sourceMap[file];
|
|
||||||
node.removeAttribute('data-source');
|
|
||||||
node.setAttribute('data-sid', `${id}:${row}:${column}`);
|
|
||||||
}
|
|
||||||
function sidToURI(sid) {
|
|
||||||
const [id, row, column] = sid.split(':');
|
|
||||||
const path =
|
|
||||||
'vscode://file/' + sourceMapReverse[id] + ':' + row + ':' + column;
|
|
||||||
return path;
|
|
||||||
}
|
|
||||||
|
|
||||||
class Selector {
|
|
||||||
constructor(node) {
|
|
||||||
this.sids = [];
|
|
||||||
this.containerId = '__source-ref-panel';
|
|
||||||
this.getAncestorSids = (node) => {
|
|
||||||
const sids = [];
|
|
||||||
let cur = node;
|
|
||||||
while (cur !== doc.body) {
|
|
||||||
if (cur.dataset.sid) {
|
|
||||||
sids.push(cur.dataset.sid);
|
|
||||||
}
|
|
||||||
cur = cur.parentElement;
|
|
||||||
}
|
|
||||||
return sids;
|
|
||||||
};
|
|
||||||
this.focusBlock = null;
|
|
||||||
this.setFocusBlock = (target) => {
|
|
||||||
if (target === null) {
|
|
||||||
// clear if target is null
|
|
||||||
if (this.focusBlock) {
|
|
||||||
doc.body.removeChild(this.focusBlock);
|
|
||||||
this.focusBlock = null;
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.focusBlock) {
|
|
||||||
this.focusBlock = doc.createElement('div');
|
|
||||||
this.focusBlock.className = '__source-ref-mask';
|
|
||||||
this.focusBlock.style.position = 'absolute';
|
|
||||||
this.focusBlock.style.backgroundColor = 'rgba(134, 185, 242, 0.5)';
|
|
||||||
|
|
||||||
doc.body.appendChild(this.focusBlock);
|
|
||||||
}
|
|
||||||
|
|
||||||
const rect = target.getBoundingClientRect();
|
|
||||||
|
|
||||||
this.focusBlock.style.height = rect.height + 'px';
|
|
||||||
this.focusBlock.style.width = rect.width + 'px';
|
|
||||||
this.focusBlock.style.left = rect.x + 'px';
|
|
||||||
this.focusBlock.style.top = rect.y + 'px';
|
|
||||||
};
|
|
||||||
this.getContainer = () => {
|
|
||||||
const container = doc.getElementById(this.containerId);
|
|
||||||
if (!container) {
|
|
||||||
const div = doc.createElement('div');
|
|
||||||
div.id = this.containerId;
|
|
||||||
doc.body.appendChild(div);
|
|
||||||
|
|
||||||
// Add dom red border on hover
|
|
||||||
div.addEventListener('mouseover', (e) => {
|
|
||||||
const node = e.target;
|
|
||||||
if (node.dataset.tid) {
|
|
||||||
const target = doc.querySelector(
|
|
||||||
`[data-sid="${node.dataset.tid}"]`
|
|
||||||
);
|
|
||||||
if (target) {
|
|
||||||
target.classList.add('__source-ref-selected');
|
|
||||||
this.setFocusBlock(target);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Remove dom red border when leave
|
|
||||||
div.addEventListener('mouseout', (e) => {
|
|
||||||
const node = e.target;
|
|
||||||
if (node.dataset.tid) {
|
|
||||||
const target = doc.querySelector(
|
|
||||||
`[data-sid="${node.dataset.tid}"]`
|
|
||||||
);
|
|
||||||
if (target) {
|
|
||||||
target.classList.remove('__source-ref-selected');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
this.setFocusBlock(null);
|
|
||||||
doc.body.removeChild(div);
|
|
||||||
};
|
|
||||||
|
|
||||||
// click event
|
|
||||||
div.addEventListener('click', (e) => {
|
|
||||||
const node = e.target;
|
|
||||||
const command = node.dataset.command;
|
|
||||||
switch (command) {
|
|
||||||
case 'close': {
|
|
||||||
e.stopPropagation();
|
|
||||||
close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
console.warn('Unknown command', command);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// keyboard event
|
|
||||||
function escKeyHandler(e) {
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
e.stopPropagation();
|
|
||||||
close();
|
|
||||||
doc.removeEventListener('keydown', escKeyHandler);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
doc.addEventListener('keydown', escKeyHandler);
|
|
||||||
|
|
||||||
return div;
|
|
||||||
}
|
|
||||||
return container;
|
|
||||||
};
|
|
||||||
this.renderHTML = () => {
|
|
||||||
const html = `
|
|
||||||
<div style="
|
|
||||||
position: fixed;
|
|
||||||
background: white;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 9999;
|
|
||||||
opacity: 0.6;
|
|
||||||
border-radius: 0 10px 0 0;
|
|
||||||
">
|
|
||||||
<div style="cursor:pointer;margin:10px;text-align:right;font-size:18px;" data-command="close">X</div>
|
|
||||||
${this.sids
|
|
||||||
.map((sid) => {
|
|
||||||
const uri = sidToURI(sid);
|
|
||||||
// 这里加了一个左向省略，暂时没用上，先放着
|
|
||||||
return `<a href="${uri}" style="
|
|
||||||
display: block;
|
|
||||||
margin: 10px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
direction: rtl;
|
|
||||||
text-align: left;
|
|
||||||
" data-tid="${sid}">source-ref: ${uri}</a>`;
|
|
||||||
})
|
|
||||||
.join('')}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
const container = this.getContainer();
|
|
||||||
container.innerHTML = html;
|
|
||||||
};
|
|
||||||
this.sids = this.getAncestorSids(node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function init() {
|
|
||||||
win.vscode = (node = win.$0) => {
|
|
||||||
openVscode(node);
|
|
||||||
};
|
|
||||||
doc.body.addEventListener(
|
|
||||||
'click',
|
|
||||||
(e) => {
|
|
||||||
if (e.altKey) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
const selector = new Selector(e.target);
|
|
||||||
selector.renderHTML();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
true
|
|
||||||
);
|
|
||||||
const mo = new MutationObserver(() => {
|
|
||||||
if (timer) {
|
|
||||||
clearTimeout(timer);
|
|
||||||
}
|
|
||||||
timer = setTimeout(() => {
|
|
||||||
// recal sid
|
|
||||||
doc
|
|
||||||
.querySelectorAll('[data-source]')
|
|
||||||
.forEach((node) => sourceToId(node));
|
|
||||||
}, 500);
|
|
||||||
});
|
|
||||||
mo.observe(doc.body, {
|
|
||||||
attributes: true,
|
|
||||||
childList: true,
|
|
||||||
subtree: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
})(window, document);
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "source-ref-open-vscode",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "",
|
|
||||||
"main": "index.js",
|
|
||||||
"types": "index.d.ts",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"keywords": [],
|
|
||||||
"author": "moonrailgun",
|
|
||||||
"license": "MIT"
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue