refactor: improve plugin typings

Author: Wenjie Xia

plugins/sass.ts

@@ -1,6 +1,8 @@
 import { Options, renderSync } from 'https://esm.sh/[email protected]'
+import type { Plugin } from '../types.ts'
 
-const pluginFactory = (opts: Options = {}) => ({
+const pluginFactory = (opts: Options = {}): Plugin => ({
+    type: 'loader',
     name: 'sass-loader',
     test: /.(sass|scss)$/,
     acceptHMR: true,
@@ -19,10 +21,10 @@ const pluginFactory = (opts: Options = {}) => ({
         }
     }
 })
-
 const defaultPlugin = pluginFactory()
 
-pluginFactory.displayName = defaultPlugin.name
+// make the `pluginFactory` as a plugin
+pluginFactory.type = defaultPlugin.type
 pluginFactory.test = defaultPlugin.test
 pluginFactory.acceptHMR = defaultPlugin.acceptHMR
 pluginFactory.transform = defaultPlugin.transform

plugins/sass_test.ts

@@ -1,8 +1,8 @@
-import { assertEquals } from 'https://deno.land/[email protected]/testing/asserts.ts';
-import plugin from './sass.ts';
+import { assertEquals } from 'https://deno.land/[email protected]/testing/asserts.ts'
+import plugin from './sass.ts'
 
-Deno.test('project scss loader plugin', () => {
-    const { code, loader } = plugin.transform(
+Deno.test('project scss loader plugin', async () => {
+    const { code, loader } = await plugin.transform(
         (new TextEncoder).encode('$someVar: 123px; .some-selector { width: $someVar; }'),
         'test.scss'
     )
@@ -13,13 +13,13 @@ Deno.test('project scss loader plugin', () => {
     assertEquals(loader, 'css')
 })
 
-Deno.test('project sass loader plugin', () => {
-    let ret = plugin.transform(
+Deno.test('project sass loader plugin', async () => {
+    let ret = await plugin.transform(
         (new TextEncoder).encode('$someVar: 123px\n.some-selector\n  width: 123px'),
         'test.sass'
     )
     assertEquals(ret.code, '.some-selector {\n  width: 123px;\n}')
-    ret = plugin({ indentType: 'tab', indentWidth: 2 }).transform(
+    ret = await plugin({ indentType: 'tab', indentWidth: 2 }).transform(
         (new TextEncoder).encode('$someVar: 123px\n.some-selector\n  width: 123px'),
         'test.sass'
     )

plugins/wasm.ts

@@ -1,4 +1,7 @@
-export default {
+import type { Plugin } from '../types.ts'
+
+const wasmLoader: Plugin = {
+    type: 'loader',
     name: 'wasm-loader',
     test: /.wasm$/,
     transform(content: Uint8Array, path: string) {
@@ -13,3 +16,5 @@ export default {
         }
     }
 }
+
+export default wasmLoader

plugins/wasm_test.ts

@@ -1,5 +1,5 @@
-import { assertEquals } from 'https://deno.land/[email protected]/testing/asserts.ts';
-import plugin from './wasm.ts';
+import { assertEquals } from 'https://deno.land/[email protected]/testing/asserts.ts'
+import plugin from './wasm.ts'
 
 Deno.test('project wasm loader plugin', async () => {
     const wasmCode = new Uint8Array([
@@ -10,7 +10,7 @@ Deno.test('project wasm loader plugin', async () => {
         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 { code, loader } = await plugin.transform(wasmCode, '42.wasm')
     const jsfile = (await Deno.makeTempFile()) + '.js'
     await Deno.writeTextFile(jsfile, code)
     const { default: wasm } = await import('file://' + jsfile)

server/app.ts

@@ -938,10 +938,10 @@ export class Appliaction {
             } else {
                 for (const plugin of this.config.plugins) {
                     if (plugin.type === 'loader' && plugin.test.test(url)) {
-                        const { code, type = 'js' } = await plugin.transform(sourceContent, url)
+                        const { code, loader: pLoader = 'js' } = await plugin.transform(sourceContent, url)
                         sourceCode = code
-                        loader = type
-                        mod.loader = type
+                        loader = pLoader
+                        mod.loader = pLoader
                         break
                     }
                 }
@@ -1000,8 +1000,8 @@ export class Appliaction {
                     if (type !== 'css') {
                         for (const plugin of this.config.plugins) {
                             if (plugin.type === 'loader' && plugin.test.test(`${key}.${type}`)) {
-                                const { code, type: _type } = await plugin.transform((new TextEncoder).encode(tpl), url)
-                                if (_type === 'css') {
+                                const { code, loader } = await plugin.transform((new TextEncoder).encode(tpl), url)
+                                if (loader === 'css') {
                                     tpl = code
                                     type = 'css'
                                 }

types.ts

@@ -1,14 +1,22 @@
 import type { AcceptedPlugin, bufio } from './deps.ts'
 
+type TransformRet = {
+    code: string,
+    map?: string,
+    loader?: 'js' | 'ts' | 'jsx' | 'tsx' | 'css' // default is 'js'
+}
+
 export type LoaderPlugin = {
     /* `type` defines the plugin type */
     type: 'loader'
+    /** `name` gives the plugin a name. */
+    name: string
     /** `test` matches the import url. */
     test: RegExp
     /** `acceptHMR` enables the HMR. */
     acceptHMR?: boolean
     /** `transform` transforms the source content. */
-    transform(content: Uint8Array, url: string): Promise<{ code: string, map?: string, type?: 'js' | 'ts' | 'jsx' | 'tsx' | 'css' }>
+    transform(content: Uint8Array, url: string): TransformRet | Promise<TransformRet>
 }
 
 /**
@@ -29,7 +37,7 @@ export type SSROptions = {
 }
 
 /**
- * The Config for Aleph.js application.
+ * The Config for **Aleph.js** application.
  */
 export type Config = {
     /** `framework` to run your application (default is 'react'). */
@@ -155,6 +163,6 @@ export type FormFile = {
 }
 
 /**
- * ES Import map.
+ * The ES Import maps.
  */
 export type ImportMap = Record<string, ReadonlyArray<string>>