lucacasonato / dext.ts

The Preact Framework for Deno

dext.ts

The Preact Framework for Deno. Dext.ts is heavily inspired by Next.js.

• Zero config
• Pre-render pages at build time (SSG)
• Tiny (example is only 5.75KB of JS)
• Client hydration
• Built-in routing
• Zero config TypeScript support
• File-system routing
• Code-splitting, bundling, and tree shaking built in

Installing

To install, run the following command. This will make the dext CLI available in your path.

deno install --allow-read --allow-write --allow-env --allow-net --allow-run --unstable -f -n dext https://deno.land/x/[email protected]/cli.ts

Getting started

To create a new project run dext create myproject. This will scaffold a new dext project in the myproject folder. This folder contains a few files:

• deps.ts contains all of your projects dependencies.
• pages/index.tsx is the source for the / of your project.
• pages/user/[name].tsx is the source for all routes at /user/[name] (e.g. /user/luca and /user/bartek).
• tsconfig.json is the TypeScript configuration that the project uses.
• .gitignore tells git to ignore the .dext folder that is created by dext dev and dext build.

Now that you have a project set up, you can start the development server using dext dev. After a few seconds you can view your built page at http://127.0.0.1:3000. When you change any of the files in the pages directory, your project will be rebuilt automatically, and the page will be automatically reloaded in the browser.

When you are ready to deploy to production, run dext build. This will generate a production optimized build. You can start a production webserver to serve this build with dext start.

Example

For an example, see the /example folder. You can create a production build it by running dext build, and then serve it by running dext start. You can also run dext dev to start watching, building, and serving.

You can also see a deployed version of this example on at https://dext.fly.dev.

dext.ts's Issues

I can't install dext, what version of Deno do I need?

I tried to install dext according to the instructions in the README, but I got an error.

Command

deno install --allow-read --allow-write --allow-env --allow-net --allow-run --unstable -f -n dext https://deno.land/x/[email protected]/cli.ts

Error

