feat: add 2 loader plugins sass and wasm

Je · Je · commit 9e32f3e08b52 · 2020-10-28T10:28:42.000+08:00
diff --git 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, reStyleModuleExt } from './util.ts'
+import util, { hashShort, reModuleExt } from './util.ts'
 
 export function ALEPH({ initial }: {
     initial: {
@@ -47,12 +47,12 @@ export function ALEPH({ initial }: {
             const ctree: { id: string, Component?: ComponentType<any> }[] = pageModuleTree.map(({ id }) => ({ id }))
             const imports = pageModuleTree.map(async mod => {
                 const { default: C } = await import(getModuleImportUrl(baseUrl, mod, e.forceRefetch))
-                if (mod.asyncDeps) {
+                if (mod.deps) {
                     // import async dependencies
-                    for (const dep of mod.asyncDeps.filter(({ url }) => reStyleModuleExt.test(url))) {
+                    for (const dep of mod.deps.filter(({ isStyle }) => !!isStyle)) {
                         await import(getModuleImportUrl(baseUrl, { id: dep.url.replace(reModuleExt, '.js'), hash: dep.hash }, e.forceRefetch))
                     }
-                    if (mod.asyncDeps.filter(({ url }) => url.startsWith('#useDeno.')).length > 0) {
+                    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()}` : ''))
                         if (util.isPlainObject(data)) {
                             for (const key in data) {
@@ -143,12 +143,12 @@ export function ALEPH({ initial }: {
             if (url.pagePath !== '') {
                 const imports = pageModuleTree.map(async mod => {
                     await import(getModuleImportUrl(baseUrl, mod))
-                    if (mod.asyncDeps) {
+                    if (mod.deps) {
                         // import async dependencies
-                        for (const dep of mod.asyncDeps.filter(({ url }) => reStyleModuleExt.test(url))) {
+                        for (const dep of mod.deps.filter(({ isStyle }) => !!isStyle)) {
                             await import(getModuleImportUrl(baseUrl, { id: dep.url.replace(reModuleExt, '.js'), hash: dep.hash }))
                         }
-                        if (mod.asyncDeps.filter(({ url }) => url.startsWith('#useDeno.')).length > 0) {
+                        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`)
                             if (util.isPlainObject(data)) {
                                 for (const key in data) {
diff --git a/bootstrap.ts b/bootstrap.ts
@@ -2,7 +2,7 @@ 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, reStyleModuleExt } from './util.ts'
+import { reModuleExt } from './util.ts'
 
 export default async function bootstrap({
     routes,
@@ -26,9 +26,9 @@ export default async function bootstrap({
     const pageComponentTree: { id: string, Component?: ComponentType }[] = pageModuleTree.map(({ id }) => ({ id }))
     const imports = [...preloadModules, ...pageModuleTree].map(async mod => {
         const { default: C } = await import(getModuleImportUrl(baseUrl, mod))
-        if (mod.asyncDeps) {
+        if (mod.deps) {
             // import async dependencies
-            for (const dep of mod.asyncDeps.filter(({ url }) => reStyleModuleExt.test(url))) {
+            for (const dep of mod.deps.filter(({ isStyle }) => !!isStyle)) {
                 await import(getModuleImportUrl(baseUrl, { id: dep.url.replace(reModuleExt, '.js'), hash: dep.hash }))
             }
         }
diff --git a/plugins/sass.ts b/plugins/sass.ts
@@ -0,0 +1,19 @@
+import { renderSync } from 'https://esm.sh/sass@1.27.0'
+
+export default {
+    name: 'sass-loader',
+    test: /.(sass|scss)$/,
+    acceptHMR: true,
+    transform(content: Uint8Array, path: string) {
+        const ret = renderSync({
+            file: path,
+            data: (new TextDecoder).decode(content),
+            sourceMap: true
+        })
+        return {
+            code: (new TextDecoder).decode(ret.css),
+            map: ret.map ? (new TextDecoder).decode(ret.map) : undefined,
+            loader: 'css'
+        }
+    }
+}
diff --git a/plugins/sass_test.ts b/plugins/sass_test.ts
@@ -0,0 +1,19 @@
+import { assertEquals } from 'https://deno.land/std/testing/asserts.ts';
+import plugin from './sass.ts';
+
+Deno.test('project sass loader plugin', () => {
+    Object.assign(window, {
+        location: {
+            href: 'https://localhost/'
+        }
+    })
+    const { code, loader } = plugin.transform(
+        (new TextEncoder).encode('$someVar: 123px; .some-selector { width: $someVar; }'),
+        'test.sass'
+    )
+    assertEquals(plugin.test.test('test.sass'), true)
+    assertEquals(plugin.test.test('test.scss'), true)
+    assertEquals(plugin.acceptHMR, true)
+    assertEquals(code, '.some-selector {\n  width: 123px;\n}')
+    assertEquals(loader, 'css')
+})
diff --git a/plugins/wasm.ts b/plugins/wasm.ts
@@ -0,0 +1,15 @@
+export default {
+    name: 'wasm-loader',
+    test: /.wasm$/,
+    transform(content: Uint8Array, path: string) {
+        return {
+            code: `
+                const wasmCode = new Uint8Array([${content.join(',')}])
+                const wasmModule = new WebAssembly.Module(wasmCode)
+                const { exports } = new WebAssembly.Instance(wasmModule)
+                export default exports
+            `,
+            loader: 'js'
+        }
+    }
+}
diff --git a/plugins/wasm_test.ts b/plugins/wasm_test.ts
@@ -0,0 +1,20 @@
+import { assertEquals } from 'https://deno.land/std/testing/asserts.ts';
+import plugin from './wasm.ts';
+
+Deno.test('project wasm loader plugin', async () => {
+    const wasmCode = new Uint8Array([
+        0, 97, 115, 109, 1, 0, 0, 0, 1, 133, 128, 128, 128, 0, 1, 96, 0, 1, 127,
+        3, 130, 128, 128, 128, 0, 1, 0, 4, 132, 128, 128, 128, 0, 1, 112, 0, 0,
+        5, 131, 128, 128, 128, 0, 1, 0, 1, 6, 129, 128, 128, 128, 0, 0, 7, 145,
+        128, 128, 128, 0, 2, 6, 109, 101, 109, 111, 114, 121, 2, 0, 4, 109, 97,
+        105, 110, 0, 0, 10, 138, 128, 128, 128, 0, 1, 132, 128, 128, 128, 0, 0,
+        65, 42, 11
+    ])
+    const { code, loader } = plugin.transform(wasmCode, '42.wasm')
+    const jsfile = (await Deno.makeTempFile()) + '.js'
+    await Deno.writeTextFile(jsfile, code)
+    const { default: wasm } = await import('file://' + jsfile)
+    assertEquals(plugin.test.test('test.wasm'), true)
+    assertEquals(wasm.main(), 42)
+    assertEquals(loader, 'js')
+})
diff --git a/project.ts b/project.ts
@@ -12,7 +12,7 @@ import { colors, ensureDir, fromStreamReader, path, ServerRequest, Sha1, walk }
 import { compile } from './tsc/compile.ts'
 import type { AlephEnv, APIHandler, Config, RouterURL } from './types.ts'
 import util, { hashShort, MB, reHashJs, reHttp, reLocaleID, reMDExt, reModuleExt, reStyleModuleExt } from './util.ts'
-import { cleanCSS, Document, less } from './vendor/mod.ts'
+import { cleanCSS, less } from './vendor/mod.ts'
 import { version } from './version.ts'
 
 interface Module {
@@ -32,7 +32,8 @@ interface Module {
 interface Dep {
     url: string
     hash: string
-    async?: boolean
+    isStyle?: boolean
+    isData?: boolean
     external?: boolean
 }
 
@@ -680,9 +681,6 @@ export class Project {
                 const path = util.cleanPath(util.trimPrefix(p, this.appRoot))
                 // handle `api` dir remove directly
                 const validated = (() => {
-                    if (!reModuleExt.test(path) && !reStyleModuleExt.test(path) && !reMDExt.test(path)) {
-                        return false
-                    }
                     // ignore `.aleph` and output directories
                     if (path.startsWith('/.aleph/') || path.startsWith(this.config.outputDir)) {
                         return false
@@ -790,8 +788,8 @@ export class Project {
     }
 
     private _getRouteModule({ id, hash }: Module): RouteModule {
-        const asyncDeps = this._lookupAsyncDeps(id).filter(({ async }) => !!async).map(({ async, ...rest }) => rest)
-        return { id, hash, asyncDeps: asyncDeps.length > 0 ? asyncDeps : undefined }
+        const deps = this._lookupDeps(id).filter(({ isData, isStyle }) => !!isData || !!isStyle).map(({ external, ...rest }) => rest)
+        return { id, hash, deps: deps.length > 0 ? deps : undefined }
     }
 
     private _moduleFromURL(url: string): Module {
@@ -1064,7 +1062,7 @@ export class Project {
                     mode: this.mode,
                     target: options?.forceTarget || this.config.buildTarget,
                     reactRefresh: this.isDev && !mod.isRemote,
-                    rewriteImportPath: (path: string, async?: boolean) => this._resolveImportURL(mod, path, async),
+                    rewriteImportPath: (path: string) => this._resolveImportURL(mod, path),
                     signUseDeno: (id: string) => {
                         const sig = 'useDeno.' + (new Sha1()).update(id).update(version).update(Date.now().toString()).hex().slice(0, hashShort)
                         useDenos.push(sig)
@@ -1101,7 +1099,7 @@ export class Project {
                 }
                 mod.hash = getHash(mod.jsContent)
                 useDenos.forEach(sig => {
-                    mod.deps.push({ url: '#' + sig, hash: '', async: true })
+                    mod.deps.push({ url: '#' + sig, hash: '', isData: true })
                 })
             } else {
                 throw new Error(`Unknown loader '${mod.loader}'`)
@@ -1119,14 +1117,17 @@ export class Project {
         // compile deps
         for (const dep of mod.deps.filter(({ url, external }) => !url.startsWith('#useDeno.') && !external)) {
             const depMod = await this._compile(dep.url)
+            if (depMod.loader === 'css' && !dep.isStyle) {
+                dep.isStyle = true
+            }
             if (dep.hash !== depMod.hash) {
                 dep.hash = depMod.hash
                 if (!reHttp.test(dep.url)) {
                     const depImportPath = getRelativePath(
                         path.dirname(url),
                         dep.url.replace(reModuleExt, '')
                     )
-                    mod.jsContent = mod.jsContent.replace(/(import|Import|export)([\s\S]*?)(from\s*:?\s*|\()("|')([^'"]+)("|')(\)|;)?/g, (s, key, fields, from, ql, importPath, qr, end) => {
+                    mod.jsContent = mod.jsContent.replace(/(import|Import|export)([\s\S]*?)(from\s*:?\s*|\(|)("|')([^'"]+)("|')(\)|;)?/g, (s, key, fields, from, ql, importPath, qr, end) => {
                         if (
                             reHashJs.test(importPath) &&
                             importPath.slice(0, importPath.length - (hashShort + 4)) === depImportPath
@@ -1204,7 +1205,7 @@ export class Project {
         })
     }
 
-    private _resolveImportURL(importer: Module, url: string, async?: boolean): string {
+    private _resolveImportURL(importer: Module, url: string): string {
         let rewrittenURL: string
         let pluginsResolveRet: { url: string, external?: boolean } | null = null
         for (const plugin of this.config.plugins) {
@@ -1255,7 +1256,7 @@ export class Project {
         }
 
         if (reHttp.test(url)) {
-            importer.deps.push({ url, hash: '', async, external: pluginsResolveRet?.external })
+            importer.deps.push({ url, hash: '', external: pluginsResolveRet?.external })
         } else {
             if (importer.isRemote) {
                 const sourceUrl = new URL(importer.url)
@@ -1266,14 +1267,12 @@ export class Project {
                 importer.deps.push({
                     url: sourceUrl.protocol + '//' + sourceUrl.host + pathname,
                     hash: '',
-                    async,
                     external: pluginsResolveRet?.external
                 })
             } else {
                 importer.deps.push({
                     url: util.cleanPath(path.dirname(importer.url) + '/' + url),
                     hash: '',
-                    async,
                     external: pluginsResolveRet?.external
                 })
             }
@@ -1325,8 +1324,8 @@ export class Project {
             await Promise.all(imports)
             const [html, data] = await this.#renderer.renderPage(url, App, undefined, pageComponentTree)
             const head = await this.#renderer.renderHead([
-                appModule ? this._lookupAsyncDeps(appModule.id).filter(({ url }) => reStyleModuleExt.test(url)) : [],
-                ...pageModuleTree.map(({ id }) => this._lookupAsyncDeps(id).filter(({ url }) => reStyleModuleExt.test(url)))
+                appModule ? this._lookupDeps(appModule.id).filter(dep => !!dep.isStyle) : [],
+                ...pageModuleTree.map(({ id }) => this._lookupDeps(id).filter(dep => !!dep.isStyle)).flat()
             ].flat())
             ret.head = head
             ret.scripts = await Promise.all(this.#renderer.renderScripts().map(async (script: Record<string, any>) => {
@@ -1357,7 +1356,7 @@ export class Project {
             const { default: E404 } = e404Module ? await import('file://' + e404Module.jsFile) : {} as any
             const [html, data] = await this.#renderer.renderPage(url, undefined, E404, [])
             const head = await this.#renderer.renderHead([
-                e404Module ? this._lookupAsyncDeps(e404Module.id).filter(({ url }) => reStyleModuleExt.test(url)) : []
+                e404Module ? this._lookupDeps(e404Module.id).filter(dep => !!dep.isStyle) : []
             ].flat())
             ret.head = head
             ret.scripts = await Promise.all(this.#renderer.renderScripts().map(async (script: Record<string, any>) => {
@@ -1384,7 +1383,7 @@ export class Project {
             const url = { locale: this.config.defaultLocale, pagePath: '', pathname: '/', params: {}, query: new URLSearchParams() }
             const [html, data] = await this.#renderer.renderPage(url, undefined, undefined, [{ id: '/loading.js', Component: Loading }])
             const head = await this.#renderer.renderHead([
-                this._lookupAsyncDeps(loadingModule.id).filter(({ url }) => reStyleModuleExt.test(url))
+                this._lookupDeps(loadingModule.id).filter(dep => !!dep.isStyle)
             ].flat())
             return {
                 head,
@@ -1395,7 +1394,7 @@ export class Project {
         return null
     }
 
-    private _lookupAsyncDeps(moduleID: string, __deps: { url: string, hash: string, async?: boolean }[] = [], __tracing: Set<string> = new Set()) {
+    private _lookupDeps(moduleID: string, __deps: Dep[] = [], __tracing: Set<string> = new Set()) {
         const mod = this.getModule(moduleID)
         if (!mod) {
             return __deps
@@ -1404,10 +1403,10 @@ export class Project {
             return __deps
         }
         __tracing.add(moduleID)
-        __deps.push(...mod.deps.filter(({ url, async }) => !!async && __deps.findIndex(i => i.url === url) === -1))
+        __deps.push(...mod.deps.filter(({ url }) => __deps.findIndex(i => i.url === url) === -1))
         mod.deps.forEach(({ url }) => {
             if (reModuleExt.test(url) && !reHttp.test(url)) {
-                this._lookupAsyncDeps(url.replace(reModuleExt, '.js'), __deps, __tracing)
+                this._lookupDeps(url.replace(reModuleExt, '.js'), __deps, __tracing)
             }
         })
         return __deps
@@ -1416,7 +1415,7 @@ export class Project {
 
 // add virtual browser global objects
 Object.assign(globalThis, {
-    document: new Document(),
+    // document: new Document(),
     location: {
         protocol: 'http:',
         host: 'localhost',
diff --git a/renderer.ts b/renderer.ts
@@ -9,7 +9,7 @@ import { createPageProps } from './routing.ts'
 import type { AlephEnv, RouterURL } from './types.ts'
 import util, { hashShort } from './util.ts'
 
-export async function renderHead(styles?: { url: string, hash: string, async?: boolean }[]) {
+export async function renderHead(styles?: { url: string, hash: string }[]) {
     const { __buildMode, __buildTarget } = (window as any).ALEPH.ENV as AlephEnv
     const tags: string[] = []
     serverHeadElements.forEach(({ type, props }) => {
@@ -33,7 +33,7 @@ export async function renderHead(styles?: { url: string, hash: string, async?: b
             }
         }
     })
-    await Promise.all(styles?.filter(({ async }) => !!async).map(({ url, hash }) => {
+    await Promise.all(styles?.map(({ url, hash }) => {
         return import('file://' + util.cleanPath(`${Deno.cwd()}/.aleph/${__buildMode}.${__buildTarget}/${url}.${hash.slice(0, hashShort)}.js`))
     }) || [])
     styles?.forEach(({ url }) => {
diff --git a/routing.ts b/routing.ts
@@ -12,7 +12,7 @@ export interface Route {
 export interface RouteModule {
     readonly id: string
     readonly hash: string
-    readonly asyncDeps?: { url: string, hash: string }[]
+    readonly deps?: { url: string, hash: string, isStyle?: boolean, isData?: boolean }[]
 }
 
 export interface PageProps {
diff --git a/tsc/compile.ts b/tsc/compile.ts
@@ -8,7 +8,7 @@ export interface CompileOptions {
     mode: 'development' | 'production'
     target: string
     reactRefresh: boolean
-    rewriteImportPath: (importPath: string, async?: boolean) => string
+    rewriteImportPath: (importPath: string) => string
     signUseDeno: (id: string) => string
 }
 
diff --git a/tsc/transform-react-jsx.ts b/tsc/transform-react-jsx.ts
@@ -1,15 +1,15 @@
 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, async: boolean) => string }): ts.VisitResult<ts.Node> {
+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') {
             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)) {
-                    const url = options.rewriteImportPath(prop.initializer.text, true)
+                    const url = options.rewriteImportPath(prop.initializer.text)
                     props.splice(i, 1)
                     props.unshift(
                         ts.createJsxAttribute(
diff --git a/vendor/deno-dom/document.ts b/vendor/deno-dom/document.ts
@@ -122,6 +122,10 @@ export class Document extends Node {
     return this.querySelector("title")?.textContent || "";
   }
 
+  get scripts() {
+    return [];
+  }
+
   get cookie() {
     return ""; // TODO
   }

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export interface Route {`
`12`	`12`	`export interface RouteModule {`
`13`	`13`	`readonly id: string`
`14`	`14`	`readonly hash: string`
`15`		`- readonly asyncDeps?: { url: string, hash: string }[]`
	`15`	`+ readonly deps?: { url: string, hash: string, isStyle?: boolean, isData?: boolean }[]`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`export interface PageProps {`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ export interface CompileOptions {`
`8`	`8`	`mode: 'development' \| 'production'`
`9`	`9`	`target: string`
`10`	`10`	`reactRefresh: boolean`
`11`		`- rewriteImportPath: (importPath: string, async?: boolean) => string`
	`11`	`+ rewriteImportPath: (importPath: string) => string`
`12`	`12`	`signUseDeno: (id: string) => string`
`13`	`13`	`}`
`14`	`14`