trodi / blockly-d.ts Goto Github PK

View Code? Open in Web Editor NEW

47.0 5.0 6.0 133 KB

Typescript definition file generator for Google's Blockly.

License: MIT License

Shell 100.00%

typescript blockly typescript-definitions types

blockly-d.ts's Introduction

blockly-d.ts

Typescript definition file generator for Google's Blockly.

This project generates the Typescript definition file (d.ts file) for Google's Blockly required to get type safety via the Typescript compiler. Currenlty, this only generates the type defintions for Blockly's core folder.

Blockly now ships it's own typescript d.ts file. They generate the file the same way I do, except I also exposed private fields. Prefer their bundled version and only use these types if you are using a version before types were bundled or need all the private types defined.

Use Typescript Definition Files

Since these definitions aren't consumable via npm, the last generated d.ts file is checked in for reference. You should generate your own if you're using a different version of Blockly.

If you need to generate a new version of the definition file, see instructions.
Generated definition file location: dist/blockly-core.d.ts
- The commit will tell you which version of Blockly it was generated from.
- View repo history to see d.ts files for older versions of Blockly.
Let tsc know about the new typing file.
- See Typescript Handbook if you need more guidance in including Typescript definition files.
Add matching version of Blockly to your project.
- This project only provides the definition file; you still need to include the Blockly library.
Blockly uses the closure-library and some of the reference types found there (e.g., goog.math). For tsc to be happy, you'll have to define these referenced closure-library types. I currently don't do this for you.

Generate Definition File

git clone https://github.com/trodi/blockly-d.ts.git
npm install
npm start and follow prompts
Generated files found in dist/
- blockly-core.d.ts - The definition file generated against the requested version of Blockly.
- blockly - This folder contains a copy of Blockly's dist files used to generate this d.ts file for reference.

License

MIT License

blockly-d.ts's People

Contributors

Stargazers

Watchers

Forkers

jonnybot0 shengnian emilhem pastak alexandermykulych howard3

blockly-d.ts's Issues

Add support for language generator definitions

Hi,

it would be great to have the language generators supported.

I probably won't be able to help on this matter this month, but next month I'll take a look into your shell script to see how I can modify it to generate definitions for the language generators.

Question on generating new d.ts files

Hello Trodi

I have a blockly javascript files. i want to generate typescripts files out of that. I am using windows machine. I have read your instructions. But unfortunately i am not able understand after certain point. Can you guide me on this.

@dhilipswaminathan, I've created this issue from your commit comment so I can help you.

Simple example

Could you please provide a simple example of what perhaps defining a simple block would look like? I'm new to Typescript and am dabbling in trying to use it with Blockly (and obviously stuck). Here is what I have so far (that is not working):

///<reference path="../blockly-core.d.ts" />

class simple_block {
  iterator: number = 0;

  constructor() {
    Blockly.Blocks['simple_block'] = {
      init: this.init(),
    };
  }

  init(): void{
    this.appendDummyInput()
      .appendField("some text")
      .appendField(new Blockly.FieldTextInput(''), 'TEXT')
      .appendField("some more text");
    this.setOutput(true, 'String');

  }
}

How to install Typescript into Blockly ?

I would like to install Typescript to be able to convert my blocks into typescript. I tried to follow the help, but I can not manage it

How to Use the files?

Hey guys,
sorry I'm a real newbbo in typescript.
I don't understand how can I include the generated file in a Typescript folder.. I'm developing an Angular application and I don't understand where to put this file to use blockly!

Support installing definition file via npm @types

Publish definition file to Definitely Typed so that users can consume the definition in the standard way (npm install @types/blockly).

How to handle version numbers?
- Blockly doesn't have version numbers as every commit to master is a "release" so all you have is the git commit hash. google/blockly#4 google/blockly#502
Handle closure-library dependency.

Generation fails with error "TypeError [ERR_INVALID_CALLBACK]: Callback must be a function"

$ npm i

$ npm start

> [email protected] start /Users/colineberhardt/Temp/blockly-d.ts
> bash npm-scripts/generate.sh

Cloning into 'blockly'...
remote: Enumerating objects: 21, done.
remote: Counting objects: 100% (21/21), done.
remote: Compressing objects: 100% (19/19), done.
remote: Total 27979 (delta 4), reused 6 (delta 2), pack-reused 27958
Receiving objects: 100% (27979/27979), 72.14 MiB | 4.52 MiB/s, done.
Resolving deltas: 100% (21758/21758), done.
ERROR	blockly/core/block.js block.d.ts
/Users/colineberhardt/Temp/blockly-d.ts/node_modules/typescript-closure-tools/definition-generator/src/main.js:33
        throw e;
        ^

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
    at maybeCallback (fs.js:133:9)
    at Object.writeFile (fs.js:1132:14)
    at /Users/colineberhardt/Temp/blockly-d.ts/node_modules/typescript-closure-tools/definition-generator/src/main.js:27:16
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (/Users/colineberhardt/Temp/blockly-d.ts/node_modules/typescript-closure-tools/definition-generator/src/main.js:13:14)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
mv: rename *.d.ts to output/*.d.ts: No such file or directory
cat: output/*.d.ts: No such file or directory
mkdir: ../dist/: File exists
Colins-MacBook-Pro:blockly-d.ts colineberhardt$

Link to license in readme is broken

this.init is not a function

Hi,

I'm quite new to both Typescript and Javascript and I'm having some trouble trying to use this repository. I'm not sure if this is being caused by this definition generator but would be great if you could give me some pointers.

This is the problem:

I was able to inject blockly properly using:

this.workspace = Blockly.inject(DOMHandler.blocklyDiv,{toolbox: tBox}); 
this.workspace.addChangeListener(this.myUpdateFunction);

But when I try to get the code from the workspace:

 public myUpdateFunction = (event:any) =>
 {
    let code:string = "no code yet";
    code = this.blJSGenerator.workspaceToCode(this.workspace);
    ...

I receive the TypeError: "this.init is not a function" from blockly_compressed.js

One thing that was different is that in Javascript I could just write:

var code = Blockly.Javascript.workspaceToCode(this.workspace);

But in Typescript I needed to instantiate a Blockly Javascript Generator:

this.blJSGenerator = new Blockly.Generator("JavaScript");

Is this a problem?

There are some people trying to help in this thread.

Thanks in advance.