Check https://deno.land/x/[email protected]/cli.ts
error: TS2339 [ERROR]: Property 'emit' does not exist on type 'typeof Deno'.
        const result = await Deno.emit(id, {
                                  ~~~~
    at https://raw.githubusercontent.com/denofn/denopack/8bae39bef47e532a1e8d0f6700b72a2192f7bca4/plugin/typescriptTransform/mod.ts:19:35

TS2339 [ERROR]: Property 'emit' does not exist on type 'typeof Deno'.
  const { diagnostics, files: emitFiles } = await Deno.emit(importee, {
                                                       ~~~~
    at https://raw.githubusercontent.com/denofn/denopack/8bae39bef47e532a1e8d0f6700b72a2192f7bca4/plugin/typescriptCompile/mod.ts:45:56

Found 2 errors.

My environment is as below.

> deno --version

deno 1.6.3 (release, x86_64-pc-windows-msvc)
v8 8.8.294
typescript 4.1.3

Is it due to the fact that the Deno version is too low?

SyntaxError: The requested module '/polyfill/node/path.ts' does not provide an export named 'default'

While trying to install dext with the latest deno version by running deno install -r --allow-read --allow-write --allow-env --allow-net --allow-run --unstable -f -n dext https://deno.land/x/[email protected]/cli.ts, I get the following errors:

Warning Failed to get compiled source code of "https://cdn.dreg.dev/polyfill/node/path.ts".
Reason: No such file or directory (os error 2)
If the source file provides only type exports, prefer to use "import type" or "export type" syntax instead.
Warning Failed to get compiled source code of "https://cdn.dreg.dev/polyfill/node/process.ts".
Reason: No such file or directory (os error 2)
If the source file provides only type exports, prefer to use "import type" or "export type" syntax instead.
error: Uncaught SyntaxError: The requested module '/polyfill/node/path.ts' does not provide an export named 'default'

JSX not recognized in vscode

I cannot get correct JSX in vscode (despite using the deno extension)

I followed the readme, getting started
deno install // but here I added --no-check because it was not ok
dext create myproject
and
inside pages/index.ts
vscode displays the following error on the first jsx <> :
Cannot find name 'React'.deno-ts(2304)

I really have no clue how to fix this !
Thanks !

Add API routes

The user should be able to add routes to pages/api that should be treated as server side API endpoints rather than HTML pages. The signature for an API route would look something like this:

// pages/api/redirect.ts

export default async (req: Request): Promise<Response> => {
  return Response.redirect(req.headers.get("X-Redirect-To"), 307); 
}

Add support for <Head> component to change meta and title

This should work both at runtime using a portal, and during pre-render.

cli installing error

Hi guys, I get this error every time I try to install dext CLI

Warning Failed to get compiled source code of "https://cdn.dreg.dev/polyfill/node/path.ts".
Reason: The system cannot find the file specified. (os error 2)
If the source file provides only type exports, prefer to use "import type" or "export type" syntax instead.
Warning Failed to get compiled source code of "https://cdn.dreg.dev/polyfill/node/process.ts".
Reason: The system cannot find the file specified. (os error 2)
If the source file provides only type exports, prefer to use "import type" or "export type" syntax instead.
error: Uncaught SyntaxError: The requested module '/polyfill/node/path.ts' does not provide an export named 'default'

deno: 1.4.4
platform: windows 10

Consider switching to /x/drollup

drollup (deno-rollup https://github.com/cmorten/deno-rollup) looks more maintained than denopack (It is tested with 1.7.4). It seems supporting import map (It has import map plugin). With import map like {"imports":{"@/", "./"}} we can avoid excessively consecutive '../../' in application source. (The path like "../../../components/blah" can be written like "@/components/blah"

Switch to esbuild

I am confident this is possible after the release of x/esbuild. I played around with it last weekend, and managed to write a Deno resolution module loader in only a few hundred lines. Will publish the loader plugin shortly.

Add support for custom HTML document wrapper

Currently the HTML document is hard coded. It should be possible to specify a pages/_document.tsx file that defines the HTML document in JSX. This file is prerendered before all other files. It is not included in the client bundle.

This should be mostly based of https://nextjs.org/docs/advanced-features/custom-document. It should allow functional component style though, not just class based syntax.

JIT prerender & cache pages in dev mode

This should speed up rebuilds.

isolatedModules were ignored

> rm -rf /home/ryan/.cache/deno
> cd dext.ts/example
> deno run --no-check -A --unstable https://deno.land/x/[email protected]/cli.ts build
[...]
Unsupported compiler options in "/home/ryan/src/dext.ts/example/tsconfig.json".
  The following options were ignored:
    isolatedModules

Hot refresh

As a step towards hot module reloading and prefresh, we should automatically reload the browser page after the bundle was rebuilt in dev mode. There should be a command line flag to disable this behavior (e.g. --no-hot-refresh).

Add option to export static build for netlify

Add a dext export netlify command that generates a folder with all static assets, and a _redirects file from a built .dext folder and the contained pagemap.json. This would essentially allow you to serve the project without using dext start. The _redirects file would take the place of the routing in dext start.

Example(s) with Deno Deploy

There's this new Deno Deploy, but it seem this library isn't really compatible with it?

Custom 404 page

A user should be able to specify the look of the 404 page by creating a pages/_404.tsx file. It should support all of the same features as a regular page, including that it is pre-rendered.

Prefetch routes on link hover

When a user hovers over an <a> tag, the component and data should be pre-fetched.

Make route handling hook based

Instead of injecting the route property for each page, this data should be acquired using a useRouter hook.

Scaffold project using dext create

There should be a dext create command to scaffold a new project. This should create a pages/ directory with a index page and a dynamic page, and the tsconfig.json file.

Add getServerSideData build hook

The getServerSideProps is used to enable dynamic server side rendering. On initial request to the server, the page should be pre-rendered, and on client navigation the data should be fetched from the server, and rendered on the client.

Enable --no-check for dev mode prerenders

`dext dev` results in No such file or directory (os error 2), stat '[..]/dext/.dext/static/index.html' on first run

Just installed the dext cli then ran dext dev which resulted in

No such file or directory (os error 2), stat '[..]/dext/.dext/static/index.html'

on first run, as the listen doesn't seem to wait on the build

second run without issues

Not a big deal but a little confusing at first 😉

Interesting project! 🙌

dext road map

dext it seems be good tool for building frontend using deno ecosystem, and maintain by great dev from deno team.
some question come in mind :
will dext support ssr for be seo friendly ?
dext will have a way to be integrate with deno framwork like oak ?
....

Error on install on 1.7.0

Hey,

thx for your project!

I get this error on check after install:

CLI installation error: @types/[email protected] would be overwritten

When installing the cli I get an error. (deno 1.11, win10)

error: TS5056 [ERROR]: Cannot write file 'https://cdn.dreg.dev/package/@types/[email protected]' because it would be overwritten by multiple input files.

Pasting the url in the browser prompted a "Not Found".
Also a newer version is available: https://libraries.io/npm/@types%2Festree/0.0.48

Add tests for `dext start` and `dext dev`

If client side routing fails, do server side routing

location updates before routing actually happens

The location in URL bar (and the one you get from useLocation) should only update once the route is actually ready (component and data).

Sourcemap and minifying is slow

I tried to measure the elapsed time of each part of bundling process of our use case with this patch, and I got the following result:

Ensure tsconfig 0.004s
findPages 0.418s
ensureDir 0s
writeTextFile 0.001s
Started building
Finished building 0.591s
Finished sourcemap 42.619s
Finished emit 0.03s
minify 9.578s
Finished bundling (all) 52.874s

80% is spent in creating sourcemap and 18% is in minifying. So if we have options for disabling these, it would be useful for certain situations.