Skip to content

Instantly share code, notes, and snippets.

@digitalsadhu
Last active June 5, 2020 04:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save digitalsadhu/c7a3e70d1effd872d24dd3a622a76b1c to your computer and use it in GitHub Desktop.
Save digitalsadhu/c7a3e70d1effd872d24dd3a622a76b1c to your computer and use it in GitHub Desktop.

I’ve done a little digging. I think we have some challenges to solve regarding supporting both Eik and Asset pipe in the manifest file.

Notes

  1. in the manifest file must have the legacy field populated with asset pipe hash and the new js and css arrays must be populated with Eik absolute URLs
  2. the first time podlet.js or podlet.css is called, the legacy field is populated, subsequent calls do not reset the legacy field so it is important that the asset pipe stuff is done before the Eik stuff
  3. Even when podlet.js and podlet.css are called in the correct order, the legacy field is added to the array of modern fields

Examples

Calling podlet.js with Eik value first, then asset pipe value

podlet.js({ type: 'module', value: 'https://assets.finn.no/pkg/consent-newsletter/1.0.2/main/index.js' });
podlet.js({ value: '/s2d1fs31fd2s31df2s3df12s3312f312' });

Results in a manifest file:

{
  "name": "newsletter",
  "version": "1591330871297",
  "content": "/",
  "fallback": "/fallback",
  "assets": {
    "js": "https://assets.finn.no/pkg/consent-newsletter/1.0.2/main/index.js",
    "css": ""
  },
  "css": [
    
  ],
  "js": [
    {
      "value": "https://assets.finn.no/pkg/consent-newsletter/1.0.2/main/index.js",
      "type": "module"
    },
    {
      "value": "/s2d1fs31fd2s31df2s3df12s3312f312",
      "type": "default"
    }
  ],
  "proxy": {
    "accept": "/accept"
  }
}

So the asset pipe hash only ends up in the new js array which totally wont fly as we want it in the legacy field

Calling podlet.js with asset pipe value first, then Eik value

podlet.js({ value: '/s2d1fs31fd2s31df2s3df12s3312f312' });
podlet.js({ type: 'module', value: 'https://assets.finn.no/pkg/consent-newsletter/1.0.2/main/index.js' });

Results in a manifest file:

{
  "name": "newsletter",
  "version": "1591330123063",
  "content": "/",
  "fallback": "/fallback",
  "assets": {
    "js": "/s2d1fs31fd2s31df2s3df12s3312f312",
    "css": ""
  },
  "css": [],
  "js": [
    {
      "value": "/s2d1fs31fd2s31df2s3df12s3312f312",
      "type": "default"
    },
    {
      "value": "https://assets.finn.no/pkg/consent-newsletter/1.0.2/main/index.js",
      "type": "module"
    }
  ],
  "proxy": {
    "accept": "/accept"
  }
}

So the asset pipe hash ends up in both the legacy section AND ALSO the new js array which is not idea as the layout will need to do some hacky filtering to remove the asset pipe hash

Calling podlet.js where you want the legacy fields to be blank (eg. header, footer and consent-newsletter podlets)

podlet.js({ type: 'module', value: 'https://assets.finn.no/pkg/consent-newsletter/1.0.2/main/index.js' });

Results in a manifest file:

{
  "name": "newsletter",
  "version": "1591331128610",
  "content": "/",
  "fallback": "/fallback",
  "assets": {
    "js": "https://assets.finn.no/pkg/consent-newsletter/1.0.2/main/index.js",
    "css": ""
  },
  "css": [
    
  ],
  "js": [
    {
      "value": "https://assets.finn.no/pkg/consent-newsletter/1.0.2/main/index.js",
      "type": "module"
    }
  ],
  "proxy": {
    "accept": "/accept"
  }
}

So the Eik values end up in both the legacy and new fields which means we then have to hackily filter them out in the manifest route

What we want to support, the 2 cases

Case 1. Eik and nothing else (also accounts for inline assets like the header and footer)

A JSON file for this needs to look like this

{
  "name": "newsletter",
  "version": "1591331128610",
  "content": "/",
  "fallback": "/fallback",
  "assets": {
    "js": "",
    "css": ""
  },
  "css": [
    
  ],
  "js": [
    {
      "value": "https://assets.finn.no/pkg/consent-newsletter/1.0.2/main/index.js",
      "type": "module"
    }
  ],
  "proxy": {
    "accept": "/accept"
  }
}

Case 2. Eik and Asset Pipe side by side

A JSON file for this needs to look like:

{
  "name": "newsletter",
  "version": "1591331128610",
  "content": "/",
  "fallback": "/fallback",
  "assets": {
    "js": "/d1f23s123ds12df3s1df23sdf12s3df12s3f1d23sf1",
    "css": ""
  },
  "css": [
    
  ],
  "js": [
    {
      "value": "https://assets.finn.no/pkg/consent-newsletter/1.0.2/main/index.js",
      "type": "module"
    }
  ],
  "proxy": {
    "accept": "/accept"
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment