mirror of
https://github.com/google/blockly.git
synced 2025-12-15 22:00:07 +01:00
Cherry pick npm distribution change to develop (#2785)
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -15,3 +15,4 @@ local_build/*compiler*.jar
|
||||
local_build/local_*_compressed.js
|
||||
chromedriver
|
||||
typings/tmp/*
|
||||
dist/
|
||||
|
||||
@@ -146,7 +146,7 @@ Blockly.Field.X_PADDING = 10;
|
||||
/**
|
||||
* The default offset between the left of the text element and the left of the
|
||||
* border rect, if the border rect exists.
|
||||
* @type {[type]}
|
||||
* @type {number}
|
||||
*/
|
||||
Blockly.Field.DEFAULT_TEXT_OFFSET = Blockly.Field.X_PADDING / 2;
|
||||
|
||||
|
||||
459
gulpfile.js
459
gulpfile.js
@@ -26,7 +26,16 @@
|
||||
var gulp = require('gulp');
|
||||
gulp.shell = require('gulp-shell');
|
||||
gulp.concat = require('gulp-concat');
|
||||
var insert = require('gulp-insert');
|
||||
gulp.replace = require('gulp-replace');
|
||||
gulp.rename = require('gulp-rename');
|
||||
gulp.insert = require('gulp-insert');
|
||||
gulp.umd = require('gulp-umd');
|
||||
|
||||
var path = require('path');
|
||||
var fs = require('fs');
|
||||
var rimraf = require('rimraf');
|
||||
var execSync = require('child_process').execSync;
|
||||
|
||||
|
||||
var path = require('path');
|
||||
var fs = require('fs');
|
||||
@@ -53,7 +62,7 @@ gulp.task('build', gulp.shell.task([
|
||||
// and JavaScript code generation. If you need another localization or
|
||||
// generator language, just copy and edit the srcs. Only one localization
|
||||
// language can be included.
|
||||
gulp.task('blockly_javascript_en', function() {
|
||||
gulp.task('blockly_node_javascript_en', function() {
|
||||
var srcs = [
|
||||
'blockly_compressed.js',
|
||||
'blocks_compressed.js',
|
||||
@@ -64,7 +73,7 @@ gulp.task('blockly_javascript_en', function() {
|
||||
// Override textToDomDocument, providing Node alternative to DOMParser.
|
||||
return gulp.src(srcs)
|
||||
.pipe(gulp.concat('blockly_node_javascript_en.js'))
|
||||
.pipe(insert.append(`
|
||||
.pipe(gulp.insert.append(`
|
||||
if (typeof DOMParser !== 'function') {
|
||||
var JSDOM = require('jsdom').JSDOM;
|
||||
var window = (new JSDOM()).window;
|
||||
@@ -111,7 +120,447 @@ function buildWatchTaskFn(concatTask) {
|
||||
|
||||
// Watch Blockly files for changes and trigger automatic rebuilds, including
|
||||
// the Node-ready blockly_node_javascript_en.js file.
|
||||
gulp.task('watch', buildWatchTaskFn('blockly_javascript_en'));
|
||||
gulp.task('watch', buildWatchTaskFn('blockly_node_javascript_en'));
|
||||
|
||||
////////////////////////////////////////////////////////////
|
||||
// Typings //
|
||||
////////////////////////////////////////////////////////////
|
||||
|
||||
// Generates the TypeScript definition file (d.ts) for Blockly.
|
||||
// As well as generating the typings of each of the files under core/ and msg/,
|
||||
// the script also pulls in a number of part files from typings/parts.
|
||||
// This includes the header (incl License), additional useful interfaces
|
||||
// including Blockly Options and Google Closure typings
|
||||
gulp.task('typings', function (cb) {
|
||||
const tmpDir = './typings/tmp';
|
||||
const blocklySrcs = [
|
||||
"core/",
|
||||
"core/theme",
|
||||
"core/utils",
|
||||
"msg/"
|
||||
];
|
||||
// Clean directory if exists
|
||||
if (fs.existsSync(tmpDir)) {
|
||||
rimraf.sync(tmpDir);
|
||||
}
|
||||
fs.mkdirSync(tmpDir);
|
||||
|
||||
// Find all files that will be included in the typings file
|
||||
let files = [];
|
||||
blocklySrcs.forEach((src) => {
|
||||
files = files.concat(fs.readdirSync(src)
|
||||
.filter(fn => fn.endsWith('.js'))
|
||||
.map(fn => path.join(src, fn)));
|
||||
});
|
||||
|
||||
// Generate typings file for each file
|
||||
files.forEach((file) => {
|
||||
const typescriptFileName = `${path.join(tmpDir, file)}.d.ts`;
|
||||
const cmd = `node ./node_modules/typescript-closure-tools/definition-generator/src/main.js ${file} ${typescriptFileName}`;
|
||||
console.log(`Generating typings for ${file}`);
|
||||
execSync(cmd, { stdio: 'inherit' });
|
||||
});
|
||||
|
||||
const srcs = [
|
||||
'typings/parts/blockly-header.d.ts',
|
||||
'typings/parts/blockly-interfaces.d.ts',
|
||||
'typings/parts/goog-closure.d.ts',
|
||||
`${tmpDir}/core/**`,
|
||||
`${tmpDir}/core/utils/**`,
|
||||
`${tmpDir}/core/theme/**`,
|
||||
`${tmpDir}/msg/**`
|
||||
];
|
||||
return gulp.src(srcs)
|
||||
.pipe(gulp.concat('blockly.d.ts'))
|
||||
.pipe(gulp.dest('typings'))
|
||||
.on('end', function () {
|
||||
// Clean up tmp directory
|
||||
if (fs.existsSync(tmpDir)) {
|
||||
rimraf.sync(tmpDir);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
////////////////////////////////////////////////////////////
|
||||
// NPM packaging tasks //
|
||||
////////////////////////////////////////////////////////////
|
||||
|
||||
// The destination path where all the NPM distribution files will go.
|
||||
const packageDistribution = './dist';
|
||||
|
||||
/**
|
||||
* A helper method for wrapping a file into a Universal Module Definition.
|
||||
* @param {string} namespace The export namespace.
|
||||
* @param {Array<Object>} dependencies An array of dependencies to inject.
|
||||
*/
|
||||
function packageUMD(namespace, dependencies) {
|
||||
return gulp.umd({
|
||||
dependencies: function () { return dependencies; },
|
||||
namespace: function () { return namespace; },
|
||||
exports: function () { return namespace; },
|
||||
template: path.join(__dirname, 'package/templates/umd.template')
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* A helper method for wrapping a file into a CommonJS module for Node.js.
|
||||
* @param {string} namespace The export namespace.
|
||||
* @param {Array<Object>} dependencies An array of dependencies to inject.
|
||||
*/
|
||||
function packageCommonJS(namespace, dependencies) {
|
||||
return gulp.umd({
|
||||
dependencies: function () { return dependencies; },
|
||||
namespace: function () { return namespace; },
|
||||
exports: function () { return namespace; },
|
||||
template: path.join(__dirname, 'package/templates/node.template')
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* This task wraps blockly_compressed.js into a UMD module.
|
||||
* @example import 'blockly/blockly';
|
||||
*/
|
||||
gulp.task('package-blockly', function() {
|
||||
return gulp.src('blockly_compressed.js')
|
||||
.pipe(gulp.insert.prepend(`
|
||||
var self = this;`))
|
||||
.pipe(packageUMD('Blockly', []))
|
||||
.pipe(gulp.rename('blockly.js'))
|
||||
.pipe(gulp.dest(packageDistribution));
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps blocks_compressed.js into a CommonJS module for Node.js.
|
||||
* This is an equivelant task to package-blockly but for Node.js.
|
||||
* @example import 'blockly/blockly-node';
|
||||
*/
|
||||
gulp.task('package-blockly-node', function() {
|
||||
// Override textToDomDocument, providing a Node.js alternative to DOMParser.
|
||||
return gulp.src('blockly_compressed.js')
|
||||
.pipe(gulp.insert.wrap(`
|
||||
var self = global;`,
|
||||
`if (typeof DOMParser !== 'function') {
|
||||
var JSDOM = require('jsdom').JSDOM;
|
||||
var window = (new JSDOM()).window;
|
||||
var document = window.document;
|
||||
var Element = window.Element;
|
||||
Blockly.utils.xml.textToDomDocument = function(text) {
|
||||
var jsdom = new JSDOM(text, { contentType: 'text/xml' });
|
||||
return jsdom.window.document;
|
||||
};
|
||||
}`))
|
||||
.pipe(packageCommonJS('Blockly', []))
|
||||
.pipe(gulp.rename('blockly-node.js'))
|
||||
.pipe(gulp.dest(packageDistribution));
|
||||
})
|
||||
|
||||
/**
|
||||
* This task wraps blocks_compressed.js into a UMD module.
|
||||
* @example import 'blockly/blocks';
|
||||
*/
|
||||
gulp.task('package-blocks', function() {
|
||||
return gulp.src('blocks_compressed.js')
|
||||
.pipe(gulp.insert.prepend(`
|
||||
Blockly.Blocks={};`))
|
||||
.pipe(packageUMD('Blockly.Blocks', [{
|
||||
name: 'Blockly',
|
||||
amd: './core',
|
||||
cjs: './core',
|
||||
}]))
|
||||
.pipe(gulp.rename('blocks.js'))
|
||||
.pipe(gulp.dest(packageDistribution));
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps package/index.js into a UMD module.
|
||||
* We implicitly require the Node entry point in CommonJS environments,
|
||||
* and the Browser entry point for AMD environments.
|
||||
* @example import * as Blockly from 'blockly';
|
||||
*/
|
||||
gulp.task('package-index', function() {
|
||||
return gulp.src('package/index.js')
|
||||
.pipe(packageUMD('Blockly', [{
|
||||
name: 'Blockly',
|
||||
amd: './browser',
|
||||
cjs: './node',
|
||||
}]))
|
||||
.pipe(gulp.rename('index.js'))
|
||||
.pipe(gulp.dest(packageDistribution));
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps package/browser/index.js into a UMD module.
|
||||
* By default, the module includes Blockly core and built-in blocks,
|
||||
* as well as the JavaScript code generator and the English block
|
||||
* localization files.
|
||||
* This module is configured (in package.json) to replaces the module
|
||||
* built by package-node in browser environments.
|
||||
* @example import * as Blockly from 'blockly/browser';
|
||||
*/
|
||||
gulp.task('package-browser', function() {
|
||||
return gulp.src('package/browser/index.js')
|
||||
.pipe(packageUMD('Blockly', [{
|
||||
name: 'Blockly',
|
||||
amd: './core-browser',
|
||||
cjs: './core-browser',
|
||||
},{
|
||||
name: 'En',
|
||||
amd: './msg/en',
|
||||
cjs: './msg/en',
|
||||
},{
|
||||
name: 'BlocklyBlocks',
|
||||
amd: './blocks',
|
||||
cjs: './blocks',
|
||||
},{
|
||||
name: 'BlocklyJS',
|
||||
amd: './javascript',
|
||||
cjs: './javascript',
|
||||
}]))
|
||||
.pipe(gulp.rename('browser.js'))
|
||||
.pipe(gulp.dest(packageDistribution));
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps package/browser/core.js into a UMD module.
|
||||
* By default, the module includes the Blockly core package and a
|
||||
* helper method to set the locale.
|
||||
* This module is configured (in package.json) to replaces the module
|
||||
* built by package-node-core in browser environments.
|
||||
* @example import * as Blockly from 'blockly/core';
|
||||
*/
|
||||
gulp.task('package-core', function() {
|
||||
return gulp.src('package/browser/core.js')
|
||||
.pipe(packageUMD('Blockly', [{
|
||||
name: 'Blockly',
|
||||
amd: './blockly',
|
||||
cjs: './blockly',
|
||||
}]))
|
||||
.pipe(gulp.rename('core-browser.js'))
|
||||
.pipe(gulp.dest(packageDistribution));
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps package/node/index.js into a CommonJS module for Node.js.
|
||||
* By default, the module includes Blockly core and built-in blocks,
|
||||
* as well as all the code generators and the English block localization files.
|
||||
* This module is configured (in package.json) to be replaced by the module
|
||||
* built by package-browser in browser environments.
|
||||
* @example import * as Blockly from 'blockly/node';
|
||||
*/
|
||||
gulp.task('package-node', function() {
|
||||
return gulp.src('package/node/index.js')
|
||||
.pipe(packageCommonJS('Blockly', [{
|
||||
name: 'Blockly',
|
||||
cjs: './core',
|
||||
},{
|
||||
name: 'En',
|
||||
cjs: './msg/en',
|
||||
},{
|
||||
name: 'BlocklyBlocks',
|
||||
cjs: './blocks',
|
||||
},{
|
||||
name: 'BlocklyJS',
|
||||
cjs: './javascript',
|
||||
},{
|
||||
name: 'BlocklyPython',
|
||||
cjs: './python',
|
||||
},{
|
||||
name: 'BlocklyPHP',
|
||||
cjs: './php',
|
||||
},{
|
||||
name: 'BlocklyLua',
|
||||
cjs: './lua',
|
||||
}, {
|
||||
name: 'BlocklyDart',
|
||||
cjs: './dart',
|
||||
}]))
|
||||
.pipe(gulp.rename('node.js'))
|
||||
.pipe(gulp.dest(packageDistribution));
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps package/node/core.js into a CommonJS module for Node.js.
|
||||
* By default, the module includes the Blockly core package for Node.js
|
||||
* and a helper method to set the locale.
|
||||
* This module is configured (in package.json) to be replaced by the module
|
||||
* built by package-core in browser environments.
|
||||
* @example import * as Blockly from 'blockly/core';
|
||||
*/
|
||||
gulp.task('package-node-core', function() {
|
||||
return gulp.src('package/node/core.js')
|
||||
.pipe(packageCommonJS('Blockly', [{
|
||||
name: 'Blockly',
|
||||
amd: './blockly-node',
|
||||
cjs: './blockly-node',
|
||||
}]))
|
||||
.pipe(gulp.rename('core.js'))
|
||||
.pipe(gulp.dest(packageDistribution));
|
||||
});
|
||||
|
||||
/**
|
||||
* A helper method for packaging a Blockly code generator into a UMD module.
|
||||
* @param {string} file Source file name.
|
||||
* @param {string} rename Destination file name.
|
||||
* @param {string} generator Generator export namespace.
|
||||
*/
|
||||
function packageGenerator(file, rename, generator) {
|
||||
return gulp.src(file)
|
||||
.pipe(packageUMD(generator, [{
|
||||
name: 'Blockly',
|
||||
amd: './core',
|
||||
cjs: './core',
|
||||
}]))
|
||||
.pipe(gulp.rename(rename))
|
||||
.pipe(gulp.dest(packageDistribution));
|
||||
};
|
||||
|
||||
/**
|
||||
* This task wraps javascript_compressed.js into a UMD module.
|
||||
* @example import 'blockly/javascript';
|
||||
*/
|
||||
gulp.task('package-javascript', function() {
|
||||
return packageGenerator('javascript_compressed.js', 'javascript.js', 'Blockly.JavaScript');
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps python_compressed.js into a UMD module.
|
||||
* @example import 'blockly/python';
|
||||
*/
|
||||
gulp.task('package-python', function() {
|
||||
return packageGenerator('python_compressed.js', 'python.js', 'Blockly.Python');
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps lua_compressed.js into a UMD module.
|
||||
* @example import 'blockly/lua';
|
||||
*/
|
||||
gulp.task('package-lua', function() {
|
||||
return packageGenerator('lua_compressed.js', 'lua.js', 'Blockly.Lua');
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps dart_compressed.js into a UMD module.
|
||||
* @example import 'blockly/dart';
|
||||
*/
|
||||
gulp.task('package-dart', function() {
|
||||
return packageGenerator('dart_compressed.js', 'dart.js', 'Blockly.Dart');
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps php_compressed.js into a UMD module.
|
||||
* @example import 'blockly/php';
|
||||
*/
|
||||
gulp.task('package-php', function() {
|
||||
return packageGenerator('php_compressed.js', 'php.js', 'Blockly.PHP');
|
||||
});
|
||||
|
||||
/**
|
||||
* This task wraps each of the msg/js/* files into a UMD module.
|
||||
* @example import * as En from 'blockly/msg/en';
|
||||
*/
|
||||
gulp.task('package-locales', function() {
|
||||
// Remove references to goog.provide and goog.require.
|
||||
return gulp.src('msg/js/*.js')
|
||||
.pipe(gulp.replace(/goog\.[^\n]+/g, ''))
|
||||
.pipe(gulp.insert.prepend(`
|
||||
var Blockly = {};Blockly.Msg={};`))
|
||||
.pipe(packageUMD('Blockly.Msg', [{
|
||||
name: 'Blockly',
|
||||
amd: '../core',
|
||||
cjs: '../core',
|
||||
}]))
|
||||
.pipe(gulp.dest(`${packageDistribution}/msg`));
|
||||
});
|
||||
|
||||
/**
|
||||
* This task creates a UMD bundle of Blockly which includes the Blockly
|
||||
* core files, the built-in blocks, the JavaScript code generator and the
|
||||
* English localization files.
|
||||
* @example <script src="https://unpkg.com/blockly/blockly.min.js"></script>
|
||||
*/
|
||||
gulp.task('package-umd-bundle', function() {
|
||||
var srcs = [
|
||||
'blockly_compressed.js',
|
||||
'msg/js/en.js',
|
||||
'blocks_compressed.js',
|
||||
'javascript_compressed.js'
|
||||
];
|
||||
return gulp.src(srcs)
|
||||
.pipe(gulp.concat('blockly.min.js'))
|
||||
.pipe(packageUMD('Blockly', []))
|
||||
.pipe(gulp.dest(`${packageDistribution}`))
|
||||
});
|
||||
|
||||
/**
|
||||
* This task copies all the media/* files into the distribution directory.
|
||||
*/
|
||||
gulp.task('package-media', function() {
|
||||
return gulp.src('./media/*')
|
||||
.pipe(gulp.dest(`${packageDistribution}/media`));
|
||||
});
|
||||
|
||||
/**
|
||||
* This task copies the package.json file into the distribution directory.
|
||||
*/
|
||||
gulp.task('package-json', function() {
|
||||
return gulp.src('./package.json')
|
||||
.pipe(gulp.dest(`${packageDistribution}`))
|
||||
});
|
||||
|
||||
/**
|
||||
* This task copies the package/README.md file into the distribution directory.
|
||||
* This file is what developers will see at https://www.npmjs.com/package/blockly.
|
||||
*/
|
||||
gulp.task('package-readme', function() {
|
||||
return gulp.src('./package/README.md')
|
||||
.pipe(gulp.dest(`${packageDistribution}`))
|
||||
});
|
||||
|
||||
/**
|
||||
* This task copies the typings/blockly.d.ts TypeScript definition file into the
|
||||
* distribution directory.
|
||||
* The bundled declaration file is referenced in package.json in the types property.
|
||||
*/
|
||||
gulp.task('package-dts', function() {
|
||||
return gulp.src('./typings/blockly.d.ts')
|
||||
.pipe(gulp.dest(`${packageDistribution}`))
|
||||
});
|
||||
|
||||
/**
|
||||
* This task prepares the NPM distribution files under the /dist directory.
|
||||
*/
|
||||
gulp.task('package', gulp.parallel(
|
||||
'package-index',
|
||||
'package-browser',
|
||||
'package-node',
|
||||
'package-core',
|
||||
'package-node-core',
|
||||
'package-blockly',
|
||||
'package-blockly-node',
|
||||
'package-blocks',
|
||||
'package-javascript',
|
||||
'package-python',
|
||||
'package-lua',
|
||||
'package-dart',
|
||||
'package-php',
|
||||
'package-locales',
|
||||
'package-media',
|
||||
'package-umd-bundle',
|
||||
'package-json',
|
||||
'package-readme',
|
||||
'package-dts'
|
||||
));
|
||||
|
||||
// The release task prepares Blockly for an npm release.
|
||||
// It rebuilds the Blockly compressed files and updates the TypeScript
|
||||
// typings, and then packages all the npm release files into the /dist directory
|
||||
gulp.task('release', gulp.series(['build', /*'typings',*/ function() {
|
||||
// Clean directory if exists
|
||||
if (fs.existsSync(packageDistribution)) {
|
||||
rimraf.sync(packageDistribution);
|
||||
}
|
||||
fs.mkdirSync(packageDistribution);
|
||||
}, 'package']));
|
||||
|
||||
// Generates the TypeScript definition file (d.ts) for Blockly.
|
||||
// As well as generating the typings of each of the files under core/ and msg/,
|
||||
@@ -172,4 +621,4 @@ gulp.task('typings', function (cb) {
|
||||
|
||||
// The default task concatenates files for Node.js, using English language
|
||||
// blocks and the JavaScript generator.
|
||||
gulp.task('default', gulp.series(['build', 'blockly_javascript_en']));
|
||||
gulp.task('default', gulp.series(['build', 'blockly_node_javascript_en']));
|
||||
|
||||
19
package.json
19
package.json
@@ -2,7 +2,6 @@
|
||||
"name": "blockly",
|
||||
"version": "2.20190722.0-develop",
|
||||
"description": "Blockly is a library for building visual programming editors.",
|
||||
"main": "blockly_node_javascript_en.js",
|
||||
"keywords": [
|
||||
"blockly"
|
||||
],
|
||||
@@ -18,10 +17,21 @@
|
||||
"name": "Neil Fraser"
|
||||
},
|
||||
"scripts": {
|
||||
"prepare": "gulp blockly_javascript_en",
|
||||
"prepare": "gulp blockly_node_javascript_en",
|
||||
"lint": "eslint .",
|
||||
"typings": "gulp typings",
|
||||
"test": "tests/run_all_tests.sh"
|
||||
"test": "tests/run_all_tests.sh",
|
||||
"package": "gulp package",
|
||||
"release": "gulp release"
|
||||
},
|
||||
"main": "./index.js",
|
||||
"umd": "./blockly.min.js",
|
||||
"unpkg": "./blockly.min.js",
|
||||
"types": "./blockly.d.ts",
|
||||
"browser": {
|
||||
"./node.js": "./browser.js",
|
||||
"./core.js": "./core-browser.js",
|
||||
"./blockly-node.js": "./blockly.js"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"private": true,
|
||||
@@ -36,6 +46,9 @@
|
||||
"gulp-insert": "^0.5.0",
|
||||
"gulp-series": "^1.0.2",
|
||||
"gulp-shell": "^0.7.1",
|
||||
"gulp-rename": "^1.4.0",
|
||||
"gulp-replace": "^1.0.0",
|
||||
"gulp-umd": "^2.0.0",
|
||||
"jshint": "^2.10.2",
|
||||
"mocha": "^6.1.4",
|
||||
"pixelmatch": "^4.0.2",
|
||||
|
||||
77
package/README.md
Normal file
77
package/README.md
Normal file
@@ -0,0 +1,77 @@
|
||||
# Blockly
|
||||
|
||||
Google's Blockly is a web-based, visual programming editor. Users can drag
|
||||
blocks together to build programs. All code is free and open source.
|
||||
|
||||
The source for this module is in the [Blockly repo](http://github.com/google/blockly).
|
||||
|
||||
## Installation
|
||||
|
||||
You can install this package either via ``npm`` or ``unpkg``.
|
||||
|
||||
### npm
|
||||
```bash
|
||||
npm install blockly
|
||||
```
|
||||
|
||||
### unpkg
|
||||
```html
|
||||
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
```js
|
||||
import Blockly from 'blockly';
|
||||
Blockly.inject('blocklyDiv', {
|
||||
...
|
||||
})
|
||||
```
|
||||
|
||||
## Samples
|
||||
|
||||
For samples on how to integrate Blockly into your project, view the list of samples at [blockly-samples](https://github.com/google/blockly-samples).
|
||||
|
||||
|
||||
### Importing Blockly
|
||||
|
||||
When you import Blockly with ``import * as Blockly from 'blockly';`` you'll get the default modules:
|
||||
Blockly core, Blockly built-in blocks, the JavaScript generator and the English lang files.
|
||||
|
||||
If you need more flexibility, you'll want to define your imports more carefully:
|
||||
|
||||
#### Blockly Core
|
||||
|
||||
```js
|
||||
import * as Blockly from 'blockly/core';
|
||||
```
|
||||
|
||||
#### Blockly built in blocks
|
||||
|
||||
```js
|
||||
import 'blockly/blocks';
|
||||
```
|
||||
|
||||
#### Blockly Generators
|
||||
If your application needs to generate code from the Blockly blocks, you'll want to include a generator.
|
||||
|
||||
```js
|
||||
import 'blockly/python';
|
||||
```
|
||||
to include the Python generator, you can also import ``blockly/js``, ``blockly/php``, ``blockly/dart`` and ``blockly/lua``.
|
||||
|
||||
#### Blockly Languages
|
||||
|
||||
```js
|
||||
import * as Fr from 'blockly/msg/fr';
|
||||
Blockly.setLocale(Fr);
|
||||
```
|
||||
|
||||
To import the French lang files. Once you've imported the specific lang module, you'll also want to set the locale in Blockly.
|
||||
|
||||
For a full list of supported Blockly locales, see: [https://github.com/google/blockly/tree/master/msg/js](https://github.com/google/blockly/tree/master/msg/js)
|
||||
|
||||
|
||||
## License
|
||||
|
||||
Apache 2.0
|
||||
32
package/browser/core.js
Normal file
32
package/browser/core.js
Normal file
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @license
|
||||
* Visual Blocks Editor
|
||||
*
|
||||
* Copyright 2019 Google Inc.
|
||||
* https://developers.google.com/blockly/
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @fileoverview Blockly core module for the browser. It includes blockly.js
|
||||
* and adds a helper method for setting the locale.
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
'use strict';
|
||||
|
||||
// Add a helper method to set the Blockly locale.
|
||||
Blockly.setLocale = function(locale) {
|
||||
Blockly.Msg = Object.assign(Blockly.Msg || {}, locale);
|
||||
};
|
||||
35
package/browser/index.js
Normal file
35
package/browser/index.js
Normal file
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* @license
|
||||
* Visual Blocks Editor
|
||||
*
|
||||
* Copyright 2019 Google Inc.
|
||||
* https://developers.google.com/blockly/
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @fileoverview Blockly module for the browser. This includes Blockly core
|
||||
* and built in blocks, the JavaScript code generator and the English block
|
||||
* localization files.
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
'use strict';
|
||||
|
||||
// Include the EN Locale by default.
|
||||
Blockly.setLocale(En);
|
||||
|
||||
Blockly.Blocks = Object.assign(Blockly.Blocks, BlocklyBlocks);
|
||||
|
||||
Blockly.JavaScript = BlocklyJS;
|
||||
26
package/index.js
Normal file
26
package/index.js
Normal file
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @license
|
||||
* Visual Blocks Editor
|
||||
*
|
||||
* Copyright 2019 Google Inc.
|
||||
* https://developers.google.com/blockly/
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @fileoverview Blockly module.
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
'use strict';
|
||||
32
package/node/core.js
Normal file
32
package/node/core.js
Normal file
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @license
|
||||
* Visual Blocks Editor
|
||||
*
|
||||
* Copyright 2019 Google Inc.
|
||||
* https://developers.google.com/blockly/
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @fileoverview Blockly core module for Node. It includes blockly-node.js
|
||||
* and adds a helper method for setting the locale.
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
'use strict';
|
||||
|
||||
// Add a helper method to set the Blockly locale.
|
||||
Blockly.setLocale = function(locale) {
|
||||
Blockly.Msg = Object.assign(Blockly.Msg || {}, locale);
|
||||
};
|
||||
42
package/node/index.js
Normal file
42
package/node/index.js
Normal file
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* @license
|
||||
* Visual Blocks Editor
|
||||
*
|
||||
* Copyright 2019 Google Inc.
|
||||
* https://developers.google.com/blockly/
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @fileoverview Blockly module for Node. It includes Blockly core,
|
||||
* built-in blocks, all the generators and the English locale.
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
'use strict';
|
||||
|
||||
// Include the EN Locale by default.
|
||||
Blockly.setLocale(En);
|
||||
|
||||
Blockly.Blocks = Object.assign(Blockly.Blocks, BlocklyBlocks);
|
||||
|
||||
Blockly.JavaScript = BlocklyJS;
|
||||
|
||||
Blockly.Python = BlocklyPython;
|
||||
|
||||
Blockly.Lua = BlocklyLua;
|
||||
|
||||
Blockly.PHP = BlocklyPHP;
|
||||
|
||||
Blockly.Dart = BlocklyDart;
|
||||
5
package/templates/node.template
Normal file
5
package/templates/node.template
Normal file
@@ -0,0 +1,5 @@
|
||||
/* eslint-disable */
|
||||
(function (<%= param %>){
|
||||
<%= contents %>
|
||||
module.exports = <%= exports %>;
|
||||
})(<%= cjs %>);
|
||||
13
package/templates/umd.template
Normal file
13
package/templates/umd.template
Normal file
@@ -0,0 +1,13 @@
|
||||
/* eslint-disable */
|
||||
;(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) { // AMD
|
||||
define(<%= amd %>, factory);
|
||||
} else if (typeof exports === 'object') { // Node.js
|
||||
module.exports = factory(<%= cjs %>);
|
||||
} else { // Browser
|
||||
root.<%= namespace %> = factory(<%= global %>);
|
||||
}
|
||||
}(this, function(<%= param %>) {
|
||||
<%= contents %>
|
||||
return <%= exports %>;
|
||||
}));
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
This ``blockly.d.ts`` file describes the TypeScript type definitions for Blockly.
|
||||
If you consume Blockly through ``npm``, this file is already included in the ``npm`` package.
|
||||
Otherwise, you can include a copy of this file in your with your sources and reference it through a [Triple-Slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html).
|
||||
Otherwise, you can include a copy of this file with your sources and reference it through a [Triple-Slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html).
|
||||
|
||||
|
||||
## Generating a new version
|
||||
|
||||
120
typings/blockly.d.ts
vendored
120
typings/blockly.d.ts
vendored
@@ -2302,6 +2302,16 @@ declare module Blockly.BlockSvg {
|
||||
|
||||
declare module Blockly {
|
||||
|
||||
/**
|
||||
* Blockly core version.
|
||||
* This constant is overriden by the build script (build.py) to the value of the version
|
||||
* in package.json. This is done during the gen_core build step.
|
||||
* For local builds, you can pass --define='Blockly.VERSION=X.Y.Z' to the compiler
|
||||
* to override this constant.
|
||||
* @define {string}
|
||||
*/
|
||||
var VERSION: any /*missing*/;
|
||||
|
||||
/**
|
||||
* The main workspace most recently used.
|
||||
* Set by Blockly.WorkspaceSvg.prototype.markFocused
|
||||
@@ -4070,6 +4080,12 @@ declare module Blockly {
|
||||
*/
|
||||
constructor(value: any, opt_validator?: Function);
|
||||
|
||||
/**
|
||||
* The size of the area rendered by the field.
|
||||
* @type {Blockly.utils.Size}
|
||||
*/
|
||||
size_: Blockly.utils.Size;
|
||||
|
||||
/**
|
||||
* Name of field. Unique within each block.
|
||||
* Static labels are usually unnamed.
|
||||
@@ -4345,13 +4361,6 @@ declare module Blockly {
|
||||
*/
|
||||
getSize(): Blockly.utils.Size;
|
||||
|
||||
/**
|
||||
* Get the size of the visible field, as used in new rendering.
|
||||
* @return {!Blockly.utils.Size} The size of the visible field.
|
||||
* @package
|
||||
*/
|
||||
getCorrectedSize(): Blockly.utils.Size;
|
||||
|
||||
/**
|
||||
* Returns the bounding box of the rendered field, accounting for workspace
|
||||
* scaling.
|
||||
@@ -4497,6 +4506,27 @@ declare module Blockly.Field {
|
||||
*/
|
||||
var BORDER_RECT_DEFAULT_HEIGHT: number;
|
||||
|
||||
/**
|
||||
* The default height of the text element on any field.
|
||||
* @type {number}
|
||||
* @package
|
||||
*/
|
||||
var TEXT_DEFAULT_HEIGHT: number;
|
||||
|
||||
/**
|
||||
* The padding added to the width by the border rect, if it exists.
|
||||
* @type {number}
|
||||
* @package
|
||||
*/
|
||||
var X_PADDING: number;
|
||||
|
||||
/**
|
||||
* The default offset between the left of the text element and the left of the
|
||||
* border rect, if the border rect exists.
|
||||
* @type {number}
|
||||
*/
|
||||
var DEFAULT_TEXT_OFFSET: number;
|
||||
|
||||
/**
|
||||
* Non-breaking space.
|
||||
* @const
|
||||
@@ -4689,15 +4719,6 @@ declare module Blockly {
|
||||
* ('true' or 'false').
|
||||
*/
|
||||
getText(): string;
|
||||
|
||||
/**
|
||||
* Get the size of the visible field, as used in new rendering.
|
||||
* The checkbox field fills the entire border rect, rather than just using the
|
||||
* text element.
|
||||
* @return {!Blockly.utils.Size} The size of the visible field.
|
||||
* @package
|
||||
*/
|
||||
getCorrectedSize(): Blockly.utils.Size;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -4818,15 +4839,6 @@ declare module Blockly {
|
||||
* @return {!Blockly.FieldColour} Returns itself (for method chaining).
|
||||
*/
|
||||
setColumns(columns: number): Blockly.FieldColour;
|
||||
|
||||
/**
|
||||
* Get the size of the visible field, as used in new rendering.
|
||||
* The colour field fills the bounding box with colour and takes up the full
|
||||
* space of the bounding box.
|
||||
* @return {!Blockly.utils.Size} The size of the visible field.
|
||||
* @package
|
||||
*/
|
||||
getCorrectedSize(): Blockly.utils.Size;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -5018,13 +5030,6 @@ declare module Blockly {
|
||||
* @package
|
||||
*/
|
||||
updateColour(): void;
|
||||
|
||||
/**
|
||||
* Get the size of the visible field, as used in new rendering.
|
||||
* @return {!Blockly.utils.Size} The size of the visible field.
|
||||
* @package
|
||||
*/
|
||||
getCorrectedSize(): Blockly.utils.Size;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -5050,13 +5055,6 @@ declare module Blockly.FieldDropdown {
|
||||
*/
|
||||
var MAX_MENU_HEIGHT_VH: any /*missing*/;
|
||||
|
||||
/**
|
||||
* Used to position the imageElement_ correctly.
|
||||
* @type {number}
|
||||
* @const
|
||||
*/
|
||||
var IMAGE_Y_OFFSET: number;
|
||||
|
||||
/**
|
||||
* Android can't (in 2014) display "▾", so use "▼" instead.
|
||||
*/
|
||||
@@ -5206,13 +5204,6 @@ declare module Blockly {
|
||||
* @protected
|
||||
*/
|
||||
doClassValidation_(opt_newValue?: string): string;
|
||||
|
||||
/**
|
||||
* Get the size of the visible field, as used in new rendering.
|
||||
* @return {!Blockly.utils.Size} The size of the visible field.
|
||||
* @package
|
||||
*/
|
||||
getCorrectedSize(): Blockly.utils.Size;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -5425,13 +5416,6 @@ declare module Blockly {
|
||||
* @protected
|
||||
*/
|
||||
resizeEditor_(): void;
|
||||
|
||||
/**
|
||||
* Get the size of the visible field, as used in new rendering.
|
||||
* @return {!Blockly.utils.Size} The size of the visible field.
|
||||
* @package
|
||||
*/
|
||||
getCorrectedSize(): Blockly.utils.Size;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -11226,9 +11210,8 @@ declare module Blockly.ASTNode {
|
||||
|
||||
/**
|
||||
* Object holding different types for an AST node.
|
||||
* @enum {string}
|
||||
*/
|
||||
enum types { FIELD, BLOCK, INPUT, OUTPUT, NEXT, PREVIOUS, STACK, WORKSPACE }
|
||||
var types: any /*missing*/;
|
||||
|
||||
/**
|
||||
* Whether an AST node of the given type points to a connection.
|
||||
@@ -12187,6 +12170,33 @@ declare module Blockly.utils._string {
|
||||
}
|
||||
|
||||
|
||||
declare module Blockly.utils.style {
|
||||
|
||||
/**
|
||||
* Gets the height and width of an element.
|
||||
* Similar to Closure's goog.style.getSize.
|
||||
* @param {Element} element Element to get size of.
|
||||
* @return {!Blockly.utils.Size} Object with width/height properties.
|
||||
*/
|
||||
function getSize(element: Element): Blockly.utils.Size;
|
||||
|
||||
/**
|
||||
* Returns a Coordinate object relative to the top-left of the HTML document.
|
||||
* Similar to Closure's goog.style.getPageOffset.
|
||||
* @param {Element} el Element to get the page offset for.
|
||||
* @return {!Blockly.utils.Coordinate} The page offset.
|
||||
*/
|
||||
function getPageOffset(el: Element): Blockly.utils.Coordinate;
|
||||
|
||||
/**
|
||||
* Calculates the viewport coordinates relative to the document.
|
||||
* Similar to Closure's goog.style.getViewportPageOffset.
|
||||
* @return {!Blockly.utils.Coordinate} The page offset of the viewport.
|
||||
*/
|
||||
function getViewportPageOffset(): Blockly.utils.Coordinate;
|
||||
}
|
||||
|
||||
|
||||
declare module Blockly.utils.svgPaths {
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": false,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../node_modules/@types"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"blockly.d.ts"
|
||||
]
|
||||
}
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": false,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../node_modules/@types"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"blockly.d.ts"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user