From db2ee616016703206a6e4406dc55449de988955f Mon Sep 17 00:00:00 2001 From: Je Date: Thu, 12 Nov 2020 13:08:46 +0800 Subject: [PATCH] fix: fix remote css import --- aleph.ts | 8 ++++---- bootstrap.ts | 12 +++++++----- project.ts | 11 ++++++----- renderer.ts | 5 +++-- tsc/compile.ts | 2 +- 5 files changed, 21 insertions(+), 17 deletions(-) diff --git a/aleph.ts b/aleph.ts index b9a01b909..236fccc8e 100644 --- a/aleph.ts +++ b/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) { diff --git a/bootstrap.ts b/bootstrap.ts index 653e7a2f0..e50cc86db 100644 --- a/bootstrap.ts +++ b/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) diff --git a/project.ts b/project.ts index c18a2bf24..c1c71a424 100644 --- a/project.ts +++ b/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)});`, diff --git a/renderer.ts b/renderer.ts index 9bfc5914c..68340e737 100644 --- a/renderer.ts +++ b/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)) { diff --git a/tsc/compile.ts b/tsc/compile.ts index ff3f5c4a0..351e15ee2 100644 --- a/tsc/compile.ts +++ b/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, {