Unable to run the demo app.

dukewan commented 4 years ago

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital letter.

Which platform(s) does your issue occur on?

iOS/Android/Both
iOS/Android versions
emulator or device. What type of device?

Please, provide the following version numbers that your issue occurs with:

CLI: (run tns --version to fetch it)
Cross-platform modules: (check the 'version' attribute in the node_modules/tns-core-modules/package.json file in your project)
Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
Plugin(s): (look for the version numbers in the package.json file of your project and paste your dependencies and devDependencies here)

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

Is there any code involved?

provide a code example to recreate the problem
(EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

triniwiz commented 4 years ago

Any error?

dukewan commented 4 years ago

Reproduce:

clone a clean copy of the repo
enter src folder
run npm run demo.ios

Error:

canvas-plugin.android.ts:14:15 - error TS2307: Cannot find module './CanvasPattern'.

14 export * from './CanvasPattern';
                 ~~~~~~~~~~~~~~~~~

canvas-plugin.android.ts:17:29 - error TS2307: Cannot find module './CanvasPattern'.

17 import {CanvasPattern} from './CanvasPattern';
                               ~~~~~~~~~~~~~~~~~

canvas-plugin.ios.ts:14:15 - error TS2307: Cannot find module './CanvasPattern'.

14 export * from './CanvasPattern';
                 ~~~~~~~~~~~~~~~~~

canvas-plugin.ios.ts:15:29 - error TS2307: Cannot find module './CanvasPattern'.

15 import {CanvasPattern} from './CanvasPattern';
                               ~~~~~~~~~~~~~~~~~

TNSCanvasRenderingContext2D.android.ts:10:29 - error TS2307: Cannot find module './CanvasPattern'.

10 import {CanvasPattern} from './CanvasPattern';
                               ~~~~~~~~~~~~~~~~~

TNSCanvasRenderingContext2D.ios.ts:10:29 - error TS2307: Cannot find module './CanvasPattern'.

10 import {CanvasPattern} from './CanvasPattern';

triniwiz commented 4 years ago

Ah a typing seem to be missing :)

triniwiz commented 4 years ago

The quickest solution is to create a file named CanvasPattern.d.ts in the src directory with the following contents ... seems like the file was ignored I'll add it in the next push

import {TNSDOMMatrix} from './TNSDOMMatrix';
import {CanvasPatternBase} from './canvas-plugin.common';

export declare class CanvasPattern extends CanvasPatternBase {
    readonly native;
    protected nativeInstance: any;

    constructor(nativeInstance: any);

    public setTransform(matrix: TNSDOMMatrix);
}

dukewan commented 4 years ago

Thanks, adding CanvasPattern.d.ts allows me to go further.

But the demo still won't bring up with errors:

nativescript-vue is missing in demo package.json
webgl, webgl2 folder has no source code but demo imports them. Along with nativescript-phaser missing.

ERROR in ./flappybird/game.ts
Module not found: Error: Can't resolve '../nativescript-phaser' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/flappybird'
 @ ./flappybird/game.ts 1:0-47 540:15-24
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./phaser-example/phaser-example-view-model.ts
Module not found: Error: Can't resolve '../nativescript-phaser-ce' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/phaser-example'
 @ ./phaser-example/phaser-example-view-model.ts 5:0-50 128:20-29
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./home/home-page.ts
Module not found: Error: Can't resolve '../webgl/cube-example' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home'
 @ ./home/home-page.ts 63:0-61 356:8-12 1510:33-40 1604:12-16
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./home/home-page.ts
Module not found: Error: Can't resolve '../webgl/cuberotation-rotation' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home'
 @ ./home/home-page.ts 66:0-70 1619:12-32
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./home/home-page.ts
Module not found: Error: Can't resolve '../webgl/drawelements' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home'
 @ ./home/home-page.ts 67:0-65 1587:12-24 1593:12-21
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./home/home-page.ts
Module not found: Error: Can't resolve '../webgl/interactive-cube' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home'
 @ ./home/home-page.ts 65:0-88 1507:33-51 1599:12-27
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./home/home-page.ts
Module not found: Error: Can't resolve '../webgl/textures' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home'
 @ ./home/home-page.ts 64:0-45 1581:12-20
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./home/home-page.ts
Module not found: Error: Can't resolve '../webgl2/draw_image_space' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home'
 @ ./home/home-page.ts 68:0-62 1614:12-28
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./home/home-page.ts
Module not found: Error: Can't resolve '../webgl2/draw_instanced' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home'
 @ ./home/home-page.ts 10:0-59 1609:12-26
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./home/home-page.ts
Module not found: Error: Can't resolve '../webgl2/environment-map' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home'
 @ ./home/home-page.ts 69:0-86 1520:33-50 1630:12-26
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./home/home-page.ts
Module not found: Error: Can't resolve '../webgl2/fog' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home'
 @ ./home/home-page.ts 70:0-51 1517:33-39 1625:12-15
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./games/breakout/breakout.ts
Module not found: Error: Can't resolve './breakout-game' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/games/breakout'
 @ ./games/breakout/breakout.ts 1:0-44 10:4-13
 @ . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$
 @ ./app.ts

