Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

feat(devtools): add devtools integration

Browse source
This commit is contained in:
Nate Moore 2022-04-27 12:01:40 -04:00
parent b3272f758f
commit abb249925c
7 changed files with 117 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/astro/src/vite-plugin-astro/compile.ts
View file

@ -39,7 +39,7 @@ async function compile(
filename: string,
source: string,
viteTransform: TransformHook,
opts: { ssr: boolean }
opts: { ssr: boolean, mode: string }
): Promise<CompileResult> {
const filenameURL = new URL(`file://${filename}`);
const normalizedID = fileURLToPath(filenameURL);
@ -60,6 +60,7 @@ async function compile(
internalURL: `/@fs${prependForwardSlash(
viteID(new URL('../runtime/server/index.js', import.meta.url))
)}`,
annotateSourceFile: opts.mode !== 'production',
// TODO: baseline flag
experimentalStaticExtraction: true,
preprocessStyle: async (value: string, attrs: Record<string, string>) => {
@ -136,7 +137,7 @@ export async function cachedCompilation(
filename: string,
source: string,
viteTransform: TransformHook,
opts: { ssr: boolean }
opts: { ssr: boolean, mode: string }
): Promise<CompileResult> {
let cache: CompilationCache;
if (!configCache.has(config)) {

3
packages/astro/src/vite-plugin-astro/index.ts
View file

@ -107,6 +107,7 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
const transformResult = await cachedCompilation(config, filename, source, viteTransform, {
ssr: Boolean(opts?.ssr),
mode: resolvedConfig.mode,
});
// Track any CSS dependencies so that HMR is triggered when they change.
@ -129,6 +130,7 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
const transformResult = await cachedCompilation(config, filename, source, viteTransform, {
ssr: Boolean(opts?.ssr),
mode: resolvedConfig.mode,
});
const scripts = transformResult.scripts;
const hoistedScript = scripts[query.index];
@ -159,6 +161,7 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
try {
const transformResult = await cachedCompilation(config, filename, source, viteTransform, {
ssr: Boolean(opts?.ssr),
mode: resolvedConfig.mode,
});
// Compile all TypeScript to JavaScript.

35
packages/integrations/devtools/package.json Normal file
View file

@ -0,0 +1,35 @@
{
"name": "@astrojs/devtools",
"version": "0.0.1",
"description": "Enable Devtools for Astro",
"type": "module",
"types": "./dist/index.d.ts",
"author": "withastro",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/withastro/astro.git",
"directory": "packages/integrations/devtools"
},
"keywords": [
"astro",
"devtools",
"astro-component"
],
"bugs": "https://github.com/withastro/astro/issues",
"homepage": "https://astro.build",
"exports": {
".": "./dist/index.js",
"./client": "./dist/client/index.js",
"./package.json": "./package.json"
},
"scripts": {
"build": "astro-scripts build \"src/**/*.ts\" && tsc",
"build:ci": "astro-scripts build \"src/**/*.ts\"",
"dev": "astro-scripts dev \"src/**/*.ts\""
},
"devDependencies": {
"astro": "workspace:*",
"astro-scripts": "workspace:*"
}
}

28
packages/integrations/devtools/src/client/click-to-component.ts Normal file
View file

@ -0,0 +1,28 @@
export default function clickToComponent() {
window.addEventListener('click', (event) => {
if (!event.altKey) return;
const el = event.target;
if (!isElement(el)) return;
const url = getEditorURL(el);
if (url) {
window.open(url);
}
})
}
function isElement(node: EventTarget|null): node is HTMLElement {
return !!(node as any)?.tagName;
}
let projectRoot: URL;
function getEditorURL(el: HTMLElement) {
if (!projectRoot) {
projectRoot = new URL(document.querySelector('html')?.dataset.astroSourceRoot ?? 'file://');
}
const file = el.dataset.astroSourceFile;
const loc = el.dataset.astroSourceLoc;
if (!file) return;
const url = new URL(`.${file}${loc ? `:${loc}` : ''}`, projectRoot);
return `vscode://file${url.pathname}`;
}

9
packages/integrations/devtools/src/client/index.ts Normal file
View file

@ -0,0 +1,9 @@
import clickToComponent from "./click-to-component.js";
class AstroDevToolsInstance {
init() {
clickToComponent();
}
}
export const AstroDevTools = new AstroDevToolsInstance();

21
packages/integrations/devtools/src/index.ts Normal file
View file

@ -0,0 +1,21 @@
import type { AstroIntegration } from 'astro';
export interface AstroDevToolsOptions {
schema?: string;
}
export default function (opts: AstroDevToolsOptions): AstroIntegration {
return {
name: '@astrojs/devtools',
hooks: {
'astro:config:setup': ({ command, injectScript }) => {
if (command !== 'dev') return;
injectScript(
'page',
`import { AstroDevTools } from "@astrojs/devtools/client"; AstroDevTools.init();`
);
}
},
};
}

42
pnpm-lock.yaml
View file

@ -548,8 +548,8 @@ importers:
'@babel/generator': 7.17.9
'@babel/parser': 7.17.9
'@babel/traverse': 7.17.9
'@proload/core': 0.3.2-next.4
'@proload/plugin-tsm': 0.2.1-next.0_@proload+core@0.3.2-next.4
'@proload/core': 0.3.2
'@proload/plugin-tsm': 0.2.1_@proload+core@0.3.2
ast-types: 0.14.2
boxen: 6.2.1
ci-info: 3.3.0
@ -1267,6 +1267,14 @@ importers:
'@astrojs/react': link:../../../../react
astro: link:../../../../../astro
packages/integrations/devtools:
specifiers:
astro: workspace:*
astro-scripts: workspace:*
devDependencies:
astro: link:../../astro
astro-scripts: link:../../../scripts
packages/integrations/lit:
specifiers:
'@lit-labs/ssr': ^2.1.0
@ -1420,7 +1428,7 @@ importers:
postcss: ^8.4.12
tailwindcss: ^3.0.24
dependencies:
'@proload/core': 0.3.1
'@proload/core': 0.3.2
autoprefixer: 10.4.4_postcss@8.4.12
postcss: 8.4.12
tailwindcss: 3.0.24
@ -3652,27 +3660,19 @@ packages:
/@polka/url/1.0.0-next.21:
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
/@proload/core/0.3.1:
resolution: {integrity: sha512-u902sdjipQ6WjpV6rxcF0CnQP6Z6Gd54MBPuMbZ5amCcdb/meWY6UtCQSLIJmG+zbXtf8Hwzf6ePBey158QAQQ==}
dependencies:
deepmerge: 4.2.2
escalade: 3.1.1
resolve-pkg: 2.0.0
dev: false
/@proload/core/0.3.2-next.4:
resolution: {integrity: sha512-58nw3h4+qBDizhlTbt/Q4iGWiiSWcYqdRgIAy3KMla1nqNFO8stG5vzDjPGMPyX6DsAhEj3PCqb4G0d82b2kqQ==}
/@proload/core/0.3.2:
resolution: {integrity: sha512-4ga4HpS0ieVYWVMS+F62W++6SNACBu0lkw8snw3tEdH6AeqZu8i8262n3I81jWAWXVcg3sMfhb+kBexrfGrTUQ==}
dependencies:
deepmerge: 4.2.2
escalade: 3.1.1
dev: false
/@proload/plugin-tsm/0.2.1-next.0_@proload+core@0.3.2-next.4:
resolution: {integrity: sha512-76NvJmWD1MBip1oifMLohTJfdi4DQihTUnwWacscsLxUaT/5/FNNolD5CIoH/+qhsU6HyVpz8JfEzVpkMuxKfA==}
/@proload/plugin-tsm/0.2.1_@proload+core@0.3.2:
resolution: {integrity: sha512-Ex1sL2BxU+g8MHdAdq9SZKz+pU34o8Zcl9PHWo2WaG9hrnlZme607PU6gnpoAYsDBpHX327+eu60wWUk+d/b+A==}
peerDependencies:
'@proload/core': ^0.3.2-next.0
'@proload/core': ^0.3.2
dependencies:
'@proload/core': 0.3.2-next.4
'@proload/core': 0.3.2
tsm: 2.2.1
dev: false
@ -8971,13 +8971,7 @@ packages:
/resolve-from/5.0.0:
resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
engines: {node: '>=8'}
/resolve-pkg/2.0.0:
resolution: {integrity: sha512-+1lzwXehGCXSeryaISr6WujZzowloigEofRB+dj75y9RRa/obVcYgbHJd53tdYw8pvZj8GojXaaENws8Ktw/hQ==}
engines: {node: '>=8'}
dependencies:
resolve-from: 5.0.0
dev: false
dev: true
/resolve/1.22.0:
resolution: {integrity: sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==}