fix: native url transform in both template and style

Author: b2nil

package.json

@@ -20,14 +20,16 @@
     "url": "git@github.com:b2nil/vminiBuild.git"
   },
   "scripts": {
-    "dev": "esbuild src/index.ts --outfile=dist/index.js --format=cjs --platform=node --tree-shaking=true --external:esbuild --external:url --external:pug --external:postcss-pxtransform --external:@vue/* --bundle",
+    "dev": "esbuild src/index.ts --outfile=dist/index.js --format=cjs --platform=node --tree-shaking=true --external:esbuild --external:url --external:pug --external:postcss-pxtransform --external:postcss-url --external:@vue/* --bundle",
     "build": "yarn dev --minify",
-    "plugin": "esbuild src/plugins/index.ts --outfile=tests/plugin.js --format=cjs --platform=node --tree-shaking=true --external:esbuild --external:url --external:pug --external:postcss-pxtransform --external:@vue/* --bundle",
+    "plugin": "esbuild src/plugins/index.ts --outfile=tests/plugin.js --format=cjs --platform=node --tree-shaking=true --external:esbuild --external:url --external:pug --external:postcss-pxtransform --external:postcss-url --external:@vue/* --bundle",
     "test": "yarn plugin && jest"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": "^3.2.31",
-    "esbuild": "^0.14.21"
+    "esbuild": "^0.14.21",
+    "postcss-pxtransform": "^3.4.2",
+    "postcss-url": "^10.1.3"
   },
   "dependencies": {
     "cac": "^6.7.12"
@@ -42,4 +44,4 @@
     "jest": "^27.5.1",
     "postcss-modules": "^4.3.0"
   }
-}
+}

readme.md

@@ -293,14 +293,9 @@
       - [ ] style bindings
       - [ ] class bindings
 - [ ] native page and components bundling
-  - [x] native template asset url transform
   - [ ] components
     - [ ] third party libs
       - [ ] cache module name for bundling to `miniprogram_npm` 
-- [ ] style
-  - [ ] postcss transform
-    - [ ] serve url locally if `useCDN` is enabled
-    - [ ] or convert url to base64 if not
 - [ ] mini-app tag.d.ts for volar syntax highlighting
 
 ## 关于 `vue-mini`

src/compiler-mini/index.ts

@@ -1,3 +1,3 @@
 export { compileScript } from "./script"
-export { compileTemplate, normalizeAssetsURLOptions, getPlatformDirective } from "./template"
+export { compileTemplate, getPlatformDirective } from "./template"
 export { parse, compileStyleAsync } from "@vue/compiler-sfc"

src/compiler-mini/template/index.ts

@@ -43,7 +43,6 @@ function preprocess (
 }
 
 export { getPlatformDirective } from "./utils"
-export { normalizeAssetsURLOptions } from "./transforms"
 
 export async function compileTemplate (
   template: string,

src/compiler-mini/template/transforms/assetUrls.ts

@@ -1,12 +1,18 @@
 import path from 'path'
-import { isString } from '@vue/shared'
-import { UrlWithStringQuery, parse as uriParse } from 'url'
+import {
+  parseUrl,
+  isDataUrl,
+  isExternalUrl,
+  isRelativeUrl,
+  normalizeAssetsURLOptions,
+} from '../../../utils'
 
 import {
   NodeTypes,
   NodeTransform,
   createSimpleExpression,
 } from '@vue/compiler-core'
+
 import type {
   AssetURLOptions,
   AssetURLTagConfig
@@ -99,56 +105,4 @@ export function transformAssetUrls (
       })
     }
   }
-}
-
-// The following util functions are copied
-// from @vue/compiler-sfc's templateUtils.ts
-// since they are exposed to external users
-const dataUrlRE = /^\s*data:/i
-const externalRE = /^(https?:)?\/\//
-const isDataUrl = (url: string) => dataUrlRE.test(url)
-const isExternalUrl = (url: string) => externalRE.test(url)
-
-const isRelativeUrl = (url: string): boolean => {
-  const firstChar = url.charAt(0)
-  return firstChar === '.' || firstChar === '~' || firstChar === '@'
-}
-
-export function normalizeAssetsURLOptions (
-  options: AssetURLOptions | AssetURLTagConfig,
-  defaultOptions: Required<AssetURLOptions>
-): Required<AssetURLOptions> {
-  if (Object.keys(options).some(key => Array.isArray((options as any)[key]))) {
-    // legacy option format which directly passes in tags config
-    return {
-      ...defaultOptions,
-      tags: options as any
-    }
-  }
-  return {
-    ...defaultOptions,
-    ...options
-  }
-}
-
-/**
- * Parses string url into URL object.
- */
-function parseUrl (url: string): UrlWithStringQuery {
-  const firstChar = url.charAt(0)
-  if (firstChar === '~') {
-    const secondChar = url.charAt(1)
-    url = url.slice(secondChar === '/' ? 2 : 1)
-  }
-  return parseUriParts(url)
-}
-
-/**
- * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
- * @param urlString an url as a string
- */
-function parseUriParts (urlString: string): UrlWithStringQuery {
-  // A TypeError is thrown if urlString is not a string
-  // @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
-  return uriParse(isString(urlString) ? urlString : '', false, true)
-}
+}

src/index.ts