ERROR in ./app.ts
Module not found: Error: Can't resolve 'nativescript-browser-polyfill' in '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/app'
 @ ./app.ts 56:0-39

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/flappybird/game.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/flappybird/game.ts(1,23):
TS2307: Cannot find module '../nativescript-phaser'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/games/breakout/breakout.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/games/breakout/breakout.ts(1,27):
TS2307: Cannot find module './breakout-game'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(28,8):
TS2307: Cannot find module '../webgl2/draw_instanced'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(94,36):
TS2307: Cannot find module '../webgl/cube-example'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(95,24):
TS2307: Cannot find module '../webgl/textures'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(96,52):
TS2307: Cannot find module '../webgl/cube-rotation'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(100,8):
TS2307: Cannot find module '../webgl/interactive-cube'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(101,36):
TS2307: Cannot find module '../webgl/cuberotation-rotation'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(109,8):
TS2307: Cannot find module '../webgl/drawelements'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(110,31):
TS2307: Cannot find module '../webgl/webgl-image-processing'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(111,27):
TS2307: Cannot find module '../webgl/image-filter'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(112,32):
TS2307: Cannot find module '../webgl2/draw_image_space'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(116,8):
TS2307: Cannot find module '../webgl2/environment-map'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/home/home-page.ts(117,34):
TS2307: Cannot find module '../webgl2/fog'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/phaser-example/phaser-example-view-model.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/demo/app/phaser-example/phaser-example-view-model.ts(5,23):
TS2307: Cannot find module '../nativescript-phaser-ce'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts(62,13):
TS2717: Subsequent property declarations must have the same type.  Property 'button' must be of type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>', but here has type 'NativeScriptProps<ButtonAttributes, Button>'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts(72,13):
TS2717: Subsequent property declarations must have the same type.  Property 'image' must be of type 'SVGProps<SVGImageElement>', but here has type 'NativeScriptProps<ImageAttributes, Image>'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts(73,13):
TS2717: Subsequent property declarations must have the same type.  Property 'label' must be of type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>', but here has type 'NativeScriptProps<LabelAttributes, Label>'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts(79,13):
TS2717: Subsequent property declarations must have the same type.  Property 'progress' must be of type 'DetailedHTMLProps<ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>', but here has type 'NativeScriptProps<ProgressAttributes, Progress>'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts(85,13):
TS2717: Subsequent property declarations must have the same type.  Property 'span' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>', but here has type 'NativeScriptProps<SpanAttributes, Span>'.

ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts
ERROR in /Users/1mhz/code/test/nativescript-canvas-plugin/src/node_modules/react-nativescript/dist/index.d.ts(87,13):
TS2717: Subsequent property declarations must have the same type.  Property 'switch' must be of type 'SVGProps<SVGSwitchElement>', but here has type 'NativeScriptProps<SwitchAttributes, Switch>'.
Webpack compilation complete. Watching for file changes.
Webpack build done!
ENOENT: no such file or directory, lstat '/Users/1mhz/code/test/nativescript-canvas-plugin/demo/node_modules/nativescript-browser-polyfill/package.json'

triniwiz commented 4 years ago

Those will need to be added to the .gitignore since most of them are .js for another temp solution I zipped my demo you can grab it here everything will be included in the next pr ... Thanks for trying

dukewan commented 4 years ago

Thanks for sending the zip file, after replacing the app folder and fixing following dependencies I was able to run the demo now:

nativescript-browser-polyfill
tns-core-modules
vexflow
xmldom-qsa

Though it still have some typescript errors, the demo is running fine. I intended to check the flappybird demo but it does not work for me.

Simulator Screen Shot - iPad Air (3rd generation) - 2020-07-09 at 23 32 40

triniwiz commented 4 years ago

Yeah some of those demo was for other libs the flappy bird is for phaserjs (v3) you can check it here

triniwiz commented 4 years ago

There are other libs PhaserJS (v3) :- here PhaserJS (ce) :- here ThreeJS. :- here PixiJS :- here

dukewan commented 4 years ago

I was using nativescript-canvas-plugin along with nativescript-vue, your plugin is good as it has the same API as html canvas.

I ran into a problem that the canvas will flicker when trying to update the canvas after the ready method has executed. So tried to check the demo to see if they have the same issue. It turns out your demo was able to update the canvas without flickering. Will investigate my implementation to see if I can find out why it's flickering.

dukewan commented 4 years ago

Reopen so that you can close with next pr. Thanks for creating such a useful NativeScript plugin!

triniwiz commented 4 years ago

fixed

triniwiz / nativescript-canvas-plugin