explore using bare `app` imports for reusability

For both routes and components, it could be interesting to have an option to import them from another route or component for reusability without using relative imports, which are brittle.

Consider the following route in e.g. routes/base/add-head.js

// PROPOSED: not an actual route: do NOT map requests to `/base/add-head` to this
export const virtual = true;

export default route => ({
  head() {
    // return stuff like headers
  },
  // add all HTTP verbs from route (this could contain an overriding `head` verb)
  ...route,
});

And then in another route:

import base from "app/routes/base/add-head";

export default base({
  get() { ... },
});

This would allow any route to add a HEAD verb to it.

The same could be done with components, to allow reusing base components from anywhere within the components directory.

In itself, the app identifier means nothing (unless you're using the npm package app). But with the new build system, where we put everything inside build, we could add a package.json file there that defines

{
  "name": "app",
  "exports": {
    "./routes/*": "./routes/*.js",
    "./components/*": "./server/components/*.js"
  }
}

For the client-bundling, we'd need to pass in a dynamic tsconfig with paths to esbuild.

primatejs / primate

explore using bare `app` imports for reusability #146