Have trouble using plugin in typescript project

[chi-w-ng]

I encountered a 'could not resolve module' error while using it in a TypeScript project.
To replicate this issue, you can follow these steps:

Start with the Blockly TypeScript sample from:
https://github.com/google/blockly-samples/tree/master/examples/sample-app-ts

Change the tsconfig.json content to:

{
"compilerOptions": {
"baseUrl": "./",
"outDir": "dist",
"declaration": true,
"declarationMap": true,
"module": "ES2015",
"moduleResolution": "node",
"target": "ES2015",
"strict": false,
"sourceMap": true,
"allowJs": true
},
"include": ["desc.d.ts"]
}

Here is the desc.d.ts content that I add to the project root:

declare module "@mit-app-inventor/blockly-block-lexical-variables"

Add the plugin to index.ts of the blockly sample ts project. Build the project will error.

Is there a way to resolve this issue?

Thanks in advance.

[mark-friedman]

@chi-w-ng I don't have much Typescript experience, so I'll have to research this. One thing I would ask is whether you have run npm install mit-app-inventor/blockly-block-lexical-variables --save or the equivalent?

[chi-w-ng]

I have this in my package.json:

"dependencies": {
"@mit-app-inventor/blockly-block-lexical-variables": "^1.0.0",
"blockly": "^10.1.3"
}

so plugin is installed locally. I could see it in node_modules.

A duplicate of the blockly typescript sample project showing the problem is here:

https://github.com/chi-w-ng/blockly_typescript_sample

[mark-friedman]

@chi-w-ng I suspect that at least part of the problem is that there is no Typescript declaration file for this package. Since I don't have much Typescript experience, I wonder if you might be willing to work on this and submit a pull request.

[TannerGabriel]

This issue still occurs in the TypeScript version of the Blockly demo project. We’ll likely need to include a .d.ts declaration file and update the documentation with the necessary tsconfig settings to get the plugin working in TypeScript projects.

For reference, here’s the import error:

TS7016: Could not find a declaration file for module '@mit-app-inventor/blockly-block-lexical-variables'. '[DIR]/blockly-demo-typescript/node_modules/@mit-app-inventor/blockly-block-lexical-variables/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/mit-app-inventor__blockly-block-lexical-variables` if it exists or add a new declaration (.d.ts) file containing `declare module '@mit-app-inventor/blockly-block-lexical-variables';`

[TannerGabriel]

I’d like to support this since I also use a TypeScript application. The most basic fix is to create a type file inside the /types folder, define the module and types for the core functions and variables, and add the types folder to typeRoots in tsconfig.json.

declare module '@mit-app-inventor/blockly-block-lexical-variables' {
  import type * as Blockly from 'blockly';  
  export class LexicalVariablesPlugin {
    static init(workspace: Blockly.WorkspaceSvg): void;
    static Flydown: Blockly.VerticalFlyout ;
    static FieldFlydown: Blockly.FieldTextInput;
    static FieldGlobalFlydown: Blockly.FieldTextInput;
    static FieldParameterFlydown: Blockly.FieldTextInput;
  }
}

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "dist",
    "declaration": true,
    "declarationMap": true,
    "module": "ES2015",
    "moduleResolution": "node",
    "target": "ES2015",
    "strict": true,
    "paths": {
      "@mit-app-inventor/*": ["node_modules/@mit-app-inventor/*"]
    },
    "typeRoots": ["/types", "/node_modules/@types"]
  }
}

This needs to be done by the user after installing and only helps removing the error instead of adding real typing for all functions and classes.

Options for a more complete fix

1. Define .d.ts files for all modules and publish an @types package so users can install it instead of writing their own declarations.
2. Alternatively, follow the approach used by official Blockly plugins and convert the codebase to TypeScript (sample PR).

@mark-friedman Let me know your preferred solution for this issue. I can also provide an example branch of both solutions if needed.

[mark-friedman]

@TannerGabriel, I'm not sure that I'm ready yet to commit to using TypeScript for the plugin, so I would love your first "more complete fix" option.