feat: new Import api

Author: Je

head.ts

@@ -1,10 +1,11 @@
 import React, { Children, createElement, isValidElement, PropsWithChildren, ReactElement, ReactNode, useEffect } from 'https://esm.sh/react'
+import { resetImports } from './importor.ts'
 import util from './util.ts'
 
 const serverHeadElements: Array<{ type: string, props: Record<string, any> }> = []
 const serverStyles: Map<string, { css: string, asLink: boolean }> = new Map()
 
-export function renderHead(styleModules?: string[]) {
+export async function renderHead(styleModules?: string[]) {
     const tags: string[] = []
     serverHeadElements.forEach(({ type, props }) => {
         if (type === 'title') {
@@ -27,6 +28,7 @@ export function renderHead(styleModules?: string[]) {
             }
         }
     })
+    await Promise.all(resetImports().map(path => import(path)))
     styleModules?.filter(id => serverStyles.has(id)).forEach(id => {
         const { css, asLink } = serverStyles.get(id)!
         if (asLink) {

importor.ts

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'https://esm.sh/react'
+import type { Config } from './types.ts'
+import util, { reStyleModuleExt } from './util.ts'
+
+const serverImports: Set<string> = new Set()
+
+// reset imports and returns them
+export function resetImports() {
+    const a = Array.from(serverImports)
+    serverImports.clear()
+    return a
+}
+
+interface ImportProps {
+    from: string
+    rawPath: string
+    resolveDir: string
+}
+
+export function Import({ from, rawPath, resolveDir }: ImportProps) {
+    if (reStyleModuleExt.test(rawPath)) {
+        return React.createElement(StyleLoader, { path: from, rawPath, resolveDir })
+    }
+    // todo: more loaders
+    return null
+}
+
+interface LoaderProps {
+    path: string
+    rawPath: string
+    resolveDir: string
+}
+
+export function StyleLoader({ path, rawPath, resolveDir }: LoaderProps) {
+    if (typeof Deno !== 'undefined') {
+        const { appDir, mode, config } = (window as any).ALEPH_ENV as { appDir: string, mode: string, config: Config }
+        serverImports.add(util.cleanPath(`${appDir}/.aleph/${mode}.${config.buildTarget}/${resolveDir}/${path}`))
+    }
+
+    useEffect(() => {
+        import(util.cleanPath(`/_aleph/${resolveDir}/${path}`))
+        return () => {
+            const moduleId = util.cleanPath(`./${resolveDir}/${rawPath}`)
+            const { document } = (window as any)
+            Array.from(document.head.children).forEach((el: any) => {
+                if (el.getAttribute('data-module-id') === moduleId) {
+                    document.head.removeChild(el)
+                }
+            })
+        }
+    }, [])
+
+    return null
+}

mod.ts

@@ -3,5 +3,6 @@ export * from './context.ts'
 export { ErrorPage } from './error.ts'
 export { default as Head, SEO, Viewport } from './head.ts'
 export * from './hooks.ts'
+export { Import } from './importor.ts'
 export { default as Link } from './link.ts'
 

project.ts

@@ -6,16 +6,11 @@ import { createRouter } from './router.ts'
 import { colors, ensureDir, path, Sha1, walk } from './std.ts'
 import { compile } from './tsc/compile.ts'
 import type { APIHandle, Config, Location, RouterURL } from './types.ts'
-import util, { hashShort } from './util.ts'
+import util, { hashShort, reHashJs, reHttp, reModuleExt, reStyleModuleExt } from './util.ts'
 import './vendor/clean-css-builds/v4.2.2.js'
 import { Document } from './vendor/deno-dom/document.ts'
 import less from './vendor/less/less.js'
 
-const reHttp = /^https?:\/\//i
-const reModuleExt = /\.(js|jsx|mjs|ts|tsx)$/i
-const reStyleModuleExt = /\.(css|less|sass|scss)$/i
-const reHashJs = new RegExp(`\\.[0-9a-fx]{${hashShort}}\\.js$`, 'i')
-
 const { CleanCSS } = window as any
 const cleanCSS = new CleanCSS({ compatibility: '*' /* Internet Explorer 10+ */ })
 
@@ -396,6 +391,8 @@ export default class Project {
         Object.assign(globalThis, {
             ALEPH_ENV: {
                 appDir: this.rootDir,
+                config: this.config,
+                mode: this.mode,
             },
             document: new Document(),
             innerWidth: 1920,
@@ -913,12 +910,12 @@ export default class Project {
                         path.dirname(path.resolve('/', url)),
                         path.resolve('/', dep.url.replace(reModuleExt, ''))
                     )
-                    mod.jsContent = mod.jsContent.replace(/(import|export)([^'"]*)("|')([^'"]+)("|')(\)|;)?/g, (s, key, from, ql, importPath, qr, end) => {
+                    mod.jsContent = mod.jsContent.replace(/(i|Import|export)([^'"]*)("|')([^'"]+)("|')(\)|;)?/g, (s, key, from, ql, importPath, qr, end) => {
                         if (
                             reHashJs.test(importPath) &&
                             importPath.slice(0, importPath.length - (hashShort + 4)) === depImportPath
                         ) {
-                            return `${key}${from}${ql}${depImportPath}.${dep.hash.slice(0, hashShort)}.js${qr}${end}`
+                            return `${key}${from}${ql}${depImportPath}.${dep.hash.slice(0, hashShort)}.js${qr}${end || ''}`
                         }
                         return s
                     })
@@ -965,7 +962,7 @@ export default class Project {
                                 reHashJs.test(importPath) &&
                                 importPath.slice(0, importPath.length - (hashShort + 4)) === depImportPath
                             ) {
-                                return `${key}${from}${ql}${depImportPath}.${dep.hash.slice(0, hashShort)}.js${qr}${end}`
+                                return `${key}${from}${ql}${depImportPath}.${dep.hash.slice(0, hashShort)}.js${qr}${end || ''}`
                             }
                             return s
                         })
@@ -1082,7 +1079,7 @@ export default class Project {
             const { default: Page } = await import("file://" + pageModule.jsFile)
             const data = await this.getData()
             const html = renderPage(data, url, appModule ? App : undefined, Page)
-            const head = renderHead([
+            const head = await renderHead([
                 this._lookupStyles(pageModule),
                 appModule ? this._lookupStyles(appModule) : []
             ].flat())

tsc/compile.ts

@@ -1,14 +1,14 @@
 import ts from 'https://esm.sh/typescript'
 import transformImportPathRewrite from './transform-import-path-rewrite.ts'
-import transformReactJsxSource from './transform-react-jsx-source.ts'
+import transformReactJsx from './transform-react-jsx.ts'
 import transformReactRefresh from './transform-react-refresh.ts'
 import { CreatePlainTransformer, CreateTransformer } from './transformer.ts'
 
 export interface CompileOptions {
-    target?: string
-    mode?: 'development' | 'production'
-    rewriteImportPath?: (importPath: string) => string
-    reactRefresh?: boolean
+    target: string
+    mode: 'development' | 'production'
+    reactRefresh: boolean
+    rewriteImportPath: (importPath: string) => string
 }
 
 export function createSourceFile(fileName: string, source: string) {
@@ -29,18 +29,14 @@ const allowTargets = [
     'es2020',
 ]
 
-export function compile(fileName: string, source: string, { target: targetName = 'ES2015', mode, rewriteImportPath, reactRefresh }: CompileOptions) {
+export function compile(fileName: string, source: string, { target: targetName, mode, rewriteImportPath, reactRefresh }: CompileOptions) {
     const target = allowTargets.indexOf(targetName.toLowerCase())
     const transformers: ts.CustomTransformers = { before: [], after: [] }
-    if (mode === 'development') {
-        transformers.before!.push(CreatePlainTransformer(transformReactJsxSource))
-    }
+    transformers.before!.push(CreatePlainTransformer(transformReactJsx, { mode, rewriteImportPath }))
     if (reactRefresh) {
         transformers.before!.push(CreateTransformer(transformReactRefresh))
     }
-    if (rewriteImportPath) {
-        transformers.after!.push(CreatePlainTransformer(transformImportPathRewrite, rewriteImportPath))
-    }
+    transformers.after!.push(CreatePlainTransformer(transformImportPathRewrite, rewriteImportPath))
 
     return ts.transpileModule(source, {
         fileName,

tsc/transform-react-jsx-source.ts

@@ -0,0 +1,65 @@
+import ts from 'https://esm.sh/typescript'
+import { path } from '../std.ts'
+
+export default function transformReactJsx(sf: ts.SourceFile, node: ts.Node, options: { mode: 'development' | 'production', rewriteImportPath: (importPath: string) => string }): ts.VisitResult<ts.Node> {
+    if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        let props = Array.from(node.attributes.properties)
+
+        if (node.tagName.getText() === 'Import') {
+            let rawPath = ''
+            for (let i = 0; i < props.length; i++) {
+                const prop = props[i]
+                if (ts.isJsxAttribute(prop) && prop.name.text === 'from' && prop.initializer && ts.isStringLiteral(prop.initializer)) {
+                    rawPath = prop.initializer.text
+                    props[i] = ts.createJsxAttribute(
+                        ts.createIdentifier('from'),
+                        ts.createJsxExpression(undefined, ts.createStringLiteral(options.rewriteImportPath(rawPath)))
+                    )
+                    break
+                }
+            }
+            if (rawPath) {
+                props.push(
+                    ts.createJsxAttribute(
+                        ts.createIdentifier('rawPath'),
+                        ts.createJsxExpression(undefined, ts.createStringLiteral(rawPath))
+                    ),
+                    ts.createJsxAttribute(
+                        ts.createIdentifier('resolveDir'),
+                        ts.createJsxExpression(undefined, ts.createStringLiteral(path.dirname(sf.fileName)))
+                    )
+                )
+            }
+        }
+
+        if (options.mode === 'development') {
+            const fileNameAttr = ts.createPropertyAssignment(
+                'fileName',
+                ts.createStringLiteral(sf.fileName)
+            )
+            const lineNumberAttr = ts.createPropertyAssignment(
+                'lineNumber',
+                ts.createNumericLiteral((sf.getLineAndCharacterOfPosition(node.pos).line + 1).toString())
+            )
+            const prop = ts.createJsxAttribute(
+                ts.createIdentifier('__source'),
+                ts.createJsxExpression(undefined, ts.createObjectLiteral([fileNameAttr, lineNumberAttr]))
+            )
+            props.push(prop)
+        }
+
+        if (ts.isJsxSelfClosingElement(node)) {
+            return ts.createJsxSelfClosingElement(
+                node.tagName,
+                node.typeArguments,
+                ts.createJsxAttributes(props)
+            )
+        } else if (ts.isJsxOpeningElement(node)) {
+            return ts.createJsxOpeningElement(
+                node.tagName,
+                node.typeArguments,
+                ts.createJsxAttributes(props)
+            )
+        }
+    }
+}

tsc/transform-react-jsx.ts

@@ -1,4 +1,10 @@
 export const hashShort = 7
+export const reHttp = /^https?:\/\//i
+export const reModuleExt = /\.(js|jsx|mjs|ts|tsx)$/i
+export const reStyleModuleExt = /\.(css|less|sass|scss)$/i
+export const reSVGExt = /\.(svg|svgz)$/i
+export const reMDExt = /\.(md|mdx)$/i
+export const reHashJs = new RegExp(`\\.[0-9a-fx]{${hashShort}}\\.js$`, 'i')
 
 export default {
     isNumber(a: any): a is number {