[clover] Proposal: transferrable assets

Proposal

What is the summary of the proposal?

This proposal adds a capability for static rendering with external content files.

Usecases

• Blog site
• Documentation
  • App Shell + Markdown contents (like AIO)
• Load initial data from JSON and fetch fresh one.

What is the proposal?

Builder-side

Adding a transferAssets option to the @nguniversal/builders:static-generator, which is an array that accepts paths of assets. It is relative from the output path of the browser target.

       "build-static": {
          "builder": "@nguniversal/builders:static-generator",
          "options": {
            "browserTarget": "clover:build:production",
            "routes": [
              "/",
              "pokemon/pikachu",
              "pokemon/charmander",
              "pokemon/squirtle",
              "pokemon/bulbasaur"
            ],
            "transferAssets": [
              "pokemon.json"
            ]
          }
        }

Engine-side

Embedding assets as a JSON state immediately after ngRenderMode has been built. TransferState will be initialized with the state.

      // Embed assets within transfer state
      if (options.transferAssetsPaths) {
        const assets = await Promise.all(
          options.transferAssetsPaths.map((assetPath) => ({
            assetPath,
            content: fs.promises.readFile(path.resolve(options.publicPath, assetPath), 'utf-8'),
          })),
        );
        const assetMap = assets.reduce(
          (map, asset) => ({ ...map, [asset.assetPath]: asset.content }),
          {},
        );
        const state = JSON.stringify(assetMap);
        this.embedTransferState(doc, ngRenderMode.appId, state);
      }

      await ngRenderMode.getWhenStable();

This is an implementation for proof of concept. I don’t think it is production-ready but enough to explain what this proposal aims for.

https://github.com/lacolaco/universal/commit/52f7b7de5099bf0bc9fccbc8a914e92374572ca2

Is there anything else we should know?

Considerations

• jsdom doesn’t support intercepting to XHR, so CustomResourceLoader cannot help this usecase.
• At first, I thought assets from the browser target can be used for this purpose, but assets can contain non-text files like images. So explicit option would be needed.

[alan-agius4]

I now see what you mean.

Ideally, we should do this without extending the API, we already intercept the all HTTP request in TransferHttpCacheModule.

I think in this case what we can do is add a fallback handler that adds a file:// to requests. XHR can work with local file as well as remote files. That being said, this would need to be tested thoroughly since it can expose a security risk.

JFYI: in the code provided above, the assets are actually stored in that state but are never used by the client, this is because the cache key that the HTTP interceptor uses is more complex https://github.com/angular/universal/blob/094756f95cf8797b28b21e4998a2879ff8973a58/modules/common/clover/src/transfer-http-cache/transfer-http-cache.interceptor.ts#L65

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}