Latest
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427import { colors, Command, CompletionsCommand, debounce, deferred, fs, path, prettyBytes, RollupCache, Table,} from "./deps/mod.ts";import { bundle } from "./src/bundle.ts";import { dependencyList } from "./src/dependency_graph.ts";import { exportCommand } from "./src/export.ts";import { serve } from "./src/serve.ts";import { findPages, printError } from "./src/util.ts";
const VERSION = "0.10.5";
try { await new Command() .throwErrors() .name("dext") .version(VERSION) .description("The Preact Framework for Deno") .action(function () { console.log(this.getHelp()); }) .command("build [root]") .option( "--typecheck [enabled:boolean]", "If TypeScript code should be typechecked.", { default: true }, ) .option( "--prerender [enabled:boolean]", "If static pages should be server side prerendered.", { default: true }, ) .option( "--debug [include:boolean]", "If preact/debug should be included in the bundle.", { default: false }, ) .description("Build your application.") .action(build) .command("start [root]") .option("-a --address <address>", "The address to listen on.", { default: ":3000", }) .option("--quiet", "If access logs should be printed.") .description("Start a built application.") .action(start) .command("dev [root]") .option("-a --address <address>", "The address to listen on.", { default: ":3000", }) .option( "--hot-refresh [enabled:boolean]", "If hot refresh should be disabled.", { default: true }, ) .option( "--hot-refresh-host <host:string>", "The hostname to use for the hot refresh websocket endpoint. Useful for proxies.", { depends: ["hot-refresh"] }, ) .option( "--typecheck [enabled:boolean]", "If TypeScript code should be typechecked.", { default: false }, ) .option( "--prerender [enabled:boolean]", "If static pages should be server side prerendered.", { default: false }, ) .option( "--debug [include:boolean]", "If preact/debug should be included in the bundle.", { default: true }, ) .description("Start your application in development mode.") .action(dev) .command("create [root]") .description("Scaffold new application.") .action(create) .command("export", exportCommand()) .description("Export a project for Netlify or other providers.") .command("completions", new CompletionsCommand()) .parse(Deno.args);} catch (err) { printError(err); Deno.exit(1);}
async function build( options: { typecheck: boolean; prerender: boolean; debug: boolean }, root?: string,) { root = path.resolve(Deno.cwd(), root ?? "");
const tsconfigPath = path.join(root, "tsconfig.json"); if (!(await fs.exists(tsconfigPath))) { console.log( colors.red(colors.bold("Error: ") + "Missing tsconfig.json file."), ); Deno.exit(1); }
// Collect list of all pages const pagesDir = path.join(root, "pages"); const pages = await findPages(pagesDir);
// Create .dext folder and emit page map const dextDir = path.join(root, ".dext"); await fs.ensureDir(dextDir); const pagemapPath = path.join(dextDir, "pagemap.json"); await Deno.writeTextFile( pagemapPath, JSON.stringify( pages.pages.map((page) => ({ name: page.name, route: page.route, hasGetStaticPaths: page.hasGetStaticPaths, })), ), );
// Do bundling const outDir = path.join(dextDir, "static"); const { stats } = await bundle(pages, { rootDir: root, outDir, tsconfigPath, minify: true, hotRefresh: false, typecheck: options.typecheck, prerender: options.prerender, debug: options.debug, }); console.log(colors.green(colors.bold("Build success.\n")));
if (stats) { const sharedKeys = Object.keys(stats.shared);
new Table() .header([ colors.bold("Page"), colors.bold("Size"), colors.bold("First Load JS"), ]) .body([ ...stats.routes.map((route, i) => { const prefix = stats.routes.length === 1 ? "-" : i === 0 ? "┌" : i === stats.routes.length - 1 ? "└" : "├";
return [ `${prefix} ${route.hasGetStaticData ? "●" : "○"} ${route.route}`, prettyBytes(route.size.brotli), prettyBytes(route.firstLoad.brotli), ]; }), [], [ "+ First Load JS shared by all", prettyBytes(stats.framework.brotli), "", ], ...sharedKeys.map((name, i) => { const size = stats.shared[name]; const isLast = i === sharedKeys.length - 1; return [ ` ${isLast ? "└" : "├"} ${name}`, prettyBytes(size.brotli), "", ]; }), ]) .padding(2) .render(); console.log(); console.log("○ (Static) automatically rendered as static HTML"); console.log( "● (SSG) automatically generated as static HTML + JSON (uses getStaticData)", ); console.log(); console.log( colors.gray("File sizes are measured after brotli compression."), ); }}
async function start( options: { address: string; quiet: boolean }, root?: string,) { root = path.resolve(Deno.cwd(), root ?? "");
const dextDir = path.join(root, ".dext"); const pagemapPath = path.join(dextDir, "pagemap.json"); if (!(await fs.exists(pagemapPath))) { console.log( colors.red( colors.bold("Error: ") + "Page map does not exist. Did you build the project?", ), ); Deno.exit(1); } const pagemap = JSON.parse(await Deno.readTextFile(pagemapPath));
const staticDir = path.join(dextDir, "static");
await serve(pagemap, { staticDir, address: options.address, quiet: options.quiet, });}
async function dev( options: { address: string; hotRefresh: boolean; hotRefreshHost: string; typecheck: boolean; prerender: boolean; debug: boolean; }, maybeRoot?: string,) { const root = path.resolve(Deno.cwd(), maybeRoot ?? "");
const tsconfigPath = path.join(root, "tsconfig.json"); if (!(await fs.exists(tsconfigPath))) { console.log( colors.red(colors.bold("Error: ") + "Missing tsconfig.json file."), ); Deno.exit(1); }
let cache: RollupCache = { modules: [] };
// Collect list of all pages const pagesDir = path.join(root, "pages"); const pages = await findPages(pagesDir);
const dextDir = path.join(root, ".dext"); await fs.ensureDir(dextDir); const outDir = path.join(dextDir, "static");
let doHotRefresh = deferred(); const hotRefresh = (async function* () { while (true) { await doHotRefresh; doHotRefresh = deferred(); yield; } })();
const run = debounce(async function () { const start = new Date(); console.log(colors.cyan(colors.bold("Started build...")));
try { const out = await bundle(pages, { rootDir: root, outDir, tsconfigPath, cache, minify: false, hotRefresh: options.hotRefresh, hotRefreshHost: options.hotRefreshHost, typecheck: options.typecheck, prerender: options.prerender, debug: options.debug, }); cache = out.cache!; doHotRefresh.resolve(); console.log( colors.green( colors.bold( `Build success done ${ ( new Date().getTime() - start.getTime() ).toFixed(0) }ms`, ), ), ); } catch (err) { printError(err); } }, 100);
const pagesPaths = pages.pages.map((page) => page.path); if (pages.app) pagesPaths.push(pages.app.path); if (pages.document) pagesPaths.push(pages.document.path); const deps = await dependencyList(pagesPaths); const toWatch = deps .filter((dep) => dep.startsWith(`file://`)) .map(path.fromFileUrl) .filter((dep) => dep.startsWith(root)); const publicDir = path.join(root, "public"); if (await fs.exists(publicDir)) toWatch.push(publicDir);
(async () => { for await (const { kind } of Deno.watchFs(toWatch, { recursive: true })) { if (kind === "any" || kind === "access") continue; await run(); } })();
const server = serve(pages.pages, { staticDir: outDir, address: options.address, quiet: true, hotRefresh, });
await run(); await server;}
async function create(_options: unknown, maybeRoot?: string) { const root = path.resolve(Deno.cwd(), maybeRoot ?? ""); await fs.ensureDir(root);
const gitIgnorePath = path.join(root, ".gitignore"); await Deno.writeTextFile(gitIgnorePath, "/.dext\n");
const tsconfigPath = path.join(root, "tsconfig.json"); await Deno.writeTextFile( tsconfigPath, JSON.stringify({ compilerOptions: { lib: ["esnext", "dom", "deno.ns"], jsx: "react", jsxFactory: "h", jsxFragmentFactory: "Fragment", }, }), );
const pagesDir = path.join(root, "pages"); await fs.ensureDir(pagesDir);
const depsPath = path.join(root, "deps.ts"); const depsText = `export { Fragment, h } from "https://deno.land/x/dext@${VERSION}/deps/preact/mod.ts";export type { AppProps, GetStaticData, GetStaticDataContext, GetStaticPaths, PageProps,} from "https://deno.land/x/dext@${VERSION}/mod.ts";`; await Deno.writeTextFile(depsPath, depsText);
const indexPath = path.join(pagesDir, "index.tsx"); const indexText = `import { h, Fragment } from "../deps.ts";import type { PageProps, GetStaticData } from "../deps.ts";
interface Data { random: string;}
function IndexPage(props: PageProps<Data>) { return ( <> <h1>Hello World!!!</h1> <p>This is the index page.</p> <p>The random is {props.data.random}.</p> <p> <a href="/user/lucacasonato">Go to @lucacasonato</a> </p> </> );}
export const getStaticData = (): GetStaticData<Data> => { return { data: { random: Math.random().toString(), }, };};
export default IndexPage;`; await Deno.writeTextFile(indexPath, indexText);
const userDir = path.join(pagesDir, "user"); await fs.ensureDir(userDir);
const userPath = path.join(userDir, "[name].tsx"); const userText = `import { h, Fragment } from "../../deps.ts";import type { PageProps } from "../../deps.ts";
function UserPage(props: PageProps) { const name = props.route?.name ?? "";
return ( <> <h1>This is the page for {name}</h1> <p> <a href="/">Go home</a> </p> </> );}
export default UserPage;`; await Deno.writeTextFile(userPath, userText);
console.log(colors.green(colors.bold(`New project created in ${root}`)));}