Type error when using custom ring names

[nocquidant]

Hi, using my own ring names produces the following error with version 4.0.1 (npm run serve is fine)

$ npm run build
...

./src/lib/data.ts:65:10
Type error: Conversion of type '{ id: string; release: string; title: string; ring: string; quadrant: string; body: string; featured: boolean; flag: string; tags: string[]; revisions: never[]; position: number[]; }[]' to type 'Item[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type '{ id: string; release: string; title: string; ring: string; quadrant: string; body: string; featured: boolean; flag: string; tags: string[]; revisions: never[]; position: number[]; }' is not comparable to type 'Item'.
    Types of property 'position' are incompatible.
      Type 'number[]' is not comparable to type '[x: number, y: number]'.
        Target requires 2 element(s) but source may have fewer.

  63 |
  64 | export function getItems(quadrant?: string, featured?: boolean): Item[] {
> 65 |   return data.items.filter((item) => {
     |          ^
  66 |     if (quadrant && item.quadrant !== quadrant) return false;
  67 |     return !(featured && !item.featured);
  68 |   }) as Item[];
node:child_process:965
    throw err;
    ^

Error: Command failed: npm run build
    at checkExecSyncError (node:child_process:890:11)
    at execSync (node:child_process:962:15)
    at Object.<anonymous> (/home/ocquidant/tmp/techradar/node_modules/aoe_technology_radar/bin/techradar.js:149:3)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 372738,
  stdout: null,
  stderr: null
}

Node.js v20.9.0

[tclift]

Did you upgrade from v3? I ran into this issue when upgrading. The migration notes aren't great, and the docs say something about bootstrapping a new config file, but I couldn't get that to work.

Instead I created a fresh project, somehow got it to create config.json (which is now in the repo root, not under public/) and used that as the basis to migrate.

