search

jaydenseric / ruck

Ruck is an open source buildless React web application framework for Deno.
https://ruck.tech
MIT License
149 stars 1 forks source link

Code style issues #4

Closed NyanHelsing closed 2 years ago

NyanHelsing commented 2 years ago

Mjs is a bit odd to use w. Deno, also it would help if files were in folders a bit more organized

jaydenseric commented 2 years ago

Both of those characteristics are very deliberate, and are based upon years of experience.

.mjs is the correct file extension to use for ESM; Node.js interprets it specially as does cutting edge versions of TypeScript, and a growing list of other tools. I hope and predict in the future we will have universal modules that work via HTTP imports in Node.js (they are currently implementing HTTP imports), Deno, and browsers. I am rolling out a universal pattern for ESM files (.mjs, TypeScript JSDoc types, etc.) across all my Node.js and Deno software. Some of the Ruck dependencies like graphql-react have to use .mjs for Node.js compatibility, so most of the files you see loading in the browser inspector for a Ruck app will have that extension anyway. It would be more "odd" if a few Ruck modules had .js when most have .mjs. In the future when Node.js supports HTTP imports unflagged, Ruck might be updated to support Node.js as well as Deno. If the files are already .mjs breaking changes can be avoided.

The current Ruck module structure is optimal. Having them flat in the project root makes their imports a lot simpler to write, and accordingly less bytes over the wire and stored on disk when caching in Deno and browsers. For example…

Current:

import useCss from "ruck/useCss.mjs";
import useHead from "ruck/useHead.mjs";
import useRoute from "ruck/useRoute.mjs";

VS:

import useCss from "ruck/hooks/useCss.mjs";
import useHead from "ruck/hooks/useHead.mjs";
import useRoute from "ruck/hooks/useRoute.mjs";

Not only in your project module would you have to remember the /hooks/ directory structure and write it out 3 times, but that structure would have bloated all the imports within the Ruck modules too. For example, within ruck/hooks/useRoute.mjs:

import RouteContext from "./RouteContext.mjs";

Would have to be:

import RouteContext from "../components/RouteContext.mjs";

Instead of ./ it's the longer ../components/.

Traditional Node.js/webpack projects don't consider these things because they bundle modules and the original module directory structure is lost anyway. Ruck is designed from the ground up for buildless efficiency.