Conditional “X-Prompt” in Angular Schematics

It seems feature to add conditional x-prompts is missing in angular schematics.

Requirement : To display conditional prompts, based on the previous selection ( “Analytics”, in this case ).

Problem : For any selection, it is still displaying the prompt to add Google Analytics’s Tracking Id even if i select AppDynamics or none.

References : Applying Subschemas Conditionally Angular Schematics

Note: For Simplicity, i have removed “allOf”,“anyOf” etc. and code for any other analytics tool, still it was not working.

Code (Schema.json):

{
  "$schema": "http://json-schema.org/schema",
  "id": "MyDemoSchema",
  "title": "My Demo Schematics Schema",
  "type": "object",
  "properties": {
    "analytics": {
      "enum": [
        "none",
        "GoogleAnalytics",
        "AppDynamics"
      ],
      "x-prompt": "Which Analytics would you like to use?"
    }
  },
  "if": {
    "properties": {
      "analytics": {
        "const": "GoogleAnalytics"  
      }
    }
  },
  "then": {
    "properties": {
      "GoogleAnalytics": {
        "type": "string",
        "x-prompt": "Enter Tracking ID?"
      }
    }
  }
}

[kroeder]

I have the same goal but a different proposal. Instead of increasing the basic schema.json feature-set, I’d rather use a second function-driven API. I believe adding a condition API to a json file will increase the complexity tremendously.

Here’s a proposal. It certainly contains lots of flaws and is meant as a start to discuss further possible approaches.

collection.json

{
  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
    "dynamic-generate-props": {
        "description": "Dynamic inputs",
        "factory": "./dynamic/index#dynamicSchematic",
        "schema": "./dynamic/schema#conditionalInputs"
    }
  }
}

dynamic/schema.ts#conditionalInputs

/**
 * User code
 */
interface MyInput {
    name: string;
    path: string;
    needsFooter: boolean;
    footerColor?: FooterColor;
}

type FooterColor = 'blue' | 'green' | 'red';

export function conditionalInputs() {
    return schematicsSchema<MyInput>({
        name: () => createInput({
            type: InputTypes.STRING,
            xPrompt: "Name of your component"
        }),
        path: () => executionPath(),
        needsFooter: () => createInput({
            type: InputTypes.BOOLEAN,
            xPrompt: "Do you need a footer?"
        }),
        footerColor: (prevValues) => prevValues.needsFooter 
            ? createInput({
                type: InputTypes.ENUM,
                enum: [
                    "blue",
                    "green",
                    "red"
                ],
                xPrompt: "Footer color"
            })
          : noop()
    })
}

Angular framework (pseudo code)

enum InputTypes { STRING, BOOLEAN, NUMBER, ENUM }
type InputFunction<TInput> = { [key: string]: (prevValues?: TInput) => any; }

function schematicsSchema<TInput>(userInputs: InputFunction<TInput>) {
    return {};
}

function createInput(options: any) {}

function executionPath() {}

function noop() {}

Having an interface in the user code is intentional. Right now, if I am writing a schematic, the input properties are not typed and I need to manage two lists of inputs in parallel (schema.json inputs / schematic factory code input type)

Any thoughts on this? Or maybe disagreement to a TS API? 🙂

[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.}