I haven't experimented, but I think that the properties might not be optional in the config. E.g. you need the full:

  "rings": [
    {
      "id": "adopt",
      "title": "Adopt",
      "description": "This technology is broadly recommended for adoption across the organisation.",
      "color": "#588157",
      "radius": 0.5,
      "strokeWidth": 5
    },
    // ...

[mathiasschopmans]

This looks like a configuration issue to me. Can you post your configuration or provide a link to a repo to reproduce, @nocquidant?

@tclift There was an issue in v4.0.0 which prevented the creation of the bootstrap files, but it should work in v4.0.1. And yes, you're right: I need to improve the migration instructions.

[nocquidant]

Hi, thanks for the quick reply.

@tclift , yes it is a migration from v3 but I start from there: https://github.com/AOEpeople/techradar

@mathiasschopmans, actually I have the same error doing the following:

• clone https://github.com/AOEpeople/techradar
• npm run build -> OK
• remove all folders in radar folder except: 2023-11-01
• npm run build -> failed (same error)

[mathiasschopmans]

Thank you for the hint. I was able to reproduce and -even better- hopefully fix the bug.

If you git pull our demo radar, npm install and npm run build again it should work.

The TypeScript hint Types of property 'position' are incompatible was misleading. I din't think of the very first release and that it may not have any revisions, which resulted in revisions: never[].

Additionally I have also made sure that the first release does not mark all items as "New".

[nocquidant]

Thanks, it actually works for the project: https://github.com/AOEpeople/techradar But I still got the issue for my own project. Still investigating...

[mathiasschopmans]

Try increasing the version attribute in your package.json or deleting the hidden build folder .techradar. (rm -rf .techradar).

This will ensure that the dependencies will be downloaded again.

[mathiasschopmans]

BTW: I just released the version 4.0.2 on npm, in case you didn't import the module via git.

"dependencies": {
    "aoe_technology_radar": "^4.0.2"
  }

vs.

"dependencies": {
    "aoe_technology_radar": "github:AOEpeople/aoe_technology_radar#main"
  }

[nocquidant]

Replacing the config.json in https://github.com/AOEpeople/techradar by the following content produces the error.

./src/lib/data.ts:66:26 Type error: Property 'quadrant' does not exist on type 'never'.

{
  "basePath": "/techradar",
  "editUrl": "https://github.dev/AOEpeople/techradar/blob/main/radar/{release}/{id}.md",
  "colors": {
    "foreground": "#fff",
    "background": "#173d7a",
    "highlight": "#029df7",
    "content": "#fff",
    "text": "#575757",
    "link": "#029df7",
    "border": "rgba(255, 255, 255, 0.1)",
    "tag": "rgba(255, 255, 255, 0.1)"
  },
  "quadrants": [
    {
      "id": "languages-and-frameworks",
      "title": "Languages & Frameworks",
      "description": "TODO",
      "color": "#84BFA4"
    },
    {
      "id": "data-management",
      "title": "Data Management",
      "description": "TODO",
      "color": "#248EA6"
    },
    {
      "id": "platforms-and-infra",
      "title": "Platforms and Infrastructure",
      "description": "TODO",
      "color": "#F25244"
    },
    {
      "id": "tools",
      "title": "Tools",
      "description": "TODO",
      "color": "#F2A25C"
    }
  ],
  "rings": [
    {
      "id": "cible",
      "title": "Cible",
      "description": "TODO",
      "color": "#5cb449",
      "radius": 0.5,
      "strokeWidth": 5
    },
    {
      "id": "possible",
      "title": "Possible",
      "description": "TODO",
      "color": "#faa03d",
      "radius": 0.69,
      "strokeWidth": 3
    },
    {
      "id": "eval",
      "title": "Eval",
      "description": "TODO",
      "color": "#029df7",
      "radius": 0.85,
      "strokeWidth": 2
    },
    {
      "id": "sortant",
      "title": "Sortant",
      "description": "TODO",
      "color": "#688190",
      "radius": 1,
      "strokeWidth": 0.75
    }
  ],
  "flags": {
    "new": {
      "color": "#f1235a",
      "title": "New",
      "titleShort": "N",
      "description": "New in this version"
    },
    "changed": {
      "color": "#40a7d1",
      "title": "Changed",
      "titleShort": "C",
      "description": "Recently changed"
    },
    "default": {
      "description": "Unchanged"
    }
  },
  "chart": {
    "size": 800,
    "blipSize": 12
  },
  "social": [
    {
      "href": "https://www.facebook.com/aoepeople",
      "icon": "facebook"
    },
    {
      "href": "https://twitter.com/aoepeople",
      "icon": "x"
    },
    {
      "href": "https://www.linkedin.com/company/aoe",
      "icon": "linkedIn"
    },
    {
      "href": "https://www.xing.com/company/aoe",
      "icon": "xing"
    },
    {
      "href": "https://www.instagram.com/aoepeople",
      "icon": "instagram"
    },
    {
      "href": "https://www.youtube.com/user/aoepeople",
      "icon": "youtube"
    },
    {
      "href": "https://github.com/aoepeople",
      "icon": "github"
    }
  ],
  "imprint": "https://www.aoe.com/en/imprint.html",
  "labels": {
    "title": "AOE Technology Radar",
    "imprint": "Legal Information",
    "quadrant": "Quadrant",
    "quadrantOverview": "Quadrant Overview",
    "zoomIn": "Zoom in",
    "filterByTag": "Filter by Tag",
    "footer": "AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting, strategic partnerships with our customers.",
    "notUpdated": "This item was not updated in last three versions of the Radar. Should it have appeared in one of the more recent editions, there is a good chance it remains pertinent. However, if the item dates back further, its relevance may have diminished and our current evaluation could vary. Regrettably, our capacity to consistently revisit items from past Radar editions is limited.",
    "notFound": "404 - Page not found",
    "pageAbout": "How to use AOE Technology Radar?",
    "pageOverview": "Technologies Overview",
    "pageSearch": "Search",
    "searchPlaceholder": "What are you looking for?"
  }
}

[mathiasschopmans]

The config you provided looks valid to me. Since you changed some quadrants and all IDs of the rings, did you update at least one markdown file, to reference one of the new ring ids?

---
title:      "Demo Item"
ring:       cible
quadrant:   data-management
tags:       [coding]
---

This is a demo item in `data-management` set to `cible`.

It seems that none of your items seems to match the ring- / quadrant-id. I will add a clear error message in the future, but does it solve the issue, if you update the content? :)

[nocquidant]

Yes, adding foo.md with what you suggest makes it work.

But without tags, error occurs (and indeed, I don't use tags).

---
title:      "Demo Item"
ring:       cible
quadrant:   data-management
---

This is a demo item in `data-management` set to `cible`.

[mathiasschopmans]

Alright, we're getting there. I will work on the resilience, to make it work without tags. 🤝

[mathiasschopmans]

The fix is already in the main-branch, which will likely be published to npm tomorrow. If you want to test it now change package.json to:

"dependencies": {
    "aoe_technology_radar": "github:AOEpeople/aoe_technology_radar#main"
  }

npm update, npm run build

[DanielRuf]

@mathiasschopmans does this also solve the problem, when the build command generates the default config.json which results in the same error at the moment?

[mathiasschopmans]

@DanielRuf Your issue seems to be related to the tags. This fix itself is already in the main branch, but still needs to be published to the npm package as 4.1.0

I just double-checked with a blank project and the latest commit in main. New folder, created a package.json

{
  "name": "aoe-techradar",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "techradar build",
    "serve": "techradar serve"
  },
  "dependencies": {
    "aoe_technology_radar": "github:AOEpeople/aoe_technology_radar#92b7c28"
  }
}

npm install, npm run build which created the demo files in my working directory: