@tanstack/devtools-vite 0.2.12 → 0.2.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/editor.js +7 -3
- package/dist/esm/editor.js.map +1 -1
- package/dist/esm/plugin.js +0 -13
- package/dist/esm/plugin.js.map +1 -1
- package/package.json +2 -1
- package/src/editor.ts +7 -3
- package/src/plugin.ts +0 -13
package/dist/esm/editor.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
const DEFAULT_EDITOR_CONFIG = {
|
|
2
2
|
name: "VSCode",
|
|
3
3
|
open: async (path, lineNumber, columnNumber) => {
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
const launch = (await import("launch-editor")).default;
|
|
5
|
+
launch(
|
|
6
|
+
`${path.replaceAll("$", "\\$")}${lineNumber ? `:${lineNumber}` : ""}${columnNumber ? `:${columnNumber}` : ""}`,
|
|
7
|
+
void 0,
|
|
8
|
+
(filename, err) => {
|
|
9
|
+
console.warn(`Failed to open ${filename} in editor: ${err}`);
|
|
10
|
+
}
|
|
7
11
|
);
|
|
8
12
|
}
|
|
9
13
|
};
|
package/dist/esm/editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.js","sources":["../../src/editor.ts"],"sourcesContent":["type OpenSourceData = {\n type: 'open-source'\n data: {\n /** The source file to open */\n source?: string\n /** The react router route ID, usually discovered via the hook useMatches */\n routeID?: string\n /** The line number in the source file */\n line?: number\n /** The column number in the source file */\n column?: number\n }\n}\n\nexport type EditorConfig = {\n /** The name of the editor, used for debugging purposes */\n name: string\n /** Callback to open a file in the editor */\n open: (\n path: string,\n lineNumber: string | undefined,\n columnNumber?: string,\n ) => Promise<void>\n}\n\nexport const DEFAULT_EDITOR_CONFIG: EditorConfig = {\n name: 'VSCode',\n open: async (path, lineNumber, columnNumber) => {\n const
|
|
1
|
+
{"version":3,"file":"editor.js","sources":["../../src/editor.ts"],"sourcesContent":["type OpenSourceData = {\n type: 'open-source'\n data: {\n /** The source file to open */\n source?: string\n /** The react router route ID, usually discovered via the hook useMatches */\n routeID?: string\n /** The line number in the source file */\n line?: number\n /** The column number in the source file */\n column?: number\n }\n}\n\nexport type EditorConfig = {\n /** The name of the editor, used for debugging purposes */\n name: string\n /** Callback to open a file in the editor */\n open: (\n path: string,\n lineNumber: string | undefined,\n columnNumber?: string,\n ) => Promise<void>\n}\n\nexport const DEFAULT_EDITOR_CONFIG: EditorConfig = {\n name: 'VSCode',\n open: async (path, lineNumber, columnNumber) => {\n const launch = (await import('launch-editor')).default\n launch(\n `${path.replaceAll('$', '\\\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}`,\n undefined,\n (filename, err) => {\n console.warn(`Failed to open ${filename} in editor: ${err}`)\n },\n )\n },\n}\n\nexport const handleOpenSource = async ({\n data,\n openInEditor,\n}: {\n data: OpenSourceData\n openInEditor: EditorConfig['open']\n}) => {\n const { source, line, column } = data.data\n const lineNum = line ? `${line}` : undefined\n const columnNum = column ? `${column}` : undefined\n if (source) {\n return openInEditor(source, lineNum, columnNum)\n }\n}\n"],"names":[],"mappings":"AAyBO,MAAM,wBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,OAAO,MAAM,YAAY,iBAAiB;AAC9C,UAAM,UAAU,MAAM,OAAO,eAAe,GAAG;AAC/C;AAAA,MACE,GAAG,KAAK,WAAW,KAAK,KAAK,CAAC,GAAG,aAAa,IAAI,UAAU,KAAK,EAAE,GAAG,eAAe,IAAI,YAAY,KAAK,EAAE;AAAA,MAC5G;AAAA,MACA,CAAC,UAAU,QAAQ;AACjB,gBAAQ,KAAK,kBAAkB,QAAQ,eAAe,GAAG,EAAE;AAAA,MAC7D;AAAA,IAAA;AAAA,EAEJ;AACF;AAEO,MAAM,mBAAmB,OAAO;AAAA,EACrC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,EAAE,QAAQ,MAAM,OAAA,IAAW,KAAK;AACtC,QAAM,UAAU,OAAO,GAAG,IAAI,KAAK;AACnC,QAAM,YAAY,SAAS,GAAG,MAAM,KAAK;AACzC,MAAI,QAAQ;AACV,WAAO,aAAa,QAAQ,SAAS,SAAS;AAAA,EAChD;AACF;"}
|
package/dist/esm/plugin.js
CHANGED
|
@@ -7,7 +7,6 @@ import { addSourceToJsx } from "./inject-source.js";
|
|
|
7
7
|
const defineDevtoolsConfig = (config) => config;
|
|
8
8
|
const devtools = (args) => {
|
|
9
9
|
let port = 5173;
|
|
10
|
-
let host = "http";
|
|
11
10
|
const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true };
|
|
12
11
|
const injectSourceConfig = args?.injectSource ?? { enabled: true };
|
|
13
12
|
const bus = new ServerEventBus(args?.eventBusConfig);
|
|
@@ -27,9 +26,6 @@ const devtools = (args) => {
|
|
|
27
26
|
{
|
|
28
27
|
enforce: "pre",
|
|
29
28
|
name: "@tanstack/devtools:custom-server",
|
|
30
|
-
configResolved(config) {
|
|
31
|
-
host = config.server.https?.cert ? "https" : "http";
|
|
32
|
-
},
|
|
33
29
|
apply(config) {
|
|
34
30
|
return config.mode === "development";
|
|
35
31
|
},
|
|
@@ -66,15 +62,6 @@ const devtools = (args) => {
|
|
|
66
62
|
return;
|
|
67
63
|
})
|
|
68
64
|
);
|
|
69
|
-
},
|
|
70
|
-
transform(code) {
|
|
71
|
-
if (code.includes("__TSD_PORT__")) {
|
|
72
|
-
code = code.replace("__TSD_PORT__", String(port));
|
|
73
|
-
}
|
|
74
|
-
if (code.includes("__TSD_HOST__")) {
|
|
75
|
-
code = code.replace("__TSD_HOST__", host);
|
|
76
|
-
}
|
|
77
|
-
return code;
|
|
78
65
|
}
|
|
79
66
|
},
|
|
80
67
|
{
|
package/dist/esm/plugin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.js","sources":["../../src/plugin.ts"],"sourcesContent":["import { normalizePath } from 'vite'\nimport chalk from 'chalk'\nimport { ServerEventBus } from '@tanstack/devtools-event-bus/server'\nimport { handleDevToolsViteRequest } from './utils'\nimport { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'\nimport { addSourceToJsx } from './inject-source'\nimport type { EditorConfig } from './editor'\nimport type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'\nimport type { Plugin } from 'vite'\n\nexport type TanStackDevtoolsViteConfig = {\n /**\n * Configuration for the editor integration. Defaults to opening in VS code\n */\n editor?: EditorConfig\n /**\n * The configuration options for the server event bus\n */\n eventBusConfig?: ServerEventBusConfig\n /**\n * Configuration for enhanced logging.\n */\n enhancedLogs?: {\n /**\n * Whether to enable enhanced logging.\n * @default true\n */\n enabled: boolean\n }\n /**\n * Configuration for source injection.\n */\n injectSource?: {\n /**\n * Whether to enable source injection via data-tsd-source.\n * @default true\n */\n enabled: boolean\n }\n}\n\nexport const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>\n config\n\nexport const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {\n let port = 5173\n
|
|
1
|
+
{"version":3,"file":"plugin.js","sources":["../../src/plugin.ts"],"sourcesContent":["import { normalizePath } from 'vite'\nimport chalk from 'chalk'\nimport { ServerEventBus } from '@tanstack/devtools-event-bus/server'\nimport { handleDevToolsViteRequest } from './utils'\nimport { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'\nimport { addSourceToJsx } from './inject-source'\nimport type { EditorConfig } from './editor'\nimport type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'\nimport type { Plugin } from 'vite'\n\nexport type TanStackDevtoolsViteConfig = {\n /**\n * Configuration for the editor integration. Defaults to opening in VS code\n */\n editor?: EditorConfig\n /**\n * The configuration options for the server event bus\n */\n eventBusConfig?: ServerEventBusConfig\n /**\n * Configuration for enhanced logging.\n */\n enhancedLogs?: {\n /**\n * Whether to enable enhanced logging.\n * @default true\n */\n enabled: boolean\n }\n /**\n * Configuration for source injection.\n */\n injectSource?: {\n /**\n * Whether to enable source injection via data-tsd-source.\n * @default true\n */\n enabled: boolean\n }\n}\n\nexport const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>\n config\n\nexport const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {\n let port = 5173\n const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }\n const injectSourceConfig = args?.injectSource ?? { enabled: true }\n const bus = new ServerEventBus(args?.eventBusConfig)\n\n return [\n {\n enforce: 'pre',\n name: '@tanstack/devtools:inject-source',\n apply(config) {\n return config.mode === 'development' && injectSourceConfig.enabled\n },\n transform(code, id) {\n if (\n id.includes('node_modules') ||\n id.includes('?raw') ||\n id.includes('dist') ||\n id.includes('build')\n )\n return code\n\n return addSourceToJsx(code, id)\n },\n },\n {\n enforce: 'pre',\n name: '@tanstack/devtools:custom-server',\n apply(config) {\n // Custom server is only needed in development for piping events to the client\n return config.mode === 'development'\n },\n configureServer(server) {\n bus.start()\n\n server.middlewares.use((req, _res, next) => {\n if (req.socket.localPort && req.socket.localPort !== port) {\n port = req.socket.localPort\n }\n next()\n })\n if (server.config.server.port) {\n port = server.config.server.port\n }\n\n server.httpServer?.on('listening', () => {\n port = server.config.server.port\n })\n\n const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG\n const openInEditor: EditorConfig['open'] = async (\n path,\n lineNum,\n columnNum,\n ) => {\n if (!path) {\n return\n }\n await editor.open(path, lineNum, columnNum)\n }\n server.middlewares.use((req, res, next) =>\n handleDevToolsViteRequest(req, res, next, (parsedData) => {\n const { data, routine } = parsedData\n if (routine === 'open-source') {\n return handleOpenSource({\n data: { type: data.type, data },\n openInEditor,\n })\n }\n return\n }),\n )\n },\n },\n {\n name: '@tanstack/devtools:better-console-logs',\n enforce: 'pre',\n apply(config) {\n return config.mode === 'development' && enhancedLogsConfig.enabled\n },\n transform(code, id) {\n // Ignore anything external\n if (\n id.includes('node_modules') ||\n id.includes('?raw') ||\n id.includes('dist') ||\n id.includes('build')\n )\n return code\n\n if (!code.includes('console.')) {\n return code\n }\n const lines = code.split('\\n')\n return lines\n .map((line, lineNumber) => {\n if (\n line.trim().startsWith('//') ||\n line.trim().startsWith('/**') ||\n line.trim().startsWith('*')\n ) {\n return line\n }\n // Do not add for arrow functions or return statements\n if (\n line.replaceAll(' ', '').includes('=>console.') ||\n line.includes('return console.')\n ) {\n return line\n }\n\n const column = line.indexOf('console.')\n const location = `${id.replace(normalizePath(process.cwd()), '')}:${lineNumber + 1}:${column + 1}`\n const logMessage = `'${chalk.magenta('LOG')} ${chalk.blueBright(`${location} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(id.replace(normalizePath(process.cwd()), ''))}&line=${lineNumber + 1}&column=${column + 1}`)}\\\\n → '`\n if (line.includes('console.log(')) {\n const newLine = `console.log(${logMessage},`\n return line.replace('console.log(', newLine)\n }\n if (line.includes('console.error(')) {\n const newLine = `console.error(${logMessage},`\n return line.replace('console.error(', newLine)\n }\n return line\n })\n .join('\\n')\n },\n },\n ]\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/devtools-vite",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.14",
|
|
4
4
|
"description": "TanStack Vite plugin used to enhance the core devtools with additional functionalities",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
"@babel/traverse": "^7.28.3",
|
|
48
48
|
"@babel/types": "^7.28.2",
|
|
49
49
|
"chalk": "^5.6.0",
|
|
50
|
+
"launch-editor": "^2.11.1",
|
|
50
51
|
"@tanstack/devtools-event-bus": "0.3.2"
|
|
51
52
|
},
|
|
52
53
|
"devDependencies": {
|
package/src/editor.ts
CHANGED
|
@@ -26,9 +26,13 @@ export type EditorConfig = {
|
|
|
26
26
|
export const DEFAULT_EDITOR_CONFIG: EditorConfig = {
|
|
27
27
|
name: 'VSCode',
|
|
28
28
|
open: async (path, lineNumber, columnNumber) => {
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
const launch = (await import('launch-editor')).default
|
|
30
|
+
launch(
|
|
31
|
+
`${path.replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}`,
|
|
32
|
+
undefined,
|
|
33
|
+
(filename, err) => {
|
|
34
|
+
console.warn(`Failed to open ${filename} in editor: ${err}`)
|
|
35
|
+
},
|
|
32
36
|
)
|
|
33
37
|
},
|
|
34
38
|
}
|
package/src/plugin.ts
CHANGED
|
@@ -44,7 +44,6 @@ export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
|
|
|
44
44
|
|
|
45
45
|
export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
|
|
46
46
|
let port = 5173
|
|
47
|
-
let host = 'http'
|
|
48
47
|
const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
|
|
49
48
|
const injectSourceConfig = args?.injectSource ?? { enabled: true }
|
|
50
49
|
const bus = new ServerEventBus(args?.eventBusConfig)
|
|
@@ -71,9 +70,6 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
|
|
|
71
70
|
{
|
|
72
71
|
enforce: 'pre',
|
|
73
72
|
name: '@tanstack/devtools:custom-server',
|
|
74
|
-
configResolved(config) {
|
|
75
|
-
host = config.server.https?.cert ? 'https' : 'http'
|
|
76
|
-
},
|
|
77
73
|
apply(config) {
|
|
78
74
|
// Custom server is only needed in development for piping events to the client
|
|
79
75
|
return config.mode === 'development'
|
|
@@ -119,15 +115,6 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
|
|
|
119
115
|
}),
|
|
120
116
|
)
|
|
121
117
|
},
|
|
122
|
-
transform(code) {
|
|
123
|
-
if (code.includes('__TSD_PORT__')) {
|
|
124
|
-
code = code.replace('__TSD_PORT__', String(port))
|
|
125
|
-
}
|
|
126
|
-
if (code.includes('__TSD_HOST__')) {
|
|
127
|
-
code = code.replace('__TSD_HOST__', host)
|
|
128
|
-
}
|
|
129
|
-
return code
|
|
130
|
-
},
|
|
131
118
|
},
|
|
132
119
|
{
|
|
133
120
|
name: '@tanstack/devtools:better-console-logs',
|