feat: support root src path(`"@/":"./src/"`)

[ahuigo]

feat: support root src path("@/":"/_ultra/compiler/src/")

1. Support root src path like import Button from '@/components/button.tsx'
2. Add an example and test case about root src path in examples/with-react/router

Refer: https://nextjs.org/docs/advanced-features/module-path-aliases

[deckchairlabs]

Does this also work when building?

[ahuigo]

Does this also work when building?

There are some issues related to Mesozoic to handle.

Since mesozic doesn't support external source like "utlra/":"../../".(refer to https://github.com/deckchairlabs/mesozoic/blob/main/lib/builder.ts#L317)

So, I want to extend mesozic's gatherSources() like this:

// build.test.ts
const sourcesRoot = await builder.gatherSources(root);
const sourcesExternal = await builder.gatherSources('../../', {ignore:[
     "./examples",
      "./.git",
]});
const sources = builder.mergeSources(sourcesRoot, sourcesExternal, ....)

What do you think of this?

[ahuigo]

And there is an another bug (refer to: https://github.com/deckchairlabs/mesozoic/blob/main/lib/builder.ts#L168). I'll try to fix this.

import {
  parse as parseImportMap,
  resolve as importMapResolve,
} from "https://esm.sh/v106/@import-maps/resolve@1.0.1/resolve.js";
const d={
    imports:{
        "ultra/": "../../",
        "ultra-url/": "https://denopkg.com/exhibitionist-digital/ultra@main/",
    }
}
// bad
let m = parseImportMap(d, new URL("file:///home/myuser/ultra/examples/with-react-router"))
console.log('bad:',m.imports[`ultra/`]+'')
m = parseImportMap(d, new URL("file:///home/myuser/ultra/examples/with-react-router/"))
console.log('good1:',m.imports[`ultra/`]+'')
console.log('good2:',m.imports[`ultra-url/`]+'')
/**
 output:
    bad: file:///home/myuser/
    good1: file:///home/myuser/ultra/
    good2: https://denopkg.com/exhibitionist-digital/ultra@main/
 */