ampproject / ampproject/amphtml

I2I/Discussion: Absolute or aliased imports in AMP code

Open
#34,529 12 comments 0 reactions 0 assignees View on GitHub
INTENT TO IMPLEMENT Stale
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

# Absolute import paths in AMP

## Overview

AMP code has a wide range of dependencies, some of which can be unclear. These imports are referenced using relative paths like `../../../src/utils/math`. This can be annoying to read and type, and can obscure some of the relationships between a source file and its dependencies (related: [#32693](https://github.com/ampproject/amphtml/issues/32693)). This becomes especially relevant as we create a Bento codebase that needs to be independent of AMP services.

## Early-stage Idea

We're exploring the idea of supporting some form of absolute or aliased import paths. **The objective is to identify if this idea is worth pursuing further, not necessarily to arrive at a final design.** All proposals below have been confirmed to be workable in our build systems and VSCode integrations.

## Some possibilities

First, a comparison from the developer experience view before discussing the tradeoffs of each. Taken from `'extensions/amp-base-carousel/1.0/base-carousel.js'`.

### Current

![image](https://user-images.githubusercontent.com/6694512/119544306-91c3c080-bd5f-11eb-90de-018e65b99d0a.png)

### Absolute paths

![image](https://user-images.githubusercontent.com/6694512/119544345-9b4d2880-bd5f-11eb-8740-cfeb02961222.png)

### Aliased paths

![image](https://user-images.githubusercontent.com/6694512/119544390-a607bd80-bd5f-11eb-87ef-9ae226dc9736.png)

### Package-like paths

![image](https://user-images.githubusercontent.com/6694512/119544435-b15ae900-bd5f-11eb-9e25-b8730a11a717.png)

## Pros & Cons

### All variants (except Current) listed above/below

* **Example:** `'../../../src/core/types`, `'../../../src/preact/context'`, `'../../amp-lightbox-gallery/1.0/component'`
* **Pros:** easily supported by build systems, native support in VSCode integration, import stability when moving files, shorter imports/no `../../../..` soup, visual clarity in dependencies
* **Cons:** a new layer of indirection/complexity, a new convention for AMP devs to learn, time spent on something many devs don't think about/rely on IDE for

### Absolute paths

* **Examples:** `'src/core/types'`, `'src/preact/context'`, `'extensions/amp-lightbox-gallery/1.0/component'`
* **Pros:** fairly common in JS projects, trivial to understand, better read/write-ability
* **Cons:** slight risk of namespace collision with `node_modules`

### Aliased paths

* **Examples:** `'#core/types'`, `'#preact/context'`, `'#extensions/amp-lightbox-gallery/1.0/component'`
* **Pros:** clear "entry-points" (core, preact, services, extensions, etc), easy to read/group imports, clear dependencies across top-level directories, follows built-in subpath imports supported by package.json, [possible to swap "target"](https://nodejs.org/api/packages.html#packages_subpath_imports) from local source to npm package (ie. Bento core package)
* **Cons:** more indirection, less commonly seen in other projects

### Package-like paths

* **Examples:** `'@ampproject/core/types'`, `'@ampproject/preact/context'`, `'@ampproject/extensions/amp-lightbox-gallery/1.0/component'`
* **Pros:** all benefits of aliased paths, more familiar to devs, mirrors how external projects might import from npm packages
* **Cons:** misleading (not actually importing from npm packages), more verbose

## Key Questions

* Is this worth exploring more deeply?
* Do you think this would have any impact (positive or negative) on your developer experience?
* If so, which of the options above seem most appealing to you?

Contributor guide

Open the contributing guide

Research direction

Start with the import examples in extensions/amp-base-carousel/1.0/base-carousel.js and compare the current, absolute, aliased, and package-like options described in the issue. Review the listed pros, cons, and Node.js package subpath reference, then document whether further exploration is warranted and which option best addresses AMP and Bento development needs.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
build-system, developer-experience
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.