Add docs about asset management

[SephReed]

The auto importing topic is covered in one part of the docs, but it would be nice to have a dedicated section. A bit of stuff:

// fuse config

dependencies.include = "path/to/resource/folder/"

Using a literal import

import ref from "./image.png"

document.body.innerHTML += `<img src="${ref}">`;

[nchanged]

Should consider resources field too.

[SephReed]

Hey. I'm trying to use an image in fuse-box 4.0 and can't figure it out.

If I do:

import ref from "./image.png"

It gives "./abc123.png" when it should give "./resources/abc123.png". Also, it renames it which I don't want it to do.

I've tried adding this to my cofig:

dependencies: {
    include: ['tslib', "./assets"],
  },

But it's not copying my assets folder over.

I can't figure out how to display an image right now. :/

[SephReed]

For now I'm just manually copy pasting into dist.

[nchanged]

Add link configuration, There is a bug where it prioritizes it's local config over the global one

[SephReed]

I still haven't figured out how to work around this problem in fuse-box.

It seems there should be some very, very simple way to copy files from one folder to another inside dist.

Right now I'm trying to use chokidar to achieve this because I can not figure out how to make it happen in fuse-box.

[SephReed]

For this config:

fuse-box/src/config/IDependencies.ts

Lines 14 to 19 in 0c30c7b

	export interface IDependencies {
	ignore?: Array<string | RegExp>;
	importRefs?: Array<IImportRef>;
	include?: Array<string>;
	serverIgnoreExternals?: boolean;
	}

What would it take to make the following config option possible:

interface IDependecyIncludeConfig {
  target: string;             // path or glob to files that should be included in dist
  distPath: string;         // path from dist root for where files should be copied
}

The result being something like so:

cosnt bundler = fusebox({
  // ... omitted
  dependencies: {
    include: [
      {   
        target: "../assets/img/**/*", 
        distPath: "./img" 
      }
    ]
  }
});

---

I remember this type of stuff was really easy with sparky, but I don't think Sparky is around anymore (Is it?). So maybe this kind of behavior could become part of standard fuse-box.

[SephReed]

The following code does not work:

class Context {
  isProduction;
  runServer;
}
const { task, src } = sparky<Context>(Context);

// src("./assets/**/*")
//   .dest("./dist", "")
//   .exec();

task("default", async () => {
  await src("./assets/**/**.**")
    .dest("./dist/", ".")
    .exec();
});

[SephReed]

I can't find a single usage of sparky().src() anywhere in the entire codebase: https://github.com/fuse-box/fuse-box/search?p=5&q=sparky+src%28

[SephReed]

Found the issue:

fuse-box/src/sparky/sparky_chain.ts

Lines 46 to 53 in fe10bf4

	const s = path.normalize(ensureFuseBoxPath(file)).split(newLocationBase);
	if (!s[1]) {
	log.error(`Can't find base of ${newLocationBase} of ${file}`);
	return;
	} else {
	const newFileLocation = path.join(root, s[1]);
	ensureDir(path.dirname(newFileLocation));
	await writeFile(newFileLocation, readFiles[file]);

For some reason all files that have a newLocation and newBase (which is true whenever sparky().dest()) are put into folders of their filetype.

It seems like maybe some logic that belongs in the resources use case got put into sparky proper.

In any case, it no longer appears to be possible to use sparky to simply copy files from one place to another.