Merge pull request #26 from alephjs/import-remote-css

fix: fix remote css import

Author: X

aleph.ts

@@ -4,7 +4,7 @@ import { E400MissingDefaultExportAsComponent, E404Page, ErrorBoundary } from './
 import events from './events.ts'
 import { createPageProps, RouteModule, Routing } from './routing.ts'
 import type { RouterURL } from './types.ts'
-import util, { hashShort, reModuleExt } from './util.ts'
+import util, { hashShort, reHttp } from './util.ts'
 
 export function ALEPH({ initial }: {
     initial: {
@@ -50,7 +50,7 @@ export function ALEPH({ initial }: {
                 if (mod.deps) {
                     // import async dependencies
                     for (const dep of mod.deps.filter(({ isStyle }) => !!isStyle)) {
-                        await import(getModuleImportUrl(baseUrl, { id: dep.url.replace(reModuleExt, '.js'), hash: dep.hash }, e.forceRefetch))
+                        await import(getModuleImportUrl(baseUrl, { id: util.ensureExt(dep.url.replace(reHttp, '/-/'), '.js'), hash: dep.hash }, e.forceRefetch))
                     }
                     if (mod.deps.filter(({ isData, url }) => !!isData && url.startsWith('#useDeno.')).length > 0) {
                         const { default: data } = await import(`/_aleph/data${[url.pathname, url.query.toString()].filter(Boolean).join('@')}/data.js` + (e.forceRefetch ? `?t=${Date.now()}` : ''))
@@ -146,7 +146,7 @@ export function ALEPH({ initial }: {
                     if (mod.deps) {
                         // import async dependencies
                         for (const dep of mod.deps.filter(({ isStyle }) => !!isStyle)) {
-                            await import(getModuleImportUrl(baseUrl, { id: dep.url.replace(reModuleExt, '.js'), hash: dep.hash }))
+                            await import(getModuleImportUrl(baseUrl, { id: util.ensureExt(dep.url.replace(reHttp, '/-/'), '.js'), hash: dep.hash }))
                         }
                         if (mod.deps.filter(({ isData, url }) => !!isData && url.startsWith('#useDeno.')).length > 0) {
                             const { default: data } = await import(`/_aleph/data${[url.pathname, url.query.toString()].filter(Boolean).join('@')}/data.js`)
@@ -208,7 +208,7 @@ export function ALEPH({ initial }: {
 }
 
 export function getModuleImportUrl(baseUrl: string, mod: RouteModule, forceRefetch = false) {
-    return util.cleanPath(baseUrl + '/_aleph/' + util.trimSuffix(mod.id, '.js') + `.${mod.hash.slice(0, hashShort)}.js` + (forceRefetch ? `?t=${Date.now()}` : ''))
+    return util.cleanPath(baseUrl + '/_aleph/' + (mod.id.startsWith('/-/') ? mod.id : util.trimSuffix(mod.id, '.js') + `.${mod.hash.slice(0, hashShort)}.js`) + (forceRefetch ? `?t=${Date.now()}` : ''))
 }
 
 export async function redirect(url: string, replace?: boolean) {

bootstrap.ts

@@ -2,20 +2,22 @@ import React, { ComponentType } from 'https://esm.sh/react'
 import { hydrate, render } from 'https://esm.sh/react-dom'
 import { ALEPH, getModuleImportUrl } from './aleph.ts'
 import { Route, RouteModule, Routing } from './routing.ts'
-import { reModuleExt } from './util.ts'
+import util, { reHttp } from './util.ts'
 
 export default async function bootstrap({
     routes,
     baseUrl,
     defaultLocale,
     locales,
-    preloadModules
+    preloadModules,
+    renderMode
 }: {
     routes: Route[]
     baseUrl: string
     defaultLocale: string
     locales: string[]
-    preloadModules: RouteModule[]
+    preloadModules: RouteModule[],
+    renderMode: 'ssr' | 'spa'
 }) {
     const { document } = window as any
     const mainEl = document.querySelector('main')
@@ -29,7 +31,7 @@ export default async function bootstrap({
         if (mod.deps) {
             // import async dependencies
             for (const dep of mod.deps.filter(({ isStyle }) => !!isStyle)) {
-                await import(getModuleImportUrl(baseUrl, { id: dep.url.replace(reModuleExt, '.js'), hash: dep.hash }))
+                await import(getModuleImportUrl(baseUrl, { id: util.ensureExt(dep.url.replace(reHttp, '/-/'), '.js'), hash: dep.hash }))
             }
         }
         switch (mod.id) {
@@ -67,7 +69,7 @@ export default async function bootstrap({
             }
         }
     )
-    if (mainEl.childElementCount > 0) {
+    if (renderMode === 'ssr') {
         hydrate(el, mainEl)
     } else {
         render(el, mainEl)

project.ts

@@ -127,15 +127,15 @@ export class Project {
         if (reStyleModuleExt.test(moduleID)) {
             return true
         }
+        if (reMDExt.test(moduleID)) {
+            return moduleID.startsWith('/pages/')
+        }
         if (reModuleExt.test(moduleID)) {
             return moduleID === '/404.js' ||
                 moduleID === '/app.js' ||
                 moduleID.startsWith('/pages/') ||
                 moduleID.startsWith('/components/')
         }
-        if (reMDExt.test(moduleID)) {
-            return moduleID.startsWith('/pages/')
-        }
         const plugin = this.config.plugins.find(p => p.test.test(moduleID))
         if (plugin?.acceptHMR) {
             return true
@@ -836,7 +836,8 @@ export class Project {
             routes: this.#routing.routes,
             preloadModules: ['/404.js', '/app.js'].filter(id => this.#modules.has(id)).map(id => {
                 return this._getRouteModule(this.#modules.get(id)!)
-            })
+            }),
+            renderMode: this.config.ssr ? 'ssr' : 'spa'
         }
         const module = this._moduleFromURL('/main.js')
         const metaFile = path.join(this.buildDir, 'main.meta.json')
@@ -1020,7 +1021,7 @@ export class Project {
                 }
                 mod.jsContent = [
                     `import { applyCSS } from ${JSON.stringify(getRelativePath(
-                        path.dirname(mod.url),
+                        path.dirname(fixImportUrl(mod.url)),
                         '/-/deno.land/x/aleph/head.js'
                     ))};`,
                     `applyCSS(${JSON.stringify(url)}, ${JSON.stringify(this.isDev ? `\n${css}\n` : css)});`,

renderer.ts

@@ -6,7 +6,7 @@ import events from './events.ts'
 import { serverStyles } from './head.ts'
 import { createPageProps } from './routing.ts'
 import type { RouterURL } from './types.ts'
-import util, { hashShort } from './util.ts'
+import util, { hashShort, reHttp } from './util.ts'
 
 interface RenderResult {
     head: string[]
@@ -168,7 +168,8 @@ export async function renderPage(
     rendererCache.scriptsElements.clear()
 
     await Promise.all(styles?.map(({ url, hash }) => {
-        return import('file://' + util.cleanPath(`${Deno.cwd()}/.aleph/${buildMode}.${buildTarget}/${url}.${hash.slice(0, hashShort)}.js`))
+        const path = reHttp.test(url) ? url.replace(reHttp, '/-/') : `${url}.${hash.slice(0, hashShort)}`
+        return import('file://' + util.cleanPath(`${Deno.cwd()}/.aleph/${buildMode}.${buildTarget}/${path}.js`))
     }) || [])
     styles?.forEach(({ url }) => {
         if (serverStyles.has(url)) {

tsc/compile.ts

@@ -26,8 +26,8 @@ export function compile(fileName: string, source: string, { mode, target: target
     const target = allowTargets.indexOf(targetName.toLowerCase())
     const transformers: ts.CustomTransformers = { before: [], after: [] }
     if (reactRefresh) transformers.before!.push(reactRefreshTS())
-    transformers.before!.push(createPlainTransformer(transformReactUseDenoHook, { index: 0, signUseDeno }))
     transformers.before!.push(createPlainTransformer(transformReactJsx, { mode, rewriteImportPath }))
+    transformers.after!.push(createPlainTransformer(transformReactUseDenoHook, { index: 0, signUseDeno }))
     transformers.after!.push(createPlainTransformer(transformImportPathRewrite, rewriteImportPath))
 
     return ts.transpileModule(source, {