feat!(loader): remove file-loader dependency (#37)

* feat!(loader): remove file-loader dependency

* fix(loader): remove unused regexp

Author: ykzts

README.md

@@ -32,9 +32,6 @@ module.exports = {
             componentX: 4,
             componentY: 3
           }
-        },
-        {
-          loader: 'file-loader'
         }
       ]
     ]

example/next.config.js

@@ -10,12 +10,7 @@ module.exports = withTM({
           loader: 'blurhash-loader',
           options: {
             componentX: 4,
-            componentY: 3
-          }
-        },
-        {
-          loader: 'file-loader',
-          options: {
+            componentY: 3,
             outputPath: 'static/media',
             publicPath: '/_next/static/media'
           }

example/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "postinstall": "cd .. && yarn install --frozen-lockfile && yarn build"
   },
   "dependencies": {
     "next": "10.0.0",
@@ -16,8 +17,7 @@
   "devDependencies": {
     "@types/node": "^12.12.47",
     "@types/react": "^16.9.55",
-    "blurhash-loader": "latest",
-    "file-loader": "^6.2.0",
+    "blurhash-loader": "link:..",
     "next-transpile-modules": "^4.1.0",
     "typescript": "^4.0.5"
   }

src/index.ts

@@ -1,27 +1,72 @@
 import { encode } from 'blurhash'
-import { getOptions } from 'loader-utils'
+import { getOptions, interpolateName } from 'loader-utils'
+import path from 'path'
 import sharp from 'sharp'
 import { loader } from 'webpack'
 
-const EXPORT_RE = /(?:export\s+default|module.exports\s+=)(?:\s|$)|/
+type CreatePath = (url: string, resourcePath: string, context: string) => string
 
 type LoaderOptions = {
   componentX?: number
   componentY?: number
+  context?: string
+  emitFile?: boolean
   esModule?: boolean
+  name?: string
+  outputPath?: string | CreatePath
+  publicPath?: string | CreatePath
 }
 
-function loader(this: loader.LoaderContext, rawContent: Buffer | string): void {
+function loader(this: loader.LoaderContext, content: Buffer): void {
   if (this.cacheable) this.cacheable()
 
   const callback = this.async()
-  const options = getOptions(this) as Readonly<LoaderOptions>
-  const esModule =
-    typeof options.esModule !== 'undefined' ? options.esModule : true
+  const {
+    context = this.rootContext,
+    emitFile = true,
+    esModule = true,
+    name = '[contenthash].[ext]',
+    ...options
+  } = getOptions(this) as Readonly<LoaderOptions>
 
-  const content = Buffer.isBuffer(rawContent)
-    ? rawContent.toString('utf8')
-    : rawContent
+  const url = interpolateName(this, name, {
+    context,
+    content
+  })
+
+  let outputPath: string
+
+  if (typeof options.outputPath !== 'undefined') {
+    if (typeof options.outputPath === 'function') {
+      outputPath = options.outputPath(url, this.resourcePath, context)
+    } else {
+      outputPath = path.posix.join(options.outputPath, url)
+    }
+  } else {
+    outputPath = url
+  }
+
+  let publicPath: string
+
+  if (typeof options.publicPath !== 'undefined') {
+    if (typeof options.publicPath === 'function') {
+      publicPath = options.publicPath(url, this.resourcePath, context)
+    } else {
+      const basePath = options.publicPath.endsWith('/')
+        ? options.publicPath
+        : `${options.publicPath}/`
+
+      publicPath = basePath + url
+    }
+
+    publicPath = JSON.stringify(publicPath)
+  } else {
+    publicPath = `__webpack_public_path__ + ${JSON.stringify(outputPath)}`
+  }
+
+  if (emitFile) {
+    this.emitFile(outputPath, content, null)
+  }
 
   sharp(this.resourcePath)
     .raw()
@@ -39,13 +84,9 @@ function loader(this: loader.LoaderContext, rawContent: Buffer | string): void {
         options.componentY || 3
       )
 
-      let result = ''
-
-      if (EXPORT_RE.test(content)) {
-        result += `${content}\n\n`
-      }
-
-      result += `${
+      const result = `${
+        esModule ? 'export default' : 'module.exports ='
+      } ${publicPath}\n${
         esModule ? 'export const ' : 'exports.'
       }blurhash = ${JSON.stringify(blurhash)}\n`