Closed dukewan closed 4 years ago
Any error?
Reproduce:
src
foldernpm 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';
Ah a typing seem to be missing :)
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);
}
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'
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
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.
Yeah some of those demo was for other libs the flappy bird is for phaserjs (v3) you can check it here
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.
Reopen so that you can close with next pr. Thanks for creating such a useful NativeScript plugin!
fixed
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?
Please, provide the following version numbers that your issue occurs with:
tns --version
to fetch it)node_modules/tns-core-modules/package.json
file in your project)"tns-android"
and"tns-ios"
properties in thepackage.json
file of your project)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?