Home / File/ utils.ts — vue Source File

utils.ts — vue Source File

Architecture documentation for utils.ts, a typescript file in the vue codebase. 4 imports, 2 dependents.

File typescript SfcCompiler ScriptCompiler 4 imports 2 dependents 4 functions

Entity Profile

Dependency Diagram

graph LR
  c7f42e34_1c62_9250_3035_ae380c3322e2["utils.ts"]
  cae36964_2fe7_a649_0189_6f756f42c7f5["assetUrl.ts"]
  c7f42e34_1c62_9250_3035_ae380c3322e2 --> cae36964_2fe7_a649_0189_6f756f42c7f5
  43eac639_4f58_466c_2a30_0af4c4f2e699["TransformAssetUrlsOptions"]
  c7f42e34_1c62_9250_3035_ae380c3322e2 --> 43eac639_4f58_466c_2a30_0af4c4f2e699
  7b98993a_69e4_e70c_6a65_19adbb2fbc6a["url"]
  c7f42e34_1c62_9250_3035_ae380c3322e2 --> 7b98993a_69e4_e70c_6a65_19adbb2fbc6a
  7c454890_6339_b799_a183_9dcaf8992812["path"]
  c7f42e34_1c62_9250_3035_ae380c3322e2 --> 7c454890_6339_b799_a183_9dcaf8992812
  cae36964_2fe7_a649_0189_6f756f42c7f5["assetUrl.ts"]
  cae36964_2fe7_a649_0189_6f756f42c7f5 --> c7f42e34_1c62_9250_3035_ae380c3322e2
  d1a7581d_37f4_760f_46fe_99640069e5dd["srcset.ts"]
  d1a7581d_37f4_760f_46fe_99640069e5dd --> c7f42e34_1c62_9250_3035_ae380c3322e2
  style c7f42e34_1c62_9250_3035_ae380c3322e2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { TransformAssetUrlsOptions } from './assetUrl'
import { UrlWithStringQuery, parse as uriParse } from 'url'
import path from 'path'

export function urlToRequire(
  url: string,
  transformAssetUrlsOption: TransformAssetUrlsOptions = {}
): string {
  const returnValue = `"${url}"`
  // same logic as in transform-require.js
  const firstChar = url.charAt(0)
  if (firstChar === '~') {
    const secondChar = url.charAt(1)
    url = url.slice(secondChar === '/' ? 2 : 1)
  }

  if (isExternalUrl(url) || isDataUrl(url) || firstChar === '#') {
    return returnValue
  }

  const uriParts = parseUriParts(url)
  if (transformAssetUrlsOption.base) {
    // explicit base - directly rewrite the url into absolute url
    // does not apply to absolute urls or urls that start with `@`
    // since they are aliases
    if (firstChar === '.' || firstChar === '~') {
      // Allow for full hostnames provided in options.base
      const base = parseUriParts(transformAssetUrlsOption.base)
      const protocol = base.protocol || ''
      const host = base.host ? protocol + '//' + base.host : ''
      const basePath = base.path || '/'
      // when packaged in the browser, path will be using the posix-
      // only version provided by rollup-plugin-node-builtins.
      return `"${host}${(path.posix || path).join(
        basePath,
        uriParts.path + (uriParts.hash || '')
      )}"`
    }
  }

  if (
    transformAssetUrlsOption.includeAbsolute ||
    firstChar === '.' ||
    firstChar === '~' ||
    firstChar === '@'
  ) {
    if (!uriParts.hash) {
      return `require("${url}")`
    } else {
      // support uri fragment case by excluding it from
      // the require and instead appending it as string;
      // assuming that the path part is sufficient according to
      // the above caseing(t.i. no protocol-auth-host parts expected)
      return `require("${uriParts.path}") + "${uriParts.hash}"`
    }
  }
  return returnValue
}

/**
 * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
 * @param urlString an url as a string
 */
function parseUriParts(urlString: string): UrlWithStringQuery {
  // initialize return value
  const returnValue: UrlWithStringQuery = uriParse('')
  if (urlString) {
    // A TypeError is thrown if urlString is not a string
    // @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
    if ('string' === typeof urlString) {
      // check is an uri
      return uriParse(urlString, false, true) // take apart the uri
    }
  }
  return returnValue
}

const externalRE = /^(https?:)?\/\//
function isExternalUrl(url: string): boolean {
  return externalRE.test(url)
}

const dataUrlRE = /^\s*data:/i
function isDataUrl(url: string): boolean {
  return dataUrlRE.test(url)
}

Domain

Subdomains

Frequently Asked Questions

What does utils.ts do?
utils.ts is a source file in the vue codebase, written in typescript. It belongs to the SfcCompiler domain, ScriptCompiler subdomain.
What functions are defined in utils.ts?
utils.ts defines 4 function(s): isDataUrl, isExternalUrl, parseUriParts, urlToRequire.
What does utils.ts depend on?
utils.ts imports 4 module(s): TransformAssetUrlsOptions, assetUrl.ts, path, url.
What files import utils.ts?
utils.ts is imported by 2 file(s): assetUrl.ts, srcset.ts.
Where is utils.ts in the architecture?
utils.ts is located at packages/compiler-sfc/src/templateCompilerModules/utils.ts (domain: SfcCompiler, subdomain: ScriptCompiler, directory: packages/compiler-sfc/src/templateCompilerModules).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free