Skip to content

Cannot get started with project examples #1864

@explorigin

Description

@explorigin

Describe the bug
I have followed https://github.com/KanoComputing/kano-code/blob/master/SETUP.md up to "Browse the directories under examples to run the editor." and I cannot see anything meaningful in a browser

To Reproduce
Steps to reproduce the behavior:

  1. clone the repo
  2. run yarn
  3. run yarn tsc --watch
  4. Switch to another terminal
  5. run yarn serve
  6. Open a browser to http://localhost:8000 (observe blank page)
  7. Open a browser to http://localhost:8000/examples/activity-bar/index.html (observe blank page)

Expected behavior
To see something like remotely similar to what I see at https://code.kano.me/challenge/loops/FN000_Blocks_1

Desktop (please complete the following information):

  • OS: OSX 10.14.6
  • Browser FF and Chrome
  • Version Evergreen

Additional context
If I run yarn build I get quite a few errors:

➜  kano-code git:(master) yarn build
yarn run v1.22.5
$ yarn clean && yarn vendor && yarn build:src && yarn build:def
$ rimraf ./dist
$ yarn vendor:monaco
$ yarn transform-monaco-css && yarn bundle-monaco-workers && yarn copy-monaco-sources
$ node ./scripts/transform-monaco.js
$ yarn bundle-monaco-worker:editor && yarn bundle-monaco-worker:ts
$ rollup node_modules/monaco-editor/esm/vs/editor/editor.worker.js -f iife --name editorWorker -o ./dist/vendor/monaco-workers/editor.worker.js

