parcel icon indicating copy to clipboard operation
parcel copied to clipboard

Namer Plugins - Separate naming process from on-disk file path

Open sdedovic opened this issue 4 months ago • 2 comments

I have searched the issues / PRs and cannot find something to help support what I need. I am happy to open a PR if someone can point me in the correct direction.

🙋 feature request

I want to be able to split my assets up by type into two separate folders, without the Namer changing paths.

dist
├── static
│   ├── assets
│   │   └── hammer-icon.svg
│   ├── index.61d3354a.css
│   ├── index.61d3354a.css.map
│   ├── index.b71e74eb.js
│   └── index.b71e74eb.js.map
└── template
    ├── base.htpp
    └── index.htpp

This is because files under template will be deployed to a server application and files under static will be deployed to a CDN.

Another way to view this - after the Namer, Optimizesr, Compressors run, partition the files into two folders based on bundle type without changing the name.

🤔 Expected Behavior

Naming assets (in a Namer plugin) is separate from placing them in the output directory (e.g. support a subdir without changing all the paths).

😯 Current Behavior

The name is the path on disk and the reference in other assets (e.g. src="...")

💁 Possible Solution

As far as I am aware, this cannot be done now. I was thinking of changing the Namer contract to return either a FilePath string or an object of the structure:

interface NamerReturn {
  name: string;
  subdirectory: FIlePath;
}

To support existing behviour (where these are the same) and new behaviour (where these can be different).

🔦 Context

I am using Parcel to develop HTML templates. The template files I write reference JS, CSS, and other types of assets relatively. Parcel then processes these Templates to resolve references to assets and point to now bundled/built assets. The problem is that Templates are shipped in a different way than static files - the former are injected into a server application and the latter are deployed on a CDN.

💻 Examples

Currently I am doing this manually,

npx parcel build --out-dir=dist-tmp src/index.htpp # template file

# move template files
mkdir -p dist/template
rsync -rv --include '*/' --include '*.htpp' --exclude '*' --prune-empty-dirs dist-tmp/ /dist/template/

# move stati ciles
mkdir -p dist/static
rsync -rv --include '*/' --include '*' --exclude '*.htpp' --prune-empty-dirs dist-tmp/ /dist/static/

sdedovic avatar Oct 15 '24 00:10 sdedovic