Merge pull request #2 from alephjs/master

Refresh fork from alephjs/aleph.js

Author: cdoremus

server/bundler.ts renamed to bundler/mod.ts

@@ -3,18 +3,16 @@ import * as path from 'https://deno.land/[email protected]/path/mod.ts'
 import { ensureDir } from 'https://deno.land/[email protected]/fs/ensure_dir.ts'
 import { parseExportNames, transform } from '../compiler/mod.ts'
 import { trimModuleExt } from '../framework/core/module.ts'
-import { defaultReactVersion, defaultReactEsmShBuildVersion } from '../shared/constants.ts'
 import { ensureTextFile, existsFileSync, lazyRemove } from '../shared/fs.ts'
 import log from '../shared/log.ts'
 import util from '../shared/util.ts'
 import { VERSION } from '../version.ts'
-import type { Application, Module } from './app.ts'
+import type { Application, Module } from '../server/app.ts'
 import {
   clearCompilation,
   computeHash,
   getAlephPkgUri,
-  isLoaderPlugin
-} from './helper.ts'
+} from '../server/helper.ts'
 
 export const bundlerRuntimeCode = (`
   window.__ALEPH = {
@@ -211,7 +209,7 @@ export class Bundler {
     const bundleFilename = `polyfill.bundle.${hash.slice(0, 8)}.js`
     const bundleFile = path.join(this.#app.buildDir, bundleFilename)
     if (!existsFileSync(bundleFile)) {
-      const rawPolyfillFile = `${alephPkgUri}/compiler/polyfills/${buildTarget}/mod.ts`
+      const rawPolyfillFile = `${alephPkgUri}/bundler/polyfills/${buildTarget}/mod.ts`
       await this._bundle(rawPolyfillFile, bundleFile)
     }
     this.#bundledFiles.set('polyfill', bundleFilename)

compiler/polyfills/es2015/fetch.ts renamed to bundler/polyfills/es2015/fetch.ts

@@ -121,7 +121,7 @@ export default function Anchor(props: AnchorProps) {
       return
     }
     e.preventDefault()
-    if (isCurrent) {
+    if (!isCurrent) {
       redirect(href, replace)
     }
   }, [isCurrent, href, replace])

compiler/polyfills/es2015/mod.ts renamed to bundler/polyfills/es2015/mod.ts

@@ -13,6 +13,19 @@ import { useDeno, useRouter } from './hooks.ts'
 
 type ReactNode = ReactChild | ReactFragment | ReactPortal
 
+// Any prop that has a default prop becomes optional, but its type is unchanged
+// Undeclared default props are augmented into the resulting allowable attributes
+// If declared props have indexed properties, ignore default props entirely as keyof gets widened
+// Wrap in an outer-level conditional type to allow distribution over props that are unions
+type Defaultize<P, D> = P extends any
+  ? string extends keyof P ? P :
+  & Pick<P, Exclude<keyof P, keyof D>>
+  & Partial<Pick<P, Extract<keyof P, keyof D>>>
+  & Partial<Pick<D, Exclude<keyof D, keyof P>>>
+  : never
+
+type ReactManagedProps<C, P> = C extends { defaultProps: infer D } ? Defaultize<P, D> : P
+
 /**
  * `withRouter` allows you to use `useRouter` hook with class component.
  *
@@ -66,12 +79,12 @@ export function withDeno<T>(callback: () => (T | Promise<T>), revalidate?: numbe
  * }
  * ```
  *
- * @param {Function} factory - load factory.
+ * @param {Function} factory - dynamic loading factory.
  */
 export function dynamic<T extends ComponentType<any>>(
   factory: () => Promise<{ default: T }>
-): ComponentType<ComponentPropsWithRef<T> & { fallback?: ReactNode }> {
-  const DynamicComponent = ({ fallback, ...props }: ComponentPropsWithRef<T> & { fallback?: ReactNode }) => {
+): ComponentType<ReactManagedProps<T, ComponentPropsWithRef<T>> & { fallback?: ReactNode }> {
+  const DynamicComponent = ({ fallback, ...props }: ReactManagedProps<T, ComponentPropsWithRef<T>> & { fallback?: ReactNode }) => {
     const [mod, setMod] = useState<{ default: T } | null>(null)
 
     useEffect(() => {

framework/react/anchor.ts

@@ -40,7 +40,7 @@ export function useDeno<T = any>(callback: () => (T | Promise<T>), revalidate?:
     const dataUrl = 'pagedata://' + pathname
     const eventName = 'useDeno-' + dataUrl
     const key = dataUrl + '#' + id
-    const expires = revalidate ? Date.now() + revalidate * 1000 : 0
+    const expires = typeof revalidate === 'number' && !isNaN(revalidate) ? Date.now() + revalidate * 1000 : 0
     const renderingDataCache = global['rendering-' + dataUrl]
     if (renderingDataCache && key in renderingDataCache) {
       return renderingDataCache[key] // 2+ pass

framework/react/hoc.ts

@@ -1,8 +1,8 @@
 {
   "imports": {
-    "aleph/": "https://deno.land/x/[email protected].23/",
-    "framework": "https://deno.land/x/[email protected].23/framework/core/mod.ts",
-    "framework/react": "https://deno.land/x/[email protected].23/framework/react/mod.ts",
+    "aleph/": "https://deno.land/x/[email protected].24/",
+    "framework": "https://deno.land/x/[email protected].24/framework/core/mod.ts",
+    "framework/react": "https://deno.land/x/[email protected].24/framework/react/mod.ts",
     "react": "https://esm.sh/[email protected]",
     "react-dom": "https://esm.sh/[email protected]"
   }

framework/react/hooks.ts

@@ -1,6 +1,6 @@
 import { bold, dim } from 'https://deno.land/[email protected]/fmt/colors.ts'
-import { walk } from 'https://deno.land/[email protected]/fs/walk.ts'
 import { ensureDir } from 'https://deno.land/[email protected]/fs/ensure_dir.ts'
+import { walk } from 'https://deno.land/[email protected]/fs/walk.ts'
 import { createHash } from 'https://deno.land/[email protected]/hash/mod.ts'
 import {
   basename,
@@ -9,7 +9,7 @@ import {
   join,
   resolve
 } from 'https://deno.land/[email protected]/path/mod.ts'
-import { CSSProcessor } from '../compiler/css.ts'
+import { Bundler, bundlerRuntimeCode } from '../bundler/mod.ts'
 import {
   buildChecksum,
   ImportMap,
@@ -22,8 +22,7 @@ import { EventEmitter } from '../framework/core/events.ts'
 import { moduleExts, toPagePath, trimModuleExt } from '../framework/core/module.ts'
 import { RouteModule, Routing } from '../framework/core/routing.ts'
 import {
-  defaultReactVersion,
-  defaultReactEsmShBuildVersion,
+  defaultReactEsmShBuildVersion, defaultReactVersion,
   minDenoVersion
 } from '../shared/constants.ts'
 import {
@@ -36,11 +35,11 @@ import util from '../shared/util.ts'
 import type {
   Config,
   RouterURL,
-  ServerApplication,
+  ServerApplication
 } from '../types.ts'
 import { VERSION } from '../version.ts'
-import { Bundler, bundlerRuntimeCode } from './bundler.ts'
-import { defaultConfig, loadConfig, loadImportMap, loadPostCSSConfig } from './config.ts'
+import { defaultConfig, loadConfig, loadImportMap } from './config.ts'
+import { CSSProcessor } from './css.ts'
 import {
   computeHash,
   formatBytesWithColor,
@@ -79,7 +78,6 @@ export class Application implements ServerApplication {
   readonly importMap: ImportMap
   readonly ready: Promise<void>
 
-  #dirs: Map<string, string> = new Map()
   #modules: Map<string, Module> = new Map()
   #pageRouting: Routing = new Routing({})
   #apiRouting: Routing = new Routing({})
@@ -109,20 +107,20 @@ export class Application implements ServerApplication {
   /** initiate application */
   private async init(reload: boolean) {
     let t = performance.now()
-    const [config, importMap, postcssConfig] = await Promise.all([
+    const [config, importMap,] = await Promise.all([
       loadConfig(this.workingDir),
       loadImportMap(this.workingDir),
-      loadPostCSSConfig(this.workingDir),
     ])
 
     Object.assign(this.config, config)
     Object.assign(this.importMap, importMap)
     this.#pageRouting.config(this.config)
-    this.#cssProcesser.config(!this.isDev, postcssConfig.plugins)
+    this.#cssProcesser.config(!this.isDev, this.config.postcss.plugins)
 
     // inject env variables
     Deno.env.set('ALEPH_VERSION', VERSION)
-    Deno.env.set('BUILD_MODE', this.mode)
+    Deno.env.set('ALEPH_BUILD_MODE', this.mode)
+    Deno.env.set('ALEPH_FRAMEWORK', this.framework)
 
     // inject browser navigator polyfill
     Object.assign((globalThis as any).navigator, {
@@ -149,7 +147,8 @@ export class Application implements ServerApplication {
     const buildManifestFile = join(this.buildDir, 'build.manifest.json')
     const configChecksum = computeHash(JSON.stringify({
       ...this.sharedCompileOptions,
-      plugins: this.config.plugins.filter(isLoaderPlugin).map(({ name }) => name)
+      plugins: this.config.plugins.filter(isLoaderPlugin).map(({ name }) => name),
+      postcssPlugins: this.config.postcss.plugins.map(p => p.toString())
     }, (key: string, value: any) => {
       if (key === 'inlineStylePreprocess') {
         return void 0
@@ -195,12 +194,12 @@ export class Application implements ServerApplication {
     }
 
     // init framework
-    const { init } = await import(`../framework/${this.config.framework}/init.ts`)
+    const { init } = await import(`../framework/${this.framework}/init.ts`)
     await init(this)
 
     // import framework renderer
     if (this.config.ssr) {
-      const { jsFile } = await this.compile(`${alephPkgUri}/framework/${this.config.framework}/renderer.ts`)
+      const { jsFile } = await this.compile(`${alephPkgUri}/framework/${this.framework}/renderer.ts`)
       const { render } = await import(`file://${jsFile}`)
       if (util.isFunction(render)) {
         this.#renderer.setFrameworkRenderer({ render })
@@ -210,7 +209,7 @@ export class Application implements ServerApplication {
     log.info('Compiling...')
 
     // pre-compile framework modules
-    await this.compile(`${alephPkgUri}/framework/${this.config.framework}/bootstrap.ts`)
+    await this.compile(`${alephPkgUri}/framework/${this.framework}/bootstrap.ts`)
     if (this.isDev) {
       await this.compile(`${alephPkgUri}/framework/core/hmr.ts`)
       await this.compile(`${alephPkgUri}/framework/core/nomodule.ts`)
@@ -405,16 +404,20 @@ export class Application implements ServerApplication {
     return this.mode === 'development'
   }
 
+  get framework() {
+    return this.config.framework
+  }
+
   get srcDir() {
-    return this.getDir('src', () => join(this.workingDir, this.config.srcDir))
+    return join(this.workingDir, this.config.srcDir)
   }
 
   get outputDir() {
-    return this.getDir('output', () => join(this.workingDir, this.config.outputDir))
+    return join(this.workingDir, this.config.outputDir)
   }
 
   get buildDir() {
-    return this.getDir('build', () => join(this.workingDir, '.aleph', this.mode))
+    return join(this.workingDir, '.aleph', this.mode)
   }
 
   get loaders() {
@@ -757,16 +760,6 @@ export class Application implements ServerApplication {
     log.info(`Done in ${Math.round(performance.now() - start)}ms`)
   }
 
-  private getDir(name: string, init: () => string) {
-    if (this.#dirs.has(name)) {
-      return this.#dirs.get(name)!
-    }
-
-    const dir = init()
-    this.#dirs.set(name, dir)
-    return dir
-  }
-
   private createRouteUpdate(url: string): [string, string, { isIndex?: boolean, useDeno?: boolean }] {
     const isBuiltinModule = moduleExts.some(ext => url.endsWith('.' + ext))
     let pagePath = isBuiltinModule ? toPagePath(url) : util.trimSuffix(url, '/pages')
@@ -1231,7 +1224,7 @@ export class Application implements ServerApplication {
 
     // add framwork bootstrap module as shared entry
     entryMods.set(
-      [`${getAlephPkgUri()}/framework/${this.config.framework}/bootstrap.ts`],
+      [`${getAlephPkgUri()}/framework/${this.framework}/bootstrap.ts`],
       true
     )
 

import_map.json

@@ -1,11 +1,10 @@
 import { join } from 'https://deno.land/[email protected]/path/mod.ts'
-import type { PostCSSPlugin } from '../compiler/css.ts'
 import type { ImportMap } from '../compiler/mod.ts'
 import { defaultReactVersion } from '../shared/constants.ts'
 import { existsFileSync, existsDirSync } from '../shared/fs.ts'
 import log from '../shared/log.ts'
 import util from '../shared/util.ts'
-import type { Config } from '../types.ts'
+import type { Config, PostCSSPlugin } from '../types.ts'
 import { getAlephPkgUri, reLocaleID } from './helper.ts'
 
 export const defaultConfig: Readonly<Required<Config>> = {
@@ -19,6 +18,7 @@ export const defaultConfig: Readonly<Required<Config>> = {
   rewrites: {},
   ssr: {},
   plugins: [],
+  postcss: { plugins: ['autoprefixer'] },
   headers: {},
   env: {},
 }
@@ -60,6 +60,7 @@ export async function loadConfig(workingDir: string): Promise<Config> {
     ssr,
     rewrites,
     plugins,
+    postcss,
     headers,
     env,
   } = data
@@ -68,7 +69,10 @@ export async function loadConfig(workingDir: string): Promise<Config> {
   }
   if (util.isNEString(srcDir)) {
     config.srcDir = util.cleanPath(srcDir)
-  } else if (existsDirSync(join(workingDir, 'src'))) {
+  } else if (
+    !existsDirSync(join(workingDir, 'pages')) &&
+    existsDirSync(join(workingDir, 'src', 'pages'))
+  ) {
     config.srcDir = '/src'
   }
   if (util.isNEString(outputDir)) {
@@ -107,32 +111,16 @@ export async function loadConfig(workingDir: string): Promise<Config> {
   if (util.isNEArray(plugins)) {
     config.plugins = plugins
   }
+  if (isPostcssConfig(postcss)) {
+    config.postcss = postcss
+  } else {
+    config.postcss = await loadPostCSSConfig(workingDir)
+  }
 
   return config
 }
 
-export async function loadPostCSSConfig(workingDir: string): Promise<{ plugins: PostCSSPlugin[] }> {
-  for (const name of Array.from(['ts', 'js', 'json']).map(ext => `postcss.config.${ext}`)) {
-    const p = join(workingDir, name)
-    if (existsFileSync(p)) {
-      let config: any = null
-      if (name.endsWith('.json')) {
-        config = JSON.parse(await Deno.readTextFile(p))
-      } else {
-        const mod = await import('file://' + p)
-        config = mod.default
-        if (util.isFunction(config)) {
-          config = await config()
-        }
-      }
-      if (isPostcssConfig(config)) {
-        return config
-      }
-    }
-  }
 
-  return { plugins: ['autoprefixer'] }
-}
 
 /** load import maps from `import_map.json` */
 export async function loadImportMap(workingDir: string): Promise<ImportMap> {
@@ -169,6 +157,29 @@ export async function loadImportMap(workingDir: string): Promise<ImportMap> {
   return importMap
 }
 
+async function loadPostCSSConfig(workingDir: string): Promise<{ plugins: PostCSSPlugin[] }> {
+  for (const name of Array.from(['ts', 'js', 'json']).map(ext => `postcss.config.${ext}`)) {
+    const p = join(workingDir, name)
+    if (existsFileSync(p)) {
+      let config: any = null
+      if (name.endsWith('.json')) {
+        config = JSON.parse(await Deno.readTextFile(p))
+      } else {
+        const mod = await import('file://' + p)
+        config = mod.default
+        if (util.isFunction(config)) {
+          config = await config()
+        }
+      }
+      if (isPostcssConfig(config)) {
+        return config
+      }
+    }
+  }
+
+  return { plugins: ['autoprefixer'] }
+}
+
 function isFramework(v: any): v is 'react' {
   switch (v) {
     case 'react':

server/app.ts

@@ -1,11 +1,9 @@
-import { Plugin, PluginCreator } from 'https://esm.sh/[email protected]'
 import util from '../shared/util.ts'
+import { PostCSSPlugin } from '../types.ts'
 
 const postcssVersion = '8.2.8'
 const productionOnlyPostcssPlugins = ['autoprefixer']
 
-export type PostCSSPlugin = string | [string, any] | Plugin | PluginCreator<any>
-
 export class CSSProcessor {
   #isProd: boolean
   #postcssPlugins: PostCSSPlugin[]
@@ -70,7 +68,7 @@ async function initCleanCSS() {
 
 async function initPostCSS(plugins: PostCSSPlugin[]) {
   const { default: PostCSS } = await import(`https://esm.sh/postcss@${postcssVersion}`)
-  const isDev = Deno.env.get('BUILD_MODE') === 'development'
+  const isDev = Deno.env.get('ALEPH_BUILD_MODE') === 'development'
   return PostCSS(await Promise.all(plugins.filter(p => {
     if (isDev) {
       if (util.isNEString(p) && productionOnlyPostcssPlugins.includes(p)) {