feat: support package exports and custom paths

client/components/AutocompleteInput/AutocompleteInput.js

@@ -72,7 +72,7 @@ export default class AutocompleteInput extends PureComponent {
  render() {
  const { className, containerClass, autoFocus, renderAsH1 } = this.props
  const { suggestions, value, isMenuVisible } = this.state
- const { name, version } = parsePackageString(value)
+ const { name, version, path } = parsePackageString(value)
  const baseFontSize =
  typeof window !== 'undefined' && window.innerWidth < 640 ? 22 : 35
  const maxFullSizeChars =
@@ -142,6 +142,10 @@ export default class AutocompleteInput extends PureComponent {
  <span className="dummy-input__at-separator">@</span>
  )}
  <span className="dummy-input__package-version">{version}</span>
+ {path !== null && (
+ <span className="dummy-input__path-separator">/</span>
+ )}
+ <span className="dummy-input__package-path">{path}</span>
  </div>
  </div>
  <div

client/components/AutocompleteInput/AutocompleteInput.scss

@@ -57,10 +57,18 @@
  color: #636363;
 }
 
+.dummy-input__package-path {
+ color: #a9a9a9;
+}
+
 .dummy-input__at-separator {
  color: $pastel-green;
 }
 
+.dummy-input__path-separator {
+ color: #a9a9a9;
+}
+
 .autocomplete-input__suggestions-menu {
  border: 1px solid $autocomplete-border-color;
  border-top: 0;

index.js

@@ -103,6 +103,7 @@ app.prepare().then(() => {
  hash: ctx => ({
  name: ctx.state.resolved.name,
  version: ctx.state.resolved.version,
+ path: ctx.state.resolved.path,
  }),
  }),
  errorMiddleware,
@@ -128,6 +129,7 @@ app.prepare().then(() => {
  hash: ctx => ({
  name: ctx.state.resolved.name,
  version: ctx.state.resolved.version,
+ path: ctx.state.resolved.path,
  }),
  }),
  errorMiddleware,

pages/package/[...packageString]/ResultPage.js

@@ -82,7 +82,9 @@ class ResultPage extends PureComponent {
 
  if (this.activeQuery !== packageString) return
 
- const newPackageString = `${results.name}@${results.version}`
+ const newPackageString =
+ `${results.name}@${results.version}` +
+ (results.path ? '/' + results.path : '')
  this.setState(
  {
  inputInitialValue: newPackageString,

pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.js

@@ -153,7 +153,8 @@ class ExportAnalysisSection extends Component {
  startAnalysis = () => {
  const { result } = this.props
  const { name, version } = result
- const packageString = `${name}@${version}`
+ const packageString =
+ `${name}@${version}` + (result.path ? '/' + result.path : '')
  const startTime = Date.now()
  let sizeStartTime
 

server/middlewares/exports.middleware.js

@@ -11,7 +11,7 @@ const buildService = new BuildService()
 async function exportsMiddleware(ctx) {
  let result,
  priority = getRequestPriority(ctx)
- const { name, version, packageString } = ctx.state.resolved
+ const { name, version, path, packageString } = ctx.state.resolved
  const { force, package: packageQuery } = ctx.query
 
  const buildStart = now()
@@ -26,7 +26,7 @@ async function exportsMiddleware(ctx) {
  ? CONFIG.CACHE.SIZE_API_HAS_VERSION
  : CONFIG.CACHE.SIZE_API_DEFAULT,
  }
- ctx.body = { name, version, exports: result }
+ ctx.body = { name, version, path, exports: result }
  const time = buildEnd - buildStart
 
  logger.info(

server/middlewares/exportsSizes.middleware.js

@@ -13,15 +13,15 @@ const buildService = new BuildService()
 async function exportSizesMiddleware(ctx) {
  let result,
  priority = getRequestPriority(ctx)
- const { name, version, packageString } = ctx.state.resolved
+ const { name, version, packageString, path } = ctx.state.resolved
  const { force, peek, package: packageQuery } = ctx.query
 
  if (peek) {
  return { name, version, peekSuccess: false }
  }
 
  const buildStart = now()
- result = await buildService.getPackageExportSizes(packageString, priority)
+ result = await buildService.getPackageExportSizes(packageQuery, priority)
 
  const buildEnd = now()
 
@@ -33,7 +33,7 @@ async function exportSizesMiddleware(ctx) {
  : CONFIG.CACHE.SIZE_API_DEFAULT,
  }
 
- const body = { name, version, ...result }
+ const body = { name, version, path, ...result }
  ctx.body = body
  const time = buildEnd - buildStart
 

server/middlewares/results/build.middleware.js

@@ -18,6 +18,7 @@ async function buildMiddleware(ctx, next) {
  scoped,
  name,
  version,
+ path,
  description,
  repository,
  packageString,
@@ -36,7 +37,15 @@ async function buildMiddleware(ctx, next) {
  : CONFIG.CACHE.SIZE_API_DEFAULT,
  }
 
- const body = { scoped, name, version, description, repository, ...result }
+ const body = {
+ scoped,
+ name,
+ version,
+ path,
+ description,
+ repository,
+ ...result,
+ }
  ctx.body = body
  ctx.state.buildResult = body
  const time = buildEnd - buildStart

server/middlewares/results/resolvePackage.middleware.js

@@ -12,11 +12,11 @@ async function resolvePackageMiddleware(ctx, next) {
  // prefill values in case resolution fails
  ctx.state.resolved = {
  ...parsedPackage,
- packageString: `${parsedPackage.name}@${parsedPackage.version}`,
+ packageString: parsedPackage.fullPath,
  }
 
  const resolveStart = now()
- resolvedPackage = await resolvePackage(packageString)
+ resolvedPackage = await resolvePackage(parsedPackage.normalPath)
  const resolveEnd = now()
 
  const { name, version, repository, description } = resolvedPackage
@@ -39,8 +39,9 @@ async function resolvePackageMiddleware(ctx, next) {
  const result = {
  name,
  version,
+ path: parsedPackage.path,
  scoped: parsedPackage.scoped,
- packageString: `${name}@${version}`,
+ packageString: parsedPackage.fullPath,
  description: truncatedDescription,
  repository: repositoryURL,
  }

utils/common.utils.js

@@ -7,32 +7,57 @@ function parsePackageString(packageString) {
  // Scoped packages
  let name,
  version,
+ path,
  scope,
  scoped = false
  const lastAtIndex = packageString.lastIndexOf('@')
  const firstSlashIndex = packageString.indexOf('/')
 
  if (packageString.startsWith('@')) {
+ const secondSlashIndex = packageString.indexOf('/', firstSlashIndex + 1)
+
  scoped = true
  scope = packageString.substring(1, firstSlashIndex)
- if (lastAtIndex === 0) {
- name = packageString
- version = null
- } else {
- name = packageString.substring(0, lastAtIndex)
- version = packageString.substring(lastAtIndex + 1)
- }
+
+ name =
+ lastAtIndex === 0
+ ? secondSlashIndex === -1
+ ? packageString
+ : packageString.substring(0, secondSlashIndex)
+ : packageString.substring(0, lastAtIndex)
+ version =
+ lastAtIndex === 0
+ ? null
+ : secondSlashIndex === -1
+ ? packageString.substring(lastAtIndex + 1)
+ : packageString.substring(lastAtIndex + 1, secondSlashIndex)
+ path =
+ secondSlashIndex === -1
+ ? null
+ : packageString.substring(secondSlashIndex + 1)
  } else {
- if (lastAtIndex === -1) {
- name = packageString
- version = null
- } else {
- name = packageString.substring(0, lastAtIndex)
- version = packageString.substring(lastAtIndex + 1)
- }
+ name =
+ lastAtIndex === -1
+ ? firstSlashIndex === -1
+ ? packageString
+ : packageString.substring(0, firstSlashIndex)
+ : packageString.substring(0, lastAtIndex)
+ version =
+ lastAtIndex === -1
+ ? null
+ : firstSlashIndex === -1
+ ? packageString.substring(lastAtIndex + 1)
+ : packageString.substring(lastAtIndex + 1, firstSlashIndex)
+ path =
+ firstSlashIndex === -1
+ ? null
+ : packageString.substring(firstSlashIndex + 1)
  }
 
- return { name, version, scope, scoped }
+ const normalPath = name + (version ? '@' + version : '')
+ const fullPath = normalPath + (path ? '/' + path : '')
+
+ return { name, version, path, scope, scoped, normalPath, fullPath }
 }
 
 function daysFromToday(date) {