Didn't succed to use componentsjs override feature #105

joeitu · 2022-08-22T20:54:04Z

joeitu
Aug 22, 2022

Hello,

I would like to change the HTML rendering of the /idp/* pages, in particular, the main.html.ejs file.
For that purpose, I would like override urn:solid-server:auth:password:HtmlViewHandler in config/identity/handler/interaction/views/html.json

The original html.json file:

{
  "@context": "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^5.0.0/components/context.jsonld",
  "@graph": [
    {
      "@id": "urn:solid-server:auth:password:HtmlViewHandler",
      "@type": "HtmlViewHandler",
      "index": { "@id": "urn:solid-server:auth:password:IndexRoute" },
      "templateEngine": {
          "comment": "Renders the specific page and embeds it into the main HTML body.",
          "@type": "ChainedTemplateEngine",
          "renderedName": "htmlBody",
          "engines": [
            {
              "comment": "Will be called with specific templates to generate HTML snippets.",
              "@type": "EjsTemplateEngine",
              "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
            },
            {
              "comment": "Will embed the result of the first engine into the main HTML template.",
              "@type": "EjsTemplateEngine",
              "template": "@css:templates/main.html.ejs",   <== The part I want to change for `"template": "./my_main.html.ejs"
              "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
            }
          ]
        },
        "templates": [
          {
            "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/login.html.ejs",
            "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:LoginRoute" }
          },
          {
            "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/consent.html.ejs",
            "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ConsentRoute" }
          },
          {
            "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/forgot-password.html.ejs",
            "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ForgotPasswordRoute" }
          },
          {
            "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/reset-password.html.ejs",
            "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ResetPasswordRoute" }
          }
        ]
    }
  ]
}

In my CSS config config.json I have added in the import list ./override.json at the end ( also tried beginning ) of the list.
config.json

{
  "@context": "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^5.0.0/components/context.jsonld",
  "import": [
    "css:config/app/main/default.json",
    "css:config/app/init/initialize-root.json",
    ....
    "css:config/http/handler/default.json",
   ....
      "./override.json"
  ],

And override.json contains the following:

{
  "@context": "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^5.0.0/components/context.jsonld",
  "comment" : {
      "@id": "urn:solid-server:auth:password:HtmlViewHandlerOverride",
      "@type": "HtmlViewHandler",
      "overrideInstance": { "@id": "urn:solid-server:auth:password:HtmlViewHandler" },
  },
  "@graph": [
    {
      "@id": "urn:solid-server:auth:password:HtmlViewHandlerOverride", <- EDITED
      "@type": "HtmlViewHandler", <- EDITED

      "index": { "@id": "urn:solid-server:auth:password:IndexRoute" }, <- EDITED
      "templateEngine": {
        "comment": "Renders the specific page and embeds it into the main HTML body.",
        "@type": "ChainedTemplateEngine",
        "renderedName": "htmlBody",
        "engines": [
          {
            "comment": "Will be called with specific templates to generate HTML snippets.",
            "@type": "EjsTemplateEngine",
            "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
          },
          {
            "comment": "Will embed the result of the first engine into the main HTML template.",
            "@type": "EjsTemplateEngine",
            "template": "./my_main.html.ejs", <- EDITED
            "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
          }
        ]
      },
      "templates": [
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/login.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:LoginRoute" }
        },
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/consent.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ConsentRoute" }
        },
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/forgot-password.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ForgotPasswordRoute" }
        },
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/reset-password.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ResetPasswordRoute" }
        }
      ]


    }
  ]
}

Still, the override doesn't work.
Have I missed something? ( I also got a bit confused by the doc )

Answered by ixuz

Aug 22, 2022

I also did some attempts to override the "template" property in the "engines" list but I ultimately failed as well... But see my findings below.

I found out that if I added an "@id" (e.g. urn:solid-server:auth:password:engine) to the specific engine we want to override, I successfully managed to override the "template" property.

Attempt 1: Adding an `@id` to the specifc engine that we want to override.

config/identity/handler/interaction/views/html.json:

{
  "@context": "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^5.0.0/components/context.jsonld",
  "@graph": [
    {
      "@id": "urn:solid-server:auth:password:HtmlViewHandler",
      "@type": "HtmlViewHand…

View full answer

ixuz · 2022-08-22T22:40:20Z

ixuz
Aug 22, 2022

I also did some attempts to override the "template" property in the "engines" list but I ultimately failed as well... But see my findings below.

I found out that if I added an "@id" (e.g. urn:solid-server:auth:password:engine) to the specific engine we want to override, I successfully managed to override the "template" property.

Attempt 1: Adding an `@id` to the specifc engine that we want to override.

config/identity/handler/interaction/views/html.json:

{
  "@context": "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^5.0.0/components/context.jsonld",
  "@graph": [
    {
      "@id": "urn:solid-server:auth:password:HtmlViewHandler",
      "@type": "HtmlViewHandler",
      "index": { "@id": "urn:solid-server:auth:password:IndexRoute" },
      "templateEngine": {
        "comment": "Renders the specific page and embeds it into the main HTML body.",
        "@type": "ChainedTemplateEngine",
        "renderedName": "htmlBody",
        "engines": [
          {
            "comment": "Will be called with specific templates to generate HTML snippets.",
            "@type": "EjsTemplateEngine",
            "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
          },
          {
            "comment": "Will embed the result of the first engine into the main HTML template.",
            "@id": "urn:solid-server:auth:password:engine", <-- I added this line
            "@type": "EjsTemplateEngine",
            "template": "@css:templates/main.html.ejs",
            "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
          }
        ]
      },
      "templates": [
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/login.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:LoginRoute" }
        },
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/consent.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ConsentRoute" }
        },
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/forgot-password.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ForgotPasswordRoute" }
        },
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/reset-password.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ResetPasswordRoute" }
        }
      ]
    }
  ]
}

After that I could add this snippet to my /config/default.json to override the "template" property:

    {
      "@id": "urn:solid-server:auth:password:overridden-engine",
      "@type": "Override",
      "overrideInstance": { "@id": "urn:solid-server:auth:password:engine" },
      "overrideParameters": {
        "EjsTemplateEngine:_template": "templates/my-main.html.ejs"
      }
    }

Which resulted in my own templates/my-main.html.ejs being rendered.
However, since the original config(config/identity/handler/interaction/views/html.json) does not have "@id" for the engines this may not be applicable in your case.

Attempt 2: Adding an `@id` to the `ChainedTemplateEngine` to override `"engines"` list.

config/identity/handler/interaction/views/html.json:

{
  "@context": "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^5.0.0/components/context.jsonld",
  "@graph": [
    {
      "@id": "urn:solid-server:auth:password:HtmlViewHandler",
      "@type": "HtmlViewHandler",
      "index": { "@id": "urn:solid-server:auth:password:IndexRoute" },
      "templateEngine": {
        "comment": "Renders the specific page and embeds it into the main HTML body.",
        "@id": "urn:solid-server:auth:password:chained-engine", <-- I added this line
        "@type": "ChainedTemplateEngine",
        "renderedName": "htmlBody",
        "engines": [
          {
            "comment": "Will be called with specific templates to generate HTML snippets.",
            "@type": "EjsTemplateEngine",
            "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
          },
          {
            "comment": "Will embed the result of the first engine into the main HTML template.",
            "@type": "EjsTemplateEngine",
            "template": "@css:templates/main.html.ejs",
            "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
          }
        ]
      },
      "templates": [
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/login.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:LoginRoute" }
        },
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/consent.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ConsentRoute" }
        },
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/forgot-password.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ForgotPasswordRoute" }
        },
        {
          "HtmlViewHandler:_templates_key": "@css:templates/identity/email-password/reset-password.html.ejs",
          "HtmlViewHandler:_templates_value": { "@id": "urn:solid-server:auth:password:ResetPasswordRoute" }
        }
      ]
    }
  ]
}

Then I tried adding this snippet to my /config/default.json:

    {
      "@id": "urn:solid-server:auth:password:overridden-chained-engine",
      "@type": "Override",
      "overrideInstance": { "@id": "urn:solid-server:auth:password:chained-engine" },
      "overrideParameters": {
        "ChainedTemplateEngine:_engines": []
      }
    }

This seemingly compiles and runs, but when I try to populate the "engines" list in /config/default.json, for example snippet below:

    {
      "@id": "urn:solid-server:auth:password:overridden-chained-engine",
      "@type": "Override",
      "overrideInstance": { "@id": "urn:solid-server:auth:password:chained-engine" },
      "overrideParameters": {
        "ChainedTemplateEngine:_engines": [
          {
            "comment": "Will be called with specific templates to generate HTML snippets.",
            "@type": "EjsTemplateEngine",
            "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
          },
          {
            "comment": "Will embed the result of the first engine into the main HTML template.",
            "@type": "EjsTemplateEngine",
            "template": "templates/main.html.ejs",
            "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
          }
        ]
      }
    }

It throws the following error at runtime:

2022-08-22T22:20:09.064Z [Components.js] error: Detected fatal error. Generated 'componentsjs-error-state.json' with more information.
Could not create the CLI resolver
Cause: Detected multiple values for override parameter https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^5.0.0/dist/util/templates/ChainedTemplateEngine.jsonld#ChainedTemplateEngine_engines in Override urn:solid-server:auth:password:overridden-chained-engine. RDF lists should be used for defining multiple values.
ErrorResourcesContext: Detected multiple values for override parameter https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^5.0.0/dist/util/templates/ChainedTemplateEngine.jsonld#ChainedTemplateEngine_engines in Override urn:solid-server:auth:password:overridden-chained-engine. RDF lists should be used for defining multiple values.
    at ConfigPreprocessorOverride.filterOverrideObject (E:\Dev\temp10\node_modules\componentsjs\lib\preprocess\ConfigPreprocessorOverride.js:210:23)
    at ConfigPreprocessorOverride.chainToOverrideObject (E:\Dev\temp10\node_modules\componentsjs\lib\preprocess\ConfigPreprocessorOverride.js:156:41)
    at ConfigPreprocessorOverride.createOverrideObjects (E:\Dev\temp10\node_modules\componentsjs\lib\preprocess\ConfigPreprocessorOverride.js:59:45)
    at ConfigPreprocessorOverride.canHandle (E:\Dev\temp10\node_modules\componentsjs\lib\preprocess\ConfigPreprocessorOverride.js:24:35)
    at ConfigConstructorPool.getRawConfig (E:\Dev\temp10\node_modules\componentsjs\lib\construction\ConfigConstructorPool.js:70:53)
    at ConfigConstructorPool.instantiate (E:\Dev\temp10\node_modules\componentsjs\lib\construction\ConfigConstructorPool.js:48:34)
    at ComponentsManager.instantiate (E:\Dev\temp10\node_modules\componentsjs\lib\ComponentsManager.js:44:54)
    at AppRunner.createCliResolver (E:\Dev\temp10\dist\init\AppRunner.js:170:44)
    at AppRunner.cliToVariables (E:\Dev\temp10\dist\init\AppRunner.js:160:40)
    at AppRunner.createCli (E:\Dev\temp10\dist\init\AppRunner.js:143:38)

Finally, I did not even attempt to override the HtmlViewHandler(urn:solid-server:auth:password:HtmlViewHandler) because I've already failed to override the simpler case ChainedTemplateEngine in Attempt 2.

So now I wonder, is it possible to override an array(e.g. "engines")? 🤔

EDIT: Working solution.

The identified bug/issue above has been fixed by @joachimvh with PR #106 in componentsjs 5.3.1.

Here is an override.json configuration that should work for you @joeitu :

{
  "@context": "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^5.0.0/components/context.jsonld",
  "@graph": [
    {
      "@id": "urn:solid-server:auth:password:HtmlViewHandlerOverride",
      "@type": "Override",
      "overrideInstance": { "@id": "urn:solid-server:auth:password:HtmlViewHandler" },
      "overrideParameters": {
        "@type": "HtmlViewHandler",
        "templateEngine": {
          "@type": "ChainedTemplateEngine",
          "renderedName": "htmlBody",
          "engines": [
            {
              "comment": "Will be called with specific templates to generate HTML snippets.",
              "@type": "EjsTemplateEngine",
              "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
            },
            {
              "comment": "Will embed the result of the first engine into the main HTML template.",
              "@type": "EjsTemplateEngine",
              "template": "./my_main.html.ejs",
              "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
            }
          ]
        }
      }
    }
  ]
}

1 reply

joeitu Jan 18, 2023
Author

Thanks a lot @ixuz , I just tried your solution and it works perfectly when updating to componentsjs 5.3.1

rubensworks · 2022-08-23T05:04:31Z

rubensworks
Aug 23, 2022
Maintainer

Pinging @joachimvh

0 replies

joachimvh · 2022-08-23T06:50:30Z

joachimvh
Aug 23, 2022
Collaborator

As @ixuz mentioned, the object that you want to override needs to have an @id (so I probably should go through all the configs and add ids in places that seem interesting to override). If it doesn't have one you will have to go higher up the hierarchy chain until you find one that does. So in the case of the HtmlViewHandler you would need something like

{
  "@id": "ex:myObjectOverride2",
  "@type": "Override",
  "overrideInstance": { "@id": "urn:solid-server:auth:password:HtmlViewHandler" },
  "overrideParameters": {
    "@type": "HtmlViewHandler",
    "templateEngine": {
      "@type": "ChainedTemplateEngine",
      "renderedName": "htmlBody",
      "engines": [
        {
          "comment": "Will be called with specific templates to generate HTML snippets.",
          "@type": "EjsTemplateEngine",
          "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
        },
        {
          "comment": "Will embed the result of the first engine into the main HTML template.",
          "@type": "EjsTemplateEngine",
          "template": "./my_main.html.ejs",
          "baseUrl": { "@id": "urn:solid-server:default:variable:baseUrl" }
        }
      ]
    },
  }
}

Which replaces the entire template engine in the handler with one that contains your new base template. Note that the "@type": "HtmlViewHandler" is also there, which allows us to use the type scoped contexts from components.js so we can use templateEngine instead of HtmlViewHandler:_templateEngine. (I did not actually test the config above so might have written a mistake).

This last part is also relevant for you I think @ixuz . The reason you get the array error there (I think, @rubensworks can corroborate), is because you use ChainedTemplateEngine:_engines instead of engines in an object that also has "@type": "ChainedTemplateEngine" in it. Only in the second case will Components.js convert your array to an actual RDF list. If you use the predicate in the first form you have to create the JSON-LD list yourself, so you would need "ChainedTemplateEngine:_engines": { "@list": [ ... ] }.

7 replies

joachimvh Aug 23, 2022
Collaborator

I did some debugging in Components.js. The error is correct, internally the types array has 2 entries ... but those 2 entries are both HtmlViewHandler. Will look into creating a fix for this. @rubensworks any pointers to how a resource can have the same type multiple times and how to best prevent this? I could just filter the types array when the check happens but perhaps Components.js has a general solution for this.

Using a quick hack in the Components.js source that removes the duplicate entry the config above did seem to work so that's good news. The server just errors it can't find the my_main.html.ejs file which makes sense.

rubensworks Aug 23, 2022
Maintainer

@joachimvh Types are made unique like this: https://github.com/LinkedSoftwareDependencies/Components.js/blob/master/lib/preprocess/ConfigPreprocessorComponent.ts#L30-L38
So you could probably abstract this piece of code and use it as well in the override handler.

joachimvh Aug 23, 2022
Collaborator

Looking into it.

Btw @ixuz. Your solution of adding the @id already works without any fixes to the engine (if you either add the "@type" or "@list" as I suggest in my comment above).

joachimvh Aug 23, 2022
Collaborator

This was fixed in #106

ixuz Aug 23, 2022

Confirmed it works now with the latest componentsjs 5.3.1 👌

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Didn't succed to use componentsjs override feature #105

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 8 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Didn't succed to use componentsjs override feature #105

joeitu Aug 22, 2022

Attempt 1: Adding an @id to the specifc engine that we want to override.

Replies: 3 comments · 8 replies

ixuz Aug 22, 2022

Attempt 1: Adding an @id to the specifc engine that we want to override.

Attempt 2: Adding an @id to the ChainedTemplateEngine to override "engines" list.

EDIT: Working solution.

joeitu Jan 18, 2023 Author

rubensworks Aug 23, 2022 Maintainer

joachimvh Aug 23, 2022 Collaborator

joachimvh Aug 23, 2022 Collaborator

rubensworks Aug 23, 2022 Maintainer

joachimvh Aug 23, 2022 Collaborator

joachimvh Aug 23, 2022 Collaborator

ixuz Aug 23, 2022

joeitu
Aug 22, 2022

Attempt 1: Adding an `@id` to the specifc engine that we want to override.

Replies: 3 comments 8 replies

ixuz
Aug 22, 2022

Attempt 1: Adding an `@id` to the specifc engine that we want to override.

Attempt 2: Adding an `@id` to the `ChainedTemplateEngine` to override `"engines"` list.

joeitu Jan 18, 2023
Author

rubensworks
Aug 23, 2022
Maintainer

joachimvh
Aug 23, 2022
Collaborator

joachimvh Aug 23, 2022
Collaborator

rubensworks Aug 23, 2022
Maintainer

joachimvh Aug 23, 2022
Collaborator

joachimvh Aug 23, 2022
Collaborator