@@ -7,6 +7,7 @@ import {
   DEFINE,
   customRequire,
   extractConfigFromFile,
+  normalizeAssetsURLOptions
 } from './utils'
 import {
   printStats,
@@ -18,7 +19,6 @@ import {
 
 import type { BuildOptions } from "esbuild"
 import type { UserConfig, CliOptions } from 'types'
-import { normalizeAssetsURLOptions } from './compiler-mini'
 
 const cli = cac("vmini")
 
@@ -89,15 +89,13 @@ async function initBuildOptions (userConfig: UserConfig): Promise<BuildOptions>
     useCDN,
     style: {
       ...(userBuildOptions.vue?.style || {}),
-      postcssPlugins:
-        userBuildOptions.vue?.style?.postcssPlugins
-          ? userBuildOptions.vue?.style?.postcssPlugins
-          : [
-            customRequire(`postcss-pxtransform`)({
-              platform: userBuildOptions.platform || `weapp`,
-              designWidth: userBuildOptions.designWidth || 750
-            })
-          ],
+      postcssPlugins: [
+        ...(userBuildOptions.vue?.style?.postcssPlugins || []),
+        customRequire(`postcss-pxtransform`)({
+          platform: userBuildOptions.platform || `weapp`,
+          designWidth: userBuildOptions.designWidth || 750
+        })
+      ],
       preprocessCustomRequire: customRequire
     },
     template: {

src/plugins/native.ts

@@ -13,6 +13,7 @@ import {
   parseVueRequest,
   getRegExpMatchedCode,
   getNativeImportsHelperCode,
+  cacheAssetPath,
 } from "../utils"
 import {
   compileTemplate,
@@ -136,24 +137,35 @@ export default function nativePlugin (options: VueOptions = {}): Plugin {
 
       build.onLoad({ filter: /.*/, namespace: "native-wxml" }, async (args) => {
         const filename = args.path
-        let nativeTemplate = await fs.promises.readFile(filename, "utf8")
+        const nativeTemplate = await fs.promises.readFile(filename, "utf8")
         const importsCode = getRegExpMatchedCode(nativeTemplate, wxsSrcREG)
 
-        // should transform asset urls if useCDN
-        if (options.useCDN) {
-          const platformDir = getPlatformDirective(process.env.__PLATFORM__ || "weapp")
-          const ret = await compileTemplate(nativeTemplate, {
-            ...(options),
-            filename,
-            id: "wxml",
-            cssVars: [],
-            cssModules: {},
-            platformDir
-          })
-          nativeTemplate = ret.code
+        const platformDir = getPlatformDirective(process.env.__PLATFORM__ || "weapp")
+        let { code: templateCode, ast, errors } = await compileTemplate(nativeTemplate, {
+          ...(options.template || {}),
+          filename,
+          id: "wxml",
+          cssVars: [],
+          cssModules: {},
+          platformDir
+        })
+
+        if (errors.length) {
+          templateCode = ``
+          for (const err of errors) {
+            console.warn(`[x] ${err}`)
+          }
+        }
+
+        // cache asset urls used
+        if (ast?.imports && !options.useCDN) {
+          for (const imp of ast.imports) {
+            const assetPath = path.resolve(path.dirname(filename), imp.path)
+            cacheAssetPath(assetPath)
+          }
         }
 
-        await emitFile(filename, EXTENSIONS.WXML, nativeTemplate)
+        await emitFile(filename, EXTENSIONS.WXML, templateCode)
 
         return {
           contents: importsCode,

src/plugins/style.ts

@@ -1,7 +1,14 @@
 import path from "path"
 import fs from "fs"
-import { cssREG, getFullPath, replaceRules } from "../utils"
 import { compileStyleAsync } from "../compiler-mini"
+import {
+  cssREG,
+  getFullPath,
+  genPreprocessOptions,
+  customRequire,
+  genPostcssUrlOptions
+} from "../utils"
+
 import type { Plugin } from "esbuild"
 import type { VueOptions } from 'types'
 
@@ -27,39 +34,42 @@ export default function styleLoader (options: VueOptions = {}): Plugin {
       build.onLoad({ filter: /.*/, namespace: "styles" }, async (args) => {
         const { path: filename, pluginData: { lang } } = args
         const source = await fs.promises.readFile(filename, "utf8")
+        const deps = new Set<string>([])
         const res = await compileStyleAsync({
           source,
           filename,
           id: "stylefile",
           preprocessLang: lang as any,
-          preprocessOptions: {
-            includePaths: [
-              path.dirname(filename),
-              "src/styles",
-              "node_modules"
-            ],
-            importer: [
-              (url: string) => {
-                const file = replaceRules(url)
-                const modulePath = path.join(process.cwd(), "node_modules", file)
-                if (fs.existsSync(modulePath)) return { file: modulePath }
-                return { file }
-              }
-            ],
-            ...(options?.style?.preprocessOptions || {})
-          },
+          preprocessOptions: genPreprocessOptions(
+            filename,
+            options?.style?.preprocessOptions
+          ),
+          postcssPlugins: [
+            ...(options?.style?.postcssPlugins || []),
+            customRequire(`postcss-url`)({
+              url: !options.useCDN ? "inline" : genPostcssUrlOptions(options)
+            })
+          ],
           ...(options?.style || {})
         })
 
         if (res.errors.length) {
           console.warn(res.errors.map((e) => `${e}`).join("\n"))
         }
 
+        if (res.dependencies.size) {
+          Array
+            .from(res.dependencies)
+            .map(d => {
+              if (!deps.has(d) && !d.startsWith(".vue")) deps.add(d)
+            })
+        }
+
         return {
           contents: res.code,
           resolveDir: path.dirname(args.path),
           loader: "css",
-          watchFiles: [args.path]
+          watchFiles: [args.path, ...Array.from(deps)]
         }
       })
     }