Skip to content

Commit

Permalink
better build pipeline for devtools
Browse files Browse the repository at this point in the history
  • Loading branch information
nksaraf committed Oct 24, 2023
1 parent 70f5e3b commit b4a24b5
Show file tree
Hide file tree
Showing 13 changed files with 159 additions and 562 deletions.
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,3 @@ dist
docs/.vitepress/dist
docs/.vitepress/cache
.vitepress


2 changes: 1 addition & 1 deletion examples/vanilla/spa/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@
"@vinxi/plugin-server-functions": "workspace:^",
"autoprefixer": "^10.4.15",
"tailwindcss": "^3.3.3",
"vinxi": "0.0.37"
"vinxi": "0.0.38"
}
}
40 changes: 32 additions & 8 deletions packages/vinxi-devtools/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,40 @@ const app = createApp({
routers: [devtoolsClientDev()],
});

app.hooks.hook("app:build:end", async () => {
const { default: fs } = await import("fs/promises");
await fs.rm;
await fs.cp(".nitro/build/devtools-client/__devtools/client", "dist/client", {
recursive: true,
});
await fs.cp("style.css", "dist/style.css", {
recursive: true,
function flatten(items) {
const flat = [];

items.forEach((item) => {
if (Array.isArray(item)) {
flat.push(...flatten(item));
} else {
flat.push(item);
}
});

return flat;
}

app.hooks.hook("app:build:router:vite:config", async ({ vite }) => {
console.log(vite);

vite.plugins = flatten(vite.plugins).filter(
(plugin) => plugin?.name !== "vinxi:inject-client",
);
console.log(vite);
});

app.hooks.hook("app:build:end", async () => {
const { default: fs } = await import("fs/promises");
try {
await fs.open("dist");
await fs.rmdir("dist", { recursive: true });
await fs.mkdir("dist");
} catch (e) {
await fs.mkdir("dist");
}
await $`cp -r .vinxi/build/devtools-client/__devtools/client dist/client`;
await $`cp style.css dist/style.css`;
console.log((await $`npm run build:mount`).stdout);
});

Expand Down
17 changes: 16 additions & 1 deletion packages/vinxi-devtools/devtools-dev.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,32 @@
import react from "@vitejs/plugin-react";
import unocss from "unocss/vite";
import { config } from "vinxi/plugins/config";

import { fileURLToPath } from "node:url";

import unocssConfig from "./uno.config.js";

/** @returns {import('vinxi').RouterSchemaInput} */
export const devtoolsClientDev = () => {
return {
name: "devtools-client",
mode: "spa",
handler: fileURLToPath(new URL("./index.html.js", import.meta.url)),
target: "browser",
base: "/__devtools/client",
plugins: () => [unocss(unocssConfig), react()],
plugins: () => [
unocss(unocssConfig),
react(),
{
name: "remove-vinxi-inject",
config(config) {
return {
plugins: config.plugins
.flat()
.filter((plugin) => plugin?.name !== "vinxi:inject-client"),
};
},
},
],
};
};
9 changes: 3 additions & 6 deletions packages/vinxi-devtools/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { fileURLToPath } from "node:url";

export { default as inspect } from "vite-plugin-inspect";

/** @returns {import('vinxi').RouterSchemaInput} */
export const devtoolsRpc = () => {
return {
name: "devtools-rpc",
Expand All @@ -13,16 +14,12 @@ export const devtoolsRpc = () => {
};
};

/** @returns {import('vinxi').RouterSchemaInput} */
export const devtoolsClient = () => {
return {
name: "devtools-client",
mode: "static",
dir: fileURLToPath(
new URL(
"./.nitro/build/devtools-client/__devtools/client",
import.meta.url,
),
),
dir: fileURLToPath(new URL("./dist/client", import.meta.url)),
base: "/__devtools/client",
};
};
3 changes: 1 addition & 2 deletions packages/vinxi-devtools/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@
"devtools-rpc.js",
"index.js",
"rpc.js",
"dist",
".nitro/build/devtools-client/**/*"
"dist"
],
"devDependencies": {
"@iconify/json": "^2.2.130",
Expand Down
5 changes: 2 additions & 3 deletions packages/vinxi/lib/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -221,8 +221,7 @@ export async function createBuild(app, buildConfig) {
})
.filter(Boolean),
),
)}
))
function createProdApp(appConfig) {
return {
Expand Down Expand Up @@ -253,7 +252,7 @@ export async function createBuild(app, buildConfig) {
return `
import { eventHandler } from 'vinxi/server'
const html = ${JSON.stringify(indexHtml)}
export default eventHandler(event => {
export default eventHandler(event => {
return html
})
`;
Expand Down
2 changes: 1 addition & 1 deletion packages/vinxi/lib/dev-server.js
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@ export async function createDevServer(
},
};

console.log(serveConfig);
if (devtools) {
const { devtoolsClient, devtoolsRpc } = await import("@vinxi/devtools");
app.addRouter(devtoolsClient());
Expand Down Expand Up @@ -130,6 +129,7 @@ export async function createDevServer(
.flat(),
...(app.config.server.publicAssets ?? []),
],
buildDir: ".vinxi",
devHandlers: [
...(
await Promise.all(
Expand Down
103 changes: 54 additions & 49 deletions packages/vinxi/lib/plugins/manifest.js
Original file line number Diff line number Diff line change
@@ -1,67 +1,72 @@
/**
*
* @returns {import("../vite-dev.d.ts").Plugin}
* @returns {import("../vite-dev.d.ts").Plugin[]}
*/
export function manifest() {
/** @type {import("../router-mode.js").Router | undefined} */
let router;
/** @type {import("../app.js").App | undefined} */
let app;

return {
name: "vinxi:manifest",
config(config) {
router = config.router;
app = config.app;
return [
{
name: "vinxi:manifest",
config(config) {
router = config.router;
app = config.app;

if (!router || !app) {
throw new Error("Missing router or app");
}
return {
define: {
"import.meta.env.MANIFEST": `globalThis.MANIFEST`,
"import.meta.env.ROUTER_NAME": JSON.stringify(router.name),
"import.meta.env.ROUTER_HANDLER": JSON.stringify(router.handler),
"import.meta.env.CWD": JSON.stringify(router.root),
"import.meta.env.ROUTERS": JSON.stringify(
app.config.routers.map((router) => router.name),
),
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
"import.meta.env.DEVTOOLS": config.dev?.devtools
? JSON.stringify(config.dev.devtools)
: `false`,
},
};
},
transformIndexHtml(html) {
return [
{
tag: "script",
attrs: {
type: "module",
src: `/@fs${process.cwd()}/node_modules/vinxi/runtime/client.js`,
},
},
];
},
async load(id) {
if (id.startsWith("/@manifest")) {
if (!router || !app) {
throw new Error("Missing router or app");
}
return {
define: {
"import.meta.env.MANIFEST": `globalThis.MANIFEST`,
"import.meta.env.ROUTER_NAME": JSON.stringify(router.name),
"import.meta.env.ROUTER_HANDLER": JSON.stringify(router.handler),
"import.meta.env.CWD": JSON.stringify(router.root),
"import.meta.env.ROUTERS": JSON.stringify(
app.config.routers.map((router) => router.name),
),
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
"import.meta.env.DEVTOOLS": config.dev?.devtools
? JSON.stringify(config.dev.devtools)
: `false`,
},
};
},
async load(id) {
if (id.startsWith("/@manifest")) {
if (!router || !app) {
throw new Error("Missing router or app");
}

const [path, query] = id.split("?");
const params = new URLSearchParams(query);
if (path.endsWith("assets")) {
const id = params.get("id");
if (!id) {
throw new Error("Missing id to get assets.");
const [path, query] = id.split("?");
const params = new URLSearchParams(query);
if (path.endsWith("assets")) {
const id = params.get("id");
if (!id) {
throw new Error("Missing id to get assets.");
}
return `export default ${JSON.stringify(
await globalThis.MANIFEST[router.name].inputs[id].assets(),
)}`;
}
return `export default ${JSON.stringify(
await globalThis.MANIFEST[router.name].inputs[id].assets(),
)}`;
}
}
},
},
{
name: "vinxi:inject-client",
transformIndexHtml(html) {
return [
{
tag: "script",
attrs: {
type: "module",
src: `/@fs${process.cwd()}/node_modules/vinxi/runtime/client.js`,
},
},
];
},
},
};
];
}
82 changes: 41 additions & 41 deletions packages/vinxi/lib/router-mode.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,54 +5,54 @@ import { DevConfig } from "./dev-server.js";
import { Internals } from "./router-modes.js";

type PublicAsset = {
baseURL?: string | undefined;
fallthrough?: boolean | undefined;
maxAge?: number | undefined;
dir?: string | undefined;
baseURL?: string | undefined;
fallthrough?: boolean | undefined;
maxAge?: number | undefined;
dir?: string | undefined;
};

type DevHandler = {
route: string;
handler: EventHandler<any, any>;
route: string;
handler: EventHandler<any, any>;
};

type Router<T = {}> = T & {
base: string;
mode: string;
internals: Internals;
order: number;
outDir: string;
target: "server" | "browser" | "static";
root: string;
name: string;
handler?: string;
base: string;
mode: string;
internals: Internals;
order: number;
outDir: string;
target: "server" | "browser" | "static";
root: string;
name: string;
handler?: string;
};

export type RouterMode<T extends any = any> = {
name: string;
dev: {
publicAssets?: (
router: Router<T>,
app: import("./app.js").App,
) => PublicAsset | PublicAsset[] | undefined | void;
plugins?: (
router: Router<T>,
app: import("./app.js").App,
) => Promise<(import("./vite-dev.js").Plugin | null)[]> | undefined | void;
handler?: (
router: Router<T>,
app: App,
serveConfig: DevConfig,
) =>
| Promise<DevHandler | DevHandler[]>
| DevHandler
| DevHandler[]
| undefined
| void;
};
resolveConfig: (
router: T,
appConfig: import("./app.js").AppOptions,
order?: number,
) => T;
name: string;
dev: {
publicAssets?: (
router: Router<T>,
app: import("./app.js").App,
) => PublicAsset | PublicAsset[] | undefined | void;
plugins?: (
router: Router<T>,
app: import("./app.js").App,
) => Promise<(import("./vite-dev.js").Plugin | null)[]> | undefined | void;
handler?: (
router: Router<T>,
app: App,
serveConfig: DevConfig,
) =>
| Promise<DevHandler | DevHandler[]>
| DevHandler
| DevHandler[]
| undefined
| void;
};
resolveConfig: (
router: T,
appConfig: import("./app.js").AppOptions,
order?: number,
) => T;
};
Loading

0 comments on commit b4a24b5

Please sign in to comment.