Add attribute to the body/head element with Guess.js version

[mgechev]

No description provided.

[brunob15]

Hi Minko! I don't have much experience but I would like to work on this one.

Do you have any approach to achieve this?

[mgechev]

This features involves the following two steps:

1. Extracting the Guess.js version from package.json
2. Adding an attribute to an element on the page with value the extracted version

For the first step there are two main approaches that seem feasible. The first one is adding a placeholder in any of the runtime script templates and filling it in the build npm script. The other approach is getting the value from the package.json at build time of the user's app and filling a placeholder. I'm leaning towards the first approach.

Now, in the runtime script we should add an attribute to an element. The tricky part is that we need to add it to an element that we're certain it exists. We can call this attribute guess-version.

[brunob15]

Thank you for the answer! I'm taking a time to dig into the problem and have a better understanding.

Let me put an example to see if I understood.

Lets say we add a version.ts file under guess/packages/guess-parser/src. This file contains something like: const guess_version = '';
This file also is in charge on adding the guess-version attribute to the DOM.

Also we modify the npm run build script in the main package.json file to something like: "build": "fill-placeholder && lerna run build".

Fill-placeholder will replace the guess-version value in version.ts file.

Does this approximate to your solution, Minko?

Thank you!

[brunob15]

I'm sorry, I was wrong. The placeholder should go in /packages/guess-webpack/src/runtime/runtime.ts.

[mgechev]

@brunob15, yes, this sounds like a good plan to me! You're right about the package, it should be in guess-webpack/src/runtime/runtime.ts.

[brunob15]

Great, thank you for your answer! I'll try to come back with a solution.

[skyme5]

@brunob15 are you still working on this issue? We can use the following method,

• with TypeScript 2.9+, compiler option resolveJsonModule allows directly importing json files
• set compilerOptions.resolveJsonModule to true in both /tsconfig.json and /packages/guess-webpack/tsconfig.json
• export version from package.json in packages/guess-webpack/src/runtime/guess.ts as

import { version as guess_version } from '../../package.json';
...
export const version = guess_version;

• use this version in packages/guess-webpack/src/runtime/runtime.ts to set body attribute as

import { guess, initialize as initializeGuess, version } from './guess';
...
export const initialize = (
...
  if (typeof document !== 'undefined' && typeof document.body !== 'undefined'){
    document.body.setAttribute('guess-version', version);
  }

@mgechev, What do you think? Should I open a pull request?

[brunob15]

@skyme5 No, I'm not.

[mgechev]

Excuse me for the delay. We did some experiments in HTTPArchive to find who's currently using Guess.js.

Looks like crawlers are executing JavaScript. They can look up the __GUESS__ global and find if the app is using Guess.js. It'll be useful, however, adding the version as a property of the global object.

Having:

__GUESS__ = {
  p() {
    // ...
  },
  version: 'X.Y.Z'
};

Would be great.