node_modules/monaco-editor/esm/vs/editor/editor.worker.js → ./dist/vendor/monaco-workers/editor.worker.js...
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js
3:  *  Licensed under the MIT License. See License.txt in the project root for license information.
4:  *--------------------------------------------------------------------------------------------*/
5: var __extends = (this && this.__extends) || (function () {
                    ^
6:     var extendStatics = function (d, b) {
7:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js
3:  *  Licensed under the MIT License. See License.txt in the project root for license information.
4:  *--------------------------------------------------------------------------------------------*/
5: var __extends = (this && this.__extends) || (function () {
                    ^
6:     var extendStatics = function (d, b) {
7:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules/monaco-editor/esm/vs/base/common/iterator.js
3:  *  Licensed under the MIT License. See License.txt in the project root for license information.
4:  *--------------------------------------------------------------------------------------------*/
5: var __extends = (this && this.__extends) || (function () {
                    ^
6:     var extendStatics = function (d, b) {
7:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence

...and 3 other files
created ./dist/vendor/monaco-workers/editor.worker.js in 770ms
$ rollup node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js -f iife --name tsWorker -o ./dist/vendor/monaco-workers/ts.worker.js

node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js → ./dist/vendor/monaco-workers/ts.worker.js...
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js
3:  *  Licensed under the MIT License. See License.txt in the project root for license information.
4:  *--------------------------------------------------------------------------------------------*/
5: var __extends = (this && this.__extends) || (function () {
                    ^
6:     var extendStatics = function (d, b) {
7:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js
3:  *  Licensed under the MIT License. See License.txt in the project root for license information.
4:  *--------------------------------------------------------------------------------------------*/
5: var __extends = (this && this.__extends) || (function () {
                    ^
6:     var extendStatics = function (d, b) {
7:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules/monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js
15:
16: "use strict";
17: var __assign = (this && this.__assign) || function () {
                    ^
18:     __assign = Object.assign || function(t) {
19:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 7 other occurrences

...and 4 other files
created ./dist/vendor/monaco-workers/ts.worker.js in 8.5s
$ node ./scripts/copy-monaco.js
$ tsc
$ tsc --allowJs false --declaration --emitDeclarationOnly || exit 0
src/app/elements/kano-app-editor/kano-app-editor.ts:12:36 - error TS7016: Could not find a declaration file for module '../kc-workspace-toolbar/kc-workspace-toolbar.js'. '/Users/tim2957/projects/kano-code/src/app/elements/kc-workspace-toolbar/kc-workspace-toolbar.js' implicitly has an 'any' type.

12 import { KCWorkspaceToolbar } from '../kc-workspace-toolbar/kc-workspace-toolbar.js';
                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/lib/meta-api/module.ts:34:32 - error TS2304: Cannot find name 'Blockly'.

34         customField?(Blockly : Blockly, block : Block) : Field;
                                  ~~~~~~~

src/app/lib/meta-api/module.ts:34:32 - error TS4033: Property 'blockly' of exported interface has or is using private name 'Blockly'.

34         customField?(Blockly : Blockly, block : Block) : Field;
                                  ~~~~~~~

src/app/lib/meta-api/module.ts:36:31 - error TS2304: Cannot find name 'Blockly'.

36         javascript?(Blockly : Blockly, block : Block, m : MetaFunction) : string|string[];
                                 ~~~~~~~

src/app/lib/meta-api/module.ts:36:31 - error TS4033: Property 'blockly' of exported interface has or is using private name 'Blockly'.

36         javascript?(Blockly : Blockly, block : Block, m : MetaFunction) : string|string[];
                                 ~~~~~~~

src/app/lib/modules/color/api.ts:31:24 - error TS2304: Cannot find name 'Blockly'.

31     register(Blockly : Blockly) {
                          ~~~~~~~

src/app/lib/modules/control/api.ts:53:24 - error TS2304: Cannot find name 'Blockly'.

53     register(Blockly : Blockly) {
                          ~~~~~~~

src/app/lib/modules/draw/api.ts:98:28 - error TS2304: Cannot find name 'Blockly'.

98         register(Blockly : Blockly) {
                              ~~~~~~~

src/app/lib/modules/draw/blocks/repeats.ts:8:49 - error TS2304: Cannot find name 'Blockly'.

8 export const registerRepeatDrawing = (Blockly : Blockly, defaultColor: string) => {
                                                  ~~~~~~~

src/app/lib/modules/draw/blocks/repeats.ts:59:50 - error TS2304: Cannot find name 'Blockly'.

59 export const registerRepeatInCircle = (Blockly : Blockly, defaultColor: string) => {
                                                    ~~~~~~~

src/app/lib/modules/draw/fields/angle-picker.ts:9:46 - error TS2304: Cannot find name 'Blockly'.

9 export const registerAnglePicker = (Blockly: Blockly) => {
                                               ~~~~~~~

src/app/lib/modules/lists/api.ts:27:24 - error TS2304: Cannot find name 'Blockly'.

27     register(Blockly : Blockly) {
                          ~~~~~~~

src/app/lib/modules/logic/api.ts:29:24 - error TS2304: Cannot find name 'Blockly'.

29     register(Blockly : Blockly) {
                          ~~~~~~~

src/app/lib/modules/math/api.ts:46:24 - error TS2304: Cannot find name 'Blockly'.

46     register(Blockly : Blockly) {
                          ~~~~~~~

src/app/lib/modules/stamp/api.ts:37:34 - error TS2304: Cannot find name 'Blockly'.

37             javascript(Blockly : Blockly, block: Block) {
                                    ~~~~~~~

src/app/lib/modules/variables/api.ts:16:24 - error TS2304: Cannot find name 'Blockly'.

16     register(Blockly : Blockly) {
                          ~~~~~~~

src/app/lib/parts/parts/sequencer/api.ts:85:34 - error TS2304: Cannot find name 'Blockly'.

85             javascript(Blockly : Blockly, block : Block, m : Meta) {
                                    ~~~~~~~

src/app/lib/parts/parts/speaker/factory.ts:34:34 - error TS2304: Cannot find name 'Blockly'.

34             javascript(Blockly : Blockly, block : Block) {
                                    ~~~~~~~

src/app/lib/parts/parts/transform/api.ts:54:34 - error TS2304: Cannot find name 'Blockly'.

54             javascript(Blockly : Blockly, block : Block, m : Meta) {
                                    ~~~~~~~

src/app/lib/preview/providers/gif.ts:6:28 - error TS7016: Could not find a declaration file for module '../../gif-encoder/encoder.js'. '/Users/tim2957/projects/kano-code/src/app/lib/gif-encoder/encoder.js' implicitly has an 'any' type.

6 import { GifEncoder } from '../../gif-encoder/encoder.js';
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/lib/source-editor/blockly/api-renderer.ts:58:26 - error TS2304: Cannot find name 'Blockly'.

58         mod.def.register(Blockly);
                            ~~~~~~~

src/app/lib/source-editor/blockly/api-renderer.ts:140:18 - error TS2304: Cannot find name 'Blockly'.

140         register(Blockly);
                     ~~~~~~~

src/app/lib/source-editor/blockly/api-renderer.ts:473:14 - error TS2304: Cannot find name 'Blockly'.

473             (Blockly as any).Blocks[alias] = (Blockly as any).Blocks[id];
                 ~~~~~~~

src/app/lib/source-editor/blockly/api-renderer.ts:473:47 - error TS2304: Cannot find name 'Blockly'.

473             (Blockly as any).Blocks[alias] = (Blockly as any).Blocks[id];
                                                  ~~~~~~~

src/app/lib/source-editor/blockly/api-renderer.ts:474:14 - error TS2304: Cannot find name 'Blockly'.

474             (Blockly as any).JavaScript[alias] = (Blockly as any).JavaScript[id];
                 ~~~~~~~

src/app/lib/source-editor/blockly/api-renderer.ts:474:51 - error TS2304: Cannot find name 'Blockly'.

474             (Blockly as any).JavaScript[alias] = (Blockly as any).JavaScript[id];
                                                      ~~~~~~~

src/app/lib/source-editor/blockly/creator/toolbox.ts:29:34 - error TS2304: Cannot find name 'Blockly'.

29             javascript(Blockly : Blockly, block : Block) {
                                    ~~~~~~~

src/app/lib/source-editor/blockly/creator/toolbox.ts:49:34 - error TS2304: Cannot find name 'Blockly'.

49             javascript(Blockly : Blockly, block : Block) {
                                    ~~~~~~~

src/app/lib/source-editor/blockly/creator/toolbox.ts:58:34 - error TS2304: Cannot find name 'Blockly'.

58             javascript(Blockly : Blockly) {
                                    ~~~~~~~

src/app/lib/source-editor/blockly/creator/toolbox.ts:76:34 - error TS2304: Cannot find name 'Blockly'.

76             javascript(Blockly : Blockly, block : Block) {
                                    ~~~~~~~

src/app/lib/source-editor/blockly/creator/toolbox.ts:96:34 - error TS2304: Cannot find name 'Blockly'.

96             javascript(Blockly : Blockly, block : Block) {
                                    ~~~~~~~


Found 31 errors.

✨  Done in 30.97s.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions