Skip to content

Commit

Permalink
Merge pull request #26 from alephjs/import-remote-css
Browse files Browse the repository at this point in the history 
fix: fix remote css import
  • Loading branch information
X authored Nov 12, 2020
2 parents eb45592 + db2ee61 commit 1a516d3
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 17 deletions.
8 changes: 4 additions & 4 deletions aleph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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()}` : ''))
Expand Down Expand Up @@ -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`)
Expand Down Expand Up @@ -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) {
Expand Down
12 changes: 7 additions & 5 deletions bootstrap.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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) {
Expand Down Expand Up @@ -67,7 +69,7 @@ export default async function bootstrap({
}
}
)
if (mainEl.childElementCount > 0) {
if (renderMode === 'ssr') {
hydrate(el, mainEl)
} else {
render(el, mainEl)
Expand Down
11 changes: 6 additions & 5 deletions project.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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)});`,
Expand Down
5 changes: 3 additions & 2 deletions renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[]
Expand Down Expand Up @@ -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)) {
Expand Down
2 changes: 1 addition & 1 deletion tsc/compile.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down

1 comment on commit 1a516d3

@vercel
Copy link

@vercel vercel bot commented on 1a516d3 Nov 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.