refactor: improve module importing

Author: ije

cli.ts

@@ -86,19 +86,19 @@ async function main() {
     return
   }
 
-  // proxy https://deno.land/x/aleph on localhost
-  const v = Deno.env.get('ALEPH_DEV_PORT')
-  if (v !== undefined && /^\d+$/.test(v)) {
-    const { localProxy } = await import('./server/localproxy.ts')
-    localProxy(parseInt(v))
-  }
-
-  // sets log level
+  // set log level
   const l = options.L || options['log-level']
   if (util.isNEString(l)) {
     log.setLevel(l.toLowerCase() as LevelNames)
   }
 
+  // proxy https://deno.land/x/aleph on localhost
+  const v = Deno.env.get('ALEPH_DEV')
+  if (v !== undefined) {
+    const { localProxy } = await import('./server/localproxy.ts')
+    localProxy(Deno.cwd(), 2020)
+  }
+
   // check working dir
   const workingDir = resolve(String(args[0] || '.'))
   if (!existsDirSync(workingDir)) {

framework/react/init.ts

@@ -1,9 +1,5 @@
 import { dirname } from 'https://deno.land/[email protected]/path/mod.ts'
-import {
-  getAlephPkgUri,
-  getRelativePath,
-  toLocalUrl
-} from '../../server/helper.ts'
+import { getAlephPkgUri, getRelativePath, toLocalUrl } from '../../server/helper.ts'
 import util from '../../shared/util.ts'
 import type { ServerApplication } from '../../types.ts'
 

plugins/css.ts

@@ -1,34 +1,44 @@
-import CleanCSS from 'https://esm.sh/[email protected]?no-check'
-import PostCSS, { AcceptedPlugin } from 'https://esm.sh/[email protected]'
+import type { Plugin, PluginCreator } from 'https://esm.sh/[email protected]'
 import { join } from 'https://deno.land/[email protected]/path/mod.ts'
 import { existsFileSync } from '../shared/fs.ts'
 import util from '../shared/util.ts'
 import type { LoaderPlugin } from '../types.ts'
 
-const cleanCSS = new CleanCSS({ compatibility: '*' /* Internet Explorer 10+ */ })
+const postcssVersion = '8.2.8'
 const productionOnlyPostcssPlugins = ['autoprefixer']
+const decoder = new TextDecoder()
 
-type Options = {
+export type AcceptedPlugin = string | [string, any] | Plugin | PluginCreator<any>
+
+export type Options = {
   postcss?: {
-    plugins: (string | [string, any] | AcceptedPlugin)[]
+    plugins: AcceptedPlugin[]
   }
 }
 
 export default (options?: Options): LoaderPlugin => {
-  const decoder = new TextDecoder()
   let pcssProcessor: any = null
+  let cleanCSS: any = null
+  let isProd: any = null
 
   return {
     name: 'css-loader',
     type: 'loader',
     test: /\.p?css$/i,
     acceptHMR: true,
     async transform({ url, content }) {
+      if (isProd === null) {
+        isProd = Deno.env.get('BUILD_MODE') === 'production'
+      }
+      if (isProd) {
+        const { default: CleanCSS } = await import('https://esm.sh/[email protected]?no-check')
+        cleanCSS = new CleanCSS({ compatibility: '*' /* Internet Explorer 10+ */ })
+      }
       if (pcssProcessor == null) {
         pcssProcessor = await initPostCSSProcessor(options)
       }
       const { content: pcss } = await pcssProcessor.process(decoder.decode(content)).async()
-      const css = Deno.env.get('BUILD_MODE') === 'production' ? cleanCSS.minify(pcss).styles : pcss
+      const css = isProd ? cleanCSS.minify(pcss).styles : pcss
       if (url.startsWith('#inline-style-')) {
         return {
           code: css,
@@ -48,6 +58,8 @@ export default (options?: Options): LoaderPlugin => {
 }
 
 async function initPostCSSProcessor(options?: Options) {
+  const { default: PostCSS } = await import(`https://esm.sh/postcss@${postcssVersion}`)
+
   if (options?.postcss) {
     return PostCSS(await loadPostcssPlugins(options.postcss.plugins))
   }
@@ -74,7 +86,7 @@ async function initPostCSSProcessor(options?: Options) {
   return PostCSS(await loadPostcssPlugins(['autoprefixer']))
 }
 
-async function loadPostcssPlugins(plugins: (string | [string, any] | AcceptedPlugin)[]) {
+async function loadPostcssPlugins(plugins: AcceptedPlugin[]) {
   const isDev = Deno.env.get('BUILD_MODE') === 'development'
   return await Promise.all(plugins.filter(p => {
     if (isDev) {
@@ -98,10 +110,10 @@ async function loadPostcssPlugins(plugins: (string | [string, any] | AcceptedPlu
 }
 
 async function importPostcssPluginByName(name: string) {
-  const { default: Plugin } = await import(`https://esm.sh/${name}?external=postcss@8.2.4&no-check`)
+  const { default: Plugin } = await import(`https://esm.sh/${name}?external=postcss@${postcssVersion}&no-check`)
   return Plugin
 }
 
-function isPostcssConfig(v: any): v is { plugins: (string | [string, any] | AcceptedPlugin)[] } {
+function isPostcssConfig(v: any): v is { plugins: AcceptedPlugin[] } {
   return util.isPlainObject(v) && util.isArray(v.plugins)
 }

plugins/sass.ts

@@ -1,32 +1,35 @@
-import { Options, Result } from 'https://esm.sh/[email protected]'
+import type { Options, Result } from 'https://esm.sh/[email protected]'
 import type { LoaderPlugin } from '../types.ts'
 
-let renderSync: null | ((options: Options) => Result) = null
+type Sass = { renderSync(options: Options): Result }
 
-export default (opts?: Options): LoaderPlugin => ({
-  name: 'sass-loader',
-  type: 'loader',
-  test: /\.(sass|scss)$/i,
-  acceptHMR: true,
-  async transform({ content, url }) {
-    if (!('userAgent' in window.navigator)) {
-      Object.assign(window.navigator, { userAgent: `Deno/${Deno.version.deno}` })
-    }
-    if (renderSync === null) {
-      const sass = await import('https://esm.sh/[email protected]')
-      renderSync = sass.renderSync
-    }
-    const { css, map } = renderSync({
-      indentedSyntax: url.endsWith('.sass'),
-      ...opts,
-      file: url,
-      data: (new TextDecoder).decode(content),
-      sourceMap: true
-    })
-    return {
-      code: (new TextDecoder).decode(css),
-      type: 'css',
-      map: map ? (new TextDecoder).decode(map) : undefined,
+export default (opts?: Options): LoaderPlugin => {
+  let sass: Sass | null = null
+
+  return {
+    name: 'sass-loader',
+    type: 'loader',
+    test: /\.(sass|scss)$/i,
+    acceptHMR: true,
+    async transform({ content, url }) {
+      if (!('userAgent' in window.navigator)) {
+        Object.assign(window.navigator, { userAgent: `Deno/${Deno.version.deno}` })
+      }
+      if (sass === null) {
+        sass = await import('https://esm.sh/[email protected]')
+      }
+      const { css, map } = sass.renderSync({
+        indentedSyntax: url.endsWith('.sass'),
+        ...opts,
+        file: url,
+        data: (new TextDecoder).decode(content),
+        sourceMap: true
+      })
+      return {
+        code: (new TextDecoder).decode(css),
+        type: 'css',
+        map: map ? (new TextDecoder).decode(map) : undefined,
+      }
     }
   }
-})
+}

server/api.ts

@@ -1,8 +1,8 @@
 import type { BufReader, BufWriter } from 'https://deno.land/[email protected]/io/bufio.ts'
 import type { MultipartFormData } from 'https://deno.land/[email protected]/mime/multipart.ts'
 import { MultipartReader } from 'https://deno.land/[email protected]/mime/multipart.ts'
-import * as brotli from 'https://deno.land/x/[email protected]/mod.ts'
-import { gzipEncode } from 'https://deno.land/x/[email protected]/mod.ts'
+import { compress as brotli } from 'https://deno.land/x/[email protected]/mod.ts'
+import { gzipEncode as gzip } from 'https://deno.land/x/[email protected]/mod.ts'
 import log from '../shared/log.ts'
 import type { APIRequest, ServerRequest, ServerResponse } from '../types.ts'
 
@@ -160,11 +160,11 @@ export class Request implements APIRequest {
       if (this.headers.get('accept-encoding')?.includes('br')) {
         this.#resp.headers.set('Vary', 'Origin')
         this.#resp.headers.set('Content-Encoding', 'br')
-        body = brotli.compress(body)
+        body = brotli(body)
       } else if (this.headers.get('accept-encoding')?.includes('gzip')) {
         this.#resp.headers.set('Vary', 'Origin')
         this.#resp.headers.set('Content-Encoding', 'gzip')
-        body = gzipEncode(body)
+        body = gzip(body)
       }
     }
     this.#resp.headers.set('Date', (new Date).toUTCString())